diff --git a/ui/js/actions/app.js b/ui/js/actions/app.js index e70e9767f..34cceed37 100644 --- a/ui/js/actions/app.js +++ b/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, + }, + }); + }; +} diff --git a/ui/js/component/video/index.js b/ui/js/component/video/index.js index 98db6b35a..dc4b465cd 100644 --- a/ui/js/component/video/index.js +++ b/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); diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 28cb554d0..f81f95e68 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/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; diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index 3d10520a2..4e396ddd4 100644 --- a/ui/js/component/video/view.jsx +++ b/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 &&
{ }); }; +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); diff --git a/ui/js/selectors/app.js b/ui/js/selectors/app.js index 8d9f34741..1ad6a81b9 100644 --- a/ui/js/selectors/app.js +++ b/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);