@ -9,6 +9,7 @@ import {
import { AirplayAction } from "@/video/components/actions/AirplayAction" ; import { AirplayAction } from "@/video/components/actions/AirplayAction" ;
import { ChromecastAction } from "@/video/components/actions/ChromecastAction" ; import { ChromecastAction } from "@/video/components/actions/ChromecastAction" ;
import { useTranslation } from "react-i18next" ; import { useTranslation } from "react-i18next" ;
import { useIsMobile } from "@/hooks/useIsMobile" ;
interface VideoPlayerHeaderProps { interface VideoPlayerHeaderProps {
media? : MWMediaMeta ; media? : MWMediaMeta ;
@ -17,6 +18,7 @@ interface VideoPlayerHeaderProps {
} }
export function VideoPlayerHeader ( props : VideoPlayerHeaderProps ) { export function VideoPlayerHeader ( props : VideoPlayerHeaderProps ) {
const { isMobile } = useIsMobile ( ) ;
const { bookmarkStore , setItemBookmark } = useBookmarkContext ( ) ; const { bookmarkStore , setItemBookmark } = useBookmarkContext ( ) ;
const isBookmarked = props . media const isBookmarked = props . media
? getIfBookmarkedFromPortable ( bookmarkStore . bookmarks , props . media ) ? getIfBookmarkedFromPortable ( bookmarkStore . bookmarks , props . media )
@ -26,24 +28,26 @@ 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 }
className = "flex cursor-pointer items-center py-1 text-white opacity-50 transition-opacity hover:opacity-100" 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 } / > < Icon className = "mr-2" icon = { Icons . ARROW_LEFT } / >
< span > { t ( "videoPlayer.backToHome" ) } < / span > { isMobile ? (
< span > { t ( "videoPlayer.backToHomeShort" ) } < / span >
) : (
< span > { t ( "videoPlayer.backToHome" ) } < / span >
) }
< / span > < / span >
) : null } ) : null }
{ showDivider ? ( { showDivider ? (
< 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 +68,7 @@ export function VideoPlayerHeader(props: VideoPlayerHeaderProps) {
< ChromecastAction / > < ChromecastAction / >
< / > < / >
) : ( ) : (
< BrandPill / > < BrandPill hideTextOnMobile / >
) } ) }
< / div > < / div >
) ; ) ;
James Hawkins
2 years ago
committed by
GitHub