mirror of
https://github.com/movie-web/movie-web.git
synced 2024-06-13 10:48:43 +02:00
24aeb68f55
Co-authored-by: Jip Frijlink <JipFr@users.noreply.github.com>
81 lines
2.6 KiB
TypeScript
81 lines
2.6 KiB
TypeScript
import { MWMediaMeta } from "@/backend/metadata/types";
|
|
import { IconPatch } from "@/components/buttons/IconPatch";
|
|
import { Icon, Icons } from "@/components/Icon";
|
|
import { BrandPill } from "@/components/layout/BrandPill";
|
|
import {
|
|
getIfBookmarkedFromPortable,
|
|
useBookmarkContext,
|
|
} from "@/state/bookmark";
|
|
import { AirplayAction } from "@/video/components/actions/AirplayAction";
|
|
import { ChromecastAction } from "@/video/components/actions/ChromecastAction";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useIsMobile } from "@/hooks/useIsMobile";
|
|
import { useBannerSize } from "@/hooks/useBanner";
|
|
|
|
interface VideoPlayerHeaderProps {
|
|
media?: MWMediaMeta;
|
|
onClick?: () => void;
|
|
showControls?: boolean;
|
|
}
|
|
|
|
export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
|
|
const { isMobile } = useIsMobile();
|
|
const { bookmarkStore, setItemBookmark } = useBookmarkContext();
|
|
const isBookmarked = props.media
|
|
? getIfBookmarkedFromPortable(bookmarkStore.bookmarks, props.media)
|
|
: false;
|
|
const showDivider = props.media && props.onClick;
|
|
const { t } = useTranslation();
|
|
const bannerHeight = useBannerSize();
|
|
|
|
return (
|
|
<div
|
|
className="flex items-center"
|
|
style={{ paddingTop: `${bannerHeight}px` }}
|
|
>
|
|
<div className="flex min-w-0 flex-1 items-center">
|
|
<p className="flex items-center truncate">
|
|
{props.onClick ? (
|
|
<span
|
|
onClick={props.onClick}
|
|
className="flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100"
|
|
>
|
|
<Icon className="mr-2" icon={Icons.ARROW_LEFT} />
|
|
{isMobile ? (
|
|
<span>{t("videoPlayer.backToHomeShort")}</span>
|
|
) : (
|
|
<span>{t("videoPlayer.backToHome")}</span>
|
|
)}
|
|
</span>
|
|
) : null}
|
|
{showDivider ? (
|
|
<span className="mx-4 h-6 w-[1.5px] rotate-[30deg] bg-white opacity-50" />
|
|
) : null}
|
|
{props.media ? (
|
|
<span className="truncate text-white">{props.media.title}</span>
|
|
) : null}
|
|
</p>
|
|
{props.media && (
|
|
<IconPatch
|
|
clickable
|
|
transparent
|
|
icon={isBookmarked ? Icons.BOOKMARK : Icons.BOOKMARK_OUTLINE}
|
|
className="ml-2 text-white"
|
|
onClick={() =>
|
|
props.media && setItemBookmark(props.media, !isBookmarked)
|
|
}
|
|
/>
|
|
)}
|
|
</div>
|
|
{props.showControls ? (
|
|
<>
|
|
<AirplayAction />
|
|
<ChromecastAction />
|
|
</>
|
|
) : (
|
|
<BrandPill hideTextOnMobile />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|