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;
}
}