lbry-desktop/ui/page/file/view.jsx

231 lines
7.2 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2021-07-22 20:21:31 +02:00
import * as PAGES from 'constants/pages';
2018-03-26 23:32:43 +02:00
import * as React from 'react';
import classnames from 'classnames';
import { lazyImport } from 'util/lazyImport';
2018-03-26 23:32:43 +02:00
import Page from 'component/page';
import * as RENDER_MODES from 'constants/file_render_modes';
2021-03-11 18:08:11 +01:00
import FileTitleSection from 'component/fileTitleSection';
import FileRenderInitiator from 'component/fileRenderInitiator';
import FileRenderInline from 'component/fileRenderInline';
import FileRenderDownload from 'component/fileRenderDownload';
import RecommendedContent from 'component/recommendedContent';
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
import CollectionContent from 'component/collectionContentSidebar';
import CommentsList from 'component/commentsList';
2021-07-22 20:21:31 +02:00
import Button from 'component/button';
import I18nMessage from 'component/i18nMessage';
2021-02-04 06:45:49 +01:00
import Empty from 'component/common/empty';
const PostViewer = lazyImport(() => import('component/postViewer' /* webpackChunkName: "postViewer" */));
2021-06-11 08:06:29 +02:00
export const PRIMARY_PLAYER_WRAPPER_CLASS = 'file-page__video-container';
2019-08-13 07:35:13 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
costInfo: ?{ includesData: boolean, cost: number },
2019-04-24 16:02:08 +02:00
fileInfo: FileListItem,
2018-03-26 23:32:43 +02:00
uri: string,
2021-03-11 18:08:11 +01:00
fetchFileInfo: (string) => void,
fetchCostInfo: (string) => void,
setViewed: (string) => void,
renderMode: string,
obscureNsfw: boolean,
isMature: boolean,
linkedCommentId?: string,
setPrimaryUri: (?string) => void,
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
collection?: Collection,
collectionId: string,
2021-01-08 16:21:27 +01:00
videoTheaterMode: boolean,
2021-07-22 20:21:31 +02:00
claimIsMine: boolean,
2021-02-05 00:00:07 +01:00
commentsDisabled: boolean,
2021-07-22 20:21:31 +02:00
isLivestream: boolean,
clearPosition: (string) => void,
position: number,
2018-03-26 23:32:43 +02:00
};
function FilePage(props: Props) {
const {
uri,
renderMode,
fetchFileInfo,
fetchCostInfo,
setViewed,
fileInfo,
obscureNsfw,
isMature,
costInfo,
linkedCommentId,
setPrimaryUri,
2021-01-08 16:21:27 +01:00
videoTheaterMode,
2021-07-22 20:21:31 +02:00
claimIsMine,
2021-02-05 00:00:07 +01:00
commentsDisabled,
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
collection,
collectionId,
2021-07-22 20:21:31 +02:00
isLivestream,
clearPosition,
position,
} = props;
const cost = costInfo ? costInfo.cost : null;
const hasFileInfo = fileInfo !== undefined;
2021-03-12 17:18:09 +01:00
const isMarkdown = renderMode === RENDER_MODES.MARKDOWN;
const videoPlayedEnoughToResetPosition = React.useMemo(() => {
const durationInSecs =
fileInfo && fileInfo.metadata && fileInfo.metadata.video ? fileInfo.metadata.video.duration : 0;
const isVideoTooShort = durationInSecs <= 10;
const almostFinishedPlaying = position / durationInSecs >= 0.9;
return isVideoTooShort || almostFinishedPlaying;
}, [fileInfo, position]);
React.useEffect(() => {
2019-03-15 17:15:31 +01:00
// always refresh file info when entering file page to see if we have the file
// this could probably be refactored into more direct components now
2019-03-15 17:15:31 +01:00
// @if TARGET='app'
if (!hasFileInfo) {
fetchFileInfo(uri);
}
2019-03-15 17:15:31 +01:00
// @endif
2017-05-12 19:14:06 +02:00
if (collectionId) {
clearPosition(uri);
}
if (fileInfo && videoPlayedEnoughToResetPosition) {
clearPosition(uri);
}
// See https://github.com/lbryio/lbry-desktop/pull/1563 for discussion
fetchCostInfo(uri);
setViewed(uri);
setPrimaryUri(uri);
2019-03-14 19:40:26 +01:00
return () => {
setPrimaryUri(null);
};
}, [
uri,
hasFileInfo,
fileInfo,
videoPlayedEnoughToResetPosition,
fetchFileInfo,
collectionId,
clearPosition,
fetchCostInfo,
setViewed,
setPrimaryUri,
]);
2018-10-19 22:38:07 +02:00
function renderFilePageLayout() {
if (RENDER_MODES.FLOATING_MODES.includes(renderMode)) {
return (
<React.Fragment>
<div className={PRIMARY_PLAYER_WRAPPER_CLASS}>
2021-01-08 16:21:27 +01:00
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
</div>
{/* playables will be rendered and injected by <FileRenderFloating> */}
</React.Fragment>
);
}
if (RENDER_MODES.UNRENDERABLE_MODES.includes(renderMode)) {
return (
<React.Fragment>
2021-03-11 18:08:11 +01:00
<FileTitleSection uri={uri} />
<FileRenderDownload uri={uri} isFree={cost === 0} />
</React.Fragment>
);
}
2021-03-12 17:18:09 +01:00
if (isMarkdown) {
2021-06-11 08:06:29 +02:00
return (
<React.Suspense fallback={null}>
<PostViewer uri={uri} />
</React.Suspense>
);
}
2021-03-12 17:18:09 +01:00
if (RENDER_MODES.TEXT_MODES.includes(renderMode)) {
return (
<React.Fragment>
<FileTitleSection uri={uri} />
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
</React.Fragment>
);
}
if (renderMode === RENDER_MODES.IMAGE) {
return (
<React.Fragment>
<div className="file-render--img-container">
<FileRenderInitiator uri={uri} />
<FileRenderInline uri={uri} />
</div>
<FileTitleSection uri={uri} />
</React.Fragment>
2021-03-12 17:18:09 +01:00
);
}
return (
<React.Fragment>
2021-01-08 16:21:27 +01:00
<FileRenderInitiator uri={uri} videoTheaterMode={videoTheaterMode} />
<FileRenderInline uri={uri} />
2021-03-11 18:08:11 +01:00
<FileTitleSection uri={uri} />
</React.Fragment>
);
}
2021-01-08 16:21:27 +01:00
if (obscureNsfw && isMature) {
return (
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
<Page className="file-page" filePage isMarkdown={isMarkdown}>
<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} />}
</Page>
);
}
return (
2021-03-12 17:18:09 +01:00
<Page className="file-page" filePage isMarkdown={isMarkdown}>
<div className={classnames('section card-stack', `file-page__${renderMode}`)}>
{renderFilePageLayout()}
2021-03-12 17:18:09 +01:00
{!isMarkdown && (
2021-03-11 18:08:11 +01:00
<div className="file-page__secondary-content">
<div>
2021-07-22 20:21:31 +02:00
{claimIsMine && isLivestream && (
<div className="livestream__creator-message">
<h4>{__('Only visible to you')}</h4>
<I18nMessage>
People who view this link will be redirected to your livestream. Make sure to use this for sharing
so your title and thumbnail are displayed properly.
</I18nMessage>
<div className="section__actions">
<Button button="primary" navigate={`/$/${PAGES.LIVESTREAM}`} label={__('View livestream')} />
</div>
</div>
)}
2021-03-11 18:08:11 +01:00
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
2021-03-11 18:08:11 +01:00
</div>
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
{!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
2021-01-08 16:21:27 +01:00
</div>
2021-03-11 18:08:11 +01:00
)}
</div>
wip wip wip - everything but publish, autoplay, and styling collection publishing add channel to collection publish cleanup wip bump clear mass add after success move collection item management controls redirect replace to published collection id bump playlist selector on create bump use new collection add ui element bump wip gitignore add content json wip bump context add to playlist basic collections page style pass wip wip: edits, buttons, styles... change fileAuthor to claimAuthor update, pending bugfixes, delete modal progress, collection header, other bugfixes bump cleaning show page bugfix builtin collection headers no playlists, no grid title wip style tweaks use normal looking claim previews for collection tiles add collection changes style library previews collection menulist for delete/view on library delete modal works for unpublished rearrange collection publish tabs clean up collection publishing and items show on odysee begin collectoin edit header and css renaming better thumbnails bump fix collection publish redirect view collection in menu does something copy and thumbs list previews, pending, context menus, list page enter to add collection, lists page empty state playable lists only, delete feature, bump put fileListDownloaded back better collection titles improve collection claim details fix horiz more icon fix up channel page style, copy, bump refactor preview overlay properties, fix reposts showing as floppydisk add watch later toast, small overlay properties on wunderbar results, fix collection actions buttons bump cleanup cleaning, refactoring bump preview thumb styling, cleanup support discover page lists search sync, bump bump, fix sync more enforce builtin order for now new lists page empty state try to indicate unpublished edits in lists bump fix autoplay and linting consts, fix autoplay bugs fixes cleanup fix, bump lists experimental ui, fixes refactor listIndex out hack in collection fallback thumb bump
2021-02-06 08:03:51 +01:00
{collection && !isMarkdown && !videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
2021-03-12 17:18:09 +01:00
{isMarkdown && (
2021-03-11 18:08:11 +01:00
<div className="file-page__post-comments">
<CommentsList uri={uri} linkedCommentId={linkedCommentId} />
2021-03-11 18:08:11 +01:00
</div>
)}
</Page>
);
2017-05-05 07:10:37 +02:00
}
2017-05-01 21:59:40 +02:00
export default FilePage;