move video-player and video-player-button into their own file
This commit is contained in:
Sean Yesmunt
parent
57a7d1db97
commit
7a467f3635
5 changed files with 136 additions and 125 deletions
|
|
@ -4,7 +4,7 @@ const LoadingScreen = ({ statusMessage }) =>
|
|||
<div className="video--loading--screen">
|
||||
<div className="loading--spinner" />
|
||||
|
||||
<div>
|
||||
<div className="video--loading--status">
|
||||
{statusMessage}
|
||||
</div>
|
||||
</div>;
|
||||
|
|
|
|||
93
ui/js/component/video/internal/play-button.jsx
Normal file
93
ui/js/component/video/internal/play-button.jsx
Normal file
|
|
@ -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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VideoPlayButton;
|
||||
36
ui/js/component/video/internal/player.jsx
Normal file
36
ui/js/component/video/internal/player.jsx
Normal file
|
|
@ -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 (
|
||||
<div>
|
||||
{["audio", "application"].indexOf(mediaType) !== -1 &&
|
||||
<Thumbnail src={poster} className="video-embedded" />}
|
||||
<div ref="media" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default VideoPlayer;
|
||||
|
|
@ -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 (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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 (
|
||||
<div>
|
||||
{["audio", "application"].indexOf(mediaType) !== -1 &&
|
||||
<Thumbnail src={poster} className="video-embedded" />}
|
||||
<div ref="media" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Video;
|
||||
|
|
|
|||
|
|
@ -45,6 +45,10 @@ video {
|
|||
to { transform: rotate(-360deg) }
|
||||
}
|
||||
}
|
||||
|
||||
.video--loading--status {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr {
|
||||
|
|
|
|||
Loading…
Reference in a new issue