Minor layout fixes depending on window shape (#7709)

Disable theatre mode styles for medium screen (or lower)
Fix the width of the cover in theater mode
Fix conflicting styles when width is 1150px
Remove duplicate from CHANGELOG

Co-authored-by: Jean-Michel Morani <probono+lbry@morani.org>
This commit is contained in:
jm-morani 2022-10-25 10:03:20 -04:00 committed by GitHub
parent 7ad66b99e7
commit 28e168d5e5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 36 additions and 26 deletions

View file

@ -9,7 +9,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Show downloads newest first ([#7684](https://github.com/lbryio/lbry-desktop/pull/7684))
- Only allow images in image uploader ([#7672](https://github.com/lbryio/lbry-desktop/pull/7672))
- Fixed bug with csv exports ([#7697](https://github.com/lbryio/lbry-desktop/pull/7697))
- Fixed small screen viewer position ([#7677](https://github.com/lbryio/lbry-desktop/pull/7677))
- Fixed various upload bugs including transcoding ([#7688](https://github.com/lbryio/lbry-desktop/pull/7688))
- Fallback for files with no extension ([#7704](https://github.com/lbryio/lbry-desktop/pull/7704))

View file

@ -12,7 +12,7 @@ import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable';
import { onFullscreenChange } from 'util/full-screen';
import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url';
import { useIsMobile } from 'effects/use-screensize';
import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
import debounce from 'util/debounce';
import { useHistory } from 'react-router';
import { isURIEqual } from 'util/lbryURI';
@ -132,6 +132,7 @@ export default function FileRenderFloating(props: Props) {
const playingUriSource = playingUri && playingUri.source;
const isComment = playingUriSource === 'comment';
const isMobile = useIsMobile();
const isMediumScreen = useIsMediumScreen();
const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri);
const [fileViewerRect, setFileViewerRect] = useState();
@ -343,7 +344,8 @@ export default function FileRenderFloating(props: Props) {
'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': isComment,
'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri,
'content__viewer--theater-mode':
!isFloating && videoTheaterMode && !isMediumScreen && playingUri?.uri === primaryUri,
'content__viewer--disable-click': wasDragging,
})}
style={

View file

@ -9,6 +9,7 @@ import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes';
import * as KEYCODES from 'constants/keycodes';
import Button from 'component/button';
import { useIsMediumScreen } from 'effects/use-screensize';
import isUserTyping from 'util/detect-typing';
import { getThumbnailCdnUrl } from 'util/thumbnail';
import Nag from 'component/common/nag';
@ -63,6 +64,7 @@ export default function FileRenderInitiator(props: Props) {
const fileStatus = fileInfo && fileInfo.status;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
const isText = RENDER_MODES.TEXT_MODES.includes(renderMode);
const isMediumScreen = useIsMediumScreen();
const [thumbnail, setThumbnail] = React.useState(FileRenderPlaceholder);
const containerRef = React.useRef<any>();
@ -151,7 +153,7 @@ export default function FileRenderInitiator(props: Props) {
style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
className={classnames('content__cover', {
'content__cover--disabled': disabled,
'content__cover--theater-mode': videoTheaterMode,
'content__cover--theater-mode': videoTheaterMode && !isMediumScreen,
'content__cover--text': isText,
'card__media--nsfw': obscurePreview,
})}

View file

@ -92,7 +92,7 @@ function Page(props: Props) {
<div
className={classnames('main-wrapper__inner', {
'main-wrapper__inner--filepage': isOnFilePage,
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode,
'main-wrapper__inner--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen,
})}
>
{!authPage &&
@ -124,7 +124,7 @@ function Page(props: Props) {
'main--file-page': filePage,
'main--settings-page': settingsPage,
'main--markdown': isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !isMarkdown,
'main--theater-mode': isOnFilePage && videoTheaterMode && !isMediumScreen && !isMarkdown,
})}
>
{children}

View file

@ -1,6 +1,7 @@
// @flow
import * as React from 'react';
import classnames from 'classnames';
import { useIsMediumScreen } from 'effects/use-screensize';
import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes';
import FileTitleSection from 'component/fileTitleSection';
@ -59,6 +60,7 @@ function FilePage(props: Props) {
} = props;
const cost = costInfo ? costInfo.cost : null;
const hasFileInfo = fileInfo !== undefined;
const isMediumScreen = useIsMediumScreen();
const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
const videoPlayedEnoughToResetPosition = React.useMemo(() => {
const durationInSecs =
@ -169,8 +171,10 @@ function FilePage(props: Props) {
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
<FileTitleSection uri={uri} isNsfwBlocked />
</div>
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
<CollectionContent id={collectionId} uri={uri} />
)}
{!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
</Page>
);
}
@ -187,13 +191,17 @@ function FilePage(props: Props) {
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
</div>
{!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
{!collection && !isMarkdown && videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && videoTheaterMode && !isMediumScreen && (
<CollectionContent id={collectionId} uri={uri} />
)}
</div>
)}
</div>
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && (
<CollectionContent id={collectionId} uri={uri} />
)}
{!collection && !isMarkdown && !videoTheaterMode && !isMediumScreen && <RecommendedContent uri={uri} />}
{isMarkdown && (
<div className="file-page__post-comments">
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />}

View file

@ -167,7 +167,7 @@ a.button--alt {
.vjs-button--theater-mode.vjs-button {
display: none;
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
display: block;
order: 1;
background-repeat: no-repeat;

View file

@ -621,7 +621,7 @@
@media (max-width: $breakpoint-xsmall) {
-webkit-line-clamp: 2 !important;
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
-webkit-line-clamp: 1 !important;
}
}

View file

@ -501,7 +501,7 @@ $thumbnailWidthSmall: 1rem;
min-width: 100%;
max-width: 100%;
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
min-width: 40%;
max-width: 40%;
}
@ -543,7 +543,7 @@ $thumbnailWidthSmall: 1rem;
}
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
margin: 0 var(--spacing-xs);
}
@ -558,7 +558,7 @@ $thumbnailWidthSmall: 1rem;
padding-left: var(--spacing-m);
border-left: 4px solid var(--color-border);
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
margin-top: 0;
margin-left: var(--spacing-s);
}

View file

@ -73,7 +73,7 @@ body {
}
.sidebar--pusher--open {
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
transform: scaleX(0.9) translateX(calc(5.4 * var(--spacing-l))) scaleY(0.9);
}
}
@ -155,7 +155,7 @@ body {
}
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
flex-direction: row;
}
@media (max-width: $breakpoint-medium) {
@ -461,7 +461,6 @@ body {
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 100vw;
max-width: none;
> :first-child {
@ -804,7 +803,7 @@ body {
}
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
> :first-child {
width: calc(30% - var(--spacing-l));
max-width: 25rem;

View file

@ -70,7 +70,7 @@
color: var(--color-brand-contrast) !important;
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
overflow-y: hidden;
justify-content: space-between;
@ -235,7 +235,7 @@
@extend .navigation-link--highlighted;
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
text-align: left;
margin-bottom: 0;

View file

@ -358,7 +358,7 @@
max-width: unset;
}
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
width: 40%;
.button,
@ -375,7 +375,7 @@
}
.settings__row--value--multirow {
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
width: 80%;
margin-top: var(--spacing-l);
@ -389,7 +389,7 @@
}
.settings__row--value--vertical-separator {
@media (min-width: $breakpoint-medium) {
@media not all and (max-width: $breakpoint-medium) {
border-left: 1px solid var(--color-border);
}
}