Allow selecting an active channel by default
This commit is contained in:
parent
b4a76f4169
commit
fa1f3abbdc
7 changed files with 26 additions and 4 deletions
|
@ -3,6 +3,7 @@ import { selectMyChannelClaims, selectClaimsByUri, selectOdyseeMembershipForUri
|
|||
import { selectActiveChannelClaim, selectIncognito } from 'redux/selectors/app';
|
||||
import { doSetActiveChannel, doSetIncognito } from 'redux/actions/app';
|
||||
import { doFetchUserMemberships } from 'redux/actions/user';
|
||||
import { doSetClientSetting } from 'redux/actions/settings';
|
||||
import ChannelSelector from './view';
|
||||
|
||||
const select = (state, props) => {
|
||||
|
@ -17,8 +18,11 @@ const select = (state, props) => {
|
|||
};
|
||||
};
|
||||
|
||||
export default connect(select, {
|
||||
const perform = {
|
||||
doSetActiveChannel,
|
||||
doSetIncognito,
|
||||
doFetchUserMemberships,
|
||||
})(ChannelSelector);
|
||||
doSetClientSetting,
|
||||
};
|
||||
|
||||
export default connect(select, perform)(ChannelSelector);
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as SETTINGS from 'constants/settings';
|
||||
import classnames from 'classnames';
|
||||
import React from 'react';
|
||||
import ChannelThumbnail from 'component/channelThumbnail';
|
||||
|
@ -23,6 +24,8 @@ type Props = {
|
|||
claimsByUri: { [string]: any },
|
||||
doFetchUserMemberships: (claimIdCsv: string) => void,
|
||||
odyseeMembershipByUri: (uri: string) => string,
|
||||
storeSelection?: boolean,
|
||||
doSetClientSetting: (key: string, value: string, pushPrefs: boolean) => void,
|
||||
};
|
||||
|
||||
type ListItemProps = {
|
||||
|
@ -76,6 +79,8 @@ function ChannelSelector(props: Props) {
|
|||
odyseeMembershipByUri,
|
||||
claimsByUri,
|
||||
doFetchUserMemberships,
|
||||
storeSelection,
|
||||
doSetClientSetting,
|
||||
} = props;
|
||||
|
||||
const {
|
||||
|
@ -88,6 +93,10 @@ function ChannelSelector(props: Props) {
|
|||
function handleChannelSelect(channelClaim) {
|
||||
doSetIncognito(false);
|
||||
doSetActiveChannel(channelClaim.claim_id);
|
||||
|
||||
if (storeSelection) {
|
||||
doSetClientSetting(SETTINGS.ACTIVE_CHANNEL_CLAIM, channelClaim.claim_id, true);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
|
@ -44,6 +44,7 @@ export const VIDEO_THEATER_MODE = 'video_theater_mode';
|
|||
export const VIDEO_PLAYBACK_RATE = 'video_playback_rate';
|
||||
export const PREFERRED_CURRENCY = 'preferred_currency';
|
||||
export const DEFAULT_VIDEO_QUALITY = 'default_video_quality';
|
||||
export const ACTIVE_CHANNEL_CLAIM = 'active_channel_claim';
|
||||
|
||||
export const SETTINGS_GRP = {
|
||||
APPEARANCE: 'appearance',
|
||||
|
|
|
@ -33,4 +33,5 @@ export const CLIENT_SYNC_KEYS = [
|
|||
SETTINGS.LANGUAGE,
|
||||
SETTINGS.HOMEPAGE_ORDER,
|
||||
SETTINGS.PREFERRED_CURRENCY,
|
||||
SETTINGS.ACTIVE_CHANNEL_CLAIM,
|
||||
];
|
||||
|
|
|
@ -56,7 +56,8 @@ export default function ChannelsPage(props: Props) {
|
|||
return (
|
||||
<Page className="channelsPage-wrapper">
|
||||
<h1 className="section__title section__title--margin-bottom">{__('Active channel')}</h1>
|
||||
<ChannelSelector />
|
||||
<span className="section__subtitle ">{__('You can select a new active channel by default')}</span>
|
||||
<ChannelSelector storeSelection />
|
||||
|
||||
<div className="card-stack">
|
||||
{hasYoutubeChannels && <YoutubeTransferStatus hideChannelLink />}
|
||||
|
|
|
@ -37,6 +37,7 @@ const defaultState = {
|
|||
[SETTINGS.TAGS_ACKNOWLEDGED]: false,
|
||||
[SETTINGS.ENABLE_SYNC]: IS_WEB,
|
||||
[SETTINGS.ENABLE_PUBLISH_PREVIEW]: true,
|
||||
[SETTINGS.ACTIVE_CHANNEL_CLAIM]: undefined,
|
||||
|
||||
// UI
|
||||
[SETTINGS.LANGUAGE]: null,
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
import { createSelector } from 'reselect';
|
||||
import * as SETTINGS from 'constants/settings';
|
||||
import { selectClaimWithId, selectMyChannelClaims, selectStakedLevelForChannelUri } from 'redux/selectors/claims';
|
||||
import { selectUserEmail } from 'redux/selectors/user';
|
||||
import { selectClientSetting } from 'redux/selectors/settings';
|
||||
|
||||
export const selectState = (state) => state.app || {};
|
||||
|
||||
|
@ -68,8 +70,9 @@ export const selectActiveChannelId = (state) => selectState(state).activeChannel
|
|||
export const selectActiveChannelClaim = createSelector(
|
||||
(state) => selectClaimWithId(state, selectActiveChannelId(state)), // i.e. 'byId[activeChannelId]' specifically, instead of just 'byId'.
|
||||
(state) => selectUserEmail(state),
|
||||
(state) => selectClaimWithId(state, selectClientSetting(state, SETTINGS.ACTIVE_CHANNEL_CLAIM)),
|
||||
selectMyChannelClaims,
|
||||
(activeChannelClaim, userEmail, myChannelClaims) => {
|
||||
(activeChannelClaim, userEmail, storedChannel, myChannelClaims) => {
|
||||
// Null: has none. Undefined: not resolved, default state, could have or not
|
||||
if (!userEmail || myChannelClaims === null) {
|
||||
return null;
|
||||
|
@ -79,6 +82,8 @@ export const selectActiveChannelClaim = createSelector(
|
|||
|
||||
if (activeChannelClaim) return activeChannelClaim;
|
||||
|
||||
if (storedChannel) return storedChannel;
|
||||
|
||||
const myChannelClaimsByEffectiveAmount = myChannelClaims.slice().sort((a, b) => {
|
||||
const effectiveAmountA = (a.meta && Number(a.meta.effective_amount)) || 0;
|
||||
const effectiveAmountB = (b.meta && Number(b.meta.effective_amount)) || 0;
|
||||
|
|
Loading…
Reference in a new issue