Add videos to be played across all pages. #1523
9 changed files with 55 additions and 24 deletions
|
@ -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 => ({
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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 }
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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() {
|
||||||
|
|
|
@ -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 => ({
|
||||||
|
|
|
@ -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} />
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -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 => ({
|
||||||
|
|
|
@ -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} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue