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