From a2968d3bf83873f53c95344ee5c6d1f6eb004d05 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Mon, 23 Oct 2023 21:03:50 +0200 Subject: [PATCH] scroll to active episode and caption, fix last provider being nonactive. caption delays mobile friendly input, bigger range caption delay range Co-authored-by: Jip Frijlink --- src/components/Icon.tsx | 2 +- src/components/player/atoms/Episodes.tsx | 4 +- .../atoms/settings/CaptionSettingsView.tsx | 69 ++++++++++--------- .../player/atoms/settings/CaptionsView.tsx | 12 +++- .../player/internals/ContextMenu/Links.tsx | 7 +- .../player/internals/ContextMenu/Sections.tsx | 34 +++++++++ src/pages/parts/player/ScrapingPart.tsx | 8 ++- src/stores/subtitles/index.ts | 2 +- tailwind.config.js | 1 + 9 files changed, 95 insertions(+), 44 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 2c4e6e29..c5607d5a 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -64,7 +64,7 @@ const iconList: Record = { chevronDown: ``, chevronUp: ``, chevronRight: ``, - chevronLeft: ``, + chevronLeft: ``, clapperBoard: ``, film: ``, dragon: ``, diff --git a/src/components/player/atoms/Episodes.tsx b/src/components/player/atoms/Episodes.tsx index 9cca9a4d..eee474a1 100644 --- a/src/components/player/atoms/Episodes.tsx +++ b/src/components/player/atoms/Episodes.tsx @@ -123,7 +123,7 @@ function EpisodesView({ content = Loading...; else if (loadingState.value) { content = ( - + {loadingState.value.season.episodes.length === 0 ? ( There are no episodes in this season, check back later! @@ -173,7 +173,7 @@ function EpisodesView({ ); })} - + ); } diff --git a/src/components/player/atoms/settings/CaptionSettingsView.tsx b/src/components/player/atoms/settings/CaptionSettingsView.tsx index 2029dcb4..30a202f7 100644 --- a/src/components/player/atoms/settings/CaptionSettingsView.tsx +++ b/src/components/player/atoms/settings/CaptionSettingsView.tsx @@ -77,12 +77,11 @@ function CaptionSetting(props: { }; }, [isFocused]); - function setNewValue(value: number) { - props.onChange?.(Math.min(Math.max(value, props.min), props.max)); - } - - const inputClasses = - "px-3 py-1 bg-video-context-inputBg rounded w-20 text-left text-white cursor-text"; + const inputClasses = `py-1 bg-video-context-inputBg rounded text-white cursor-text ${ + props.controlButtons ? "text-center px-4 w-24" : "px-3 text-left w-20" + }`; + const arrowButtonClasses = + "hover:text-white transition-colors duration-100 w-full h-full flex justify-center items-center hover:bg-video-context-buttonOverInputHover rounded"; const textTransformer = props.textTransformer ?? ((s) => s); return ( @@ -161,7 +160,7 @@ function CaptionSetting(props: { - - + <> +
+ +
+
+ +
+ ) : null} )} diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx index 1fc37e83..a75c30ba 100644 --- a/src/components/player/atoms/settings/CaptionsView.tsx +++ b/src/components/player/atoms/settings/CaptionsView.tsx @@ -42,7 +42,10 @@ export function CaptionOption(props: { error={props.error} onClick={props.onClick} > - + @@ -167,12 +170,15 @@ export function CaptionsView({ id }: { id: string }) { - + disable()} selected={!lang}> Off {content} - + ); } diff --git a/src/components/player/internals/ContextMenu/Links.tsx b/src/components/player/internals/ContextMenu/Links.tsx index 5f6550be..d28817f9 100644 --- a/src/components/player/internals/ContextMenu/Links.tsx +++ b/src/components/player/internals/ContextMenu/Links.tsx @@ -74,7 +74,11 @@ export function Link(props: { if (!props.onClick) { return ( -
+
{content}
); @@ -86,6 +90,7 @@ export function Link(props: { className={classes} style={styles} onClick={props.onClick} + data-active-link={props.active ? true : undefined} > {content} diff --git a/src/components/player/internals/ContextMenu/Sections.tsx b/src/components/player/internals/ContextMenu/Sections.tsx index 0d460dae..e10ed0a9 100644 --- a/src/components/player/internals/ContextMenu/Sections.tsx +++ b/src/components/player/internals/ContextMenu/Sections.tsx @@ -1,4 +1,5 @@ import classNames from "classnames"; +import { useEffect, useRef } from "react"; export function SectionTitle(props: { children: React.ReactNode; @@ -26,3 +27,36 @@ export function Section(props: {
); } + +export function ScrollToActiveSection(props: { + children: React.ReactNode; + className?: string; + loaded?: boolean; +}) { + const scrollingContainer = useRef(null); + + useEffect(() => { + const active = + scrollingContainer.current?.querySelector("[data-active-link]"); + + const boxRect = scrollingContainer.current?.getBoundingClientRect(); + const activeLinkRect = active?.getBoundingClientRect(); + if (!activeLinkRect || !boxRect) return; + + const activeYPos = activeLinkRect.top - boxRect.top; + + scrollingContainer.current?.scrollTo( + 0, + activeYPos - boxRect.height / 2 + activeLinkRect.height / 2 + ); + }, [props.loaded]); + + return ( +
+ {props.children} +
+ ); +} diff --git a/src/pages/parts/player/ScrapingPart.tsx b/src/pages/parts/player/ScrapingPart.tsx index 7690ce82..a94c373b 100644 --- a/src/pages/parts/player/ScrapingPart.tsx +++ b/src/pages/parts/player/ScrapingPart.tsx @@ -41,9 +41,11 @@ export function ScrapingPart(props: ScrapingProps) { const currentProvider = sourceOrder.find( (s) => sources[s.id].status === "pending" ); - const currentProviderIndex = - sourceOrder.findIndex((provider) => currentProvider?.id === provider.id) ?? - sourceOrder.length - 1; + let currentProviderIndex = sourceOrder.findIndex( + (provider) => currentProvider?.id === provider.id + ); + if (currentProviderIndex === -1) + currentProviderIndex = sourceOrder.length - 1; return (
diff --git a/src/stores/subtitles/index.ts b/src/stores/subtitles/index.ts index 45da117a..16b34e00 100644 --- a/src/stores/subtitles/index.ts +++ b/src/stores/subtitles/index.ts @@ -67,7 +67,7 @@ export const useSubtitleStore = create( }, setDelay(delay) { set((s) => { - s.delay = delay; + s.delay = Math.max(Math.min(500, delay), -500); }); }, })), diff --git a/tailwind.config.js b/tailwind.config.js index 2ed17141..89455a05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -148,6 +148,7 @@ module.exports = { buttonFocus: "#202836", flagBg: "#202836", inputBg: "#202836", + buttonOverInputHover: "#283040", inputPlaceholder: "#374A56", cardBorder: "#1B262E", slider: "#8787A8",