improve mobile video player

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

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

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 className="flex w-full grid-cols-[56px,1fr,56px] items-center justify-between sm:grid">
-                      <div />
+                      <div className="hidden sm:block" />
                       <div className="flex items-center justify-center">
                         <CaptionsSelectionAction />
                         <SeriesSelectionAction />

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">
+      <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}
@@ -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 className="truncate text-white">{props.media.title}</span>
-              <span>{props.media.title}</span>
-            </span>
           ) : null}
         </p>
         {props.media && (
@@ -64,7 +62,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"} />
+          <p className="hidden sm:block">
             {props.text ? <span className="ml-2">{props.text}</span> : null}
+          </p>
         </div>
       </button>
     </div>

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