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

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

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 => ({

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 (
       <div>
         {["audio", "application"].indexOf(mediaType) !== -1 &&

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 && (

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";

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,
+  });
+};

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

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

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