feat: dynamic autoplay on previewer
<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`
