"Initial commit"

demo/frontend/src/common/components/options/TryAnotherVideoSection.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import GalleryOption from '@/common/components/options/GalleryOption';
+import UploadOption from '@/common/components/options/UploadOption';
+import {OBJECT_TOOLBAR_INDEX} from '@/common/components/toolbar/ToolbarConfig';
+import useVideo from '@/common/components/video/editor/useVideo';
+import useScreenSize from '@/common/screen/useScreenSize';
+
+type Props = {
+  onTabChange: (tabIndex: number) => void;
+};
+
+export default function TryAnotherVideoSection({onTabChange}: Props) {
+  const {isMobile} = useScreenSize();
+  const video = useVideo();
+
+  function handleVideoChange() {
+    if (video != null) {
+      video.pause();
+      video.frame = 0;
+    }
+    onTabChange(OBJECT_TOOLBAR_INDEX);
+  }
+
+  if (isMobile) {
+    return (
+      <div className="px-8 pb-8">
+        <div className="font-medium text-gray-300 text-sm">
+          Or, try another video
+        </div>
+        <div className="flex flex-row gap-4 mt-4 w-full">
+          <div className="flex-1">
+            <UploadOption onUpload={handleVideoChange} />
+          </div>
+          <div className="flex-1">
+            <GalleryOption onChangeVideo={handleVideoChange} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-8 pb-8">
+      <div className="font-medium text-gray-300 text-base">
+        Try another video
+      </div>
+      <div className="flex flex-col gap-4 mt-4">
+        <UploadOption onUpload={handleVideoChange} />
+        <GalleryOption onChangeVideo={handleVideoChange} />
+      </div>
+    </div>
+  );
+}

demo/frontend/src/common/components/options/UploadOption.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useUploadVideo from '@/common/components/gallery/useUploadVideo';
+import OptionButton from '@/common/components/options/OptionButton';
+import Logger from '@/common/logger/Logger';
+import useScreenSize from '@/common/screen/useScreenSize';
+import {sessionAtom, uploadingStateAtom} from '@/demo/atoms';
+import {MAX_UPLOAD_FILE_SIZE} from '@/demo/DemoConfig';
+import {Close, CloudUpload} from '@carbon/icons-react';
+import {useSetAtom} from 'jotai';
+import {useNavigate} from 'react-router-dom';
+
+type Props = {
+  onUpload: () => void;
+};
+
+export default function UploadOption({onUpload}: Props) {
+  const navigate = useNavigate();
+  const {isMobile} = useScreenSize();
+  const setUploadingState = useSetAtom(uploadingStateAtom);
+  const setSession = useSetAtom(sessionAtom);
+
+  const {getRootProps, getInputProps, isUploading, error} = useUploadVideo({
+    onUpload: videoData => {
+      navigate(
+        {pathname: location.pathname, search: location.search},
+        {state: {video: videoData}},
+      );
+      onUpload();
+      setUploadingState('default');
+      setSession(null);
+    },
+    onUploadError: (error: Error) => {
+      setUploadingState('error');
+      Logger.error(error);
+    },
+    onUploadStart: () => {
+      setUploadingState('uploading');
+    },
+  });
+
+  return (
+    <div className="cursor-pointer" {...getRootProps()}>
+      <input {...getInputProps()} />
+
+      <OptionButton
+        variant="gradient"
+        title={
+          error !== null ? (
+            'Upload Error'
+          ) : isMobile ? (
+            <>
+              Upload{' '}
+              <div className="text-xs opacity-70">
+                Max {MAX_UPLOAD_FILE_SIZE}
+              </div>
+            </>
+          ) : (
+            <>
+              Upload your own{' '}
+              <div className="text-xs opacity-70">
+                Max {MAX_UPLOAD_FILE_SIZE}
+              </div>
+            </>
+          )
+        }
+        Icon={error !== null ? Close : CloudUpload}
+        loadingProps={{loading: isUploading, label: 'Uploading...'}}
+        onClick={() => {}}
+      />
+    </div>
+  );
+}

demo/frontend/src/common/components/options/__generated__/GetLinkOptionShareVideoMutation.graphql.ts

+/**
+ * @generated SignedSource<<39d7e92a6c15de1583c90ae21a7825e5>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+export type GetLinkOptionShareVideoMutation$variables = {
+  file: any;
+};
+export type GetLinkOptionShareVideoMutation$data = {
+  readonly uploadSharedVideo: {
+    readonly path: string;
+  };
+};
+export type GetLinkOptionShareVideoMutation = {
+  response: GetLinkOptionShareVideoMutation$data;
+  variables: GetLinkOptionShareVideoMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "file"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "file",
+        "variableName": "file"
+      }
+    ],
+    "concreteType": "SharedVideo",
+    "kind": "LinkedField",
+    "name": "uploadSharedVideo",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "path",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "GetLinkOptionShareVideoMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "GetLinkOptionShareVideoMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "f02ec81a41c8d75c3733853e1fb04f58",
+    "id": null,
+    "metadata": {},
+    "name": "GetLinkOptionShareVideoMutation",
+    "operationKind": "mutation",
+    "text": "mutation GetLinkOptionShareVideoMutation(\n  $file: Upload!\n) {\n  uploadSharedVideo(file: $file) {\n    path\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "c1b085da9afaac5f19eeb99ff561ed55";
+
+export default node;

demo/frontend/src/common/components/options/useDownloadVideo.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {getFileName} from '@/common/components/options/ShareUtils';
+import {
+  EncodingCompletedEvent,
+  EncodingStateUpdateEvent,
+} from '@/common/components/video/VideoWorkerBridge';
+import useVideo from '@/common/components/video/editor/useVideo';
+import {MP4ArrayBuffer} from 'mp4box';
+import {useState} from 'react';
+
+type DownloadingState = 'default' | 'started' | 'encoding' | 'completed';
+
+type State = {
+  state: DownloadingState;
+  progress: number;
+  download: (shouldSave?: boolean) => Promise<MP4ArrayBuffer>;
+};
+
+export default function useDownloadVideo(): State {
+  const [downloadingState, setDownloadingState] =
+    useState<DownloadingState>('default');
+  const [progress, setProgress] = useState<number>(0);
+
+  const video = useVideo();
+
+  async function download(shouldSave = true): Promise<MP4ArrayBuffer> {
+    return new Promise(resolve => {
+      function onEncodingStateUpdate(event: EncodingStateUpdateEvent) {
+        setDownloadingState('encoding');
+        setProgress(event.progress);
+      }
+
+      function onEncodingComplete(event: EncodingCompletedEvent) {
+        const file = event.file;
+
+        if (shouldSave) {
+          saveVideo(file, getFileName());
+        }
+
+        video?.removeEventListener('encodingCompleted', onEncodingComplete);
+        video?.removeEventListener(
+          'encodingStateUpdate',
+          onEncodingStateUpdate,
+        );
+        setDownloadingState('completed');
+        resolve(file);
+      }
+
+      video?.addEventListener('encodingStateUpdate', onEncodingStateUpdate);
+      video?.addEventListener('encodingCompleted', onEncodingComplete);
+
+      if (downloadingState === 'default' || downloadingState === 'completed') {
+        setDownloadingState('started');
+        video?.pause();
+        video?.encode();
+      }
+    });
+  }
+
+  function saveVideo(file: MP4ArrayBuffer, fileName: string) {
+    const blob = new Blob([file]);
+    const url = window.URL.createObjectURL(blob);
+
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.setAttribute('href', url);
+    a.setAttribute('download', fileName);
+    a.setAttribute('target', '_self');
+    a.click();
+    window.URL.revokeObjectURL(url);
+  }
+
+  return {download, progress, state: downloadingState};
+}

demo/frontend/src/common/components/session/RestartSessionButton.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useRestartSession from '@/common/components/session/useRestartSession';
+import {Reset} from '@carbon/icons-react';
+import {Button, Loading} from 'react-daisyui';
+
+type Props = {
+  onRestartSession: () => void;
+};
+
+export default function RestartSessionButton({onRestartSession}: Props) {
+  const {restartSession, isLoading} = useRestartSession();
+
+  function handleRestartSession() {
+    restartSession(onRestartSession);
+  }
+
+  return (
+    <Button
+      color="ghost"
+      onClick={handleRestartSession}
+      className="!px-4 !rounded-full font-medium text-white hover:bg-black"
+      startIcon={isLoading ? <Loading size="sm" /> : <Reset size={20} />}>
+      Start over
+    </Button>
+  );
+}

demo/frontend/src/common/components/session/__generated__/useCloseSessionBeforeUnloadMutation.graphql.ts

+/**
+ * @generated SignedSource<<f56872c0a8b65fa7e9bdaff351930ff0>>
+ * @lightSyntaxTransform
+ * @nogrep
+ */
+
+/* tslint:disable */
+/* eslint-disable */
+// @ts-nocheck
+
+import { ConcreteRequest, Mutation } from 'relay-runtime';
+export type CloseSessionInput = {
+  sessionId: string;
+};
+export type useCloseSessionBeforeUnloadMutation$variables = {
+  input: CloseSessionInput;
+};
+export type useCloseSessionBeforeUnloadMutation$data = {
+  readonly closeSession: {
+    readonly success: boolean;
+  };
+};
+export type useCloseSessionBeforeUnloadMutation = {
+  response: useCloseSessionBeforeUnloadMutation$data;
+  variables: useCloseSessionBeforeUnloadMutation$variables;
+};
+
+const node: ConcreteRequest = (function(){
+var v0 = [
+  {
+    "defaultValue": null,
+    "kind": "LocalArgument",
+    "name": "input"
+  }
+],
+v1 = [
+  {
+    "alias": null,
+    "args": [
+      {
+        "kind": "Variable",
+        "name": "input",
+        "variableName": "input"
+      }
+    ],
+    "concreteType": "CloseSession",
+    "kind": "LinkedField",
+    "name": "closeSession",
+    "plural": false,
+    "selections": [
+      {
+        "alias": null,
+        "args": null,
+        "kind": "ScalarField",
+        "name": "success",
+        "storageKey": null
+      }
+    ],
+    "storageKey": null
+  }
+];
+return {
+  "fragment": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Fragment",
+    "metadata": null,
+    "name": "useCloseSessionBeforeUnloadMutation",
+    "selections": (v1/*: any*/),
+    "type": "Mutation",
+    "abstractKey": null
+  },
+  "kind": "Request",
+  "operation": {
+    "argumentDefinitions": (v0/*: any*/),
+    "kind": "Operation",
+    "name": "useCloseSessionBeforeUnloadMutation",
+    "selections": (v1/*: any*/)
+  },
+  "params": {
+    "cacheID": "99b73bd43a9f74104d545778cebbd15c",
+    "id": null,
+    "metadata": {},
+    "name": "useCloseSessionBeforeUnloadMutation",
+    "operationKind": "mutation",
+    "text": "mutation useCloseSessionBeforeUnloadMutation(\n  $input: CloseSessionInput!\n) {\n  closeSession(input: $input) {\n    success\n  }\n}\n"
+  }
+};
+})();
+
+(node as any).hash = "55dd870645c9736b797b90819ddb1b92";
+
+export default node;

