2017-06-06 23:19:12 +02:00
|
|
|
import React from "react";
|
|
|
|
import lbry from "lbry";
|
2017-06-07 07:36:12 +02:00
|
|
|
import VideoPlayer from "./internal/player";
|
|
|
|
import VideoPlayButton from "./internal/play-button";
|
2017-06-07 06:12:45 +02:00
|
|
|
import LoadingScreen from "./internal/loading-screen";
|
2017-06-26 16:00:24 +02:00
|
|
|
import NsfwOverlay from "component/nsfwOverlay";
|
2017-05-02 15:58:35 +02:00
|
|
|
|
2017-06-08 06:42:19 +02:00
|
|
|
class Video extends React.PureComponent {
|
2017-04-23 11:56:50 +02:00
|
|
|
constructor(props) {
|
2017-06-06 23:19:12 +02:00
|
|
|
super(props);
|
2017-06-26 16:00:24 +02:00
|
|
|
this.state = {
|
|
|
|
showNsfwHelp: false,
|
|
|
|
};
|
2017-04-23 11:56:50 +02:00
|
|
|
}
|
|
|
|
|
2017-09-18 04:13:05 +02:00
|
|
|
componentWillUnmount() {
|
|
|
|
this.props.cancelPlay();
|
|
|
|
}
|
|
|
|
|
2017-07-12 22:56:18 +02:00
|
|
|
isMediaSame(nextProps) {
|
|
|
|
return (
|
|
|
|
this.props.fileInfo &&
|
|
|
|
nextProps.fileInfo &&
|
|
|
|
this.props.fileInfo.outpoint === nextProps.fileInfo.outpoint
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-06-26 16:00:24 +02:00
|
|
|
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,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
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,
|
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;
|
2017-06-26 16:00:24 +02:00
|
|
|
const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw;
|
2017-06-06 23:19:12 +02:00
|
|
|
const mediaType = lbry.getMediaType(
|
|
|
|
contentType,
|
|
|
|
fileInfo && fileInfo.file_name
|
|
|
|
);
|
2017-05-15 18:34:33 +02:00
|
|
|
|
2017-06-06 23:19:12 +02: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-11-08 23:42:51 +01:00
|
|
|
loadStatusMessage = __("Requesting stream...");
|
2017-04-23 11:56:50 +02:00
|
|
|
} else if (isDownloading) {
|
2017-06-06 23:19:12 +02:00
|
|
|
loadStatusMessage = __("Downloading stream... not long left now!");
|
2017-04-23 11:56:50 +02:00
|
|
|
}
|
|
|
|
|
2017-06-23 18:17:07 +02:00
|
|
|
let klasses = [];
|
2017-06-26 16:00:24 +02:00
|
|
|
klasses.push(obscureNsfw ? "video--obscured " : "");
|
2017-06-23 18:17:07 +02:00
|
|
|
if (isLoading || isDownloading) klasses.push("video-embedded", "video");
|
2017-05-31 19:36:38 +02:00
|
|
|
if (mediaType === "video") {
|
2017-06-23 18:17:07 +02:00
|
|
|
klasses.push("video-embedded", "video");
|
|
|
|
klasses.push(isPlaying ? "video--active" : "video--hidden");
|
2017-06-02 19:54:11 +02:00
|
|
|
} else if (mediaType === "application") {
|
2017-06-23 18:17:07 +02:00
|
|
|
klasses.push("video-embedded");
|
2017-05-31 19:36:38 +02:00
|
|
|
} else {
|
2017-06-23 18:17:07 +02:00
|
|
|
if (!isPlaying) klasses.push("video-embedded");
|
2017-05-31 19:36:38 +02:00
|
|
|
}
|
2017-06-06 23:19:12 +02:00
|
|
|
const poster = metadata.thumbnail;
|
2017-05-31 19:36:38 +02:00
|
|
|
|
2017-04-23 11:56:50 +02:00
|
|
|
return (
|
2017-12-19 19:20:53 +01:00
|
|
|
<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}
|
2017-12-21 00:38:11 +01:00
|
|
|
doPlay={doPlay}
|
|
|
|
doPause={doPause}
|
2017-12-23 00:14:54 +01:00
|
|
|
savePosition={savePosition}
|
2017-12-29 17:07:03 +01:00
|
|
|
id={claim.claim_id}
|
2017-12-21 00:38:11 +01:00
|
|
|
paused={mediaPaused}
|
|
|
|
position={mediaPosition}
|
2017-12-19 19:20:53 +01:00
|
|
|
/>
|
|
|
|
))}
|
|
|
|
{!isPlaying && (
|
|
|
|
<div
|
|
|
|
className="video__cover"
|
|
|
|
style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
|
|
|
|
>
|
|
|
|
<VideoPlayButton {...this.props} mediaType={mediaType} />
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{this.state.showNsfwHelp && <NsfwOverlay />}
|
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;
|