From 1f46665c7332fd0f090934b252a1715d99bb16c9 Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Tue, 1 Oct 2024 14:17:54 -0400
Subject: [PATCH 1/2] process video files from editor

---
 src/components/panels/video-panel.vue | 61 +++++++++++++++++++++------
 1 file changed, 47 insertions(+), 14 deletions(-)

diff --git a/src/components/panels/video-panel.vue b/src/components/panels/video-panel.vue
index 8169d494..c7890263 100644
--- a/src/components/panels/video-panel.vue
+++ b/src/components/panels/video-panel.vue
@@ -24,7 +24,7 @@
                 :poster="config.thumbnailUrl"
                 controls
             >
-                <source :type="fileType" :src="config.src" />
+                <source :type="fileType" :src="videoBlobSrc ? videoBlobSrc : config.src" />
                 <!-- add captions with transcript -->
                 <track
                     kind="captions"
@@ -76,12 +76,11 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { onBeforeMount, onMounted, ref } from 'vue';
+import { onBeforeMount, onMounted, ref, getCurrentInstance } from 'vue';
+import { ConfigFileStructure, VideoPanel } from '@storylines/definitions';
 import { useRoute } from 'vue-router';
 import MarkdownIt from 'markdown-it';
 
-import { VideoPanel } from '@storylines/definitions';
-
 const md = new MarkdownIt({ html: true });
 const route = useRoute();
 
@@ -89,12 +88,18 @@ const props = defineProps({
     config: {
         type: Object as PropType<VideoPanel>,
         required: true
+    },
+    configFileStructure: {
+        type: Object as PropType<ConfigFileStructure>
     }
 });
 
 const lang = ref('en');
 const langs = ref<Record<string, string>>({ en: 'English', fr: 'French' });
 
+const videoBlobSrc = ref('');
+const captionsBlobSrc = ref('');
+const transcriptBlobSrc = ref('');
 const fileType = ref('');
 const expandTranscript = ref(false);
 
