Added inline video player.

frontend/src/App.vue

@@ -2,12 +2,21 @@
   <PageHeader :config="config" />
   <formAdd :config="config" @addItem="addItem" />
   <DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
-  <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem" />
+  <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
+    @playItem="playItem" />
+
+  <div class="modal" :class="{ 'is-active': video_link }">
+    <div class="modal-background"></div>
+    <div class="modal-content">
+      <video :src="video_link" controls autoplay loop preload="auto" class="is-fullwidth"></video>
+    </div>
+    <button class="modal-close is-large" aria-label="close" @click="video_link = ''"></button>
+  </div>
   <PageFooter />
 </template>
 
 <script setup>
-import { onMounted, reactive } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import PageHeader from './components/Page-Header'
 import formAdd from './components/Form-Add'
 import DownloadingList from './components/Page-Downloading'
@@ -27,6 +36,7 @@ const config = reactive({
 
 const downloading = reactive({});
 const completed = reactive({});
+const video_link = ref('');
 
 onMounted(() => {
   const socket = io(process.env.VUE_APP_BASE_URL);
@@ -147,5 +157,15 @@ const addItem = (item) => {
     toast.error(`Failed to add link. ${error.message}`);
   });
 };
+
+const playItem = (item) => {
+  let baseDir = 'download/';
+
+  if (item.folder) {
+    baseDir += item.folder + '/';
+  }
+
+  video_link.value = config.app.url_host + config.app.url_prefix + baseDir + encodeURIComponent(item.filename);
+};
 </script>
 

frontend/src/components/Page-Completed.vue

@@ -63,7 +63,8 @@
       <div class="card" :class="{ 'is-bordered-danger': item.error ? true : false }">
         <header class="card-header el has-tooltip" :data-tooltip="item.title">
           <div class="card-header-title has-text-centered el is-block">
-            <a v-if="item.filename" referrerpolicy="no-referrer" :href="makeDownload(config, item)" target="_blank">
+            <a v-if="item.filename" referrerpolicy="no-referrer" href="javascript:void(0)"
+              @click="$emit('playItem', item);">
               {{ item.title }}
             </a>
             <span v-else>{{ item.title }}</span>
@@ -109,7 +110,7 @@
               </a>
             </div>
             <div class="column" v-if="item.filename">
-              <a class="button is-fullwidth is-primary" :href="makeDownload(config, item)">
+              <a class="button is-fullwidth is-primary" :href="makeDownload(config, item)" :download="item.filename?.split('/').reverse()[0]">
                 <span class="icon-text">
                   <span class="icon">
                     <i class="fa-solid fa-download"></i>
@@ -166,7 +167,7 @@
 import { defineProps, computed, ref, watch, defineEmits } from 'vue';
 import moment from "moment";
 
-const emits = defineEmits(['deleteItem', 'addItem']);
+const emits = defineEmits(['deleteItem', 'addItem', 'playItem']);
 
 const props = defineProps({
   completed: {