2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
2019-08-13 07:35:13 +02:00
|
|
|
import * as ICONS from 'constants/icons';
|
2020-04-01 20:43:50 +02:00
|
|
|
import * as RENDER_MODES from 'constants/file_render_modes';
|
2020-05-01 18:41:32 +02:00
|
|
|
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';
|
2018-07-05 04:49:12 +02:00
|
|
|
import LoadingScreen from 'component/common/loading-screen';
|
2021-07-06 11:02:05 +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';
|
2020-10-20 19:10:02 +02:00
|
|
|
import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
|
2021-07-06 11:02:05 +02:00
|
|
|
import Draggable from 'react-draggable';
|
2019-10-14 00:28:12 +02:00
|
|
|
import { onFullscreenChange } from 'util/full-screen';
|
2020-08-10 22:47:39 +02:00
|
|
|
import { useIsMobile } from 'effects/use-screensize';
|
2020-09-10 13:52:42 +02:00
|
|
|
import debounce from 'util/debounce';
|
2020-10-20 19:10:02 +02:00
|
|
|
import { useHistory } from 'react-router';
|
2020-09-10 13:52:42 +02:00
|
|
|
|
2020-11-06 22:25:47 +01:00
|
|
|
const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
|
2020-09-10 13:52:42 +02:00
|
|
|
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
|
2021-07-06 11:02:05 +02:00
|
|
|
export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
|
2018-05-16 21:34:38 +02:00
|
|
|
|
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,
|
2021-03-19 16:04:12 +01:00
|
|
|
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,
|
2020-04-29 22:50:06 +02:00
|
|
|
closeFloatingPlayer: () => void,
|
2020-04-01 20:43:50 +02:00
|
|
|
renderMode: string,
|
2020-10-20 19:10:02 +02:00
|
|
|
playingUri: ?PlayingUri,
|
|
|
|
primaryUri: ?string,
|
2021-01-08 16:21:27 +01:00
|
|
|
videoTheaterMode: boolean,
|
2021-03-19 16:04:12 +01:00
|
|
|
doFetchRecommendedContent: (string, boolean) => void,
|
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) {
|
2020-04-29 22:50:06 +02:00
|
|
|
const {
|
|
|
|
fileInfo,
|
2021-03-19 16:04:12 +01:00
|
|
|
mature,
|
2020-04-29 22:50:06 +02:00
|
|
|
uri,
|
|
|
|
streamingUrl,
|
|
|
|
title,
|
|
|
|
isFloating,
|
|
|
|
closeFloatingPlayer,
|
|
|
|
floatingPlayerEnabled,
|
|
|
|
renderMode,
|
2020-10-20 19:10:02 +02:00
|
|
|
playingUri,
|
|
|
|
primaryUri,
|
2021-01-08 16:21:27 +01:00
|
|
|
videoTheaterMode,
|
2021-03-19 16:04:12 +01:00
|
|
|
doFetchRecommendedContent,
|
2020-04-29 22:50:06 +02:00
|
|
|
} = props;
|
2020-10-20 19:10:02 +02:00
|
|
|
const {
|
|
|
|
location: { pathname },
|
|
|
|
} = useHistory();
|
2019-12-18 06:27:08 +01:00
|
|
|
const isMobile = useIsMobile();
|
2020-10-20 19:10:02 +02:00
|
|
|
const mainFilePlaying = playingUri && playingUri.uri === primaryUri;
|
2020-05-01 18:41:32 +02:00
|
|
|
const [fileViewerRect, setFileViewerRect] = useState();
|
2020-05-05 20:02:12 +02:00
|
|
|
const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
|
2020-08-27 08:02:43 +02:00
|
|
|
const [wasDragging, setWasDragging] = useState(false);
|
2019-08-13 07:35:13 +02:00
|
|
|
const [position, setPosition] = usePersistedState('floating-file-viewer:position', {
|
|
|
|
x: -25,
|
|
|
|
y: window.innerHeight - 400,
|
|
|
|
});
|
2020-10-20 19:10:02 +02:00
|
|
|
const [relativePos, setRelativePos] = useState({
|
|
|
|
x: 0,
|
|
|
|
y: 0,
|
|
|
|
});
|
2020-04-14 01:48:11 +02:00
|
|
|
|
2020-10-20 19:10:02 +02:00
|
|
|
const playingUriSource = playingUri && playingUri.source;
|
2020-04-01 20:43:50 +02:00
|
|
|
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 =
|
2020-04-01 20:43:50 +02:00
|
|
|
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
|
|
|
|
2020-09-10 13:52:42 +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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-09-15 04:38:49 +02:00
|
|
|
function clampToScreen(pos) {
|
|
|
|
const ESTIMATED_SCROLL_BAR_PX = 50;
|
|
|
|
const FLOATING_PLAYER_CLASS = 'content__viewer--floating';
|
|
|
|
const fpPlayerElem = document.querySelector(`.${FLOATING_PLAYER_CLASS}`);
|
|
|
|
|
|
|
|
if (fpPlayerElem) {
|
|
|
|
if (pos.x + fpPlayerElem.getBoundingClientRect().width > getScreenWidth() - ESTIMATED_SCROLL_BAR_PX) {
|
2021-01-31 15:05:05 +01:00
|
|
|
pos.x = getScreenWidth() - fpPlayerElem.getBoundingClientRect().width - ESTIMATED_SCROLL_BAR_PX;
|
2020-09-15 04:38:49 +02:00
|
|
|
}
|
|
|
|
if (pos.y + fpPlayerElem.getBoundingClientRect().height > getScreenHeight()) {
|
2021-01-31 15:05:05 +01:00
|
|
|
pos.y = getScreenHeight() - fpPlayerElem.getBoundingClientRect().height;
|
2020-09-15 04:38:49 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Updated 'relativePos' based on persisted 'position':
|
2020-12-01 18:56:59 +01:00
|
|
|
const stringifiedPosition = JSON.stringify(position);
|
2020-09-10 13:52:42 +02:00
|
|
|
useEffect(() => {
|
2020-12-01 18:56:59 +01:00
|
|
|
const jsonPosition = JSON.parse(stringifiedPosition);
|
|
|
|
|
2020-09-10 13:52:42 +02:00
|
|
|
setRelativePos({
|
2020-12-01 18:56:59 +01:00
|
|
|
x: jsonPosition.x / getScreenWidth(),
|
|
|
|
y: jsonPosition.y / getScreenHeight(),
|
2020-09-10 13:52:42 +02:00
|
|
|
});
|
2020-12-01 18:56:59 +01:00
|
|
|
}, [stringifiedPosition]);
|
2020-09-10 13:52:42 +02:00
|
|
|
|
2020-09-15 04:38:49 +02:00
|
|
|
// Ensure player is within screen when 'isFloating' changes.
|
2020-09-10 13:52:42 +02:00
|
|
|
useEffect(() => {
|
2020-10-20 19:10:02 +02:00
|
|
|
const jsonPosition = JSON.parse(stringifiedPosition);
|
|
|
|
|
2020-09-15 04:38:49 +02:00
|
|
|
if (isFloating) {
|
2020-10-20 19:10:02 +02:00
|
|
|
let pos = { x: jsonPosition.x, y: jsonPosition.y };
|
2020-09-15 04:38:49 +02:00
|
|
|
clampToScreen(pos);
|
|
|
|
if (pos.x !== position.x || pos.y !== position.y) {
|
|
|
|
setPosition({ x: pos.x, y: pos.y });
|
2020-09-10 13:52:42 +02:00
|
|
|
}
|
2020-09-15 04:38:49 +02:00
|
|
|
}
|
2020-10-20 19:10:02 +02:00
|
|
|
}, [isFloating, stringifiedPosition]);
|
2020-09-10 13:52:42 +02:00
|
|
|
|
2020-09-15 04:38:49 +02:00
|
|
|
// Listen to main-window resizing and adjust the fp position accordingly:
|
|
|
|
useEffect(() => {
|
2021-02-17 03:05:23 +01:00
|
|
|
const handleMainWindowResize = debounce((e) => {
|
2020-09-15 04:38:49 +02:00
|
|
|
let newPos = {
|
|
|
|
x: Math.round(relativePos.x * getScreenWidth()),
|
|
|
|
y: Math.round(relativePos.y * getScreenHeight()),
|
|
|
|
};
|
|
|
|
clampToScreen(newPos);
|
|
|
|
setPosition({ x: newPos.x, y: newPos.y });
|
2020-09-10 13:52:42 +02:00
|
|
|
}, DEBOUNCE_WINDOW_RESIZE_HANDLER_MS);
|
|
|
|
|
|
|
|
window.addEventListener('resize', handleMainWindowResize);
|
|
|
|
return () => window.removeEventListener('resize', handleMainWindowResize);
|
2020-09-15 04:38:49 +02:00
|
|
|
|
|
|
|
// 'relativePos' is needed in the dependency list to avoid stale closure.
|
|
|
|
// Otherwise, this could just be changed to a one-time effect.
|
2020-09-10 13:52:42 +02:00
|
|
|
}, [relativePos]);
|
|
|
|
|
2020-10-20 19:10:02 +02:00
|
|
|
function handleResize() {
|
|
|
|
const element = mainFilePlaying
|
|
|
|
? document.querySelector(`.${PRIMARY_PLAYER_WRAPPER_CLASS}`)
|
|
|
|
: document.querySelector(`.${INLINE_PLAYER_WRAPPER_CLASS}`);
|
|
|
|
|
|
|
|
if (!element) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const rect = element.getBoundingClientRect();
|
|
|
|
|
2020-11-06 22:25:47 +01:00
|
|
|
// 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,
|
2020-11-06 22:25:47 +01:00
|
|
|
};
|
|
|
|
|
2020-10-20 19:10:02 +02:00
|
|
|
// $FlowFixMe
|
2020-11-06 22:25:47 +01:00
|
|
|
setFileViewerRect({ ...objectRect, windowOffset: window.pageYOffset });
|
2020-10-20 19:10:02 +02:00
|
|
|
}
|
2019-08-13 07:35:13 +02:00
|
|
|
|
2020-10-20 19:10:02 +02:00
|
|
|
useEffect(() => {
|
|
|
|
if (streamingUrl) {
|
|
|
|
handleResize();
|
2019-08-13 07:35:13 +02:00
|
|
|
}
|
2020-10-20 19:10:02 +02:00
|
|
|
}, [streamingUrl, pathname, playingUriSource, isFloating, mainFilePlaying]);
|
2019-08-13 07:35:13 +02:00
|
|
|
|
2020-10-20 19:10:02 +02:00
|
|
|
useEffect(() => {
|
2019-12-31 04:09:20 +01:00
|
|
|
handleResize();
|
|
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
onFullscreenChange(window, 'add', handleResize);
|
2020-10-20 19:10:02 +02:00
|
|
|
|
2019-12-19 21:43:49 +01:00
|
|
|
return () => {
|
|
|
|
window.removeEventListener('resize', handleResize);
|
|
|
|
onFullscreenChange(window, 'remove', handleResize);
|
|
|
|
};
|
2021-01-08 16:21:27 +01:00
|
|
|
}, [setFileViewerRect, isFloating, playingUriSource, mainFilePlaying, videoTheaterMode]);
|
2020-04-01 20:43:50 +02:00
|
|
|
|
2020-05-05 20:02:12 +02:00
|
|
|
useEffect(() => {
|
|
|
|
// @if TARGET='app'
|
|
|
|
setDesktopPlayStartTime(Date.now());
|
|
|
|
// @endif
|
2020-05-05 22:45:59 +02:00
|
|
|
|
|
|
|
return () => {
|
|
|
|
// @if TARGET='app'
|
|
|
|
setDesktopPlayStartTime(undefined);
|
|
|
|
// @endif
|
|
|
|
};
|
2020-05-05 20:02:12 +02:00
|
|
|
}, [uri]);
|
|
|
|
|
2021-03-19 16:04:12 +01:00
|
|
|
useEffect(() => {
|
|
|
|
if (isFloating) {
|
|
|
|
doFetchRecommendedContent(uri, mature);
|
|
|
|
}
|
|
|
|
}, [uri, mature, isFloating]);
|
|
|
|
|
2020-04-16 23:43:09 +02:00
|
|
|
if (!isPlayable || !uri || (isFloating && (isMobile || !floatingPlayerEnabled))) {
|
2020-04-01 20:43:50 +02:00
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2020-09-09 04:14:51 +02:00
|
|
|
function handleDragStart(e, ui) {
|
2020-08-27 08:02:43 +02:00
|
|
|
// Not really necessary, but reset just in case 'handleStop' didn't fire.
|
|
|
|
setWasDragging(false);
|
|
|
|
}
|
|
|
|
|
2020-09-09 04:14:51 +02:00
|
|
|
function handleDragMove(e, ui) {
|
2020-08-27 08:02:43 +02:00
|
|
|
setWasDragging(true);
|
2019-08-14 05:04:08 +02:00
|
|
|
const { x, y } = position;
|
|
|
|
const newX = x + ui.deltaX;
|
|
|
|
const newY = y + ui.deltaY;
|
|
|
|
setPosition({
|
|
|
|
x: newX,
|
|
|
|
y: newY,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2020-09-09 04:14:51 +02:00
|
|
|
function handleDragStop(e, ui) {
|
2020-08-27 08:02:43 +02:00
|
|
|
if (wasDragging) {
|
|
|
|
e.stopPropagation();
|
|
|
|
setWasDragging(false);
|
2020-09-10 13:52:42 +02:00
|
|
|
setRelativePos({
|
|
|
|
x: position.x / getScreenWidth(),
|
|
|
|
y: position.y / getScreenHeight(),
|
|
|
|
});
|
2020-08-27 08:02:43 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-02 08:28:14 +02:00
|
|
|
return (
|
2021-07-06 11:02:05 +02:00
|
|
|
<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': playingUriSource === 'comment',
|
|
|
|
'content__viewer--theater-mode': !isFloating && videoTheaterMode,
|
|
|
|
})}
|
|
|
|
style={
|
|
|
|
!isFloating && fileViewerRect
|
|
|
|
? {
|
|
|
|
width: fileViewerRect.width,
|
|
|
|
height: fileViewerRect.height,
|
|
|
|
left: fileViewerRect.x,
|
|
|
|
// 80px is header height in scss/init/vars.scss
|
|
|
|
top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
|
|
|
|
}
|
|
|
|
: {}
|
|
|
|
}
|
2019-08-13 07:35:13 +02:00
|
|
|
>
|
|
|
|
<div
|
2021-07-06 11:02:05 +02:00
|
|
|
className={classnames('content__wrapper', {
|
|
|
|
'content__wrapper--floating': isFloating,
|
2019-08-02 08:28:14 +02:00
|
|
|
})}
|
2019-08-13 07:35:13 +02:00
|
|
|
>
|
2021-07-06 11:02:05 +02:00
|
|
|
{isFloating && (
|
|
|
|
<Button
|
|
|
|
title={__('Close')}
|
|
|
|
onClick={closeFloatingPlayer}
|
|
|
|
icon={ICONS.REMOVE}
|
|
|
|
button="primary"
|
|
|
|
className="content__floating-close"
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
|
|
|
|
{isReadyToPlay ? (
|
|
|
|
<FileRender
|
|
|
|
className="draggable"
|
|
|
|
uri={uri}
|
|
|
|
// @if TARGET='app'
|
|
|
|
desktopPlayStartTime={desktopPlayStartTime}
|
|
|
|
// @endif
|
|
|
|
/>
|
|
|
|
) : (
|
|
|
|
<LoadingScreen status={loadingMessage} />
|
|
|
|
)}
|
|
|
|
{isFloating && (
|
|
|
|
<div className="draggable content__info">
|
|
|
|
<div className="claim-preview__title" title={title || uri}>
|
|
|
|
<Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
|
2019-08-13 07:35:13 +02:00
|
|
|
</div>
|
2021-07-06 11:02:05 +02:00
|
|
|
<UriIndicator link uri={uri} />
|
|
|
|
</div>
|
|
|
|
)}
|
2019-08-13 07:35:13 +02:00
|
|
|
</div>
|
2021-07-06 11:02:05 +02:00
|
|
|
</div>
|
|
|
|
</Draggable>
|
2019-08-02 08:28:14 +02:00
|
|
|
);
|
2017-04-23 11:56:50 +02:00
|
|
|
}
|