Pushing for help with Redux selectors #880

Merged
daovist merged 6 commits from master into master 2017-12-19 21:09:59 +01:00
10 changed files with 74 additions and 2 deletions

View file

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

View file

@ -42,8 +42,14 @@ class FileDownloadLink extends React.PureComponent {
purchaseUri,
costInfo,
loading,
setVideoPause,
} = this.props;
const openFile = () => {
openInShell(fileInfo.download_path);
setVideoPause(true);
};
if (loading || downloading) {
const progress =
fileInfo && fileInfo.written_bytes
@ -93,7 +99,7 @@ class FileDownloadLink extends React.PureComponent {
button="text"
icon="icon-external-link-square"
className="no-underline"
onClick={() => openInShell(fileInfo.download_path)}
onClick={() => openFile()}
/>
);
}

View file

@ -3,6 +3,7 @@ import { connect } from "react-redux";
import { doChangeVolume } from "redux/actions/app";
import { selectVolume } from "redux/selectors/app";
import { doPlayUri, doSetPlayingUri } from "redux/actions/content";
import { setVideoPause } from "redux/actions/video";
import {
makeSelectMetadataForUri,
makeSelectContentTypeForUri,
@ -14,6 +15,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,12 +29,14 @@ const select = (state, props) => ({
playingUri: selectPlayingUri(state),
contentType: makeSelectContentTypeForUri(props.uri)(state),
volume: selectVolume(state),
videoPause: selectVideoPause(state),
});
const perform = dispatch => ({
play: uri => dispatch(doPlayUri(uri)),
cancelPlay: () => dispatch(doSetPlayingUri(null)),
changeVolume: volume => dispatch(doChangeVolume(volume)),
setVideoPause: val => dispatch(setVideoPause(val)),
});
export default connect(select, perform)(Video);

View file

@ -20,6 +20,13 @@ class VideoPlayer extends React.PureComponent {
this.togglePlayListener = this.togglePlay.bind(this);
}
componentWillReceiveProps(nextProps) {
if (nextProps.videoPause) {
this.refs.media.children[0].pause();
this.props.setVideoPause(false);
liamcardenas commented 2017-12-19 20:47:37 +01:00 (Migrated from github.com)
Review

is this (this.props.setVideoPause(false);) necessary? can we trigger this, instead, when they push "play" in app?

is this (`this.props.setVideoPause(false);`) necessary? can we trigger this, instead, when they push "play" in app?
}
}
componentDidMount() {
const container = this.refs.media;
const {

View file

@ -56,6 +56,8 @@ class Video extends React.PureComponent {
changeVolume,
liamcardenas commented 2017-12-19 00:00:57 +01:00 (Migrated from github.com)
Review

you want this in here, and then you want to pass it into VideoPlayer

you want this in here, and then you want to pass it into VideoPlayer
volume,
uri,
videoPause,
setVideoPause,
} = this.props;
const isPlaying = playingUri === uri;
@ -110,6 +112,8 @@ class Video extends React.PureComponent {
downloadCompleted={fileInfo.completed}
changeVolume={changeVolume}
volume={volume}
videoPause={videoPause}
setVideoPause={setVideoPause}
/>
))}
{!isPlaying && (

View file

@ -164,3 +164,6 @@ 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 SET_VIDEO_PAUSE = "SET_VIDEO_PAUSE";

View file

@ -0,0 +1,10 @@
// @flow
import * as actions from "constants/action_types";
import type { Action, Dispatch } from "redux/reducers/video";
import lbry from "lbry";
export const setVideoPause = (data: boolean) => (dispatch: Dispatch) =>
dispatch({
type: actions.SET_VIDEO_PAUSE,
data,
});

View file

@ -0,0 +1,25 @@
// @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 => ({ ...state, videoPause: action.data }),
},
defaultState
);

View file

@ -0,0 +1,9 @@
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
import * as settings from "constants/settings";
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
import { createSelector } from "reselect";
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
const _selectState = state => state.video || {};
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
export const selectVideoPause = createSelector(
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
_selectState,
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
state => state.videoPause
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`
);
liamcardenas commented 2017-12-19 00:23:53 +01:00 (Migrated from github.com)
Review

this should be

const _selectState = state => state.video || {};

this should be `const _selectState = state => state.video || {};`

View file

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