move splash animation out of settings

This commit is contained in:
Sean Yesmunt 2020-11-09 12:22:38 -05:00
parent 67d1652cf4
commit 1cc7be746b
7 changed files with 29 additions and 12 deletions

View file

@ -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 })),
}); });

View file

@ -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 && (

View file

@ -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';

View file

@ -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,
};
}

View file

@ -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 {

View file

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

View file

@ -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']);