mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2025-01-01 15:55:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

episode buttons with progress

Browse source
This commit is contained in:
mrjvs 2022-03-13 15:27:08 +01:00
parent 9f5b3eb9f6
commit 3058e4d82b
3 changed files with 33 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/layout/Seasons.tsx
View file

@ -1,5 +1,6 @@
import { Dropdown } from "components/Dropdown"; import { Dropdown } from "components/Dropdown";
import { Episode } from "components/media/EpisodeButton"; import { Episode } from "components/media/EpisodeButton";
import { WatchedEpisode } from "components/media/WatchedEpisodeButton";
import { useLoading } from "hooks/useLoading"; import { useLoading } from "hooks/useLoading";
import { serializePortableMedia } from "hooks/usePortableMedia"; import { serializePortableMedia } from "hooks/usePortableMedia";
import { import {
@ -70,9 +71,13 @@ export function Seasons(props: SeasonsProps) {
} }
/> />
{seasons.seasons[seasonSelected]?.episodes.map((v) => ( {seasons.seasons[seasonSelected]?.episodes.map((v) => (
<Episode <WatchedEpisode
key={v.episodeNumber} key={v.episodeNumber}
episodeNumber={v.episodeNumber} media={{
...props.media,
episode: v.episodeNumber,
season: seasonSelected,
}}
active={v.episodeNumber === episodeSelected} active={v.episodeNumber === episodeSelected}
onClick={() => onClick={() =>
navigateToSeasonAndEpisode(seasonSelected, v.episodeNumber) navigateToSeasonAndEpisode(seasonSelected, v.episodeNumber)

4
src/components/media/EpisodeButton.tsx
View file

@ -9,8 +9,8 @@ export function Episode(props: EpisodeProps) {
return ( return (
<div <div
onClick={props.onClick} onClick={props.onClick}
className={`bg-denim-500 hover:bg-denim-400 transition-[background-color, transform] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded border-2 border-transparent font-bold text-white active:scale-110 ${ className={`bg-denim-500 hover:bg-denim-400 transition-[background-color, transform, box-shadow] relative mr-3 mb-3 inline-flex h-10 w-10 cursor-pointer select-none items-center justify-center overflow-hidden rounded font-bold text-white active:scale-110 ${
props.active ? "border-bink-500 bg-bink-200" : "" props.active ? "shadow-bink-500 shadow-[inset_0_0_0_2px]" : ""
}`} }`}
> >
<div <div

24
src/components/media/WatchedEpisodeButton.tsx Normal file
View file

@ -0,0 +1,24 @@
import { MWMediaMeta } from "providers";
import { useWatchedContext, getWatchedFromPortable } from "state/watched";
import { Episode } from "./EpisodeButton";
export interface WatchedEpisodeProps {
media: MWMediaMeta;
onClick?: () => void;
active?: boolean;
}
export function WatchedEpisode(props: WatchedEpisodeProps) {
const { watched } = useWatchedContext();
const foundWatched = getWatchedFromPortable(watched.items, props.media);
const watchedPercentage = (foundWatched && foundWatched.percentage) || 0;
return (
<Episode
progress={watchedPercentage}
episodeNumber={props.media.episode ?? 1}
active={props.active}
onClick={props.onClick}
/>
);
}