Filepage theater fix (#1366)
* Disable theater mode for non-video files * Add black background to image container
This commit is contained in:
parent
20c610e8c9
commit
089fc52a7d
4 changed files with 16 additions and 9 deletions
|
@ -1,9 +1,11 @@
|
|||
import { connect } from 'react-redux';
|
||||
import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
|
||||
import { selectClientSetting } from 'redux/selectors/settings';
|
||||
import * as SETTINGS from 'constants/settings';
|
||||
import Page from './view';
|
||||
|
||||
const select = (state, props) => ({
|
||||
renderMode: makeSelectFileRenderModeForUri(state.content.primaryUri)(state),
|
||||
videoTheaterMode: selectClientSetting(state, SETTINGS.VIDEO_THEATER_MODE),
|
||||
});
|
||||
|
||||
|
|
|
@ -35,6 +35,7 @@ type Props = {
|
|||
noSideNavigation: boolean,
|
||||
rightSide?: Node,
|
||||
settingsPage?: boolean,
|
||||
renderMode: String,
|
||||
videoTheaterMode: boolean,
|
||||
isPopoutWindow?: boolean,
|
||||
};
|
||||
|
@ -55,6 +56,7 @@ function Page(props: Props) {
|
|||
noSideNavigation = false,
|
||||
rightSide,
|
||||
settingsPage,
|
||||
renderMode,
|
||||
videoTheaterMode,
|
||||
isPopoutWindow,
|
||||
} = props;
|
||||
|
@ -63,6 +65,7 @@ function Page(props: Props) {
|
|||
location: { pathname },
|
||||
} = useHistory();
|
||||
|
||||
const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
|
||||
const isMediumScreen = useIsMediumScreen();
|
||||
const isMobile = useIsMobile();
|
||||
const isLandscapeRotated = useIsMobileLandscape();
|
||||
|
@ -102,7 +105,7 @@ function Page(props: Props) {
|
|||
<div
|
||||
className={classnames('main-wrapper__inner', {
|
||||
'main-wrapper__inner--filepage': isOnFilePage,
|
||||
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMobile,
|
||||
'main-wrapper__inner--theater-mode': isOnFilePage && theaterMode && !isMobile,
|
||||
'main-wrapper__inner--auth': authPage,
|
||||
'main--popout-chat': isPopoutWindow,
|
||||
})}
|
||||
|
@ -134,10 +137,10 @@ function Page(props: Props) {
|
|||
'main--full-width': fullWidthPage,
|
||||
'main--auth-page': authPage,
|
||||
'main--file-page': filePage,
|
||||
'main--video-page': filePage && !videoTheaterMode && !livestream && !isMarkdown,
|
||||
'main--video-page': filePage && !theaterMode && !livestream && !isMarkdown,
|
||||
'main--settings-page': settingsPage,
|
||||
'main--markdown': isMarkdown,
|
||||
'main--theater-mode': isOnFilePage && videoTheaterMode && !livestream && !isMarkdown && !isMobile,
|
||||
'main--theater-mode': isOnFilePage && theaterMode && !livestream && !isMarkdown && !isMobile,
|
||||
'main--livestream': livestream && !chatDisabled,
|
||||
'main--popout-chat': isPopoutWindow,
|
||||
})}
|
||||
|
|
|
@ -82,7 +82,7 @@ export default function FilePage(props: Props) {
|
|||
|
||||
const isMobile = useIsMobile();
|
||||
const isLandscapeRotated = useIsMobileLandscape();
|
||||
|
||||
const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
|
||||
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
|
||||
const commentSettingDisabled = channelSettings && !channelSettings.comments_enabled;
|
||||
const cost = costInfo ? costInfo.cost : null;
|
||||
|
@ -142,7 +142,7 @@ export default function FilePage(props: Props) {
|
|||
return (
|
||||
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
|
||||
{/* playables will be rendered and injected by <FileRenderFloating> */}
|
||||
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
|
||||
<FileRenderInitiator uri={uri} videoTheaterMode={theaterMode} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
@ -188,7 +188,7 @@ export default function FilePage(props: Props) {
|
|||
|
||||
return (
|
||||
<>
|
||||
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
|
||||
<FileRenderInitiator uri={uri} videoTheaterMode={theaterMode} />
|
||||
<FileRenderInline uri={uri} />
|
||||
<FileTitleSection uri={uri} />
|
||||
</>
|
||||
|
@ -203,7 +203,7 @@ export default function FilePage(props: Props) {
|
|||
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
|
||||
<FileTitleSection uri={uri} isNsfwBlocked />
|
||||
</div>
|
||||
{!isMarkdown && !videoTheaterMode && <RightSideContent {...rightSideProps} />}
|
||||
{!isMarkdown && !theaterMode && <RightSideContent {...rightSideProps} />}
|
||||
</Page>
|
||||
);
|
||||
}
|
||||
|
@ -252,13 +252,13 @@ export default function FilePage(props: Props) {
|
|||
</React.Suspense>
|
||||
</section>
|
||||
|
||||
{!isMarkdown && videoTheaterMode && <RightSideContent {...rightSideProps} />}
|
||||
{!isMarkdown && theaterMode && <RightSideContent {...rightSideProps} />}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{!isMarkdown
|
||||
? !videoTheaterMode && <RightSideContent {...rightSideProps} />
|
||||
? !theaterMode && <RightSideContent {...rightSideProps} />
|
||||
: !contentCommentsDisabled && (
|
||||
<div className="file-page__post-comments">
|
||||
<React.Suspense fallback={null}>
|
||||
|
|
|
@ -263,6 +263,8 @@
|
|||
.file-render__img-container {
|
||||
width: 100%;
|
||||
// aspect-ratio: 16 / 9;
|
||||
background-color: #000000;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.file-render--post-container {
|
||||
|
|
Loading…
Reference in a new issue