Filepage theater fix (#1366)

* Disable theater mode for non-video files

* Add black background to image container
This commit is contained in:
Rave | 図書館猫 2022-04-20 10:20:15 +02:00 committed by GitHub
parent 20c610e8c9
commit 089fc52a7d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 9 deletions

View file

@ -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),
});

View file

@ -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,
})}

View file

@ -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}>

View file

@ -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 {