lbry-desktop/ui/js/component/video/view.jsx

90 lines
2.5 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
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";
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);
this.state = { isPlaying: false };
2017-04-23 11:56:50 +02:00
}
startPlaying() {
this.setState({
2017-06-06 23:19:12 +02:00
isPlaying: true,
});
2017-04-23 11:56:50 +02:00
}
render() {
const {
metadata,
isLoading,
isDownloading,
fileInfo,
contentType,
2017-06-06 23:19:12 +02:00
} = this.props;
const { isPlaying = false } = this.state;
2017-04-23 11:56:50 +02:00
2017-06-06 23:19:12 +02:00
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
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."
);
} else if (isLoading) {
2017-06-06 23:19:12 +02:00
loadStatusMessage = __(
"Requesting stream... it may sit here for like 15-20 seconds in a really awkward way... we're working on it"
);
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-06 23:19:12 +02:00
let klassName = "";
if (isLoading || isDownloading) klassName += "video-embedded video";
if (mediaType === "video") {
2017-06-06 23:19:12 +02:00
klassName += "video-embedded video";
klassName += isPlaying ? " video--active" : " video--hidden";
} else if (mediaType === "application") {
2017-06-06 23:19:12 +02:00
klassName += "video-embedded";
} else {
2017-06-06 23:19:12 +02:00
if (!isPlaying) klassName += "video-embedded";
}
2017-06-06 23:19:12 +02:00
const poster = metadata.thumbnail;
2017-04-23 11:56:50 +02:00
return (
2017-06-06 23:19:12 +02:00
<div className={klassName}>
{isPlaying &&
(!isReadyToPlay
? <LoadingScreen status={loadStatusMessage} />
2017-06-06 23:19:12 +02:00
: <VideoPlayer
filename={fileInfo.file_name}
poster={poster}
downloadPath={fileInfo.download_path}
mediaType={mediaType}
downloadCompleted={fileInfo.completed}
/>)}
{!isPlaying &&
<div
className="video__cover"
style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
>
<VideoPlayButton
startPlaying={this.startPlaying.bind(this)}
{...this.props}
mediaType={mediaType}
/>
</div>}
</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;