Merge pull request #45 from Joery-M/35-sl-uisharedtimeline-playback

35 sl uisharedtimeline playback

globals.d.ts

@@ -0,0 +1 @@
+declare const __TEST__: boolean;

package.json

@@ -16,7 +16,7 @@
         "test:darkroom-firefox": "cd packages/darkroom && pnpm test:run-firefox",
         "test:shared": "cd packages/shared && pnpm test:run",
         "test:timeline": "cd packages/timeline && pnpm test:run",
-        "dev": "pnpm build:packages && cd packages/safelight && pnpm dev",
+        "dev": "cd packages/safelight && pnpm dev",
         "dev:darkroom": "pnpm build:packages && cd packages/darkroom && pnpm dev:web",
         "lint": "pnpm run \"/lint:\"/",
         "lint:prettier": "prettier . --write --ignore-path .gitignore",

packages/darkroom/tsconfig.json

@@ -14,6 +14,6 @@
         "rootDir": "."
     },
     "files": ["lib/main.ts"],
-    "include": ["lib/*.ts", "tsconfig.shim.json"],
+    "include": ["lib/*.ts", "tsconfig.shim.json", "../../globals.d.ts"],
     "exclude": ["dist"]
 }

packages/darkroom/vite.config.ts

@@ -15,5 +15,8 @@ export default defineConfig({
             name: 'darkroom'
         },
         sourcemap: true
+    },
+    define: {
+        __TEST__: false
     }
 });

packages/darkroom/vitest.config.ts

