Merge pull request #46 from arabcoders/dev

Escape # in folder names.

app/src/Download.py

@@ -137,6 +137,7 @@ class Download:
             self.status_queue.put({'status': 'error', 'msg': str(exc)})
 
         if self.tempPath and self.info._id and os.path.exists(self.tempPath):
+            logging.debug(f'Deleting Temp directory: {self.tempPath}')
             shutil.rmtree(self.tempPath, ignore_errors=True)
 
     async def start(self, notifier):

app/src/Utils.py

@@ -171,6 +171,11 @@ def ExtractInfo(config: dict, url: str, debug: bool = False) -> dict:
         **config,
     }
 
+    # Remove keys that are not needed for info extraction as those keys generate files when used with extract_info.
+    for key in ('writeinfojson', 'writethumbnail', 'writedescription', 'writeautomaticsub'):
+        if key in params:
+            del params[key]
+
     if debug:
         params['verbose'] = True
         params['logger'] = logging.getLogger('YTPTube-ytdl')

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "@fortawesome/vue-fontawesome": "^3.0.5",
         "@vueuse/core": "^10.6.1",
         "core-js": "^3.8.3",
+        "cron-parser": "^4.9.0",
         "hls.js": "^1.4.12",
         "moment": "^2.29.4",
         "plyr": "^3.7.8",
@@ -4646,6 +4647,17 @@
         "node": ">=10"
       }
     },
