Initial commit

demo/frontend/src/common/components/gallery/useUploadVideo.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 {useUploadVideoMutation} from '@/common/components/gallery/__generated__/useUploadVideoMutation.graphql';
+import Logger from '@/common/logger/Logger';
+import {VideoData} from '@/demo/atoms';
+import {useState} from 'react';
+import {FileRejection, FileWithPath, useDropzone} from 'react-dropzone';
+import {graphql, useMutation} from 'react-relay';
+
+const ACCEPT_VIDEOS = {
+  'video/mp4': ['.mp4'],
+  'video/quicktime': ['.mov'],
+};
+
+// 70 MB default max video upload size
+const MAX_FILE_SIZE_IN_MB = 70;
+const MAX_VIDEO_UPLOAD_SIZE = MAX_FILE_SIZE_IN_MB * 1024 ** 2;
+
+type Props = {
+  onUpload: (video: VideoData) => void;
+  onUploadStart?: () => void;
+  onUploadError?: (error: Error) => void;
+};
+
+export default function useUploadVideo({
+  onUpload,
+  onUploadStart,
+  onUploadError,
+}: Props) {
+  const [error, setError] = useState<string | null>(null);
+  const [commit, isMutationInFlight] = useMutation<useUploadVideoMutation>(
+    graphql`
+      mutation useUploadVideoMutation($file: Upload!) {
+        uploadVideo(file: $file) {
+          id
+          height
+          width
+          url
+          path
+          posterPath
+          posterUrl
+        }
+      }
+    `,
+  );
+
+  const {getRootProps, getInputProps} = useDropzone({
+    accept: ACCEPT_VIDEOS,
+    multiple: false,
+    maxFiles: 1,
+    onDrop: (
+      acceptedFiles: FileWithPath[],
+      fileRejections: FileRejection[],
+    ) => {
+      setError(null);
+
+      // Check if any of the files (only 1 file allowed) is rejected. The
+      // rejected file has an error (e.g., 'file-too-large'). Rendering an
+      // appropriate message.
+      if (fileRejections.length > 0 && fileRejections[0].errors.length > 0) {
+        const code = fileRejections[0].errors[0].code;
+        if (code === 'file-too-large') {
+          setError(
+            `File too large. Try a video under ${MAX_FILE_SIZE_IN_MB} MB`,
+          );
+          return;
+        }
+      }
+
+      if (acceptedFiles.length === 0) {
+        setError('File not accepted. Please try again.');
+        return;
+      }
+      if (acceptedFiles.length > 1) {
+        setError('Too many files. Please try again with 1 file.');
+        return;
+      }
+
+      onUploadStart?.();
+      const file = acceptedFiles[0];
+
+      commit({
+        variables: {
+          file,
+        },
+        uploadables: {
+          file,
+        },
+        onCompleted: response => onUpload(response.uploadVideo),
+        onError: error => {
+          Logger.error(error);
+          onUploadError?.(error);
+          setError('Upload failed.');
+        },
+      });
+    },
+    onError: error => {
+      Logger.error(error);
+      setError('File not supported.');
+    },
+    maxSize: MAX_VIDEO_UPLOAD_SIZE,
+  });
+
+  return {
+    getRootProps,
+    getInputProps,
+    isUploading: isMutationInFlight,
+    error,
+    setError,
+  };
+}

demo/frontend/src/common/components/icons/GitHubIcon.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.
+ */
+type Props = {
+  className?: string;
+};
+
+export function GitHubIcon({className}: Props) {
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" className={className}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M12 2C6.477 2 2 6.463 2 11.97c0 4.404 2.865 8.14 6.839 9.458.5.092.682-.216.682-.48 0-.236-.008-.864-.013-1.695-2.782.602-3.369-1.337-3.369-1.337-.454-1.151-1.11-1.458-1.11-1.458-.908-.618.069-.606.069-.606 1.003.07 1.531 1.027 1.531 1.027.892 1.524 2.341 1.084 2.91.828.092-.643.35-1.083.636-1.332-2.22-.251-4.555-1.107-4.555-4.927 0-1.088.39-1.979 1.029-2.675-.103-.252-.446-1.266.098-2.638 0 0 .84-.268 2.75 1.022A9.607 9.607 0 0 1 12 6.82c.85.004 1.705.114 2.504.336 1.909-1.29 2.747-1.022 2.747-1.022.546 1.372.202 2.386.1 2.638.64.696 1.028 1.587 1.028 2.675 0 3.83-2.339 4.673-4.566 4.92.359.307.678.915.678 1.846 0 1.332-.012 2.407-.012 2.734 0 .267.18.577.688.48 3.97-1.32 6.833-5.054 6.833-9.458C22 6.463 17.522 2 12 2Z"></path>
+    </svg>
+  );
+}

