aesthetic stuff and vod provider fix

client-vue/src/components/VodItemVideoInfo.vue

@@ -154,7 +154,7 @@
                 </template>
             </ul>
         </article>
-
+        
         <!-- Twitch VOD -->
         <article v-if="vod.provider == 'twitch'" class="info-column">
             <h4>Twitch VOD</h4>

client-vue/src/components/forms/ChannelAddForm.vue

@@ -3,11 +3,7 @@
         <div class="field">
             <label class="label">{{ t("forms.channel.provider") }}</label>
             <div class="select">
-                <select v-model="formData.provider" class="select" name="provider">
-                    <option value="twitch">Twitch</option>
-                    <option value="youtube">YouTube</option>
-                    <option value="kick">Kick</option>
-                </select>
+                <d-select v-model="formData.provider" name="provider" :options="providers" />
             </div>
             <p class="input-help">YouTube will not work properly until they add webhooks for livestreams. It works with manual recordings and videos.</p>
         </div>
@@ -187,11 +183,7 @@
         <div v-if="formData.download_vod_at_end" class="field">
             <label class="label">{{ t("forms.channel.download_vod_at_end_quality") }}</label>
             <div class="select">
-                <select v-model="formData.download_vod_at_end_quality" name="download_vod_at_end_quality">
-                    <option v-for="quality in VideoQualityArray" :key="quality" :value="quality">
-                        {{ quality }}
-                    </option>
-                </select>
+                <d-select v-model="formData.download_vod_at_end_quality" name="download_vod_at_end_quality" :options="VideoQualityArray" />
             </div>
             <p class="input-help">
                 {{ t("forms.channel.download_vod_at_end_quality_help") }}
@@ -218,18 +210,19 @@
 
 <script lang="ts" setup>
 import FormSubmit from "@/components/reusables/FormSubmit.vue";
-import { computed, ref } from "vue";
+import { computed, provide, ref } from "vue";
 import { VideoQualityArray } from "../../../../common/Defs";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faUserPlus } from "@fortawesome/free-solid-svg-icons";
+import { faTwitch } from "@fortawesome/free-brands-svg-icons";
 import axios, { AxiosError } from "axios";
 import type { UserData } from "@common/User";
 import type { ApiResponse, ApiErrorResponse, IApiResponse } from "@common/Api/Api";
 import { useI18n } from "vue-i18n";
 import type { FormStatus } from "@/twitchautomator";
 import type { KickUser } from "@common/KickAPI/Kick";
 import type { ZodError } from "zod";
-library.add(faUserPlus);
+library.add(faUserPlus, faTwitch);
 
 // emit
 const emit = defineEmits(["formSuccess"]);
@@ -266,6 +259,12 @@ const channelUrl = ref<string>("");
 const fetchingUrl = ref<boolean>(false);
 const login = ref<HTMLInputElement | null>();
 
+const providers = [
+    { value: "twitch", label: "Twitch", icon: "fab fa-twitch" },
+    { value: "youtube", label: "YouTube" },
+    { value: "kick", label: "Kick" },
+];
+
 // computed
 const qualityWarning = computed((): boolean => {
     return formData.value.quality.includes("best") || formData.value.quality.includes("worst");

client-vue/src/components/forms/ChannelUpdateForm.vue

@@ -138,11 +138,7 @@
             <div v-if="formData.download_vod_at_end" class="field">
                 <label class="label">{{ t("forms.channel.download_vod_at_end_quality") }}</label>
                 <div class="select">
-                    <select v-model="formData.download_vod_at_end_quality" name="download_vod_at_end_quality">
-                        <option v-for="quality in VideoQualityArray" :key="quality" :value="quality">
-                            {{ quality }}
-                        </option>
-                    </select>
+                    <d-select v-model="formData.download_vod_at_end_quality" name="download_vod_at_end_quality" :options="VideoQualityArray" />
                 </div>
                 <p class="input-help">
                     {{ t("forms.channel.download_vod_at_end_quality_help") }}

client-vue/src/components/reusables/DSelect.vue

@@ -1,26 +1,49 @@
 <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>
+    <select class="d-select" v-model="selected">
+        <template v-if="!isOptions(options)">
+            <option v-for="option in options">{{ option }}</option>
+        </template>
+        <template v-else>
+            <option v-for="(option, key) in options" :value="option.value" :disabled="option.disabled">
+                <span v-if="option.icon" class="icon" :title="option.icon">
+                    <fa :icon="option.icon.split(' ')" />
+                </span>
+                {{ option.label }}
+            </option>
+        </template>
+    </select>
 </template>
 
+<style lang="scss" scoped>
+.d-select {
+    option {
+        &:disabled {
+            font-style: italic;
+        }
+        &[disabled] {
+            font-style: italic;
+        }
+    }
+}
+</style>
+
 <script lang="ts" setup>
 import { ref, watch, computed, onMounted } from "vue";
 
+export type Option = {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+};
+
 const emit = defineEmits<{
     ( e: "update:modelValue", value: string ): void;
 }>();
 
 const props = defineProps<{
     modelValue: string;
-    options: string[] | Record<string, string>;
+    options: string[] | Option[];
 }>();
 
 const selected = ref(props.modelValue);
@@ -35,6 +58,17 @@ const isObject = computed(() => {
     return typeof props.options === "object";
 });
 
+function isOption( option: string | Option ): option is Option {
+    return (option as Option).value !== undefined;
+}
+
+function isOptions( options: string[] | Option[] ): options is Option[] {
+    if (options === undefined || options.length === 0) {
+        return false;
+    }
+    return (options as Option[])[0].value !== undefined;
+}
+
 watch(selected, (value) => {
     emit("update:modelValue", value);
 });

client-vue/src/components/streamer/VideoDownloadModal.vue

@@ -41,7 +41,9 @@
                         <!--<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" />
+                        <div class="select is-small">
+                            <d-select v-if="isTwitchChannel(streamer)" v-model="quality" :options="VideoQualityArray" />
+                        </div>
                         <d-button size="small" color="success" icon="download" @click="downloadVideo(vod.id.toString())">
                             {{ t("buttons.download") }}
                         </d-button>

client-vue/src/components/vod/ExportModal.vue

@@ -5,16 +5,18 @@
 
     <!-- Exporter -->
     <div class="field">
-        <label class="label">{{ t("vod.export.export-type") }}</label>
+        <label class="label" for="exporter">
+            {{ t("vod.export.export-type") }}
+        </label>
         <div class="control">
             <div class="select">
-                <select v-model="exporter">
-                    <option value="file">File</option>
-                    <option value="youtube">YouTube</option>
-                    <option value="sftp">SFTP</option>
-                    <option value="ftp">FTP</option>
-                    <option value="rclone">RClone</option>
-                </select>
+                <d-select id="exporter" v-model="exporter" :options="[
+                    { value: 'file', label: 'File' },
+                    { value: 'youtube', label: 'YouTube' },
+                    { value: 'sftp', label: 'SFTP' },
+                    { value: 'ftp', label: 'FTP' },
+                    { value: 'rclone', label: 'RClone' },
+                ]" />
             </div>
         </div>
         <p v-if="exporter == 'youtube'">
@@ -38,23 +40,27 @@
 
     <!-- File -->
     <div class="field">
-        <label class="label">{{ t("vod.export.file-source") }}</label>
+        <label class="label" for="file_source">
+            {{ t("vod.export.file-source") }}
+        </label>
         <div class="control">
             <div class="select">
-                <select v-model="exportVodSettings.file_source">
-                    <option value="segment">First captured segment</option>
-                    <option value="downloaded" :disabled="!vod?.is_vod_downloaded">Downloaded</option>
-                    <option value="burned" :disabled="!vod?.is_chat_burned">Burned</option>
-                </select>
+                <d-select id="file_source" v-model="exportVodSettings.file_source" :options="[
+                    { value: 'segment', label: 'First captured segment' },
+                    { value: 'downloaded', label: 'Downloaded', disabled: !vod?.is_vod_downloaded },
+                    { value: 'burned', label: 'Burned', disabled: !vod?.is_chat_burned },
+                ]" />
             </div>
         </div>
     </div>
 
     <!-- Title / Filename -->
     <div class="field">
