Merge branch 'dev' into feature-react-ga

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`.

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,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>
   );
 }

src/components/layout/Navigation.tsx

@@ -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="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
+      <div className="fixed left-0 right-0 flex items-center justify-between py-5 px-7">
-        className={`${
+        <div
-          props.bg ? "opacity-100" : "opacity-0"
+          className={`${
-        } absolute inset-0 block bg-denim-100 transition-opacity duration-300`}
+            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>
-        {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"
         >
-          <IconPatch icon={Icons.DISCORD} clickable />
+          <div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-denim-100 to-transparent" />
-        </a>
+        </div>
-        <a
+        <div className="relative flex w-full items-center justify-center sm:w-fit">
-          href={conf().GITHUB_LINK}
+          <div className="mr-auto sm:mr-6">
-          target="_blank"
+            <Link to="/">
-          rel="noreferrer"
+              <BrandPill clickable />
-          className="text-2xl text-white"
+            </Link>
+          </div>
+          {props.children}
+        </div>
+        <div
+          className={`${
+            props.children ? "hidden sm:flex" : "flex"
+          } relative flex-row	gap-4`}
         >
-          <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>
   );

src/components/layout/SectionHeading.tsx

@@ -10,8 +10,8 @@ interface SectionHeadingProps {
 
 export function SectionHeading(props: SectionHeadingProps) {
   return (
-    <div className={`mt-12 ${props.className}`}>
+    <div className={props.className}>
-      <div className="mb-4 flex items-end">
+      <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">

src/components/media/MediaCard.tsx

@@ -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">
+            <div
-              <p className="text-center text-xs font-bold text-slate-400 transition-colors group-hover:text-white">
+              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>
+  );
 }

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<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,

src/setup/locales/en/translation.json

@@ -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",

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)
@@ -26,24 +28,26 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
 
   return (
     <div className="flex items-center">
-      <div className="flex flex-1 items-center">
+      <div className="flex min-w-0 flex-1 items-center">
-        <p className="flex 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 className="truncate text-white">{props.media.title}</span>
-              <span>{props.media.title}</span>
-            </span>
           ) : null}
         </p>
         {props.media && (
@@ -64,7 +68,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
           <ChromecastAction />
         </>
       ) : (
-        <BrandPill />
+        <BrandPill hideTextOnMobile />
       )}
     </div>
   );

src/video/components/parts/VideoPlayerIconButton.tsx

@@ -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>

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<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`,

src/video/components/popouts/SourceSelectionPopout.tsx

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

src/views/media/MediaView.tsx

@@ -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">

src/views/search/HomeView.tsx

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

src/views/search/SearchView.tsx

@@ -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="relative z-10 mb-16">
-              <div className="mb-16">
+              <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
-                <Title className="mx-auto max-w-xs">{t("search.title")}</Title>
+            </div>
-              </div>
+            <div className="relative z-30">
               <Sticky enabled top={16} onStateChange={stickStateChanged}>
                 <SearchBarInput
                   onChange={setSearch}