Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 19:01:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'dev' into feature-react-ga

Browse Source
This commit is contained in:
mrjvs 2023-02-21 21:49:10 +01:00 committed by GitHub
commit 16298431f4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 108 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -40,7 +40,7 @@ To run this project locally for contributing or testing, run the following comma
git clone https://github.com/movie-web/movie-web
cd movie-web
yarn install
yarn start
yarn dev
```
To build production files, simply run `yarn build`.
@ -78,4 +78,4 @@ This project would not be possible without our amazing contributors and the comm
<div style="display:flex;align-items:center;grid-gap:10px">
<img src="https://github.com/lem6ns.png?size=20" width="20"><span><a href="https://github.com/lem6ns">@lem6ns</a> for helpfully implementing extra scrapers.</span>
</div>
</div>

14
src/components/layout/BrandPill.tsx
View File

@ -1,7 +1,10 @@
import { useTranslation } from "react-i18next";
import { Icon, Icons } from "@/components/Icon";
export function BrandPill(props: { clickable?: boolean }) {
export function BrandPill(props: {
clickable?: boolean;
hideTextOnMobile?: boolean;
}) {
const { t } = useTranslation();
return (
@ -13,7 +16,14 @@ export function BrandPill(props: { clickable?: boolean }) {
}`}
>
<Icon className="text-xl" icon={Icons.MOVIE_WEB} />
<span className="font-semibold text-white">{t("global.name")}</span>
<span
className={[
"font-semibold text-white",
props.hideTextOnMobile ? "hidden sm:block" : "",
].join(" ")}
>
{t("global.name")}
</span>
</div>
);
}

72
src/components/layout/Navigation.tsx
View File