+    "node_modules/cron-parser": {
+      "version": "4.9.0",
+      "resolved": "https://registry.npmjs.org/cron-parser/-/cron-parser-4.9.0.tgz",
+      "integrity": "sha512-p0SaNjrHOnQeR8/VnfGbmg9te2kfyYSQ7Sc/j/6DtPL3JQvKxmjO9TSjNFpujqV3vEYYBvNNvXSxzyksBWAx1Q==",
+      "dependencies": {
+        "luxon": "^3.2.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -7809,6 +7821,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/luxon": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
+      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.5",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.5.tgz",

frontend/package.json

@@ -15,6 +15,7 @@
     "@fortawesome/vue-fontawesome": "^3.0.5",
     "@vueuse/core": "^10.6.1",
     "core-js": "^3.8.3",
+    "cron-parser": "^4.9.0",
     "hls.js": "^1.4.12",
     "moment": "^2.29.4",
     "plyr": "^3.7.8",

frontend/src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <PageHeader :config="config" @toggleForm="addForm = !addForm" @toggleTasks="showTasks = !showTasks" />
   <formAdd v-if="addForm" :config="config" @addItem="addItem" />
-  <pageTasks v-if="showTasks" :tasks="config.tasks" @removeTask="deleteTask" />
+  <pageTasks v-if="showTasks" :tasks="config.tasks" />
   <DownloadingList :config="config" :queue="downloading" @deleteItem="deleteItem" />
   <PageCompleted :config="config" :completed="completed" @deleteItem="deleteItem" @addItem="addItem"
     @playItem="playItem" />
@@ -31,7 +31,7 @@ import { useToast } from 'vue-toastification'
 import { useStorage, useEventBus } from '@vueuse/core'
 
 const toast = useToast();
-const bus = useEventBus('item_added');
+const bus = useEventBus('item_added', 'show_form', 'task_edit');
 
 const config = reactive({
   isConnected: false,
@@ -164,20 +164,22 @@ const playItem = (item) => {
   let baseDir = 'm3u8/';
 
   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);
 };
 
-const deleteTask = (indexNumber, item) => {
-  if (!confirm(`Are you sure you want to delete this task ${item?.name || item.url}?`)) {
-    return;
+bus.on((event, data) => {
+  if (!['show_form'].includes(event)) {
+    return true;
   }
-  config.tasks = config.tasks.filter((_, index) => {
-    return index !== indexNumber;
-  });
-}
+  if ('show_form' === event) {
+    addForm.value = true;
+    setTimeout(() => bus.emit('task_edit', data), 500);
+  }
+});
 
 </script>
 

frontend/src/assets/css/bulma-dark.css

@@ -5077,7 +5077,7 @@
 
   .modal-card-body {
     -webkit-overflow-scrolling: touch;
-    background-color: white;
+    background-color: #000;
   }
 
   .navbar {

frontend/src/components/Form-Add.vue

@@ -148,7 +148,7 @@ import { defineEmits, defineProps, onMounted, ref } from 'vue'
 import { downloadFormats } from '../formats.js'
 import { useStorage, useEventBus } from '@vueuse/core'
 
-const bus = useEventBus('item_added');
+const bus = useEventBus('item_added', 'task_edit');
 const emits = defineEmits(['addItem']);
 
 const selectedFormat = useStorage('selectedFormat', 'any')
@@ -212,13 +212,17 @@ const resetConfig = () => {
 }
 
 bus.on((event, data) => {
-  if (event !== 'item_added') {
+  const allowedEvents = ['item_added'];
+  if (!allowedEvents.includes(event)) {
     return;
   }
 
-  if (data?.status === 'ok') {
-    url.value = '';
+  if ('item_added' === event) {
+    if (data?.status === 'ok') {
+      url.value = '';
+    }
+    url.value = data.url;
+    addInProgress.value = false;
   }
-  addInProgress.value = false;
 });
 </script>

frontend/src/components/Page-Header.vue

@@ -12,7 +12,7 @@
           <font-awesome-icon icon="fa-solid fa-plus" />
         </button>
       </div>
-      <div class="navbar-item">
+      <div class="navbar-item" v-if="config.tasks.length > 0">
         <button data-tooltip="Show/Hide Tasks" class="button is-dark has-tooltip-bottom" @click="$emit('toggleTasks')">
           <font-awesome-icon icon="fa-solid fa-tasks" />
         </button>

frontend/src/components/Page-Tasks.vue

@@ -8,60 +8,34 @@
         <span>Tasks</span>
       </span>
     </p>
-    <p class="subtitle is-4 has-text-danger">
-      This section is not working yet.
-    </p>
   </div>
 
   <div class="columns is-multiline">
-    <div class="column is-12 has-text-right">
-      <button class="button is-primary" @click="$emit('task_new')">
-        <span class="icon-text">
-          <span class="icon">
-            <font-awesome-icon icon="fa-solid fa-plus" />
-          </span>
-          <span>New Task</span>
-        </span>
-      </button>
-    </div>
-
     <div class="column is-12">
       <div class="table-container">
         <table class="table is-bordered is-narrow is-hoverable is-striped is-fullwidth is-fixed">
           <thead class="has-text-centered">
             <tr>
-              <th class="has-text-centered" width="20%">Name</th>
+              <th class="has-text-centered" width="25%">Name</th>
               <th class="has-text-centered" width="50%">URL</th>
-              <th class="has-text-centered" width="20%">Timer</th>
-              <th class="has-text-centered" width="10%">Options</th>
+              <th class="has-text-centered" width="25%">Next run</th>
             </tr>
           </thead>
           <tbody>
             <tr v-for="item, key in tasks" :key="key">
               <td class="is-text-overflow has-text-centered" v-if="item.name">{{ item.name }}</td>
               <td class="has-text-centered" v-else>Not set</td>
-              <td class="is-text-overflow">{{ item.url }}</td>
-              <td class="has-text-centered" v-if="item.timer">{{ item.timer }}</td>
-              <td class="has-text-centered" v-else>once an hour</td>
-              <td class="has-text-centered">
-                <div class="field is-grouped">
-                  <div class="control is-expanded">
-                    <button class="button is-small is-danger" @click="$emit('removeTask', key, item)"
-                      data-tooltip="Remove task">
-                      <span class="icon">
-                        <font-awesome-icon icon="fa-solid fa-trash" />
-                      </span>
-                    </button>
-                  </div>
-                  <div class="control is-expanded">
-                    <button class="button is-small is-info" data-tooltip="Modify task">
-                      <span class="icon">
-                        <font-awesome-icon icon="fa-solid fa-cog" />
-                      </span>
-                    </button>
-                  </div>
-                </div>
+              <td class="is-text-overflow">
+                <a :href="item.url" target="_blank">
+                  {{ item.url }}
+                </a>
               </td>
+              <td class="has-text-centered" v-if="item.timer">
+                <span :data-tooltip="'Timer: ' + item.timer">
+                  {{ moment(parseExpression(item.timer).next().toISOString()).fromNow() }}
+                </span>
+              </td>
+              <td class="has-text-centered" v-else>once an hour</td>
             </tr>
             <tr v-if="tasks.length < 1">
               <td colspan="4" class="has-text-centered has-text-danger">
@@ -76,15 +50,15 @@
 </template>
 
 <script setup>
-import { defineProps, defineEmits } from 'vue'
-
-defineEmits(['task_new', 'task_add', 'removeTask', 'tasks_updated'])
+import { defineProps } from 'vue'
+import moment from "moment";
+import { parseExpression } from 'cron-parser';
 
 defineProps({
   tasks: {
     type: Array,
     required: true
-  }
+  },
 })
 
 </script>
@@ -93,4 +67,8 @@ defineProps({
 table.is-fixed {
   table-layout: fixed;
 }
+
+div.table-container {
+  overflow: hidden;
+}
 </style>

frontend/src/main.js

@@ -25,6 +25,7 @@ app.config.globalProperties.makeDownload = (config, item, base = 'download') =>
   let baseDir = `${base}/`;
 
   if (item.folder) {
+    item.folder = item.folder.replace('#', '%23');
     baseDir += item.folder + '/';
   }