diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index c3ad5d8d..6b9402e6 100644
--- a/frontend/src/App.vue
+++ b/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 => {
-  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 playItem = item => video_link.value = makeDownload(config, item, 'm3u8');
 
 const reloadWindow = () => window.location.reload();
 
diff --git a/frontend/src/main.js b/frontend/src/main.js
index da68e718..7eb92e12 100644
--- a/frontend/src/main.js
+++ b/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",