Fix theater mode related issues (#1377)

* Adjust theater mode and image pages
This commit is contained in:
Rave | 図書館猫 2022-04-21 09:31:58 +02:00 committed by GitHub
parent b832f56929
commit 126ecd38fa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 10 additions and 8 deletions

View file

@ -148,7 +148,7 @@ 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;
const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
// ****************************************************************************
// FUNCTIONS

View file

@ -71,6 +71,7 @@ export default function FileRenderInitiator(props: Props) {
doFetchChannelLiveStatus,
} = props;
const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
const { livestreamPage, layountRendered } = React.useContext(LivestreamContext) || {};
const isMobile = useIsMobile();
@ -163,7 +164,7 @@ export default function FileRenderInitiator(props: Props) {
? 'embed__inline-button'
: classnames('content__cover', {
'content__cover--disabled': disabled,
'content__cover--theater-mode': videoTheaterMode && !isMobile,
'content__cover--theater-mode': theaterMode && !isMobile,
'content__cover--text': isText,
'card__media--nsfw': obscurePreview,
})

View file

@ -65,7 +65,7 @@ function Page(props: Props) {
location: { pathname },
} = useHistory();
const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
const isMediumScreen = useIsMediumScreen();
const isMobile = useIsMobile();
const isLandscapeRotated = useIsMobileLandscape();

View file

@ -86,7 +86,7 @@ export default function FilePage(props: Props) {
const isMobile = useIsMobile();
const isLandscapeRotated = useIsMobileLandscape();
const theaterMode = renderMode === 'video' ? videoTheaterMode : false;
const theaterMode = renderMode === 'video' || renderMode === 'audio' ? videoTheaterMode : false;
const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
const commentSettingDisabled = channelSettings && !channelSettings.comments_enabled;
const cost = costInfo ? costInfo.cost : null;

View file

@ -393,7 +393,7 @@
flex-shrink: 0;
margin-right: var(--spacing-s);
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.2) inset;
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.1) inset;
}
.media__thumb-placeholder-text {

View file

@ -262,8 +262,9 @@
.file-render__img-container {
width: 100%;
// aspect-ratio: 16 / 9;
background-color: #000000;
aspect-ratio: 16 / 9;
background-color: var(--color-placeholder-background);
// background-color: rgba(25,25,25,0.4);
border-radius: var(--border-radius);
}

View file

@ -10,7 +10,7 @@
background-position: center;
background-repeat: no-repeat;
background-size: cover;
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.2) inset;
box-shadow: 0px 0px 0px 1px rgba(var(--color-primary-dynamic), 0.1) inset;
}
// M E D I A