make playback thing prettier

synadia-labs · Mar 4, 2024 · 17eada2 · 17eada2
1 parent 51c13ff
commit 17eada2
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 43 deletions.
diff --git a/natster-io/src/components/File.vue b/natster-io/src/components/File.vue
@@ -40,37 +40,40 @@
                 </button>
               </div>
               <div class="sm:flex sm:items-start">
-                <div
-                  class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-blue-100 sm:mx-0 sm:h-10 sm:w-10"
-                >
-                  <InformationCircleIcon class="h-6 w-6 text-blue-400" aria-hidden="true" />
-                </div>
                 <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">{{
-                    title
-                  }}</DialogTitle>
+                  <DialogTitle as="h3" class="text-base font-semibold leading-6 text-gray-900">
+                    {{ catalog.name }} | {{ title }}</DialogTitle
+                  >
                   <div class="mt-2">
                     <p v-if="!!body" class="text-sm text-gray-500">
                       {{ body }}
                     </p>
-
-                    <video
-                      v-if="!!mediaUrl && mimeType.toLowerCase() == 'video/mp4'"
-                      id="video"
-                      :type="mimeType"
-                      :src="mediaUrl"
-                      width="640"
-                      height="360"
-                      autoplay
-                      controls
-                    ></video>
-                    <AudioPlayer
-                      v-if="!!mediaUrl && mimeType.toLowerCase() == 'audio/mpeg'"
-                      :option="getAudioOptions(mediaUrl, title, '')"
-                    />
                   </div>
                 </div>
               </div>
+              <div class="relative">
+                <video
+                  v-if="!!mediaUrl && mimeType.toLowerCase() == 'video/mp4'"
+                  id="video"
+                  :type="mimeType"
+                  :src="mediaUrl"
+                  width="640"
+                  height="360"
+                  autoplay
+                  controls
+                ></video>
+                <AudioPlayer
+                  v-if="!!mediaUrl && mimeType.toLowerCase() == 'audio/mpeg'"
+                  :option="
+                    getAudioOptions(
+                      mediaUrl,
+                      description == '' ? title : description,
+                      catalog.image
+                    )
+                  "
+                  :title="title"
+                />
+              </div>
               <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
                 <button
                   type="button"
@@ -98,7 +101,7 @@ import 'vue3-audio-player/dist/style.css'
 
 import { fileStore } from '../stores/file'
 const fStore = fileStore()