demo/frontend/src/common/components/session/useCloseSessionBeforeUnload.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {useCloseSessionBeforeUnloadMutation$variables} from '@/common/components/session/__generated__/useCloseSessionBeforeUnloadMutation.graphql';
+import {sessionAtom} from '@/demo/atoms';
+import useSettingsContext from '@/settings/useSettingsContext';
+import {useAtomValue} from 'jotai';
+import {useEffect, useMemo} from 'react';
+import {ConcreteRequest, graphql} from 'relay-runtime';
+
+/**
+ * The useCloseSessionBeforeUnload is a dirty workaround to send close session
+ * requests on window/tab close. Going through Relay does not send the request
+ * even if the `keepalive` flag is set for the request. It does work when the
+ * fetch is called directly with the close session mutation.
+ *
+ * Caveat: there is static typing, but there might be other caveats around this
+ * quirky hack.
+ */
+export default function useCloseSessionBeforeUnload() {
+  const session = useAtomValue(sessionAtom);
+  const {settings} = useSettingsContext();
+
+  const data = useMemo(() => {
+    if (session == null) {
+      return null;
+    }
+
+    const graphQLTaggedNode = graphql`
+      mutation useCloseSessionBeforeUnloadMutation($input: CloseSessionInput!) {
+        closeSession(input: $input) {
+          success
+        }
+      }
+    ` as ConcreteRequest;
+
+    const variables: useCloseSessionBeforeUnloadMutation$variables = {
+      input: {
+        sessionId: session.id,
+      },
+    };
+
+    const query = graphQLTaggedNode.params.text;
+    if (query === null) {
+      return null;
+    }
+
+    return {
+      query,
+      variables,
+    };
+  }, [session]);
+
+  useEffect(() => {
+    function onBeforeUpload() {
+      if (data == null) {
+        return;
+      }
+
+      fetch(`${settings.inferenceAPIEndpoint}/graphql`, {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        keepalive: true,
+        body: JSON.stringify(data),
+      });
+    }
+    window.addEventListener('beforeunload', onBeforeUpload);
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUpload);
+    };
+  }, [data, session, settings.inferenceAPIEndpoint]);
+}

