diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 0a1716758..b439c8490 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -10,7 +10,7 @@ import ReactModal from 'react-modal'; import { openContextMenu } from 'util/context-menu'; import useKonamiListener from 'util/enhanced-layout'; import Yrbl from 'component/yrbl'; -import FileViewer from 'component/fileViewer'; +import FloatingViewer from 'component/floatingViewer'; import { withRouter } from 'react-router'; import usePrevious from 'effects/use-previous'; import Nag from 'component/common/nag'; @@ -203,7 +203,7 @@ function App(props: Props) { > - + {/* @if TARGET='web' */} diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx index 1c6ac37db..31423c628 100644 --- a/ui/component/button/view.jsx +++ b/ui/component/button/view.jsx @@ -147,6 +147,7 @@ const Button = forwardRef((props: Props, ref: any) => { }} className={combinedClassName} activeClassName={activeClass} + {...otherProps} > {content} diff --git a/ui/component/claimList/view.jsx b/ui/component/claimList/view.jsx index 22c8a9e80..6e9946ca9 100644 --- a/ui/component/claimList/view.jsx +++ b/ui/component/claimList/view.jsx @@ -101,7 +101,7 @@ export default function ClaimList(props: Props) { {header !== false && ( {headerLabel && } -
+
{header} {loading && }
diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 99af908cf..167e12658 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -7,7 +7,7 @@ import { withRouter } from 'react-router-dom'; import { openCopyLinkMenu } from 'util/context-menu'; import { formatLbryUrlForWeb } from 'util/url'; import { isEmpty } from 'util/object'; -import CardMedia from 'component/cardMedia'; +import FileThumbnail from 'component/fileThumbnail'; import UriIndicator from 'component/uriIndicator'; import TruncatedText from 'component/common/truncated-text'; import DateTime from 'component/dateTime'; @@ -200,7 +200,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { ) : ( - + )}
diff --git a/ui/component/fileActions/index.js b/ui/component/fileActions/index.js index 64e878190..266e2d5fb 100644 --- a/ui/component/fileActions/index.js +++ b/ui/component/fileActions/index.js @@ -1,21 +1,33 @@ import { connect } from 'react-redux'; -import { makeSelectFileInfoForUri, makeSelectClaimIsMine } from 'lbry-redux'; +import * as SETTINGS from 'constants/settings'; +import { + makeSelectClaimIsMine, + makeSelectFileInfoForUri, + makeSelectClaimForUri, + makeSelectContentTypeForUri, + doPrepareEdit, +} from 'lbry-redux'; import { makeSelectCostInfoForUri } from 'lbryinc'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; import { doOpenModal } from 'redux/actions/app'; -import FileActions from './view'; +import fs from 'fs'; +import FilePage from './view'; const select = (state, props) => ({ - fileInfo: makeSelectFileInfoForUri(props.uri)(state), - /* availability check is disabled due to poor performance, TBD if it dies forever or requires daemon fix */ - costInfo: makeSelectCostInfoForUri(props.uri)(state), + claim: makeSelectClaimForUri(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), + fileInfo: makeSelectFileInfoForUri(props.uri)(state), + contentType: makeSelectContentTypeForUri(props.uri)(state), + costInfo: makeSelectCostInfoForUri(props.uri)(state), + supportOption: makeSelectClientSetting(SETTINGS.SUPPORT_OPTION)(state), }); const perform = dispatch => ({ openModal: (modal, props) => dispatch(doOpenModal(modal, props)), + prepareEdit: (publishData, uri, fileInfo) => dispatch(doPrepareEdit(publishData, uri, fileInfo, fs)), }); export default connect( select, perform -)(FileActions); +)(FilePage); diff --git a/ui/component/fileActions/view.jsx b/ui/component/fileActions/view.jsx index f2da8a280..11a689d95 100644 --- a/ui/component/fileActions/view.jsx +++ b/ui/component/fileActions/view.jsx @@ -3,40 +3,114 @@ import * as MODALS from 'constants/modal_types'; import * as ICONS from 'constants/icons'; import React from 'react'; import Button from 'component/button'; -import Tooltip from 'component/common/tooltip'; +import FileDownloadLink from 'component/fileDownloadLink'; +import { buildURI } from 'lbry-redux'; type Props = { uri: string, - claimId: string, - openModal: (id: string, { uri: string }) => void, + claim: StreamClaim, + openModal: (id: string, { uri: string, claimIsMine?: boolean, isSupport?: boolean }) => void, + prepareEdit: ({}, string, {}) => void, claimIsMine: boolean, fileInfo: FileListItem, + costInfo: ?{ cost: number }, + contentType: string, + supportOption: boolean, }; -class FileActions extends React.PureComponent { - render() { - const { fileInfo, uri, openModal, claimIsMine, claimId } = this.props; - const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0)); - return ( - +function FileActions(props: Props) { + const { fileInfo, uri, openModal, claimIsMine, claim, costInfo, contentType, supportOption, prepareEdit } = props; + const webShareable = + costInfo && costInfo.cost === 0 && contentType && ['video', 'image', 'audio'].includes(contentType.split('/')[0]); + const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0)); + const claimId = claim && claim.claim_id; + const { signing_channel: signingChannel } = claim; + const channelName = signingChannel && signingChannel.name; + // We want to use the short form uri for editing + // This is what the user is used to seeing, they don't care about the claim id + // We will select the claim id before they publish + let editUri; + if (claimIsMine) { + const uriObject: { streamName: string, streamClaimId: string, channelName?: string } = { + streamName: claim.name, + streamClaimId: claim.claim_id, + }; + if (channelName) { + uriObject.channelName = channelName; + } + + editUri = buildURI(uriObject); + } + + return ( +
+
+
+ +
+ {/* @if TARGET='app' */} + + {/* @endif */} + + {claimIsMine && ( +
+
+ ); } export default FileActions; diff --git a/ui/component/fileAuthor/index.js b/ui/component/fileAuthor/index.js new file mode 100644 index 000000000..14f1272c3 --- /dev/null +++ b/ui/component/fileAuthor/index.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { makeSelectChannelForClaimUri } from 'lbry-redux'; +import FileAuthor from './view'; + +const select = (state, props) => ({ + channelUri: makeSelectChannelForClaimUri(props.uri)(state), +}); + +export default connect(select)(FileAuthor); diff --git a/ui/component/fileAuthor/view.jsx b/ui/component/fileAuthor/view.jsx new file mode 100644 index 000000000..aed78a009 --- /dev/null +++ b/ui/component/fileAuthor/view.jsx @@ -0,0 +1,19 @@ +// @flow +import * as React from 'react'; +import ClaimPreview from 'component/claimPreview'; + +type Props = { + channelUri: string, +}; + +function LayoutWrapperDocument(props: Props) { + const { channelUri } = props; + + return channelUri ? ( + + ) : ( +
{__('Anonymous')}
+ ); +} + +export default LayoutWrapperDocument; diff --git a/ui/component/fileDetails/view.jsx b/ui/component/fileDetails/view.jsx index 81f872db5..a55b208d7 100644 --- a/ui/component/fileDetails/view.jsx +++ b/ui/component/fileDetails/view.jsx @@ -43,11 +43,9 @@ class FileDetails extends PureComponent { {description && ( - -
- -
- +
+ +
)} diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx index cb677e8cf..d793df2dd 100644 --- a/ui/component/fileRender/view.jsx +++ b/ui/component/fileRender/view.jsx @@ -1,6 +1,7 @@ // @flow import { remote } from 'electron'; import React, { Suspense, Fragment } from 'react'; +import classnames from 'classnames'; import LoadingScreen from 'component/common/loading-screen'; import VideoViewer from 'component/viewers/videoViewer'; import ImageViewer from 'component/viewers/imageViewer'; @@ -186,8 +187,10 @@ class FileRender extends React.PureComponent { } render() { + const { mediaType } = this.props; + return ( -
+
}>{this.renderViewer()}
); diff --git a/ui/component/cardMedia/FreezeframeLite/classes.js b/ui/component/fileThumbnail/FreezeframeLite/classes.js similarity index 100% rename from ui/component/cardMedia/FreezeframeLite/classes.js rename to ui/component/fileThumbnail/FreezeframeLite/classes.js diff --git a/ui/component/cardMedia/FreezeframeLite/index.js b/ui/component/fileThumbnail/FreezeframeLite/index.js similarity index 100% rename from ui/component/cardMedia/FreezeframeLite/index.js rename to ui/component/fileThumbnail/FreezeframeLite/index.js diff --git a/ui/component/cardMedia/FreezeframeLite/styles.scss b/ui/component/fileThumbnail/FreezeframeLite/styles.scss similarity index 100% rename from ui/component/cardMedia/FreezeframeLite/styles.scss rename to ui/component/fileThumbnail/FreezeframeLite/styles.scss diff --git a/ui/component/cardMedia/FreezeframeLite/templates.js b/ui/component/fileThumbnail/FreezeframeLite/templates.js similarity index 100% rename from ui/component/cardMedia/FreezeframeLite/templates.js rename to ui/component/fileThumbnail/FreezeframeLite/templates.js diff --git a/ui/component/cardMedia/FreezeframeLite/utils.js b/ui/component/fileThumbnail/FreezeframeLite/utils.js similarity index 100% rename from ui/component/cardMedia/FreezeframeLite/utils.js rename to ui/component/fileThumbnail/FreezeframeLite/utils.js diff --git a/ui/component/cardMedia/FreezeframeWrapper.jsx b/ui/component/fileThumbnail/FreezeframeWrapper.jsx similarity index 100% rename from ui/component/cardMedia/FreezeframeWrapper.jsx rename to ui/component/fileThumbnail/FreezeframeWrapper.jsx diff --git a/ui/component/cardMedia/index.js b/ui/component/fileThumbnail/index.js similarity index 100% rename from ui/component/cardMedia/index.js rename to ui/component/fileThumbnail/index.js diff --git a/ui/component/cardMedia/placeholder.png b/ui/component/fileThumbnail/placeholder.png similarity index 100% rename from ui/component/cardMedia/placeholder.png rename to ui/component/fileThumbnail/placeholder.png diff --git a/ui/component/cardMedia/view.jsx b/ui/component/fileThumbnail/view.jsx similarity index 74% rename from ui/component/cardMedia/view.jsx rename to ui/component/fileThumbnail/view.jsx index 6ca2910fd..38c73b047 100644 --- a/ui/component/cardMedia/view.jsx +++ b/ui/component/fileThumbnail/view.jsx @@ -21,11 +21,11 @@ class CardMedia extends React.PureComponent { // @if TARGET='web' // Pass image urls through a compression proxy url = thumbnail || Placeholder; -// url = thumbnail -// ? 'https://ext.thumbnails.lbry.com/400x,q55/' + - // The image server will redirect if we don't remove the double slashes after http(s) -// thumbnail.replace('https://', 'https:/').replace('http://', 'http:/') -// : Placeholder; + // url = thumbnail + // ? 'https://ext.thumbnails.lbry.com/400x,q55/' + + // The image server will redirect if we don't remove the double slashes after http(s) + // thumbnail.replace('https://', 'https:/').replace('http://', 'http:/') + // : Placeholder; // @endif // @if TARGET='app' url = thumbnail || Placeholder; diff --git a/ui/component/fileViewCount/index.js b/ui/component/fileViewCount/index.js new file mode 100644 index 000000000..bb41c2f09 --- /dev/null +++ b/ui/component/fileViewCount/index.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { makeSelectViewCountForUri } from 'lbryinc'; +import FileViewCount from './view'; + +const select = (state, props) => ({ + viewCount: makeSelectViewCountForUri(props.uri)(state), +}); + +export default connect(select)(FileViewCount); diff --git a/ui/component/fileViewCount/view.jsx b/ui/component/fileViewCount/view.jsx new file mode 100644 index 000000000..d005ce35c --- /dev/null +++ b/ui/component/fileViewCount/view.jsx @@ -0,0 +1,20 @@ +// @flow +import React from 'react'; +import HelpLink from 'component/common/help-link'; + +type Props = { + viewCount: string, +}; + +function LayoutWrapperDocument(props: Props) { + const { viewCount } = props; + + return ( + + {viewCount !== 1 ? __('%view_count% Views', { view_count: viewCount }) : __('1 View')} + + + ); +} + +export default LayoutWrapperDocument; diff --git a/ui/component/fileViewerInitiator/view.jsx b/ui/component/fileViewerInitiator/view.jsx index 48a9b32ce..2db6627d6 100644 --- a/ui/component/fileViewerInitiator/view.jsx +++ b/ui/component/fileViewerInitiator/view.jsx @@ -1,6 +1,6 @@ // @flow // This component is entirely for triggering the start of a file view -// The actual viewer for a file exists in FileViewer +// The actual viewer for a file exists in TextViewer and FloatingViewer // They can't exist in one component because we need to handle/listen for the start of a new file view // while a file is currently being viewed import React, { useEffect, useCallback, Fragment } from 'react'; @@ -27,9 +27,10 @@ type Props = { hasCostInfo: boolean, costInfo: any, isAutoPlayable: boolean, + inline: boolean, }; -export default function FileViewer(props: Props) { +export default function FileViewerInitiator(props: Props) { const { play, mediaType, @@ -49,6 +50,7 @@ export default function FileViewer(props: Props) { const cost = costInfo && costInfo.cost; const forceVideo = ['application/x-ext-mkv', 'video/x-matroska'].includes(contentType); const isPlayable = ['audio', 'video'].includes(mediaType) || forceVideo; + const isText = mediaType === 'text'; const fileStatus = fileInfo && fileInfo.status; const webStreamOnly = contentType === 'application/pdf' || mediaType === 'text'; const supported = IS_WEB ? (!cost && isStreamable) || webStreamOnly || forceVideo : true; @@ -95,10 +97,10 @@ export default function FileViewer(props: Props) { useEffect(() => { const videoOnPage = document.querySelector('video'); - if (autoplay && !videoOnPage && isAutoPlayable && hasCostInfo && cost === 0) { + if (((autoplay && !videoOnPage && isAutoPlayable) || isText) && hasCostInfo && cost === 0) { viewFile(); } - }, [autoplay, viewFile, isAutoPlayable, hasCostInfo, cost]); + }, [autoplay, viewFile, isAutoPlayable, hasCostInfo, cost, isText]); return (
)} + {!isPlaying && supported && (
-
- {/* @if TARGET='app' */} - - {/* @endif */} - -
-
- -
-
-
- - {channelUri ? ( - - ) : ( -
{__('Anonymous')}
- )} - - - -
-
-
- -
{__('Comments')}
-
- -
-
- -
+ {!fileInfo && insufficientCredits && ( +
+ , + }} + > + The publisher has chosen to charge LBC to view this content. Your balance is currently too low to view it. + Check out %reward_link% for free LBC or send more LBC to your wallet. +
-
- -
- + )} + + {mediaType === 'text' ? : } ); } diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index fa972a269..a3b358c50 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -17,10 +17,6 @@ } } -.claim-list__header--small { - color: var(--color-text-subtitle); -} - .claim-list__dropdown { padding: 0 var(--spacing-medium); @@ -139,7 +135,6 @@ .claim-preview--inline { padding: 0; border-bottom: none; - margin-bottom: var(--spacing-medium); .channel-thumbnail { width: var(--channel-thumbnail-width--small); diff --git a/ui/scss/component/_content.scss b/ui/scss/component/_content.scss index 6835986e2..a717e4120 100644 --- a/ui/scss/component/_content.scss +++ b/ui/scss/component/_content.scss @@ -102,6 +102,10 @@ } } +.content__cover--hidden-for-text { + display: none; +} + .content__loading { height: 100%; display: flex; diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss index b9c8d70e8..20ad7fdae 100644 --- a/ui/scss/component/_file-render.scss +++ b/ui/scss/component/_file-render.scss @@ -6,6 +6,10 @@ max-height: var(--inline-player-max-height); } +.file-render--document { + max-height: none; +} + .file-render__viewer { width: 100%; height: 100%; @@ -26,12 +30,14 @@ .file-render__viewer--document { @extend .file-render__viewer; overflow: auto; - background-color: var(--color-file-viewer-background); .markdown-preview { height: 100%; overflow: auto; - padding: var(--spacing-large); + + @media (max-width: $breakpoint-small) { + padding: var(--spacing-small); + } } } diff --git a/ui/scss/component/_header.scss b/ui/scss/component/_header.scss index 4787d8362..91c4b27e2 100644 --- a/ui/scss/component/_header.scss +++ b/ui/scss/component/_header.scss @@ -119,10 +119,6 @@ border-radius: 1.5rem; margin-left: var(--spacing-small); - svg { - stroke: var(--color-text); - } - &:hover { background-color: var(--color-primary-alt); } diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss index 8c43e0542..00a3beaee 100644 --- a/ui/scss/component/_main.scss +++ b/ui/scss/component/_main.scss @@ -25,7 +25,6 @@ .main { position: relative; width: calc(100% - var(--side-nav-width) - var(--spacing-large)); - margin-right: var(--spacing-main-padding); @media (max-width: $breakpoint-small) { width: 100%; @@ -101,3 +100,12 @@ .main--full-width { width: 100%; } + +.main__document-wrapper { + width: 60%; + margin: auto; + + @media (max-width: $breakpoint-small) { + width: 100%; + } +} diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss index 6e6519942..47f2a8ac5 100644 --- a/ui/scss/component/_markdown-preview.scss +++ b/ui/scss/component/_markdown-preview.scss @@ -13,7 +13,33 @@ font-size: inherit; font-weight: var(--font-weight-bold); margin-bottom: var(--spacing-medium); - padding-top: var(--spacing-medium); + + &:not(:first-child) { + margin-top: var(--spacing-large); + } + } + + h1 { + font-size: 1.8em; + } + h2 { + font-size: 1.7em; + } + h3 { + font-size: 1.6em; + } + h4 { + font-size: 1.5em; + } + h5 { + font-size: 1.4em; + } + h6 { + font-size: 1.3em; + } + + @media (max-width: $breakpoint-small) { + font-size: 0.8em; } // Paragraphs @@ -28,10 +54,6 @@ } } - // Strikethrough text - del { - } - // Tables table { margin-bottom: 1.2rem; @@ -54,6 +76,13 @@ img { margin-bottom: var(--spacing-medium); padding-top: var(--spacing-medium); + max-height: 40vh; + object-position: left; + + @media (max-width: $breakpoint-small) { + max-height: 30vh; + font-size: 0.8em; + } } // Horizontal Rule diff --git a/ui/scss/component/_media.scss b/ui/scss/component/_media.scss index e59591136..37942e506 100644 --- a/ui/scss/component/_media.scss +++ b/ui/scss/component/_media.scss @@ -108,3 +108,7 @@ justify-content: space-between; margin-top: 0; } + +.media__document-thumbnail { + margin-top: 0; +} diff --git a/ui/scss/component/_navigation.scss b/ui/scss/component/_navigation.scss index 4412cce23..a905f1cf6 100644 --- a/ui/scss/component/_navigation.scss +++ b/ui/scss/component/_navigation.scss @@ -1,6 +1,7 @@ .navigation { width: var(--side-nav-width); font-size: var(--font-body); + margin-left: var(--spacing-main-padding); @media (max-width: $breakpoint-small) { display: none; diff --git a/ui/scss/component/_placeholder.scss b/ui/scss/component/_placeholder.scss index 1bb071e2f..c21a6d8dd 100644 --- a/ui/scss/component/_placeholder.scss +++ b/ui/scss/component/_placeholder.scss @@ -27,3 +27,8 @@ } } } + +.placeholder--text-document { + @include placeholder; + height: 60vh; +} diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss index d266bd049..bc09534f4 100644 --- a/ui/scss/init/_gui.scss +++ b/ui/scss/init/_gui.scss @@ -18,6 +18,11 @@ html { color: var(--color-text); background-color: var(--color-background); + font-size: 16px; +} + +body { + font-size: 1em; } h1, @@ -30,8 +35,6 @@ h6 { } p { - font-size: var(--font-body); - & + p { margin-top: var(--spacing-small); } @@ -43,7 +46,7 @@ ol { li { list-style-position: outside; - margin: var(--spacing-medium); + margin: var(--spacing-xsmall) var(--spacing-medium); margin-bottom: 0; } } diff --git a/ui/scss/themes/dark.scss b/ui/scss/themes/dark.scss index 4f139f1b1..93c73ead2 100644 --- a/ui/scss/themes/dark.scss +++ b/ui/scss/themes/dark.scss @@ -12,8 +12,8 @@ --color-link: var(--color-primary); --color-link-hover: #60e1ba; --color-link-active: #60e1ba; - --color-link-icon: #89939e; - --color-navigation-link: var(--color-link-icon); + --color-link-icon: #6a7580; + --color-navigation-link: #b3bcc6; --color-button-primary-bg: var(--color-primary-alt); --color-button-primary-bg-hover: #44796c; --color-button-primary-text: var(--color-primary);