Merge pull request #496 from lbryio/redux_volume

Issue #323 switch volume preference to use redux

ui/js/actions/app.js

@@ -351,3 +351,14 @@ export function doQuit() {
     remote.app.quit();
   };
 }
+
+export function doChangeVolume(volume) {
+  return function(dispatch, getState) {
+    dispatch({
+      type: types.VOLUME_CHANGED,
+      data: {
+        volume,
+      },
+    });
+  };
+}

ui/js/component/video/index.js

@@ -1,8 +1,8 @@
 import React from "react";
 import { connect } from "react-redux";
 import { doCloseModal } from "actions/app";
-import { doNavigate } from "actions/app";
-import { selectCurrentModal } from "selectors/app";
+import { doNavigate, doChangeVolume } from "actions/app";
+import { selectCurrentModal, selectVolume } from "selectors/app";
 import { doPurchaseUri, doLoadVideo } from "actions/content";
 import {
   makeSelectMetadataForUri,
@@ -34,6 +34,7 @@ const makeSelect = () => {
     isLoading: selectIsLoading(state, props),
     isDownloading: selectIsDownloading(state, props),
     contentType: selectContentType(state, props),
+    volume: selectVolume(state, props),
   });
 
   return select;
@@ -43,6 +44,7 @@ const perform = dispatch => ({
   loadVideo: uri => dispatch(doLoadVideo(uri)),
   purchaseUri: uri => dispatch(doPurchaseUri(uri, "affirmPurchaseAndPlay")),
   closeModal: () => dispatch(doCloseModal()),
+  changeVolume: volume => dispatch(doChangeVolume(volume)),
 });
 
 export default connect(makeSelect, perform)(Video);

ui/js/component/video/internal/player.jsx

@@ -3,7 +3,6 @@ import React from "react";
 import { Thumbnail } from "component/common";
 import player from "render-media";
 import fs from "fs";
-import { setSession, getSession } from "utils";
 import LoadingScreen from "./loading-screen";
 
 class VideoPlayer extends React.PureComponent {
@@ -23,7 +22,13 @@ class VideoPlayer extends React.PureComponent {
 
   componentDidMount() {
     const container = this.refs.media;
-    const { contentType, downloadPath, mediaType } = this.props;
+    const {
+      contentType,
+      downloadPath,
+      mediaType,
+      changeVolume,
+      volume,
+    } = this.props;
     const loadedMetadata = e => {
       this.setState({ hasMetadata: true, startedPlaying: true });
       this.refs.media.children[0].play();
@@ -69,9 +74,9 @@ class VideoPlayer extends React.PureComponent {
         win32FullScreenChange.bind(this)
       );
       mediaElement.addEventListener("volumechange", () => {
-        setSession("prefs_volume", mediaElement.volume);
+        changeVolume(mediaElement.volume);
       });
-      mediaElement.volume = this.getPreferredVolume();
+      mediaElement.volume = volume;
     }
   }
 
@@ -116,11 +121,6 @@ class VideoPlayer extends React.PureComponent {
     }
   }
 
-  getPreferredVolume() {
-    const volumePreference = parseFloat(getSession("prefs_volume"));
-    return isNaN(volumePreference) ? 1 : volumePreference;
-  }
-
   componentDidUpdate() {
     const { contentType, downloadCompleted } = this.props;
     const { startedPlaying } = this.state;

ui/js/component/video/view.jsx

@@ -66,6 +66,8 @@ class Video extends React.PureComponent {
       isDownloading,
       fileInfo,
       contentType,
+      changeVolume,
+      volume,
     } = this.props;
     const { isPlaying = false } = this.state;
 
@@ -119,6 +121,8 @@ class Video extends React.PureComponent {
                 mediaType={mediaType}
                 contentType={contentType}
                 downloadCompleted={fileInfo.completed}
+                changeVolume={changeVolume}
+                volume={volume}
               />)}
         {!isPlaying &&
           <div

ui/js/constants/action_types.js

@@ -9,6 +9,7 @@ export const CHANGE_AFTER_AUTH_PATH = "CHANGE_AFTER_AUTH_PATH";
 export const DAEMON_READY = "DAEMON_READY";
 export const DAEMON_VERSION_MATCH = "DAEMON_VERSION_MATCH";
 export const DAEMON_VERSION_MISMATCH = "DAEMON_VERSION_MISMATCH";
+export const VOLUME_CHANGED = "VOLUME_CHANGED";
 
 // Upgrades
 export const UPGRADE_CANCELLED = "UPGRADE_CANCELLED";

ui/js/reducers/app.js

@@ -25,6 +25,7 @@ const defaultState = {
   hasSignature: false,
   badgeNumber: 0,
   history: { index: 0, stack: [] },
+  volume: sessionStorage.getItem("volume") || 1,
 };
 
 reducers[types.DAEMON_READY] = function(state, action) {
@@ -219,6 +220,12 @@ reducers[types.HISTORY_NAVIGATE] = (state, action) => {
   });
 };
 
+reducers[types.VOLUME_CHANGED] = function(state, action) {
+  return Object.assign({}, state, {
+    volume: action.data.volume,
+  });
+};
+
 export default function reducer(state = defaultState, action) {
   const handler = reducers[action.type];
   if (handler) return handler(state, action);

ui/js/selectors/app.js

@@ -259,3 +259,5 @@ export const selectHistoryForward = createSelector(_selectState, state => {
     return history.stack[index];
   }
 });
+
+export const selectVolume = createSelector(_selectState, state => state.volume);