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

177 lines
5.3 KiB
React
Raw Normal View History

2018-03-26 23:32:43 +02:00
// @flow
2019-08-13 07:35:13 +02:00
import * as ICONS from 'constants/icons';
2019-08-14 05:04:08 +02:00
import React, { useState, useEffect } from 'react';
2019-08-13 07:35:13 +02:00
import Button from 'component/button';
2018-03-26 23:32:43 +02:00
import classnames from 'classnames';
import LoadingScreen from 'component/common/loading-screen';
2019-08-02 08:28:14 +02:00
import FileRender from 'component/fileRender';
2019-08-13 07:35:13 +02:00
import UriIndicator from 'component/uriIndicator';
2019-09-27 20:56:15 +02:00
import usePersistedState from 'effects/use-persisted-state';
import usePrevious from 'effects/use-previous';
2019-08-13 07:35:13 +02:00
import { FILE_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable';
import Tooltip from 'component/common/tooltip';
2019-10-14 00:28:12 +02:00
import { onFullscreenChange } from 'util/full-screen';
2018-05-16 21:34:38 +02:00
2018-03-26 23:32:43 +02:00
type Props = {
2019-08-02 08:28:14 +02:00
mediaType: string,
2018-03-26 23:32:43 +02:00
isLoading: boolean,
2019-08-02 08:28:14 +02:00
isPlaying: boolean,
2019-08-06 05:25:33 +02:00
fileInfo: FileListItem,
2018-03-26 23:32:43 +02:00
uri: string,
2019-08-02 08:28:14 +02:00
obscurePreview: boolean,
insufficientCredits: boolean,
2019-08-02 08:28:14 +02:00
isStreamable: boolean,
thumbnail?: string,
streamingUrl?: string,
2019-08-13 07:35:13 +02:00
floatingPlayer: boolean,
pageUri: ?string,
title: ?string,
floatingPlayerEnabled: boolean,
clearPlayingUri: () => void,
triggerAnalyticsView: (string, number) => Promise<any>,
claimRewards: () => void,
2018-03-26 23:32:43 +02:00
};
2017-04-23 11:56:50 +02:00
2019-08-02 08:28:14 +02:00
export default function FileViewer(props: Props) {
const {
isPlaying,
fileInfo,
uri,
streamingUrl,
isStreamable,
2019-08-13 07:35:13 +02:00
pageUri,
title,
clearPlayingUri,
floatingPlayerEnabled,
2019-08-14 05:04:08 +02:00
triggerAnalyticsView,
claimRewards,
2019-09-17 21:03:54 +02:00
mediaType,
2019-08-02 08:28:14 +02:00
} = props;
2019-08-14 05:04:08 +02:00
const [playTime, setPlayTime] = useState();
2019-08-13 07:35:13 +02:00
const [fileViewerRect, setFileViewerRect] = usePersistedState('inline-file-viewer:rect');
const [position, setPosition] = usePersistedState('floating-file-viewer:position', {
x: -25,
y: window.innerHeight - 400,
});
2019-08-02 08:28:14 +02:00
2019-08-13 07:35:13 +02:00
const inline = pageUri === uri;
const isReadyToPlay = (IS_WEB && isStreamable) || (isStreamable && streamingUrl) || (fileInfo && fileInfo.completed);
2019-08-02 08:28:14 +02:00
const loadingMessage =
!isStreamable && fileInfo && fileInfo.blobs_completed >= 1 && (!fileInfo.download_path || !fileInfo.written_bytes)
? __("It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds.")
: __('Loading');
2019-08-14 05:04:08 +02:00
const previousUri = usePrevious(uri);
const isNewView = uri && previousUri !== uri && isPlaying;
2019-09-17 21:20:55 +02:00
const [hasRecordedView, setHasRecordedView] = useState(false);
2019-08-14 05:04:08 +02:00
useEffect(() => {
if (isNewView) {
setPlayTime(Date.now());
}
}, [isNewView, uri]);
useEffect(() => {
2019-09-17 21:20:55 +02:00
if (playTime && isReadyToPlay && !hasRecordedView) {
2019-08-14 05:04:08 +02:00
const timeToStart = Date.now() - playTime;
triggerAnalyticsView(uri, timeToStart).then(() => {
claimRewards();
setHasRecordedView(false);
setPlayTime(null);
});
2019-08-14 05:04:08 +02:00
}
2019-09-17 21:20:55 +02:00
}, [setPlayTime, triggerAnalyticsView, isReadyToPlay, hasRecordedView, playTime, uri, claimRewards]);
2019-08-02 08:28:14 +02:00
useEffect(() => {
2019-08-13 07:35:13 +02:00
function handleResize() {
const element = document.querySelector(`.${FILE_WRAPPER_CLASS}`);
if (!element) {
2019-09-27 20:56:15 +02:00
console.error("Can't find file viewer wrapper to attach to the inline viewer to"); // eslint-disable-line
return;
}
2019-08-13 07:35:13 +02:00
const rect = element.getBoundingClientRect();
// @FlowFixMe
setFileViewerRect(rect);
}
if (inline) {
handleResize();
window.addEventListener('resize', handleResize);
2019-10-14 00:28:12 +02:00
onFullscreenChange(window, 'add', handleResize);
2019-08-13 07:35:13 +02:00
return () => {
window.removeEventListener('resize', handleResize);
2019-10-14 00:28:12 +02:00
onFullscreenChange(window, 'remove', handleResize);
2019-08-13 07:35:13 +02:00
};
}
2019-08-13 07:35:13 +02:00
}, [setFileViewerRect, inline]);
2019-08-14 05:04:08 +02:00
function handleDrag(e, ui) {
const { x, y } = position;
const newX = x + ui.deltaX;
const newY = y + ui.deltaY;
setPosition({
x: newX,
y: newY,
});
}
2019-09-17 21:03:54 +02:00
const hidePlayer =
2019-09-19 19:18:35 +02:00
!isPlaying || !uri || (!inline && (!floatingPlayerEnabled || !['audio', 'video'].includes(mediaType)));
2019-09-17 21:03:54 +02:00
2019-08-13 07:35:13 +02:00
if (hidePlayer) {
return null;
}
2019-08-02 08:28:14 +02:00
return (
2019-08-13 07:35:13 +02:00
<Draggable
onDrag={handleDrag}
defaultPosition={position}
position={inline ? { x: 0, y: 0 } : position}
bounds="parent"
disabled={inline}
handle=".content__info"
cancel=".button"
2019-08-02 08:28:14 +02:00
>
2019-08-13 07:35:13 +02:00
<div
className={classnames('content__viewer', {
'content__viewer--floating': !inline,
})}
style={
inline && fileViewerRect
? { width: fileViewerRect.width, height: fileViewerRect.height, left: fileViewerRect.x }
: {}
}
>
<div
className={classnames('content__wrapper', {
'content__wrapper--floating': !inline,
2019-08-02 08:28:14 +02:00
})}
2019-08-13 07:35:13 +02:00
>
{!inline && (
<div className="content__actions">
<Tooltip label={__('View File')}>
2019-08-13 19:47:06 +02:00
<Button navigate={uri} icon={ICONS.VIEW} button="primary" />
2019-08-13 07:35:13 +02:00
</Tooltip>
<Tooltip label={__('Close')}>
2019-08-13 19:47:06 +02:00
<Button onClick={clearPlayingUri} icon={ICONS.REMOVE} button="primary" />
2019-08-13 07:35:13 +02:00
</Tooltip>
</div>
)}
{isReadyToPlay ? <FileRender uri={uri} /> : <LoadingScreen status={loadingMessage} />}
{!inline && (
<div className="content__info">
<div className="claim-preview-title" title={title || uri}>
{title || uri}
</div>
<UriIndicator link addTooltip={false} uri={uri} />
</div>
)}
</div>
</div>
</Draggable>
2019-08-02 08:28:14 +02:00
);
2017-04-23 11:56:50 +02:00
}