From bd3aa1b3493ea3ec03fde94c3c4ee388f6abcf45 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Mon, 18 Dec 2017 12:02:55 -0500 Subject: [PATCH 1/6] Pushing for help with Redux selectors --- .../component/fileDownloadLink/index.js | 2 ++ .../component/fileDownloadLink/view.jsx | 9 +++++- src/renderer/component/video/index.js | 2 ++ .../component/video/internal/player.jsx | 12 +++++++- src/renderer/component/video/view.jsx | 5 ++++ src/renderer/constants/action_types.js | 5 ++++ src/renderer/redux/actions/video.js | 24 +++++++++++++++ src/renderer/redux/reducers/video.js | 29 +++++++++++++++++++ src/renderer/redux/selectors/video.js | 9 ++++++ src/renderer/store.js | 4 ++- 10 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 src/renderer/redux/actions/video.js create mode 100644 src/renderer/redux/reducers/video.js create mode 100644 src/renderer/redux/selectors/video.js diff --git a/src/renderer/component/fileDownloadLink/index.js b/src/renderer/component/fileDownloadLink/index.js index d7988c067..9b1141802 100644 --- a/src/renderer/component/fileDownloadLink/index.js +++ b/src/renderer/component/fileDownloadLink/index.js @@ -9,6 +9,7 @@ import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; import { doFetchAvailability } from "redux/actions/availability"; import { doOpenFileInShell } from "redux/actions/file_info"; import { doPurchaseUri, doStartDownload } from "redux/actions/content"; +import { setVideoPause } from "redux/actions/video"; import FileDownloadLink from "./view"; const select = (state, props) => ({ @@ -24,6 +25,7 @@ const perform = dispatch => ({ openInShell: path => dispatch(doOpenFileInShell(path)), purchaseUri: uri => dispatch(doPurchaseUri(uri)), restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), + videoPause: val => dispatch(setVideoPause(val)), }); export default connect(select, perform)(FileDownloadLink); diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx index 32d0fe3c4..68499c273 100644 --- a/src/renderer/component/fileDownloadLink/view.jsx +++ b/src/renderer/component/fileDownloadLink/view.jsx @@ -42,8 +42,15 @@ class FileDownloadLink extends React.PureComponent { purchaseUri, costInfo, loading, + videoPause, } = this.props; + const openFile = () => { + openInShell(fileInfo.download_path); + console.log("FileDownloadLink view"); + videoPause(true); + }; + if (loading || downloading) { const progress = fileInfo && fileInfo.written_bytes @@ -93,7 +100,7 @@ class FileDownloadLink extends React.PureComponent { button="text" icon="icon-external-link-square" className="no-underline" - onClick={() => openInShell(fileInfo.download_path)} + onClick={() => openFile()} /> ); } diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index a9b0ed62d..1b79f8275 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -14,6 +14,7 @@ import { } from "redux/selectors/file_info"; import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; import { selectShowNsfw } from "redux/selectors/settings"; +import { selectVideoPause } from "redux/selectors/video"; import Video from "./view"; import { selectPlayingUri } from "redux/selectors/content"; @@ -27,6 +28,7 @@ const select = (state, props) => ({ playingUri: selectPlayingUri(state), contentType: makeSelectContentTypeForUri(props.uri)(state), volume: selectVolume(state), + videoPause: selectVideoPause(state), }); const perform = dispatch => ({ diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 9d7b6608f..5c885bc80 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -5,6 +5,9 @@ import player from "render-media"; import fs from "fs"; import LoadingScreen from "./loading-screen"; +import { connect } from "react-redux"; +import { selectVideoPause } from "redux/selectors/video"; + class VideoPlayer extends React.PureComponent { static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; @@ -121,6 +124,11 @@ class VideoPlayer extends React.PureComponent { } } + pauseVideo() { + console.log("pauseVideo called"); + this.refs.media.children[0].pause(); + } + componentDidUpdate() { const { contentType, downloadCompleted } = this.props; const { startedPlaying } = this.state; @@ -157,13 +165,15 @@ class VideoPlayer extends React.PureComponent { } render() { - const { mediaType, poster } = this.props; + const { mediaType, poster, videoPause } = this.props; const { hasMetadata, unplayable } = this.state; const noMetadataMessage = "Waiting for metadata."; const unplayableMessage = "Sorry, looks like we can't play this file."; const needsMetadata = this.playableType(); + console.log("VideoPlayer render; videoPause:", videoPause); + return (
{["audio", "application"].indexOf(mediaType) !== -1 && diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index c42994a17..515a6c8e3 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -8,6 +8,7 @@ import NsfwOverlay from "component/nsfwOverlay"; class Video extends React.PureComponent { constructor(props) { super(props); + console.log("PROPS:", props); this.state = { showNsfwHelp: false, }; @@ -56,8 +57,11 @@ class Video extends React.PureComponent { changeVolume, volume, uri, + videoPause, } = this.props; + console.log("VIDEO VIEW videoPause:", videoPause); + const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; @@ -110,6 +114,7 @@ class Video extends React.PureComponent { downloadCompleted={fileInfo.completed} changeVolume={changeVolume} volume={volume} + videoPause={videoPause} /> ))} {!isPlaying && ( diff --git a/src/renderer/constants/action_types.js b/src/renderer/constants/action_types.js index f9e8eb836..d83cf10ed 100644 --- a/src/renderer/constants/action_types.js +++ b/src/renderer/constants/action_types.js @@ -164,3 +164,8 @@ export const CLEAR_SHAPE_SHIFT = "CLEAR_SHAPE_SHIFT"; export const CHANNEL_SUBSCRIBE = "CHANNEL_SUBSCRIBE"; export const CHANNEL_UNSUBSCRIBE = "CHANNEL_UNSUBSCRIBE"; export const HAS_FETCHED_SUBSCRIPTIONS = "HAS_FETCHED_SUBSCRIPTIONS"; + +// Video controls +export const VIDEO_PAUSE_STARTED = "VIDEO_PAUSE_STARTED"; +export const VIDEO_PAUSE_COMPLETED = "VIDEO_PAUSE_COMPLETED"; +export const SET_VIDEO_PAUSE = "SET_VIDEO_PAUSE"; diff --git a/src/renderer/redux/actions/video.js b/src/renderer/redux/actions/video.js new file mode 100644 index 000000000..c4c8ec40a --- /dev/null +++ b/src/renderer/redux/actions/video.js @@ -0,0 +1,24 @@ +// @flow +import * as actions from "constants/action_types"; +import type { Action, Dispatch } from "redux/reducers/video"; +import lbry from "lbry"; + +// export const doVideoPause = ( +// dispatch: Dispatch +// ) => { +// console.log("diVideoPause helllllo"); +// console.log(dispatch); +// return dispatch({type: actions.VIDEO_PAUSE_STARTED}); +// } + +// export const confirmVideoPause = ( +// dispatch: Dispatch +// ) => dispatch({type: actions.VIDEO_PAUSE_COMPLETED}); + +export const setVideoPause = (data: boolean) => (dispatch: Dispatch) => { + console.log("VIDEO ACTION data:", data); + return dispatch({ + type: actions.SET_VIDEO_PAUSE, + data, + }); +}; diff --git a/src/renderer/redux/reducers/video.js b/src/renderer/redux/reducers/video.js new file mode 100644 index 000000000..6aafaa9ec --- /dev/null +++ b/src/renderer/redux/reducers/video.js @@ -0,0 +1,29 @@ +// @flow +import * as actions from "constants/action_types"; +import { handleActions } from "util/redux-utils"; + +export type VideoState = { videoPause: boolean }; + +type setVideoPause = { + type: actions.SET_VIDEO_PAUSE, + data: boolean, +}; + +export type Action = setVideoPause; +export type Dispatch = (action: Action) => any; + +const defaultState = { videoPause: false }; + +export default handleActions( + { + [actions.SET_VIDEO_PAUSE]: ( + state: VideoState, + action: setVideoPause + ): VideoState => { + console.log("VIDEO REDUCER STATE", state); + console.log("VIDEO REDUCER ACTION", action); + return { ...state, videoPause: action.data }; + }, + }, + defaultState +); diff --git a/src/renderer/redux/selectors/video.js b/src/renderer/redux/selectors/video.js new file mode 100644 index 000000000..fc124a69a --- /dev/null +++ b/src/renderer/redux/selectors/video.js @@ -0,0 +1,9 @@ +import * as settings from "constants/settings"; +import { createSelector } from "reselect"; + +const _selectState = state => state.videoPause || false; + +export const selectVideoPause = createSelector( + _selectState, + state => state.videoPause || false +); diff --git a/src/renderer/store.js b/src/renderer/store.js index 9e6176b0e..f4a61f779 100644 --- a/src/renderer/store.js +++ b/src/renderer/store.js @@ -13,6 +13,7 @@ import userReducer from "redux/reducers/user"; import walletReducer from "redux/reducers/wallet"; import shapeShiftReducer from "redux/reducers/shape_shift"; import subscriptionsReducer from "redux/reducers/subscriptions"; +import videoReducer from "redux/reducers/video"; import { persistStore, autoRehydrate } from "redux-persist"; import createCompressor from "redux-persist-transform-compress"; import createFilter from "redux-persist-transform-filter"; @@ -20,7 +21,7 @@ import localForage from "localforage"; import { createStore, applyMiddleware, compose, combineReducers } from "redux"; import thunk from "redux-thunk"; -const env = process.env.NODE_ENV || "production" +const env = process.env.NODE_ENV || "production"; function isFunction(object) { return typeof object === "function"; @@ -69,6 +70,7 @@ const reducers = combineReducers({ user: userReducer, shapeShift: shapeShiftReducer, subscriptions: subscriptionsReducer, + video: videoReducer, }); const bulkThunk = createBulkThunkMiddleware(); From 11ee87829d47cd5f2597c9ce00af8cc10cb4b280 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Mon, 18 Dec 2017 17:44:04 -0500 Subject: [PATCH 2/6] getting closer --- src/renderer/component/video/index.js | 4 +- .../component/video/internal/player.jsx | 38 ++++++++++++------- src/renderer/component/video/view.jsx | 5 +-- 3 files changed, 28 insertions(+), 19 deletions(-) diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index 1b79f8275..b709dd691 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -14,7 +14,7 @@ import { } from "redux/selectors/file_info"; import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; import { selectShowNsfw } from "redux/selectors/settings"; -import { selectVideoPause } from "redux/selectors/video"; +// import { selectVideoPause } from "redux/selectors/video"; import Video from "./view"; import { selectPlayingUri } from "redux/selectors/content"; @@ -28,7 +28,7 @@ const select = (state, props) => ({ playingUri: selectPlayingUri(state), contentType: makeSelectContentTypeForUri(props.uri)(state), volume: selectVolume(state), - videoPause: selectVideoPause(state), + // videoPause: selectVideoPause(state), }); const perform = dispatch => ({ diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 5c885bc80..d18733aec 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -124,9 +124,10 @@ class VideoPlayer extends React.PureComponent { } } - pauseVideo() { - console.log("pauseVideo called"); - this.refs.media.children[0].pause(); + componentWillReceiveProps() { + console.log("!!VIDEO PLAYA RECIEVE PROPS:", this.props); + // console.log("pauseVideo called"); + // this.refs.media.children[0].pause(); } componentDidUpdate() { @@ -176,19 +177,28 @@ class VideoPlayer extends React.PureComponent { return (
- {["audio", "application"].indexOf(mediaType) !== -1 && - (!this.playableType() || hasMetadata) && - !unplayable && } - {this.playableType() && - !hasMetadata && - !unplayable && } - {unplayable && ( - - )} -
+

videoPause: {videoPause}

+
+ {["audio", "application"].indexOf(mediaType) !== -1 && + (!this.playableType() || hasMetadata) && + !unplayable && ( + + )} + {this.playableType() && + !hasMetadata && + !unplayable && } + {unplayable && ( + + )} +
+
); } } -export default VideoPlayer; +const select = (state, props) => ({ + videoPause: selectVideoPause(state), +}); + +export default connect(select, {})(VideoPlayer); diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 515a6c8e3..72e0e164d 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -57,10 +57,10 @@ class Video extends React.PureComponent { changeVolume, volume, uri, - videoPause, + // videoPause, } = this.props; - console.log("VIDEO VIEW videoPause:", videoPause); + // console.log("VIDEO VIEW videoPause:", videoPause); const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; @@ -114,7 +114,6 @@ class Video extends React.PureComponent { downloadCompleted={fileInfo.completed} changeVolume={changeVolume} volume={volume} - videoPause={videoPause} /> ))} {!isPlaying && ( From a015a44c9d840a3fa5a0cb0e2d2fc2ba2bd2bfe7 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Mon, 18 Dec 2017 18:12:52 -0500 Subject: [PATCH 3/6] back to connecting selectors through index.js --- src/renderer/component/video/index.js | 4 +- .../component/video/internal/player.jsx | 41 ++++++------------- src/renderer/component/video/view.jsx | 8 +++- 3 files changed, 22 insertions(+), 31 deletions(-) diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index b709dd691..1b79f8275 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -14,7 +14,7 @@ import { } from "redux/selectors/file_info"; import { makeSelectCostInfoForUri } from "redux/selectors/cost_info"; import { selectShowNsfw } from "redux/selectors/settings"; -// import { selectVideoPause } from "redux/selectors/video"; +import { selectVideoPause } from "redux/selectors/video"; import Video from "./view"; import { selectPlayingUri } from "redux/selectors/content"; @@ -28,7 +28,7 @@ const select = (state, props) => ({ playingUri: selectPlayingUri(state), contentType: makeSelectContentTypeForUri(props.uri)(state), volume: selectVolume(state), - // videoPause: selectVideoPause(state), + videoPause: selectVideoPause(state), }); const perform = dispatch => ({ diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index d18733aec..a8b4572c1 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -5,8 +5,8 @@ import player from "render-media"; import fs from "fs"; import LoadingScreen from "./loading-screen"; -import { connect } from "react-redux"; -import { selectVideoPause } from "redux/selectors/video"; +// import { connect } from "react-redux"; +// import { selectVideoPause } from "redux/selectors/video"; class VideoPlayer extends React.PureComponent { static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; @@ -124,12 +124,6 @@ class VideoPlayer extends React.PureComponent { } } - componentWillReceiveProps() { - console.log("!!VIDEO PLAYA RECIEVE PROPS:", this.props); - // console.log("pauseVideo called"); - // this.refs.media.children[0].pause(); - } - componentDidUpdate() { const { contentType, downloadCompleted } = this.props; const { startedPlaying } = this.state; @@ -177,28 +171,19 @@ class VideoPlayer extends React.PureComponent { return (
-

videoPause: {videoPause}

-
- {["audio", "application"].indexOf(mediaType) !== -1 && - (!this.playableType() || hasMetadata) && - !unplayable && ( - - )} - {this.playableType() && - !hasMetadata && - !unplayable && } - {unplayable && ( - - )} -
-
+ {["audio", "application"].indexOf(mediaType) !== -1 && + (!this.playableType() || hasMetadata) && + !unplayable && } + {this.playableType() && + !hasMetadata && + !unplayable && } + {unplayable && ( + + )} +
); } } -const select = (state, props) => ({ - videoPause: selectVideoPause(state), -}); - -export default connect(select, {})(VideoPlayer); +export default VideoPlayer; diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 72e0e164d..5a2b5fc99 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -8,12 +8,18 @@ import NsfwOverlay from "component/nsfwOverlay"; class Video extends React.PureComponent { constructor(props) { super(props); - console.log("PROPS:", props); + console.log("video view props", props); this.state = { showNsfwHelp: false, }; } + componentWillReceiveProps() { + console.log("!!VIDEO PLAYA RECIEVE PROPS:", this.props); + // console.log("pauseVideo called"); + // this.refs.media.children[0].pause(); + } + componentWillUnmount() { this.props.cancelPlay(); } From 2f409a6cbd506a8e4079ab295c3675df81dc1ad8 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Tue, 19 Dec 2017 11:34:39 -0500 Subject: [PATCH 4/6] getting closer... --- src/renderer/component/video/view.jsx | 74 ++++++++++++++------------- src/renderer/redux/selectors/video.js | 10 ++-- 2 files changed, 44 insertions(+), 40 deletions(-) diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 5a2b5fc99..cb474ea72 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -8,15 +8,16 @@ import NsfwOverlay from "component/nsfwOverlay"; class Video extends React.PureComponent { constructor(props) { super(props); - console.log("video view props", props); + // console.log("video view props", props); this.state = { showNsfwHelp: false, + // videoPause: false, }; } - componentWillReceiveProps() { - console.log("!!VIDEO PLAYA RECIEVE PROPS:", this.props); - // console.log("pauseVideo called"); + componentWillReceiveProps(nextProps) { + console.log("VIDEO COMPONENT WILL RECIEVE NEXTPROPS:", nextProps); + // this.setState({videoPause: nextProps.videoPause}); // this.refs.media.children[0].pause(); } @@ -63,10 +64,10 @@ class Video extends React.PureComponent { changeVolume, volume, uri, - // videoPause, + videoPause, } = this.props; - // console.log("VIDEO VIEW videoPause:", videoPause); + console.log("VIDEO VIEW videoPause:", videoPause); const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; @@ -102,35 +103,38 @@ class Video extends React.PureComponent { const poster = metadata.thumbnail; return ( -
- {isPlaying && - (!isReadyToPlay ? ( - - ) : ( - - ))} - {!isPlaying && ( -
- -
- )} - {this.state.showNsfwHelp && } +
+

videoPause: {videoPause}

+
+ {isPlaying && + (!isReadyToPlay ? ( + + ) : ( + + ))} + {!isPlaying && ( +
+ +
+ )} + {this.state.showNsfwHelp && } +
); } diff --git a/src/renderer/redux/selectors/video.js b/src/renderer/redux/selectors/video.js index fc124a69a..e79bf8765 100644 --- a/src/renderer/redux/selectors/video.js +++ b/src/renderer/redux/selectors/video.js @@ -1,9 +1,9 @@ import * as settings from "constants/settings"; import { createSelector } from "reselect"; -const _selectState = state => state.videoPause || false; +const _selectState = state => state.video.videoPause || {}; -export const selectVideoPause = createSelector( - _selectState, - state => state.videoPause || false -); +export const selectVideoPause = createSelector(_selectState, state => { + console.log("VIDEO PAUSE SELECTOR", state); + return state.videoPause; +}); From 92de445e1e1a51cfe77bddff3a4775e20cb43b05 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Tue, 19 Dec 2017 13:20:53 -0500 Subject: [PATCH 5/6] fixed selector; pause working; still need to call action from child component --- .../component/fileDownloadLink/index.js | 2 +- .../component/fileDownloadLink/view.jsx | 5 +- src/renderer/component/video/index.js | 1 + .../component/video/internal/player.jsx | 15 ++-- src/renderer/component/video/view.jsx | 79 +++++++++---------- src/renderer/redux/selectors/video.js | 2 +- 6 files changed, 52 insertions(+), 52 deletions(-) diff --git a/src/renderer/component/fileDownloadLink/index.js b/src/renderer/component/fileDownloadLink/index.js index 9b1141802..e35dc5b94 100644 --- a/src/renderer/component/fileDownloadLink/index.js +++ b/src/renderer/component/fileDownloadLink/index.js @@ -25,7 +25,7 @@ const perform = dispatch => ({ openInShell: path => dispatch(doOpenFileInShell(path)), purchaseUri: uri => dispatch(doPurchaseUri(uri)), restartDownload: (uri, outpoint) => dispatch(doStartDownload(uri, outpoint)), - videoPause: val => dispatch(setVideoPause(val)), + setVideoPause: val => dispatch(setVideoPause(val)), }); export default connect(select, perform)(FileDownloadLink); diff --git a/src/renderer/component/fileDownloadLink/view.jsx b/src/renderer/component/fileDownloadLink/view.jsx index 68499c273..0619460dd 100644 --- a/src/renderer/component/fileDownloadLink/view.jsx +++ b/src/renderer/component/fileDownloadLink/view.jsx @@ -42,13 +42,12 @@ class FileDownloadLink extends React.PureComponent { purchaseUri, costInfo, loading, - videoPause, + setVideoPause, } = this.props; const openFile = () => { openInShell(fileInfo.download_path); - console.log("FileDownloadLink view"); - videoPause(true); + setVideoPause(true); }; if (loading || downloading) { diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index 1b79f8275..04c223f61 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -35,6 +35,7 @@ const perform = dispatch => ({ play: uri => dispatch(doPlayUri(uri)), cancelPlay: () => dispatch(doSetPlayingUri(null)), changeVolume: volume => dispatch(doChangeVolume(volume)), + setVideoPause: val => dispatch(setVideoPause(val)), }); export default connect(select, perform)(Video); diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index a8b4572c1..42b9b4bf2 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -4,9 +4,7 @@ import { Thumbnail } from "component/common"; import player from "render-media"; import fs from "fs"; import LoadingScreen from "./loading-screen"; - -// import { connect } from "react-redux"; -// import { selectVideoPause } from "redux/selectors/video"; +import { setVideoPause } from "../../../redux/actions/video"; class VideoPlayer extends React.PureComponent { static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; @@ -23,6 +21,13 @@ class VideoPlayer extends React.PureComponent { this.togglePlayListener = this.togglePlay.bind(this); } + componentWillReceiveProps(nextProps) { + if (nextProps.videoPause) { + this.refs.media.children[0].pause(); + this.props.confirmVideoPause(false); + } + } + componentDidMount() { const container = this.refs.media; const { @@ -160,15 +165,13 @@ class VideoPlayer extends React.PureComponent { } render() { - const { mediaType, poster, videoPause } = this.props; + const { mediaType, poster } = this.props; const { hasMetadata, unplayable } = this.state; const noMetadataMessage = "Waiting for metadata."; const unplayableMessage = "Sorry, looks like we can't play this file."; const needsMetadata = this.playableType(); - console.log("VideoPlayer render; videoPause:", videoPause); - return (
{["audio", "application"].indexOf(mediaType) !== -1 && diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index cb474ea72..355f13dc8 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -8,19 +8,11 @@ import NsfwOverlay from "component/nsfwOverlay"; class Video extends React.PureComponent { constructor(props) { super(props); - // console.log("video view props", props); this.state = { showNsfwHelp: false, - // videoPause: false, }; } - componentWillReceiveProps(nextProps) { - console.log("VIDEO COMPONENT WILL RECIEVE NEXTPROPS:", nextProps); - // this.setState({videoPause: nextProps.videoPause}); - // this.refs.media.children[0].pause(); - } - componentWillUnmount() { this.props.cancelPlay(); } @@ -65,9 +57,15 @@ class Video extends React.PureComponent { volume, uri, videoPause, + // setVideoPause, } = this.props; - console.log("VIDEO VIEW videoPause:", videoPause); + // console.log("setVideoPause", setVideoPause); + + const confirmVideoPause = val => { + console.log("this.props.setVideoPause:", this.props.setVideoPause); + this.props.setVideoPause(val); + }; const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; @@ -103,38 +101,37 @@ class Video extends React.PureComponent { const poster = metadata.thumbnail; return ( -
-

videoPause: {videoPause}

-
- {isPlaying && - (!isReadyToPlay ? ( - - ) : ( - - ))} - {!isPlaying && ( -
- -
- )} - {this.state.showNsfwHelp && } -
+
+ {isPlaying && + (!isReadyToPlay ? ( + + ) : ( + + ))} + {!isPlaying && ( +
+ +
+ )} + {this.state.showNsfwHelp && }
); } diff --git a/src/renderer/redux/selectors/video.js b/src/renderer/redux/selectors/video.js index e79bf8765..65bf1290f 100644 --- a/src/renderer/redux/selectors/video.js +++ b/src/renderer/redux/selectors/video.js @@ -1,7 +1,7 @@ import * as settings from "constants/settings"; import { createSelector } from "reselect"; -const _selectState = state => state.video.videoPause || {}; +const _selectState = state => state.video || {}; export const selectVideoPause = createSelector(_selectState, state => { console.log("VIDEO PAUSE SELECTOR", state); From 7ccf6c0a92b23fe6ff7198eb4754edd68c36d447 Mon Sep 17 00:00:00 2001 From: Travis Eden Date: Tue, 19 Dec 2017 14:41:00 -0500 Subject: [PATCH 6/6] feature complete --- src/renderer/component/video/index.js | 1 + .../component/video/internal/player.jsx | 3 +-- src/renderer/component/video/view.jsx | 11 ++--------- src/renderer/constants/action_types.js | 2 -- src/renderer/redux/actions/video.js | 18 ++---------------- src/renderer/redux/reducers/video.js | 6 +----- src/renderer/redux/selectors/video.js | 8 ++++---- 7 files changed, 11 insertions(+), 38 deletions(-) diff --git a/src/renderer/component/video/index.js b/src/renderer/component/video/index.js index 04c223f61..f0a1a43f1 100644 --- a/src/renderer/component/video/index.js +++ b/src/renderer/component/video/index.js @@ -3,6 +3,7 @@ import { connect } from "react-redux"; import { doChangeVolume } from "redux/actions/app"; import { selectVolume } from "redux/selectors/app"; import { doPlayUri, doSetPlayingUri } from "redux/actions/content"; +import { setVideoPause } from "redux/actions/video"; import { makeSelectMetadataForUri, makeSelectContentTypeForUri, diff --git a/src/renderer/component/video/internal/player.jsx b/src/renderer/component/video/internal/player.jsx index 42b9b4bf2..e993dac36 100644 --- a/src/renderer/component/video/internal/player.jsx +++ b/src/renderer/component/video/internal/player.jsx @@ -4,7 +4,6 @@ import { Thumbnail } from "component/common"; import player from "render-media"; import fs from "fs"; import LoadingScreen from "./loading-screen"; -import { setVideoPause } from "../../../redux/actions/video"; class VideoPlayer extends React.PureComponent { static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; @@ -24,7 +23,7 @@ class VideoPlayer extends React.PureComponent { componentWillReceiveProps(nextProps) { if (nextProps.videoPause) { this.refs.media.children[0].pause(); - this.props.confirmVideoPause(false); + this.props.setVideoPause(false); } } diff --git a/src/renderer/component/video/view.jsx b/src/renderer/component/video/view.jsx index 355f13dc8..c5c4d8d88 100644 --- a/src/renderer/component/video/view.jsx +++ b/src/renderer/component/video/view.jsx @@ -57,16 +57,9 @@ class Video extends React.PureComponent { volume, uri, videoPause, - // setVideoPause, + setVideoPause, } = this.props; - // console.log("setVideoPause", setVideoPause); - - const confirmVideoPause = val => { - console.log("this.props.setVideoPause:", this.props.setVideoPause); - this.props.setVideoPause(val); - }; - const isPlaying = playingUri === uri; const isReadyToPlay = fileInfo && fileInfo.written_bytes > 0; const obscureNsfw = this.props.obscureNsfw && metadata && metadata.nsfw; @@ -120,7 +113,7 @@ class Video extends React.PureComponent { changeVolume={changeVolume} volume={volume} videoPause={videoPause} - confirmVideoPause={confirmVideoPause} + setVideoPause={setVideoPause} /> ))} {!isPlaying && ( diff --git a/src/renderer/constants/action_types.js b/src/renderer/constants/action_types.js index d83cf10ed..bbf6c520b 100644 --- a/src/renderer/constants/action_types.js +++ b/src/renderer/constants/action_types.js @@ -166,6 +166,4 @@ export const CHANNEL_UNSUBSCRIBE = "CHANNEL_UNSUBSCRIBE"; export const HAS_FETCHED_SUBSCRIPTIONS = "HAS_FETCHED_SUBSCRIPTIONS"; // Video controls -export const VIDEO_PAUSE_STARTED = "VIDEO_PAUSE_STARTED"; -export const VIDEO_PAUSE_COMPLETED = "VIDEO_PAUSE_COMPLETED"; export const SET_VIDEO_PAUSE = "SET_VIDEO_PAUSE"; diff --git a/src/renderer/redux/actions/video.js b/src/renderer/redux/actions/video.js index c4c8ec40a..bf88d2d26 100644 --- a/src/renderer/redux/actions/video.js +++ b/src/renderer/redux/actions/video.js @@ -3,22 +3,8 @@ import * as actions from "constants/action_types"; import type { Action, Dispatch } from "redux/reducers/video"; import lbry from "lbry"; -// export const doVideoPause = ( -// dispatch: Dispatch -// ) => { -// console.log("diVideoPause helllllo"); -// console.log(dispatch); -// return dispatch({type: actions.VIDEO_PAUSE_STARTED}); -// } - -// export const confirmVideoPause = ( -// dispatch: Dispatch -// ) => dispatch({type: actions.VIDEO_PAUSE_COMPLETED}); - -export const setVideoPause = (data: boolean) => (dispatch: Dispatch) => { - console.log("VIDEO ACTION data:", data); - return dispatch({ +export const setVideoPause = (data: boolean) => (dispatch: Dispatch) => + dispatch({ type: actions.SET_VIDEO_PAUSE, data, }); -}; diff --git a/src/renderer/redux/reducers/video.js b/src/renderer/redux/reducers/video.js index 6aafaa9ec..0f18844dd 100644 --- a/src/renderer/redux/reducers/video.js +++ b/src/renderer/redux/reducers/video.js @@ -19,11 +19,7 @@ export default handleActions( [actions.SET_VIDEO_PAUSE]: ( state: VideoState, action: setVideoPause - ): VideoState => { - console.log("VIDEO REDUCER STATE", state); - console.log("VIDEO REDUCER ACTION", action); - return { ...state, videoPause: action.data }; - }, + ): VideoState => ({ ...state, videoPause: action.data }), }, defaultState ); diff --git a/src/renderer/redux/selectors/video.js b/src/renderer/redux/selectors/video.js index 65bf1290f..a41c95803 100644 --- a/src/renderer/redux/selectors/video.js +++ b/src/renderer/redux/selectors/video.js @@ -3,7 +3,7 @@ import { createSelector } from "reselect"; const _selectState = state => state.video || {}; -export const selectVideoPause = createSelector(_selectState, state => { - console.log("VIDEO PAUSE SELECTOR", state); - return state.videoPause; -}); +export const selectVideoPause = createSelector( + _selectState, + state => state.videoPause +);