feat: handle subtitles for video streaming (filebrowser#18)

src/components/files/Preview.vue

@@ -22,6 +22,7 @@
       <img v-if="req.type == 'image'" :src="raw()">
       <audio v-else-if="req.type == 'audio'" :src="raw()" autoplay controls></audio>
       <video v-else-if="req.type == 'video'" :src="raw()" autoplay controls>
+        <track v-for="(sub, index) in subtitles" :kind="sub.kind" :src="'/api/subtitle/' + sub.src" :label="sub.label" :default="index === 0">
         Sorry, your browser doesn't support embedded videos,
         but don't worry, you can <a :href="download()">download it</a>
         and watch it with your favorite video player!
@@ -56,7 +57,8 @@ export default {
     return {
       previousLink: '',
       nextLink: '',
-      listing: null
+      listing: null,
+      subtitles: []
     }
   },
   computed: {
@@ -76,6 +78,13 @@ export default {
         this.updateLinks()
       })
       .catch(this.$showError)
+    if (this.req.type === 'audio' || this.req.type === 'video') {
+      api.subtitles(this.req.url.slice(6))
+        .then(req => {
+          this.subtitles = req
+        })
+        .catch(this.$showError)
+    }
   },
   beforeDestroy () {
     window.removeEventListener('keyup', this.key)

src/utils/api.js

@@ -453,3 +453,26 @@ export function share (url, expires = '', unit = 'hours') {
     request.send()
   })
 }
+
+export function subtitles (url) {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/subtitles${url}`, true)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject(new Error(request.status))
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}