feat: add autoplay configurability with VITE_ALLOW_AUTOPLAY and custom proxy

This commit is contained in:
qtchaos 2024-04-01 00:43:00 +03:00
parent 20cec61eac
commit 34168a7037
No known key found for this signature in database
GPG Key ID: 7DA98B2B9EF06A90
6 changed files with 29 additions and 22 deletions

View File

@ -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

View File

@ -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"
},

View File

@ -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();

View File

@ -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,

View File

@ -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: {
</p>
<div
onClick={() =>
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",
}}
>
<Toggle enabled={props.enableAutoplay && extensionActive} />
<Toggle enabled={props.enableAutoplay && allowAutoplay} />
<p className="flex-1 text-white font-bold">
{t("settings.preferences.autoplayLabel")}
</p>

View File

@ -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<string[]>;
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<keyof Config, undefined | string> = {
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(",")