@@ -1,8 +1,11 @@
 import { defineProject } from 'vitest/config';
 
 export default defineProject({
+    define: {
+        __TEST__: true
+    },
     test: {
-        reporters: !process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : ['default'],
+        reporters: process.env.GITHUB_ACTIONS ? ['default', 'github-actions'] : ['default'],
         globals: true,
         name: 'Darkroom',
         ui: true,

packages/safelight/package.json

@@ -69,5 +69,8 @@
         "vite": "^5.2.11",
         "vite-plugin-mkcert": "^1.17.5",
         "vue-tsc": "^2.0.16"
+    },
+    "peerDependencies": {
+        "mediainfo.js": "~0"
     }
 }

packages/safelight/src/components/Editor/Monitor/Monitor.vue

@@ -1,6 +1,7 @@
 <template>
-    <div class="flex items-center justify-center">
+    <div class="flex flex-col items-center justify-center">
         <p>Monitor</p>
+        <PlaybackControls />
     </div>
 </template>
 

packages/safelight/src/components/Editor/Timeline/PlaybackControls.vue

@@ -0,0 +1,54 @@
+<template>
+    <template v-if="timeline">
+        <Timecode />
+        <ButtonGroup>
+            <Button
+                severity="secondary"
+                aria-label="Skip back 1 frame"
+                @click="if (!timeline.isPlaying.value) timeline.stepPlayback(true);"
+            >
+                <template #icon>
+                    <PhSkipBack />
+                </template>
+            </Button>
+            <Button
+                severity="secondary"
+                :aria-label="timeline.isPlaying.value ? 'Stop playback' : 'Start playback'"
+                @click="playPause"
+            >
+                <template #icon>
+                    <PhPause v-if="timeline.isPlaying.value" />
+                    <PhPlay v-else />
+                </template>
+            </Button>
+            <Button
+                severity="secondary"
+                aria-label="Skip forward 1 frame"
+                @click="if (!timeline.isPlaying.value) timeline.stepPlayback();"
+            >
+                <template #icon>
+                    <PhSkipForward />
+                </template>
+            </Button>
+        </ButtonGroup>
+    </template>
+</template>
+
+<script lang="ts" setup>
+import ButtonGroup from 'primevue/buttongroup';
+
+const { project } = CurrentProject;
+const timeline = computed(() =>
+    project.value?.timeline.value?.isSimpleTimeline() ? project.value.timeline.value : undefined
+);
+
+function playPause(ev: MouseEvent) {
+    if (timeline.value) {
+        if (timeline.value.isPlaying.value) {
+            timeline.value.stopPlayback(ev.ctrlKey);
+        } else {
+            timeline.value.startPlayback();
+        }
+    }
+}
+</script>

packages/safelight/src/components/Editor/Timeline/Timecode.vue

@@ -0,0 +1,43 @@
+<template>
+    <Inplace ref="inplace" closable>
+        <template #display>
+            {{ Timecode.toFormattedTimecode(timecodeVal) }}
+        </template>
+        <template #content>
+            <InputMask
+                v-focustrap
+                :slot-char="Timecode.toFormattedTimecode(timecodeVal)"
+                mask="99:99:99.999"
+                @change="onChange"
+            />
+        </template>
+    </Inplace>
+</template>
+
+<script setup lang="ts">
+import Timecode from '@safelight/shared/Timecode';
+import type Inplace from 'primevue/inplace';
+
+const timeline = CurrentProject.project.value!.timeline;
+const timecodeVal = computed(() =>
+    timeline.value
+        ? Timecode.fromFrames(timeline.value.pbPos.value, timeline.value.framerate.value)
+        : 0
+);
+
+const inplace = ref<Inplace>();
+
+function onChange(ev: Event) {
+    const val = (ev.target as HTMLInputElement)?.value;
+    console.log(val);
+    if (val) {
+        const res = Timecode.fromFormattedTimecode(val);
+        console.log(res);
+        timeline.value!.pbPos.value = Math.round(res / timeline.value!.framerate.value);
+    }
+    if (inplace.value) {
+        inplace.value.$emit('close', new Event('close'));
+        inplace.value.$props.active = false;
+    }
+}
+</script>

packages/safelight/src/components/Editor/Timeline/Timeline.vue

@@ -1,76 +1,96 @@
 <template>
-    <SLTimeline class="h-full" :items="items" />
+    <SLTimeline
+        v-model:items="items"
+        :playback-position="pbPos"
+        :fps="timeline?.framerate.value"
+        class="h-full"
+        @update:playback-position="setPbPos"
+    />
 </template>
 
 <script setup lang="ts">
+import Timecode from '@safelight/shared/Timecode';
 import { Timeline as SLTimeline, type TimelineItem } from '@safelight/timeline/source';
 import { v4 as uuidv4 } from 'uuid';
 import { reactive } from 'vue';
 
 const ids = new Array(17).fill('').map(() => uuidv4());
 
+const timeline = CurrentProject.project.value?.timeline;
+const pbPos = computed(() =>
+    timeline?.value
+        ? Timecode.fromFrames(timeline.value.pbPos.value, timeline.value.framerate.value)
+        : 0
+);
+
+function setPbPos(pb?: number) {
+    if (pb !== undefined && timeline?.value) {
+        timeline.value.pbPos.value = Timecode.toFrames(pb, timeline.value.framerate.value);
+    }
+}
+
 const items = reactive<{ [key: string]: TimelineItem }>({
     [ids[0]]: {
         id: ids[0],
         name: '100 start',
-        start: 100,
-        duration: 500,
+        start: 1000,
+        duration: 5000,
         layer: 0
     },
     [ids[1]]: {
         id: ids[1],
         name: '100 start',
-        start: 100,
-        duration: 500,
+        start: 1000,
+        duration: 5000,
         layer: 0
     },
     [ids[2]]: {
         id: ids[2],
         name: '588 start',
-        start: 588,
-        duration: 515,
+        start: 5880,
+        duration: 5150,
         layer: 5
     },
     [ids[3]]: {
         id: ids[3],
         name: '314 start',
-        start: 314,
-        duration: 749,
+        start: 3140,
+        duration: 7490,
         layer: 2
     },
     [ids[4]]: {
         id: ids[4],
         name: '300 start',
-        start: 300,
-        duration: 263,
+        start: 3000,
+        duration: 2630,
         layer: 3
     },
     [ids[5]]: {
         id: ids[5],
         name: '30 start',
-        start: 30,
-        duration: 770,
+        start: 300,
+        duration: 7700,
         layer: 17
     },
     [ids[6]]: {
         id: ids[6],
         name: '664 start',
-        start: 664,
-        duration: 266,
+        start: 6640,
+        duration: 2660,
         layer: 4
     },
     [ids[7]]: {
         id: ids[7],
         name: '366 start',
-        start: 366,
-        duration: 135,
+        start: 3660,
+        duration: 1350,
         layer: 6
     },
     [ids[8]]: {
         id: ids[8],
         name: '380 start',
-        start: 380,
-        duration: 451,
+        start: 3800,
+        duration: 4510,
         layer: 1
     }
 });

packages/safelight/src/components/Panels/PanelGroup.vue

@@ -6,7 +6,6 @@
                 <!-- eslint-disable-next-line vue/no-template-shadow -->
                 <template #item="{ item, props, index }">
                     <a
-                        v-ripple
                         v-bind="props.action"
                         class="align-items-center flex min-w-36 gap-1 p-2 pl-2 pr-1"
                         @click="activeIndex = index"
@@ -110,7 +109,7 @@ const activeTab = computed(() => {
     return panel;
 });
 
-const activeComponent = ref<Component>();
+const activeComponent = shallowRef<Component>();
 watchImmediate(activeTab, (tab) => {
     if (!tab) return;
 

packages/safelight/src/stores/useEditor.ts

@@ -44,19 +44,19 @@ export const useEditor = defineStore('Editor', () => {
     function AddDefaultPanels() {
         PanelManager.RegisterPanel('SL-Timeline', {
             component: () => import('../components/Editor/Timeline/Timeline.vue'),
-            icon: PhFilmStrip,
+            icon: markRaw(PhFilmStrip),
             name: 'Timeline'
         });
 
         PanelManager.RegisterPanel('SL-Library', {
             component: () => import('../components/Editor/Library/Library.vue'),
-            icon: PhFolders,
+            icon: markRaw(PhFolders),
             name: 'Library'
         });
 
         PanelManager.RegisterPanel('SL-Monitor', {
             component: () => import('../components/Editor/Monitor/Monitor.vue'),
-            icon: PhFrameCorners,
+            icon: markRaw(PhFrameCorners),
             name: 'Monitor'
         });
     }

packages/safelight/tsconfig.app.json

@@ -1,13 +1,14 @@
 {
     "extends": "@vue/tsconfig/tsconfig.dom.json",
     "include": [
-        "*.d.ts",
+        "./*.d.ts",
         "./types/**/*.d.ts",
         "src/**/*",
         "src/**/*.ts",
         "src/**/*.vue",
         "src/**/*.json",
-        "tsconfig.worker.json"
+        "tsconfig.worker.json",
+        "../../globals.d.ts"
     ],
     "exclude": ["src/**/__tests__/*"],
     "compilerOptions": {

packages/safelight/tsconfig.node.json

@@ -1,6 +1,6 @@
 {
     "extends": "@tsconfig/node20/tsconfig.json",
-    "include": ["vite.config.*", "buildscripts/*"],
+    "include": ["vite.config.*", "buildscripts/*", "../../globals.d.ts"],
     "compilerOptions": {
         "composite": true,
         "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",

packages/safelight/vite.config.ts

@@ -46,6 +46,9 @@ const vueuseRxjsAutoImport = {
 
 // https://vitejs.dev/config/
 export default defineConfig({
+    define: {
+        __TEST__: false
+    },
     plugins: [
         VueRouter({
             routesFolder: {
@@ -78,6 +81,47 @@ export default defineConfig({
             '@': fileURLToPath(new URL('./src', import.meta.url))
         }
     },
+    optimizeDeps: {
+        include: [
+            '@phosphor-icons/vue',
+            '@vueuse/gesture',
+            '@vueuse/math',
+            '@vueuse/rxjs',
+            'dexie',
+            'fuzzysearch',
+            'hash-wasm',
+            'luxon',
+            'mediainfo.js',
+            'mime-matcher',
+            'primevue/button',
+            'primevue/buttongroup',
+            'primevue/card',
+            'primevue/column',
+            'primevue/confirmdialog',
+            'primevue/datatable',
+            'primevue/dataview',
+            'primevue/dataviewlayoutoptions',
+            'primevue/dropdown',
+            'primevue/inplace',
+            'primevue/inputgroup',
+            'primevue/inputgroupaddon',
+            'primevue/inputmask',
+            'primevue/inputtext',
+            'primevue/menu',
+            'primevue/menubar',
+            'primevue/overlaypanel',
+            'primevue/skeleton',
+            'primevue/slider',
+            'primevue/splitbutton',
+            'primevue/splitter',
+            'primevue/splitterpanel',
+            'primevue/tabmenu',
+            'primevue/toolbar',
+            'primevue/useconfirm',
+            'rxjs',
+            'uuid'
+        ]
+    },
     server: {
         headers: {
             'Cross-Origin-Embedder-Policy': 'require-corp',