diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index 50d9502b..249f02d8 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -5,6 +5,7 @@ export enum Icons { EYE_SLASH = "eyeSlash", ARROW_LEFT = "arrowLeft", CHEVRON_DOWN = "chevronDown", + CHEVRON_RIGHT = "chevronRight", CLAPPER_BOARD = "clapperBoard", FILM = "film", DRAGON = "dragon", @@ -21,7 +22,8 @@ const iconList = { clock: ``, eyeSlash: ``, arrowLeft: ``, - chevronDown: ``, + chevronDown: ``, + chevronRight: ``, clapperBoard: ``, film: ``, dragon: ``, diff --git a/src/components/layout/Loading.tsx b/src/components/layout/Loading.tsx index 6de1742e..e12da6e2 100644 --- a/src/components/layout/Loading.tsx +++ b/src/components/layout/Loading.tsx @@ -1,10 +1,22 @@ -export function Loading() { +export interface LoadingProps { + text?: string; + className?: string; +} + +export function Loading(props: LoadingProps) { return ( -
-
-
-
-
+
+
+
+
+
+
+
+
+ {props.text && props.text.length ? ( +

{props.text}

+ ) : null} +
); } diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx index 9d19c4d7..0ffb33cd 100644 --- a/src/components/layout/SectionHeading.tsx +++ b/src/components/layout/SectionHeading.tsx @@ -10,9 +10,9 @@ interface SectionHeadingProps { export function SectionHeading(props: SectionHeadingProps) { return (
-

+

{props.icon ? ( - + ) : null} diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index ea0ea005..08c26e90 100644 --- a/src/components/media/MediaCard.tsx +++ b/src/components/media/MediaCard.tsx @@ -1,30 +1,90 @@ import { GetProviderFromId, MWMedia, MWMediaType } from "scrapers"; import { Link } from "react-router-dom"; +import { Icon, Icons } from "components/Icon"; export interface MediaCardProps { media: MWMedia; watchedPercentage: Number; + linkable?: boolean; } -function MediaCardContent({ media, watchedPercentage }: MediaCardProps) { +export interface MediaMetaProps { + content: string[]; +} + +function MediaMeta(props: MediaMetaProps) { return ( - <> -

{media.title} ({GetProviderFromId(media.providerId)?.displayName})

-

{watchedPercentage}% watched

-
- - ) +

+ {props.content.map((item, index) => ( + + {index !== 0 ? ( + ● + ) : null} + {item} + + ))} +

+ ); +} + +function MediaCardContent({ + media, + linkable, + watchedPercentage, +}: MediaCardProps) { + const provider = GetProviderFromId(media.providerId); + + if (!provider) { + return null; + } + + return ( +
+ {/* progress background */} + {watchedPercentage > 0 ? ( +
+
+
+
+
+ ) : null} + +
+ {/* card content */} +
+

{media.title}

+ +
+ + {/* hoverable chevron */} +
+ +
+
+
+ ); } export function MediaCard(props: MediaCardProps) { const provider = GetProviderFromId(props.media.providerId); - let link = "movie" - if (provider?.type === MWMediaType.SERIES) - link = "series"; + let link = "movie"; + if (provider?.type === MWMediaType.SERIES) link = "series"; - return ( - - - - ) + const content = ; + + if (!props.linkable) return {content}; + return {content}; } diff --git a/src/components/media/WatchedMediaCard.tsx b/src/components/media/WatchedMediaCard.tsx index 220e2ab0..f1bed10d 100644 --- a/src/components/media/WatchedMediaCard.tsx +++ b/src/components/media/WatchedMediaCard.tsx @@ -6,5 +6,5 @@ export interface WatchedMediaCardProps { } export function WatchedMediaCard(props: WatchedMediaCardProps) { - return + return ; } diff --git a/src/index.css b/src/index.css index a433960f..eadd4e89 100644 --- a/src/index.css +++ b/src/index.css @@ -6,3 +6,11 @@ html, body { @apply bg-denim-100 text-denim-700 font-open-sans min-h-screen; } + +#root { + display: flex; + justify-content: flex-start; + align-items: flex-start; + min-height: 100vh; + width: 100%; +} diff --git a/src/views/SearchView.tsx b/src/views/SearchView.tsx index 6ae0b228..660e0ae4 100644 --- a/src/views/SearchView.tsx +++ b/src/views/SearchView.tsx @@ -30,8 +30,12 @@ export function SearchView() { setResults(results); } + const isLoading = search.searchQuery !== "" && results.length === 0; + const hasResult = results.length > 0; + return ( + {/* input section */}
Because watching legally is boring @@ -43,14 +47,20 @@ export function SearchView() { placeholder="What movie do you want to watch?" />
- {results.length > 0 ? ( + + {/* results */} + {hasResult ? ( {results.map((v) => ( ))} ) : null} - {search.searchQuery !== "" && results.length === 0 ? : null} + + {/* Loading icon */} + {isLoading ? ( + + ) : null} ); }