{
- !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.controlsShown
- ?
- );
- }
-});
-
-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;
{
+ 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.loadStatusMessage} : + : + }
-
- : null}
-
-
-
-
-
-
- Back to LBRY
-
-