add better popout system

Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
This commit is contained in:
Jelle van Snik 2023-02-07 17:49:05 +01:00
parent 76e4bc5851
commit 5d5a727663
12 changed files with 346 additions and 16 deletions

View File

@ -2,11 +2,11 @@ import { ReactNode, useRef } from "react";
import { CSSTransition } from "react-transition-group";
import { CSSTransitionClassNames } from "react-transition-group/CSSTransition";
type TransitionAnimations = "slide-down" | "slide-up" | "fade";
type TransitionAnimations = "slide-down" | "slide-up" | "fade" | "fade-inverse";
interface Props {
show: boolean;
duration?: number;
durationClass?: string;
animation: TransitionAnimations;
className?: string;
children?: ReactNode;
@ -46,21 +46,37 @@ function getClasses(
};
}
if (animation === "fade-inverse") {
return {
enter: `transition-[transform,opacity] duration-${duration} opacity-100`,
enterActive: "!opacity-0",
exit: `transition-[transform,opacity] duration-${duration} opacity-0`,
exitActive: "!opacity-100",
enterDone: "hidden",
};
}
return {};
}
export function Transition(props: Props) {
const ref = useRef<HTMLDivElement>(null);
const duration = props.duration ?? 200;
const duration = props.durationClass
? parseInt(props.durationClass.split("-")[1], 10)
: 200;
const classes = getClasses(props.animation, duration);
return (
<CSSTransition
nodeRef={ref}
in={props.show}
timeout={200}
classNames={getClasses(props.animation, duration)}
timeout={duration}
classNames={classes}
>
<div ref={ref} className={props.className}>
<div
ref={ref}
className={[props.className ?? "", classes.enter ?? ""].join(" ")}
>
{props.children}
</div>
</CSSTransition>

View File

@ -25,6 +25,7 @@ import {
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { ReactNode, useCallback, useState } from "react";
import { PopoutProviderAction } from "@/video/components/popouts/PopoutProviderAction";
type Props = VideoPlayerBaseProps;
@ -153,6 +154,7 @@ export function VideoPlayer(props: Props) {
)}
</div>
</Transition>
{show ? <PopoutProviderAction /> : null}
</BackdropAction>
{props.children}
</VideoPlayerError>

View File

@ -12,6 +12,8 @@ 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";
interface Props {
className?: string;
@ -177,6 +179,7 @@ function PopupEpisodeSelect() {
export function SeriesSelectionAction(props: Props) {
const descriptor = useVideoPlayerDescriptor();
const meta = useMeta(descriptor);
const videoInterface = useInterface(descriptor);
const controls = useControls(descriptor);
if (meta?.meta.type !== MWMediaType.SERIES) return null;
@ -184,17 +187,21 @@ export function SeriesSelectionAction(props: Props) {
return (
<div className={props.className}>
<div className="relative">
<VideoPopout
<PopoutAnchor for="episodes">
<VideoPlayerIconButton
active={videoInterface.popout === "episodes"}
icon={Icons.EPISODES}
text="Episodes"
wide
onClick={() => controls.openPopout("episodes")}
/>
</PopoutAnchor>
{/* <VideoPopout
id="episodes"
className="grid grid-rows-[auto,minmax(0,1fr)]"
>
<PopupEpisodeSelect />
</VideoPopout>
<VideoPlayerIconButton
icon={Icons.EPISODES}
text="Episodes"
onClick={() => controls.openPopout("episodes")}
/>
</VideoPopout> */}
</div>
</div>
);

View File

@ -7,6 +7,8 @@ export interface VideoPlayerIconButtonProps {
text?: string;
className?: string;
iconSize?: string;
active?: boolean;
wide?: boolean;
}
export function VideoPlayerIconButton(props: VideoPlayerIconButtonProps) {
@ -17,7 +19,13 @@ export function VideoPlayerIconButton(props: VideoPlayerIconButtonProps) {
onClick={props.onClick}
className="group pointer-events-auto p-2 text-white transition-transform duration-100 active:scale-110"
>
<div className="flex items-center justify-center rounded-full bg-white bg-opacity-0 p-2 transition-colors duration-100 group-hover:bg-opacity-20">
<div
className={[
"flex items-center justify-center rounded-full bg-denim-600 bg-opacity-0 transition-colors duration-100 group-hover:bg-opacity-50 group-active:bg-denim-500 group-active:bg-opacity-100",
props.active ? "!bg-denim-500 !bg-opacity-100" : "",
props.wide ? "py-2 px-4" : "p-2",
].join(" ")}
>
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} />
{props.text ? <span className="ml-2">{props.text}</span> : null}
</div>

View File

@ -9,8 +9,6 @@ interface Props {
className?: string;
}
// TODO store popout in router history so you can press back to yeet
// TODO add transition
export function VideoPopout(props: Props) {
const descriptor = useVideoPlayerDescriptor();
const videoInterface = useInterface(descriptor);

View File

@ -0,0 +1,169 @@
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 { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useMeta } from "@/video/state/logic/meta";
import { useControls } from "@/video/state/logic/controls";
function PopupSection(props: {
children?: React.ReactNode;
className?: string;
}) {
return (
<div className={["p-4", props.className || ""].join(" ")}>
{props.children}
</div>
);
}
export function EpisodeSelectionPopout() {
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="h-full 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>
</>
);
}

View File

@ -0,0 +1,41 @@
import { getPlayerState } from "@/video/state/cache";
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { updateInterface } from "@/video/state/logic/interface";
import { ReactNode, useEffect, useRef } from "react";
interface Props {
for: string;
children?: ReactNode;
}
export function PopoutAnchor(props: Props) {
const ref = useRef<HTMLDivElement>(null);
const descriptor = useVideoPlayerDescriptor();
useEffect(() => {
if (!ref.current) return;
const state = getPlayerState(descriptor);
if (state.interface.popout !== props.for) return;
let handle = -1;
function render() {
if (ref.current) {
const current = JSON.stringify(state.interface.popoutBounds);
const newer = ref.current.getBoundingClientRect();
if (current !== JSON.stringify(newer)) {
state.interface.popoutBounds = newer;
updateInterface(descriptor, state);
}
}
handle = window.requestAnimationFrame(render);
}
handle = window.requestAnimationFrame(render);
return () => {
window.cancelAnimationFrame(handle);
};
}, [descriptor, props]);
return <div ref={ref}>{props.children}</div>;
}

View File

@ -0,0 +1,70 @@
import { EpisodeSelectionPopout } from "@/video/components/popouts/EpisodeSelectionPopout";
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { useInterface } from "@/video/state/logic/interface";
import { useCallback, useEffect, useMemo, useState } from "react";
import "./Popouts.css";
function ShowPopout(props: { popoutId: string }) {
// only updates popout id when a new one is set, so transitions look good
const [popoutId, setPopoutId] = useState<string | null>(props.popoutId);
useEffect(() => {
if (!props.popoutId) return;
setPopoutId(props.popoutId);
}, [props]);
if (popoutId === "episodes") return <EpisodeSelectionPopout />;
return null;
}
// TODO use new design for popouts
// TODO improve anti offscreen math
// TODO in and out transition
// TODO attach router history to popout state, so you can use back button to remove popout
export function PopoutProviderAction() {
const descriptor = useVideoPlayerDescriptor();
const videoInterface = useInterface(descriptor);
const controls = useControls(descriptor);
const handleClick = useCallback(() => {
controls.closePopout();
}, [controls]);
const distanceFromRight = useMemo(() => {
return videoInterface.popoutBounds
? `${Math.max(
window.innerWidth -
videoInterface.popoutBounds.right -
videoInterface.popoutBounds.width / 2,
30
)}px`
: "30px";
}, [videoInterface]);
const distanceFromBottom = useMemo(() => {
return videoInterface.popoutBounds
? `${Math.max(
videoInterface.popoutBounds.bottom -
videoInterface.popoutBounds.top +
videoInterface.popoutBounds.height
)}px`
: "30px";
}, [videoInterface]);
if (!videoInterface.popout) return null;
return (
<div className="popout-wrapper pointer-events-auto absolute inset-0">
<div onClick={handleClick} className="absolute inset-0" />
<div
className="grid-template-rows-[auto,minmax(0px,1fr)] absolute z-10 grid h-[500px] w-72 rounded-lg bg-denim-300"
style={{
right: distanceFromRight,
bottom: distanceFromBottom,
}}
>
<ShowPopout popoutId={videoInterface.popout ?? ""} />
</div>
</div>
);
}

View File

@ -0,0 +1,15 @@
.popout-wrapper ::-webkit-scrollbar-track {
background-color: transparent;
}
.popout-wrapper ::-webkit-scrollbar-thumb {
background-color: theme("colors.denim-500");
border: 5px solid transparent;
border-left: 0;
background-clip: content-box;
}
.popout-wrapper ::-webkit-scrollbar {
/* For some reason the styles don't get applied without the width */
width: 13px;
}

View File

@ -59,6 +59,7 @@ export function useControls(
},
closePopout() {
state.interface.popout = null;
state.interface.popoutBounds = null;
updateInterface(descriptor, state);
},
setFocused(focused) {

View File

@ -8,6 +8,7 @@ export type VideoInterfaceEvent = {
leftControlHovering: boolean;
isFocused: boolean;
isFullscreen: boolean;
popoutBounds: null | DOMRect;
};
function getInterfaceFromState(state: VideoPlayerState): VideoInterfaceEvent {
@ -16,6 +17,7 @@ function getInterfaceFromState(state: VideoPlayerState): VideoInterfaceEvent {
leftControlHovering: state.interface.leftControlHovering,
isFocused: state.interface.isFocused,
isFullscreen: state.interface.isFullscreen,
popoutBounds: state.interface.popoutBounds,
};
}

View File

@ -23,6 +23,7 @@ export type VideoPlayerState = {
popout: string | null; // id of current popout (eg source select, episode select)
isFocused: boolean; // is the video player the users focus? (shortcuts only works when its focused)
leftControlHovering: boolean; // is the cursor hovered over the left side of player controls
popoutBounds: null | DOMRect; // bounding box of current popout
};
// state related to the playing state of the media