Support added for setting Youtube quality on Open URL modal

Author: Ferenc Nánási

CHANGELOG.md

@@ -35,3 +35,5 @@ Important Android stuff:
 - Some code tidy-up, optimizations,
 - The app gonna check if the mpv-remote-node version is compatible with the app,
 - [CSS] Improved contrast,
+- Made the whole app more consistent,
+- Set Youtube quality on "Open URL" dialog.

src/components/openURLModal.vue

@@ -25,6 +25,27 @@
           v-model="dialog.appendToPlaylist"
         ></ion-checkbox>
       </ion-item>
+      <ion-item lines="full">
+        <ion-label>Youtube quality</ion-label>
+        <ion-select v-model="dialog['file-local-options']['ytdl-format']">
+          <ion-select-option value="">Default</ion-select-option>
+          <ion-select-option value="bestvideo[height<=?2160]+bestaudio/best"
+            >4k</ion-select-option
+          >
+          <ion-select-option value="bestvideo[height<=?1440]+bestaudio/best"
+            >1440p</ion-select-option
+          >
+          <ion-select-option value="bestvideo[height<=?1080]+bestaudio/best"
+            >1080p</ion-select-option
+          >
+          <ion-select-option value="bestvideo[height<=?720]+bestaudio/best"
+            >720p</ion-select-option
+          >
+          <ion-select-option value="bestvideo[height<=?480]+bestaudio/best"
+            >480p</ion-select-option
+          >
+        </ion-select>
+      </ion-item>
       <ion-button
         expand="block"
         style="margin-top: 10px"
@@ -50,20 +71,36 @@ import {
   IonLabel,
   IonButton,
   IonButtons,
+  IonSelect,
+  IonSelectOption,
 } from "@ionic/vue";
 import { arrowBack } from "ionicons/icons";
+import { loadFileFlags } from "../tools";
+
 export default {
   props: ["modalController"],
   setup(props) {
     const dialog = ref({
       filename: "",
       appendToPlaylist: true,
       "file-local-options": {
-        "ytdl-format": "bestvideo[height<=?720]+bestaudio/best",
+        "ytdl-format": "",
       },
     });
+
     const onAppendClicked = () => {
-      props.modalController.dismiss(dialog);
+      if (dialog.value.appendToPlaylist) {
+        dialog.value.flag = loadFileFlags.APPEND_PLAY;
+      } else {
+        dialog.value.flag = loadFileFlags.REPLACE;
+      }
+
+      delete dialog.value.appendToPlaylist;
+      // if (dialog.value["file-local-options"]["ytdl-format"].length === 0) {
+      //   delete dialog.value["file-local-options"]["ytdl-format"];
+      // }
+
+      props.modalController.dismiss(dialog.value);
     };
 
     const onCancelClicked = () => {
@@ -88,6 +125,8 @@ export default {
     IonItem,
     IonButton,
     IonButtons,
+    IonSelect,
+    IonSelectOption,
   },
 };
 </script>

src/tools.js

@@ -47,3 +47,5 @@ export const loadFileFlags = {
   APPEND_PLAY: "append-play",
   REPLACE: "replace",
 };
+
+export const youtubDLQualities = {};

src/views/Player.vue

@@ -230,14 +230,7 @@ export default {
 
       modal.onDidDismiss().then((response) => {
         if (response.data) {
-          const mode = response.data.value.appendToPlaylist
-            ? "append-play"
-            : "replace";
-          apiInstance.post("playlist", {
-            filename: response.data.value.filename,
-            flag: mode,
-            "file-local-options": response.data.value["file-local-options"],
-          });
+          apiInstance.post("playlist", response.data);
         }
       });
       return modal.present();