@@ -112,20 +117,48 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-    // fetch and config transcript content and render with md
-    if (props.config.transcript) {
-        const ext = extensionType(props.config.transcript);
-
-        fetch(props.config.transcript).then((res: Response) => {
-            res.text().then((content: string) => {
-                rawTranscript.value = content;
-                // can be HTML or MD format
-                transcriptContent.value = ext === 'md' ? md.render(rawTranscript.value) : rawTranscript.value;
+    if (props.configFileStructure) {
+        // get video file from config file structure
+        const assetSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
+        const assetFile = extractBlobFile(assetSrc);
+        videoBlobSrc.value = assetFile ? assetFile : '';
+
+        // get captions file from config file structure
+        const captionsSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
+        const captionsFile = extractBlobFile(captionsSrc);
+        videoBlobSrc.value = captionsFile ? captionsFile : '';
+
+        // get transcript file from config file structure
+        const transcriptSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
+        const transcriptFile = extractBlobFile(transcriptSrc);
+        videoBlobSrc.value = transcriptFile ? transcriptFile : '';
+    } else {
+        // fetch and config transcript content and render with md
+        if (props.config.transcript) {
+            const ext = extensionType(props.config.transcript);
+
+            fetch(props.config.transcript).then((res: Response) => {
+                res.text().then((content: string) => {
+                    rawTranscript.value = content;
+                    // can be HTML or MD format
+                    transcriptContent.value = ext === 'md' ? md.render(rawTranscript.value) : rawTranscript.value;
+                });
             });
-        });
+        }
     }
 });
 
+const extractBlobFile = (src: string): string => {
+    const videoFile = props.configFileStructure?.zip.file(src);
+    if (videoFile) {
+        videoFile.async('blob').then((res: Blob) => {
+            return URL.createObjectURL(res);
+        });
+    }
+
+    return '';
+};
+
 const toggleTranscript = (): void => {
     expandTranscript.value = !expandTranscript.value;
 };

From 9d0f430d9cacfa9f6ff05e36e199ec26b78cc33e Mon Sep 17 00:00:00 2001
From: Yi Lei Feng <fengyilei1@gmail.com>
Date: Fri, 25 Oct 2024 13:36:17 -0400
Subject: [PATCH 2/2] add support for handling uploaded
 video/captions/transcript files in editor preview

---
 package.json                          |  2 +-
 src/components/panels/video-panel.vue | 53 ++++++++++++++++-----------
 2 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index f1c81ca2..9d02e9cf 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "ramp-storylines_demo-scenarios-pcar",
     "description": "A user-configurable story product featuring interactive maps, charts and dynamic multimedia content alongside text.",
-    "version": "3.2.6",
+    "version": "3.2.7",
     "private": false,
     "license": "MIT",
     "repository": "https://github.com/ramp4-pcar4/story-ramp",
diff --git a/src/components/panels/video-panel.vue b/src/components/panels/video-panel.vue
index c7890263..79fd4796 100644
--- a/src/components/panels/video-panel.vue
+++ b/src/components/panels/video-panel.vue
@@ -19,16 +19,17 @@
         <template v-if="config.videoType === 'local' || config.videoType === 'external'">
             <video
                 class="media-player"
+                :src="videoBlobSrc ? videoBlobSrc : undefined"
                 :title="config.title"
                 :height="config.height ? `${config.height}` : '500px'"
                 :poster="config.thumbnailUrl"
                 controls
             >
-                <source :type="fileType" :src="videoBlobSrc ? videoBlobSrc : config.src" />
+                <source v-if="!videoBlobSrc" :type="fileType" :src="videoBlobSrc ? videoBlobSrc : config.src" />
                 <!-- add captions with transcript -->
                 <track
                     kind="captions"
-                    :src="config.caption"
+                    :src="captionsBlobSrc ? captionsBlobSrc : config.caption"
                     :srclang="lang"
                     :label="langs[lang]"
                     v-if="config.caption"
@@ -76,7 +77,7 @@
 
 <script setup lang="ts">
 import type { PropType } from 'vue';
-import { onBeforeMount, onMounted, ref, getCurrentInstance } from 'vue';
+import { onBeforeMount, onMounted, ref } from 'vue';
 import { ConfigFileStructure, VideoPanel } from '@storylines/definitions';
 import { useRoute } from 'vue-router';
 import MarkdownIt from 'markdown-it';
@@ -119,19 +120,20 @@ onBeforeMount(() => {
 onMounted(() => {
     if (props.configFileStructure) {
         // get video file from config file structure
-        const assetSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
-        const assetFile = extractBlobFile(assetSrc);
-        videoBlobSrc.value = assetFile ? assetFile : '';
-
+        if (props.config.videoType === 'local') {
+            extractBlobFile(`${props.config.src.substring(props.config.src.indexOf('/') + 1)}`, 'video');
+        }
         // get captions file from config file structure
-        const captionsSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
-        const captionsFile = extractBlobFile(captionsSrc);
-        videoBlobSrc.value = captionsFile ? captionsFile : '';
-
+        if (props.config.caption) {
+            extractBlobFile(`${props.config.caption.substring(props.config.caption.indexOf('/') + 1)}`, 'captions');
+        }
         // get transcript file from config file structure
-        const transcriptSrc = `${props.config.src.substring(props.config.src.indexOf('/') + 1)}`;
-        const transcriptFile = extractBlobFile(transcriptSrc);
-        videoBlobSrc.value = transcriptFile ? transcriptFile : '';
+        if (props.config.transcript) {
+            extractBlobFile(
+                `${props.config.transcript.substring(props.config.transcript.indexOf('/') + 1)}`,
+                'transcript'
+            );
+        }
     } else {
         // fetch and config transcript content and render with md
         if (props.config.transcript) {
@@ -148,15 +150,24 @@ onMounted(() => {
     }
 });
 
-const extractBlobFile = (src: string): string => {
-    const videoFile = props.configFileStructure?.zip.file(src);
-    if (videoFile) {
-        videoFile.async('blob').then((res: Blob) => {
-            return URL.createObjectURL(res);
+const extractBlobFile = (src: string, type?: string): void => {
+    const assetFile = props.configFileStructure?.zip.file(src);
+    if (assetFile) {
+        assetFile.async('blob').then((res: Blob) => {
+            if (type === 'video') {
+                const videoBlob = new Blob([res], { type: 'video/mp4' });
+                videoBlobSrc.value = URL.createObjectURL(videoBlob);
+            } else if (type === 'transcript') {
+                res.text().then((content: string) => {
+                    rawTranscript.value = content;
+                    // can be HTML or MD format
+                    transcriptContent.value = rawTranscript.value;
+                });
+            } else {
+                captionsBlobSrc.value = URL.createObjectURL(res);
+            }
         });
     }
-
-    return '';
 };
 
 const toggleTranscript = (): void => {