add video

Octoframes · Nov 13, 2023 · f7e74da · f7e74da
1 parent 924a6be
commit f7e74da
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 16 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,38 +1,39 @@
 import { AssetRecordType, Tldraw } from "@tldraw/tldraw";
 import "@tldraw/tldraw/tldraw.css";
+import { useCallback } from 'react';
 
 export default function App() {
-  const handleMount = (app) => {
+  const handleMount = useCallback((app) => {
     const assetId = AssetRecordType.createId();
-    const placeholderAsset = {
+    const videoAsset = {
       id: assetId,
       typeName: "asset",
-      type: "image",
+      type: "video",
       props: {
-        w: 400,
-        h: 340,
-        name: "card-repo.png",
-        isAnimated: false,
-        mimeType: null,
-        src: "https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png",
+        w: 640, // Set the width of the video
+        h: 360, // Set the height of the video
+        name: "bunny.mp4",
+        isAnimated: true,
+        mimeType: "video/mp4",
+        src: "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
       },
       meta: {},
     };
 
-    app.createAssets([placeholderAsset]);
+    app.createAssets([videoAsset]);
     app.createShapes([
       {
-        type: "image",
-        x:100,
-        y:100,
+        type: "video",
+        x: 100,
+        y: 100,
         props: {
-          w: 400,
-          h: 340,
+          w: 640,
+          h: 360,
           assetId,
         },
       },
     ]);
-  };
+  }, []);
 
   return (
     <div

diff --git a/src/image_reference.jsx b/src/image_reference.jsx
@@ -0,0 +1,49 @@
+// import { AssetRecordType, Tldraw } from "@tldraw/tldraw";
+// import "@tldraw/tldraw/tldraw.css";
+
+// export default function App() {
+//   const handleMount = (app) => {
+//     const assetId = AssetRecordType.createId();
+//     const placeholderAsset = {
+//       id: assetId,
+//       typeName: "asset",
+//       type: "image",
+//       props: {
+//         w: 400,
+//         h: 340,
+//         name: "card-repo.png",
+//         isAnimated: false,
+//         mimeType: null,
+//         src: "https://raw.githubusercontent.com/scikit-image/scikit-image/main/skimage/data/chelsea.png",
+//       },
+//       meta: {},
+//     };
+
+//     app.createAssets([placeholderAsset]);
+//     app.createShapes([
+//       {
+//         type: "image",
+//         x:100,
+//         y:100,
+//         props: {
+//           w: 400,
+//           h: 340,
+//           assetId,
+//         },
+//       },
+//     ]);
+//   };
+
+//   return (
+//     <div
+//       style={{
+//         position: "relative",
+//         width: "1000px",
+//         height: "1000px",
+//       }}
+//     >
+//       <Tldraw onMount={handleMount} />
+//     </div>
+//   );
+// }
+// //