2020-10-16 12:38:04 +00:00
|
|
|
import React, { Component } from "react";
|
2020-04-30 07:35:02 +00:00
|
|
|
import PropTypes from "prop-types";
|
2021-02-20 14:54:12 +00:00
|
|
|
import styled from "styled-components";
|
2020-10-16 12:38:04 +00:00
|
|
|
import { findDOMNode } from "react-dom";
|
|
|
|
import screenfull from "screenfull";
|
|
|
|
import ReactPlayer from "react-player";
|
2021-02-20 14:54:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
import Duration from "./duration";
|
|
|
|
import Progress from "./progress";
|
2021-02-25 15:41:06 +00:00
|
|
|
import MediaPauseIcon from "../../../../../public/images/media.pause.react.svg";
|
|
|
|
import MediaPlayIcon from "../../../../../public/images/media.play.react.svg";
|
|
|
|
import MediaFullScreenIcon from "../../../../../public/images/media.fullscreen.react.svg";
|
|
|
|
import MediaMuteIcon from "../../../../../public/images/media.mute.react.svg";
|
|
|
|
import MediaMuteOffIcon from "../../../../../public/images/media.muteoff.react.svg";
|
2021-02-24 17:11:23 +00:00
|
|
|
import commonIconsStyles from "@appserver/components/utils/common-icons-style";
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-05-05 13:15:33 +00:00
|
|
|
const controlsHeight = 40;
|
2020-04-19 20:09:12 +00:00
|
|
|
const StyledControls = styled.div`
|
2020-10-16 12:38:04 +00:00
|
|
|
height: ${(props) => props.height}px;
|
|
|
|
display: block;
|
|
|
|
position: fixed;
|
|
|
|
z-index: 4001;
|
|
|
|
${(props) => !props.isVideo && "background-color: rgba(11,11,11,0.7);"}
|
|
|
|
top: calc(50% + ${(props) => props.top}px);
|
|
|
|
left: ${(props) => props.left}px;
|
2020-04-19 20:09:12 +00:00
|
|
|
`;
|
|
|
|
const StyledVideoControlBtn = styled.div`
|
2020-10-16 12:38:04 +00:00
|
|
|
display: inline-block;
|
|
|
|
height: 30px;
|
|
|
|
line-height: 30px;
|
|
|
|
margin: 5px;
|
|
|
|
width: 40px;
|
|
|
|
border-radius: 2px;
|
|
|
|
cursor: pointer;
|
|
|
|
text-align: center;
|
|
|
|
vertical-align: top;
|
|
|
|
&:hover {
|
|
|
|
background-color: rgba(200, 200, 200, 0.2);
|
|
|
|
}
|
2020-05-05 13:15:33 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
.playBtnContainer {
|
|
|
|
width: 23px;
|
|
|
|
line-height: 0;
|
|
|
|
margin: 3px auto;
|
|
|
|
}
|
|
|
|
.pauseBtnContainer {
|
|
|
|
display: block;
|
|
|
|
width: 19px;
|
|
|
|
margin: 3px 10px;
|
|
|
|
line-height: 19px;
|
|
|
|
}
|
|
|
|
.muteBtnContainer {
|
|
|
|
display: block;
|
|
|
|
width: 26px;
|
|
|
|
margin: 3px 7px;
|
|
|
|
line-height: 19px;
|
|
|
|
}
|
|
|
|
.fullscreenBtnContainer {
|
|
|
|
display: block;
|
|
|
|
width: 20px;
|
|
|
|
margin: 3px 10px;
|
|
|
|
line-height: 19px;
|
|
|
|
}
|
2020-04-19 20:09:12 +00:00
|
|
|
`;
|
2021-02-20 14:54:12 +00:00
|
|
|
const StyledMediaPauseIcon = styled(MediaPauseIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledMediaPlayIcon = styled(MediaPlayIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledMediaFullScreenIcon = styled(MediaFullScreenIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledMediaMuteIcon = styled(MediaMuteIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
|
|
|
const StyledMediaMuteOffIcon = styled(MediaMuteOffIcon)`
|
|
|
|
${commonIconsStyles}
|
|
|
|
`;
|
2020-10-16 12:38:04 +00:00
|
|
|
const VideoControlBtn = (props) => {
|
2020-04-30 08:20:30 +00:00
|
|
|
return (
|
2020-10-16 12:38:04 +00:00
|
|
|
<StyledVideoControlBtn {...props}>{props.children}</StyledVideoControlBtn>
|
2020-04-30 08:20:30 +00:00
|
|
|
);
|
2020-10-16 12:38:04 +00:00
|
|
|
};
|
2020-04-30 08:20:30 +00:00
|
|
|
VideoControlBtn.propTypes = {
|
2020-10-16 12:38:04 +00:00
|
|
|
children: PropTypes.any,
|
|
|
|
};
|
|
|
|
const Controls = (props) => {
|
|
|
|
return <StyledControls {...props}>{props.children}</StyledControls>;
|
|
|
|
};
|
2020-04-30 08:20:30 +00:00
|
|
|
Controls.propTypes = {
|
2020-10-16 12:38:04 +00:00
|
|
|
children: PropTypes.any,
|
|
|
|
};
|
|
|
|
const PlayBtn = (props) => {
|
2020-04-30 08:20:30 +00:00
|
|
|
return (
|
|
|
|
<VideoControlBtn onClick={props.onClick}>
|
2020-10-16 12:38:04 +00:00
|
|
|
{props.playing ? (
|
2020-05-05 13:15:33 +00:00
|
|
|
<div className="pauseBtnContainer">
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledMediaPauseIcon size="scale" />
|
2020-05-05 13:15:33 +00:00
|
|
|
</div>
|
2020-10-16 12:38:04 +00:00
|
|
|
) : (
|
2020-05-05 13:15:33 +00:00
|
|
|
<div className="playBtnContainer">
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledMediaPlayIcon size="scale" />
|
2020-05-05 13:15:33 +00:00
|
|
|
</div>
|
2020-10-16 12:38:04 +00:00
|
|
|
)}
|
2020-04-30 08:20:30 +00:00
|
|
|
</VideoControlBtn>
|
|
|
|
);
|
2020-10-16 12:38:04 +00:00
|
|
|
};
|
2020-04-30 08:20:30 +00:00
|
|
|
PlayBtn.propTypes = {
|
|
|
|
playing: PropTypes.bool,
|
2020-10-16 12:38:04 +00:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
};
|
|
|
|
const FullScreenBtn = (props) => {
|
2020-04-30 08:20:30 +00:00
|
|
|
return (
|
|
|
|
<VideoControlBtn onClick={props.onClick}>
|
2020-05-17 17:00:45 +00:00
|
|
|
<div className="fullscreenBtnContainer">
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledMediaFullScreenIcon size="scale" />
|
2020-05-05 13:15:33 +00:00
|
|
|
</div>
|
2020-04-30 08:20:30 +00:00
|
|
|
</VideoControlBtn>
|
|
|
|
);
|
2020-10-16 12:38:04 +00:00
|
|
|
};
|
2020-04-30 08:20:30 +00:00
|
|
|
FullScreenBtn.propTypes = {
|
2020-10-16 12:38:04 +00:00
|
|
|
onClick: PropTypes.func,
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
const StyledValumeContainer = styled.div`
|
2020-10-16 12:38:04 +00:00
|
|
|
display: inline-block;
|
|
|
|
vertical-align: top;
|
|
|
|
line-height: 39px;
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
.muteConteiner {
|
|
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
width: 40px;
|
|
|
|
height: 80px;
|
|
|
|
border-radius: 5px;
|
|
|
|
top: -76px;
|
|
|
|
left: 5px;
|
|
|
|
background: black;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
.muteConteiner {
|
2020-04-19 20:09:12 +00:00
|
|
|
display: inline-block;
|
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
}
|
|
|
|
.mute {
|
|
|
|
display: inline-block;
|
|
|
|
transform: rotate(-90deg);
|
|
|
|
margin: 22px -14px;
|
|
|
|
}
|
2020-04-19 20:09:12 +00:00
|
|
|
`;
|
2020-04-21 10:49:23 +00:00
|
|
|
const StyledDuration = styled.div`
|
2020-10-16 12:38:04 +00:00
|
|
|
display: inline-block;
|
|
|
|
height: 30px;
|
|
|
|
line-height: 30px;
|
|
|
|
margin: 5px;
|
|
|
|
width: 60px;
|
|
|
|
text-align: center;
|
|
|
|
vertical-align: top;
|
|
|
|
border-radius: 2px;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background-color: rgba(200, 200, 200, 0.2);
|
|
|
|
}
|
2020-04-21 10:49:23 +00:00
|
|
|
`;
|
2020-04-19 20:09:12 +00:00
|
|
|
const StyledVideoViewer = styled.div`
|
2020-10-16 12:38:04 +00:00
|
|
|
color: #d1d1d1;
|
|
|
|
|
|
|
|
.playerWrapper {
|
|
|
|
display: ${(props) => (props.isVideo ? "block" : "none")};
|
|
|
|
width: ${(props) => props.width}px;
|
|
|
|
height: ${(props) => props.height}px;
|
|
|
|
left: ${(props) => props.left}px;
|
|
|
|
top: calc(50% - ${(props) => props.top / 2}px);
|
|
|
|
z-index: 4001;
|
|
|
|
position: fixed;
|
|
|
|
padding-bottom: 40px;
|
|
|
|
background-color: rgba(11, 11, 11, 0.7);
|
2020-04-21 10:49:23 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
video {
|
|
|
|
z-index: 4000;
|
2020-04-20 06:32:27 +00:00
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
}
|
2020-04-19 20:09:12 +00:00
|
|
|
`;
|
|
|
|
|
2020-04-30 08:20:30 +00:00
|
|
|
class ValumeBtn extends Component {
|
2020-04-19 20:09:12 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
|
|
|
}
|
|
|
|
|
2020-04-30 08:20:30 +00:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<StyledValumeContainer>
|
|
|
|
<div className="muteConteiner">
|
|
|
|
<Progress
|
|
|
|
className="mute"
|
|
|
|
width={this.props.width}
|
|
|
|
value={this.props.volume}
|
|
|
|
onMouseDown={this.props.onMouseDown}
|
2020-05-09 18:11:54 +00:00
|
|
|
handleSeekChange={this.props.onChange}
|
2020-04-30 08:20:30 +00:00
|
|
|
onMouseUp={this.props.handleSeekMouseUp}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<VideoControlBtn onClick={this.props.onChangeMute}>
|
2020-05-17 17:00:45 +00:00
|
|
|
<div className="muteBtnContainer">
|
2020-10-16 12:38:04 +00:00
|
|
|
{this.props.muted ? (
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledMediaMuteOffIcon size="scale" />
|
2020-10-16 12:38:04 +00:00
|
|
|
) : (
|
2021-02-20 14:54:12 +00:00
|
|
|
<StyledMediaMuteIcon size="scale" />
|
2020-10-16 12:38:04 +00:00
|
|
|
)}
|
2020-05-05 13:15:33 +00:00
|
|
|
</div>
|
2020-04-30 08:20:30 +00:00
|
|
|
</VideoControlBtn>
|
|
|
|
</StyledValumeContainer>
|
|
|
|
);
|
2020-04-19 20:09:12 +00:00
|
|
|
}
|
|
|
|
}
|
2020-04-30 08:20:30 +00:00
|
|
|
ValumeBtn.propTypes = {
|
|
|
|
width: PropTypes.number,
|
|
|
|
volume: PropTypes.number,
|
|
|
|
muted: PropTypes.bool,
|
|
|
|
onMouseDown: PropTypes.func,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
handleSeekMouseUp: PropTypes.func,
|
2020-10-16 12:38:04 +00:00
|
|
|
onChangeMute: PropTypes.func,
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
class VideoViewer extends Component {
|
|
|
|
state = {
|
2020-04-23 21:44:47 +00:00
|
|
|
url: this.props.url,
|
2020-04-19 20:09:12 +00:00
|
|
|
pip: false,
|
2020-04-30 08:37:16 +00:00
|
|
|
playing: this.props.playing,
|
2020-04-19 20:09:12 +00:00
|
|
|
controls: false,
|
|
|
|
light: false,
|
2020-04-25 18:03:13 +00:00
|
|
|
volume: 0.3,
|
2020-04-19 20:09:12 +00:00
|
|
|
muted: false,
|
|
|
|
played: 0,
|
|
|
|
loaded: 0,
|
|
|
|
duration: 0,
|
|
|
|
playbackRate: 1.0,
|
2020-10-16 12:38:04 +00:00
|
|
|
loop: false,
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-04-30 08:37:16 +00:00
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
|
|
let newUrl = prevState.url;
|
|
|
|
let newPlaying = prevState.playing;
|
2020-10-16 12:38:04 +00:00
|
|
|
if (
|
|
|
|
this.props.url !== prevProps.url ||
|
|
|
|
this.props.playing !== prevProps.playing
|
|
|
|
) {
|
2020-04-30 08:37:16 +00:00
|
|
|
if (this.props.url !== prevProps.url) {
|
2020-10-16 12:38:04 +00:00
|
|
|
newUrl = this.props.url;
|
2020-04-30 08:37:16 +00:00
|
|
|
}
|
|
|
|
if (this.props.playing !== prevProps.playing) {
|
2020-10-16 12:38:04 +00:00
|
|
|
newPlaying = this.props.playing;
|
2020-04-30 08:37:16 +00:00
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({
|
|
|
|
url: newUrl,
|
|
|
|
playing: newPlaying,
|
|
|
|
});
|
2020-04-24 12:28:17 +00:00
|
|
|
}
|
|
|
|
}
|
2020-05-05 13:15:33 +00:00
|
|
|
|
2020-04-19 20:09:12 +00:00
|
|
|
handlePlayPause = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ playing: !this.state.playing });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleStop = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ url: null, playing: false });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
handleVolumeChange = (e) => {
|
2020-04-30 08:20:30 +00:00
|
|
|
this.setState({
|
2020-04-19 20:09:12 +00:00
|
|
|
volume: parseFloat(e.target.value),
|
2020-10-16 12:38:04 +00:00
|
|
|
muted: false,
|
|
|
|
});
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleToggleMuted = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ muted: !this.state.muted });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handlePlay = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ playing: true });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleEnablePIP = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ pip: true });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleDisablePIP = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ pip: false });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handlePause = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ playing: false });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
handleSeekMouseDown = (e) => {
|
|
|
|
this.setState({ seeking: true });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
handleSeekChange = (e) => {
|
|
|
|
this.setState({ played: parseFloat(e.target.value) });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
handleSeekMouseUp = (e) => {
|
|
|
|
console.log(!isNaN(parseFloat(e.target.value)), parseFloat(e.target.value));
|
2020-05-17 17:00:45 +00:00
|
|
|
if (!isNaN(parseFloat(e.target.value))) {
|
2020-05-13 07:18:28 +00:00
|
|
|
this.setState({ seeking: false });
|
|
|
|
this.player.seekTo(parseFloat(e.target.value));
|
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
handleProgress = (state) => {
|
2020-04-19 20:09:12 +00:00
|
|
|
if (!this.state.seeking) {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState(state);
|
2020-04-19 20:09:12 +00:00
|
|
|
}
|
2020-10-16 12:38:04 +00:00
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleEnded = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ playing: this.state.loop });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleDuration = (duration) => {
|
2020-10-16 12:38:04 +00:00
|
|
|
this.setState({ duration });
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
|
|
|
handleClickFullscreen = () => {
|
2020-10-16 12:38:04 +00:00
|
|
|
screenfull.request(findDOMNode(this.player));
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
ref = (player) => {
|
|
|
|
this.player = player;
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-04-25 16:49:00 +00:00
|
|
|
resizePlayer = (videoSize, screenSize) => {
|
|
|
|
var ratio = videoSize.h / videoSize.w;
|
2020-04-30 08:20:30 +00:00
|
|
|
|
2020-04-25 16:49:00 +00:00
|
|
|
if (videoSize.h > screenSize.h) {
|
2020-04-30 08:20:30 +00:00
|
|
|
videoSize.h = screenSize.h;
|
|
|
|
videoSize.w = videoSize.h / ratio;
|
2020-04-25 16:49:00 +00:00
|
|
|
}
|
|
|
|
if (videoSize.w > screenSize.w) {
|
2020-04-30 08:20:30 +00:00
|
|
|
videoSize.w = screenSize.w;
|
|
|
|
videoSize.h = videoSize.w * ratio;
|
2020-04-25 16:49:00 +00:00
|
|
|
}
|
2020-04-30 08:20:30 +00:00
|
|
|
|
2020-04-25 16:49:00 +00:00
|
|
|
return {
|
2020-04-30 08:20:30 +00:00
|
|
|
width: videoSize.w,
|
2020-10-16 12:38:04 +00:00
|
|
|
height: videoSize.h,
|
2020-04-25 16:49:00 +00:00
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2020-05-20 10:40:41 +00:00
|
|
|
onError = (e) => {
|
2020-10-16 12:38:04 +00:00
|
|
|
console.log("onError", e);
|
|
|
|
};
|
2020-05-20 10:40:41 +00:00
|
|
|
|
2020-04-30 08:20:30 +00:00
|
|
|
render() {
|
2020-10-16 12:38:04 +00:00
|
|
|
const {
|
|
|
|
url,
|
|
|
|
playing,
|
|
|
|
controls,
|
|
|
|
light,
|
|
|
|
volume,
|
|
|
|
muted,
|
|
|
|
loop,
|
|
|
|
played,
|
|
|
|
loaded,
|
|
|
|
duration,
|
|
|
|
playbackRate,
|
|
|
|
pip,
|
|
|
|
} = this.state;
|
2020-05-05 13:15:33 +00:00
|
|
|
const parentOffset = this.props.getOffset() || 0;
|
2020-04-24 12:28:17 +00:00
|
|
|
var screenSize = {
|
2020-04-30 08:20:30 +00:00
|
|
|
w: window.innerWidth,
|
2020-10-16 12:38:04 +00:00
|
|
|
h: window.innerHeight,
|
2020-04-24 12:28:17 +00:00
|
|
|
};
|
2020-05-05 13:15:33 +00:00
|
|
|
screenSize.h -= parentOffset + controlsHeight;
|
2020-04-24 12:28:17 +00:00
|
|
|
|
2020-04-30 08:20:30 +00:00
|
|
|
let width = screenSize.w;
|
|
|
|
let height = screenSize.h;
|
2020-04-24 12:28:17 +00:00
|
|
|
|
2020-05-20 10:40:41 +00:00
|
|
|
let centerAreaOx = screenSize.w / 2 + document.documentElement.scrollLeft;
|
|
|
|
let centerAreaOy = screenSize.h / 2 + document.documentElement.scrollTop;
|
2020-04-24 12:28:17 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
let videoElement = document.getElementsByTagName("video")[0];
|
2020-05-20 10:40:41 +00:00
|
|
|
if (videoElement) {
|
2020-10-16 12:38:04 +00:00
|
|
|
width = this.props.isVideo
|
|
|
|
? videoElement.videoWidth || 480
|
|
|
|
: screenSize.w - 150;
|
2020-05-20 10:40:41 +00:00
|
|
|
height = this.props.isVideo ? videoElement.videoHeight || 270 : 0;
|
2020-05-05 13:15:33 +00:00
|
|
|
|
2020-04-25 16:49:00 +00:00
|
|
|
let resize = this.resizePlayer(
|
|
|
|
{
|
|
|
|
w: width,
|
2020-10-16 12:38:04 +00:00
|
|
|
h: height,
|
2020-04-25 16:49:00 +00:00
|
|
|
},
|
|
|
|
screenSize
|
2020-10-16 12:38:04 +00:00
|
|
|
);
|
2020-04-25 16:49:00 +00:00
|
|
|
width = resize.width;
|
|
|
|
height = resize.height;
|
2020-04-24 12:28:17 +00:00
|
|
|
}
|
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
let left = this.props.isVideo
|
|
|
|
? centerAreaOx - width / 2
|
|
|
|
: centerAreaOx - width / 2;
|
2020-04-24 12:28:17 +00:00
|
|
|
|
2020-05-17 17:00:45 +00:00
|
|
|
const videoControlBtnWidth = 220;
|
|
|
|
const audioControlBtnWidth = 170;
|
2020-10-16 12:38:04 +00:00
|
|
|
let progressWidth = this.props.isVideo
|
|
|
|
? width - videoControlBtnWidth
|
|
|
|
: width - audioControlBtnWidth;
|
2020-05-17 17:00:45 +00:00
|
|
|
|
2020-04-19 20:09:12 +00:00
|
|
|
return (
|
2020-04-30 08:20:30 +00:00
|
|
|
<StyledVideoViewer
|
|
|
|
isVideo={this.props.isVideo}
|
|
|
|
width={width}
|
|
|
|
height={height}
|
|
|
|
left={left}
|
2020-05-17 17:00:45 +00:00
|
|
|
top={height + controlsHeight}
|
2020-04-30 08:20:30 +00:00
|
|
|
>
|
|
|
|
<div>
|
2020-10-16 12:38:04 +00:00
|
|
|
<div className="playerWrapper">
|
2020-04-30 08:20:30 +00:00
|
|
|
<ReactPlayer
|
|
|
|
ref={this.ref}
|
2020-10-16 12:38:04 +00:00
|
|
|
className="react-player"
|
|
|
|
width="100%"
|
|
|
|
height="100%"
|
2020-04-30 08:20:30 +00:00
|
|
|
url={url}
|
|
|
|
pip={pip}
|
|
|
|
playing={playing}
|
|
|
|
controls={controls}
|
|
|
|
light={light}
|
|
|
|
loop={loop}
|
|
|
|
playbackRate={playbackRate}
|
|
|
|
volume={volume}
|
|
|
|
muted={muted}
|
|
|
|
onPlay={this.handlePlay}
|
|
|
|
onEnablePIP={this.handleEnablePIP}
|
|
|
|
onDisablePIP={this.handleDisablePIP}
|
|
|
|
onPause={this.handlePause}
|
|
|
|
onEnded={this.handleEnded}
|
2020-05-20 10:40:41 +00:00
|
|
|
onError={this.onError}
|
2020-04-30 08:20:30 +00:00
|
|
|
onProgress={this.handleProgress}
|
|
|
|
onDuration={this.handleDuration}
|
|
|
|
/>
|
2020-04-19 20:09:12 +00:00
|
|
|
</div>
|
2020-04-30 08:20:30 +00:00
|
|
|
<Controls
|
2020-05-05 13:15:33 +00:00
|
|
|
height={controlsHeight}
|
2020-04-30 08:20:30 +00:00
|
|
|
left={left}
|
2020-05-17 17:00:45 +00:00
|
|
|
top={height / 2 - controlsHeight / 2}
|
2020-04-30 08:20:30 +00:00
|
|
|
isVideo={this.props.isVideo}
|
|
|
|
>
|
|
|
|
<PlayBtn onClick={this.handlePlayPause} playing={playing} />
|
|
|
|
<Progress
|
|
|
|
value={played}
|
2020-05-12 14:05:22 +00:00
|
|
|
width={progressWidth}
|
2020-04-30 08:20:30 +00:00
|
|
|
onMouseDown={this.handleSeekMouseDown}
|
2020-05-05 13:15:33 +00:00
|
|
|
handleSeekChange={this.handleSeekChange}
|
2020-04-30 08:20:30 +00:00
|
|
|
onMouseUp={this.handleSeekMouseUp}
|
2020-05-13 08:01:55 +00:00
|
|
|
onTouchEnd={this.handleSeekMouseUp}
|
2020-04-30 08:20:30 +00:00
|
|
|
/>
|
2020-10-16 12:38:04 +00:00
|
|
|
<StyledDuration>
|
|
|
|
-<Duration seconds={duration * (1 - played)} />
|
|
|
|
</StyledDuration>
|
2020-04-30 08:20:30 +00:00
|
|
|
<ValumeBtn
|
|
|
|
width={64}
|
|
|
|
muted={muted}
|
|
|
|
volume={muted ? 0 : volume}
|
|
|
|
onChangeMute={this.handleToggleMuted}
|
|
|
|
onChange={this.handleVolumeChange}
|
|
|
|
/>
|
2020-10-16 12:38:04 +00:00
|
|
|
{this.props.isVideo && (
|
|
|
|
<FullScreenBtn onClick={this.handleClickFullscreen} />
|
|
|
|
)}
|
2020-04-30 08:20:30 +00:00
|
|
|
</Controls>
|
|
|
|
</div>
|
|
|
|
</StyledVideoViewer>
|
2020-10-16 12:38:04 +00:00
|
|
|
);
|
2020-04-19 20:09:12 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2020-04-30 07:35:02 +00:00
|
|
|
VideoViewer.propTypes = {
|
|
|
|
isVideo: PropTypes.bool,
|
2020-04-30 08:37:16 +00:00
|
|
|
url: PropTypes.string,
|
2020-05-05 13:15:33 +00:00
|
|
|
playing: PropTypes.bool,
|
2020-10-16 12:38:04 +00:00
|
|
|
getOffset: PropTypes.func,
|
|
|
|
};
|
2020-04-19 20:09:12 +00:00
|
|
|
|
2020-10-16 12:38:04 +00:00
|
|
|
export default VideoViewer;
|