add autoplay to playback preferences

This commit is contained in:
Pas 2025-07-07 16:09:21 -06:00
parent 30c80053b6
commit 98ec8a1d67
2 changed files with 24 additions and 2 deletions

View file

@ -129,7 +129,7 @@ function SettingsOverlay({ id }: { id: string }) {
<EmbedSelectionView id={id} sourceId={chosenSourceId} />
</Menu.CardWithScrollable>
</OverlayPage>
<OverlayPage id={id} path="/playback" width={343} height={270}>
<OverlayPage id={id} path="/playback" width={343} height={330}>
<Menu.Card>
<PlaybackSettingsView id={id} />
</Menu.Card>

View file

@ -1,5 +1,5 @@
import classNames from "classnames";
import { useCallback, useEffect } from "react";
import { useCallback, useEffect, useMemo } from "react";
import { useTranslation } from "react-i18next";
import { Toggle } from "@/components/buttons/Toggle";
@ -8,6 +8,7 @@ import { useOverlayRouter } from "@/hooks/useOverlayRouter";
import { usePlayerStore } from "@/stores/player/store";
import { usePreferencesStore } from "@/stores/preferences";
import { useWatchPartyStore } from "@/stores/watchParty";
import { isAutoplayAllowed } from "@/utils/autoplay";
function ButtonList(props: {
options: number[];
@ -47,8 +48,17 @@ export function PlaybackSettingsView({ id }: { id: string }) {
const display = usePlayerStore((s) => s.display);
const enableThumbnails = usePreferencesStore((s) => s.enableThumbnails);
const setEnableThumbnails = usePreferencesStore((s) => s.setEnableThumbnails);
const enableAutoplay = usePreferencesStore((s) => s.enableAutoplay);
const setEnableAutoplay = usePreferencesStore((s) => s.setEnableAutoplay);
const enableLowPerformanceMode = usePreferencesStore(
(s) => s.enableLowPerformanceMode,
);
const isInWatchParty = useWatchPartyStore((s) => s.enabled);
const allowAutoplay = useMemo(() => isAutoplayAllowed(), []);
const canShowAutoplay =
!isInWatchParty && allowAutoplay && !enableLowPerformanceMode;
const setPlaybackRate = useCallback(
(v: number) => {
if (isInWatchParty) return; // Don't allow changes in watch party
@ -91,6 +101,18 @@ export function PlaybackSettingsView({ id }: { id: string }) {
</Menu.Section>
<Menu.Section>
<div className="space-y-4 mt-3">
{canShowAutoplay && (
<Menu.Link
rightSide={
<Toggle
enabled={enableAutoplay}
onClick={() => setEnableAutoplay(!enableAutoplay)}
/>
}
>
{t("settings.preferences.autoplayLabel")}
</Menu.Link>
)}
<Menu.Link
rightSide={
<Toggle