import * as React from "react"; import * as Constants from "~/common/constants"; import * as Validations from "~/common/validations"; import * as Window from "~/common/window"; import * as SVG from "~/common/svg"; import * as Actions from "~/common/actions"; import * as Events from "~/common/custom-events"; import * as System from "~/components/system"; import { css } from "@emotion/react"; import { PrimaryTabGroup } from "~/components/core/TabGroup"; import ScenePage from "~/components/core/ScenePage"; import SlateMediaObjectPreview from "~/components/core/SlateMediaObjectPreview"; import ScenePageHeader from "~/components/core/ScenePageHeader"; const STYLES_VIDEO_BIG = css` display: block; background-color: ${Constants.system.moonstone}; padding: 0; outline: 0; margin: 48px auto 88px auto; border-radius: 4px; width: 100%; box-shadow: 0px 10px 50px 20px rgba(0, 0, 0, 0.1); @media (max-width: ${Constants.sizes.tablet}px) { margin: 32px auto 64px auto; } @media (max-width: ${Constants.sizes.mobile}px) { margin: 24px auto 48px auto; } `; const STYLES_IMAGE_BOX = css` cursor: pointer; position: relative; box-shadow: ${Constants.shadow.light}; margin: 10px; :hover { box-shadow: ${Constants.shadow.medium}; } `; const STYLES_TEXT_AREA = css` position: absolute; bottom: 0px; left: 0px; `; const STYLES_TITLE = css` overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: ${Constants.system.white}; font-family: ${Constants.font.medium}; margin-bottom: 4px; width: calc(100% - 32px); padding: 0px 16px; box-sizing: content-box; `; const STYLES_SECONDARY = css` ${STYLES_TITLE} font-size: ${Constants.typescale.lvlN1}; margin-bottom: 16px; width: 100%; `; const STYLES_GRADIENT = css` background: linear-gradient( 180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 26.56%, rgba(0, 0, 0, 0.3) 100% ); backdrop-filter: blur(2px); width: 100%; height: 72px; position: absolute; bottom: 0px; left: 0px; `; const STYLES_ACTIVITY_GRID = css` margin: -10px; display: flex; flex-direction: row; flex-wrap: wrap; `; class ActivitySquare extends React.Component { state = { showText: false, }; render() { const item = this.props.item; const size = this.props.size; const isImage = Validations.isPreviewableImage(item.file.type); return (
this.setState({ showText: true }) : () => {}} onMouseLeave={isImage ? () => this.setState({ showText: false }) : () => {}} > {isImage && this.state.showText ?
: null} {this.state.showText || !isImage ? (
{isImage ? null : (
{item.file.title || item.file.name}
)}
{isImage ? ( ) : null} {item.slate.data.name || item.slate.slatename}
) : null}
); } } const ActivityRectangle = ({ item, size }) => { let file; for (let obj of item.slate?.data?.objects || []) { if (Validations.isPreviewableImage(obj.type) || obj.coverImage) { file = obj; } } let numObjects = item.slate?.data?.objects?.length || 0; return (
{file ? ( ) : null}
{item.slate.data.name || item.slate.slatename}
{numObjects} File{numObjects == 1 ? "" : "s"}
); }; export default class SceneActivity extends React.Component { state = { imageSize: 200, tab: 0, }; async componentDidMount() { this.calculateWidth(); this.debounceInstance = Window.debounce(this.calculateWidth, 200); window.addEventListener("resize", this.debounceInstance); //slates with no previewable images in them? //filter to remove ones you no longer follow } componentWillUnmount() { window.removeEventListener("resize", this.debounceInstance); } _handleCreateSlate = () => { this.props.onAction({ type: "NAVIGATE", value: "NAV_SLATES", data: null, }); }; calculateWidth = () => { let windowWidth = window.innerWidth; let imageSize; if (windowWidth < Constants.sizes.mobile) { imageSize = (windowWidth - 2 * 24 - 20) / 2; } else { imageSize = (windowWidth - 2 * 56 - 5 * 20) / 6; } this.setState({ imageSize }); }; render() { let activity = this.props.viewer.activity; return ( } /> {activity.length ? (
{activity.map((item) => { if (item.data.type === "SUBSCRIBED_CREATE_SLATE") { return ( this.props.onAction({ type: "NAVIGATE", value: "NAV_SLATE", data: { decorator: "SLATE", ...item.data.context.slate }, }) } > ); } else if (item.data.type === "SUBSCRIBED_ADD_TO_SLATE") { return ( { this.props.onAction({ type: "NAVIGATE", value: "NAV_SLATE", data: { decorator: "SLATE", ...item.data.context.slate, pageState: { cid: item.data.context.file.cid, }, }, }); }} > ); } else { return null; } })}
) : ( When you're ready, create a slate!
Create a slate
)}
); } }