Merge pull request #880 from daovist/master

Pushing for help with Redux selectors

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)),
+  setVideoPause: val => dispatch(setVideoPause(val)),
 });
 
 export default connect(select, perform)(FileDownloadLink);

src/renderer/component/fileDownloadLink/view.jsx

@@ -42,8 +42,14 @@ class FileDownloadLink extends React.PureComponent {
       purchaseUri,
       costInfo,
       loading,
+      setVideoPause,
     } = this.props;
 
+    const openFile = () => {
+      openInShell(fileInfo.download_path);
+      setVideoPause(true);
+    };
+
     if (loading || downloading) {
       const progress =
           fileInfo && fileInfo.written_bytes
@@ -93,7 +99,7 @@ class FileDownloadLink extends React.PureComponent {
           button="text"
           icon="icon-external-link-square"
           className="no-underline"
-          onClick={() => openInShell(fileInfo.download_path)}
+          onClick={() => openFile()}
         />
       );
     }

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,
@@ -14,6 +15,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,12 +29,14 @@ const select = (state, props) => ({
   playingUri: selectPlayingUri(state),
   contentType: makeSelectContentTypeForUri(props.uri)(state),
   volume: selectVolume(state),
+  videoPause: selectVideoPause(state),
 });
 
 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);

src/renderer/component/video/internal/player.jsx

@@ -20,6 +20,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.setVideoPause(false);
+    }
+  }
+
   componentDidMount() {
     const container = this.refs.media;
     const {

src/renderer/component/video/view.jsx

@@ -56,6 +56,8 @@ class Video extends React.PureComponent {
       changeVolume,
       volume,
       uri,
+      videoPause,
+      setVideoPause,
     } = this.props;
 
     const isPlaying = playingUri === uri;
@@ -110,6 +112,8 @@ class Video extends React.PureComponent {
               downloadCompleted={fileInfo.completed}
               changeVolume={changeVolume}
               volume={volume}
+              videoPause={videoPause}
+              setVideoPause={setVideoPause}
             />
           ))}
         {!isPlaying && (

src/renderer/constants/action_types.js

@@ -164,3 +164,6 @@ 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 SET_VIDEO_PAUSE = "SET_VIDEO_PAUSE";

src/renderer/redux/actions/video.js

@@ -0,0 +1,10 @@
+// @flow
+import * as actions from "constants/action_types";
+import type { Action, Dispatch } from "redux/reducers/video";
+import lbry from "lbry";
+
+export const setVideoPause = (data: boolean) => (dispatch: Dispatch) =>
+  dispatch({
+    type: actions.SET_VIDEO_PAUSE,
+    data,
+  });

src/renderer/redux/reducers/video.js

@@ -0,0 +1,25 @@
+// @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 => ({ ...state, videoPause: action.data }),
+  },
+  defaultState
+);

src/renderer/redux/selectors/video.js

@@ -0,0 +1,9 @@
+import * as settings from "constants/settings";
+import { createSelector } from "reselect";
+
+const _selectState = state => state.video || {};
+
+export const selectVideoPause = createSelector(
+  _selectState,
+  state => state.videoPause
+);

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();