From 39ede1b04209b9fb3e7400a78e4c1bef87ba4fdb Mon Sep 17 00:00:00 2001
From: Max Ward <max.jp.ward@gmail.com>
Date: Sun, 19 Feb 2023 21:20:42 -0800
Subject: [PATCH] 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 }) {
       }`}
     >
       <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" : ""
+        }`}
+      >
+        {t("global.name")}
+      </span>
     </div>
   );
 }
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) {
                 </div>
                 <div className="flex items-center">
                   {isMobile ? (
-                    <div className="grid w-full grid-cols-[56px,1fr,56px] items-center">
-                      <div />
+                    <div className="flex w-full grid-cols-[56px,1fr,56px] items-center justify-between sm:grid">
+                      <div className="hidden sm:block" />
                       <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 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 (
     <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}
@@ -41,9 +41,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
             <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 +62,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
           <ChromecastAction />
         </>
       ) : (
-        <BrandPill />
+        <BrandPill hideTextOnMobile />
       )}
     </div>
   );
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(" ")}
         >
           <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>
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 }) {
       <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">