122 lines
3.4 KiB
JavaScript
122 lines
3.4 KiB
JavaScript
import React from 'react';
|
|
import lbry from 'lbry';
|
|
import VideoPlayer from './internal/player';
|
|
import VideoPlayButton from './internal/play-button';
|
|
import LoadingScreen from './internal/loading-screen';
|
|
import NsfwOverlay from 'component/nsfwOverlay';
|
|
|
|
class Video extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
showNsfwHelp: false,
|
|
};
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.props.cancelPlay();
|
|
}
|
|
|
|
isMediaSame(nextProps) {
|
|
return (
|
|
this.props.fileInfo &&
|
|
nextProps.fileInfo &&
|
|
this.props.fileInfo.outpoint === nextProps.fileInfo.outpoint
|
|
);
|
|
}
|
|
|
|
handleMouseOver() {
|
|
if (this.props.obscureNsfw && this.props.metadata && this.props.metadata.nsfw) {
|
|
this.setState({
|
|
showNsfwHelp: true,
|
|
});
|
|
}
|
|
}
|
|
|
|
handleMouseOut() {
|
|
if (this.state.showNsfwHelp) {
|
|
this.setState({
|
|
showNsfwHelp: false,
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
metadata,
|
|
isLoading,
|
|
isDownloading,
|
|
playingUri,
|
|
fileInfo,
|
|
contentType,
|
|
changeVolume,
|
|
volume,
|
|
uri,
|
|
videoPause,
|
|
setVideoPause,
|
|
} = this.props;
|
|
|
|
const isPlaying = playingUri === uri;
|
|
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
|
|
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
|
|
const mediaType = lbry.getMediaType(contentType, fileInfo && fileInfo.file_name);
|
|
|
|
let loadStatusMessage = '';
|
|
|
|
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."
|
|
);
|
|
} else if (isLoading) {
|
|
loadStatusMessage = __('Requesting stream...');
|
|
} else if (isDownloading) {
|
|
loadStatusMessage = __('Downloading stream... not long left now!');
|
|
}
|
|
|
|
const klasses = [];
|
|
klasses.push(obscureNsfw ? 'video--obscured ' : '');
|
|
if (isLoading || isDownloading) klasses.push('video-embedded', 'video');
|
|
if (mediaType === 'video') {
|
|
klasses.push('video-embedded', 'video');
|
|
klasses.push(isPlaying ? 'video--active' : 'video--hidden');
|
|
} else if (mediaType === 'application') {
|
|
klasses.push('video-embedded');
|
|
} else if (!isPlaying) klasses.push('video-embedded');
|
|
const poster = metadata.thumbnail;
|
|
|
|
return (
|
|
<div
|
|
className={klasses.join(' ')}
|
|
onMouseEnter={this.handleMouseOver.bind(this)}
|
|
onMouseLeave={this.handleMouseOut.bind(this)}
|
|
>
|
|
{isPlaying &&
|
|
(!isReadyToPlay ? (
|
|
<LoadingScreen status={loadStatusMessage} />
|
|
) : (
|
|
<VideoPlayer
|
|
filename={fileInfo.file_name}
|
|
poster={poster}
|
|
downloadPath={fileInfo.download_path}
|
|
mediaType={mediaType}
|
|
contentType={contentType}
|
|
downloadCompleted={fileInfo.completed}
|
|
changeVolume={changeVolume}
|
|
volume={volume}
|
|
videoPause={videoPause}
|
|
setVideoPause={setVideoPause}
|
|
/>
|
|
))}
|
|
{!isPlaying && (
|
|
<div className="video__cover" style={{ backgroundImage: `url("${metadata.thumbnail}")` }}>
|
|
<VideoPlayButton {...this.props} mediaType={mediaType} />
|
|
</div>
|
|
)}
|
|
{this.state.showNsfwHelp && <NsfwOverlay />}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Video;
|