From fbd683e0b52a4ec7bfe50b9729ae9c97cfaa27fe Mon Sep 17 00:00:00 2001
From: Max Ward <max.jp.ward@gmail.com>
Date: Mon, 20 Feb 2023 18:10:22 -0800
Subject: [PATCH] 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: {
     >
       <Icon className="text-xl" icon={Icons.MOVIE_WEB} />
       <span
-        className={`font-semibold text-white ${
-          props.hideTextOnMobile ? "hidden sm:block" : ""
-        }`}
+        className={[
+          "font-semibold text-white",
+          props.hideTextOnMobile ? "hidden sm:block" : "",
+        ].join(" ")}
       >
         {t("global.name")}
       </span>
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 (
-    <div className={`${props.className}`}>
+    <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 ? (
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({
         }`}
       >
         <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 ${
-            closable ? "" : "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 ${
-                closable ? "" : "group-hover:bg-denim-500"
-              }`}
+              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"
-                }`}
+                className={[
+                  "text-center text-xs font-bold text-slate-400 transition-colors",
+                  closable ? "" : "group-hover:text-white",
+                ].join(" ")}
               >
                 {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) {
                 </div>
                 <div className="flex items-center">
                   {isMobile ? (
-                    <div className="flex w-full grid-cols-[56px,1fr,56px] items-center justify-between sm:grid">
-                      <div className="hidden sm:block" />
+                    <div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
+                      <div />
                       <div className="flex items-center justify-center">
                         <CaptionsSelectionAction />
                         <SeriesSelectionAction />
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"
             >
               <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 ? (
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 (
     <div
       ref={ref}
-      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]"
-      }`}
+      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`,
diff --git a/src/video/components/popouts/SourceSelectionPopout.tsx b/src/video/components/popouts/SourceSelectionPopout.tsx
index 70e78a1b..2eee6339 100644
--- a/src/video/components/popouts/SourceSelectionPopout.tsx
+++ b/src/video/components/popouts/SourceSelectionPopout.tsx
@@ -169,8 +169,6 @@ export function SourceSelectionPopout() {
       return entries;
     });
 
-    console.log(embedsRes);
-
     return embedsRes;
   }, [scrapeResult?.embeds]);