2018-03-26 23:32:43 +02:00
|
|
|
// @flow
|
2017-12-21 22:08:54 +01:00
|
|
|
import React from 'react';
|
2018-04-18 06:03:01 +02:00
|
|
|
import { Lbry } from 'lbry-redux';
|
2018-03-26 23:32:43 +02:00
|
|
|
import classnames from 'classnames';
|
2017-12-21 22:08:54 +01:00
|
|
|
import VideoPlayer from './internal/player';
|
|
|
|
import VideoPlayButton from './internal/play-button';
|
|
|
|
import LoadingScreen from './internal/loading-screen';
|
2017-05-02 15:58:35 +02:00
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
type Props = {
|
|
|
|
cancelPlay: () => void,
|
|
|
|
fileInfo: {
|
|
|
|
outpoint: string,
|
|
|
|
file_name: string,
|
|
|
|
written_bytes: number,
|
|
|
|
download_path: string,
|
|
|
|
completed: boolean,
|
|
|
|
},
|
|
|
|
metadata: ?{
|
|
|
|
nsfw: boolean,
|
|
|
|
thumbnail: string,
|
|
|
|
},
|
|
|
|
isLoading: boolean,
|
|
|
|
isDownloading: boolean,
|
|
|
|
playingUri: ?string,
|
|
|
|
contentType: string,
|
|
|
|
changeVolume: number => void,
|
|
|
|
volume: number,
|
|
|
|
claim: {},
|
|
|
|
uri: string,
|
|
|
|
doPlay: () => void,
|
|
|
|
doPause: () => void,
|
|
|
|
savePosition: (string, number) => void,
|
|
|
|
mediaPaused: boolean,
|
|
|
|
mediaPosition: ?number,
|
|
|
|
className: ?string,
|
|
|
|
obscureNsfw: boolean,
|
2018-04-30 17:27:20 +02:00
|
|
|
play: string => void
|
2018-03-26 23:32:43 +02:00
|
|
|
};
|
2017-04-23 11:56:50 +02:00
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
class Video extends React.PureComponent<Props> {
|
2017-09-18 04:13:05 +02:00
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.cancelPlay();
|
|
|
|
}
|
|
|
|
|
2018-04-30 17:27:20 +02:00
|
|
|
componentDidMount() {
|
|
|
|
this.handleAutoplay(this.props);
|
|
|
|
}
|
|
|
|
|
|
|
|
componentWillReceiveProps(nextProps: Props) {
|
|
|
|
this.handleAutoplay(nextProps);
|
|
|
|
}
|
|
|
|
|
|
|
|
handleAutoplay(props: Props) {
|
|
|
|
const {
|
|
|
|
autoplay,
|
|
|
|
obscureNsfw,
|
|
|
|
playingUri,
|
|
|
|
fileInfo,
|
|
|
|
costInfo,
|
|
|
|
isDownloading,
|
|
|
|
uri,
|
|
|
|
load,
|
|
|
|
play
|
|
|
|
} = props;
|
|
|
|
|
|
|
|
const playable = (
|
|
|
|
autoplay &&
|
|
|
|
obscureNsfw === false &&
|
|
|
|
playingUri !== uri
|
|
|
|
);
|
|
|
|
|
|
|
|
if (
|
|
|
|
playable &&
|
|
|
|
costInfo &&
|
|
|
|
costInfo.cost === 0 &&
|
|
|
|
!fileInfo &&
|
|
|
|
!isDownloading
|
|
|
|
) {
|
|
|
|
load(uri);
|
|
|
|
play(uri);
|
|
|
|
}
|
|
|
|
else if (
|
|
|
|
playable &&
|
|
|
|
fileInfo &&
|
|
|
|
fileInfo.blobs_completed > 0
|
|
|
|
) {
|
|
|
|
play(uri);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
isMediaSame(nextProps: Props) {
|
2017-07-12 22:56:18 +02:00
|
|
|
return (
|
|
|
|
this.props.fileInfo &&
|
|
|
|
nextProps.fileInfo &&
|
|
|
|
this.props.fileInfo.outpoint === nextProps.fileInfo.outpoint
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-04-23 11:56:50 +02:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
metadata,
|
|
|
|
isLoading,
|
|
|
|
isDownloading,
|
2017-09-18 04:08:43 +02:00
|
|
|
playingUri,
|
2017-04-23 11:56:50 +02:00
|
|
|
fileInfo,
|
2017-05-31 19:36:38 +02:00
|
|
|
contentType,
|
2017-08-25 21:05:00 +02:00
|
|
|
changeVolume,
|
|
|
|
volume,
|
2017-12-29 17:07:03 +01:00
|
|
|
claim,
|
2017-09-18 04:08:43 +02:00
|
|
|
uri,
|
2017-12-21 00:38:11 +01:00
|
|
|
doPlay,
|
|
|
|
doPause,
|
2017-12-23 00:14:54 +01:00
|
|
|
savePosition,
|
2017-12-21 00:38:11 +01:00
|
|
|
mediaPaused,
|
|
|
|
mediaPosition,
|
2018-03-26 23:32:43 +02:00
|
|
|
className,
|
|
|
|
obscureNsfw,
|
|
|
|
play,
|
2017-06-06 23:19:12 +02:00
|
|
|
} = this.props;
|
2017-04-23 11:56:50 +02:00
|
|
|
|
2017-09-18 04:08:43 +02:00
|
|
|
const isPlaying = playingUri === uri;
|
2017-06-06 23:19:12 +02:00
|
|
|
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
|
2018-03-26 23:32:43 +02:00
|
|
|
const shouldObscureNsfw = obscureNsfw && metadata && metadata.nsfw;
|
2018-04-18 06:03:01 +02:00
|
|
|
const mediaType = Lbry.getMediaType(contentType, fileInfo && fileInfo.file_name);
|
2017-05-15 18:34:33 +02:00
|
|
|
|
2017-12-21 22:08:54 +01:00
|
|
|
let loadStatusMessage = '';
|
2017-04-23 11:56:50 +02:00
|
|
|
|
2017-06-06 23:19:12 +02:00
|
|
|
if (fileInfo && fileInfo.completed && !fileInfo.written_bytes) {
|
|
|
|
loadStatusMessage = __(
|
|
|
|
"It looks like you deleted or moved this file. We're rebuilding it now. It will only take a few seconds."
|
|
|
|
);
|
2017-05-28 15:38:36 +02:00
|
|
|
} else if (isLoading) {
|
2017-12-21 22:08:54 +01:00
|
|
|
loadStatusMessage = __('Requesting stream...');
|
2017-04-23 11:56:50 +02:00
|
|
|
} else if (isDownloading) {
|
2017-12-21 22:08:54 +01:00
|
|
|
loadStatusMessage = __('Downloading stream... not long left now!');
|
2017-04-23 11:56:50 +02:00
|
|
|
}
|
|
|
|
|
2018-03-26 23:32:43 +02:00
|
|
|
const poster = metadata && metadata.thumbnail;
|
2018-04-30 17:27:20 +02:00
|
|
|
const layoverClass = classnames('content__cover', { 'card__media--nsfw': shouldObscureNsfw });
|
|
|
|
const layoverStyle = !shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {};
|
2017-05-31 19:36:38 +02:00
|
|
|
|
2017-04-23 11:56:50 +02:00
|
|
|
return (
|
2018-03-26 23:32:43 +02:00
|
|
|
<div className={classnames('video', {}, className)}>
|
|
|
|
{isPlaying && (
|
|
|
|
<div className="content__view">
|
|
|
|
{!isReadyToPlay ? (
|
2018-04-30 17:27:20 +02:00
|
|
|
<div className={layoverClass} style={layoverStyle}>
|
|
|
|
<LoadingScreen status={loadStatusMessage} />
|
|
|
|
</div>
|
|
|
|
) : (
|
2018-03-26 23:32:43 +02:00
|
|
|
<VideoPlayer
|
|
|
|
filename={fileInfo.file_name}
|
|
|
|
poster={poster}
|
|
|
|
downloadPath={fileInfo.download_path}
|
|
|
|
mediaType={mediaType}
|
|
|
|
contentType={contentType}
|
|
|
|
downloadCompleted={fileInfo.completed}
|
|
|
|
changeVolume={changeVolume}
|
|
|
|
volume={volume}
|
|
|
|
doPlay={doPlay}
|
|
|
|
doPause={doPause}
|
|
|
|
savePosition={savePosition}
|
|
|
|
claim={claim}
|
|
|
|
uri={uri}
|
|
|
|
paused={mediaPaused}
|
|
|
|
position={mediaPosition}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{!isPlaying && (
|
2018-04-30 17:27:20 +02:00
|
|
|
<div className={layoverClass} style={layoverStyle}>
|
2018-03-26 23:32:43 +02:00
|
|
|
<VideoPlayButton
|
|
|
|
play={play}
|
|
|
|
fileInfo={fileInfo}
|
2018-01-05 20:27:58 +01:00
|
|
|
uri={uri}
|
2018-03-26 23:32:43 +02:00
|
|
|
isLoading={isLoading}
|
|
|
|
mediaType={mediaType}
|
2017-12-19 19:20:53 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
2017-05-31 19:36:38 +02:00
|
|
|
</div>
|
2017-06-06 23:19:12 +02:00
|
|
|
);
|
2017-04-23 11:56:50 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2017-06-06 06:21:55 +02:00
|
|
|
export default Video;
|