demo/frontend/src/common/components/options/DownloadOption.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 {Package} from '@carbon/icons-react';
+import OptionButton from './OptionButton';
+import useDownloadVideo from './useDownloadVideo';
+
+export default function DownloadOption() {
+  const {download, state} = useDownloadVideo();
+
+  return (
+    <OptionButton
+      title="Download"
+      Icon={Package}
+      loadingProps={{
+        loading: state === 'started' || state === 'encoding',
+        label: 'Downloading...',
+      }}
+      onClick={download}
+    />
+  );
+}

demo/frontend/src/common/components/options/GalleryOption.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 ChangeVideoModal from '@/common/components/gallery/ChangeVideoModal';
+import type {VideoGalleryTriggerProps} from '@/common/components/gallery/DemoVideoGalleryModal';
+import useScreenSize from '@/common/screen/useScreenSize';
+import {ImageCopy} from '@carbon/icons-react';
+import OptionButton from './OptionButton';
+
+type Props = {
+  onChangeVideo: () => void;
+};
+export default function GalleryOption({onChangeVideo}: Props) {
+  return (
+    <ChangeVideoModal
+      videoGalleryModalTrigger={GalleryTrigger}
+      showUploadInGallery={false}
+      onChangeVideo={onChangeVideo}
+    />
+  );
+}
+
+function GalleryTrigger({onClick}: VideoGalleryTriggerProps) {
+  const {isMobile} = useScreenSize();
+
+  return (
+    <OptionButton
+      variant="flat"
+      title={isMobile ? 'Gallery' : 'Browse gallery'}
+      Icon={ImageCopy}
+      onClick={onClick}
+    />
+  );
+}

demo/frontend/src/common/components/options/MoreOptionsToolbar.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 MoreOptionsToolbarBottomActions from '@/common/components/options/MoreOptionsToolbarBottomActions';
+import ShareSection from '@/common/components/options/ShareSection';
+import TryAnotherVideoSection from '@/common/components/options/TryAnotherVideoSection';
+import useMessagesSnackbar from '@/common/components/snackbar/useDemoMessagesSnackbar';
+import ToolbarHeaderWrapper from '@/common/components/toolbar/ToolbarHeaderWrapper';
+import useScreenSize from '@/common/screen/useScreenSize';
+import {useEffect, useRef} from 'react';
+
+type Props = {
+  onTabChange: (newIndex: number) => void;
+};
+
+export default function MoreOptionsToolbar({onTabChange}: Props) {
+  const {isMobile} = useScreenSize();
+  const {clearMessage} = useMessagesSnackbar();
+  const didClearMessageSnackbar = useRef(false);
+
+  useEffect(() => {
+    if (!didClearMessageSnackbar.current) {
+      didClearMessageSnackbar.current = true;
+      clearMessage();
+    }
+  }, [clearMessage]);
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="grow">
+        <ToolbarHeaderWrapper
+          title="Nice work! What's next?"
+          className="pb-0 !border-b-0 !text-white"
+          showProgressChip={false}
+        />
+        <ShareSection />
+        {!isMobile && <div className="h-[1px] bg-black mt-4 mb-8"></div>}
+        <TryAnotherVideoSection onTabChange={onTabChange} />
+      </div>
+      {!isMobile && (
+        <MoreOptionsToolbarBottomActions onTabChange={onTabChange} />
+      )}
+    </div>
+  );
+}

