Merge pull request #123 from arabcoders/dev

updated video play to support playsinline for mobile devices.

app/player/Subtitle.py

@@ -36,7 +36,7 @@ class Subtitle:
         if not rFile.suffix in self.allowedExtensions:
             raise Exception(f"File '{file}' subtitle type is not supported.")
 
-        if rFile.suffix is ".vtt":
+        if rFile.suffix == ".vtt":
             subData = ''
             with open(realFile, 'r') as f:
                 subData = f.read()

frontend/src/App.vue

@@ -25,7 +25,7 @@
 </template>
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref, inject } from 'vue'
 import PageHeader from './components/Page-Header'
 import formAdd from './components/Form-Add'
 import pageTasks from './components/Page-Tasks'
@@ -47,6 +47,8 @@ const config = reactive({
   tasks: [],
 })
 
+const makeDownload = inject('makeDownload')
+
 const socket = ref()
 const downloading = reactive({})
 const completed = reactive({})
@@ -229,16 +231,7 @@ const addItem = (item) => {
   });
 };
 
-const playItem = item => {
+const playItem = item => video_link.value = makeDownload(config, item, 'm3u8');
-  let baseDir = 'player/playlist/';
-
-  if (item.folder) {
-    item.folder = item.folder.replace('#', '%23');
-    baseDir += item.folder + '/';
-  }
-
-  video_link.value = config.app.url_host + config.app.url_prefix + baseDir + encodeURIComponent(item.filename) + '.m3u8';
-};
 
 const reloadWindow = () => window.location.reload();
 

frontend/src/components/Video-Player.vue

@@ -17,7 +17,7 @@
 </style>
 
 <template>
-  <video ref="video" :poster="previewImageLink" :controls="isControls" :title="title">
+  <video ref="video" :poster="previewImageLink" :controls="isControls" :title="title" playsinline>
     <source :src="link" type="application/x-mpegURL" />
   </video>
 </template>

frontend/src/main.js

@@ -28,6 +28,14 @@ library.add(faCog, faTrash, faLink, faPlus, faTrashCan, faCircleXmark, faCircleC
   faPowerOff, faPaperPlane, faBoxArchive)
 const app = createApp(App);
 
+app.config.globalProperties.encodePath = item => {
+  if (!item) {
+    return item
+  }
+
+  return item.split('/').map(decodeURIComponent).map(encodeURIComponent).join('/').replace(/#/g, '%23')
+}
+
 app.config.globalProperties.capitalize = s => s && s[0].toUpperCase() + s.slice(1);
 app.config.globalProperties.makeDownload = (config, item, base = 'download') => {
   let baseDir = 'download' === base ? `${base}/` : 'player/playlist/';
@@ -37,7 +45,7 @@ app.config.globalProperties.makeDownload = (config, item, base = 'download') =>
     baseDir += item.folder + '/';
   }
 
-  let url = config.app.url_host + config.app.url_prefix + baseDir + encodeURIComponent(item.filename);
+  let url = config.app.url_host + app.config.globalProperties.encodePath(config.app.url_prefix + baseDir + item.filename);
   return ('m3u8' === base) ? url + '.m3u8' : url;
 }
 
@@ -53,6 +61,8 @@ app.config.globalProperties.formatBytes = (bytes, decimals = 2) => {
   return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
 }
 
+app.provide('makeDownload', app.config.globalProperties.makeDownload)
+
 app.use(Toast, {
   transition: "Vue-Toastification__bounce",
   position: "bottom-right",