lbry-desktop/ui/component/fileRenderInitiator/view.jsx

158 lines
4.8 KiB
React
Raw Normal View History

2019-08-13 07:35:13 +02:00
// @flow
// This component is entirely for triggering the start of a file view
2020-04-14 01:48:11 +02:00
// The actual viewer for a file exists in TextViewer and FileRenderFloating
2019-08-13 07:35:13 +02:00
// 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 } from 'react';
2019-08-13 07:35:13 +02:00
import classnames from 'classnames';
import * as PAGES from 'constants/pages';
import * as RENDER_MODES from 'constants/file_render_modes';
2019-08-13 07:35:13 +02:00
import Button from 'component/button';
import isUserTyping from 'util/detect-typing';
import Nag from 'component/common/nag';
2019-08-13 07:35:13 +02:00
const SPACE_BAR_KEYCODE = 32;
type Props = {
play: string => void,
isLoading: boolean,
isPlaying: boolean,
fileInfo: FileListItem,
uri: string,
history: { push: string => void },
2020-05-21 17:38:28 +02:00
location: { search: ?string, pathname: string },
2019-08-13 07:35:13 +02:00
obscurePreview: boolean,
insufficientCredits: boolean,
thumbnail?: string,
autoplay: boolean,
hasCostInfo: boolean,
2019-08-29 01:33:38 +02:00
costInfo: any,
2020-01-06 19:32:35 +01:00
inline: boolean,
renderMode: string,
claim: StreamClaim,
2020-05-21 17:38:28 +02:00
claimWasPurchased: boolean,
authenticated: boolean,
2019-08-13 07:35:13 +02:00
};
export default function FileRenderInitiator(props: Props) {
2019-08-14 05:09:25 +02:00
const {
play,
isPlaying,
fileInfo,
uri,
obscurePreview,
insufficientCredits,
history,
2020-05-21 17:38:28 +02:00
location,
2019-08-14 05:09:25 +02:00
thumbnail,
autoplay,
renderMode,
hasCostInfo,
2019-08-29 01:33:38 +02:00
costInfo,
2020-05-21 17:38:28 +02:00
claimWasPurchased,
authenticated,
2019-08-14 05:09:25 +02:00
} = props;
const cost = costInfo && costInfo.cost;
const isFree = hasCostInfo && cost === 0;
2019-08-13 07:35:13 +02:00
const fileStatus = fileInfo && fileInfo.status;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
2019-08-13 07:35:13 +02:00
2020-05-21 17:38:28 +02:00
function doAuthRedirect() {
history.push(`/$/${PAGES.AUTH}?redirect=${encodeURIComponent(location.pathname)}`);
}
2019-08-13 07:35:13 +02:00
// Wrap this in useCallback because we need to use it to the keyboard effect
2019-10-10 07:26:56 +02:00
// If we don't a new instance will be created for every render and react will think the dependencies have changed, which will add/remove the listener for every render
2019-08-13 07:35:13 +02:00
const viewFile = useCallback(
(e?: SyntheticInputEvent<*> | KeyboardEvent) => {
if (e) {
e.stopPropagation();
}
play(uri);
},
[play, uri]
);
useEffect(() => {
// This is just for beginning to download a file
// Play/Pause/Fullscreen will be handled by the respective viewers because not every file type should behave the same
function handleKeyDown(e: KeyboardEvent) {
if (!isUserTyping() && e.keyCode === SPACE_BAR_KEYCODE) {
e.preventDefault();
if (!isPlaying || fileStatus === 'stopped') {
viewFile(e);
}
}
}
window.addEventListener('keydown', handleKeyDown);
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, [isPlaying, fileStatus, viewFile]);
useEffect(() => {
const videoOnPage = document.querySelector('video');
if (isFree && ((autoplay && !videoOnPage && isPlayable) || RENDER_MODES.AUTO_RENDER_MODES.includes(renderMode))) {
2019-08-13 07:35:13 +02:00
viewFile();
}
2020-04-14 01:48:11 +02:00
}, [autoplay, viewFile, isFree, renderMode, isPlayable]);
/*
once content is playing, let the appropriate <FileRender> take care of it...
but for playables, always render so area can be used to fill with floating player
*/
if (isPlaying && !isPlayable) {
return null;
}
2020-05-21 17:38:28 +02:00
const showAppNag = IS_WEB && RENDER_MODES.UNSUPPORTED_IN_THIS_APP.includes(renderMode);
const disabled = showAppNag || (!fileInfo && insufficientCredits && !claimWasPurchased);
const shouldRedirect = IS_WEB && !authenticated && !isFree;
2019-08-13 07:35:13 +02:00
return (
<div
2020-05-21 17:38:28 +02:00
onClick={disabled ? undefined : shouldRedirect ? doAuthRedirect : viewFile}
style={thumbnail && !obscurePreview ? { backgroundImage: `url("${thumbnail}")` } : {}}
className={classnames('content__cover', {
'content__cover--disabled': disabled,
2019-08-13 07:35:13 +02:00
'card__media--nsfw': obscurePreview,
})}
>
{showAppNag && (
<Nag
type="helpful"
inline
message={__('This content requires LBRY Desktop to display.')}
actionText={__('Get the App')}
href="https://lbry.com/get"
2019-09-02 15:24:00 +02:00
/>
)}
2020-05-21 17:38:28 +02:00
{!claimWasPurchased && insufficientCredits && !showAppNag && (
<Nag
type="helpful"
inline
2020-09-04 19:14:48 +02:00
message={__('You need more Credits to purchase this.')}
actionText={__('Open Rewards')}
onClick={() => history.push(`/$/${PAGES.REWARDS}`)}
/>
)}
{!disabled && (
2019-08-13 07:35:13 +02:00
<Button
2020-05-21 23:25:38 +02:00
requiresAuth={shouldRedirect}
2019-08-13 07:35:13 +02:00
onClick={viewFile}
iconSize={30}
title={isPlayable ? __('Play') : __('View')}
className={classnames('button--icon', {
'button--play': isPlayable,
'button--view': !isPlayable,
})}
/>
)}
</div>
);
}