Make the volume control remember if muted

src/ui/component/fileViewer/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import * as settings from 'constants/settings';
-import { doChangeVolume } from 'redux/actions/app';
-import { selectVolume } from 'redux/selectors/app';
+import { doChangeVolume, doChangeMute } from 'redux/actions/app';
+import { selectVolume, selecetMute } from 'redux/selectors/app';
 import { doPlayUri, doSetPlayingUri, savePosition } from 'redux/actions/content';
 import { doClaimEligiblePurchaseRewards, makeSelectCostInfoForUri } from 'lbryinc';
 import {
@@ -37,6 +37,7 @@ const select = (state, props) => ({
   nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state),
   nsfw: makeSelectClaimIsNsfw(props.uri)(state),
   thumbnail: makeSelectThumbnailForUri(props.uri)(state),
+  muted: selecetMute(state),
 });
 
 const perform = dispatch => ({
@@ -45,6 +46,7 @@ const perform = dispatch => ({
   changeVolume: volume => dispatch(doChangeVolume(volume)),
   claimRewards: () => dispatch(doClaimEligiblePurchaseRewards()),
   savePosition: (claimId, outpoint, position) => dispatch(savePosition(claimId, outpoint, position)),
+  changeMute: muted => dispatch(doChangeMute(muted)),
 });
 
 export default connect(

src/ui/component/fileViewer/internal/player.jsx

@@ -32,6 +32,8 @@ type Props = {
   savePosition: number => void,
   changeVolume: number => void,
   viewerContainer: { current: ElementRef<any> },
+  changeMute: boolean => void,
+  muted: boolean,
 };
 
 type State = {
@@ -187,6 +189,8 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       savePosition,
       downloadPath,
       fileName,
+      muted,
+      changeMute,
     } = this.props;
 
     // @if TARGET='app'
@@ -251,9 +255,11 @@ class MediaPlayer extends React.PureComponent<Props, State> {
       });
       mediaElement.addEventListener('webkitfullscreenchange', win32FullScreenChange.bind(this));
       mediaElement.addEventListener('volumechange', () => {
+        changeMute(mediaElement.muted);
         changeVolume(mediaElement.volume);
       });
       mediaElement.volume = volume;
+      mediaElement.muted = muted;
       mediaElement.addEventListener('dblclick', this.handleDoubleClick);
     }
     // @endif

src/ui/component/fileViewer/view.jsx

@@ -54,6 +54,8 @@ type Props = {
   thumbnail: ?string,
   isPlayableType: boolean,
   viewerContainer: { current: ElementRef<any> },
+  changeMute: boolean => void,
+  muted: boolean,
 };
 
 class FileViewer extends React.PureComponent<Props> {
@@ -231,6 +233,8 @@ class FileViewer extends React.PureComponent<Props> {
       viewerContainer,
       thumbnail,
       nsfw,
+      muted,
+      changeMute,
     } = this.props;
 
     const isPlaying = playingUri === uri;
@@ -290,6 +294,8 @@ class FileViewer extends React.PureComponent<Props> {
                   onFinishCb={this.onFileFinishCb}
                   playingUri={playingUri}
                   viewerContainer={viewerContainer}
+                  muted={muted}
+                  changeMute={changeMute}
                 />
               </Suspense>
             )}

src/ui/constants/action_types.js

@@ -13,6 +13,7 @@ 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';
+export const VOLUME_MUTED = 'VOLUME_MUTED';
 export const ADD_COMMENT = 'ADD_COMMENT';
 export const SHOW_MODAL = 'SHOW_MODAL';
 export const HIDE_MODAL = 'HIDE_MODAL';

src/ui/redux/actions/app.js

@@ -376,6 +376,17 @@ export function doChangeVolume(volume) {
   };
 }
 
+export function doChangeMute(muted) {
+  return dispatch => {
+    dispatch({
+      type: ACTIONS.VOLUME_MUTED,
+      data: {
+        muted,
+      },
+    });
+  };
+}
+
 export function doClickCommentButton() {
   return {
     type: ACTIONS.ADD_COMMENT,

src/ui/redux/reducers/app.js

@@ -51,6 +51,7 @@ const defaultState: AppState = {
   hasSignature: false,
   badgeNumber: 0,
   volume: Number(sessionStorage.getItem('volume')) || 1,
+  muted: false,
   autoUpdateDownloaded: false,
   autoUpdateDeclined: false,
   modalsAllowed: true,
@@ -210,6 +211,11 @@ reducers[ACTIONS.VOLUME_CHANGED] = (state, action) =>
     volume: action.data.volume,
   });
 
+reducers[ACTIONS.VOLUME_MUTED] = (state, action) =>
+  Object.assign({}, state, {
+    muted: action.data.muted,
+  });
+
 reducers[ACTIONS.HISTORY_NAVIGATE] = state =>
   Object.assign({}, state, {
     modal: undefined,

src/ui/redux/selectors/app.js

@@ -100,6 +100,11 @@ export const selectVolume = createSelector(
   state => state.volume
 );
 
+export const selecetMute = createSelector(
+  selectState,
+  state => state.muted
+);
+
 export const selectUpgradeTimer = createSelector(
   selectState,
   state => state.checkUpgradeTimer