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

130 lines
3.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
// The actual viewer for a file exists in FileViewer
// 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
2019-09-02 15:24:00 +02:00
import React, { useEffect, useCallback, Fragment } from 'react';
2019-08-13 07:35:13 +02:00
import classnames from 'classnames';
import Button from 'component/button';
import isUserTyping from 'util/detect-typing';
2019-09-02 15:24:00 +02:00
import Yrbl from 'component/yrbl';
2019-08-13 07:35:13 +02:00
const SPACE_BAR_KEYCODE = 32;
type Props = {
play: string => void,
mediaType: string,
isLoading: boolean,
isPlaying: boolean,
fileInfo: FileListItem,
uri: string,
obscurePreview: boolean,
insufficientCredits: boolean,
isStreamable: boolean,
thumbnail?: string,
autoplay: boolean,
hasCostInfo: boolean,
2019-08-29 01:33:38 +02:00
costInfo: any,
2019-08-13 07:35:13 +02:00
};
export default function FileViewer(props: Props) {
2019-08-14 05:09:25 +02:00
const {
play,
mediaType,
isPlaying,
fileInfo,
uri,
obscurePreview,
insufficientCredits,
thumbnail,
autoplay,
isStreamable,
hasCostInfo,
2019-08-29 01:33:38 +02:00
costInfo,
2019-08-14 05:09:25 +02:00
} = props;
const cost = costInfo && costInfo.cost;
2019-10-10 07:23:42 +02:00
const isPlayable = ['audio', 'video'].includes(mediaType);
2019-08-13 07:35:13 +02:00
const fileStatus = fileInfo && fileInfo.status;
2019-09-02 15:24:00 +02:00
const supported = (IS_WEB && isStreamable) || !IS_WEB;
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 (autoplay && !videoOnPage && isStreamable && hasCostInfo && cost === 0) {
2019-08-13 07:35:13 +02:00
viewFile();
}
}, [autoplay, viewFile, isStreamable, hasCostInfo, cost]);
2019-08-13 07:35:13 +02:00
return (
<div
disabled={!hasCostInfo}
style={!obscurePreview && supported && thumbnail ? { backgroundImage: `url("${thumbnail}")` } : {}}
2019-09-06 16:52:58 +02:00
onClick={supported && viewFile}
2019-09-02 15:24:00 +02:00
className={classnames({
content__cover: supported,
'content__cover--disabled': !supported,
2019-08-13 07:35:13 +02:00
'card__media--nsfw': obscurePreview,
'card__media--disabled': supported && !fileInfo && insufficientCredits,
2019-08-13 07:35:13 +02:00
})}
>
2019-09-02 15:24:00 +02:00
{!supported && (
<Yrbl
type="happy"
title={__('Unsupported File')}
subtitle={
<Fragment>
<p>
{__('Good news, though! You can')}{' '}
<Button button="link" label={__('Download the app')} href="https://lbry.com/get" />{' '}
{__('and gain access to everything.')}
2019-09-02 15:24:00 +02:00
</p>
</Fragment>
}
/>
)}
{!isPlaying && supported && (
2019-08-13 07:35:13 +02:00
<Button
onClick={viewFile}
iconSize={30}
title={isPlayable ? __('Play') : __('View')}
className={classnames('button--icon', {
'button--play': isPlayable,
'button--view': !isPlayable,
})}
/>
)}
</div>
);
}