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:
parent
7ad66b99e7
commit
28e168d5e5
11 changed files with 36 additions and 26 deletions
|
@ -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))
|
||||
|
||||
|
|
|
@ -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={
|
||||
|
|
|
@ -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,
|
||||
})}
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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 />}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue