From 34168a7037d3817293ab864b2b7e9fbe91d0cb19 Mon Sep 17 00:00:00 2001 From: qtchaos <72168435+qtchaos@users.noreply.github.com> Date: Mon, 1 Apr 2024 00:43:00 +0300 Subject: [PATCH] feat: add autoplay configurability with `VITE_ALLOW_AUTOPLAY` and custom proxy --- Dockerfile | 2 ++ src/assets/locales/en.json | 2 +- .../player/atoms/NextEpisodeButton.tsx | 10 +++++++++- src/pages/Settings.tsx | 16 +--------------- src/pages/parts/settings/PreferencesPart.tsx | 17 ++++++++++++----- src/setup/config.ts | 4 ++++ 6 files changed, 29 insertions(+), 22 deletions(-) diff --git a/Dockerfile b/Dockerfile index 12b13f98..5f837bd3 100644 --- a/Dockerfile +++ b/Dockerfile @@ -23,6 +23,7 @@ ARG ONBOARDING_PROXY_INSTALL_LINK ARG DISALLOWED_IDS ARG CDN_REPLACEMENTS ARG TURNSTILE_KEY +ARG ALLOW_AUTOPLAY="false" ENV VITE_PWA_ENABLED=${PWA_ENABLED} ENV VITE_GA_ID=${GA_ID} @@ -39,6 +40,7 @@ ENV VITE_ONBOARDING_PROXY_INSTALL_LINK=${ONBOARDING_PROXY_INSTALL_LINK} ENV VITE_DISALLOWED_IDS=${DISALLOWED_IDS} ENV VITE_CDN_REPLACEMENTS=${CDN_REPLACEMENTS} ENV VITE_TURNSTILE_KEY=${TURNSTILE_KEY} +ENV VITE_ALLOW_AUTOPLAY=${ALLOW_AUTOPLAY} COPY . ./ RUN pnpm run build diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index cf86111b..0ed81ef8 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -524,7 +524,7 @@ "thumbnailDescription": "Most of the time, videos don't have thumbnails. You can enable this setting to generate them on the fly but they can make your video slower.", "thumbnailLabel": "Generate thumbnails", "autoplay": "Autoplay", - "autoplayDescription": "Automatically play the next episode in a series after reaching the end. This feature is reserved only for extension users.", + "autoplayDescription": "Automatically play the next episode in a series after reaching the end. Can be enabled by users with the browser extension, a custom proxy, or with the default setup if allowed by the host.", "autoplayLabel": "Autoplay", "title": "Preferences" }, diff --git a/src/components/player/atoms/NextEpisodeButton.tsx b/src/components/player/atoms/NextEpisodeButton.tsx index a6eb33a7..60ba63eb 100644 --- a/src/components/player/atoms/NextEpisodeButton.tsx +++ b/src/components/player/atoms/NextEpisodeButton.tsx @@ -7,6 +7,8 @@ import { isExtensionActiveCached } from "@/backend/extension/messaging"; import { Icon, Icons } from "@/components/Icon"; import { usePlayerMeta } from "@/components/player/hooks/usePlayerMeta"; import { Transition } from "@/components/utils/Transition"; +import { conf } from "@/setup/config"; +import { useAuthStore } from "@/stores/auth"; import { PlayerMeta } from "@/stores/player/slices/source"; import { usePlayerStore } from "@/stores/player/store"; import { usePreferencesStore } from "@/stores/preferences"; @@ -105,7 +107,13 @@ export function NextEpisodeButton(props: { const isEnding = time >= duration - halfPercent && duration !== 0; const debouncedLoadNextEpisode = throttle(debounce(loadNextEpisode), 300); - if (isEnding && isExtensionActiveCached()) debouncedLoadNextEpisode(); + const allowAutoplay = Boolean( + conf().ALLOW_AUTOPLAY || + isExtensionActiveCached() || + useAuthStore.getState().proxySet, + ); + + if (isEnding && allowAutoplay) debouncedLoadNextEpisode(); return () => { debouncedLoadNextEpisode.cancel(); diff --git a/src/pages/Settings.tsx b/src/pages/Settings.tsx index 7d2e30de..997fa3ed 100644 --- a/src/pages/Settings.tsx +++ b/src/pages/Settings.tsx @@ -225,21 +225,7 @@ export function SettingsPage() { account, backendUrl, setEnableThumbnails, - state.enableThumbnails.state, - state.enableAutoplay.state, - state.appLanguage.state, - state.appLanguage.changed, - state.theme.state, - state.theme.changed, - state.subtitleStyling.state, - state.proxyUrls.state, - state.proxyUrls.changed, - state.profile.state, - state.profile.changed, - state.backendUrl.changed, - state.backendUrl.state, - state.deviceName.changed, - state.deviceName.state, + state, setEnableAutoplay, setAppLanguage, setTheme, diff --git a/src/pages/parts/settings/PreferencesPart.tsx b/src/pages/parts/settings/PreferencesPart.tsx index 8cf2c565..f81e0c9e 100644 --- a/src/pages/parts/settings/PreferencesPart.tsx +++ b/src/pages/parts/settings/PreferencesPart.tsx @@ -6,7 +6,9 @@ import { Toggle } from "@/components/buttons/Toggle"; import { FlagIcon } from "@/components/FlagIcon"; import { Dropdown } from "@/components/form/Dropdown"; import { Heading1 } from "@/components/utils/Text"; +import { conf } from "@/setup/config"; import { appLanguageOptions } from "@/setup/i18n"; +import { useAuthStore } from "@/stores/auth"; import { getLocaleInfo, sortLangCodes } from "@/utils/language"; function useIsExtensionActive() { @@ -34,6 +36,11 @@ export function PreferencesPart(props: { const { loading, active } = useIsExtensionActive(); const extensionActive = active && !loading; + const allowAutoplay = Boolean( + conf().ALLOW_AUTOPLAY || + extensionActive || + useAuthStore.getState().proxySet, + ); const options = appLanguageOptions .sort((a, b) => sorted.indexOf(a.code) - sorted.indexOf(b.code)) @@ -90,18 +97,18 @@ export function PreferencesPart(props: {

- extensionActive + allowAutoplay ? props.setEnableAutoplay(!props.enableAutoplay) : null } className="bg-dropdown-background hover:bg-dropdown-hoverBackground select-none my-4 cursor-pointer space-x-3 flex items-center max-w-[25rem] py-3 px-4 rounded-lg" style={{ - pointerEvents: extensionActive ? "auto" : "none", - opacity: extensionActive ? 1 : 0.5, - cursor: extensionActive ? "pointer" : "not-allowed", + pointerEvents: allowAutoplay ? "auto" : "none", + opacity: allowAutoplay ? 1 : 0.5, + cursor: allowAutoplay ? "pointer" : "not-allowed", }} > - +

{t("settings.preferences.autoplayLabel")}

diff --git a/src/setup/config.ts b/src/setup/config.ts index a71b997c..751540e3 100644 --- a/src/setup/config.ts +++ b/src/setup/config.ts @@ -23,6 +23,7 @@ interface Config { ONBOARDING_CHROME_EXTENSION_INSTALL_LINK: string; ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string; ONBOARDING_PROXY_INSTALL_LINK: string; + ALLOW_AUTOPLAY: boolean; } export interface RuntimeConfig { @@ -39,6 +40,7 @@ export interface RuntimeConfig { TURNSTILE_KEY: string | null; CDN_REPLACEMENTS: Array; HAS_ONBOARDING: boolean; + ALLOW_AUTOPLAY: boolean; ONBOARDING_CHROME_EXTENSION_INSTALL_LINK: string | null; ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK: string | null; ONBOARDING_PROXY_INSTALL_LINK: string | null; @@ -64,6 +66,7 @@ const env: Record = { TURNSTILE_KEY: import.meta.env.VITE_TURNSTILE_KEY, CDN_REPLACEMENTS: import.meta.env.VITE_CDN_REPLACEMENTS, HAS_ONBOARDING: import.meta.env.VITE_HAS_ONBOARDING, + ALLOW_AUTOPLAY: import.meta.env.VITE_ALLOW_AUTOPLAY, }; function coerceUndefined(value: string | null | undefined): string | undefined { @@ -109,6 +112,7 @@ export function conf(): RuntimeConfig { .filter((v) => v.length > 0), NORMAL_ROUTER: getKey("NORMAL_ROUTER", "false") === "true", HAS_ONBOARDING: getKey("HAS_ONBOARDING", "true") === "true", + ALLOW_AUTOPLAY: getKey("ALLOW_AUTOPLAY", "false") === "true", TURNSTILE_KEY: getKey("TURNSTILE_KEY"), DISALLOWED_IDS: getKey("DISALLOWED_IDS", "") .split(",")