mirrors/movie-web
1
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-29 18:06:05 +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 { Episode } from "components/media/EpisodeButton";
import { WatchedEpisode } from "components/media/WatchedEpisodeButton";
import { useLoading } from "hooks/useLoading";
import { serializePortableMedia } from "hooks/usePortableMedia";
import {
@ -70,9 +71,13 @@ export function Seasons(props: SeasonsProps) {
}
/>
{seasons.seasons[seasonSelected]?.episodes.map((v) => (
<Episode
<WatchedEpisode
key={v.episodeNumber}
episodeNumber={v.episodeNumber}
media={{
...props.media,
episode: v.episodeNumber,
season: seasonSelected,
}}
active={v.episodeNumber === episodeSelected}
onClick={() =>
navigateToSeasonAndEpisode(seasonSelected, v.episodeNumber)

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

@ -9,8 +9,8 @@ export function Episode(props: EpisodeProps) {
return (
<div
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 ${
props.active ? "border-bink-500 bg-bink-200" : ""
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 ? "shadow-bink-500 shadow-[inset_0_0_0_2px]" : ""
}`}
>
<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}
/>
);
}