mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-11 00:05:09 +01:00
improve mobile video player
This commit is contained in:
parent
32288357c4
commit
39ede1b042
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -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",
|
||||
|
@ -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 />
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
|
@ -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">
|
||||
|
Loading…
Reference in New Issue
Block a user