diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index df2516224..243c3cda0 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -39,8 +39,8 @@ const select = (state, props) => ({ autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), searchBarFocused: selectSearchBarFocused(state), showOverlay: selectShowOverlay(state), - overlayed: props.overlayed, hiddenControls: props.hiddenControls, + fromOverlay: props.fromOverlay, }); const perform = dispatch => ({ diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 8fcf52301..129ab8023 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -47,7 +47,6 @@ class VideoPlayer extends React.PureComponent { const ended = () => { this.props.doPause(); this.props.savePosition(claim.claim_id, 0); - if (this.props.overlayed) this.props.doHideOverlay(); }; // use renderAudio override for mp3 diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 763ec313b..ddbe8f2f6 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -43,8 +43,10 @@ type Props = { play: string => void, searchBarFocused: boolean, showOverlay: boolean, - overlayed: boolean, hiddenControls: boolean, + fromOverlay: boolean, + overlayed: boolean, + fromOverlay: boolean, }; class Video extends React.PureComponent<Props> { @@ -59,8 +61,8 @@ class Video extends React.PureComponent<Props> { this.handleAutoplay(this.props); window.addEventListener('keydown', this.handleKeyDown); - const { showOverlay, doHideOverlay, uri, playingUri, overlayed } = this.props; - if (showOverlay && uri === playingUri && !overlayed) { + const { showOverlay, doHideOverlay, uri, playingUri } = this.props; + if (showOverlay && uri === playingUri) { doHideOverlay(); } } @@ -74,6 +76,11 @@ class Video extends React.PureComponent<Props> { ) { this.handleAutoplay(nextProps); } + if (nextProps.fromOverlay) { + this.moveVideoFromOverlayToNormal(); + this.destroyVideoOnOverlay(); + this.props.doHideOverlay(); + } } componentWillUnmount() { @@ -88,9 +95,24 @@ class Video extends React.PureComponent<Props> { moveVideoToOverlay() { const topContainer = document.getElementById('video__overlay_id_top_container'); const container = document.getElementById('video__overlay_id'); - const video = this.mediaContainer.media.getElementsByTagName("video")[0]; - topContainer.classList.remove('hiddenContainer'); - container.appendChild(video); + const videoContainer = this.mediaContainer.media ? this.mediaContainer.media : document.getElementById('insert_video'); + const video = videoContainer.getElementsByTagName('video')[0]; + if (video) { + topContainer.classList.remove('hiddenContainer'); + container.appendChild(video); + video.controls = false; + video.play(); + } + } + + moveVideoFromOverlayToNormal() { + const videoContainer = document.getElementById('video__overlay_id'); + if (!videoContainer) return; + const video = videoContainer.getElementsByTagName('video')[0]; + if (!video) return; + const filePageVideoContainer = document.getElementById('insert_video'); + filePageVideoContainer.appendChild(video); + video.controls = true; video.play(); } @@ -141,12 +163,16 @@ class Video extends React.PureComponent<Props> { } playContent() { - const { play, uri, showOverlay, playingUri, doHideOverlay } = this.props; - if (playingUri && showOverlay) { + const { play, uri, playingUri, doHideOverlay } = this.props; + if (playingUri) { + if (playingUri === uri) { + this.moveVideoFromOverlayToNormal(); + } this.destroyVideoOnOverlay(); doHideOverlay(); + } else { + play(uri); } - play(uri); } render() { @@ -169,8 +195,9 @@ class Video extends React.PureComponent<Props> { className, obscureNsfw, hiddenControls, - overlayed, doHideOverlay, + showOverlay, + fromOverlay, } = this.props; const isPlaying = playingUri === uri; @@ -195,6 +222,7 @@ class Video extends React.PureComponent<Props> { const layoverStyle = !shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {}; + const commingFromOverlay = playingUri === uri; return ( <div className={classnames('video', {}, className)}> {isPlaying && ( @@ -203,7 +231,7 @@ class Video extends React.PureComponent<Props> { <div className={layoverClass} style={layoverStyle}> <LoadingScreen status={loadStatusMessage} /> </div> - ) : ( + ) : (commingFromOverlay && fromOverlay ? <div id="insert_video" ref={mediaContainer => this.mediaContainer = mediaContainer} /> : <VideoPlayer filename={fileInfo.file_name} poster={poster} @@ -221,7 +249,6 @@ class Video extends React.PureComponent<Props> { paused={mediaPaused} position={mediaPosition} hiddenControls={hiddenControls} - overlayed={overlayed} doHideOverlay={doHideOverlay} ref={mediaContainer => this.mediaContainer = mediaContainer } /> diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx index 9884b152c..13c6237db 100644 --- a/src/renderer/component/videoOverlay/view.jsx +++ b/src/renderer/component/videoOverlay/view.jsx @@ -35,8 +35,8 @@ class VideoOverlay extends React.Component<Props> { returnToMedia() { const { navigate, playingUri, doHideOverlay } = this.props; doHideOverlay(); - this.destroyMediaPlayer(); - navigate('/show', { uri: playingUri }); + this.destroyMediaPlayer(false); + navigate('/show', { uri: playingUri, fromOverlay: true }); } renderPlayOrPauseButton() { @@ -51,11 +51,11 @@ class VideoOverlay extends React.Component<Props> { return document.getElementById('video__overlay_id').getElementsByTagName("video")[0]; } - destroyMediaPlayer(){ + destroyMediaPlayer(clearVideo = true){ const topContainer = document.getElementById('video__overlay_id_top_container') const videoContainer = document.getElementById('video__overlay_id'); topContainer.classList.add('hiddenContainer'); - videoContainer.innerHTML = ''; + if (clearVideo) videoContainer.innerHTML = ''; } render() { diff --git a/src/renderer/page/file/index.js b/src/renderer/page/file/index.js index 2df2705e9..c0044bb77 100644 --- a/src/renderer/page/file/index.js +++ b/src/renderer/page/file/index.js @@ -33,7 +33,8 @@ const select = (state, props) => ({ playingUri: selectPlayingUri(state), isPaused: selectMediaPaused(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state), - autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state) + autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), + fromOverlay: Boolean(props.fromOverlay), }); const perform = dispatch => ({ diff --git a/src/renderer/page/file/view.jsx b/src/renderer/page/file/view.jsx index bf7c34846..b185167c7 100644 --- a/src/renderer/page/file/view.jsx +++ b/src/renderer/page/file/view.jsx @@ -43,6 +43,7 @@ type Props = { setClientSetting: (string, boolean | string) => void, checkSubscription: ({ channelName: string, uri: string }) => void, subscriptions: Array<{}>, + fromOverlay: boolean, }; class FilePage extends React.Component<Props> { @@ -112,6 +113,7 @@ class FilePage extends React.Component<Props> { prepareEdit, navigate, autoplay, + fromOverlay, } = this.props; // File info @@ -139,7 +141,7 @@ class FilePage extends React.Component<Props> { ) : ( <section className="card"> {isPlayable ? ( - <Video className="content__embedded" uri={uri} /> + <Video className="content__embedded" uri={uri} fromOverlay={fromOverlay} /> ) : ( <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} /> )} diff --git a/src/renderer/page/show/index.js b/src/renderer/page/show/index.js index 122c6774a..bb38608bf 100644 --- a/src/renderer/page/show/index.js +++ b/src/renderer/page/show/index.js @@ -11,6 +11,7 @@ const select = (state, props) => ({ claim: makeSelectClaimForUri(props.uri)(state), isResolvingUri: makeSelectIsUriResolving(props.uri)(state), blackListedOutpoints: selectBlackListedOutpoints(state), + fromOverlay: props.fromOverlay, }); const perform = dispatch => ({ diff --git a/src/renderer/page/show/view.jsx b/src/renderer/page/show/view.jsx index afa753be6..bff8e94ec 100644 --- a/src/renderer/page/show/view.jsx +++ b/src/renderer/page/show/view.jsx @@ -12,6 +12,7 @@ type Props = { resolveUri: string => void, uri: string, claim: Claim, + fromOverlay: boolean, blackListedOutpoints: Array<{ txid: string, nout: number, @@ -34,7 +35,7 @@ class ShowPage extends React.PureComponent<Props> { } render() { - const { claim, isResolvingUri, uri, blackListedOutpoints } = this.props; + const { claim, isResolvingUri, uri, blackListedOutpoints, fromOverlay } = this.props; let innerContent = ''; @@ -85,7 +86,7 @@ class ShowPage extends React.PureComponent<Props> { </Page> ); } else { - innerContent = <FilePage uri={uri} />; + innerContent = <FilePage uri={uri} fromOverlay={fromOverlay} />; } } diff --git a/src/renderer/scss/component/_overlay.scss b/src/renderer/scss/component/_overlay.scss index a9836fe19..76f7195ab 100644 --- a/src/renderer/scss/component/_overlay.scss +++ b/src/renderer/scss/component/_overlay.scss @@ -17,7 +17,7 @@ .video__mask { opacity: 0; - background-color: rgba(0,0,8, 0.7); + background-color: rgba(0, 0, 8, 0.7); transition: all 0.4s ease-in-out; width: 100%; height: 100%; @@ -33,7 +33,7 @@ } } - &:hover .video__mask { + &:hover .video__mask { opacity: 1; } }