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

416 lines
13 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';
import * as RENDER_MODES from 'constants/file_render_modes';
import React, { useEffect, useState } 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';
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 { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable';
2019-10-14 00:28:12 +02:00
import { onFullscreenChange } from 'util/full-screen';
import { generateListSearchUrlParams, formatLbryUrlForWeb } from 'util/url';
2022-04-14 23:27:16 +02:00
import { useIsMobile } from 'effects/use-screensize';
import debounce from 'util/debounce';
import { useHistory } from 'react-router';
import { isURIEqual } from 'util/lbryURI';
import AutoplayCountdown from 'component/autoplayCountdown';
// scss/init/vars.scss
// --header-height
2022-04-14 23:27:16 +02:00
const HEADER_HEIGHT = 60;
const HEADER_HEIGHT_MOBILE = 60;
const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 100;
export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
2018-05-16 21:34:38 +02:00
function getScreenWidth() {
if (document && document.documentElement) {
return document.documentElement.clientWidth;
} else {
return window.innerWidth;
}
}
function getScreenHeight() {
if (document && document.documentElement) {
return document.documentElement.clientHeight;
} else {
return window.innerHeight;
}
}
function getFloatingPlayerRect() {
// TODO: use 'fileViewerRect'?
const FLOATING_PLAYER_CLASS = 'content__viewer--floating';
const elem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`);
if (elem) {
return elem.getBoundingClientRect();
} else {
return null;
}
}
function clampRectToScreen(x, y, rect) {
if (rect) {
const ESTIMATED_SCROLL_BAR_PX = 50;
const screenW = getScreenWidth();
const screenH = getScreenHeight();
if (x + rect.width > screenW - ESTIMATED_SCROLL_BAR_PX) {
x = screenW - rect.width - ESTIMATED_SCROLL_BAR_PX;
}
if (y + rect.height > screenH) {
y = screenH - rect.height;
}
}
return { x, y };
}
function calculateRelativePos(x, y) {
return {
x: x / getScreenWidth(),
y: y / getScreenHeight(),
};
}
// ****************************************************************************
// ****************************************************************************
2018-03-26 23:32:43 +02:00
type Props = {
2020-04-14 01:48:11 +02:00
isFloating: boolean,
2019-08-06 05:25:33 +02:00
fileInfo: FileListItem,
mature: boolean,
2018-03-26 23:32:43 +02:00
uri: string,
2019-08-02 08:28:14 +02:00
streamingUrl?: string,
2019-08-13 07:35:13 +02:00
title: ?string,
floatingPlayerEnabled: boolean,
closeFloatingPlayer: () => void,
clearSecondarySource: (string) => void,
renderMode: string,
playingUri: ?PlayingUri,
primaryUri: ?string,
2021-01-08 16:21:27 +01:00
videoTheaterMode: boolean,
doFetchRecommendedContent: (string, boolean) => void,
doPlayUri: (string, string, boolean) => void,
collectionId: string,
costInfo: any,
claimWasPurchased: boolean,
nextListUri: string,
previousListUri: string,
2018-03-26 23:32:43 +02:00
};
2017-04-23 11:56:50 +02:00
2020-04-14 01:48:11 +02:00
export default function FileRenderFloating(props: Props) {
const {
fileInfo,
mature,
uri,
streamingUrl,
title,
isFloating,
closeFloatingPlayer,
clearSecondarySource,
floatingPlayerEnabled,
renderMode,
playingUri,
primaryUri,
2021-01-08 16:21:27 +01:00
videoTheaterMode,
doFetchRecommendedContent,
doPlayUri,
collectionId,
costInfo,
claimWasPurchased,
nextListUri,
previousListUri,
} = props;
const { location, push } = useHistory();
const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
const playingUriSource = playingUri && playingUri.source;
const isComment = playingUriSource === 'comment';
2022-04-14 23:27:16 +02:00
const isMobile = useIsMobile();
2021-10-14 22:46:36 +02:00
const mainFilePlaying = !isFloating && primaryUri && isURIEqual(uri, primaryUri);
const [fileViewerRect, setFileViewerRect] = useState();
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
const [wasDragging, setWasDragging] = useState(false);
const [doNavigate, setDoNavigate] = useState(false);
const [playNextUrl, setPlayNextUrl] = useState(true);
const [countdownCanceled, setCountdownCanceled] = useState(false);
2019-08-13 07:35:13 +02:00
const [position, setPosition] = usePersistedState('floating-file-viewer:position', {
x: -25,
y: window.innerHeight - 400,
});
const relativePosRef = React.useRef({ x: 0, y: 0 });
2020-04-14 01:48:11 +02:00
const navigateUrl =
playingUri &&
(playingUri.primaryUri || playingUri.uri) + (collectionId ? generateListSearchUrlParams(collectionId) : '');
const isFree = costInfo && costInfo.cost === 0;
const canViewFile = isFree || claimWasPurchased;
const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
const isReadyToPlay = isPlayable && (streamingUrl || (fileInfo && fileInfo.completed));
2019-08-02 08:28:14 +02:00
const loadingMessage =
fileInfo && fileInfo.blobs_completed >= 1 && (!fileInfo.download_path || !fileInfo.written_bytes)
2019-08-02 08:28:14 +02:00
? __("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
function restoreToRelativePosition() {
const newX = Math.round(relativePosRef.current.x * getScreenWidth());
const newY = Math.round(relativePosRef.current.y * getScreenHeight());
setPosition(clampRectToScreen(newX, newY, getFloatingPlayerRect()));
}
const clampToScreenOnResize = React.useCallback(
debounce(() => {
restoreToRelativePosition();
}, DEBOUNCE_WINDOW_RESIZE_HANDLER_MS),
[]
);
// ???
useEffect(() => {
if (isFloating) {
// When the player begins floating, remove the comment source
// so that it doesn't try to resize again in case of going back
// to the origin's comment section and fail to position correctly
if (isComment && playingUri) clearSecondarySource(playingUri.uri);
}
}, [isFloating, isComment, clearSecondarySource, playingUri]);
// Initial update for relativePosRef:
useEffect(() => {
relativePosRef.current = calculateRelativePos(position.x, position.y);
}, []); // eslint-disable-line react-hooks/exhaustive-deps
// Ensure player is within screen when 'isFloating' changes.
useEffect(() => {
if (isFloating) {
restoreToRelativePosition();
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isFloating]);
// Listen to main-window resizing and adjust the fp position accordingly:
useEffect(() => {
if (isFloating) {
window.addEventListener('resize', clampToScreenOnResize);
return () => window.removeEventListener('resize', clampToScreenOnResize);
}
}, [isFloating, clampToScreenOnResize]);
const handleResize = React.useCallback(() => {
const element = mainFilePlaying
? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
: document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
if (!element) return;
const rect = element.getBoundingClientRect();
// getBoundingClientRect returns a DomRect, not an object
const objectRect = {
top: rect.top,
right: rect.right,
bottom: rect.bottom,
left: rect.left,
width: rect.width,
height: rect.height,
2020-11-09 19:36:35 +01:00
// $FlowFixMe
x: rect.x,
};
// $FlowFixMe
setFileViewerRect({ ...objectRect, windowOffset: window.pageYOffset });
}, [mainFilePlaying]);
2019-08-13 07:35:13 +02:00
useEffect(() => {
if (playingUri && (playingUri.primaryUri || playingUri.uri)) {
handleResize();
setCountdownCanceled(false);
2019-08-13 07:35:13 +02:00
}
}, [handleResize, playingUri, videoTheaterMode]);
2019-08-13 07:35:13 +02:00
useEffect(() => {
handleResize();
window.addEventListener('resize', handleResize);
onFullscreenChange(window, 'add', handleResize);
2019-12-19 21:43:49 +01:00
return () => {
window.removeEventListener('resize', handleResize);
onFullscreenChange(window, 'remove', handleResize);
};
}, [handleResize]);
useEffect(() => {
setDesktopPlayStartTime(Date.now());
return () => {
setDesktopPlayStartTime(undefined);
};
}, [uri]);
useEffect(() => {
if (isFloating) {
doFetchRecommendedContent(uri, mature);
}
}, [doFetchRecommendedContent, isFloating, mature, uri]);
const doPlay = React.useCallback(
(playUri) => {
setDoNavigate(false);
if (!isFloating) {
const navigateUrl = formatLbryUrlForWeb(playUri);
push({
pathname: navigateUrl,
search: collectionId && generateListSearchUrlParams(collectionId),
state: { collectionId, forceAutoplay: true, hideFloatingPlayer: true },
});
} else {
doPlayUri(playUri, collectionId, true);
}
},
[collectionId, doPlayUri, isFloating, push]
);
useEffect(() => {
if (!doNavigate) return;
if (playNextUrl && nextListUri) {
doPlay(nextListUri);
} else if (previousListUri) {
doPlay(previousListUri);
}
setPlayNextUrl(true);
}, [doNavigate, doPlay, nextListUri, playNextUrl, previousListUri]);
if (
!isPlayable ||
!uri ||
2022-04-14 23:27:16 +02:00
(isFloating && (isMobile || !floatingPlayerEnabled || hideFloatingPlayer)) ||
(collectionId && !isFloating && ((!canViewFile && !nextListUri) || countdownCanceled))
) {
return null;
}
function handleDragStart() {
// Not really necessary, but reset just in case 'handleStop' didn't fire.
setWasDragging(false);
}
function handleDragMove(e, ui) {
2019-08-14 05:04:08 +02:00
const { x, y } = position;
const newX = ui.x;
const newY = ui.y;
// Mark as dragging if the position changed and we were not dragging before.
if (!wasDragging && (newX !== x || newY !== y)) {
setWasDragging(true);
}
2019-08-14 05:04:08 +02:00
}
function handleDragStop(e, ui) {
if (wasDragging) {
setWasDragging(false);
}
let newPos = { x: ui.x, y: ui.y };
if (newPos.x !== position.x || newPos.y !== position.y) {
newPos = clampRectToScreen(newPos.x, newPos.y, getFloatingPlayerRect());
setPosition(newPos);
relativePosRef.current = calculateRelativePos(newPos.x, newPos.y);
}
}
2019-08-02 08:28:14 +02:00
return (
<Draggable
onDrag={handleDragMove}
onStart={handleDragStart}
onStop={handleDragStop}
defaultPosition={position}
position={isFloating ? position : { x: 0, y: 0 }}
bounds="parent"
disabled={!isFloating}
handle=".draggable"
cancel=".button"
>
<div
className={classnames('content__viewer', {
'content__viewer--floating': isFloating,
'content__viewer--inline': !isFloating,
'content__viewer--secondary': isComment,
2022-04-14 23:27:16 +02:00
'content__viewer--theater-mode': !isFloating && videoTheaterMode && playingUri?.uri === primaryUri,
'content__viewer--disable-click': wasDragging,
})}
style={
!isFloating && fileViewerRect
? {
width: fileViewerRect.width,
height: fileViewerRect.height,
left: fileViewerRect.x,
2022-04-14 23:27:16 +02:00
top:
fileViewerRect.windowOffset +
fileViewerRect.top -
(isMobile ? HEADER_HEIGHT_MOBILE : HEADER_HEIGHT) -
(IS_DESKTOP_MAC ? 24 : 0),
}
: {}
}
2019-08-13 07:35:13 +02:00
>
<div
className={classnames('content__wrapper', {
'content__wrapper--floating': isFloating,
2019-08-02 08:28:14 +02:00
})}
2019-08-13 07:35:13 +02:00
>
{isFloating && (
<Button
title={__('Close')}
onClick={closeFloatingPlayer}
icon={ICONS.REMOVE}
2022-04-16 21:49:59 +02:00
button="alt"
className="content__floating-close"
/>
)}
{isReadyToPlay ? (
<FileRender className="draggable" uri={uri} desktopPlayStartTime={desktopPlayStartTime} />
) : (
<>
{collectionId && !canViewFile ? (
<div className="content__loading">
<AutoplayCountdown
nextRecommendedUri={nextListUri}
doNavigate={() => setDoNavigate(true)}
doReplay={() => doPlayUri(uri, collectionId, false)}
doPrevious={() => {
setPlayNextUrl(false);
setDoNavigate(true);
}}
onCanceled={() => setCountdownCanceled(true)}
skipPaid
/>
</div>
) : (
<LoadingScreen status={loadingMessage} />
)}
</>
)}
{isFloating && (
<div className="draggable content__info">
<div className="claim-preview__title" title={title || uri}>
<Button label={title || uri} navigate={navigateUrl} button="link" className="content__floating-link" />
2019-08-13 07:35:13 +02:00
</div>
<UriIndicator link uri={uri} />
</div>
)}
2019-08-13 07:35:13 +02:00
</div>
</div>
</Draggable>
2019-08-02 08:28:14 +02:00
);
2017-04-23 11:56:50 +02:00
}