Add videos to be played across all pages. #1523

Closed
dan1d wants to merge 13 commits from video-overlay-new into master
9 changed files with 55 additions and 24 deletions
Showing only changes of commit d721a114cd - Show all commits

View file

@ -39,8 +39,8 @@ const select = (state, props) => ({
autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
searchBarFocused: selectSearchBarFocused(state), searchBarFocused: selectSearchBarFocused(state),
showOverlay: selectShowOverlay(state), showOverlay: selectShowOverlay(state),
overlayed: props.overlayed,
hiddenControls: props.hiddenControls, hiddenControls: props.hiddenControls,
fromOverlay: props.fromOverlay,
}); });
const perform = dispatch => ({ const perform = dispatch => ({

View file

@ -47,7 +47,6 @@ class VideoPlayer extends React.PureComponent {
const ended = () => { const ended = () => {
this.props.doPause(); this.props.doPause();
this.props.savePosition(claim.claim_id, 0); this.props.savePosition(claim.claim_id, 0);
if (this.props.overlayed) this.props.doHideOverlay();
}; };
// use renderAudio override for mp3 // use renderAudio override for mp3

View file

@ -43,8 +43,10 @@ type Props = {
play: string => void, play: string => void,
searchBarFocused: boolean, searchBarFocused: boolean,
showOverlay: boolean, showOverlay: boolean,
overlayed: boolean,
hiddenControls: boolean, hiddenControls: boolean,
fromOverlay: boolean,
overlayed: boolean,
fromOverlay: boolean,
}; };
class Video extends React.PureComponent<Props> { class Video extends React.PureComponent<Props> {
@ -59,8 +61,8 @@ class Video extends React.PureComponent<Props> {
this.handleAutoplay(this.props); this.handleAutoplay(this.props);
window.addEventListener('keydown', this.handleKeyDown); window.addEventListener('keydown', this.handleKeyDown);
const { showOverlay, doHideOverlay, uri, playingUri, overlayed } = this.props; const { showOverlay, doHideOverlay, uri, playingUri } = this.props;
if (showOverlay && uri === playingUri && !overlayed) { if (showOverlay && uri === playingUri) {
doHideOverlay(); doHideOverlay();
} }
} }
@ -74,6 +76,11 @@ class Video extends React.PureComponent<Props> {
) { ) {
this.handleAutoplay(nextProps); this.handleAutoplay(nextProps);
} }
if (nextProps.fromOverlay) {
this.moveVideoFromOverlayToNormal();
this.destroyVideoOnOverlay();
this.props.doHideOverlay();
}
} }
componentWillUnmount() { componentWillUnmount() {
@ -88,9 +95,24 @@ class Video extends React.PureComponent<Props> {
moveVideoToOverlay() { moveVideoToOverlay() {
const topContainer = document.getElementById('video__overlay_id_top_container'); const topContainer = document.getElementById('video__overlay_id_top_container');
const container = document.getElementById('video__overlay_id'); const container = document.getElementById('video__overlay_id');
const video = this.mediaContainer.media.getElementsByTagName("video")[0]; const videoContainer = this.mediaContainer.media ? this.mediaContainer.media : document.getElementById('insert_video');
topContainer.classList.remove('hiddenContainer'); const video = videoContainer.getElementsByTagName('video')[0];
container.appendChild(video); 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(); video.play();
} }
@ -141,12 +163,16 @@ class Video extends React.PureComponent<Props> {
} }
playContent() { playContent() {
const { play, uri, showOverlay, playingUri, doHideOverlay } = this.props; const { play, uri, playingUri, doHideOverlay } = this.props;
if (playingUri && showOverlay) { if (playingUri) {
if (playingUri === uri) {
this.moveVideoFromOverlayToNormal();
}
this.destroyVideoOnOverlay(); this.destroyVideoOnOverlay();
doHideOverlay(); doHideOverlay();
} else {
play(uri);
} }
play(uri);
} }
render() { render() {
@ -169,8 +195,9 @@ class Video extends React.PureComponent<Props> {
className, className,
obscureNsfw, obscureNsfw,
hiddenControls, hiddenControls,
overlayed,
doHideOverlay, doHideOverlay,
showOverlay,
fromOverlay,
} = this.props; } = this.props;
const isPlaying = playingUri === uri; const isPlaying = playingUri === uri;
@ -195,6 +222,7 @@ class Video extends React.PureComponent<Props> {
const layoverStyle = const layoverStyle =
!shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {}; !shouldObscureNsfw && poster ? { backgroundImage: `url("${poster}")` } : {};
const commingFromOverlay = playingUri === uri;
return ( return (
<div className={classnames('video', {}, className)}> <div className={classnames('video', {}, className)}>
{isPlaying && ( {isPlaying && (
@ -203,7 +231,7 @@ class Video extends React.PureComponent<Props> {
<div className={layoverClass} style={layoverStyle}> <div className={layoverClass} style={layoverStyle}>
<LoadingScreen status={loadStatusMessage} /> <LoadingScreen status={loadStatusMessage} />
</div> </div>
) : ( ) : (commingFromOverlay && fromOverlay ? <div id="insert_video" ref={mediaContainer => this.mediaContainer = mediaContainer} /> :
<VideoPlayer <VideoPlayer
filename={fileInfo.file_name} filename={fileInfo.file_name}
poster={poster} poster={poster}
@ -221,7 +249,6 @@ class Video extends React.PureComponent<Props> {
paused={mediaPaused} paused={mediaPaused}
position={mediaPosition} position={mediaPosition}
hiddenControls={hiddenControls} hiddenControls={hiddenControls}
overlayed={overlayed}
doHideOverlay={doHideOverlay} doHideOverlay={doHideOverlay}
ref={mediaContainer => this.mediaContainer = mediaContainer } ref={mediaContainer => this.mediaContainer = mediaContainer }
/> />

View file

@ -35,8 +35,8 @@ class VideoOverlay extends React.Component<Props> {
returnToMedia() { returnToMedia() {
const { navigate, playingUri, doHideOverlay } = this.props; const { navigate, playingUri, doHideOverlay } = this.props;
doHideOverlay(); doHideOverlay();
this.destroyMediaPlayer(); this.destroyMediaPlayer(false);
navigate('/show', { uri: playingUri }); navigate('/show', { uri: playingUri, fromOverlay: true });
} }
renderPlayOrPauseButton() { renderPlayOrPauseButton() {
@ -51,11 +51,11 @@ class VideoOverlay extends React.Component<Props> {
return document.getElementById('video__overlay_id').getElementsByTagName("video")[0]; return document.getElementById('video__overlay_id').getElementsByTagName("video")[0];
} }
destroyMediaPlayer(){ destroyMediaPlayer(clearVideo = true){
const topContainer = document.getElementById('video__overlay_id_top_container') const topContainer = document.getElementById('video__overlay_id_top_container')
const videoContainer = document.getElementById('video__overlay_id'); const videoContainer = document.getElementById('video__overlay_id');
topContainer.classList.add('hiddenContainer'); topContainer.classList.add('hiddenContainer');
videoContainer.innerHTML = ''; if (clearVideo) videoContainer.innerHTML = '';
} }
render() { render() {

View file

@ -33,7 +33,8 @@ const select = (state, props) => ({
playingUri: selectPlayingUri(state), playingUri: selectPlayingUri(state),
isPaused: selectMediaPaused(state), isPaused: selectMediaPaused(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state), claimIsMine: makeSelectClaimIsMine(props.uri)(state),
autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state) autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state),
fromOverlay: Boolean(props.fromOverlay),
}); });
const perform = dispatch => ({ const perform = dispatch => ({

View file

@ -43,6 +43,7 @@ type Props = {
setClientSetting: (string, boolean | string) => void, setClientSetting: (string, boolean | string) => void,
checkSubscription: ({ channelName: string, uri: string }) => void, checkSubscription: ({ channelName: string, uri: string }) => void,
subscriptions: Array<{}>, subscriptions: Array<{}>,
fromOverlay: boolean,
}; };
class FilePage extends React.Component<Props> { class FilePage extends React.Component<Props> {
@ -112,6 +113,7 @@ class FilePage extends React.Component<Props> {
prepareEdit, prepareEdit,
navigate, navigate,
autoplay, autoplay,
fromOverlay,
} = this.props; } = this.props;
// File info // File info
@ -139,7 +141,7 @@ class FilePage extends React.Component<Props> {
) : ( ) : (
<section className="card"> <section className="card">
{isPlayable ? ( {isPlayable ? (
<Video className="content__embedded" uri={uri} /> <Video className="content__embedded" uri={uri} fromOverlay={fromOverlay} />
) : ( ) : (
<Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} /> <Thumbnail shouldObscure={shouldObscureThumbnail} src={thumbnail} />
)} )}

View file

@ -11,6 +11,7 @@ const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state),
isResolvingUri: makeSelectIsUriResolving(props.uri)(state), isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state), blackListedOutpoints: selectBlackListedOutpoints(state),
fromOverlay: props.fromOverlay,
}); });
const perform = dispatch => ({ const perform = dispatch => ({

View file

@ -12,6 +12,7 @@ type Props = {
resolveUri: string => void, resolveUri: string => void,
uri: string, uri: string,
claim: Claim, claim: Claim,
fromOverlay: boolean,
blackListedOutpoints: Array<{ blackListedOutpoints: Array<{
txid: string, txid: string,
nout: number, nout: number,
@ -34,7 +35,7 @@ class ShowPage extends React.PureComponent<Props> {
} }
render() { render() {
const { claim, isResolvingUri, uri, blackListedOutpoints } = this.props; const { claim, isResolvingUri, uri, blackListedOutpoints, fromOverlay } = this.props;
let innerContent = ''; let innerContent = '';
@ -85,7 +86,7 @@ class ShowPage extends React.PureComponent<Props> {
</Page> </Page>
); );
} else { } else {
innerContent = <FilePage uri={uri} />; innerContent = <FilePage uri={uri} fromOverlay={fromOverlay} />;
} }
} }

View file

@ -17,7 +17,7 @@
.video__mask { .video__mask {
opacity: 0; 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; transition: all 0.4s ease-in-out;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -33,7 +33,7 @@
} }
} }
&:hover .video__mask { &:hover .video__mask {
opacity: 1; opacity: 1;
} }
} }