mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

scroll to active episode and caption, fix last provider being nonactive. caption delays mobile friendly input, bigger range caption delay range

Browse source 
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
mrjvs 2023-10-23 21:03:50 +02:00
parent ace10dde78
commit a2968d3bf8
9 changed files with 95 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/components/Icon.tsx
View file

@ -64,7 +64,7 @@ const iconList: Record<Icons, string> = {
chevronDown: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>`,
chevronUp: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>`,
chevronRight: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
chevronLeft: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
clapperBoard: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M326.1 160l127.4-127.4C451.7 32.39 449.9 32 448 32h-86.06l-128 128H326.1zM166.1 160l128-128H201.9l-128 128H166.1zM497.7 56.19L393.9 160H512V96C512 80.87 506.5 67.15 497.7 56.19zM134.1 32H64C28.65 32 0 60.65 0 96v64h6.062L134.1 32zM0 416c0 35.35 28.65 64 64 64h384c35.35 0 64-28.65 64-64V192H0V416z"/></svg>`,
film: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M463.1 32h-416C21.49 32-.0001 53.49-.0001 80v352c0 26.51 21.49 48 47.1 48h416c26.51 0 48-21.49 48-48v-352C511.1 53.49 490.5 32 463.1 32zM111.1 408c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 408zM111.1 280c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM111.1 152c0 4.418-3.582 8-8 8H55.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8L111.1 152zM351.1 400c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V400zM351.1 208c0 8.836-7.164 16-16 16H175.1c-8.836 0-16-7.164-16-16v-96c0-8.838 7.164-16 16-16h160c8.836 0 16 7.162 16 16V208zM463.1 408c0 4.418-3.582 8-8 8h-47.1c-4.418 0-7.1-3.582-7.1-8l0-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V408zM463.1 280c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8v-48c0-4.418 3.582-8 8-8h47.1c4.418 0 8 3.582 8 8V280zM463.1 152c0 4.418-3.582 8-8 8h-47.1c-4.418 0-8-3.582-8-8l0-48c0-4.418 3.582-8 7.1-8h47.1c4.418 0 8 3.582 8 8V152z"/></svg>`,
dragon: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M18.43 255.8L192 224L100.8 292.6C90.67 302.8 97.8 320 112 320h222.7c-9.499-26.5-14.75-54.5-14.75-83.38V194.2L200.3 106.8C176.5 90.88 145 92.75 123.3 111.2l-117.5 116.4C-6.562 238 2.436 258 18.43 255.8zM575.2 289.9l-100.7-50.25c-16.25-8.125-26.5-24.75-26.5-43V160h63.99l28.12 22.62C546.1 188.6 554.2 192 562.7 192h30.1c11.1 0 23.12-6.875 28.5-17.75l14.37-28.62c5.374-10.87 4.25-23.75-2.999-33.5l-74.49-99.37C552.1 4.75 543.5 0 533.5 0H296C288.9 0 285.4 8.625 290.4 13.62L351.1 64L292.4 88.75c-5.874 3-5.874 11.37 0 14.37L351.1 128l-.0011 108.6c0 72 35.99 139.4 95.99 179.4c-195.6 6.75-344.4 41-434.1 60.88c-8.124 1.75-13.87 9-13.87 17.38C.0463 504 8.045 512 17.79 512h499.1c63.24 0 119.6-47.5 122.1-110.8C642.3 354 617.1 310.9 575.2 289.9zM489.1 66.25l45.74 11.38c-2.75 11-12.5 18.88-24.12 18.25C497.7 95.25 484.8 83.38 489.1 66.25z"/></svg>`,

4
src/components/player/atoms/Episodes.tsx
View file

@ -123,7 +123,7 @@ function EpisodesView({
content = <CenteredText>Loading...</CenteredText>;
else if (loadingState.value) {
content = (
<Menu.Section className="pb-6">
<Menu.ScrollToActiveSection className="pb-6">
{loadingState.value.season.episodes.length === 0 ? (
<Menu.TextDisplay title="No episodes found">
There are no episodes in this season, check back later!
@ -173,7 +173,7 @@ function EpisodesView({
</Menu.Link>
);
})}
</Menu.Section>
</Menu.ScrollToActiveSection>
);
}

49
src/components/player/atoms/settings/CaptionSettingsView.tsx
View file

@ -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: {
<button
className={classNames(
inputClasses,
props.controlButtons ? "pr-8 relative" : undefined
props.controlButtons ? "relative" : undefined
)}
type="button"
tabIndex={0}
@ -171,32 +170,36 @@ function CaptionSetting(props: {
)}
</button>
{props.controlButtons ? (
<div className="actions w-6 h-full absolute right-0 top-0 flex items-center flex-col">
<>
<div className="actions w-6 h-full absolute left-0 top-0 grid grid-cols-1 items-center justify-center">
<button
type="button"
onClick={
() =>
setNewValue(
props.value + 1 / 10 ** (props.decimalsAllowed ?? 0)
) // Add depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
}
className="hover:text-white transition-colors duration-100"
>
<Icon icon={Icons.CHEVRON_UP} />
</button>
<button
type="button"
onClick={
() =>
setNewValue(
props.onChange?.(
props.value - 1 / 10 ** (props.decimalsAllowed ?? 0)
) // Remove depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
}
className="hover:text-white transition-colors duration-100"
className={arrowButtonClasses}
>
<Icon icon={Icons.CHEVRON_DOWN} />
<Icon icon={Icons.CHEVRON_LEFT} />
</button>
</div>
<div className="actions w-6 h-full absolute right-0 top-0 grid grid-cols-1 items-center justify-center">
<button
type="button"
onClick={
() =>
props.onChange?.(
props.value + 1 / 10 ** (props.decimalsAllowed ?? 0)
) // Add depending on the decimalsAllowed. If there's 1 decimal allowed, add 0.1. For 2, add 0.01, etc.
}
className={arrowButtonClasses}
>
<Icon icon={Icons.CHEVRON_RIGHT} />
</button>
</div>
</>
) : null}
</div>
)}

12
src/components/player/atoms/settings/CaptionsView.tsx
View file

@ -42,7 +42,10 @@ export function CaptionOption(props: {
error={props.error}
onClick={props.onClick}
>
<span className="flex items-center">
<span
data-active-link={props.selected ? true : undefined}
className="flex items-center"
>
<span data-code={props.countryCode} className="mr-3">
<FlagIcon countryCode={countryCode} />
</span>
@ -167,12 +170,15 @@ export function CaptionsView({ id }: { id: string }) {
<Input value={searchQuery} onInput={setSearchQuery} />
</div>
</div>
<Menu.Section className="!pt-1 mt-2 pb-3">
<Menu.ScrollToActiveSection
loaded={req.loading}
className="!pt-1 mt-2 pb-3"
>
<CaptionOption onClick={() => disable()} selected={!lang}>
Off
</CaptionOption>
{content}
</Menu.Section>
</Menu.ScrollToActiveSection>
</>
);
}

7
src/components/player/internals/ContextMenu/Links.tsx
View file

@ -74,7 +74,11 @@ export function Link(props: {
if (!props.onClick) {
return (
<div className={classes} style={styles}>
<div
className={classes}
style={styles}
data-active-link={props.active ? true : undefined}
>
{content}
</div>
);
@ -86,6 +90,7 @@ export function Link(props: {
className={classes}
style={styles}
onClick={props.onClick}
data-active-link={props.active ? true : undefined}
>
{content}
</button>

34
src/components/player/internals/ContextMenu/Sections.tsx
View file

@ -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: {
</div>
);
}
export function ScrollToActiveSection(props: {
children: React.ReactNode;
className?: string;
loaded?: boolean;
}) {
const scrollingContainer = useRef<HTMLDivElement>(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 (
<div
ref={scrollingContainer}
className={classNames("pt-4 space-y-1", props.className)}
>
{props.children}
</div>
);
}

8
src/pages/parts/player/ScrapingPart.tsx
View file

@ -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 (
<div className="h-full w-full relative" ref={containerRef}>

2
src/stores/subtitles/index.ts
View file

@ -67,7 +67,7 @@ export const useSubtitleStore = create(
},
setDelay(delay) {
set((s) => {
s.delay = delay;
s.delay = Math.max(Math.min(500, delay), -500);
});
},
})),

1
tailwind.config.js
View file

@ -148,6 +148,7 @@ module.exports = {
buttonFocus: "#202836",
flagBg: "#202836",
inputBg: "#202836",
buttonOverInputHover: "#283040",
inputPlaceholder: "#374A56",
cardBorder: "#1B262E",
slider: "#8787A8",