improve mobile video player

This commit is contained in:
Max Ward 2023-02-19 21:20:42 -08:00
parent 32288357c4
commit 39ede1b042
6 changed files with 22 additions and 13 deletions

View File

@ -1,7 +1,10 @@
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { Icon, Icons } from "@/components/Icon"; import { Icon, Icons } from "@/components/Icon";
export function BrandPill(props: { clickable?: boolean }) { export function BrandPill(props: {
clickable?: boolean;
hideTextOnMobile?: boolean;
}) {
const { t } = useTranslation(); const { t } = useTranslation();
return ( return (
@ -13,7 +16,13 @@ export function BrandPill(props: { clickable?: boolean }) {
}`} }`}
> >
<Icon className="text-xl" icon={Icons.MOVIE_WEB} /> <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> </div>
); );
} }

View File

@ -54,7 +54,7 @@
"findingBestVideo": "Finding the best video for you", "findingBestVideo": "Finding the best video for you",
"noVideos": "Whoops, couldn't find any videos for you", "noVideos": "Whoops, couldn't find any videos for you",
"loading": "Loading...", "loading": "Loading...",
"backToHome": "Back to home", "backToHome": "Back",
"seasonAndEpisode": "S{{season}} E{{episode}}", "seasonAndEpisode": "S{{season}} E{{episode}}",
"buttons": { "buttons": {
"episodes": "Episodes", "episodes": "Episodes",

View File

@ -138,8 +138,8 @@ export function VideoPlayer(props: Props) {
</div> </div>
<div className="flex items-center"> <div className="flex items-center">
{isMobile ? ( {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"> <div className="flex items-center justify-center">
<CaptionsSelectionAction /> <CaptionsSelectionAction />
<SeriesSelectionAction /> <SeriesSelectionAction />

View File

@ -26,8 +26,8 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
return ( return (
<div className="flex items-center"> <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 ? ( {props.onClick ? (
<span <span
onClick={props.onClick} 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" /> <span className="mx-4 h-6 w-[1.5px] rotate-[30deg] bg-white opacity-50" />
) : null} ) : null}
{props.media ? ( {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} ) : null}
</p> </p>
{props.media && ( {props.media && (
@ -64,7 +62,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
<ChromecastAction /> <ChromecastAction />
</> </>
) : ( ) : (
<BrandPill /> <BrandPill hideTextOnMobile />
)} )}
</div> </div>
); );

View File

@ -31,7 +31,9 @@ export const VideoPlayerIconButton = forwardRef<
].join(" ")} ].join(" ")}
> >
<Icon icon={props.icon} className={props.iconSize ?? "text-2xl"} /> <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> </div>
</button> </button>
</div> </div>

View File

@ -32,7 +32,7 @@ function MediaViewLoading(props: { onGoBack(): void }) {
<Helmet> <Helmet>
<title>{t("videoPlayer.loading")}</title> <title>{t("videoPlayer.loading")}</title>
</Helmet> </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} /> <VideoPlayerHeader onClick={props.onGoBack} />
</div> </div>
<div className="flex flex-col items-center"> <div className="flex flex-col items-center">