-const { body, title, show, mimeType, mediaUrl } = storeToRefs(fStore)
+const { body, title, show, mimeType, mediaUrl, catalog, description } = storeToRefs(fStore)
 
 function close() {
   console.log('reset')

diff --git a/natster-io/src/components/FileComp.vue b/natster-io/src/components/FileComp.vue
@@ -69,12 +69,7 @@
                 <button
                   :disabled="false"
                   @click.prevent="
-                    cStore.downloadFile(
-                      getFileName(file.path),
-                      catalog.name,
-                      file.hash,
-                      file.mime_type
-                    )
+                    cStore.downloadFile(getFileName(file.path), catalog, file.hash, file.mime_type)
                   "
                   :class="[
                     active ? 'bg-violet-500 text-white' : 'text-gray-900',
@@ -92,7 +87,13 @@
               <MenuItem v-slot="{ active }">
                 <button
                   @click.prevent="
-                    cStore.viewFile(getFileName(file.path), catalog.name, file.hash, file.mime_type)
+                    cStore.viewFile(
+                      getFileName(file.path),
+                      file.description,
+                      catalog,
+                      file.hash,
+                      file.mime_type
+                    )
                   "
                   :class="[
                     active ? 'bg-violet-500 text-white' : 'text-gray-900',

diff --git a/natster-io/src/stores/catalog.ts b/natster-io/src/stores/catalog.ts
@@ -147,7 +147,7 @@ export const catalogStore = defineStore('catalog', {
 
       var fileArray
       const nStore = natsStore()
-      const sub = nStore.connection.subscribe('natster.media.' + catalog + '.' + hash)
+      const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
       ;(async () => {
         for await (const m of sub) {
           const chunkIdx = parseInt(m.headers.get('x-natster-chunk-idx'))
@@ -172,7 +172,7 @@ export const catalogStore = defineStore('catalog', {
         target_xkey: this.xkey_pub
       }
       await nStore.connection
-        .request('natster.catalog.' + catalog + '.download', JSON.stringify(dl_request), {
+        .request('natster.catalog.' + catalog.name + '.download', JSON.stringify(dl_request), {
           timeout: 5000
         })
         .then((m) => {
@@ -183,7 +183,7 @@ export const catalogStore = defineStore('catalog', {
           console.error('nats requestCatalogFiles err: ', err)
         })
     },
-    async viewFile(fileName, catalog, hash, mimeType) {
+    async viewFile(fileName, fileDescription, catalog, hash, mimeType) {
       const fStore = fileStore()
 
       let xkey = createCurve()
@@ -192,7 +192,7 @@ export const catalogStore = defineStore('catalog', {
 
       var fileArray
       const nStore = natsStore()
-      const sub = nStore.connection.subscribe('natster.media.' + catalog + '.' + hash)
+      const sub = nStore.connection.subscribe('natster.media.' + catalog.name + '.' + hash)
       ;(async () => {
         let timeout
         for await (const m of sub) {
@@ -207,7 +207,7 @@ export const catalogStore = defineStore('catalog', {
               timeout = null
             }
 
-            fStore.render(fileName, mimeType, decrypted)
+            fStore.render(fileName, fileDescription, mimeType, decrypted, catalog)
 
             timeout = setTimeout(() => {
               fStore.endStream()
@@ -217,9 +217,15 @@ export const catalogStore = defineStore('catalog', {
             }, 5000)
           } else {
             if (mimeType.toLowerCase() === 'audio/mpeg') {
-              fStore.render(fileName, mimeType, decrypted)
+              fStore.render(fileName, fileDescription, mimeType, decrypted, catalog)
             } else {
-              fStore.render(fileName, mimeType, new TextDecoder().decode(decrypted))
+              fStore.render(
+                fileName,
+                fileDescription,
+                mimeType,
+                new TextDecoder().decode(decrypted),
+                catalog
+              )
             }
 
             if (chunkIdx === totalChunks - 1) {
@@ -237,7 +243,7 @@ export const catalogStore = defineStore('catalog', {
         target_xkey: this.xkey_pub
       }
       await nStore.connection
-        .request('natster.catalog.' + catalog + '.download', JSON.stringify(dl_request), {
+        .request('natster.catalog.' + catalog.name + '.download', JSON.stringify(dl_request), {
           timeout: 5000
         })
         .then((m) => {

diff --git a/natster-io/src/stores/file.ts b/natster-io/src/stores/file.ts
@@ -5,7 +5,9 @@ export const fileStore = defineStore('file', {
     body: null,
     buffer: [],
     loading: true,
+    catalog: null,
     title: '',
+    description: '',
     show: false,
     mimeType: null,
     codec: null,
@@ -18,7 +20,7 @@ export const fileStore = defineStore('file', {
 
     appendCount: 0,
     appendInterval: null,
-    streamEndInterval: null,
+    streamEndInterval: null
   }),
   actions: {
     endStream() {
@@ -34,10 +36,12 @@ export const fileStore = defineStore('file', {
         }, 100)
       }
     },
-    render(title, mimeType, data) {
+    render(title, description, mimeType, data, catalog) {
       this.title = title
       this.show = true
       this.mimeType = mimeType
+      this.catalog = catalog
+      this.description = description
 
       if (mimeType.toLowerCase().indexOf('video/') === 0) {
         if (!this.mediaSource && !this.mediaUrl && !this.videoSourceBuffer) {
@@ -78,7 +82,11 @@ export const fileStore = defineStore('file', {
           this.mediaSource.addEventListener('error', (e) => {})
 
           this.appendInterval = setInterval(() => {
-            if (this.videoSourceBuffer && !this.videoSourceBuffer.updating && this.buffer.length > 0) {
+            if (
+              this.videoSourceBuffer &&
+              !this.videoSourceBuffer.updating &&
+              this.buffer.length > 0
+            ) {
               this.videoSourceBuffer.appendBuffer(this.buffer.shift())
               this.appendCount++
             }
@@ -128,7 +136,11 @@ export const fileStore = defineStore('file', {
           const re = /sourcebuffer is full/i // FIXME? how does this work across browsers?
 
           this.appendInterval = setInterval(() => {
-            if (this.audioSourceBuffer && !this.audioSourceBuffer.updating && this.buffer.length > 0) {
+            if (
+              this.audioSourceBuffer &&
+              !this.audioSourceBuffer.updating &&
+              this.buffer.length > 0
+            ) {
               const _data = this.buffer.shift()
 
               try {