chore: clean up code and remove intervals

This commit is contained in:
qtchaos 2024-04-12 00:01:57 +03:00
parent 9044b4407f
commit e46ca23516
No known key found for this signature in database
GPG Key ID: 7DA98B2B9EF06A90
3 changed files with 30 additions and 47 deletions

View File

@ -1,17 +1,15 @@
import classNames from "classnames";
import { useCallback, useEffect } from "react";
import { useCallback, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next";
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";
import { useProgressStore } from "@/stores/progress";
import { isAutoplayAllowed } from "@/utils/autoplay";
function shouldShowNextEpisodeButton(
time: number,
@ -64,6 +62,7 @@ export function NextEpisodeButton(props: {
const enableAutoplay = usePreferencesStore((s) => s.enableAutoplay);
let show = false;
const hasAutoplayed = useRef(false);
if (showingState === "always") show = true;
else if (showingState === "hover" && props.controlsShowing) show = true;
if (isHidden || status !== "playing" || duration === 0) show = false;
@ -102,21 +101,14 @@ export function NextEpisodeButton(props: {
useEffect(() => {
if (!enableAutoplay || metaType !== "show") return;
const interval = setInterval(() => {
const onePercent = duration / 100;
const isEnding = time >= duration - onePercent && duration !== 0;
const allowAutoplay = Boolean(
conf().ALLOW_AUTOPLAY ||
isExtensionActiveCached() ||
useAuthStore.getState().proxySet,
);
if (isEnding && allowAutoplay) loadNextEpisode();
}, 250);
return () => clearInterval(interval);
if (duration === 0) hasAutoplayed.current = false;
if (isEnding && isAutoplayAllowed() && !hasAutoplayed.current) {
hasAutoplayed.current = true;
loadNextEpisode();
}
}, [duration, enableAutoplay, loadNextEpisode, metaType, time]);
if (!meta?.episode || !nextEp) return null;

View File

@ -1,28 +1,14 @@
import classNames from "classnames";
import { useTranslation } from "react-i18next";
import { useAsync } from "react-use";
import { isExtensionActive } from "@/backend/extension/messaging";
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 { isAutoplayAllowed } from "@/utils/autoplay";
import { getLocaleInfo, sortLangCodes } from "@/utils/language";
function useIsExtensionActive() {
const { loading, value } = useAsync(async () => {
const extensionStatus = (await isExtensionActive()) ? "success" : "unset";
return extensionStatus === "success";
}, []);
return {
loading,
active: value,
};
}
export function PreferencesPart(props: {
language: string;
setLanguage: (l: string) => void;
@ -33,14 +19,8 @@ export function PreferencesPart(props: {
}) {
const { t } = useTranslation();
const sorted = sortLangCodes(appLanguageOptions.map((item) => item.code));
const { loading, active } = useIsExtensionActive();
const extensionActive = active && !loading;
const allowAutoplay = Boolean(
conf().ALLOW_AUTOPLAY ||
extensionActive ||
useAuthStore.getState().proxySet,
);
const allowAutoplay = isAutoplayAllowed();
const options = appLanguageOptions
.sort((a, b) => sorted.indexOf(a.code) - sorted.indexOf(b.code))
@ -101,12 +81,12 @@ export function PreferencesPart(props: {
? 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: allowAutoplay ? "auto" : "none",
opacity: allowAutoplay ? 1 : 0.5,
cursor: allowAutoplay ? "pointer" : "not-allowed",
}}
className={classNames(
"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",
allowAutoplay ? "cursor-pointer" : "cursor-not-allowed",
allowAutoplay ? "opacity-100" : "opacity-50",
allowAutoplay ? "pointer-events-auto" : "pointer-events-none",
)}
>
<Toggle enabled={props.enableAutoplay && allowAutoplay} />
<p className="flex-1 text-white font-bold">

11
src/utils/autoplay.ts Normal file
View File

@ -0,0 +1,11 @@
import { isExtensionActiveCached } from "@/backend/extension/messaging";
import { conf } from "@/setup/config";
import { useAuthStore } from "@/stores/auth";
export function isAutoplayAllowed() {
return Boolean(
conf().ALLOW_AUTOPLAY ||
isExtensionActiveCached() ||
useAuthStore.getState().proxySet,
);
}