89 lines
2.5 KiB
JavaScript
89 lines
2.5 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";
|
|
|
|
class Video extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = { isPlaying: false };
|
|
}
|
|
|
|
startPlaying() {
|
|
this.setState({
|
|
isPlaying: true,
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const {
|
|
metadata,
|
|
isLoading,
|
|
isDownloading,
|
|
fileInfo,
|
|
contentType,
|
|
} = this.props;
|
|
const { isPlaying = false } = this.state;
|
|
|
|
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0;
|
|
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... it may sit here for like 15-20 seconds in a really awkward way... we're working on it"
|
|
);
|
|
} else if (isDownloading) {
|
|
loadStatusMessage = __("Downloading stream... not long left now!");
|
|
}
|
|
|
|
let klassName = "";
|
|
if (isLoading || isDownloading) klassName += "video-embedded video";
|
|
if (mediaType === "video") {
|
|
klassName += "video-embedded video";
|
|
klassName += isPlaying ? " video--active" : " video--hidden";
|
|
} else if (mediaType === "application") {
|
|
klassName += "video-embedded";
|
|
} else {
|
|
if (!isPlaying) klassName += "video-embedded";
|
|
}
|
|
const poster = metadata.thumbnail;
|
|
|
|
return (
|
|
<div className={klassName}>
|
|
{isPlaying &&
|
|
(!isReadyToPlay
|
|
? <LoadingScreen status={loadStatusMessage} />
|
|
: <VideoPlayer
|
|
filename={fileInfo.file_name}
|
|
poster={poster}
|
|
downloadPath={fileInfo.download_path}
|
|
mediaType={mediaType}
|
|
poster={poster}
|
|
/>)}
|
|
{!isPlaying &&
|
|
<div
|
|
className="video__cover"
|
|
style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
|
|
>
|
|
<VideoPlayButton
|
|
startPlaying={this.startPlaying.bind(this)}
|
|
{...this.props}
|
|
mediaType={mediaType}
|
|
/>
|
|
</div>}
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default Video;
|