demo/frontend/src/common/components/session/useRestartSession.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useMessagesSnackbar from '@/common/components/snackbar/useDemoMessagesSnackbar';
+import useVideo from '@/common/components/video/editor/useVideo';
+import useInputVideo from '@/common/components/video/useInputVideo';
+import {
+  activeTrackletObjectIdAtom,
+  isPlayingAtom,
+  isStreamingAtom,
+  labelTypeAtom,
+  trackletObjectsAtom,
+} from '@/demo/atoms';
+import {useAtomValue, useSetAtom} from 'jotai';
+import {useState} from 'react';
+
+export default function useRestartSession() {
+  const [isLoading, setIsLoading] = useState<boolean>();
+  const isPlaying = useAtomValue(isPlayingAtom);
+  const isStreaming = useAtomValue(isStreamingAtom);
+  const setActiveTrackletObjectId = useSetAtom(activeTrackletObjectIdAtom);
+  const setTracklets = useSetAtom(trackletObjectsAtom);
+  const setLabelType = useSetAtom(labelTypeAtom);
+  const {clearMessage} = useMessagesSnackbar();
+
+  const {inputVideo} = useInputVideo();
+  const video = useVideo();
+
+  async function restartSession(onRestart?: () => void) {
+    if (video === null || inputVideo === null) {
+      return;
+    }
+
+    setIsLoading(true);
+    if (isPlaying) {
+      video.pause();
+    }
+    if (isStreaming) {
+      await video.abortStreamMasks();
+    }
+    await video?.startSession(inputVideo.path);
+    video.frame = 0;
+    setActiveTrackletObjectId(0);
+    setTracklets([]);
+    setLabelType('positive');
+    onRestart?.();
+    clearMessage();
+    setIsLoading(false);
+  }
+
+  return {isLoading, restartSession};
+}

