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

215 lines
5.6 KiB
React
Raw Normal View History

2017-06-06 23:19:12 +02:00
import React from "react";
import FilePrice from "component/filePrice";
import Link from "component/link";
import Modal from "component/modal";
import lbry from "lbry";
import { Thumbnail } from "component/common";
2017-04-23 11:56:50 +02:00
2017-05-15 05:50:59 +02:00
class VideoPlayButton extends React.Component {
onPurchaseConfirmed() {
2017-06-06 23:19:12 +02:00
this.props.closeModal();
this.props.startPlaying();
this.props.loadVideo(this.props.uri);
}
onWatchClick() {
this.props.purchaseUri(this.props.uri).then(() => {
if (!this.props.modal) {
2017-06-06 23:19:12 +02:00
this.props.startPlaying();
}
2017-06-06 23:19:12 +02:00
});
}
render() {
const {
button,
label,
className,
metadata,
2017-06-06 23:19:12 +02:00
metadata: { title },
uri,
modal,
closeModal,
isLoading,
costInfo,
fileInfo,
mediaType,
2017-06-06 23:19:12 +02:00
} = this.props;
2017-05-15 05:50:59 +02:00
/*
title={
isLoading ? "Video is Loading" :
!costInfo ? "Waiting on cost info..." :
fileInfo === undefined ? "Waiting on file info..." : ""
}
*/
2017-06-06 23:19:12 +02:00
const disabled =
isLoading ||
fileInfo === undefined ||
(fileInfo === null && (!costInfo || costInfo.cost === undefined));
const icon = ["audio", "video"].indexOf(mediaType) !== -1
? "icon-play"
: "icon-folder-o";
return (
<div>
<Link
button={button ? button : null}
disabled={disabled}
label={label ? label : ""}
className="video__play-button"
icon={icon}
onClick={this.onWatchClick.bind(this)}
/>
<Modal
contentLabel={__("Not enough credits")}
isOpen={modal == "notEnoughCredits"}
onConfirmed={closeModal}
>
{__("You don't have enough LBRY credits to pay for this stream.")}
</Modal>
<Modal
type="confirm"
isOpen={modal == "affirmPurchaseAndPlay"}
contentLabel={__("Confirm Purchase")}
onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal}
>
{__("This will purchase")} <strong>{title}</strong> {__("for")}
{" "}<strong><FilePrice uri={uri} look="plain" /></strong>
{" "}{__("credits")}.
</Modal>
<Modal
isOpen={modal == "timedOut"}
onConfirmed={closeModal}
contentLabel={__("Timed Out")}
>
{__("Sorry, your download timed out :(")}
</Modal>
</div>
);
}
}
2017-04-23 11:56:50 +02:00
class Video extends React.Component {
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
? <span>
{__(
"this is the world's worst loading screen and we shipped our software with it anyway..."
)}
{" "}<br /><br />{loadStatusMessage}
</span>
: <VideoPlayer
filename={fileInfo.file_name}
poster={poster}
downloadPath={fileInfo.download_path}
mediaType={mediaType}
poster={poster}
/>
: <div
className="video__cover"
style={{ backgroundImage: 'url("' + metadata.thumbnail + '")' }}
>
<VideoPlayButton
startPlaying={this.startPlaying.bind(this)}
{...this.props}
mediaType={mediaType}
/>
</div>}
</div>
2017-04-23 11:56:50 +02:00
);
}
}
2017-06-06 23:19:12 +02:00
const from = require("from2");
const player = require("render-media");
const fs = require("fs");
2017-05-25 19:40:46 +02:00
class VideoPlayer extends React.Component {
2017-04-23 11:56:50 +02:00
componentDidMount() {
2017-06-06 23:19:12 +02:00
const elem = this.refs.media;
const { downloadPath, filename } = this.props;
2017-05-25 19:40:46 +02:00
const file = {
name: filename,
2017-06-06 23:19:12 +02:00
createReadStream: opts => {
return fs.createReadStream(downloadPath, opts);
},
};
player.append(file, elem, {
2017-05-25 19:40:46 +02:00
autoplay: true,
controls: true,
2017-06-06 23:19:12 +02:00
});
2017-04-23 11:56:50 +02:00
}
render() {
2017-06-06 23:19:12 +02:00
const { downloadPath, mediaType, poster } = this.props;
2017-04-23 11:56:50 +02:00
return (
<div>
2017-06-06 23:19:12 +02:00
{["audio", "application"].indexOf(mediaType) !== -1 &&
<Thumbnail src={poster} className="video-embedded" />}
<div ref="media" />
</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;