diff --git a/src/ui/component/fileViewer/index.js b/src/ui/component/fileViewer/index.js index bc8fd874d..492cff0ad 100644 --- a/src/ui/component/fileViewer/index.js +++ b/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( diff --git a/src/ui/component/fileViewer/internal/player.jsx b/src/ui/component/fileViewer/internal/player.jsx index a63a86890..c6bcc0985 100644 --- a/src/ui/component/fileViewer/internal/player.jsx +++ b/src/ui/component/fileViewer/internal/player.jsx @@ -32,6 +32,8 @@ type Props = { savePosition: number => void, changeVolume: number => void, viewerContainer: { current: ElementRef }, + changeMute: boolean => void, + muted: boolean, }; type State = { @@ -187,6 +189,8 @@ class MediaPlayer extends React.PureComponent { savePosition, downloadPath, fileName, + muted, + changeMute, } = this.props; // @if TARGET='app' @@ -251,9 +255,11 @@ class MediaPlayer extends React.PureComponent { }); 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 diff --git a/src/ui/component/fileViewer/view.jsx b/src/ui/component/fileViewer/view.jsx index 108b4b3d5..1399460bc 100644 --- a/src/ui/component/fileViewer/view.jsx +++ b/src/ui/component/fileViewer/view.jsx @@ -54,6 +54,8 @@ type Props = { thumbnail: ?string, isPlayableType: boolean, viewerContainer: { current: ElementRef }, + changeMute: boolean => void, + muted: boolean, }; class FileViewer extends React.PureComponent { @@ -231,6 +233,8 @@ class FileViewer extends React.PureComponent { viewerContainer, thumbnail, nsfw, + muted, + changeMute, } = this.props; const isPlaying = playingUri === uri; @@ -290,6 +294,8 @@ class FileViewer extends React.PureComponent { onFinishCb={this.onFileFinishCb} playingUri={playingUri} viewerContainer={viewerContainer} + muted={muted} + changeMute={changeMute} /> )} diff --git a/src/ui/constants/action_types.js b/src/ui/constants/action_types.js index 993f8c2cd..4adf95aef 100644 --- a/src/ui/constants/action_types.js +++ b/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'; diff --git a/src/ui/redux/actions/app.js b/src/ui/redux/actions/app.js index db18e0fed..5ed1b624e 100644 --- a/src/ui/redux/actions/app.js +++ b/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, diff --git a/src/ui/redux/reducers/app.js b/src/ui/redux/reducers/app.js index bea508dcf..f1410cd2c 100644 --- a/src/ui/redux/reducers/app.js +++ b/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, diff --git a/src/ui/redux/selectors/app.js b/src/ui/redux/selectors/app.js index 7ddd1ae03..ad9046b38 100644 --- a/src/ui/redux/selectors/app.js +++ b/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