From bb902f4ab2bf5ee411db14e4263b921a855cd830 Mon Sep 17 00:00:00 2001 From: philklc <882957+philklc@users.noreply.github.com> Date: Tue, 31 Dec 2024 04:25:13 +0800 Subject: [PATCH] Add option to choose which YouTube embed player to use for playback --- src/components/player/YoutubePlayer.vue | 6 ++++- src/locales/en/ui.yml | 7 ++++++ src/locales/zh-TW/ui.yml | 7 ++++++ src/store/migrations/index.ts | 5 ++-- .../migrations/v12-20241231-ytembedvariant.ts | 12 +++++++++ src/store/settings.module.js | 5 ++++ src/utils/icons.js | 1 + src/views/Settings.vue | 25 +++++++++++++++++++ 8 files changed, 65 insertions(+), 3 deletions(-) create mode 100644 src/store/migrations/v12-20241231-ytembedvariant.ts diff --git a/src/components/player/YoutubePlayer.vue b/src/components/player/YoutubePlayer.vue index b45f8a9ee..03ed1ba50 100644 --- a/src/components/player/YoutubePlayer.vue +++ b/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, diff --git a/src/locales/en/ui.yml b/src/locales/en/ui.yml index ba163cb25..e2bfd21fa 100644 --- a/src/locales/en/ui.yml +++ b/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: diff --git a/src/locales/zh-TW/ui.yml b/src/locales/zh-TW/ui.yml index 4c1221742..30c785c0c 100644 --- a/src/locales/zh-TW/ui.yml +++ b/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: diff --git a/src/store/migrations/index.ts b/src/store/migrations/index.ts index cf1327efe..9b0bb8d7b 100644 --- a/src/store/migrations/index.ts +++ b/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; diff --git a/src/store/migrations/v12-20241231-ytembedvariant.ts b/src/store/migrations/v12-20241231-ytembedvariant.ts new file mode 100644 index 000000000..f30ae65e0 --- /dev/null +++ b/src/store/migrations/v12-20241231-ytembedvariant.ts @@ -0,0 +1,12 @@ +import type { IMigration } from "vuex-persistedstate-migrate"; + +export default { + version: 12, + // set YTEmbedVariant to youtube by default + up: (state) => ({ + ...state, + settings: { + YTEmbedVariant: "youtube", + }, + }), +}; diff --git a/src/store/settings.module.js b/src/store/settings.module.js index 6000d0a05..dbeffe43a 100644 --- a/src/store/settings.module.js +++ b/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); diff --git a/src/utils/icons.js b/src/utils/icons.js index 0bea24132..da77acd1d 100644 --- a/src/utils/icons.js +++ b/src/utils/icons.js @@ -29,6 +29,7 @@ export { mdiMusic, mdiPencil, // for changing language mdiPlay, + mdiPlayNetwork, mdiPlaylistMusic, mdiPlaylistPlay, mdiPlaylistPlus, diff --git a/src/views/Settings.vue b/src/views/Settings.vue index 3c87eee2e..ff4f34f88 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -213,6 +213,23 @@ :label="$t('views.settings.redirectModeLabel')" :messages="$t('views.settings.redirectModeMsg')" /> +
+ + {{ icons.mdiPlayNetwork }} + + {{ $t("views.settings.YTEmbedVariantLabel") }} +
+ @@ -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"];