demo/frontend/src/common/components/snackbar/DemoMessagesSnackbarUtils.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {EnqueueOption} from '@/common/components/snackbar/useMessagesSnackbar';
+
+export type MessageOptions = EnqueueOption & {
+  repeat?: boolean;
+};
+
+type MessageEvent = {
+  text: string;
+  shown: boolean;
+  action?: Element;
+  options?: MessageOptions;
+};
+
+export interface MessagesEventMap {
+  startSession: MessageEvent;
+  firstClick: MessageEvent;
+  pointClick: MessageEvent;
+  addObjectClick: MessageEvent;
+  trackAndPlayClick: MessageEvent;
+  trackAndPlayComplete: MessageEvent;
+  trackAndPlayThrottlingWarning: MessageEvent;
+  effectsMessage: MessageEvent;
+}
+
+export const defaultMessageMap: MessagesEventMap = {
+  startSession: {
+    text: 'Starting session',
+    shown: false,
+    options: {type: 'loading', showClose: false, repeat: true, duration: 2000},
+  },
+  firstClick: {
+    text: 'Tip: Click on any object in the video to get started.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  pointClick: {
+    text: 'Tip: Not what you expected? Add a few more clicks until the full object you want is selected.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  addObjectClick: {
+    text: 'Tip: Add a new object by clicking on it in the video.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayClick: {
+    text: 'Hang tight while your objects are tracked! You’ll be able to apply visual effects in the next step. Stop tracking at any point to adjust your selections if the tracking doesn’t look right.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayComplete: {
+    text: 'Tip: You can fix tracking issues by going back to the frames where tracking is not quite right and adding or removing clicks.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+  trackAndPlayThrottlingWarning: {
+    text: 'Looks like you have clicked the tracking button a bit too often! To keep things running smoothly, we have temporarily disabled the button.',
+    shown: false,
+    options: {repeat: true},
+  },
+  effectsMessage: {
+    text: 'Tip: If you aren’t sure where to get started, click “Surprise Me” to apply a surprise effect to your video.',
+    shown: false,
+    options: {expire: false, repeat: false},
+  },
+};

