LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Fix theater mode on audio file pages

Browse source
This commit is contained in:
Raphael Wickihalder 2022-04-20 18:05:01 +02:00
parent d84d11bc24
commit 575b8f5aac
No known key found for this signature in database
GPG key ID: 05179BB92383243D
1 changed files with 11 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
ui/component/fileRenderFloating/view.jsx
View file

@ -148,6 +148,8 @@ export default function FileRenderFloating(props: Props) {
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode) || isCurrentClaimLive;
const isReadyToPlay = isCurrentClaimLive || (isPlayable && streamingUrl);
const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
// ****************************************************************************
// FUNCTIONS
// ****************************************************************************
@ -245,7 +247,7 @@ export default function FileRenderFloating(props: Props) {
if (playingPrimaryUri || playingUrl) {
handleResize();
}
}, [handleResize, playingPrimaryUri, videoTheaterMode, playingUrl]);
}, [handleResize, playingPrimaryUri, theaterMode, playingUrl]);
// Listen to main-window resizing and adjust the floating player position accordingly:
React.useEffect(() => {
@ -368,7 +370,7 @@ export default function FileRenderFloating(props: Props) {
[FLOATING_PLAYER_CLASS]: isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': isComment,
'content__viewer--theater-mode': videoTheaterMode && mainFilePlaying && !isCurrentClaimLive && !isMobile,
'content__viewer--theater-mode': theaterMode && mainFilePlaying && !isCurrentClaimLive && !isMobile,
'content__viewer--disable-click': wasDragging,
'content__viewer--mobile': isMobile && !isLandscapeRotated && !playingUriSource,
})}
@ -389,7 +391,7 @@ export default function FileRenderFloating(props: Props) {
{uri && videoAspectRatio && fileViewerRect ? (
<PlayerGlobalStyles
videoAspectRatio={videoAspectRatio}
videoTheaterMode={videoTheaterMode}
theaterMode={theaterMode}
appDrawerOpen={appDrawerOpen && !isLandscapeRotated && !isTabletLandscape}
initialPlayerHeight={initialPlayerHeight}
isFloating={isFloating}
@ -448,7 +450,7 @@ export default function FileRenderFloating(props: Props) {
type GlobalStylesProps = {
videoAspectRatio: number,
videoTheaterMode: boolean,
theaterMode: boolean,
appDrawerOpen: boolean,
initialPlayerHeight: ElementRef<any>,
isFloating: boolean,
@ -461,7 +463,7 @@ type GlobalStylesProps = {
const PlayerGlobalStyles = (props: GlobalStylesProps) => {
const {
videoAspectRatio,
videoTheaterMode,
theaterMode,
appDrawerOpen,
initialPlayerHeight,
isFloating,
@ -482,7 +484,7 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
// forceDefaults = no styles should be applied to any of these conditions
// !mainFilePlaying = embeds on markdown (comments or posts)
const forceDefaults = !mainFilePlaying || videoTheaterMode || isFloating || isMobile;
const forceDefaults = !mainFilePlaying || theaterMode || isFloating || isMobile;
const videoGreaterThanLandscape = heightForViewer > maxLandscapeHeight;
@ -578,15 +580,15 @@ const PlayerGlobalStyles = (props: GlobalStylesProps) => {
background: videoGreaterThanLandscape && mainFilePlaying && !forceDefaults ? 'transparent !important' : undefined,
};
const maxHeight = {
maxHeight: !videoTheaterMode && !isMobile ? 'var(--desktop-portrait-player-max-height)' : undefined,
maxHeight: !theaterMode && !isMobile ? 'var(--desktop-portrait-player-max-height)' : undefined,
};
return (
<Global
styles={{
[`.${PRIMARY_PLAYER_WRAPPER_CLASS}`]: {
height: !videoTheaterMode && mainFilePlaying ? `${heightResult} !important` : undefined,
opacity: !videoTheaterMode && mainFilePlaying ? '0 !important' : undefined,
height: !theaterMode && mainFilePlaying ? `${heightResult} !important` : undefined,
opacity: !theaterMode && mainFilePlaying ? '0 !important' : undefined,
},
'.file-render--video': {