move splash animation out of settings
This commit is contained in:
parent
67d1652cf4
commit
1cc7be746b
7 changed files with 29 additions and 12 deletions
|
@ -1,18 +1,16 @@
|
||||||
import * as MODALS from 'constants/modal_types';
|
import * as MODALS from 'constants/modal_types';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { selectDaemonVersionMatched, selectModal } from 'redux/selectors/app';
|
import { selectDaemonVersionMatched, selectModal, selectSplashAnimationEnabled } from 'redux/selectors/app';
|
||||||
import { doCheckDaemonVersion, doOpenModal, doHideModal } from 'redux/actions/app';
|
import { doCheckDaemonVersion, doOpenModal, doHideModal, doToggleSplashAnimation } from 'redux/actions/app';
|
||||||
import { doSetClientSetting, doClearDaemonSetting } from 'redux/actions/settings';
|
import { doClearDaemonSetting } from 'redux/actions/settings';
|
||||||
import { DAEMON_SETTINGS, SETTINGS } from 'lbry-redux';
|
import { DAEMON_SETTINGS } from 'lbry-redux';
|
||||||
import { doToast } from 'redux/actions/notifications';
|
import { doToast } from 'redux/actions/notifications';
|
||||||
import SplashScreen from './view';
|
import SplashScreen from './view';
|
||||||
|
|
||||||
import { makeSelectClientSetting } from 'redux/selectors/settings';
|
|
||||||
|
|
||||||
const select = state => ({
|
const select = state => ({
|
||||||
modal: selectModal(state),
|
modal: selectModal(state),
|
||||||
daemonVersionMatched: selectDaemonVersionMatched(state),
|
daemonVersionMatched: selectDaemonVersionMatched(state),
|
||||||
animationHidden: makeSelectClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION)(state),
|
animationHidden: selectSplashAnimationEnabled(state),
|
||||||
});
|
});
|
||||||
|
|
||||||
const perform = dispatch => ({
|
const perform = dispatch => ({
|
||||||
|
@ -20,7 +18,7 @@ const perform = dispatch => ({
|
||||||
notifyUnlockWallet: shouldTryWithBlankPassword =>
|
notifyUnlockWallet: shouldTryWithBlankPassword =>
|
||||||
dispatch(doOpenModal(MODALS.WALLET_UNLOCK, { shouldTryWithBlankPassword })),
|
dispatch(doOpenModal(MODALS.WALLET_UNLOCK, { shouldTryWithBlankPassword })),
|
||||||
hideModal: () => dispatch(doHideModal()),
|
hideModal: () => dispatch(doHideModal()),
|
||||||
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
|
toggleSplashAnimation: () => dispatch(doToggleSplashAnimation()),
|
||||||
clearWalletServers: () => dispatch(doClearDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS)),
|
clearWalletServers: () => dispatch(doClearDaemonSetting(DAEMON_SETTINGS.LBRYUM_SERVERS)),
|
||||||
doShowSnackBar: message => dispatch(doToast({ isError: true, message })),
|
doShowSnackBar: message => dispatch(doToast({ isError: true, message })),
|
||||||
});
|
});
|
||||||
|
|
|
@ -3,7 +3,7 @@ import type { Node } from 'react';
|
||||||
import * as MODALS from 'constants/modal_types';
|
import * as MODALS from 'constants/modal_types';
|
||||||
import * as ICONS from 'constants/icons';
|
import * as ICONS from 'constants/icons';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Lbry, SETTINGS } from 'lbry-redux';
|
import { Lbry } from 'lbry-redux';
|
||||||
import Button from 'component/button';
|
import Button from 'component/button';
|
||||||
import ModalWalletUnlock from 'modal/modalWalletUnlock';
|
import ModalWalletUnlock from 'modal/modalWalletUnlock';
|
||||||
import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
|
import ModalIncompatibleDaemon from 'modal/modalIncompatibleDaemon';
|
||||||
|
@ -28,7 +28,7 @@ type Props = {
|
||||||
id: string,
|
id: string,
|
||||||
},
|
},
|
||||||
animationHidden: boolean,
|
animationHidden: boolean,
|
||||||
setClientSetting: (string, boolean) => void,
|
toggleSplashAnimation: () => void,
|
||||||
clearWalletServers: () => void,
|
clearWalletServers: () => void,
|
||||||
doShowSnackBar: string => void,
|
doShowSnackBar: string => void,
|
||||||
};
|
};
|
||||||
|
@ -242,7 +242,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { error, details } = this.state;
|
const { error, details } = this.state;
|
||||||
const { animationHidden, setClientSetting } = this.props;
|
const { animationHidden, toggleSplashAnimation } = this.props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="splash">
|
<div className="splash">
|
||||||
|
@ -290,7 +290,7 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
|
||||||
<Button
|
<Button
|
||||||
className="splash__animation-toggle"
|
className="splash__animation-toggle"
|
||||||
label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
|
label={!animationHidden ? __('I feel woosy! Stop spinning!') : __('Spin Spin Sugar')}
|
||||||
onClick={() => setClientSetting(SETTINGS.HIDE_SPLASH_ANIMATION, !animationHidden)}
|
onClick={() => toggleSplashAnimation()}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
{error && (
|
{error && (
|
||||||
|
|
|
@ -29,6 +29,7 @@ export const SET_ALLOW_ANALYTICS = 'SET_ALLOW_ANALYTICS';
|
||||||
export const SET_HAS_NAVIGATED = 'SET_HAS_NAVIGATED';
|
export const SET_HAS_NAVIGATED = 'SET_HAS_NAVIGATED';
|
||||||
export const SET_SYNC_LOCK = 'SET_SYNC_LOCK';
|
export const SET_SYNC_LOCK = 'SET_SYNC_LOCK';
|
||||||
export const TOGGLE_YOUTUBE_SYNC_INTEREST = 'TOGGLE_YOUTUBE_SYNC_INTEREST';
|
export const TOGGLE_YOUTUBE_SYNC_INTEREST = 'TOGGLE_YOUTUBE_SYNC_INTEREST';
|
||||||
|
export const TOGGLE_SPLASH_ANIMATION = 'TOGGLE_SPLASH_ANIMATION';
|
||||||
|
|
||||||
// Navigation
|
// Navigation
|
||||||
export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH';
|
export const CHANGE_AFTER_AUTH_PATH = 'CHANGE_AFTER_AUTH_PATH';
|
||||||
|
|
|
@ -676,3 +676,9 @@ export function doToggleInterestedInYoutubeSync() {
|
||||||
type: ACTIONS.TOGGLE_YOUTUBE_SYNC_INTEREST,
|
type: ACTIONS.TOGGLE_YOUTUBE_SYNC_INTEREST,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function doToggleSplashAnimation() {
|
||||||
|
return {
|
||||||
|
type: ACTIONS.TOGGLE_SPLASH_ANIMATION,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
|
@ -37,6 +37,7 @@ export type AppState = {
|
||||||
isUpgradeSkipped: ?boolean,
|
isUpgradeSkipped: ?boolean,
|
||||||
hasClickedComment: boolean,
|
hasClickedComment: boolean,
|
||||||
enhancedLayout: boolean,
|
enhancedLayout: boolean,
|
||||||
|
splashAnimationEnabled: boolean,
|
||||||
searchOptionsExpanded: boolean,
|
searchOptionsExpanded: boolean,
|
||||||
isPasswordSaved: boolean,
|
isPasswordSaved: boolean,
|
||||||
welcomeVersion: number,
|
welcomeVersion: number,
|
||||||
|
@ -70,6 +71,7 @@ const defaultState: AppState = {
|
||||||
isUpgradeAvailable: undefined,
|
isUpgradeAvailable: undefined,
|
||||||
isUpgradeSkipped: undefined,
|
isUpgradeSkipped: undefined,
|
||||||
enhancedLayout: false,
|
enhancedLayout: false,
|
||||||
|
splashAnimationEnabled: true,
|
||||||
searchOptionsExpanded: false,
|
searchOptionsExpanded: false,
|
||||||
currentScroll: 0,
|
currentScroll: 0,
|
||||||
scrollHistory: [0],
|
scrollHistory: [0],
|
||||||
|
@ -291,6 +293,13 @@ reducers[ACTIONS.TOGGLE_YOUTUBE_SYNC_INTEREST] = (state, action) => {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
reducers[ACTIONS.TOGGLE_SPLASH_ANIMATION] = (state, action) => {
|
||||||
|
return {
|
||||||
|
...state,
|
||||||
|
splashAnimationEnabled: !state.splashAnimationEnabled,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (state, action) => {
|
reducers[LBRY_REDUX_ACTIONS.USER_STATE_POPULATE] = (state, action) => {
|
||||||
const { welcomeVersion, allowAnalytics } = action.data;
|
const { welcomeVersion, allowAnalytics } = action.data;
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -82,3 +82,5 @@ export const selectScrollStartingPosition = createSelector(selectState, state =>
|
||||||
export const selectIsPasswordSaved = createSelector(selectState, state => state.isPasswordSaved);
|
export const selectIsPasswordSaved = createSelector(selectState, state => state.isPasswordSaved);
|
||||||
|
|
||||||
export const selectInterestedInYoutubeSync = createSelector(selectState, state => state.interestedInYoutubeSync);
|
export const selectInterestedInYoutubeSync = createSelector(selectState, state => state.interestedInYoutubeSync);
|
||||||
|
|
||||||
|
export const selectSplashAnimationEnabled = createSelector(selectState, state => state.splashAnimationEnabled);
|
||||||
|
|
|
@ -57,6 +57,7 @@ const appFilter = createFilter('app', [
|
||||||
'allowAnalytics',
|
'allowAnalytics',
|
||||||
'welcomeVersion',
|
'welcomeVersion',
|
||||||
'interestedInYoutubeSync',
|
'interestedInYoutubeSync',
|
||||||
|
'splashAnimationEnabled',
|
||||||
]);
|
]);
|
||||||
// We only need to persist the receiveAddress for the wallet
|
// We only need to persist the receiveAddress for the wallet
|
||||||
const walletFilter = createFilter('wallet', ['receiveAddress']);
|
const walletFilter = createFilter('wallet', ['receiveAddress']);
|
||||||
|
|
Loading…
Add table
Reference in a new issue