From bfbb4c6b1191a13a4ca56745ae1813c7ceb87fdb Mon Sep 17 00:00:00 2001 From: Max Ward Date: Sun, 19 Feb 2023 17:59:22 -0800 Subject: [PATCH 01/10] reduce space below search on mobile --- src/components/layout/SectionHeading.tsx | 4 ++-- src/views/search/HomeView.tsx | 2 +- src/views/search/SearchView.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx index a9d01cb7..66723e28 100644 --- a/src/components/layout/SectionHeading.tsx +++ b/src/components/layout/SectionHeading.tsx @@ -10,8 +10,8 @@ interface SectionHeadingProps { export function SectionHeading(props: SectionHeadingProps) { return ( -
-
+
+

{props.icon ? ( diff --git a/src/views/search/HomeView.tsx b/src/views/search/HomeView.tsx index 6d1b6795..ae2b9693 100644 --- a/src/views/search/HomeView.tsx +++ b/src/views/search/HomeView.tsx @@ -171,7 +171,7 @@ function NewDomainModal() { export function HomeView() { return ( -

+
diff --git a/src/views/search/SearchView.tsx b/src/views/search/SearchView.tsx index 4201d954..501c8a2f 100644 --- a/src/views/search/SearchView.tsx +++ b/src/views/search/SearchView.tsx @@ -22,7 +22,7 @@ export function SearchView() { return ( <> -
+
{t("global.name")} From 25ccd941ca892fabb7318145ac8c6d1f64c7bb27 Mon Sep 17 00:00:00 2001 From: Max Ward Date: Sun, 19 Feb 2023 18:18:34 -0800 Subject: [PATCH 02/10] fix some hover states and rounding in edit mode --- src/components/layout/SectionHeading.tsx | 2 +- src/components/media/MediaCard.tsx | 22 ++++++++++++++++++---- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx index 66723e28..e4d37dfc 100644 --- a/src/components/layout/SectionHeading.tsx +++ b/src/components/layout/SectionHeading.tsx @@ -11,7 +11,7 @@ interface SectionHeadingProps { export function SectionHeading(props: SectionHeadingProps) { return (
-
+

{props.icon ? ( diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index f4305eca..42f74181 100644 --- a/src/components/media/MediaCard.tsx +++ b/src/components/media/MediaCard.tsx @@ -45,14 +45,24 @@ function MediaCardContent({ }`} >

{series ? ( -
-

+

+

{t("seasons.seasonAndEpisode", { season: series.season, episode: series.episode, @@ -125,5 +135,9 @@ export function MediaCard(props: MediaCardProps) { )}`; if (!props.linkable) return {content}; - return {content}; + return ( + + {content} + + ); } From 35ecaece5b3a6d51842c6bc9f09d4842f758f85d Mon Sep 17 00:00:00 2001 From: Max Ward Date: Sun, 19 Feb 2023 18:42:52 -0800 Subject: [PATCH 03/10] make title text fade behind header --- src/components/layout/Navigation.tsx | 72 ++++++++++++++-------------- src/views/search/SearchView.tsx | 8 ++-- 2 files changed, 41 insertions(+), 39 deletions(-) diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 71d40f76..299f0908 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -12,43 +12,45 @@ export interface NavigationProps { export function Navigation(props: NavigationProps) { return ( -

-
-
-
-
-
- - - + ); diff --git a/src/views/search/SearchView.tsx b/src/views/search/SearchView.tsx index 501c8a2f..5035574d 100644 --- a/src/views/search/SearchView.tsx +++ b/src/views/search/SearchView.tsx @@ -32,10 +32,10 @@ export function SearchView() {
-
-
- {t("search.title")} -
+
+ {t("search.title")} +
+
Date: Sun, 19 Feb 2023 18:44:27 -0800 Subject: [PATCH 04/10] fix too much darkness fade under search --- src/components/layout/Navigation.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 299f0908..90c8852d 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -13,7 +13,7 @@ export interface NavigationProps { export function Navigation(props: NavigationProps) { return (
-
+
Date: Sun, 19 Feb 2023 21:20:42 -0800 Subject: [PATCH 05/10] improve mobile video player --- src/components/layout/BrandPill.tsx | 13 +++++++++++-- src/setup/locales/en/translation.json | 2 +- src/video/components/VideoPlayer.tsx | 4 ++-- src/video/components/parts/VideoPlayerHeader.tsx | 10 ++++------ .../components/parts/VideoPlayerIconButton.tsx | 4 +++- src/views/media/MediaView.tsx | 2 +- 6 files changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx index cef38ab5..91b2458f 100644 --- a/src/components/layout/BrandPill.tsx +++ b/src/components/layout/BrandPill.tsx @@ -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,13 @@ export function BrandPill(props: { clickable?: boolean }) { }`} > - {t("global.name")} + + {t("global.name")} +
); } diff --git a/src/setup/locales/en/translation.json b/src/setup/locales/en/translation.json index 8842b58f..3f175c68 100644 --- a/src/setup/locales/en/translation.json +++ b/src/setup/locales/en/translation.json @@ -54,7 +54,7 @@ "findingBestVideo": "Finding the best video for you", "noVideos": "Whoops, couldn't find any videos for you", "loading": "Loading...", - "backToHome": "Back to home", + "backToHome": "Back", "seasonAndEpisode": "S{{season}} E{{episode}}", "buttons": { "episodes": "Episodes", diff --git a/src/video/components/VideoPlayer.tsx b/src/video/components/VideoPlayer.tsx index 688f42e2..55daf522 100644 --- a/src/video/components/VideoPlayer.tsx +++ b/src/video/components/VideoPlayer.tsx @@ -138,8 +138,8 @@ export function VideoPlayer(props: Props) {
{isMobile ? ( -
-
+
+
diff --git a/src/video/components/parts/VideoPlayerHeader.tsx b/src/video/components/parts/VideoPlayerHeader.tsx index 81b1e5c8..3fc2ff3d 100644 --- a/src/video/components/parts/VideoPlayerHeader.tsx +++ b/src/video/components/parts/VideoPlayerHeader.tsx @@ -26,8 +26,8 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) { return (
-
-

+

+

{props.onClick ? ( ) : null} {props.media ? ( - - {props.media.title} - + {props.media.title} ) : null}

{props.media && ( @@ -64,7 +62,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) { ) : ( - + )}
); diff --git a/src/video/components/parts/VideoPlayerIconButton.tsx b/src/video/components/parts/VideoPlayerIconButton.tsx index 9193f635..8755d72d 100644 --- a/src/video/components/parts/VideoPlayerIconButton.tsx +++ b/src/video/components/parts/VideoPlayerIconButton.tsx @@ -31,7 +31,9 @@ export const VideoPlayerIconButton = forwardRef< ].join(" ")} > - {props.text ? {props.text} : null} +

+ {props.text ? {props.text} : null} +

diff --git a/src/views/media/MediaView.tsx b/src/views/media/MediaView.tsx index 7ab7ebee..5480684c 100644 --- a/src/views/media/MediaView.tsx +++ b/src/views/media/MediaView.tsx @@ -32,7 +32,7 @@ function MediaViewLoading(props: { onGoBack(): void }) { {t("videoPlayer.loading")} -
+
From a2e5e08b20e12071c090eab64cb9bd064084e5b2 Mon Sep 17 00:00:00 2001 From: Max Ward Date: Sun, 19 Feb 2023 21:49:52 -0800 Subject: [PATCH 06/10] shrink popouts when on horizontal mobile devices --- src/video/components/popouts/PopoutProviderAction.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/video/components/popouts/PopoutProviderAction.tsx b/src/video/components/popouts/PopoutProviderAction.tsx index 8898bf26..23734c2e 100644 --- a/src/video/components/popouts/PopoutProviderAction.tsx +++ b/src/video/components/popouts/PopoutProviderAction.tsx @@ -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(0); const [width, setWidth] = useState(0); + const { isMobile } = useIsMobile(true); + const calculateAndSetCoords = useCallback((rect: DOMRect, w: number) => { const buttonCenter = rect.left + rect.width / 2; @@ -57,7 +60,9 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) { return (
Date: Sun, 19 Feb 2023 22:25:49 -0800 Subject: [PATCH 07/10] add horizontal check to isMobile helper --- src/hooks/useIsMobile.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts index a336afdb..a2df937f 100644 --- a/src/hooks/useIsMobile.ts +++ b/src/hooks/useIsMobile.ts @@ -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(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, From 2bef75dd4a674b454df82d52af4b0415ce130895 Mon Sep 17 00:00:00 2001 From: Max Ward Date: Sun, 19 Feb 2023 22:35:40 -0800 Subject: [PATCH 08/10] update readme to reflect proper local run command --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 78cbb30d..daec9fac 100644 --- a/README.md +++ b/README.md @@ -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`. From 0f9d7faaf2dc53af28ccdb0eb43693b1491ceeeb Mon Sep 17 00:00:00 2001 From: James Hawkins Date: Mon, 20 Feb 2023 16:52:17 +0000 Subject: [PATCH 09/10] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index daec9fac..1167c00a 100644 --- a/README.md +++ b/README.md @@ -78,4 +78,4 @@ This project would not be possible without our amazing contributors and the comm
@lem6ns for helpfully implementing extra scrapers. -
+
From fbd683e0b52a4ec7bfe50b9729ae9c97cfaa27fe Mon Sep 17 00:00:00 2001 From: Max Ward Date: Mon, 20 Feb 2023 18:10:22 -0800 Subject: [PATCH 10/10] implement comment fixes --- src/components/layout/BrandPill.tsx | 7 ++++--- src/components/layout/SectionHeading.tsx | 2 +- src/components/media/MediaCard.tsx | 21 +++++++++++-------- src/setup/locales/en/translation.json | 3 ++- src/video/components/VideoPlayer.tsx | 4 ++-- .../components/parts/VideoPlayerHeader.tsx | 8 ++++++- .../popouts/PopoutProviderAction.tsx | 7 ++++--- .../popouts/SourceSelectionPopout.tsx | 2 -- 8 files changed, 32 insertions(+), 22 deletions(-) diff --git a/src/components/layout/BrandPill.tsx b/src/components/layout/BrandPill.tsx index 91b2458f..45fe75e2 100644 --- a/src/components/layout/BrandPill.tsx +++ b/src/components/layout/BrandPill.tsx @@ -17,9 +17,10 @@ export function BrandPill(props: { > {t("global.name")} diff --git a/src/components/layout/SectionHeading.tsx b/src/components/layout/SectionHeading.tsx index e4d37dfc..fda60bae 100644 --- a/src/components/layout/SectionHeading.tsx +++ b/src/components/layout/SectionHeading.tsx @@ -10,7 +10,7 @@ interface SectionHeadingProps { export function SectionHeading(props: SectionHeadingProps) { return ( -
+

{props.icon ? ( diff --git a/src/components/media/MediaCard.tsx b/src/components/media/MediaCard.tsx index 42f74181..ca7ad96f 100644 --- a/src/components/media/MediaCard.tsx +++ b/src/components/media/MediaCard.tsx @@ -45,23 +45,26 @@ function MediaCardContent({ }`} >

{series ? (

{t("seasons.seasonAndEpisode", { season: series.season, diff --git a/src/setup/locales/en/translation.json b/src/setup/locales/en/translation.json index 3f175c68..14bb2845 100644 --- a/src/setup/locales/en/translation.json +++ b/src/setup/locales/en/translation.json @@ -54,7 +54,8 @@ "findingBestVideo": "Finding the best video for you", "noVideos": "Whoops, couldn't find any videos for you", "loading": "Loading...", - "backToHome": "Back", + "backToHome": "Back to home", + "backToHomeShort": "Back", "seasonAndEpisode": "S{{season}} E{{episode}}", "buttons": { "episodes": "Episodes", diff --git a/src/video/components/VideoPlayer.tsx b/src/video/components/VideoPlayer.tsx index 55daf522..688f42e2 100644 --- a/src/video/components/VideoPlayer.tsx +++ b/src/video/components/VideoPlayer.tsx @@ -138,8 +138,8 @@ export function VideoPlayer(props: Props) {

{isMobile ? ( -
-
+
+
diff --git a/src/video/components/parts/VideoPlayerHeader.tsx b/src/video/components/parts/VideoPlayerHeader.tsx index 3fc2ff3d..741b5640 100644 --- a/src/video/components/parts/VideoPlayerHeader.tsx +++ b/src/video/components/parts/VideoPlayerHeader.tsx @@ -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) @@ -34,7 +36,11 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) { className="flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100" > - {t("videoPlayer.backToHome")} + {isMobile ? ( + {t("videoPlayer.backToHomeShort")} + ) : ( + {t("videoPlayer.backToHome")} + )} ) : null} {showDivider ? ( diff --git a/src/video/components/popouts/PopoutProviderAction.tsx b/src/video/components/popouts/PopoutProviderAction.tsx index 23734c2e..c2b495aa 100644 --- a/src/video/components/popouts/PopoutProviderAction.tsx +++ b/src/video/components/popouts/PopoutProviderAction.tsx @@ -60,9 +60,10 @@ function PopoutContainer(props: { videoInterface: VideoInterfaceEvent }) { return (