demo/frontend/src/common/components/options/MoreOptionsToolbarBottomActions.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 RestartSessionButton from '@/common/components/session/RestartSessionButton';
+import {
+  EFFECT_TOOLBAR_INDEX,
+  OBJECT_TOOLBAR_INDEX,
+} from '@/common/components/toolbar/ToolbarConfig';
+import {ChevronLeft} from '@carbon/icons-react';
+import {Button} from 'react-daisyui';
+import ToolbarBottomActionsWrapper from '../toolbar/ToolbarBottomActionsWrapper';
+
+type Props = {
+  onTabChange: (newIndex: number) => void;
+};
+
+export default function MoreOptionsToolbarBottomActions({onTabChange}: Props) {
+  function handleReturnToEffectsTab() {
+    onTabChange(EFFECT_TOOLBAR_INDEX);
+  }
+
+  return (
+    <ToolbarBottomActionsWrapper>
+      <Button
+        color="ghost"
+        onClick={handleReturnToEffectsTab}
+        className="!px-4 !rounded-full font-medium text-white hover:bg-black"
+        startIcon={<ChevronLeft />}>
+        Edit effects
+      </Button>
+      <RestartSessionButton
+        onRestartSession={() => onTabChange(OBJECT_TOOLBAR_INDEX)}
+      />
+    </ToolbarBottomActionsWrapper>
+  );
+}

demo/frontend/src/common/components/options/OptionButton.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 = {
+  variant?: 'default' | 'flat' | 'gradient';
+  title: string | React.ReactNode;
+  Icon: CarbonIconType;
+  isActive?: boolean;
+  isDisabled?: boolean;
+  loadingProps?: {
+    loading: boolean;
+    label?: string;
+  };
+  onClick: () => void;
+};
+
+export default function OptionButton({
+  variant = 'default',
+  title,
+  Icon,
+  isActive = false,
+  isDisabled = false,
+  loadingProps,
+  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 
+${variant === 'default' ? 'bg-graydark-700' : ''}
+${!isDisabled && 'cursor-pointer'}
+${isDisabled ? 'text-gray-300' : ''}
+${isActive && BLUE_PINK_FILL_BR}`}>
+      <div className="flex gap-2 items-center py-4 md:py-6">
+        {isLoading ? (
+          <Loading size="md" className="mx-auto mt-1" />
+        ) : (
+          <Icon
+            size={isMobile ? 24 : 28}
+            className={`mx-auto ${isDisabled ? 'text-gray-300' : 'text-white'}`}
+          />
+        )}
+        <div className="text-base font-medium text-white">
+          {isLoading && loadingProps?.label != null
+            ? loadingProps.label
+            : title}
+        </div>
+      </div>
+    </div>
+  );
+
+  return variant === 'gradient' ? (
+    <GradientBorder rounded={false} className={'rounded-lg md:rounded-full'}>
+      {ButtonBase}
+    </GradientBorder>
+  ) : (
+    ButtonBase
+  );
+}

demo/frontend/src/common/components/options/ShareSection.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 DownloadOption from './DownloadOption';
+
+export default function ShareSection() {
+  return (
+    <div className="p-5 md:p-8">
+      <DownloadOption />
+    </div>
+  );
+}

demo/frontend/src/common/components/options/ShareUtils.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.
+ */
+export async function handleSaveVideo(
+  videoPath: string,
+  fileName?: string,
+): Promise<void> {
+  const blob = await fetch(videoPath).then(res => res.blob());
+
+  return new Promise(resolve => {
+    const reader = new FileReader();
+    reader.readAsDataURL(blob);
+    reader.addEventListener('load', () => {
+      const elem = document.createElement('a');
+      elem.download = fileName ?? getFileName();
+      if (typeof reader.result === 'string') {
+        elem.href = reader.result;
+      }
+      elem.click();
+      resolve();
+    });
+  });
+}
+
+export function getFileName() {
+  const date = new Date();
+  const timestamp = date.getTime();
+  return `sam2_masked_video_${timestamp}.mp4`;
+}

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);