-        <label class="label">{{ t("vod.export.title-template") }}</label>
+        <label class="label" for="title_template">
+            {{ t("vod.export.title-template") }}
+        </label>
         <div class="control">
-            <input v-model="exportVodSettings.title_template" class="input" type="text" />
+            <input id="title_template" v-model="exportVodSettings.title_template" class="input" type="text" />
             <ul class="template-replacements">
                 <li v-for="(v, k) in ExporterFilenameFields" :key="k">
                     {{ k }}
@@ -91,11 +97,7 @@
         <label class="label">{{ t("vod.export.remote") }}</label>
         <div class="control has-addon">
             <div class="select">
-                <select v-model="exportVodSettings.remote">
-                    <option v-for="remote in rcloneRemotes" :key="remote" :value="remote">
-                        {{ remote }}
-                    </option>
-                </select>
+                <d-select v-model="exportVodSettings.remote" :options="rcloneRemotes" :disabled="LoadingRemotes" />
             </div>
             <button class="button is-confirm" :title="t('vod.export.get-remotes')" @click="getRemotes">
                 <span class="icon">

client-vue/src/core/Providers/Twitch/TwitchVOD.test.ts

@@ -0,0 +1,15 @@
+import { expect, test } from "vitest";
+import type { ApiTwitchVod } from "@common/Api/Client";
+import TwitchVOD from "./TwitchVOD";
+import { TwitchVODChapter } from "./TwitchVODChapter";
+import { MockApiVODData } from "../../../../test/mockdata";
+import BaseVOD from "../Base/BaseVOD";
+
+test("makeFromApiResponse", () => {
+
+    const basevod = BaseVOD.makeFromApiResponse(MockApiVODData);
+    expect(basevod.provider).toBe("base");
+
+    const vod = TwitchVOD.makeFromApiResponse(MockApiVODData);
+    expect(vod.provider).toBe("twitch");
+});

client-vue/src/core/Providers/Twitch/TwitchVOD.ts

@@ -30,8 +30,7 @@ export default class TwitchVOD extends BaseVOD {
 
     public static makeFromApiResponse(apiResponse: ApiTwitchVod): TwitchVOD {
 
-        const baseVod = BaseVOD.makeFromApiResponse(apiResponse);
-
+        const { provider, ...baseVod } = BaseVOD.makeFromApiResponse(apiResponse); // remove provider from baseVod to avoid overwriting it
         const vod = new TwitchVOD();
         Object.assign(vod, baseVod);
 

client-vue/src/core/Providers/YouTube/YouTubeVOD.ts

@@ -16,7 +16,7 @@ export default class YouTubeVOD extends BaseVOD {
 
     public static makeFromApiResponse(apiResponse: ApiYouTubeVod): YouTubeVOD {
 
-        const baseVod = BaseVOD.makeFromApiResponse(apiResponse);
+        const { provider, ...baseVod } = BaseVOD.makeFromApiResponse(apiResponse); // remove provider from baseVod to avoid overwriting it
         const vod = new YouTubeVOD();
         Object.assign(vod, baseVod);