Add option to choose which YouTube embed player to use for playback

src/components/player/YoutubePlayer.vue

@@ -55,7 +55,11 @@ export default {
             host: "https://www.youtube.com/iframe_api",
         };
 
-        const host = "https://www.youtube.com";
+        const host = (
+            this.$store.state.settings.YTEmbedVariant === "youtube"
+            // eslint-disable-next-line no-alert
+            || (this.$store.state.settings.YTEmbedVariant === "" && window.confirm(this.$t("views.settings.YTEmbedVariantPromptMsg")))
+        ) ? "https://www.youtube.com" : "https://www.youtube-nocookie.com";
 
         this.player = player(this.elementId, {
             host,

src/locales/en/ui.yml

@@ -302,6 +302,13 @@ views:
     hideMissingStreams: Hide Missing Streams
     ignoredTopicsLabel: Ignored Topics
     ignoredTopicsMsg: Hide videos with these topics from the Home and Favorites pages
+    YTEmbedVariantLabel: YouTube Player
+    YTEmbedVariantMsg: Change the player used to play YouTube videos. Might help alleviate playback throttling issues.
+    YTEmbedVariant:
+      - Ask every time
+      - YouTube default
+      - Privacy Enhanced Mode
+    YTEmbedVariantPromptMsg: Confirm to use default YouTube player, or cancel to use Privacy Enhanced Mode
     theme: Theme
     moreSettings: More Settings
   app:

src/locales/zh-TW/ui.yml

@@ -275,6 +275,13 @@ views:
     hideMissingStreams: 隱藏已消失的實況
     ignoredTopicsLabel: 隱藏指定內容標籤
     ignoredTopicsMsg: 在首頁與我的收藏頁面中隱藏含有下列內容標籤的影片
+    YTEmbedVariantLabel: YouTube 播放器
+    YTEmbedVariantMsg: 更改用作播放 YouTube 的播放器。或許能舒緩播放限制。
+    YTEmbedVariant:
+      - 每次詢問
+      - YouTube 預設
+      - 隱私加強保護模式
+    YTEmbedVariantPromptMsg: 按確定採用 YouTube 預設播放器，取消則採用隱私加強保護模式
     theme: 佈景主題
     moreSettings: 更多設定
   app:

src/store/migrations/index.ts

@@ -8,7 +8,8 @@ import v8 from "./v8-20210714-multiview-content-reset";
 import v9 from "./v9-2021097-mv-defaults";
 import v10 from "./v10-20230401-fools";
 import v11 from "./v11-20230402-foolsnomore";
+import v12 from "./v12-20241231-ytembedvariant";
 
-export const migrations: IMigration[] = [v2, v4, v5, v6, v7, v8, v9, v10, v11];
+export const migrations: IMigration[] = [v2, v4, v5, v6, v7, v8, v9, v10, v11, v12];
 
-export const VUEX_STATE_VERSION = 11;
+export const VUEX_STATE_VERSION = 12;

src/store/migrations/v12-20241231-ytembedvariant.ts

@@ -0,0 +1,12 @@
+import type { IMigration } from "vuex-persistedstate-migrate";
+
+export default <IMigration>{
+    version: 12,
+    // set YTEmbedVariant to youtube by default
+    up: (state) => ({
+            ...state,
+            settings: {
+                YTEmbedVariant: "youtube",
+            },
+        }),
+};

src/store/settings.module.js

@@ -30,6 +30,7 @@ const initialState = {
     ignoredTopics: [],
     // Valid values: "grid" | "list" | "denseList"
     homeViewMode: "grid",
+    YTEmbedVariant: "youtube",
 
     // Live TL Window Settings
     liveTlStickBottom: false,
@@ -105,6 +106,9 @@ const mutations = {
     setScrollMode(state, val) {
         state.scrollMode = val;
     },
+    setYTEmbedVariant(state, val) {
+        state.YTEmbedVariant = val;
+    },
     ...createSimpleMutation([
         "defaultOpen",
         "liveTlStickBottom",
@@ -122,6 +126,7 @@ const mutations = {
         "hidePlaceholder",
         "hideMissing",
         "homeViewMode",
+        "YTEmbedVariant",
     ]),
     resetState(state) {
         Object.assign(state, initialState);

src/utils/icons.js

@@ -29,6 +29,7 @@ export {
     mdiMusic,
     mdiPencil, // for changing language
     mdiPlay,
+    mdiPlayNetwork,
     mdiPlaylistMusic,
     mdiPlaylistPlay,
     mdiPlaylistPlus,

src/views/Settings.vue

@@ -213,6 +213,23 @@
               :label="$t('views.settings.redirectModeLabel')"
               :messages="$t('views.settings.redirectModeMsg')"
             />
+            <div class="mb-0 mt-6">
+              <v-icon style="margin-right: 9px">
+                {{ icons.mdiPlayNetwork }}
+              </v-icon>
+              <span class="text-body-1">{{ $t("views.settings.YTEmbedVariantLabel") }}</span>
+            </div>
+            <v-select
+              v-model="YTEmbedVariant"
+              prepend-icon=" "
+              class="mt-n4"
+              :items="[
+                { text: $t('views.settings.YTEmbedVariant[0]'), value: '' },
+                { text: $t('views.settings.YTEmbedVariant[1]'), value: 'youtube' },
+                { text: $t('views.settings.YTEmbedVariant[2]'), value: 'youtube-nocookie' },
+              ]"
+              :messages="$t('views.settings.YTEmbedVariantMsg')"
+            />
           </v-card-text>
         </v-sheet>
       </v-col>
@@ -334,6 +351,14 @@ export default {
                 this.$store.commit("setCurrentGridSize", val);
             },
         },
+        YTEmbedVariant: {
+            get() {
+                return this.$store.state.settings.YTEmbedVariant;
+            },
+            set(val) {
+                this.$store.commit("settings/setYTEmbedVariant", val);
+            },
+        },
         useEnName: {
             get() {
                 return this.$store.getters["settings/useEnName"];