@ -12,43 +12,45 @@ export interface NavigationProps {
export function Navigation(props: NavigationProps) {
return (
<div className="fixed left-0 right-0 top-0 z-10 flex min-h-[88px] items-center justify-between py-5 px-7">
<div
className={`${
props.bg ? "opacity-100" : "opacity-0"
} absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
>
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
</div>
<div className="relative flex w-full items-center justify-center sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<BrandPill clickable />
</Link>
<div className="fixed left-0 right-0 top-0 z-20 min-h-[150px] bg-gradient-to-b from-denim-300 via-denim-300 to-transparent sm:from-transparent">
<div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
<div
className={`${
props.bg ? "opacity-100" : "opacity-0"
} absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
>
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
</div>
{props.children}
</div>
<div
className={`${
props.children ? "hidden sm:flex" : "flex"
} relative flex-row gap-4`}
>
<a
href={conf().DISCORD_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
<div className="relative flex w-full items-center justify-center sm:w-fit">
<div className="mr-auto sm:mr-6">
<Link to="/">
<BrandPill clickable />
</Link>
</div>
{props.children}
</div>
<div
className={`${
props.children ? "hidden sm:flex" : "flex"
} relative flex-row gap-4`}
>
<IconPatch icon={Icons.DISCORD} clickable />
</a>
<a
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.GITHUB} clickable />
</a>
<a
href={conf().DISCORD_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.DISCORD} clickable />
</a>
<a
href={conf().GITHUB_LINK}
target="_blank"
rel="noreferrer"
className="text-2xl text-white"
>
<IconPatch icon={Icons.GITHUB} clickable />
</a>
</div>
</div>
</div>
);

4
src/components/layout/SectionHeading.tsx
View File

@ -10,8 +10,8 @@ interface SectionHeadingProps {
export function SectionHeading(props: SectionHeadingProps) {
return (
<div className={`mt-12 ${props.className}`}>
<div className="mb-4 flex items-end">
<div className={props.className}>
<div className="mb-5 flex items-center">
<p className="flex flex-1 items-center font-bold uppercase text-denim-700">
{props.icon ? (
<span className="mr-2 text-xl">

25
src/components/media/MediaCard.tsx
View File

@ -45,14 +45,27 @@ function MediaCardContent({
}`}
>
<div
className="relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100 group-hover:rounded-lg"
className={[
"relative mb-4 aspect-[2/3] w-full overflow-hidden rounded-xl bg-denim-500 bg-cover bg-center transition-[border-radius] duration-100",
closable ? "" : "group-hover:rounded-lg",
].join(" ")}
style={{
backgroundImage: media.poster ? `url(${media.poster})` : undefined,
}}
>
{series ? (
<div className="absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors group-hover:bg-denim-500">
<p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white">
<div
className={[
"absolute right-2 top-2 rounded-md bg-denim-200 py-1 px-2 transition-colors",
closable ? "" : "group-hover:bg-denim-500",
].join(" ")}
>
<p
className={[
"text-center text-xs font-bold text-slate-400 transition-colors",
closable ? "" : "group-hover:text-white",
].join(" ")}
>
{t("seasons.seasonAndEpisode", {
season: series.season,
episode: series.episode,
@ -125,5 +138,9 @@ export function MediaCard(props: MediaCardProps) {
)}`;
if (!props.linkable) return <span>{content}</span>;
return <Link to={link}>{content}</Link>;
return (
<Link to={link} className={props.closable ? "hover:cursor-default" : ""}>
{content}
</Link>
);
}

8
src/hooks/useIsMobile.ts
View File

@ -1,12 +1,14 @@
import { useEffect, useRef, useState } from "react";
export function useIsMobile() {
export function useIsMobile(horizontal?: boolean) {
const [isMobile, setIsMobile] = useState(false);
const isMobileCurrent = useRef<boolean | null>(false);
useEffect(() => {
function onResize() {
const value = window.innerWidth < 1024;
const value = horizontal
? window.innerHeight < 600
: window.innerWidth < 1024;
const isChanged = isMobileCurrent.current !== value;
if (!isChanged) return;
@ -20,7 +22,7 @@ export function useIsMobile() {
return () => {
window.removeEventListener("resize", onResize);
};
}, []);
}, [horizontal]);
return {
isMobile,

1
src/setup/locales/en/translation.json
View File

@ -55,6 +55,7 @@
"noVideos": "Whoops, couldn't find any videos for you",
"loading": "Loading...",
"backToHome": "Back to home",
"backToHomeShort": "Back",
"seasonAndEpisode": "S{{season}} E{{episode}}",
"buttons": {
"episodes": "Episodes",

18
src/video/components/parts/VideoPlayerHeader.tsx
View File

@ -9,6 +9,7 @@ import {
import { AirplayAction } from "@/video/components/actions/AirplayAction";
import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
import { useTranslation } from "react-i18next";
import { useIsMobile } from "@/hooks/useIsMobile";
interface VideoPlayerHeaderProps {
media?: MWMediaMeta;
@ -17,6 +18,7 @@ interface VideoPlayerHeaderProps {
}
export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
const { isMobile } = useIsMobile();
const { bookmarkStore, setItemBookmark } = useBookmarkContext();
const isBookmarked = props.media
? getIfBookmarkedFromPortable(bookmarkStore.bookmarks, props.media)
@ -26,24 +28,26 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
return (
<div className="flex items-center">
<div className="flex flex-1 items-center">
<p className="flex items-center">
<div className="flex min-w-0 flex-1 items-center">
<p className="flex items-center truncate">
{props.onClick ? (
<span
onClick={props.onClick}
className="flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100"
>
<Icon className="mr-2" icon={Icons.ARROW_LEFT} />
<span>{t("videoPlayer.backToHome")}</span>
{isMobile ? (
<span>{t("videoPlayer.backToHomeShort")}</span>
) : (
<span>{t("videoPlayer.backToHome")}</span>
)}
</span>
) : null}
{showDivider ? (
<span className="mx-4 h-6 w-[1.5px] rotate-[30deg] bg-white opacity-50" />
) : null}
{props.media ? (
<span className="flex items-center text-white">
<span>{props.media.title}</span>
</span>
<span className="truncate text-white">{props.media.title}</span>
) : null}
</p>
{props.media && (
@ -64,7 +68,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
<ChromecastAction />
</>
) : (
<BrandPill />
<BrandPill hideTextOnMobile />
)}
</div>
);

4
src/video/components/parts/VideoPlayerIconButton.tsx
View File

@ -31,7 +31,9 @@ export const VideoPlayerIconButton = forwardRef<
].join(" ")}
>
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} />
{props.text ? <span className="ml-2">{props.text}</span> : null}
<p className="hidden sm:block">
{props.text ? <span className="ml-2">{props.text}</span> : null}
</p>
</div>
</button>
</div>

8
src/video/components/popouts/PopoutProviderAction.tsx
View File

@ -5,6 +5,7 @@ import { SourceSelectionPopout } from "@/video/components/popouts/SourceSelectio
import { CaptionSelectionPopout } from "@/video/components/popouts/CaptionSelectionPopout";
import { useVideoPlayerDescriptor } from "@/video/state/hooks";
import { useControls } from "@/video/state/logic/controls";
import { useIsMobile } from "@/hooks/useIsMobile";
import {
useInterface,
VideoInterfaceEvent,
@ -37,6 +38,8 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
const [bottom, setBottom] = useState<number>(0);
const [width, setWidth] = useState<number>(0);
const { isMobile } = useIsMobile(true);
const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => {
const buttonCenter = rect.left + rect.width / 2;
@ -57,7 +60,10 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) {
return (
<div
ref={ref}
className="absolute z-10 grid h-[500px] w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200"
className={[
"absolute z-10 grid w-80 grid-rows-[auto,minmax(0,1fr)] overflow-hidden rounded-lg bg-ash-200",
isMobile ? "h-[230px]" : " h-[500px]",
].join(" ")}
style={{
right: `${right}px`,
bottom: `${bottom}px`,

2
src/video/components/popouts/SourceSelectionPopout.tsx
View File

@ -169,8 +169,6 @@ export function SourceSelectionPopout() {
return entries;
});
console.log(embedsRes);
return embedsRes;
}, [scrapeResult?.embeds]);

2
src/views/media/MediaView.tsx
View File

@ -32,7 +32,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
<Helmet>
<title>{t("videoPlayer.loading")}</title>
</Helmet>
<div className="absolute inset-x-0 top-0 p-6">
<div className="absolute inset-x-0 top-0 py-6 px-8">
<VideoPlayerHeader onClick={props.onGoBack} />
</div>
<div className="flex flex-col items-center">

2
src/views/search/HomeView.tsx
View File

@ -172,7 +172,7 @@ function NewDomainModal() {
export function HomeView() {
return (
<div className="mb-16 mt-32">
<div className="mb-16">
<EmbedMigration />
<NewDomainModal />
<Bookmarks />

10
src/views/search/SearchView.tsx
View File

@ -22,7 +22,7 @@ export function SearchView() {
return (
<>
<div className="relative z-10 mb-24">
<div className="relative z-10 mb-16 sm:mb-24">
<Helmet>
<title>{t("global.name")}</title>
</Helmet>
@ -32,10 +32,10 @@ export function SearchView() {
<div className="absolute left-0 bottom-0 right-0 flex h-0 justify-center">
<div className="absolute bottom-4 h-[100vh] w-[3000px] rounded-[100%] bg-denim-300 md:w-[200vw]" />
</div>
<div className="relative z-20">
<div className="mb-16">
<Title className="mx-auto max-w-xs">{t("search.title")}</Title>
</div>
<div className="relative z-10 mb-16">
<Title className="mx-auto max-w-xs">{t("search.title")}</Title>
</div>
<div className="relative z-30">
<Sticky enabled top={16} onStateChange={stickStateChanged}>
<SearchBarInput
onChange={setSearch}