feat: add support for meta files (#11)

package-lock.json

@@ -1,15 +1,15 @@
 {
   "name": "@motion-canvas/ui",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@motion-canvas/ui",
-      "version": "1.1.0",
+      "version": "1.3.0",
       "license": "MIT",
       "devDependencies": {
-        "@motion-canvas/core": "^2.1.0",
+        "@motion-canvas/core": "^3.0.0",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/commit-analyzer": "^9.0.2",
         "@semantic-release/git": "^10.0.1",
@@ -284,7 +284,9 @@
       }
     },
     "node_modules/@motion-canvas/core": {
-      "version": "2.1.0",
+      "version": "3.0.0",
+      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/3.0.0/596f40813155376131d4b1f6e7c48aa578d2d8319ea95bd7ea219cee99dadcaf",
+      "integrity": "sha512-OJe/DGyoNRU2HUbVjjxOIKXvfnkNoZRcZ6rUB5dpeLxxhl9YAjBtRAaaTOjixFpRlwfStEaKtFMonaWgRo8PWw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -299,6 +301,7 @@
         "mix-color": "^1.1.2",
         "mp4box": "^0.5.2",
         "prismjs": "^1.28.0",
+        "source-map": "^0.7.4",
         "strongly-typed-events": "^3.0.2",
         "three": "^0.141.0",
         "ts-loader": "^9.3.0",
@@ -311,6 +314,15 @@
         "motion-canvas": "bin/index.mjs"
       }
     },
+    "node_modules/@motion-canvas/core/node_modules/source-map": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+      "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -11617,7 +11629,9 @@
       }
     },
     "@motion-canvas/core": {
-      "version": "2.1.0",
+      "version": "3.0.0",
+      "resolved": "https://npm.pkg.github.com/download/@motion-canvas/core/3.0.0/596f40813155376131d4b1f6e7c48aa578d2d8319ea95bd7ea219cee99dadcaf",
+      "integrity": "sha512-OJe/DGyoNRU2HUbVjjxOIKXvfnkNoZRcZ6rUB5dpeLxxhl9YAjBtRAaaTOjixFpRlwfStEaKtFMonaWgRo8PWw==",
       "dev": true,
       "requires": {
         "@types/prismjs": "^1.26.0",
@@ -11631,6 +11645,7 @@
         "mix-color": "^1.1.2",
         "mp4box": "^0.5.2",
         "prismjs": "^1.28.0",
+        "source-map": "^0.7.4",
         "strongly-typed-events": "^3.0.2",
         "three": "^0.141.0",
         "ts-loader": "^9.3.0",
@@ -11638,6 +11653,14 @@
         "webpack": "^5.73.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "^4.9.2"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.7.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz",
+          "integrity": "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==",
+          "dev": true
+        }
       }
     },
     "@nodelib/fs.scandir": {

package.json

@@ -27,7 +27,7 @@
     "dist/main.js"
   ],
   "devDependencies": {
-    "@motion-canvas/core": "^2.1.0",
+    "@motion-canvas/core": "^3.0.0",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "^9.0.2",
     "@semantic-release/git": "^10.0.1",

src/components/timeline/Label.tsx

@@ -1,6 +1,7 @@
 import styles from './Timeline.module.scss';
 
-import type {Scene, TimeEvent} from '@motion-canvas/core/lib/Scene';
+import type {Scene} from '@motion-canvas/core/lib/Scene';
+import type {TimeEvent} from '@motion-canvas/core/lib/TimeEvents';
 import {useDrag, usePlayer} from '../../hooks';
 import {useCallback, useContext, useLayoutEffect, useState} from 'preact/hooks';
 import {TimelineContext} from './TimelineContext';
@@ -26,7 +27,7 @@ export function Label({event, scene}: LabelProps) {
       e => {
         const newFrame = Math.max(0, eventTime);
         if (event.offset !== newFrame) {
-          scene.setFrameEvent(event.name, newFrame, !e.shiftKey);
+          scene.timeEvents.set(event.name, newFrame, e.shiftKey);
           player.reload();
         }
       },

src/components/timeline/LabelGroup.tsx

@@ -7,7 +7,9 @@ interface LabelGroupProps {
 }
 
 export function LabelGroup({scene}: LabelGroupProps) {
-  const events = useEventState(scene.TimeEventsChanged, () => scene.timeEvents);
+  const events = useEventState(scene.timeEvents.Changed, () =>
+    scene.timeEvents.toArray(),
+  );
 
   return (
     <>

src/hooks/index.ts

@@ -2,6 +2,7 @@ export * from './useDocumentEvent';
 export * from './useDrag';
 export * from './useEventEffect';
 export * from './useEventState';
+export * from './useMeta';
 export * from './usePlayer';
 export * from './usePlayerState';
 export * from './usePlayerTime';

src/hooks/useMeta.ts

@@ -0,0 +1,31 @@
+import {Meta, Metadata} from '@motion-canvas/core/lib';
+import {useCallback} from 'preact/hooks';
+import {usePlayer} from './usePlayer';
+import {useEventState} from './useEventState';
+
+/**
+ * Get a stateful value representing the contents of the given meta file and
+ * a function to update it.
+ *
+ * @param meta
+ */
+export function useMeta<T extends Metadata>(
+  meta: Meta<T>,
+): [T, (value: Partial<T>) => void] {
+  const data = useEventState(meta.Changed, () => meta.getData());
+  const setter = useCallback(
+    (value: Partial<T>) => meta.setDataSync(value),
+    [meta],
+  );
+
+  return [data, setter];
+}
+
+/**
+ * Get a stateful value representing the contents of the project's meta file and
+ * a function to update it.
+ */
+export function useProjectMeta() {
+  const {project} = usePlayer();
+  return useMeta(project.meta);
+}