IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: common: MediaViewer. stop playing invisible video/audio

Browse Source
This commit is contained in:
NikolayRechkin 2020-04-30 11:37:16 +03:00
parent 62fee1ecfe
commit f8218bf17f
2 changed files with 29 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/ASC.Web.Common/src/components/MediaViewer/MediaViewer.js
View File

@ -89,13 +89,13 @@ class MediaViewer extends React.Component {
componentDidUpdate(prevProps) {
if (this.props.visible !== prevProps.visible) {
this.setState(
{
visible: this.props.visible
}
);
this.setState(
{
visible: this.props.visible
}
);
}
}
}
mapSupplied = {
".aac": { supply: "m4a", type: audio },
".flac": { supply: "mp3", type: audio },
@ -186,7 +186,7 @@ class MediaViewer extends React.Component {
isImage = false;
isVideo = this.mapSupplied[ext] ? this.mapSupplied[ext].type == video : false;
}
return (
<StyledMediaViewer visible={this.state.visible}>
@ -196,7 +196,7 @@ class MediaViewer extends React.Component {
<div>
<div className="details">
<div className="title">{fileTitle}</div>
<ControlBtn onClick={this.props.onClose && (() => {this.props.onClose()})} className="mediaPlayerClose">
<ControlBtn onClick={this.props.onClose && (() => { this.props.onClose() })} className="mediaPlayerClose">
<Icons.CrossIcon size="medium" isfill={true} color="#fff" />
</ControlBtn>
</div>
@ -212,16 +212,16 @@ class MediaViewer extends React.Component {
]}
/>
:
<StyledVideoViewer url={url} isVideo={isVideo} />
<StyledVideoViewer url={url} playing ={this.state.visible} isVideo={isVideo} />
)
}
<div className="mediaViewerToolbox"></div>
<span>
<ControlBtn onClick={this.props.onDelete && (() => {this.props.onDelete(this.state.playlistPos)})}>
<ControlBtn onClick={this.props.onDelete && (() => { this.props.onDelete(this.state.playlistPos) })}>
<Icons.CatalogTrashIcon size="medium" isfill={true} color="#fff" />
</ControlBtn>
<ControlBtn onClick={this.props.onDownload && (() => {this.props.onDownload(this.state.playlistPos)})}>
<ControlBtn onClick={this.props.onDownload && (() => { this.props.onDownload(this.state.playlistPos) })}>
<Icons.DownloadIcon size="medium" isfill={true} color="#fff" />
</ControlBtn>
</span>

24
web/ASC.Web.Common/src/components/MediaViewer/sub-components/video-viewer.js
View File

@ -140,7 +140,7 @@ const StyledVideoViewer = styled.div`
`;
class ValumeBtn extends Component {
constructor(props) {
super(props);
}
@ -181,7 +181,7 @@ class VideoViewer extends Component {
state = {
url: this.props.url,
pip: false,
playing: true,
playing: this.props.playing,
controls: false,
light: false,
volume: 0.3,
@ -201,14 +201,25 @@ class VideoViewer extends Component {
pip: false
})
}
componentDidUpdate(prevProps) {
if (this.props.url !== prevProps.url) {
componentDidUpdate(prevProps, prevState) {
let newUrl = prevState.url;
let newPlaying = prevState.playing;
if (this.props.url !== prevProps.url || this.props.playing !== prevProps.playing) {
if (this.props.url !== prevProps.url) {
newUrl = this.props.url
}
if (this.props.playing !== prevProps.playing) {
newPlaying = this.props.playing
}
this.setState(
{
url: this.props.url
url: newUrl,
playing: newPlaying
}
);
}
}
handlePlayPause = () => {
this.setState({ playing: !this.state.playing })
@ -443,7 +454,8 @@ class VideoViewer extends Component {
VideoViewer.propTypes = {
isVideo: PropTypes.bool,
url: PropTypes.string
url: PropTypes.string,
playing: PropTypes.bool
}
export default VideoViewer;