"Initial commit"

demo/frontend/src/common/codecs/WebCodecUtils.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.
+ */
+// https://github.com/w3c/webcodecs/issues/88
+// https://issues.chromium.org/issues/40725065
+// https://webcodecs-blogpost-demo.glitch.me/
+export async function cloneFrame(frame: VideoFrame): Promise<VideoFrame> {
+  const {
+    codedHeight,
+    codedWidth,
+    colorSpace,
+    displayHeight,
+    displayWidth,
+    format,
+    timestamp,
+  } = frame;
+  const rect = {x: 0, y: 0, width: codedWidth, height: codedHeight};
+  const data = new ArrayBuffer(frame.allocationSize({rect}));
+  try {
+    await frame.copyTo(data, {rect});
+  } catch (error) {
+    // The VideoFrame#copyTo on x64 builds on macOS fails. The workaround here
+    // is to clone the frame.
+    // https://stackoverflow.com/questions/77898766/inconsistent-behavior-of-webcodecs-copyto-method-across-different-browsers-an
+    return frame.clone();
+  }
+  return new VideoFrame(data, {
+    codedHeight,
+    codedWidth,
+    colorSpace,
+    displayHeight,
+    displayWidth,
+    duration: frame.duration ?? undefined,
+    format: format!,
+    timestamp,
+    visibleRect: frame.visibleRect ?? undefined,
+  });
+}

demo/frontend/src/common/components/MobileFirstClickBanner.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 {DEMO_SHORT_NAME} from '@/demo/DemoConfig';
+import {spacing} from '@/theme/tokens.stylex';
+import {ImageCopy} from '@carbon/icons-react';
+import stylex from '@stylexjs/stylex';
+import {Button} from 'react-daisyui';
+
+const styles = stylex.create({
+  container: {
+    position: 'relative',
+    backgroundColor: '#000',
+    padding: spacing[5],
+    paddingVertical: spacing[6],
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing[4],
+  },
+});
+
+export default function MobileFirstClickBanner() {
+  return (
+    <div {...stylex.props(styles.container)}>
+      <div className="flex text-white text-lg">
+        Click an object in the video to start
+      </div>
+      <div className="text-sm text-[#A7B3BF]">
+        <p>
+          You&apos;ll be able to use {DEMO_SHORT_NAME} to make fun edits to any
+          video by tracking objects and applying visual effects. To start, click
+          any object in the video.
+        </p>
+      </div>
+      <div className="flex items-center">
+        <ChangeVideoModal
+          videoGalleryModalTrigger={MobileVideoGalleryModalTrigger}
+          showUploadInGallery={true}
+        />
+      </div>
+    </div>
+  );
+}
+
+type MobileVideoGalleryModalTriggerProps = {
+  onClick: () => void;
+};
+
+function MobileVideoGalleryModalTrigger({
+  onClick,
+}: MobileVideoGalleryModalTriggerProps) {
+  return (
+    <Button
+      color="ghost"
+      startIcon={<ImageCopy size={20} />}
+      onClick={onClick}
+      className="text-white p-0">
+      Change video
+    </Button>
+  );
+}

demo/frontend/src/common/components/Tooltip.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 {PropsWithChildren} from 'react';
+
+type Props = PropsWithChildren<{
+  className?: string;
+  message: string;
+  position?: 'left' | 'top' | 'right' | 'bottom';
+}>;
+
+/**
+ * This is a custom Tooltip component because React Daisy UI does not have an
+ * option to *only* show tooltip on large devices.
+ */
+export default function Tooltip({
+  children,
+  className = '',
+  message,
+  position = 'top',
+}: Props) {
+  return (
+    <div
+      className={`lg:tooltip tooltip-${position} ${className}`}
+      data-tip={message}>
+      {children}
+    </div>
+  );
+}

