mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-10 23:55:05 +01:00
episode buttons with progress
This commit is contained in:
parent
9f5b3eb9f6
commit
3058e4d82b
@ -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)
|
||||
|
@ -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
24
src/components/media/WatchedEpisodeButton.tsx
Normal 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}
|
||||
/>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user