mirror of
https://github.com/movie-web/movie-web.git
synced 2024-09-21 06:39:41 +02:00
tap backdrop fix, router syncing with popout, start of captions popout,
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
Jelle van Snik
parent
d9ccce1726
commit
c4712044a9
@ -31,6 +31,7 @@ export enum Icons {
|
||||
SKIP_FORWARD = "skip_forward",
|
||||
SKIP_BACKWARD = "skip_backward",
|
||||
FILE = "file",
|
||||
CAPTIONS = "captions",
|
||||
}
|
||||
|
||||
export interface IconProps {
|
||||
@ -65,10 +66,11 @@ const iconList: Record<Icons, string> = {
|
||||
edit: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M362.7 19.3L314.3 67.7 444.3 197.7l48.4-48.4c25-25 25-65.5 0-90.5L453.3 19.3c-25-25-65.5-25-90.5 0zm-71 71L58.6 323.5c-10.4 10.4-18 23.3-22.2 37.4L1 481.2C-1.5 489.7 .8 498.8 7 505s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L421.7 220.3 291.7 90.3z"/></svg>`,
|
||||
bookmark_outline: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M336 0h-288C21.49 0 0 21.49 0 48v431.9c0 24.7 26.79 40.08 48.12 27.64L192 423.6l143.9 83.93C357.2 519.1 384 504.6 384 479.9V48C384 21.49 362.5 0 336 0zM336 452L192 368l-144 84V54C48 50.63 50.63 48 53.1 48h276C333.4 48 336 50.63 336 54V452z"/></svg>`,
|
||||
airplay: `<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-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon fill="currentColor" points="12 15 17 21 7 21 12 15"></polygon></svg>`,
|
||||
episodes: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4C1.34315 4 0 5.34314 0 7V13.9496C0 15.6065 1.34315 16.9496 3 16.9496H5.86645V14.9496H3C2.44772 14.9496 2 14.5019 2 13.9496V7C2 6.44771 2.44771 6 3 6H16.0327C16.585 6 17.0327 6.44772 17.0327 7V9.86645H19.0327V7C19.0327 5.34315 17.6896 4 16.0327 4H3Z" fill="currentColor"/><rect x="5.89929" y="10.5444" width="17" height="10" rx="2" stroke="currentColor" stroke-width="2"/></svg>`,
|
||||
skip_forward: `<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3333 12.3333L16 7.66667M16 7.66667L11.3333 3M16 7.66667H6.66667C5.42899 7.66667 4.242 8.15833 3.36684 9.0335C2.49167 9.90867 2 11.0957 2 12.3333C2 13.571 2.49167 14.758 3.36684 15.6332C4.242 16.5083 5.42899 17 6.66667 17H9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M16.5043 14.2727V23H14.6591V16.0241H14.608L12.6094 17.277V15.6406L14.7699 14.2727H16.5043ZM22.0004 23.1918C21.2674 23.1889 20.6367 23.0085 20.1083 22.6506C19.5827 22.2926 19.1779 21.7741 18.8938 21.0952C18.6126 20.4162 18.4734 19.5994 18.4762 18.6449C18.4762 17.6932 18.6168 16.8821 18.8981 16.2116C19.1822 15.5412 19.587 15.0312 20.1126 14.6818C20.641 14.3295 21.2702 14.1534 22.0004 14.1534C22.7305 14.1534 23.3583 14.3295 23.8839 14.6818C24.4123 15.0341 24.8185 15.5455 25.1026 16.2159C25.3867 16.8835 25.5273 17.6932 25.5245 18.6449C25.5245 19.6023 25.3825 20.4205 25.0984 21.0994C24.8171 21.7784 24.4137 22.2969 23.8881 22.6548C23.3626 23.0128 22.7333 23.1918 22.0004 23.1918ZM22.0004 21.6619C22.5004 21.6619 22.8995 21.4105 23.1978 20.9077C23.4961 20.4048 23.6438 19.6506 23.641 18.6449C23.641 17.983 23.5728 17.4318 23.4364 16.9915C23.3029 16.5511 23.1126 16.2202 22.8654 15.9986C22.6211 15.777 22.3327 15.6662 22.0004 15.6662C21.5032 15.6662 21.1055 15.9148 20.8072 16.4119C20.5089 16.9091 20.3583 17.6534 20.3555 18.6449C20.3555 19.3153 20.4222 19.875 20.5558 20.3239C20.6921 20.7699 20.8839 21.1051 21.131 21.3295C21.3782 21.5511 21.668 21.6619 22.0004 21.6619Z" fill="currentColor" /></svg>`,
|
||||
skip_backward: `<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6667 12.3333L9 7.66667M9 7.66667L13.6667 3M9 7.66667H18.3333C19.571 7.66667 20.758 8.15833 21.6332 9.0335C22.5083 9.90867 23 11.0957 23 12.3333C23 13.571 22.5083 14.758 21.6332 15.6332C20.758 16.5083 19.571 17 18.3333 17H16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.50426 14.2727V23H2.65909V16.0241H2.60795L0.609375 17.277V15.6406L2.76989 14.2727H4.50426ZM10.0004 23.1918C9.2674 23.1889 8.63672 23.0085 8.10831 22.6506C7.58274 22.2926 7.17791 21.7741 6.89382 21.0952C6.61257 20.4162 6.47337 19.5994 6.47621 18.6449C6.47621 17.6932 6.61683 16.8821 6.89808 16.2116C7.18217 15.5412 7.587 15.0312 8.11257 14.6818C8.64098 14.3295 9.27024 14.1534 10.0004 14.1534C10.7305 14.1534 11.3583 14.3295 11.8839 14.6818C12.4123 15.0341 12.8185 15.5455 13.1026 16.2159C13.3867 16.8835 13.5273 17.6932 13.5245 18.6449C13.5245 19.6023 13.3825 20.4205 13.0984 21.0994C12.8171 21.7784 12.4137 22.2969 11.8881 22.6548C11.3626 23.0128 10.7333 23.1918 10.0004 23.1918ZM10.0004 21.6619C10.5004 21.6619 10.8995 21.4105 11.1978 20.9077C11.4961 20.4048 11.6438 19.6506 11.641 18.6449C11.641 17.983 11.5728 17.4318 11.4364 16.9915C11.3029 16.5511 11.1126 16.2202 10.8654 15.9986C10.6211 15.777 10.3327 15.6662 10.0004 15.6662C9.5032 15.6662 9.10547 15.9148 8.80717 16.4119C8.50888 16.9091 8.35831 17.6534 8.35547 18.6449C8.35547 19.3153 8.42223 19.875 8.55575 20.3239C8.69212 20.7699 8.88388 21.1051 9.13104 21.3295C9.3782 21.5511 9.66797 21.6619 10.0004 21.6619Z" fill="currentColor"/></svg>`,
|
||||
file: `<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-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`,
|
||||
episodes: `<svg width="1em" height="1em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4C1.34315 4 0 5.34314 0 7V13.9496C0 15.6065 1.34315 16.9496 3 16.9496H5.86645V14.9496H3C2.44772 14.9496 2 14.5019 2 13.9496V7C2 6.44771 2.44771 6 3 6H16.0327C16.585 6 17.0327 6.44772 17.0327 7V9.86645H19.0327V7C19.0327 5.34315 17.6896 4 16.0327 4H3Z" fill="currentColor"/><rect x="5.89929" y="10.5444" width="17" height="10" rx="2" stroke="currentColor" stroke-width="2"/></svg>`,
|
||||
skip_forward: `<svg width="1em" height="1em" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.3333 12.3333L16 7.66667M16 7.66667L11.3333 3M16 7.66667H6.66667C5.42899 7.66667 4.242 8.15833 3.36684 9.0335C2.49167 9.90867 2 11.0957 2 12.3333C2 13.571 2.49167 14.758 3.36684 15.6332C4.242 16.5083 5.42899 17 6.66667 17H9" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" /><path d="M16.5043 14.2727V23H14.6591V16.0241H14.608L12.6094 17.277V15.6406L14.7699 14.2727H16.5043ZM22.0004 23.1918C21.2674 23.1889 20.6367 23.0085 20.1083 22.6506C19.5827 22.2926 19.1779 21.7741 18.8938 21.0952C18.6126 20.4162 18.4734 19.5994 18.4762 18.6449C18.4762 17.6932 18.6168 16.8821 18.8981 16.2116C19.1822 15.5412 19.587 15.0312 20.1126 14.6818C20.641 14.3295 21.2702 14.1534 22.0004 14.1534C22.7305 14.1534 23.3583 14.3295 23.8839 14.6818C24.4123 15.0341 24.8185 15.5455 25.1026 16.2159C25.3867 16.8835 25.5273 17.6932 25.5245 18.6449C25.5245 19.6023 25.3825 20.4205 25.0984 21.0994C24.8171 21.7784 24.4137 22.2969 23.8881 22.6548C23.3626 23.0128 22.7333 23.1918 22.0004 23.1918ZM22.0004 21.6619C22.5004 21.6619 22.8995 21.4105 23.1978 20.9077C23.4961 20.4048 23.6438 19.6506 23.641 18.6449C23.641 17.983 23.5728 17.4318 23.4364 16.9915C23.3029 16.5511 23.1126 16.2202 22.8654 15.9986C22.6211 15.777 22.3327 15.6662 22.0004 15.6662C21.5032 15.6662 21.1055 15.9148 20.8072 16.4119C20.5089 16.9091 20.3583 17.6534 20.3555 18.6449C20.3555 19.3153 20.4222 19.875 20.5558 20.3239C20.6921 20.7699 20.8839 21.1051 21.131 21.3295C21.3782 21.5511 21.668 21.6619 22.0004 21.6619Z" fill="currentColor" /></svg>`,
|
||||
skip_backward: `<svg width="1em" height="1em" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.6667 12.3333L9 7.66667M9 7.66667L13.6667 3M9 7.66667H18.3333C19.571 7.66667 20.758 8.15833 21.6332 9.0335C22.5083 9.90867 23 11.0957 23 12.3333C23 13.571 22.5083 14.758 21.6332 15.6332C20.758 16.5083 19.571 17 18.3333 17H16" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M4.50426 14.2727V23H2.65909V16.0241H2.60795L0.609375 17.277V15.6406L2.76989 14.2727H4.50426ZM10.0004 23.1918C9.2674 23.1889 8.63672 23.0085 8.10831 22.6506C7.58274 22.2926 7.17791 21.7741 6.89382 21.0952C6.61257 20.4162 6.47337 19.5994 6.47621 18.6449C6.47621 17.6932 6.61683 16.8821 6.89808 16.2116C7.18217 15.5412 7.587 15.0312 8.11257 14.6818C8.64098 14.3295 9.27024 14.1534 10.0004 14.1534C10.7305 14.1534 11.3583 14.3295 11.8839 14.6818C12.4123 15.0341 12.8185 15.5455 13.1026 16.2159C13.3867 16.8835 13.5273 17.6932 13.5245 18.6449C13.5245 19.6023 13.3825 20.4205 13.0984 21.0994C12.8171 21.7784 12.4137 22.2969 11.8881 22.6548C11.3626 23.0128 10.7333 23.1918 10.0004 23.1918ZM10.0004 21.6619C10.5004 21.6619 10.8995 21.4105 11.1978 20.9077C11.4961 20.4048 11.6438 19.6506 11.641 18.6449C11.641 17.983 11.5728 17.4318 11.4364 16.9915C11.3029 16.5511 11.1126 16.2202 10.8654 15.9986C10.6211 15.777 10.3327 15.6662 10.0004 15.6662C9.5032 15.6662 9.10547 15.9148 8.80717 16.4119C8.50888 16.9091 8.35831 17.6534 8.35547 18.6449C8.35547 19.3153 8.42223 19.875 8.55575 20.3239C8.69212 20.7699 8.88388 21.1051 9.13104 21.3295C9.3782 21.5511 9.66797 21.6619 10.0004 21.6619Z" fill="currentColor"/></svg>`,
|
||||
file: `<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-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`,
|
||||
captions: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H512c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM200 208c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48s21.5-48 48-48zm144 48c0-26.5 21.5-48 48-48c14.2 0 27 6.1 35.8 16c8.8 9.9 24 10.7 33.9 1.9s10.7-24 1.9-33.9c-17.5-19.6-43.1-32-71.5-32c-53 0-96 43-96 96s43 96 96 96c28.4 0 54-12.4 71.5-32c8.8-9.9 8-25-1.9-33.9s-25-8-33.9 1.9c-8.8 9.9-21.6 16-35.8 16c-26.5 0-48-21.5-48-48z"/></svg>`,
|
||||
};
|
||||
|
||||
export const Icon = memo((props: IconProps) => {
|
||||
|
||||
@ -12,6 +12,7 @@ import { PauseAction } from "@/video/components/actions/PauseAction";
|
||||
import { ProgressAction } from "@/video/components/actions/ProgressAction";
|
||||
import { QualityDisplayAction } from "@/video/components/actions/QualityDisplayAction";
|
||||
import { SeriesSelectionAction } from "@/video/components/actions/SeriesSelectionAction";
|
||||
import { CaptionsSelectionAction } from "@/video/components/actions/CaptionsSelectionAction";
|
||||
import { ShowTitleAction } from "@/video/components/actions/ShowTitleAction";
|
||||
import { KeyboardShortcutsAction } from "@/video/components/actions/KeyboardShortcutsAction";
|
||||
import { SkipTimeAction } from "@/video/components/actions/SkipTimeAction";
|
||||
@ -135,6 +136,7 @@ export function VideoPlayer(props: Props) {
|
||||
<div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
|
||||
<div />
|
||||
<div className="flex items-center justify-center">
|
||||
<CaptionsSelectionAction />
|
||||
<SeriesSelectionAction />
|
||||
{/* <SourceSelectionControl media={props.media} /> */}
|
||||
</div>
|
||||
@ -147,8 +149,10 @@ export function VideoPlayer(props: Props) {
|
||||
<QualityDisplayAction />
|
||||
<SeriesSelectionAction />
|
||||
{/* <SourceSelectionControl media={props.media} /> */}
|
||||
<AirplayAction />
|
||||
<div className="mx-2 h-6 w-px bg-white opacity-50" />
|
||||
{/* <ChromeCastControl /> */}
|
||||
<AirplayAction />
|
||||
<CaptionsSelectionAction />
|
||||
<FullscreenAction />
|
||||
</>
|
||||
)}
|
||||
|
||||
@ -9,7 +9,6 @@ interface BackdropActionProps {
|
||||
onBackdropChange?: (showing: boolean) => void;
|
||||
}
|
||||
|
||||
// TODO tap on mobile should remove backdrop instead of pausing
|
||||
export function BackdropAction(props: BackdropActionProps) {
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
const controls = useControls(descriptor);
|
||||
@ -33,16 +32,32 @@ export function BackdropAction(props: BackdropActionProps) {
|
||||
setMoved(false);
|
||||
}, [setMoved]);
|
||||
|
||||
const [lastTouchEnd, setLastTouchEnd] = useState(0);
|
||||
|
||||
const handleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
(
|
||||
e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>
|
||||
) => {
|
||||
if (!clickareaRef.current || clickareaRef.current !== e.target) return;
|
||||
|
||||
if (videoInterface.popout !== null) return;
|
||||
|
||||
if (mediaPlaying.isPlaying) controls.pause();
|
||||
else controls.play();
|
||||
if ((e as React.TouchEvent).type === "touchend") {
|
||||
setLastTouchEnd(Date.now());
|
||||
return;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
if (Date.now() - lastTouchEnd < 200) {
|
||||
setMoved(!moved);
|
||||
return;
|
||||
}
|
||||
|
||||
if (mediaPlaying.isPlaying) controls.pause();
|
||||
else controls.play();
|
||||
}, 20);
|
||||
},
|
||||
[controls, mediaPlaying, videoInterface]
|
||||
[controls, mediaPlaying, videoInterface, lastTouchEnd, moved]
|
||||
);
|
||||
const handleDoubleClick = useCallback(
|
||||
(e: React.MouseEvent<HTMLDivElement>) => {
|
||||
@ -56,14 +71,14 @@ export function BackdropAction(props: BackdropActionProps) {
|
||||
|
||||
const lastBackdropValue = useRef<boolean | null>(null);
|
||||
useEffect(() => {
|
||||
const currentValue = moved || mediaPlaying.isPaused;
|
||||
const currentValue =
|
||||
moved || mediaPlaying.isPaused || !!videoInterface.popout;
|
||||
if (currentValue !== lastBackdropValue.current) {
|
||||
lastBackdropValue.current = currentValue;
|
||||
if (!currentValue) controls.closePopout();
|
||||
props.onBackdropChange?.(currentValue);
|
||||
}
|
||||
}, [controls, moved, mediaPlaying, props]);
|
||||
const showUI = moved || mediaPlaying.isPaused;
|
||||
}, [moved, mediaPlaying, props, videoInterface]);
|
||||
const showUI = moved || mediaPlaying.isPaused || !!videoInterface.popout;
|
||||
|
||||
return (
|
||||
<div
|
||||
@ -71,7 +86,8 @@ export function BackdropAction(props: BackdropActionProps) {
|
||||
onMouseMove={handleMouseMove}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
ref={clickareaRef}
|
||||
onClick={handleClick}
|
||||
onMouseUp={handleClick}
|
||||
onTouchEnd={handleClick}
|
||||
onDoubleClick={handleDoubleClick}
|
||||
>
|
||||
<div
|
||||
|
||||
28
src/video/components/actions/CaptionsSelectionAction.tsx
Normal file
28
src/video/components/actions/CaptionsSelectionAction.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
|
||||
import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
|
||||
import { useControls } from "@/video/state/logic/controls";
|
||||
import { PopoutAnchor } from "@/video/components/popouts/PopoutAnchor";
|
||||
|
||||
interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export function CaptionsSelectionAction(props: Props) {
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
const controls = useControls(descriptor);
|
||||
|
||||
return (
|
||||
<div className={props.className}>
|
||||
<div className="relative">
|
||||
<PopoutAnchor for="captions">
|
||||
<VideoPlayerIconButton
|
||||
className={props.className}
|
||||
onClick={() => controls.openPopout("captions")}
|
||||
icon={Icons.CAPTIONS}
|
||||
/>
|
||||
</PopoutAnchor>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,17 +1,9 @@
|
||||
import React, { useCallback, useMemo, useState } from "react";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { useLoading } from "@/hooks/useLoading";
|
||||
import { MWMediaType, MWSeasonWithEpisodeMeta } from "@/backend/metadata/types";
|
||||
import { getMetaFromId } from "@/backend/metadata/getmeta";
|
||||
import { decodeJWId } from "@/backend/metadata/justwatch";
|
||||
import { Loading } from "@/components/layout/Loading";
|
||||
import { IconPatch } from "@/components/buttons/IconPatch";
|
||||
import { Icons } from "@/components/Icon";
|
||||
import { MWMediaType } from "@/backend/metadata/types";
|
||||
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
|
||||
import { useMeta } from "@/video/state/logic/meta";
|
||||
import { VideoPlayerIconButton } from "@/video/components/parts/VideoPlayerIconButton";
|
||||
import { useControls } from "@/video/state/logic/controls";
|
||||
import { VideoPopout } from "@/video/components/parts/VideoPopout";
|
||||
import { PopoutAnchor } from "@/video/components/popouts/PopoutAnchor";
|
||||
import { useInterface } from "@/video/state/logic/interface";
|
||||
|
||||
@ -19,163 +11,6 @@ interface Props {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function PopupSection(props: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={["p-4", props.className || ""].join(" ")}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PopupEpisodeSelect() {
|
||||
const params = useParams<{
|
||||
media: string;
|
||||
}>();
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
const meta = useMeta(descriptor);
|
||||
const controls = useControls(descriptor);
|
||||
|
||||
const [isPickingSeason, setIsPickingSeason] = useState<boolean>(false);
|
||||
const [currentVisibleSeason, setCurrentVisibleSeason] = useState<{
|
||||
seasonId: string;
|
||||
season?: MWSeasonWithEpisodeMeta;
|
||||
} | null>(null);
|
||||
const [reqSeasonMeta, loading, error] = useLoading(
|
||||
(id: string, seasonId: string) => {
|
||||
return getMetaFromId(MWMediaType.SERIES, id, seasonId);
|
||||
}
|
||||
);
|
||||
const requestSeason = useCallback(
|
||||
(sId: string) => {
|
||||
setCurrentVisibleSeason({
|
||||
seasonId: sId,
|
||||
season: undefined,
|
||||
});
|
||||
setIsPickingSeason(false);
|
||||
reqSeasonMeta(decodeJWId(params.media)?.id as string, sId).then((v) => {
|
||||
if (v?.meta.type !== MWMediaType.SERIES) return;
|
||||
setCurrentVisibleSeason({
|
||||
seasonId: sId,
|
||||
season: v?.meta.seasonData,
|
||||
});
|
||||
});
|
||||
},
|
||||
[reqSeasonMeta, params.media]
|
||||
);
|
||||
|
||||
const currentSeasonId =
|
||||
currentVisibleSeason?.seasonId ?? meta?.episode?.seasonId;
|
||||
|
||||
const setCurrent = useCallback(
|
||||
(seasonId: string, episodeId: string) => {
|
||||
controls.setCurrentEpisode(seasonId, episodeId);
|
||||
},
|
||||
[controls]
|
||||
);
|
||||
|
||||
const currentSeasonInfo = useMemo(() => {
|
||||
return meta?.seasons?.find((season) => season.id === currentSeasonId);
|
||||
}, [meta, currentSeasonId]);
|
||||
|
||||
const currentSeasonEpisodes = useMemo(() => {
|
||||
if (currentVisibleSeason?.season) {
|
||||
return currentVisibleSeason?.season?.episodes;
|
||||
}
|
||||
return meta?.seasons?.find?.(
|
||||
(season) => season && season.id === currentSeasonId
|
||||
)?.episodes;
|
||||
}, [meta, currentSeasonId, currentVisibleSeason]);
|
||||
|
||||
const toggleIsPickingSeason = () => {
|
||||
setIsPickingSeason(!isPickingSeason);
|
||||
};
|
||||
|
||||
const setSeason = (id: string) => {
|
||||
requestSeason(id);
|
||||
setCurrentVisibleSeason({ seasonId: id });
|
||||
};
|
||||
|
||||
if (isPickingSeason)
|
||||
return (
|
||||
<>
|
||||
<PopupSection className="flex items-center space-x-3 border-b border-denim-500 font-bold text-white">
|
||||
Pick a season
|
||||
</PopupSection>
|
||||
<PopupSection className="overflow-y-auto">
|
||||
<div className="space-y-1">
|
||||
{currentSeasonInfo
|
||||
? meta?.seasons?.map?.((season) => (
|
||||
<div
|
||||
className="text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600"
|
||||
key={season.id}
|
||||
onClick={() => setSeason(season.id)}
|
||||
>
|
||||
{season.title}
|
||||
</div>
|
||||
))
|
||||
: "No season"}
|
||||
</div>
|
||||
</PopupSection>
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<PopupSection className="flex items-center space-x-3 border-b border-denim-500 font-bold text-white">
|
||||
<button
|
||||
className="-m-1.5 rounded p-1.5 hover:bg-denim-600"
|
||||
onClick={toggleIsPickingSeason}
|
||||
type="button"
|
||||
>
|
||||
<Icon icon={Icons.CHEVRON_LEFT} />
|
||||
</button>
|
||||
<span>{currentSeasonInfo?.title || ""}</span>
|
||||
</PopupSection>
|
||||
<PopupSection className="overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Loading />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<div className="flex flex-col flex-wrap items-center text-slate-400">
|
||||
<IconPatch
|
||||
icon={Icons.EYE_SLASH}
|
||||
className="text-xl text-bink-600"
|
||||
/>
|
||||
<p className="mt-6 w-full text-center">
|
||||
Something went wrong loading the episodes for{" "}
|
||||
{currentSeasonInfo?.title?.toLowerCase()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
{currentSeasonEpisodes && currentSeasonInfo
|
||||
? currentSeasonEpisodes.map((e) => (
|
||||
<div
|
||||
className={[
|
||||
"text-denim-800 -mx-2 flex items-center space-x-1 rounded p-2 text-white hover:bg-denim-600",
|
||||
meta?.episode?.episodeId === e.id &&
|
||||
"outline outline-2 outline-denim-700",
|
||||
].join(" ")}
|
||||
onClick={() => setCurrent(currentSeasonInfo.id, e.id)}
|
||||
key={e.id}
|
||||
>
|
||||
{e.number}. {e.title}
|
||||
</div>
|
||||
))
|
||||
: "No episodes"}
|
||||
</div>
|
||||
)}
|
||||
</PopupSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function SeriesSelectionAction(props: Props) {
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
const meta = useMeta(descriptor);
|
||||
@ -196,12 +31,6 @@ export function SeriesSelectionAction(props: Props) {
|
||||
onClick={() => controls.openPopout("episodes")}
|
||||
/>
|
||||
</PopoutAnchor>
|
||||
{/* <VideoPopout
|
||||
id="episodes"
|
||||
className="grid grid-rows-[auto,minmax(0,1fr)]"
|
||||
>
|
||||
<PopupEpisodeSelect />
|
||||
</VideoPopout> */}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -21,6 +21,7 @@ export function SeriesController(props: SeriesControllerProps) {
|
||||
seasonId: meta?.episode?.seasonId,
|
||||
};
|
||||
if (lastState.current === null) {
|
||||
if (!meta) return;
|
||||
lastState.current = currentState;
|
||||
return;
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { useInitialized } from "@/video/components/hooks/useInitialized";
|
||||
import { ControlMethods, useControls } from "@/video/state/logic/controls";
|
||||
import { useInterface } from "@/video/state/logic/interface";
|
||||
import { useEffect, useRef } from "react";
|
||||
@ -14,13 +13,11 @@ function syncRouteToPopout(
|
||||
else controls.closePopout();
|
||||
}
|
||||
|
||||
// TODO make closing a popout go backwords in history
|
||||
// TODO fix first event breaking (clicking on page somehow resolves it)
|
||||
// TODO when opening with an open modal url, closing popout will close tab
|
||||
export function useSyncPopouts(descriptor: string) {
|
||||
const history = useHistory();
|
||||
const videoInterface = useInterface(descriptor);
|
||||
const controls = useControls(descriptor);
|
||||
const intialized = useInitialized(descriptor);
|
||||
const loc = useLocation();
|
||||
|
||||
const lastKnownValue = useRef<string | null>(null);
|
||||
@ -44,15 +41,20 @@ export function useSyncPopouts(descriptor: string) {
|
||||
state: "popout",
|
||||
});
|
||||
} else {
|
||||
history.push({
|
||||
search: "",
|
||||
state: "popout",
|
||||
});
|
||||
// dont do anything if no modal is even open
|
||||
if (!new URLSearchParams(history.location.search).has("modal")) return;
|
||||
if (history.length > 0) history.goBack();
|
||||
else
|
||||
history.replace({
|
||||
search: "",
|
||||
state: "popout",
|
||||
});
|
||||
}
|
||||
}, [videoInterface, history]);
|
||||
|
||||
// sync router to popout state (but only if its not done by block of code above)
|
||||
useEffect(() => {
|
||||
// if location update a push from the block above
|
||||
if (loc.state === "popout") return;
|
||||
|
||||
// sync popout state
|
||||
@ -63,8 +65,7 @@ export function useSyncPopouts(descriptor: string) {
|
||||
const routerInitialized = useRef(false);
|
||||
useEffect(() => {
|
||||
if (routerInitialized.current) return;
|
||||
if (!intialized) return;
|
||||
syncRouteToPopout(loc, controlsRef.current);
|
||||
routerInitialized.current = true;
|
||||
}, [loc, intialized]);
|
||||
}, [loc]);
|
||||
}
|
||||
|
||||
14
src/video/components/popouts/CaptionSelectionPopout.tsx
Normal file
14
src/video/components/popouts/CaptionSelectionPopout.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
import { PopoutSection } from "./PopoutUtils";
|
||||
|
||||
export function CaptionSelectionPopout() {
|
||||
return (
|
||||
<>
|
||||
<PopoutSection className="bg-ash-100 font-bold text-white">
|
||||
<div>Captions</div>
|
||||
</PopoutSection>
|
||||
<PopoutSection>
|
||||
<div>Hi Jeebies</div>
|
||||
</PopoutSection>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -11,68 +11,7 @@ import { useVideoPlayerDescriptor } from "@/video/state/hooks";
|
||||
import { useMeta } from "@/video/state/logic/meta";
|
||||
import { useControls } from "@/video/state/logic/controls";
|
||||
import { useWatchedContext } from "@/state/watched";
|
||||
import { ProgressRing } from "@/components/layout/ProgressRing";
|
||||
|
||||
function PopupSection(props: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={["p-5", props.className || ""].join(" ")}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface PopoutListEntryTypes {
|
||||
active?: boolean;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
isOnDarkBackground?: boolean;
|
||||
percentageCompleted?: number;
|
||||
}
|
||||
|
||||
function PopoutListEntry(props: PopoutListEntryTypes) {
|
||||
const bg = props.isOnDarkBackground ? "bg-ash-200" : "bg-ash-400";
|
||||
const hover = props.isOnDarkBackground
|
||||
? "hover:bg-ash-200"
|
||||
: "hover:bg-ash-400";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"group -mx-2 flex items-center justify-between space-x-1 rounded p-2 font-semibold transition-[background-color,color] duration-150",
|
||||
hover,
|
||||
props.active
|
||||
? `${bg} text-white outline-denim-700`
|
||||
: "text-denim-700 hover:text-white",
|
||||
].join(" ")}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
{props.active && (
|
||||
<div className="absolute left-0 h-8 w-0.5 bg-bink-500" />
|
||||
)}
|
||||
<span className="truncate">{props.children}</span>
|
||||
<div className="relative h-4 w-4">
|
||||
<Icon
|
||||
className="absolute inset-0 translate-x-2 text-white opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100"
|
||||
icon={Icons.CHEVRON_RIGHT}
|
||||
/>
|
||||
{props.percentageCompleted ? (
|
||||
<ProgressRing
|
||||
className="absolute inset-0 text-bink-600 opacity-100 transition-[opacity] group-hover:opacity-0"
|
||||
backingRingClassname="stroke-ash-500"
|
||||
percentage={
|
||||
props.percentageCompleted > 90 ? 100 : props.percentageCompleted
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
import { PopoutListEntry, PopoutSection } from "./PopoutUtils";
|
||||
|
||||
export function EpisodeSelectionPopout() {
|
||||
const params = useParams<{
|
||||
@ -154,7 +93,7 @@ export function EpisodeSelectionPopout() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<PopupSection className="bg-ash-100 font-bold text-white">
|
||||
<PopoutSection className="bg-ash-100 font-bold text-white">
|
||||
<div className="relative flex items-center">
|
||||
<button
|
||||
className={[
|
||||
@ -183,9 +122,9 @@ export function EpisodeSelectionPopout() {
|
||||
Seasons
|
||||
</span>
|
||||
</div>
|
||||
</PopupSection>
|
||||
</PopoutSection>
|
||||
<div className="relative grid h-full grid-rows-[minmax(1px,1fr)]">
|
||||
<PopupSection
|
||||
<PopoutSection
|
||||
className={[
|
||||
"absolute inset-0 z-30 overflow-y-auto border-ash-400 bg-ash-100 transition-[max-height,padding] duration-200",
|
||||
isPickingSeason
|
||||
@ -205,8 +144,8 @@ export function EpisodeSelectionPopout() {
|
||||
</PopoutListEntry>
|
||||
))
|
||||
: "No season"}
|
||||
</PopupSection>
|
||||
<PopupSection className="relative h-full overflow-y-auto">
|
||||
</PopoutSection>
|
||||
<PopoutSection className="relative h-full overflow-y-auto">
|
||||
{loading ? (
|
||||
<div className="flex h-full w-full items-center justify-center">
|
||||
<Loading />
|
||||
@ -225,13 +164,17 @@ export function EpisodeSelectionPopout() {
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<div>
|
||||
{currentSeasonEpisodes && currentSeasonInfo
|
||||
? currentSeasonEpisodes.map((e) => (
|
||||
<PopoutListEntry
|
||||
key={e.id}
|
||||
active={e.id === meta?.episode?.episodeId}
|
||||
onClick={() => setCurrent(currentSeasonInfo.id, e.id)}
|
||||
onClick={() => {
|
||||
if (e.id === meta?.episode?.episodeId)
|
||||
controls.closePopout();
|
||||
else setCurrent(currentSeasonInfo.id, e.id);
|
||||
}}
|
||||
percentageCompleted={
|
||||
watched.items.find(
|
||||
(item) =>
|
||||
@ -247,7 +190,7 @@ export function EpisodeSelectionPopout() {
|
||||
: "No episodes"}
|
||||
</div>
|
||||
)}
|
||||
</PopupSection>
|
||||
</PopoutSection>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Transition } from "@/components/Transition";
|
||||
import { useSyncPopouts } from "@/video/components/hooks/useSyncPopouts";
|
||||
import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelectionPopout";
|
||||
import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelectionPopout";
|
||||
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
|
||||
import { useControls } from "@/video/state/logic/controls";
|
||||
import { useInterface } from "@/video/state/logic/interface";
|
||||
@ -17,10 +18,11 @@ function ShowPopout(props: { popoutId: string | null }) {
|
||||
}, [props]);
|
||||
|
||||
if (popoutId === "episodes") return <EpisodeSelectionPopout />;
|
||||
if (popoutId === "captions") return <CaptionSelectionPopout />;
|
||||
return null;
|
||||
}
|
||||
|
||||
// TODO bug: first load ref is null
|
||||
// TODO bug: coords are sometimes completely broken
|
||||
export function PopoutProviderAction() {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const descriptor = useVideoPlayerDescriptor();
|
||||
|
||||
63
src/video/components/popouts/PopoutUtils.tsx
Normal file
63
src/video/components/popouts/PopoutUtils.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { Icon, Icons } from "@/components/Icon";
|
||||
import { ProgressRing } from "@/components/layout/ProgressRing";
|
||||
|
||||
interface PopoutListEntryTypes {
|
||||
active?: boolean;
|
||||
children: React.ReactNode;
|
||||
onClick?: () => void;
|
||||
isOnDarkBackground?: boolean;
|
||||
percentageCompleted?: number;
|
||||
}
|
||||
|
||||
export function PopoutSection(props: {
|
||||
children?: React.ReactNode;
|
||||
className?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className={["p-5", props.className || ""].join(" ")}>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function PopoutListEntry(props: PopoutListEntryTypes) {
|
||||
const bg = props.isOnDarkBackground ? "bg-ash-200" : "bg-ash-400";
|
||||
const hover = props.isOnDarkBackground
|
||||
? "hover:bg-ash-200"
|
||||
: "hover:bg-ash-400";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={[
|
||||
"group -mx-2 flex cursor-pointer items-center justify-between space-x-1 rounded p-2 font-semibold transition-[background-color,color] duration-150",
|
||||
hover,
|
||||
props.active
|
||||
? `${bg} text-white outline-denim-700`
|
||||
: "text-denim-700 hover:text-white",
|
||||
].join(" ")}
|
||||
onClick={props.onClick}
|
||||
>
|
||||
{props.active && (
|
||||
<div className="absolute left-0 h-8 w-0.5 bg-bink-500" />
|
||||
)}
|
||||
<span className="truncate">{props.children}</span>
|
||||
<div className="relative h-4 w-4 min-w-[1rem]">
|
||||
<Icon
|
||||
className="absolute inset-0 translate-x-2 text-white opacity-0 transition-[opacity,transform] duration-100 group-hover:translate-x-0 group-hover:opacity-100"
|
||||
icon={Icons.CHEVRON_RIGHT}
|
||||
/>
|
||||
{props.percentageCompleted ? (
|
||||
<ProgressRing
|
||||
className="absolute inset-0 text-bink-600 opacity-100 transition-[opacity] group-hover:opacity-0"
|
||||
backingRingClassname="stroke-ash-500"
|
||||
percentage={
|
||||
props.percentageCompleted > 90 ? 100 : props.percentageCompleted
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user