demo/frontend/src/common/components/annotations/AddObjectButton.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 useMessagesSnackbar from '@/common/components/snackbar/useDemoMessagesSnackbar';
+import useVideo from '@/common/components/video/editor/useVideo';
+import {activeTrackletObjectIdAtom, labelTypeAtom} from '@/demo/atoms';
+import {Add} from '@carbon/icons-react';
+import {useSetAtom} from 'jotai';
+
+export default function AddObjectButton() {
+  const video = useVideo();
+  const setActiveTrackletId = useSetAtom(activeTrackletObjectIdAtom);
+  const setLabelType = useSetAtom(labelTypeAtom);
+  const {enqueueMessage} = useMessagesSnackbar();
+
+  async function addObject() {
+    enqueueMessage('addObjectClick');
+    const tracklet = await video?.createTracklet();
+    if (tracklet != null) {
+      setActiveTrackletId(tracklet.id);
+      setLabelType('positive');
+    }
+  }
+
+  return (
+    <div
+      onClick={addObject}
+      className="group flex justify-start mx-4 px-4 bg-transparent text-white !rounded-xl border-none cursor-pointer">
+      <div className="flex gap-6 items-center">
+        <div className=" group-hover:bg-graydark-700 border border-white relative h-12 w-12 md:w-20 md:h-20 shrink-0 rounded-lg flex items-center justify-center">
+          <Add size={36} className="group-hover:text-white text-gray-300" />
+        </div>
+        <div className="font-medium text-base">Add another object</div>
+      </div>
+    </div>
+  );
+}

demo/frontend/src/common/components/annotations/ClearAllPointsInVideoButton.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 useMessagesSnackbar from '@/common/components/snackbar/useDemoMessagesSnackbar';
+import useVideo from '@/common/components/video/editor/useVideo';
+import {isPlayingAtom, isStreamingAtom, labelTypeAtom} from '@/demo/atoms';
+import {Reset} from '@carbon/icons-react';
+import stylex from '@stylexjs/stylex';
+import {useAtomValue, useSetAtom} from 'jotai';
+import {useState} from 'react';
+import {Button, Loading} from 'react-daisyui';
+
+const styles = stylex.create({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+  },
+});
+
+type Props = {
+  onRestart: () => void;
+};
+
+export default function ClearAllPointsInVideoButton({onRestart}: Props) {
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const isPlaying = useAtomValue(isPlayingAtom);
+  const isStreaming = useAtomValue(isStreamingAtom);
+  const setLabelType = useSetAtom(labelTypeAtom);
+  const {clearMessage} = useMessagesSnackbar();
+  const {restartSession} = useRestartSession();
+
+  const video = useVideo();
+
+  async function handleRestart() {
+    if (video === null) {
+      return;
+    }
+
+    setIsLoading(true);
+    if (isPlaying) {
+      video.pause();
+    }
+    if (isStreaming) {
+      await video.abortStreamMasks();
+    }
+    const isSuccessful = await video.clearPointsInVideo();
+    if (!isSuccessful) {
+      await restartSession();
+    }
+    video.frame = 0;
+    setLabelType('positive');
+    onRestart();
+    clearMessage();
+    setIsLoading(false);
+  }
+
+  return (
+    <div {...stylex.props(styles.container)}>
+      <Button
+        color="ghost"
+        onClick={handleRestart}
+        className="!px-4 !rounded-full font-medium text-white hover:bg-black"
+        startIcon={isLoading ? <Loading size="sm" /> : <Reset size={20} />}>
+        Start over
+      </Button>
+    </div>
+  );
+}

demo/frontend/src/common/components/annotations/CloseSessionButton.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 PrimaryCTAButton from '@/common/components/button/PrimaryCTAButton';
+import useVideo from '@/common/components/video/editor/useVideo';
+import {ChevronRight} from '@carbon/icons-react';
+
+type Props = {
+  onSessionClose: () => void;
+};
+
+export default function CloseSessionButton({onSessionClose}: Props) {
+  const video = useVideo();
+
+  function handleCloseSession() {
+    video?.closeSession();
+    video?.logAnnotations();
+    onSessionClose();
+  }
+
+  return (
+    <PrimaryCTAButton onClick={handleCloseSession} endIcon={<ChevronRight />}>
+      Good to go
+    </PrimaryCTAButton>
+  );
+}