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

151 lines
4 KiB
React
Raw Normal View History

2017-04-23 11:56:50 +02:00
import React from 'react';
import FilePrice from 'component/filePrice'
import Link from 'component/link';
import Modal from 'component/modal';
2017-05-15 05:50:59 +02:00
class VideoPlayButton extends React.Component {
onPurchaseConfirmed() {
this.props.closeModal()
this.props.startPlaying()
2017-05-15 05:50:59 +02:00
this.props.loadVideo(this.props.uri)
}
onWatchClick() {
this.props.purchaseUri(this.props.uri).then(() => {
if (!this.props.modal) {
this.props.startPlaying()
}
})
}
render() {
const {
button,
label,
className,
metadata,
metadata: {
title,
},
uri,
modal,
closeModal,
isLoading,
costInfo,
fileInfo,
} = 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..." : ""
}
*/
return (<div>
<Link button={ button ? button : null }
2017-05-15 18:34:33 +02:00
disabled={isLoading || fileInfo === undefined || (fileInfo === null && (!costInfo || costInfo.cost === undefined))}
label={label ? label : ""}
className="video__play-button"
icon="icon-play"
onClick={this.onWatchClick.bind(this)} />
{modal}
<Modal contentLabel="Not enough credits" isOpen={modal == 'notEnoughCredits'} onConfirmed={() => { this.closeModal() }}>
You don't have enough LBRY credits to pay for this stream.
</Modal>
<Modal
type="confirm"
isOpen={modal == 'affirmPurchase'}
contentLabel="Confirm Purchase"
onConfirmed={this.onPurchaseConfirmed.bind(this)}
onAborted={closeModal}>
2017-05-15 18:34:33 +02:00
This will purchase <strong>{title}</strong> for <strong><FilePrice uri={uri} look="plain" /></strong> credits.
</Modal>
<Modal
isOpen={modal == 'timedOut'} onConfirmed={() => { this.closeModal() }} contentLabel="Timed Out">
Sorry, your download timed out :(
</Modal>
</div>);
}
}
2017-04-23 11:56:50 +02:00
const plyr = require('plyr')
class Video extends React.Component {
constructor(props) {
super(props)
2017-05-12 01:28:43 +02:00
this.state = { isPlaying: false }
2017-04-23 11:56:50 +02:00
}
startPlaying() {
this.setState({
isPlaying: true
})
}
render() {
const {
metadata,
isLoading,
isDownloading,
fileInfo,
} = this.props
const {
isPlaying = false,
} = this.state
2017-05-15 18:34:33 +02:00
const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0
2017-04-23 11:56:50 +02:00
let loadStatusMessage = ''
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!"
}
return (
<div className={"video " + this.props.className + (isPlaying ? " video--active" : " video--hidden")}>{
isPlaying || isLoading ?
2017-05-15 18:34:33 +02:00
(!isReadyToPlay ?
2017-05-15 05:50:59 +02:00
<span>this is the world's worst loading screen and we shipped our software with it anyway... <br /><br />{loadStatusMessage}</span> :
<VideoPlayer poster={metadata.thumbnail} autoplay={isPlaying} downloadPath={fileInfo.download_path} />) :
2017-04-23 11:56:50 +02:00
<div className="video__cover" style={{backgroundImage: 'url("' + metadata.thumbnail + '")'}}>
<VideoPlayButton startPlaying={this.startPlaying.bind(this)} {...this.props} />
2017-04-23 11:56:50 +02:00
</div>
}</div>
);
}
}
class VideoPlayer extends React.Component {
2017-04-23 11:56:50 +02:00
componentDidMount() {
const elem = this.refs.video
const {
autoplay,
2017-04-23 11:56:50 +02:00
downloadPath,
contentType,
} = this.props
const players = plyr.setup(elem)
if (autoplay) {
players[0].play()
}
2017-04-23 11:56:50 +02:00
}
render() {
const {
downloadPath,
contentType,
poster,
2017-04-23 11:56:50 +02:00
} = this.props
return (
<video controls id="video" ref="video" style={{backgroundImage: "url('" + poster + "')"}} >
<source src={downloadPath} type={contentType} />
2017-04-23 11:56:50 +02:00
</video>
)
}
}
export default Video