feat: dynamic autoplay on previewer

filebrowser · Mar 26, 2021 · a76e01d · a76e01d
1 parent 2697093
commit a76e01d
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
@@ -57,8 +57,22 @@
     <template v-if="!loading">
       <div class="preview">
         <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
-        <audio v-else-if="req.type == 'audio'" :src="raw" controls></audio>
-        <video v-else-if="req.type == 'video'" :src="raw" controls>
+        <audio
+          v-else-if="req.type == 'audio'"
+          ref="player"
+          :src="raw"
+          controls
+          :autoplay="autoPlay"
+          @play="autoPlay = true"
+        ></audio>
+        <video
+          v-else-if="req.type == 'video'"
+          ref="player"
+          :src="raw"
+          controls
+          :autoplay="autoPlay"
+          @play="autoPlay = true"
+        >
           <track
             kind="captions"
             v-for="(sub, index) in subtitles"
@@ -139,6 +153,7 @@ export default {
       showNav: true,
       navTimeout: null,
       hoverNav: false,
+      autoPlay: false,
     };
   },
   computed: {
@@ -233,6 +248,14 @@ export default {
       }
     },
     async updatePreview() {
+      if (
+        this.$refs.player &&
+        this.$refs.player.paused &&
+        !this.$refs.player.ended
+      ) {
+        this.autoPlay = false;
+      }
+
       if (this.req.subtitles) {
         this.subtitles = this.req.subtitles.map(
           (sub) => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`