dselect

MrBrax · Nov 9, 2023 · a60fa7e · a60fa7e
1 parent 8d2b1d9
commit a60fa7e
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/client-vue/src/components/reusables/DSelect.vue b/client-vue/src/components/reusables/DSelect.vue
@@ -0,0 +1,46 @@
+<template>
+    <div class="select is-small">
+        <select class="d-select" v-model="selected">
+            <template v-if="!isObject">
+                <option v-for="option in options">{{ option }}</option>
+            </template>
+            <template v-else>
+                <option v-for="(option, key) in options" :value="key">{{ option }}</option>
+            </template>
+        </select>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed, onMounted } from "vue";
+
+const emit = defineEmits<{
+    ( e: "update:modelValue", value: string ): void;
+}>();
+
+const props = defineProps<{
+    modelValue: string;
+    options: string[] | Record<string, string>;
+}>();
+
+const selected = ref(props.modelValue);
+
+onMounted(() => {
+    if (props.modelValue) {
+        selected.value = props.modelValue;
+    }
+});
+
+const isObject = computed(() => {
+    return typeof props.options === "object";
+});
+
+watch(selected, (value) => {
+    emit("update:modelValue", value);
+});
+
+watch(() => props.modelValue, (value) => {
+    selected.value = value;
+});
+
+</script>
diff --git a/client-vue/src/components/streamer/VideoDownloadModal.vue b/client-vue/src/components/streamer/VideoDownloadModal.vue
@@ -41,6 +41,7 @@
                         <!--<li>Estimated size: {{ formatBytes(((averageVodBitrate || 6000000) / 10) * parseTwitchDuration(vod.duration)) }}</li>-->
                     </ul>
                     <div class="section-actions">
+                        <d-select v-if="isTwitchChannel(streamer)" v-model="quality" :options="VideoQualityArray" />
                         <d-button size="small" color="success" icon="download" @click="downloadVideo(vod.id.toString())">
                             {{ t("buttons.download") }}
                         </d-button>
@@ -54,6 +55,7 @@
 
 <script lang="ts" setup>
 import YouTubeChannel from "@/core/Providers/YouTube/YouTubeChannel";
+import { VideoQualityArray } from "@common/Defs";
 import { isTwitchChannel, isYouTubeChannel, humanDuration, formatNumber, formatNumberShort } from "@/mixins/newhelpers";
 import type { ProxyVideo } from "@common/Proxies/Video";
 import axios from "axios";
@@ -74,6 +76,7 @@ const { t } = useI18n();
 
 const onlineVods = ref<ProxyVideo[]>([]);
 const loading = ref(false);
+const quality = ref<string>("best");
 
 // videos
 async function fetchTwitchVods() {
@@ -140,7 +143,7 @@ async function downloadVideo(id: string) {
     let response;
 
     try {
-        response = await axios.get<ApiResponse>(`/api/v0/channels/${props.streamer.uuid}/download/${id}`);
+        response = await axios.get<ApiResponse>(`/api/v0/channels/${props.streamer.uuid}/download/${id}?quality=${quality.value}`);
     } catch (error) {
         if (axios.isAxiosError(error)) {
             console.error("downloadVideo error", error.response);

diff --git a/client-vue/src/main.ts b/client-vue/src/main.ts
@@ -14,6 +14,7 @@ import i18n from "./plugins/i18n";
 
 import LoadingBox from "@/components/reusables/LoadingBox.vue";
 import DButton from "@/components/reusables/DButton.vue";
+import DSelect from "@/components/reusables/DSelect.vue";
 
 if (import.meta.env.BASE_URL !== undefined) {
     axios.defaults.baseURL = import.meta.env.BASE_URL;
@@ -28,6 +29,7 @@ createApp(App)
     .component("font-awesome-icon", FontAwesomeIcon)
     .component("LoadingBox", LoadingBox)
     .component("DButton", DButton)
+    .component("DSelect", DSelect)
     // .mixin(titleMixin)
     // .mixin(helpers)
     .mount("#app");