Merge pull request #167 from movie-web/dev

version 3.0.3
2 years ago · 7f28e7be3d
20 changed files with 2532 additions and 2486 deletions
--- a/README.md
+++ b/README.md
@ -40,7 +40,7 @@ To run this project locally for contributing or testing, run the following comma
				@@ -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
				@@ -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> 
--- a/index.html
+++ b/index.html
@ -1,21 +1,6 @@
				@@ -1,21 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
-    <!-- Global site tag (gtag.js) - Google Analytics -->
-    <script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-44YVXRL61C"
-    ></script>
-    <script>
-      window.dataLayer = window.dataLayer || [];
-      function gtag() {
-        dataLayer.push(arguments);
-      }
-      gtag("js", new Date());
-
-      gtag("config", "G-44YVXRL61C");
-    </script>
-
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
@ -42,6 +27,9 @@
				@@ -42,6 +27,9 @@
    <script src="config.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/movie-web/6C6F6C7A@3744edbc5f64a77985b6421ea5040e688663634b/out.js"></script>

+    <!-- prevent darkreader extension from messing with our already dark site -->
+    <meta name="darkreader-lock" />
+
    <title>movie-web</title>
  </head>
  <body>
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
				@@ -1,6 +1,6 @@
 {
  "name": "movie-web",
-  "version": "3.0.2",
+  "version": "3.0.3",
  "private": true,
  "homepage": "https://movie.squeezebox.dev",
  "dependencies": {
@ -20,6 +20,7 @@
				@@ -20,6 +20,7 @@
    "pako": "^2.1.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
+    "react-ga4": "^2.0.0",
    "react-helmet": "^6.1.0",
    "react-i18next": "^12.1.1",
    "react-router-dom": "^5.2.0",
@ -85,4 +86,4 @@
				@@ -85,4 +86,4 @@
    "vite-plugin-checker": "^0.5.6",
    "vite-plugin-package-version": "^1.0.2"
  }
-}
+}
--- a/src/components/layout/BrandPill.tsx
+++ b/src/components/layout/BrandPill.tsx
@ -1,7 +1,10 @@
				@@ -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 }) {
				@@ -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>
  );
 }
--- a/src/components/layout/Navigation.tsx
+++ b/src/components/layout/Navigation.tsx
@ -12,43 +12,45 @@ export interface NavigationProps {
				@@ -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>
-        {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="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`}
        >
-          <IconPatch icon={Icons.DISCORD} clickable />
-        </a>
-        <a
-          href={conf().GITHUB_LINK}
-          target="_blank"
-          rel="noreferrer"
-          className="text-2xl text-white"
+          <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`}
        >
-          <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>
  );
--- a/src/components/layout/SectionHeading.tsx
+++ b/src/components/layout/SectionHeading.tsx
@ -10,8 +10,8 @@ interface SectionHeadingProps {
				@@ -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">
--- a/src/components/media/MediaCard.tsx
+++ b/src/components/media/MediaCard.tsx
@ -45,14 +45,27 @@ function MediaCardContent({
				@@ -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) {
				@@ -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>
+  );
 }
--- a/src/hooks/useIsMobile.ts
+++ b/src/hooks/useIsMobile.ts
@ -1,12 +1,14 @@
				@@ -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() {
				@@ -20,7 +22,7 @@ export function useIsMobile() {
    return () => {
      window.removeEventListener("resize", onResize);
    };
-  }, []);
+  }, [horizontal]);

  return {
    isMobile,
--- a/src/index.tsx
+++ b/src/index.tsx
@ -5,6 +5,7 @@ import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
				@@ -5,6 +5,7 @@ import { ErrorBoundary } from "@/components/layout/ErrorBoundary";
 import { conf } from "@/setup/config";

 import App from "@/setup/App";
+import "@/setup/ga";
 import "@/setup/i18n";
 import "@/setup/index.css";
 import "@/backend";
--- a/src/setup/constants.ts
+++ b/src/setup/constants.ts
@ -1,3 +1,4 @@
				@@ -1,3 +1,4 @@
 export const DISCORD_LINK = "https://discord.gg/Jhqt4Xzpfb";
 export const GITHUB_LINK = "https://github.com/movie-web/movie-web";
-export const APP_VERSION = "3.0.2";
+export const APP_VERSION = "3.0.3";
+export const GA_ID = "G-44YVXRL61C";
--- a/src/setup/ga.ts
+++ b/src/setup/ga.ts
@ -0,0 +1,8 @@
				@@ -0,0 +1,8 @@
+import ReactGA from "react-ga4";
+import { GA_ID } from "@/setup/constants";
+
+ReactGA.initialize([
+  {
+    trackingId: GA_ID,
+  },
+]);
--- a/src/setup/locales/en/translation.json
+++ b/src/setup/locales/en/translation.json
@ -55,6 +55,7 @@
				@@ -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",
--- a/src/video/components/parts/VideoPlayerHeader.tsx
+++ b/src/video/components/parts/VideoPlayerHeader.tsx
@ -9,6 +9,7 @@ import {
				@@ -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 {
				@@ -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) {
				@@ -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) {
				@@ -64,7 +68,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
          <ChromecastAction />
        </>
      ) : (
-        <BrandPill />
+        <BrandPill hideTextOnMobile />
      )}
    </div>
  );
--- a/src/video/components/parts/VideoPlayerIconButton.tsx
+++ b/src/video/components/parts/VideoPlayerIconButton.tsx
@ -31,7 +31,9 @@ export const VideoPlayerIconButton = forwardRef<
				@@ -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>
--- 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
				@@ -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 }) {
				@@ -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 }) {
				@@ -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`,
--- a/src/video/components/popouts/SourceSelectionPopout.tsx
+++ b/src/video/components/popouts/SourceSelectionPopout.tsx
@ -169,8 +169,6 @@ export function SourceSelectionPopout() {
				@@ -169,8 +169,6 @@ export function SourceSelectionPopout() {
      return entries;
    });

-    console.log(embedsRes);
-
    return embedsRes;
  }, [scrapeResult?.embeds]);

--- a/src/views/media/MediaView.tsx
+++ b/src/views/media/MediaView.tsx
@ -32,7 +32,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
				@@ -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">
--- a/src/views/search/HomeView.tsx
+++ b/src/views/search/HomeView.tsx
@ -172,7 +172,7 @@ function NewDomainModal() {
				@@ -172,7 +172,7 @@ function NewDomainModal() {

 export function HomeView() {
  return (
-    <div className="mb-16 mt-32">
+    <div className="mb-16">
      <EmbedMigration />
      <NewDomainModal />
      <Bookmarks />
--- a/src/views/search/SearchView.tsx
+++ b/src/views/search/SearchView.tsx
@ -22,7 +22,7 @@ export function SearchView() {
				@@ -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() {
				@@ -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}
--- a/yarn.lock
+++ b/yarn.lock