Reset media view and streams upon closing modal

synadia-labs · Mar 4, 2024 · 14d2428 · 14d2428
1 parent 9a8e5c9
commit 14d2428
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 21 deletions.
diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot as="template" :show="show">
-    <Dialog as="div" class="relative z-10" @close="show = false">
+    <Dialog as="div" class="relative z-10" @close="close()">
       <TransitionChild
         as="template"
         enter="ease-out duration-300"
@@ -33,7 +33,7 @@
                 <button
                   type="button"
                   class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-                  @click="show = false"
+                  @click="close()"
                 >
                   <span class="sr-only">Close</span>
                   <XMarkIcon class="h-6 w-6" aria-hidden="true" />
@@ -71,7 +71,7 @@
                 <button
                   type="button"
                   class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-                  @click="show = false"
+                  @click="close()"
                 >
                   Close
                 </button>
@@ -91,8 +91,14 @@ import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } fro
 import { InformationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
 
 import { fileStore } from '../stores/file'
-const tfStore = fileStore()
-const { body, title, show, mimeType, mediaUrl } = storeToRefs(tfStore)
+const fStore = fileStore()
+const { body, title, show, mimeType, mediaUrl } = storeToRefs(fStore)
+
+
+function close() {
+  console.log('reset')
+  fStore.reset()
+}
 
 watch(
   mimeType,

diff --git a/natster-io/src/stores/catalog.ts b/natster-io/src/stores/catalog.ts
@@ -148,6 +148,7 @@ export const catalogStore = defineStore('catalog', {
       const nStore = natsStore()
       const sub = nStore.connection.subscribe('natster.media.' + catalog + '.' + hash)
       ;(async () => {
+        let timeout;
         for await (const m of sub) {
           const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
           // const totalChunks = parseInt(m.headers.get('x-natster-total-chunks'))
@@ -160,7 +161,19 @@ export const catalogStore = defineStore('catalog', {
           console.log(`chunk #${chunkIdx}: ${decrypted?.byteLength} bytes`)
 
           if (mimeType.toLowerCase().indexOf('video/') === 0) {
+            if (timeout) {
+              clearTimeout(timeout)
+              timeout = null;
+            }
+
             fStore.render(fileName, mimeType, decrypted)
+
+            timeout = setTimeout(() => {
+              fStore.endStream()
+              timeout = null
+
+              sub.unsubscribe()
+            }, 5000)
           } else {
             fStore.render(fileName, mimeType, new TextDecoder().decode(decrypted))
           }

diff --git a/natster-io/src/stores/file.ts b/natster-io/src/stores/file.ts
@@ -4,21 +4,28 @@ export const fileStore = defineStore('file', {
   state: () => ({
     body: null,
     buffer: [],
+    loading: true,
     title: '',
     show: false,
     mimeType: null,
     codec: null,
 
     mediaSource: null,
     mediaUrl: null,
-    updatingBuffer: false,
 
     audioSourceBuffer: null,
     videoSourceBuffer: null,
 
-    appendCount: 0
+    appendCount: 0,
+    appendInterval: null,
   }),
   actions: {
+    endStream() {
+      if (this.mediaSource) {
+        this.mediaSource.endOfStream()
+        console.log('stream ended')
+      }
+    },
     render(title, mimeType, data) {
       this.title = title
       this.show = true
@@ -37,56 +44,84 @@ export const fileStore = defineStore('file', {
             this.videoSourceBuffer = this.mediaSource.addSourceBuffer(`video/mp4; codecs="${this.codec}"`)
 
             this.videoSourceBuffer.addEventListener('updatestart', (e) => {
-              // this.updatingBuffer = true;
-              console.log(e)
+              // console.log(e)
             })
 
             this.videoSourceBuffer.addEventListener('update', (e) => {
-              console.log(e)
+              // console.log(e)
             })
 
             this.videoSourceBuffer.addEventListener('updateend', (e) => {
-              // this.updatingBuffer = false;
-              console.log(e)
+              // console.log(e)
             })
 
             this.videoSourceBuffer.addEventListener('error', (e) => {
               console.log(e)
             })
 
             this.videoSourceBuffer.addEventListener('abort', (e) => {
-              console.log(e)
+              // console.log(e)
             })
           })
 
           this.mediaSource.addEventListener("sourceended", (e) => {
-            console.log(e)
+            this.mediaSource = null;
+            this.audioSourceBuffer = null;
+            this.videoSourceBuffer = null;
+
+            if (this.appendInterval) {
+              clearInterval(this.appendInterval)
+              this.appendInterval = null
+            }
+
+            this.buffer = []
           })
 
           this.mediaSource.addEventListener("sourceclose", (e) => {
-            console.log(e)
+            // console.log(e)
           })
 
           this.mediaSource.addEventListener("error", (e) => {
-            console.log(e)
+            // console.log(e)
           })
         }
 
-        let interval = null
-        interval = setInterval(() => {
+        this.appendInterval = setInterval(() => {
           if (this.videoSourceBuffer && !this.videoSourceBuffer.updating && this.buffer.length > 0) {
             this.videoSourceBuffer.appendBuffer(this.buffer.shift());
 
             this.appendCount++
-            console.log(`append count: ${this.appendCount}`)
+            // console.log(`append count: ${this.appendCount}`)
           }
         }, 10)
 
         this.buffer.push(data)
-        console.log(`buffer length: ${this.buffer.length}`)
+        // console.log(`buffer length: ${this.buffer.length}`)
       } else {
         this.body = data
       }
-    }
+    },
+    reset() {
+      if (this.appendInterval) {
+        clearInterval(this.appendInterval)
+        this.appendInterval = null
+      }
+
+      this.body = null
+      this.buffer = []
+      this.codec = null
+      this.loading = true
+      this.mediaSource = null
+      this.mediaUrl = null
+      this.mimeType = null
+
+      this.audioSourceBuffer = null
+      this.videoSourceBuffer = null
+
+      this.show = false
+      this.title = ''
+
+      console.log('reset!')
+    },
   }
 })