From 57a7d1db977ded1055bc4fda6613c7978db5f19b Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 6 Jun 2017 21:12:45 -0700 Subject: [PATCH 1/7] add internal video loading screen component --- .../video/internal/loading-screen.jsx | 12 +++++++ ui/js/component/video/view.jsx | 35 +++++++++---------- ui/scss/component/_video.scss | 23 ++++++++++-- 3 files changed, 49 insertions(+), 21 deletions(-) create mode 100644 ui/js/component/video/internal/loading-screen.jsx diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx new file mode 100644 index 000000000..e7974c986 --- /dev/null +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +const LoadingScreen = ({ statusMessage }) => +
+
+ +
+ {statusMessage} +
+
; + +export default LoadingScreen; diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index 574e1a402..95c306cb0 100644 --- a/ui/js/component/video/view.jsx +++ b/ui/js/component/video/view.jsx @@ -4,6 +4,7 @@ import Link from "component/link"; import Modal from "component/modal"; import lbry from "lbry"; import { Thumbnail } from "component/common"; +import LoadingScreen from "./internal/loading-screen"; class VideoPlayButton extends React.Component { onPurchaseConfirmed() { @@ -148,31 +149,27 @@ class Video extends React.Component { return (
- {isPlaying - ? !isReadyToPlay - ? - {__( - "this is the world's worst loading screen and we shipped our software with it anyway..." - )} - {" "}

{loadStatusMessage} - + {isPlaying && + (!isReadyToPlay + ? : - :
- -
} + />)} + {!isPlaying && +
+ +
}
); } diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 739dc1b26..752c394d1 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -13,7 +13,6 @@ video { color: white; } - .video-embedded { max-width: $width-page-constrained; max-height: $height-video-embedded; @@ -28,6 +27,26 @@ video { &.video--active { /*background: none;*/ } + + .video--loading--screen { + .loading--spinner { + width: 100px; + height: 100px; + background-color: white; + margin: auto; + + animation-name: spin; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + + @keyframes spin { + from { transform: rotate(0deg) } + to { transform: rotate(-360deg) } + } + } + } + .plyr { top: 50%; transform: translateY(-50%); @@ -61,4 +80,4 @@ video { opacity: 1; transition: opacity $transition-standard; } -} \ No newline at end of file +} From 7a467f3635126ff77132d34ae737122dabcd48c5 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 6 Jun 2017 22:36:12 -0700 Subject: [PATCH 2/7] move video-player and video-player-button into their own file --- .../video/internal/loading-screen.jsx | 2 +- .../component/video/internal/play-button.jsx | 93 +++++++++++++ ui/js/component/video/internal/player.jsx | 36 +++++ ui/js/component/video/view.jsx | 126 +----------------- ui/scss/component/_video.scss | 4 + 5 files changed, 136 insertions(+), 125 deletions(-) create mode 100644 ui/js/component/video/internal/play-button.jsx create mode 100644 ui/js/component/video/internal/player.jsx diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx index e7974c986..06dd7ff6b 100644 --- a/ui/js/component/video/internal/loading-screen.jsx +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -4,7 +4,7 @@ const LoadingScreen = ({ statusMessage }) =>
-
+
{statusMessage}
; diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx new file mode 100644 index 000000000..5eb98726f --- /dev/null +++ b/ui/js/component/video/internal/play-button.jsx @@ -0,0 +1,93 @@ +import React from "react"; +import FilePrice from "component/filePrice"; +import Link from "component/link"; +import Modal from "component/modal"; + +class VideoPlayButton extends React.Component { + onPurchaseConfirmed() { + this.props.closeModal(); + this.props.startPlaying(); + 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, + mediaType, + } = this.props; + + /* + title={ + isLoading ? "Video is Loading" : + !costInfo ? "Waiting on cost info..." : + fileInfo === undefined ? "Waiting on file info..." : "" + } + */ + + const disabled = + isLoading || + fileInfo === undefined || + (fileInfo === null && (!costInfo || costInfo.cost === undefined)); + const icon = ["audio", "video"].indexOf(mediaType) !== -1 + ? "icon-play" + : "icon-folder-o"; + + return ( +
+ + + {__("You don't have enough LBRY credits to pay for this stream.")} + + + {__("This will purchase")} {title} {__("for")} + {" "} + {" "}{__("credits")}. + + + {__("Sorry, your download timed out :(")} + +
+ ); + } +} + +export default VideoPlayButton; diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx new file mode 100644 index 000000000..f6416b5f9 --- /dev/null +++ b/ui/js/component/video/internal/player.jsx @@ -0,0 +1,36 @@ +import React from "react"; +import { Thumbnail } from "component/common"; +import player from "render-media"; +import fs from "fs"; +// const from = require("from2"); + +class VideoPlayer extends React.Component { + componentDidMount() { + const elem = this.refs.media; + const { downloadPath, filename } = this.props; + const file = { + name: filename, + createReadStream: opts => { + return fs.createReadStream(downloadPath, opts); + }, + }; + player.append(file, elem, { + autoplay: true, + controls: true, + }); + } + + render() { + const { downloadPath, mediaType, poster } = this.props; + + return ( +
+ {["audio", "application"].indexOf(mediaType) !== -1 && + } +
+
+ ); + } +} + +export default VideoPlayer; diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index 95c306cb0..ec2468dd9 100644 --- a/ui/js/component/video/view.jsx +++ b/ui/js/component/video/view.jsx @@ -1,98 +1,9 @@ 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"; +import VideoPlayer from "./internal/player"; +import VideoPlayButton from "./internal/play-button"; import LoadingScreen from "./internal/loading-screen"; -class VideoPlayButton extends React.Component { - onPurchaseConfirmed() { - this.props.closeModal(); - this.props.startPlaying(); - 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, - mediaType, - } = this.props; - - /* - title={ - isLoading ? "Video is Loading" : - !costInfo ? "Waiting on cost info..." : - fileInfo === undefined ? "Waiting on file info..." : "" - } - */ - - const disabled = - isLoading || - fileInfo === undefined || - (fileInfo === null && (!costInfo || costInfo.cost === undefined)); - const icon = ["audio", "video"].indexOf(mediaType) !== -1 - ? "icon-play" - : "icon-folder-o"; - - return ( -
- - - {__("You don't have enough LBRY credits to pay for this stream.")} - - - {__("This will purchase")} {title} {__("for")} - {" "} - {" "}{__("credits")}. - - - {__("Sorry, your download timed out :(")} - -
- ); - } -} - class Video extends React.Component { constructor(props) { super(props); @@ -175,37 +86,4 @@ class Video extends React.Component { } } -const from = require("from2"); -const player = require("render-media"); -const fs = require("fs"); - -class VideoPlayer extends React.Component { - componentDidMount() { - const elem = this.refs.media; - const { downloadPath, filename } = this.props; - const file = { - name: filename, - createReadStream: opts => { - return fs.createReadStream(downloadPath, opts); - }, - }; - player.append(file, elem, { - autoplay: true, - controls: true, - }); - } - - render() { - const { downloadPath, mediaType, poster } = this.props; - - return ( -
- {["audio", "application"].indexOf(mediaType) !== -1 && - } -
-
- ); - } -} - export default Video; diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 752c394d1..b854763fc 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -45,6 +45,10 @@ video { to { transform: rotate(-360deg) } } } + + .video--loading--status { + color: white; + } } .plyr { From 708efba0919f76b22be81996dbbe66300a136058 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 6 Jun 2017 22:42:01 -0700 Subject: [PATCH 3/7] fix prop name --- ui/js/component/video/internal/loading-screen.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx index 06dd7ff6b..a8dfacc37 100644 --- a/ui/js/component/video/internal/loading-screen.jsx +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -1,11 +1,11 @@ import React from "react"; -const LoadingScreen = ({ statusMessage }) => +const LoadingScreen = ({ status }) =>
- {statusMessage} + {status}
; From 46862a302e394266d4d783bb7e7492295a37f39a Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Tue, 6 Jun 2017 23:32:38 -0700 Subject: [PATCH 4/7] style loading spinner --- .../video/internal/loading-screen.jsx | 8 ++- ui/scss/component/_video.scss | 71 ++++++++++++++----- 2 files changed, 60 insertions(+), 19 deletions(-) diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx index a8dfacc37..e1824efd5 100644 --- a/ui/js/component/video/internal/loading-screen.jsx +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -2,10 +2,12 @@ import React from "react"; const LoadingScreen = ({ status }) =>
-
+
+
-
- {status} +
+ {status} +
; diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index b854763fc..3b480eb4d 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -29,25 +29,64 @@ video { } .video--loading--screen { - .loading--spinner { - width: 100px; - height: 100px; - background-color: white; - margin: auto; + height: 100%; + display: flex; + justify-content: center; + align-items: center; - animation-name: spin; - animation-duration: 1s; - animation-iteration-count: infinite; - animation-timing-function: linear; + .loading--screen--content { + .loading--spinner { + position: relative; + width: 11em; + height: 11em; + margin: 20px auto; + font-size: 3px; + border-radius: 50%; - @keyframes spin { - from { transform: rotate(0deg) } - to { transform: rotate(-360deg) } + background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%); + animation: spin 1.4s infinite linear; + transform: translateZ(0); + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + &:before, + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + } + + &:before { + width: 50%; + height: 50%; + background: #ffffff; + border-radius: 100% 0 0 0; + } + + &:after { + height: 75%; + width: 75%; + margin: auto; + bottom: 0; + right: 0; + background: black; + border-radius: 50%; + } + } + + + .video--loading--status { + padding-top: 20px; + color: white; } - } - - .video--loading--status { - color: white; } } From 0a7626fe4969e64de0276b8f7bcbdec8fab1e3b9 Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 7 Jun 2017 00:15:55 -0700 Subject: [PATCH 5/7] remove un-necessary comment --- ui/js/component/video/internal/player.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index f6416b5f9..7685c3112 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -2,7 +2,6 @@ import React from "react"; import { Thumbnail } from "component/common"; import player from "render-media"; import fs from "fs"; -// const from = require("from2"); class VideoPlayer extends React.Component { componentDidMount() { From 11fa00504df2d650e9c24cd851a8d3955e09e3bc Mon Sep 17 00:00:00 2001 From: Sean Yesmunt Date: Wed, 7 Jun 2017 09:06:14 -0700 Subject: [PATCH 6/7] switch to BEM naming pattern --- .../video/internal/loading-screen.jsx | 8 +- ui/scss/component/_video.scss | 122 +++++++++--------- 2 files changed, 64 insertions(+), 66 deletions(-) diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx index e1824efd5..591bc0f9f 100644 --- a/ui/js/component/video/internal/loading-screen.jsx +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -1,11 +1,11 @@ import React from "react"; const LoadingScreen = ({ status }) => -
-
-
+
+
+
-
+
{status}
diff --git a/ui/scss/component/_video.scss b/ui/scss/component/_video.scss index 3b480eb4d..b440c0f29 100644 --- a/ui/scss/component/_video.scss +++ b/ui/scss/component/_video.scss @@ -28,74 +28,72 @@ video { /*background: none;*/ } - .video--loading--screen { - height: 100%; - display: flex; - justify-content: center; - align-items: center; - - .loading--screen--content { - .loading--spinner { - position: relative; - width: 11em; - height: 11em; - margin: 20px auto; - font-size: 3px; - border-radius: 50%; - - background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%); - animation: spin 1.4s infinite linear; - transform: translateZ(0); - - @keyframes spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } - } - - &:before, - &:after { - content: ''; - position: absolute; - top: 0; - left: 0; - } - - &:before { - width: 50%; - height: 50%; - background: #ffffff; - border-radius: 100% 0 0 0; - } - - &:after { - height: 75%; - width: 75%; - margin: auto; - bottom: 0; - right: 0; - background: black; - border-radius: 50%; - } - } - - - .video--loading--status { - padding-top: 20px; - color: white; - } - } - } - .plyr { top: 50%; transform: translateY(-50%); } } + +.video--loading-screen { + height: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.video--loading-spinner { + position: relative; + width: 11em; + height: 11em; + margin: 20px auto; + font-size: 3px; + border-radius: 50%; + + background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 50%); + animation: spin 1.4s infinite linear; + transform: translateZ(0); + + @keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } + } + + &:before, + &:after { + content: ''; + position: absolute; + top: 0; + left: 0; + } + + &:before { + width: 50%; + height: 50%; + background: #ffffff; + border-radius: 100% 0 0 0; + } + + &:after { + height: 75%; + width: 75%; + margin: auto; + bottom: 0; + right: 0; + background: black; + border-radius: 50%; + } +} + +.video--loading-status { + padding-top: 20px; + color: white; +} + .video__cover { text-align: center; height: 100%; From f2cabfb07a6e8495ec2daf27233f254602c36ceb Mon Sep 17 00:00:00 2001 From: Jeremy Kauffman Date: Thu, 8 Jun 2017 19:16:38 -0400 Subject: [PATCH 7/7] minor correction --- ui/js/component/video/internal/loading-screen.jsx | 8 ++++---- ui/js/component/video/internal/play-button.jsx | 1 - ui/js/component/video/view.jsx | 1 - ui/scss/component/_video.scss | 7 ++++--- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/ui/js/component/video/internal/loading-screen.jsx b/ui/js/component/video/internal/loading-screen.jsx index 591bc0f9f..2698e824e 100644 --- a/ui/js/component/video/internal/loading-screen.jsx +++ b/ui/js/component/video/internal/loading-screen.jsx @@ -1,11 +1,11 @@ import React from "react"; const LoadingScreen = ({ status }) => -
-
-
+
+
+
-
+
{status}
diff --git a/ui/js/component/video/internal/play-button.jsx b/ui/js/component/video/internal/play-button.jsx index 5eb98726f..69834a599 100644 --- a/ui/js/component/video/internal/play-button.jsx +++ b/ui/js/component/video/internal/play-button.jsx @@ -22,7 +22,6 @@ class VideoPlayButton extends React.Component { const { button, label, - className, metadata, metadata: { title }, uri, diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index ec2468dd9..b9b4ec8e9 100644 --- a/ui/js/component/video/view.jsx +++ b/ui/js/component/video/view.jsx @@ -68,7 +68,6 @@ class Video extends React.Component { poster={poster} downloadPath={fileInfo.download_path} mediaType={mediaType} - poster={poster} />)} {!isPlaying &&