From 3287d3616e25a174b65d41f6b9efe9ee2051e7c9 Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Sat, 26 May 2018 18:25:37 -0300 Subject: [PATCH 01/12] Add videos to be played across all pages. --- src/renderer/component/overlay/index.js | 14 ++++++++++ src/renderer/component/overlay/view.jsx | 16 +++++++++++ src/renderer/component/video/index.js | 13 ++++++--- src/renderer/component/video/view.jsx | 20 +++++++++++--- src/renderer/component/videoOverlay/index.js | 9 +++++++ src/renderer/component/videoOverlay/view.jsx | 25 +++++++++++++++++ src/renderer/constants/action_types.js | 3 +++ src/renderer/index.js | 2 ++ src/renderer/redux/actions/media.js | 10 +++++++ src/renderer/redux/reducers/content.js | 1 + src/renderer/redux/reducers/media.js | 20 +++++++++++--- src/renderer/redux/selectors/media.js | 2 ++ src/renderer/scss/all.scss | 1 + src/renderer/scss/component/_overlay.scss | 28 ++++++++++++++++++++ 14 files changed, 154 insertions(+), 10 deletions(-) create mode 100644 src/renderer/component/overlay/index.js create mode 100644 src/renderer/component/overlay/view.jsx create mode 100644 src/renderer/component/videoOverlay/index.js create mode 100644 src/renderer/component/videoOverlay/view.jsx create mode 100644 src/renderer/scss/component/_overlay.scss diff --git a/src/renderer/component/overlay/index.js b/src/renderer/component/overlay/index.js new file mode 100644 index 000000000..4e1ed7e64 --- /dev/null +++ b/src/renderer/component/overlay/index.js @@ -0,0 +1,14 @@ +import { connect } from 'react-redux'; +import { selectShowOverlay } from 'redux/selectors/media'; +import { doHideOverlay } from 'redux/actions/media'; +import Overlay from './view'; + +const select = state => ({ + showOverlay: selectShowOverlay(state), +}); + +const perform = dispatch => ({ + doCloseOverlay: dispatch(doHideOverlay()), +}); + +export default connect(select, perform)(Overlay); diff --git a/src/renderer/component/overlay/view.jsx b/src/renderer/component/overlay/view.jsx new file mode 100644 index 000000000..30e4c3f2d --- /dev/null +++ b/src/renderer/component/overlay/view.jsx @@ -0,0 +1,16 @@ +// @flow +import React from 'react'; + +type Props = { + showOverlay: ?boolean, + children: ?React.node, +}; + +class Overlay extends React.PureComponent { + render() { + const { showOverlay, children } = this.props; + return
{showOverlay ? children : ''}
; + } +} + +export default Overlay; diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index 9ce5f62e0..608333a98 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -3,7 +3,7 @@ import * as settings from 'constants/settings'; import { doChangeVolume } from 'redux/actions/app'; import { selectVolume } from 'redux/selectors/app'; import { doPlayUri, doSetPlayingUri, doLoadVideo } from 'redux/actions/content'; -import { doPlay, doPause, savePosition } from 'redux/actions/media'; +import { doPlay, doPause, savePosition, doHideOverlay, doShowOverlay } from 'redux/actions/media'; import { makeSelectMetadataForUri, makeSelectContentTypeForUri, @@ -15,7 +15,11 @@ import { selectSearchBarFocused, } from 'lbry-redux'; import { makeSelectClientSetting, selectShowNsfw } from 'redux/selectors/settings'; -import { selectMediaPaused, makeSelectMediaPositionForUri } from 'redux/selectors/media'; +import { + selectMediaPaused, + makeSelectMediaPositionForUri, + selectShowOverlay, +} from 'redux/selectors/media'; import { selectPlayingUri } from 'redux/selectors/content'; import Video from './view'; @@ -34,15 +38,18 @@ const select = (state, props) => ({ mediaPosition: makeSelectMediaPositionForUri(props.uri)(state), autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), searchBarFocused: selectSearchBarFocused(state), + showOverlay: selectShowOverlay(state), + overlayed: props.overlayed, }); const perform = dispatch => ({ play: uri => dispatch(doPlayUri(uri)), load: uri => dispatch(doLoadVideo(uri)), - cancelPlay: () => dispatch(doSetPlayingUri(null)), changeVolume: volume => dispatch(doChangeVolume(volume)), doPlay: () => dispatch(doPlay()), doPause: () => dispatch(doPause()), + doShowOverlay: () => dispatch(doShowOverlay()), + doHideOverlay: () => dispatch(doHideOverlay()), savePosition: (claimId, position) => dispatch(savePosition(claimId, position)), }); diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 064f2105a..fad4afb40 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -10,7 +10,6 @@ import LoadingScreen from './internal/loading-screen'; const SPACE_BAR_KEYCODE = 32; type Props = { - cancelPlay: () => void, fileInfo: { outpoint: string, file_name: string, @@ -34,12 +33,16 @@ type Props = { doPlay: () => void, doPause: () => void, savePosition: (string, number) => void, + doShowOverlay: () => void, + doHideOverlay: () => void, mediaPaused: boolean, mediaPosition: ?number, className: ?string, obscureNsfw: boolean, play: string => void, searchBarFocused: boolean, + showOverlay: boolean, + overlayed: boolean, }; class Video extends React.PureComponent { @@ -53,6 +56,11 @@ class Video extends React.PureComponent { componentDidMount() { this.handleAutoplay(this.props); window.addEventListener('keydown', this.handleKeyDown); + + const { showOverlay, doHideOverlay, uri, playingUri, overlayed } = this.props; + if (showOverlay && uri === playingUri && !overlayed) { + doHideOverlay(); + } } componentWillReceiveProps(nextProps: Props) { @@ -67,7 +75,10 @@ class Video extends React.PureComponent { } componentWillUnmount() { - this.props.cancelPlay(); + const { overlayed, doShowOverlay } = this.props; + if (!overlayed) { + doShowOverlay(); + } window.removeEventListener('keydown', this.handleKeyDown); } @@ -111,7 +122,10 @@ class Video extends React.PureComponent { } playContent() { - const { play, uri } = this.props; + const { play, uri, showOverlay, playingUri, doHideOverlay } = this.props; + if (playingUri && showOverlay) { + doHideOverlay(); + } play(uri); } diff --git a/src/renderer/component/videoOverlay/index.js b/src/renderer/component/videoOverlay/index.js new file mode 100644 index 000000000..75a249ad7 --- /dev/null +++ b/src/renderer/component/videoOverlay/index.js @@ -0,0 +1,9 @@ +import { connect } from 'react-redux'; +import { selectPlayingUri } from 'redux/selectors/content'; +import VideoOverlay from './view'; + +const select = state => ({ + playingUri: selectPlayingUri(state), +}); + +export default connect(select, null)(VideoOverlay); diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx new file mode 100644 index 000000000..13119e9f2 --- /dev/null +++ b/src/renderer/component/videoOverlay/view.jsx @@ -0,0 +1,25 @@ +// @flow +import React from 'react'; +import Video from 'component/video'; +import FileActions from 'component/fileActions'; +import Overlay from 'component/overlay'; + +type Props = { + playingUri: ?string, +}; + +class VideoOverlay extends React.Component { + render() { + const { playingUri } = this.props; + return ( + +
+ +
+ {playingUri ? + ); + } +} + +export default VideoOverlay; diff --git a/src/renderer/constants/action_types.js b/src/renderer/constants/action_types.js index 3ffe23e6e..9105af981 100644 --- a/src/renderer/constants/action_types.js +++ b/src/renderer/constants/action_types.js @@ -187,6 +187,9 @@ export const SET_VIDEO_PAUSE = 'SET_VIDEO_PAUSE'; export const MEDIA_PLAY = 'MEDIA_PLAY'; export const MEDIA_PAUSE = 'MEDIA_PAUSE'; export const MEDIA_POSITION = 'MEDIA_POSITION'; +// Overlay Media +export const SHOW_OVERLAY_MEDIA = 'SHOW_OVERLAY_MEDIA'; +export const HIDE_OVERLAY_MEDIA = 'HIDE_OVERLAY_MEDIA'; // Publishing export const CLEAR_PUBLISH = 'CLEAR_PUBLISH'; diff --git a/src/renderer/index.js b/src/renderer/index.js index c82db3287..5e777d41e 100644 --- a/src/renderer/index.js +++ b/src/renderer/index.js @@ -16,6 +16,7 @@ import 'scss/all.scss'; import store from 'store'; import app from './app'; import analytics from './analytics'; +import VideoOverlay from './component/videoOverlay/'; const { autoUpdater } = remote.require('electron-updater'); @@ -131,6 +132,7 @@ const init = () => {
+
, document.getElementById('app') diff --git a/src/renderer/redux/actions/media.js b/src/renderer/redux/actions/media.js index 1b7d0b85f..fca62b7ad 100644 --- a/src/renderer/redux/actions/media.js +++ b/src/renderer/redux/actions/media.js @@ -26,3 +26,13 @@ export function savePosition(claimId: String, position: Number) { }); }; } + +export const doShowOverlay = () => (dispatch: Dispatch) => + dispatch({ + type: actions.SHOW_OVERLAY_MEDIA, + }); + +export const doHideOverlay = () => (dispatch: Dispatch) => + dispatch({ + type: actions.HIDE_OVERLAY_MEDIA, + }); diff --git a/src/renderer/redux/reducers/content.js b/src/renderer/redux/reducers/content.js index e9cbdff99..9b84e85dd 100644 --- a/src/renderer/redux/reducers/content.js +++ b/src/renderer/redux/reducers/content.js @@ -2,6 +2,7 @@ import * as ACTIONS from 'constants/action_types'; const reducers = {}; const defaultState = { + showOverlay: false, playingUri: null, currentlyIsPlaying: false, rewardedContentClaimIds: [], diff --git a/src/renderer/redux/reducers/media.js b/src/renderer/redux/reducers/media.js index 44447fe4f..cb762ac28 100644 --- a/src/renderer/redux/reducers/media.js +++ b/src/renderer/redux/reducers/media.js @@ -3,6 +3,7 @@ import * as actions from 'constants/action_types'; import { handleActions } from 'util/redux-utils'; export type MediaState = { + showOverlay: Boolean, paused: Boolean, positions: { [string]: number, @@ -12,21 +13,22 @@ export type MediaState = { export type Action = any; export type Dispatch = (action: Action) => any; -const defaultState = { paused: true, positions: {} }; +const defaultState = { paused: true, positions: {}, showOverlay: false }; export default handleActions( { - [actions.MEDIA_PLAY]: (state: MediaState, action: Action) => ({ + // if parameters: state: MediaState, action: Action + [actions.MEDIA_PLAY]: (state: MediaState) => ({ ...state, paused: false, }), - [actions.MEDIA_PAUSE]: (state: MediaState, action: Action) => ({ + [actions.MEDIA_PAUSE]: (state: MediaState) => ({ ...state, paused: true, }), - [actions.MEDIA_POSITION]: (state: MediaState, action: Action) => { + [actions.MEDIA_POSITION]: (state: MediaState) => { const { outpoint, position } = action.data; return { ...state, @@ -36,6 +38,16 @@ export default handleActions( }, }; }, + + [actions.SHOW_OVERLAY_MEDIA]: (state: MediaState) => ({ + ...state, + showOverlay: true, + }), + + [actions.HIDE_OVERLAY_MEDIA]: (state: MediaState) => ({ + ...state, + showOverlay: false, + }), }, defaultState ); diff --git a/src/renderer/redux/selectors/media.js b/src/renderer/redux/selectors/media.js index 40a6725e1..4381a9c2a 100644 --- a/src/renderer/redux/selectors/media.js +++ b/src/renderer/redux/selectors/media.js @@ -10,3 +10,5 @@ export const makeSelectMediaPositionForUri = uri => const outpoint = `${claim.txid}:${claim.nout}`; return state.positions[outpoint] || null; }); + +export const selectShowOverlay = createSelector(selectState, state => state.showOverlay); diff --git a/src/renderer/scss/all.scss b/src/renderer/scss/all.scss index 0055ca6d0..54b3981f5 100644 --- a/src/renderer/scss/all.scss +++ b/src/renderer/scss/all.scss @@ -24,3 +24,4 @@ @import 'component/_nav.scss'; @import 'component/_file-list.scss'; @import 'component/_search.scss'; +@import 'component/_overlay.scss'; diff --git a/src/renderer/scss/component/_overlay.scss b/src/renderer/scss/component/_overlay.scss new file mode 100644 index 000000000..3592b1105 --- /dev/null +++ b/src/renderer/scss/component/_overlay.scss @@ -0,0 +1,28 @@ +.overlay { + position: fixed; + max-height: 50%; + max-width: 50%; + width: 20%; + height: inherit; + bottom: 1%; + right: 1%; + z-index: 3; + box-shadow: var(--box-shadow-layer); + + &:hover .button-close { + display: inline-block; + background: rgba(0, 0, 0, 0.5); + position: absolute; + height: 22px; + width: 22px; + top: 0px; + right: 0px; + color: #000; + text-align: center; + cursor: pointer; + z-index: 4; + } +} +.overlay .button-close { + display: none; +} -- 2.45.3 From 92cd06bc529ba14b96af96ea092d388214f12cc9 Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Thu, 31 May 2018 18:20:21 -0300 Subject: [PATCH 02/12] Fix issue with undefined action. - Refactor overlay component. --- src/renderer/component/overlay/view.jsx | 3 ++- src/renderer/redux/reducers/media.js | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/renderer/component/overlay/view.jsx b/src/renderer/component/overlay/view.jsx index 30e4c3f2d..5eef59a1c 100644 --- a/src/renderer/component/overlay/view.jsx +++ b/src/renderer/component/overlay/view.jsx @@ -9,7 +9,8 @@ type Props = { class Overlay extends React.PureComponent { render() { const { showOverlay, children } = this.props; - return
{showOverlay ? children : ''}
; + if (!showOverlay) return ''; + return
{children}
; } } diff --git a/src/renderer/redux/reducers/media.js b/src/renderer/redux/reducers/media.js index cb762ac28..71b161af4 100644 --- a/src/renderer/redux/reducers/media.js +++ b/src/renderer/redux/reducers/media.js @@ -28,7 +28,7 @@ export default handleActions( paused: true, }), - [actions.MEDIA_POSITION]: (state: MediaState) => { + [actions.MEDIA_POSITION]: (state: MediaState, action: Action) => { const { outpoint, position } = action.data; return { ...state, -- 2.45.3 From 0771cd2af11b8929108a91643237e918eec6c4ff Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Thu, 31 May 2018 19:46:45 -0300 Subject: [PATCH 03/12] Add video overlay header. --- src/renderer/component/videoOverlay/index.js | 7 ++++- src/renderer/component/videoOverlay/view.jsx | 12 +++---- .../component/videoOverlayHeader/index.js | 10 ++++++ .../component/videoOverlayHeader/view.jsx | 31 +++++++++++++++++++ src/renderer/scss/component/_overlay.scss | 30 +++++++++--------- .../scss/component/_video_overlay.scss | 0 6 files changed, 68 insertions(+), 22 deletions(-) create mode 100644 src/renderer/component/videoOverlayHeader/index.js create mode 100644 src/renderer/component/videoOverlayHeader/view.jsx create mode 100644 src/renderer/scss/component/_video_overlay.scss diff --git a/src/renderer/component/videoOverlay/index.js b/src/renderer/component/videoOverlay/index.js index 75a249ad7..09574a725 100644 --- a/src/renderer/component/videoOverlay/index.js +++ b/src/renderer/component/videoOverlay/index.js @@ -1,9 +1,14 @@ import { connect } from 'react-redux'; import { selectPlayingUri } from 'redux/selectors/content'; +import { doSetPlayingUri } from 'redux/actions/content'; import VideoOverlay from './view'; const select = state => ({ playingUri: selectPlayingUri(state), }); -export default connect(select, null)(VideoOverlay); +const perform = dispatch => ({ + cancelPlay: () => dispatch(doSetPlayingUri(null)), +}); + +export default connect(select, perform)(VideoOverlay); diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx index 13119e9f2..a2baca81f 100644 --- a/src/renderer/component/videoOverlay/view.jsx +++ b/src/renderer/component/videoOverlay/view.jsx @@ -1,22 +1,22 @@ // @flow import React from 'react'; import Video from 'component/video'; -import FileActions from 'component/fileActions'; import Overlay from 'component/overlay'; +import VideoOverlayHeader from '../videoOverlayHeader'; type Props = { + cancelPlay: () => void, playingUri: ?string, }; class VideoOverlay extends React.Component { render() { - const { playingUri } = this.props; + const { playingUri, cancelPlay } = this.props; + if (!playingUri) return ''; return ( -
- -
- {playingUri ? ); } diff --git a/src/renderer/component/videoOverlayHeader/index.js b/src/renderer/component/videoOverlayHeader/index.js new file mode 100644 index 000000000..c50ab5bcb --- /dev/null +++ b/src/renderer/component/videoOverlayHeader/index.js @@ -0,0 +1,10 @@ +import { connect } from 'react-redux'; +import { makeSelectTitleForUri } from 'lbry-redux'; +import VideoOverlayHeader from './view'; + +const select = (state, props) => ({ + title: makeSelectTitleForUri(props.uri)(state), + onClose: props.onClose, +}); + +export default connect(select, null)(VideoOverlayHeader); diff --git a/src/renderer/component/videoOverlayHeader/view.jsx b/src/renderer/component/videoOverlayHeader/view.jsx new file mode 100644 index 000000000..d923c9d05 --- /dev/null +++ b/src/renderer/component/videoOverlayHeader/view.jsx @@ -0,0 +1,31 @@ +// @flow +import React from 'react'; +import Button from 'component/button'; +import * as icons from 'constants/icons'; +import TruncatedText from 'component/common/truncated-text'; + +type Props = { + onClose: () => void, + title: string, +}; + +class VideoOverlayHeader extends React.Component { + render() { + const { onClose, title } = this.props; + return ( +
+

+ {title} +

+
+ ); + } +} + +export default VideoOverlayHeader; diff --git a/src/renderer/scss/component/_overlay.scss b/src/renderer/scss/component/_overlay.scss index 3592b1105..f9480a101 100644 --- a/src/renderer/scss/component/_overlay.scss +++ b/src/renderer/scss/component/_overlay.scss @@ -8,21 +8,21 @@ right: 1%; z-index: 3; box-shadow: var(--box-shadow-layer); +} - &:hover .button-close { - display: inline-block; - background: rgba(0, 0, 0, 0.5); - position: absolute; - height: 22px; - width: 22px; - top: 0px; - right: 0px; - color: #000; - text-align: center; - cursor: pointer; - z-index: 4; +.video_overlay__header { + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: nowrap; + display: flex; + width: 100%; + height: 2rem; + background-color: var(--header-primary-color); + padding: 20px 10px; + + .overlay__title--small { + font-size: 15px; + line-height: 15px; } } -.overlay .button-close { - display: none; -} diff --git a/src/renderer/scss/component/_video_overlay.scss b/src/renderer/scss/component/_video_overlay.scss new file mode 100644 index 000000000..e69de29bb -- 2.45.3 From a14235cc18185625406f0a17b255354eeaaae131 Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Thu, 31 May 2018 20:10:40 -0300 Subject: [PATCH 04/12] Hide controls on overlayed videos only. --- src/renderer/component/video/index.js | 1 + src/renderer/component/video/internal/player.jsx | 8 ++++---- src/renderer/component/video/view.jsx | 3 +++ src/renderer/component/videoOverlay/view.jsx | 4 +++- src/renderer/scss/component/_overlay.scss | 13 +++++++++++++ 5 files changed, 24 insertions(+), 5 deletions(-) diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index 608333a98..df2516224 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -40,6 +40,7 @@ const select = (state, props) => ({ searchBarFocused: selectSearchBarFocused(state), showOverlay: selectShowOverlay(state), overlayed: props.overlayed, + hiddenControls: props.hiddenControls, }); const perform = dispatch => ({ diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 5ec6fc965..61da3e750 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -29,7 +29,7 @@ class VideoPlayer extends React.PureComponent { componentDidMount() { const container = this.media; - const { contentType, changeVolume, volume, position, claim } = this.props; + const { contentType, changeVolume, volume, position, claim, hiddenControls } = this.props; const loadedMetadata = () => { this.setState({ hasMetadata: true, startedPlaying: true }); @@ -55,7 +55,7 @@ class VideoPlayer extends React.PureComponent { player.append( this.file(), container, - { autoplay: true, controls: true }, + { autoplay: true, controls: !hiddenControls }, renderMediaCallback.bind(this) ); } @@ -88,7 +88,7 @@ class VideoPlayer extends React.PureComponent { } componentDidUpdate() { - const { contentType, downloadCompleted } = this.props; + const { contentType, downloadCompleted, hiddenControls } = this.props; const { startedPlaying } = this.state; if (this.playableType() && !startedPlaying && downloadCompleted) { @@ -99,7 +99,7 @@ class VideoPlayer extends React.PureComponent { } else { player.render(this.file(), container, { autoplay: true, - controls: true, + controls: !hiddenControls, }); } } diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index fad4afb40..5fabd3171 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -43,6 +43,7 @@ type Props = { searchBarFocused: boolean, showOverlay: boolean, overlayed: boolean, + hiddenControls: boolean, }; class Video extends React.PureComponent { @@ -148,6 +149,7 @@ class Video extends React.PureComponent { mediaPosition, className, obscureNsfw, + hiddenControls, } = this.props; const isPlaying = playingUri === uri; @@ -197,6 +199,7 @@ class Video extends React.PureComponent { uri={uri} paused={mediaPaused} position={mediaPosition} + hiddenControls={hiddenControls} /> )} diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx index a2baca81f..9444100ef 100644 --- a/src/renderer/component/videoOverlay/view.jsx +++ b/src/renderer/component/videoOverlay/view.jsx @@ -16,7 +16,9 @@ class VideoOverlay extends React.Component { return ( - ); } diff --git a/src/renderer/scss/component/_overlay.scss b/src/renderer/scss/component/_overlay.scss index f9480a101..884a65163 100644 --- a/src/renderer/scss/component/_overlay.scss +++ b/src/renderer/scss/component/_overlay.scss @@ -8,6 +8,19 @@ right: 1%; z-index: 3; box-shadow: var(--box-shadow-layer); + + &:hover { + background-color: rgba(0,0,0, .6); + } +} + +.overlayeada { + z-index: 20; + background: transparent; + + &:hover { + background-color: rgba(0,0,0, .9); + } } .video_overlay__header { -- 2.45.3 From 7d2617e9dc2b4e6f9d62cc70ab5c320b08dcd40c Mon Sep 17 00:00:00 2001 From: Daniel Dominguez Date: Thu, 31 May 2018 22:38:30 -0300 Subject: [PATCH 05/12] Add play/pause and return to claim page buttons. --- src/renderer/component/videoOverlay/index.js | 9 +++++- src/renderer/component/videoOverlay/view.jsx | 34 ++++++++++++++++---- src/renderer/constants/icons.js | 3 ++ src/renderer/scss/component/_overlay.scss | 31 ++++++++++++------ 4 files changed, 60 insertions(+), 17 deletions(-) diff --git a/src/renderer/component/videoOverlay/index.js b/src/renderer/component/videoOverlay/index.js index 09574a725..c6ad66ceb 100644 --- a/src/renderer/component/videoOverlay/index.js +++ b/src/renderer/component/videoOverlay/index.js @@ -1,14 +1,21 @@ import { connect } from 'react-redux'; import { selectPlayingUri } from 'redux/selectors/content'; -import { doSetPlayingUri } from 'redux/actions/content'; +import { doSetPlayingUri, doPlayUri } from 'redux/actions/content'; +import { doNavigate } from 'redux/actions/navigation'; +import { doPlay, doPause } from 'redux/actions/media'; +import { selectMediaPaused } from 'redux/selectors/media'; import VideoOverlay from './view'; const select = state => ({ playingUri: selectPlayingUri(state), + mediaPaused: selectMediaPaused(state), }); const perform = dispatch => ({ + navigate: (path, params) => dispatch(doNavigate(path, params)), cancelPlay: () => dispatch(doSetPlayingUri(null)), + play: uri => dispatch(doPlayUri(uri)), + doPause: () => dispatch(doPause()), }); export default connect(select, perform)(VideoOverlay); diff --git a/src/renderer/component/videoOverlay/view.jsx b/src/renderer/component/videoOverlay/view.jsx index 9444100ef..1bc7eb9da 100644 --- a/src/renderer/component/videoOverlay/view.jsx +++ b/src/renderer/component/videoOverlay/view.jsx @@ -2,25 +2,45 @@ import React from 'react'; import Video from 'component/video'; import Overlay from 'component/overlay'; -import VideoOverlayHeader from '../videoOverlayHeader'; +import VideoOverlayHeader from 'component/videoOverlayHeader'; +import Button from 'component/button'; +import * as icons from 'constants/icons'; type Props = { + play: () => void, cancelPlay: () => void, + navigate: (string, ?{}) => void, playingUri: ?string, + play: (string) => void, + doPause: () => void, + mediaPaused: boolean, }; class VideoOverlay extends React.Component { + renderPlayOrPauseButton() { + const { mediaPaused, doPause, play, playingUri } = this.props; + if (mediaPaused) { + return