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

View File

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

View File

@ -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 />

View File

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

View File

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

View File

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