transcription

pages/transcription/[id].vue

@@ -8,7 +8,9 @@ const loading = ref(true);
 
 const reload = async () => {
     loading.value = true;
-    const result = (await $fetch(`/api/vx/${route.params.id}/preview`)) as any;
+    const result = (await $fetch(
+        `/api/vx/${route.params.id}/transcription`,
+    )) as any;
 
     setTranscription(result);
 
@@ -20,14 +22,16 @@ const reload = async () => {
 const setTranscription = (result: any) => {
     transcription.value = result.transcription;
     segments.value = transcription.value?.segments!;
-    video.value = result.video;
-    fileName.value = result.filename;
     loading.value = false;
 };
 
 onMounted(async () => {
     const saved = localStorage[key];
 
+    const result = (await $fetch(`/api/vx/${route.params.id}/preview`)) as any;
+    video.value = result.video;
+    fileName.value = result.filename;
+
     if (saved) {
         setTranscription(JSON.parse(saved));
     } else {

pages/transcription/index.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { BccButton } from "@bcc-code/design-library-vue";
+import { BccButton, BccInput } from "@bcc-code/design-library-vue";
 
 const transcription = ref<TranscriptionResult>();
 
@@ -35,6 +35,8 @@ const segments = ref<Segment[]>([]);
 const download = () => {
     downloadTranscription(segments.value, fileName.value!);
 };
+
+const vxId = ref("");
 </script>
 
 <template>
@@ -62,6 +64,19 @@ const download = () => {
                         />
                     </div>
                     <BccButton @click="download">Download</BccButton>
+                    <div class="flex">
+                        <input
+                            v-model="vxId"
+                            class="h-full rounded-l-lg bg-black px-2 text-base"
+                            placeholder="Vidispine-ID"
+                        />
+                        <button
+                            class="rounded-r-lg bg-blue-500 px-2"
+                            @click="navigateTo(`/transcription/${vxId}`)"
+                        >
+                            Go
+                        </button>
+                    </div>
                 </template>
             </TranscriptionEditor>
         </div>

server/api/vx/[id]/preview.get.ts

@@ -13,34 +13,6 @@ export default defineEventHandler(async (event) => {
         })
     ).json();
 
-    const formats = await (
-        await fetch(`${config.baseUrl}/API/v2/items/${id}/formats/`, {
-            method: "GET",
-            headers: {
-                "AUTH-TOKEN": config.authToken,
-                Accept: "application/json",
-            },
-        })
-    ).json();
-
-    let transcription: any = null;
-    for (const format of formats.formats) {
-        if (format.name === "transcription_json") {
-            transcription = await (
-                await fetch(`${config.baseUrl}${format.download_uri}`, {
-                    method: "GET",
-                    headers: {
-                        "AUTH-TOKEN": config.authToken,
-                        Accept: "application/json",
-                    },
-                })
-            ).json();
-            break;
-        }
-    }
-
-    //mediabanken.brunstad.tv/vs/item/download/VX-477493/?shape=VX-959065
-
     let video: any = null;
 
     for (const shape of metadata.previews.shapes) {
@@ -51,7 +23,6 @@ export default defineEventHandler(async (event) => {
     }
 
     return {
-        transcription,
         video,
         filename: metadata.metadata_summary.filename,
     };

server/api/vx/[id]/transcription.get.ts

@@ -0,0 +1,35 @@
+export default defineEventHandler(async (event) => {
+    const id = getRouterParam(event, "id");
+
+    const config = useRuntimeConfig().api.cantemo;
+
+    const formats = await (
+        await fetch(`${config.baseUrl}/API/v2/items/${id}/formats/`, {
+            method: "GET",
+            headers: {
+                "AUTH-TOKEN": config.authToken,
+                Accept: "application/json",
+            },
+        })
+    ).json();
+
+    let transcription: any = null;
+    for (const format of formats.formats) {
+        if (format.name === "transcription_json") {
+            transcription = await (
+                await fetch(`${config.baseUrl}${format.download_uri}`, {
+                    method: "GET",
+                    headers: {
+                        "AUTH-TOKEN": config.authToken,
+                        Accept: "application/json",
+                    },
+                })
+            ).json();
+            break;
+        }
+    }
+
+    return {
+        transcription,
+    };
+});