demo/frontend/src/common/components/snackbar/MessagesSnackbar.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useScreenSize from '@/common/screen/useScreenSize';
+import {color, gradients} from '@/theme/tokens.stylex';
+import {Close} from '@carbon/icons-react';
+import stylex from '@stylexjs/stylex';
+import {useAtomValue} from 'jotai';
+import {Loading, RadialProgress} from 'react-daisyui';
+import {messageAtom} from './snackbarAtoms';
+import useExpireMessage from './useExpireMessage';
+import useMessagesSnackbar from './useMessagesSnackbar';
+
+const styles = stylex.create({
+  container: {
+    position: 'absolute',
+    top: '8px',
+    right: '8px',
+  },
+  mobileContainer: {
+    position: 'absolute',
+    bottom: '8px',
+    left: '8px',
+    right: '8px',
+  },
+  messageContainer: {
+    padding: '20px 20px',
+    color: '#FFF',
+    borderRadius: '8px',
+    fontSize: '0.9rem',
+    maxWidth: 400,
+    border: '2px solid transparent',
+    background: gradients['yellowTeal'],
+  },
+  messageWarningContainer: {
+    background: '#FFDC32',
+    color: color['gray-900'],
+  },
+  messageContent: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+  },
+  progress: {
+    flexShrink: 0,
+    color: 'rgba(255, 255, 255, 0.1)',
+  },
+  closeColumn: {
+    display: 'flex',
+    alignSelf: 'stretch',
+    alignItems: 'start',
+  },
+});
+
+export default function MessagesSnackbar() {
+  const message = useAtomValue(messageAtom);
+  const {clearMessage} = useMessagesSnackbar();
+  const {isMobile} = useScreenSize();
+
+  useExpireMessage();
+
+  if (message == null) {
+    return null;
+  }
+
+  const closeIcon = (
+    <Close
+      size={24}
+      color={message.type === 'warning' ? color['gray-900'] : 'white'}
+      opacity={1}
+      className="z-20 hover:text-gray-300 color-white cursor-pointer !opacity-100 shrink-0"
+      onClick={clearMessage}
+    />
+  );
+
+  return (
+    <div
+      {...stylex.props(isMobile ? styles.mobileContainer : styles.container)}>
+      <div
+        {...stylex.props(
+          styles.messageContainer,
+          message.type === 'warning' && styles.messageWarningContainer,
+        )}>
+        <div {...stylex.props(styles.messageContent)}>
+          <div>{message.text}</div>
+          {message.type === 'loading' && <Loading size="xs" variant="dots" />}
+          {message.showClose && (
+            <div {...stylex.props(styles.closeColumn)}>
+              {message.expire ? (
+                <RadialProgress
+                  value={message.progress * 100}
+                  size="32px"
+                  thickness="2px"
+                  {...stylex.props(styles.progress)}>
+                  {closeIcon}
+                </RadialProgress>
+              ) : (
+                closeIcon
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

demo/frontend/src/common/components/snackbar/snackbarAtoms.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {atom} from 'jotai';
+
+export type MessageType = 'info' | 'loading' | 'warning';
+
+export type Message = {
+  type: MessageType;
+  text: string;
+  duration: number;
+  progress: number;
+  startTime: number;
+  expire: boolean;
+  showClose: boolean;
+  showReset: boolean;
+};
+
+export const messageAtom = atom<Message | null>(null);

demo/frontend/src/common/components/snackbar/useDemoMessagesSnackbar.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {MessagesEventMap} from '@/common/components/snackbar/DemoMessagesSnackbarUtils';
+import useMessagesSnackbar from '@/common/components/snackbar/useMessagesSnackbar';
+import {messageMapAtom} from '@/demo/atoms';
+import {useAtom} from 'jotai';
+import {useCallback} from 'react';
+
+type State = {
+  enqueueMessage: (messageType: keyof MessagesEventMap) => void;
+  clearMessage: () => void;
+};
+
+export default function useDemoMessagesSnackbar(): State {
+  const [messageMap, setMessageMap] = useAtom(messageMapAtom);
+  const {enqueueMessage: enqueue, clearMessage} = useMessagesSnackbar();
+
+  const enqueueMessage = useCallback(
+    (messageType: keyof MessagesEventMap) => {
+      const {text, shown, options} = messageMap[messageType];
+      if (!options?.repeat && shown === true) {
+        return;
+      }
+      enqueue(text, options);
+      const newState = {...messageMap};
+      newState[messageType].shown = true;
+      setMessageMap(newState);
+    },
+    [enqueue, messageMap, setMessageMap],
+  );
+
+  return {enqueueMessage, clearMessage};
+}

demo/frontend/src/common/components/snackbar/useExpireMessage.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {useAtom} from 'jotai';
+import {useEffect, useRef} from 'react';
+import {Message, messageAtom} from '@/common/components/snackbar/snackbarAtoms';
+
+export default function useExpireMessage() {
+  const [message, setMessage] = useAtom(messageAtom);
+  const messageRef = useRef<Message | null>(null);
+  const intervalRef = useRef<NodeJS.Timeout | null>(null);
+
+  useEffect(() => {
+    messageRef.current = message;
+  }, [message]);
+
+  useEffect(() => {
+    function resetInterval() {
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    }
+    if (intervalRef.current == null && message != null && message.expire) {
+      intervalRef.current = setInterval(() => {
+        const prevMessage = messageRef.current;
+        if (prevMessage == null) {
+          setMessage(null);
+          resetInterval();
+          return;
+        }
+        const messageDuration = Date.now() - prevMessage.startTime;
+        if (messageDuration > prevMessage.duration) {
+          setMessage(null);
+          resetInterval();
+          return;
+        }
+        setMessage({
+          ...prevMessage,
+          progress: messageDuration / prevMessage.duration,
+        });
+      }, 20);
+    }
+  }, [message, setMessage]);
+
+  useEffect(() => {
+    return () => {
+      if (intervalRef.current != null) {
+        clearInterval(intervalRef.current);
+      }
+    };
+  }, []);
+}

demo/frontend/src/common/components/snackbar/useMessagesSnackbar.ts

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {useSetAtom} from 'jotai';
+import {useCallback} from 'react';
+import {
+  MessageType,
+  messageAtom,
+} from '@/common/components/snackbar/snackbarAtoms';
+
+export type EnqueueOption = {
+  duration?: number;
+  type?: MessageType;
+  expire?: boolean;
+  showClose?: boolean;
+  showReset?: boolean;
+};
+
+type State = {
+  clearMessage: () => void;
+  enqueueMessage: (message: string, options?: EnqueueOption) => void;
+};
+
+export default function useMessagesSnackbar(): State {
+  const setMessage = useSetAtom(messageAtom);
+
+  const enqueueMessage = useCallback(
+    (message: string, options?: EnqueueOption) => {
+      setMessage({
+        text: message,
+        type: options?.type ?? 'info',
+        duration: options?.duration ?? 5000,
+        progress: 0,
+        startTime: Date.now(),
+        expire: options?.expire ?? true,
+        showClose: options?.showClose ?? true,
+        showReset: options?.showReset ?? false,
+      });
+    },
+    [setMessage],
+  );
+
+  function clearMessage() {
+    setMessage(null);
+  }
+
+  return {enqueueMessage, clearMessage};
+}

demo/frontend/src/common/components/toolbar/DesktopToolbar.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import ObjectsToolbar from '@/common/components/annotations/ObjectsToolbar';
+import EffectsToolbar from '@/common/components/effects/EffectsToolbar';
+import MoreOptionsToolbar from '@/common/components/options/MoreOptionsToolbar';
+import type {CSSProperties} from 'react';
+
+type Props = {
+  tabIndex: number;
+  onTabChange: (newIndex: number) => void;
+};
+
+export default function DesktopToolbar({tabIndex, onTabChange}: Props) {
+  const toolbarShadow: CSSProperties = {
+    boxShadow: '0px 1px 3px 1px rgba(0,0,0,.25)',
+    transition: 'box-shadow 0.8s ease-out',
+  };
+
+  const tabs = [
+    <ObjectsToolbar key="objects" onTabChange={onTabChange} />,
+    <EffectsToolbar key="effects" onTabChange={onTabChange} />,
+    <MoreOptionsToolbar key="options" onTabChange={onTabChange} />,
+  ];
+
+  return (
+    <div
+      style={toolbarShadow}
+      className="bg-graydark-800 text-white md:basis-[350px] lg:basis-[435px] shrink-0 rounded-xl">
+      {tabs[tabIndex]}
+    </div>
+  );
+}

demo/frontend/src/common/components/toolbar/MobileToolbar.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import MobileObjectsToolbar from '@/common/components/annotations/MobileObjectsToolbar';
+import MobileEffectsToolbar from '@/common/components/effects/MobileEffectsToolbar';
+import MoreOptionsToolbar from '@/common/components/options/MoreOptionsToolbar';
+
+type Props = {
+  tabIndex: number;
+  onTabChange: (newIndex: number) => void;
+};
+
+export default function MobileToolbar({tabIndex, onTabChange}: Props) {
+  const tabs = [
+    <MobileObjectsToolbar key="objects" onTabChange={onTabChange} />,
+    <MobileEffectsToolbar key="effects" onTabChange={onTabChange} />,
+    <MoreOptionsToolbar key="more-options" onTabChange={onTabChange} />,
+  ];
+
+  return (
+    <div className="relative flex flex-col bg-black">{tabs[tabIndex]}</div>
+  );
+}

demo/frontend/src/common/components/toolbar/Toolbar.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import useListenToStreamingState from '@/common/components/toolbar/useListenToStreamingState';
+import useToolbarTabs from '@/common/components/toolbar/useToolbarTabs';
+import useVideo from '@/common/components/video/editor/useVideo';
+import useVideoEffect from '@/common/components/video/editor/useVideoEffect';
+import {EffectIndex} from '@/common/components/video/effects/Effects';
+import useScreenSize from '@/common/screen/useScreenSize';
+import {
+  codeEditorOpenedAtom,
+  isPlayingAtom,
+  isStreamingAtom,
+} from '@/demo/atoms';
+import {useAtom, useAtomValue, useSetAtom} from 'jotai';
+import {useCallback, useEffect} from 'react';
+import DesktopToolbar from './DesktopToolbar';
+import MobileToolbar from './MobileToolbar';
+import {OBJECT_TOOLBAR_INDEX} from './ToolbarConfig';
+
+export default function Toolbar() {
+  const [tabIndex, setTabIndex] = useToolbarTabs();
+  const video = useVideo();
+  const setIsPlaying = useSetAtom(isPlayingAtom);
+  const [isStreaming, setIsStreaming] = useAtom(isStreamingAtom);
+  const codeEditorOpened = useAtomValue(codeEditorOpenedAtom);
+  const {isMobile} = useScreenSize();
+  const setEffect = useVideoEffect();
+
+  const resetEffects = useCallback(() => {
+    setEffect('Original', EffectIndex.BACKGROUND, {variant: 0});
+    setEffect('Overlay', EffectIndex.HIGHLIGHT, {variant: 0});
+  }, [setEffect]);
+
+  const handleStopVideo = useCallback(() => {
+    if (isStreaming) {
+      video?.abortStreamMasks();
+    } else {
+      video?.pause();
+    }
+  }, [video, isStreaming]);
+
+  const handleTabChange = useCallback(
+    (newIndex: number) => {
+      if (newIndex === OBJECT_TOOLBAR_INDEX) {
+        handleStopVideo();
+        resetEffects();
+      }
+
+      setTabIndex(newIndex);
+    },
+    [handleStopVideo, resetEffects, setTabIndex],
+  );
+
+  useListenToStreamingState();
+
+  useEffect(() => {
+    function onPlay() {
+      setIsPlaying(true);
+    }
+    function onPause() {
+      setIsPlaying(false);
+    }
+
+    video?.addEventListener('play', onPlay);
+    video?.addEventListener('pause', onPause);
+    return () => {
+      video?.removeEventListener('play', onPlay);
+      video?.removeEventListener('pause', onPause);
+    };
+  }, [video, resetEffects, setIsStreaming, setIsPlaying]);
+
+  if (codeEditorOpened) {
+    return null;
+  }
+
+  return isMobile ? (
+    <MobileToolbar tabIndex={tabIndex} onTabChange={handleTabChange} />
+  ) : (
+    <DesktopToolbar tabIndex={tabIndex} onTabChange={handleTabChange} />
+  );
+}

demo/frontend/src/common/components/toolbar/ToolbarActionIcon.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import GradientBorder from '@/common/components/button/GradientBorder';
+import useScreenSize from '@/common/screen/useScreenSize';
+import {BLUE_PINK_FILL_BR} from '@/theme/gradientStyle';
+import type {CarbonIconType} from '@carbon/icons-react';
+import {Loading} from 'react-daisyui';
+
+type Props = {
+  isDisabled?: boolean;
+  isActive?: boolean;
+  icon: CarbonIconType;
+  title: string;
+  badge?: React.ReactNode;
+  variant: 'toggle' | 'button' | 'gradient' | 'flat';
+  span?: 1 | 2;
+  loadingProps?: {
+    loading: boolean;
+    label?: string;
+  };
+  onClick: () => void;
+};
+
+export default function ToolbarActionIcon({
+  variant,
+  isDisabled = false,
+  isActive = false,
+  title,
+  badge,
+  loadingProps,
+  icon: Icon,
+  span = 1,
+  onClick,
+}: Props) {
+  const {isMobile} = useScreenSize();
+  const isLoading = loadingProps?.loading === true;
+
+  function handleClick() {
+    if (isDisabled) {
+      return;
+    }
+    onClick();
+  }
+
+  const ButtonBase = (
+    <div
+      onClick={handleClick}
+      className={`relative rounded-lg h-full flex items-center justify-center select-none
+      ${!isDisabled && 'cursor-pointer hover:bg-black'}
+      ${span === 1 && 'col-span-1'} 
+      ${span === 2 && 'col-span-2'}
+      ${variant === 'button' && (isDisabled ? 'bg-graydark-500 text-gray-300' : 'bg-graydark-700 hover:bg-graydark-800 text-white')} 
+      ${variant === 'toggle' && (isActive ? BLUE_PINK_FILL_BR : 'bg-inherit')}
+      ${variant === 'flat' && (isDisabled ? ' text-gray-600' : 'text-white')} 
+      `}>
+      <div className="py-4 px-2">
+        <div className="flex items-center justify-center">
+          {isLoading ? (
+            <Loading size="md" className="mx-auto" />
+          ) : (
+            <Icon
+              size={isMobile ? 24 : 28}
+              color={isActive ? 'white' : 'black'}
+              className={`mx-auto ${isDisabled ? 'text-gray-300' : 'text-white'}`}
+            />
+          )}
+        </div>
+        <div
+          className={`mt-1 md:mt-2 text-center text-xs font-bold ${isActive && 'text-white'}`}>
+          {isLoading && loadingProps?.label != null
+            ? loadingProps.label
+            : title}
+        </div>
+        {isActive && badge}
+      </div>
+    </div>
+  );
+
+  return variant == 'gradient' ? (
+    <GradientBorder rounded={false} className="rounded-lg h-full text-white">
+      {ButtonBase}
+    </GradientBorder>
+  ) : (
+    ButtonBase
+  );
+}

demo/frontend/src/common/components/toolbar/ToolbarBottomActionsWrapper.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {spacing} from '@/theme/tokens.stylex';
+import stylex from '@stylexjs/stylex';
+import {PropsWithChildren} from 'react';
+
+const styles = stylex.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingTop: {
+      default: spacing[2],
+      '@media screen and (max-width: 768px)': spacing[4],
+    },
+    paddingBottom: spacing[6],
+    paddingHorizontal: spacing[6],
+  },
+});
+
+export default function ToolbarBottomActionsWrapper({
+  children,
+}: PropsWithChildren) {
+  return <div {...stylex.props(styles.container)}>{children}</div>;
+}

demo/frontend/src/common/components/toolbar/ToolbarConfig.tsx

+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export const OBJECT_TOOLBAR_INDEX = 0;
+export const EFFECT_TOOLBAR_INDEX = 1;
+export const MORE_OPTIONS_TOOLBAR_INDEX = 2;