From 280f98902cb4ca2ee8efcd6030562de6f095bd7f Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Thu, 13 Apr 2017 18:32:03 -0400 Subject: [PATCH] closer to real watch --- ui/js/app.js | 2 - ui/js/component/file-actions.js | 56 ----------- ui/js/main.js | 1 + ui/js/page/publish.js | 4 +- ui/js/page/show.js | 7 +- ui/js/page/watch.js | 162 ++++++++------------------------ ui/scss/component/_video.scss | 53 ++++++++++- ui/scss/page/_show.scss | 3 + ui/scss/page/_watch.scss | 3 - 9 files changed, 93 insertions(+), 198 deletions(-) diff --git a/ui/js/app.js b/ui/js/app.js index c8f585fb7..9cfb43137 100644 --- a/ui/js/app.js +++ b/ui/js/app.js @@ -256,8 +256,6 @@ var App = React.createClass({ return ; case 'help': return ; - case 'watch': - return ; case 'report': return ; case 'downloaded': diff --git a/ui/js/component/file-actions.js b/ui/js/component/file-actions.js index 9b81fa28c..1c4c1650a 100644 --- a/ui/js/component/file-actions.js +++ b/ui/js/component/file-actions.js @@ -9,59 +9,6 @@ import {DropDownMenu, DropDownMenuItem} from './menu.js'; const {shell} = require('electron'); -let WatchLink = React.createClass({ - propTypes: { - uri: React.PropTypes.string, - downloadStarted: React.PropTypes.bool, - }, - startVideo: function() { - window.location = '?watch=' + this.props.uri; - }, - handleClick: function() { - this.setState({ - loading: true, - }); - - if (this.props.downloadStarted) { - this.startVideo(); - } else { - lbry.getCostInfo(this.props.uri).then(({cost}) => { - lbry.getBalance((balance) => { - if (cost > balance) { - this.setState({ - modal: 'notEnoughCredits', - loading: false, - }); - } else { - this.startVideo(); - } - }); - }); - } - }, - getInitialState: function() { - return { - modal: null, - loading: false, - }; - }, - closeModal: function() { - this.setState({ - modal: null, - }); - }, - render: function() { - return ( -
- - - You don't have enough LBRY credits to pay for this stream. - -
- ); - } -}); - let FileActionsRow = React.createClass({ _isMounted: false, _fileInfoSubscribeId: null, @@ -213,9 +160,6 @@ let FileActionsRow = React.createClass({ return (
- {this.props.contentType && this.props.contentType.startsWith('video/') - ? - : null} {this.state.fileInfo !== null || this.state.fileInfo.isMine ? linkBlock : null} diff --git a/ui/js/main.js b/ui/js/main.js index 9d11107d0..d31b4c7d5 100644 --- a/ui/js/main.js +++ b/ui/js/main.js @@ -30,6 +30,7 @@ let init = function() { function onDaemonReady() { window.sessionStorage.setItem('loaded', 'y'); //once we've made it here once per session, we don't need to show splash again + // ReactDOM.render(
, canvas) } diff --git a/ui/js/page/publish.js b/ui/js/page/publish.js index 9267550c9..90dbe4504 100644 --- a/ui/js/page/publish.js +++ b/ui/js/page/publish.js @@ -19,7 +19,7 @@ var PublishPage = React.createClass({ return; } else { - // rewards.claimReward(rewards.TYPE_FIRST_PUBLISH) + rewards.claimReward(rewards.TYPE_FIRST_PUBLISH) } }); }, @@ -27,7 +27,7 @@ var PublishPage = React.createClass({ // Calls API to update displayed list of channels. If a channel name is provided, will select // that channel at the same time (used immediately after creating a channel) lbry.channel_list_mine().then((channels) => { - // rewards.claimReward(rewards.TYPE_FIRST_CHANNEL) + rewards.claimReward(rewards.TYPE_FIRST_CHANNEL) this.setState({ channels: channels, ... channel ? {channel} : {} diff --git a/ui/js/page/show.js b/ui/js/page/show.js index f3b361976..c22dfdeee 100644 --- a/ui/js/page/show.js +++ b/ui/js/page/show.js @@ -62,7 +62,6 @@ let ShowPage = React.createClass({ document.title = this._uri; lbry.resolve({uri: this._uri}).then(({ claim: {txid, nout, has_signature, signature_is_valid, value: {stream: {metadata, source: {contentType}}}}}) => { - console.log({txid, nout, claim: {value: {stream: {metadata, source: {contentType}}}}} ); this.setState({ outpoint: txid + ':' + nout, metadata: metadata, @@ -86,17 +85,15 @@ let ShowPage = React.createClass({ } //
- const metadata = this.state.uriLookupComplete ? this.state.metadata : null, title = this.state.uriLookupComplete ? metadata.title : this._uri; - console.log(metadata); return (
- { this.props.contentType && this.props.contentType.startsWith('video/') ? -
diff --git a/ui/js/page/watch.js b/ui/js/page/watch.js index 45341ded1..bd80c30b2 100644 --- a/ui/js/page/watch.js +++ b/ui/js/page/watch.js @@ -1,5 +1,5 @@ import React from 'react'; -import {Icon} from '../component/common.js'; +import {Icon, Thumbnail} from '../component/common.js'; import {Link} from '../component/link.js'; import lbry from '../lbry.js'; import LoadScreen from '../component/load_screen.js' @@ -20,16 +20,41 @@ export let Video = React.createClass({ return { downloadStarted: false, readyToPlay: false, - loadStatusMessage: "Requesting stream", + isPlaying: false, + isPurchased: false, + loadStatusMessage: "Requesting stream... it may sit here for like 15-20 seconds in a really awkward way... we're working on it", mimeType: null, controlsShown: false, }; }, - componentDidMount: function() { + start: function() { + // lbry.getCostInfo(this.props.uri).then(({cost}) => { + // lbry.getBalance((balance) => { + // if (cost > balance) { + // this.setState({ + // modal: 'notEnoughCredits', + // loading: false, + // }); + // } else { + // this.startVideo(); + // } + // }); + // // }); + // + // You don't have enough LBRY credits to pay for this stream. + // lbry.get({uri: this.props.uri}).then((fileInfo) => { this._outpoint = fileInfo.outpoint; this.updateLoadStatus(); }); + this.setState({ + isPlaying: true + }) + }, + componentDidMount: function() { + if (this.props.autoplay) { + this.start() + } }, handleMouseMove: function() { if (this._controlsTimeout) { @@ -81,7 +106,6 @@ export let Video = React.createClass({ readyToPlay: true, mimeType: status.mime_type, }) - return const mediaFile = { createReadStream: function (opts) { // Return a readable stream that provides the bytes @@ -98,128 +122,16 @@ export let Video = React.createClass({ }, render: function() { return ( -
{ - !this.state.readyToPlay || true ? - this is the world's world loading message and we shipped our software with it anyway... seriously it is actually loading... it might take a while though : - +
{ + this.state.isPlaying ? + !this.state.readyToPlay ? + this is the world's world loading screen and we shipped our software with it anyway...

{this.state.loadStatusMessage} : + : +
+ + +
}
); } }) - -var WatchPage = React.createClass({ - _isMounted: false, - _controlsHideDelay: 3000, // Note: this needs to be shorter than the built-in delay in Electron, or Electron will hide the controls before us - _controlsHideTimeout: null, - _outpoint: null, - - propTypes: { - uri: React.PropTypes.string, - }, - getInitialState: function() { - return { - downloadStarted: false, - readyToPlay: false, - loadStatusMessage: "Requesting stream", - mimeType: null, - controlsShown: false, - }; - }, - componentDidMount: function() { - lbry.get({uri: this.props.uri}).then((fileInfo) => { - this._outpoint = fileInfo.outpoint; - this.updateLoadStatus(); - }); - }, - handleBackClicked: function() { - history.back(); - }, - handleMouseMove: function() { - if (this._controlsTimeout) { - clearTimeout(this._controlsTimeout); - } - - if (!this.state.controlsShown) { - this.setState({ - controlsShown: true, - }); - } - this._controlsTimeout = setTimeout(() => { - if (!this.isMounted) { - return; - } - - this.setState({ - controlsShown: false, - }); - }, this._controlsHideDelay); - }, - handleMouseLeave: function() { - if (this._controlsTimeout) { - clearTimeout(this._controlsTimeout); - } - - if (this.state.controlsShown) { - this.setState({ - controlsShown: false, - }); - } - }, - updateLoadStatus: function() { - lbry.file_list({ - outpoint: this._outpoint, - full_status: true, - }).then(([status]) => { - if (!status || status.written_bytes == 0) { - // Download hasn't started yet, so update status message (if available) then try again - // TODO: Would be nice to check if we have the MOOV before starting playing - if (status) { - this.setState({ - loadStatusMessage: status.message - }); - } - setTimeout(() => { this.updateLoadStatus() }, 250); - } else { - this.setState({ - readyToPlay: true, - mimeType: status.mime_type, - }) - const mediaFile = { - createReadStream: function (opts) { - // Return a readable stream that provides the bytes - // between offsets "start" and "end" inclusive - console.log('Stream between ' + opts.start + ' and ' + opts.end + '.'); - return fs.createReadStream(status.download_path, opts) - } - }; - var elem = this.refs.video; - var videostream = VideoStream(mediaFile, elem); - elem.play(); - } - }); - }, - render: function() { - return ( - !this.state.readyToPlay - ? - :
- - {this.state.controlsShown - ?
-
- -
- -
- Back to LBRY -
-
-
-
- : null} -
- ); - } -}); - -export default WatchPage; diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index c6800088c..6ee8efe7e 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -1,12 +1,55 @@ video { - border: 1px solid red; - object-fill: contain; + object-fit: contain; + box-sizing: border-box; + max-height: 100%; + max-width: 100%; } +.video { + background: #000; + color: white; +} + + .video-embedded { - max-width: 100%; - height: 0; - padding-bottom: 63%; + $height-embedded: $width-page-constrained * 9 / 16; + max-width: $width-page-constrained; + max-height: $height-embedded; video { + height: 100%; } + &.video--hidden { + height: $height-embedded; + } + &.video--active { + background: none; + } +} + +.video__cover { + text-align: center; + height: 100%; + width: 100%; + img { + max-width: 100%; + max-height: 100%; + vertical-align: middle; + } + position: relative; + &:hover { + .video__play-button { @include absolute-center(); } + } +} +.video__play-button { + position: absolute; + width: 100%; + height: 100%; + cursor: pointer; + display: none; + font-size: $spacing-vertical * 3; + color: white; + z-index: 1; + background: $color-black-transparent; + left: 0; + top: 0; } \ No newline at end of file diff --git a/ui/scss/page/_show.scss b/ui/scss/page/_show.scss index c0434ee24..48b82d065 100644 --- a/ui/scss/page/_show.scss +++ b/ui/scss/page/_show.scss @@ -3,4 +3,7 @@ .show-page-media { text-align: center; margin-bottom: $spacing-vertical; + img { + max-width: 100%; + } } \ No newline at end of file diff --git a/ui/scss/page/_watch.scss b/ui/scss/page/_watch.scss index 23fbcc171..59a614d31 100644 --- a/ui/scss/page/_watch.scss +++ b/ui/scss/page/_watch.scss @@ -1,6 +1,3 @@ -.video { - background: #000; -} .video__overlay { position: absolute;