LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

initial support for block/mute

Browse source
This commit is contained in:
Sean Yesmunt 2021-02-25 12:43:56 -05:00
parent 277a1d5d1f
commit 33a0b063c4
63 changed files with 1015 additions and 502 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
flow-typed/Comment.js vendored
View file

@ -27,6 +27,10 @@ declare type CommentsState = {
myReactsByCommentId: any,
othersReactsByCommentId: any,
pendingCommentReactions: Array<string>,
moderationBlockList: ?Array<string>,
fetchingModerationBlockList: boolean,
blockingByUri: {},
unBlockingByUri: {},
};
declare type CommentReactParams = {

4
package.json
View file

@ -53,7 +53,7 @@
"electron-updater": "^4.2.4",
"express": "^4.17.1",
"if-env": "^1.0.4",
"remove-markdown": "^0.3.0",
"remove-markdown": "^0.3.0",
"tempy": "^0.6.0",
"videojs-logo": "^2.1.4"
},
@ -184,7 +184,7 @@
"redux-thunk": "^2.2.0",
"remark": "^9.0.0",
"remark-attr": "^0.8.3",
"remark-breaks": "^1.0.5",
"remark-breaks": "^1.0.5",
"remark-emoji": "^2.0.1",
"remark-frontmatter": "^2.0.0",
"remark-react": "^8.0.0",

6
ui/comments.js
View file

@ -6,6 +6,8 @@ const Comments = {
enabled: Boolean(COMMENT_SERVER_API),
moderation_block: (params: ModerationBlockParams) => fetchCommentsApi('moderation.Block', params),
moderation_unblock: (params: ModerationBlockParams) => fetchCommentsApi('moderation.UnBlock', params),
moderation_block_list: (params: ModerationBlockParams) => fetchCommentsApi('moderation.BlockedList', params),
comment_list: (params: CommentListParams) => fetchCommentsApi('comment.List', params),
comment_abandon: (params: CommentAbandonParams) => fetchCommentsApi('comment.Abandon', params),
};
@ -30,8 +32,8 @@ function fetchCommentsApi(method: string, params: {}) {
};
return fetch(url, options)
.then(res => res.json())
.then(res => res.result);
.then((res) => res.json())
.then((res) => res.result);
}
export default Comments;

12
ui/component/abandonedChannelPreview/index.js
View file

@ -1,14 +1,6 @@
import { connect } from 'react-redux';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { doChannelUnsubscribe } from 'redux/actions/subscriptions';
import { doOpenModal } from 'redux/actions/app';
import AbandonedChannelPreview from './view';
const select = (state, props) => ({
blockedChannelUris: selectBlockedChannels(state),
});
const select = (state, props) => ({});
export default connect(select, {
doChannelUnsubscribe,
doOpenModal,
})(AbandonedChannelPreview);
export default connect(select)(AbandonedChannelPreview);

45
ui/component/abandonedChannelPreview/view.jsx
View file

@ -2,28 +2,18 @@
import React from 'react';
import classnames from 'classnames';
import ChannelThumbnail from 'component/channelThumbnail';
import Button from 'component/button';
import { parseURI } from 'lbry-redux';
import * as ICONS from '../../constants/icons';
import * as MODALS from 'constants/modal_types';
type SubscriptionArgs = {
channelName: string,
uri: string,
};
import ChannelBlockButton from 'component/channelBlockButton';
import ChannelMuteButton from 'component/channelMuteButton';
type Props = {
uri: string,
doChannelUnsubscribe: SubscriptionArgs => void,
type: string,
blockedChannelUris: Array<string>,
doOpenModal: (string, {}) => void,
};
function AbandonedChannelPreview(props: Props) {
const { uri, doChannelUnsubscribe, type, blockedChannelUris, doOpenModal } = props;
const { uri, type } = props;
const { channelName } = parseURI(uri);
const isBlockedChannel = blockedChannelUris.includes(uri);
return (
<li className={classnames('claim-preview__wrapper', 'claim-preview__wrapper--notice')}>
@ -37,31 +27,10 @@ function AbandonedChannelPreview(props: Props) {
<div className="media__subtitle">{__(`This channel may have been unpublished.`)}</div>
</div>
<div className="claim-preview__actions">
{isBlockedChannel && (
<Button
iconColor="red"
icon={ICONS.UNBLOCK}
button={'alt'}
label={__('Unblock')}
onClick={() => doOpenModal(MODALS.REMOVE_BLOCKED, { blockedUri: uri })}
/>
)}
{/* SubscribeButton uses resolved permanentUri; modifying it didn't seem worth it. */}
{!isBlockedChannel && (
<Button
iconColor="red"
icon={ICONS.UNSUBSCRIBE}
button={'alt'}
label={__('Unfollow')}
onClick={e => {
e.stopPropagation();
doChannelUnsubscribe({
channelName: `@${channelName}`,
uri,
});
}}
/>
)}
<div className="section__actions">
<ChannelBlockButton uri={uri} />
<ChannelMuteButton uri={uri} />
</div>
</div>
</div>
</div>

10
ui/component/app/index.js
View file

@ -27,9 +27,10 @@ import {
doSetActiveChannel,
doSetIncognito,
} from 'redux/actions/app';
import { doFetchModBlockedList } from 'redux/actions/comments';
import App from './view';
const select = state => ({
const select = (state) => ({
user: selectUser(state),
accessToken: selectAccessToken(state),
theme: selectThemePath(state),
@ -48,18 +49,19 @@ const select = state => ({
myChannelUrls: selectMyChannelUrls(state),
});
const perform = dispatch => ({
const perform = (dispatch) => ({
fetchAccessToken: () => dispatch(doFetchAccessToken()),
fetchChannelListMine: () => dispatch(doFetchChannelListMine()),
setLanguage: language => dispatch(doSetLanguage(language)),
setLanguage: (language) => dispatch(doSetLanguage(language)),
signIn: () => dispatch(doSignIn()),
requestDownloadUpgrade: () => dispatch(doDownloadUpgradeRequested()),
updatePreferences: () => dispatch(doGetAndPopulatePreferences()),
getWalletSyncPref: () => dispatch(doGetWalletSyncPreference()),
syncLoop: noInterval => dispatch(doSyncLoop(noInterval)),
syncLoop: (noInterval) => dispatch(doSyncLoop(noInterval)),
setReferrer: (referrer, doClaim) => dispatch(doUserSetReferrer(referrer, doClaim)),
setActiveChannelIfNotSet: () => dispatch(doSetActiveChannel()),
setIncognito: () => dispatch(doSetIncognito()),
fetchModBlockedList: () => dispatch(doFetchModBlockedList()),
});
export default hot(connect(select, perform)(App));

22
ui/component/app/view.jsx
View file

@ -56,14 +56,14 @@ type Props = {
goForward: () => void,
index: number,
length: number,
push: string => void,
push: (string) => void,
},
fetchAccessToken: () => void,
fetchChannelListMine: () => void,
signIn: () => void,
requestDownloadUpgrade: () => void,
onSignedIn: () => void,
setLanguage: string => void,
setLanguage: (string) => void,
isUpgradeAvailable: boolean,
autoUpdateDownloaded: boolean,
updatePreferences: () => Promise<any>,
@ -83,7 +83,8 @@ type Props = {
activeChannelClaim: ?ChannelClaim,
myChannelUrls: ?Array<string>,
setActiveChannelIfNotSet: () => void,
setIncognito: boolean => void,
setIncognito: (boolean) => void,
fetchModBlockedList: () => void,
};
function App(props: Props) {
@ -114,6 +115,7 @@ function App(props: Props) {
activeChannelClaim,
setActiveChannelIfNotSet,
setIncognito,
fetchModBlockedList,
} = props;
const appRef = useRef();
@ -134,7 +136,7 @@ function App(props: Props) {
const showUpgradeButton =
(autoUpdateDownloaded || (process.platform === 'linux' && isUpgradeAvailable)) && !upgradeNagClosed;
// referral claiming
const referredRewardAvailable = rewards && rewards.some(reward => reward.reward_type === REWARDS.TYPE_REFEREE);
const referredRewardAvailable = rewards && rewards.some((reward) => reward.reward_type === REWARDS.TYPE_REFEREE);
const urlParams = new URLSearchParams(search);
const rawReferrerParam = urlParams.get('r');
const sanitizedReferrerParam = rawReferrerParam && rawReferrerParam.replace(':', '#');
@ -166,7 +168,7 @@ function App(props: Props) {
useEffect(() => {
if (!uploadCount) return;
const handleBeforeUnload = event => {
const handleBeforeUnload = (event) => {
event.preventDefault();
event.returnValue = 'magic'; // without setting this to something it doesn't work
};
@ -176,7 +178,7 @@ function App(props: Props) {
// allows user to navigate history using the forward and backward buttons on a mouse
useEffect(() => {
const handleForwardAndBackButtons = e => {
const handleForwardAndBackButtons = (e) => {
switch (e.button) {
case MOUSE_BACK_BTN:
history.index > 0 && history.goBack();
@ -192,7 +194,7 @@ function App(props: Props) {
// allows user to pause miniplayer using the spacebar without the page scrolling down
useEffect(() => {
const handleKeyPress = e => {
const handleKeyPress = (e) => {
if (e.key === ' ' && e.target === document.body) {
e.preventDefault();
}
@ -244,6 +246,10 @@ function App(props: Props) {
} else if (hasNoChannels) {
setIncognito(true);
}
if (hasMyChannels) {
fetchModBlockedList();
}
}, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]);
useEffect(() => {
@ -358,7 +364,7 @@ function App(props: Props) {
[`${MAIN_WRAPPER_CLASS}--scrollbar`]: useCustomScrollbar,
})}
ref={appRef}
onContextMenu={IS_WEB ? undefined : e => openContextMenu(e)}
onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)}
>
{IS_WEB && lbryTvApiStatus === STATUS_DOWN ? (
<Yrbl

18
ui/component/blockButton/index.js
View file

@ -1,18 +0,0 @@
import { connect } from 'react-redux';
import { makeSelectClaimIsMine, makeSelectShortUrlForUri, makeSelectPermanentUrlForUri } from 'lbry-redux';
import { selectChannelIsBlocked } from 'redux/selectors/blocked';
import { doToast } from 'redux/actions/notifications';
import { doToggleBlockChannel } from 'redux/actions/blocked';
import BlockButton from './view';
const select = (state, props) => ({
channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
shortUrl: makeSelectShortUrlForUri(props.uri)(state),
permanentUrl: makeSelectPermanentUrlForUri(props.uri)(state),
});
export default connect(select, {
toggleBlockChannel: doToggleBlockChannel,
doToast,
})(BlockButton);

49
ui/component/blockButton/view.jsx
View file

@ -1,49 +0,0 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import React, { useRef } from 'react';
import Button from 'component/button';
import useHover from 'effects/use-hover';
type Props = {
permanentUrl: ?string,
shortUrl: string,
isSubscribed: boolean,
toggleBlockChannel: (uri: string) => void,
channelIsBlocked: boolean,
claimIsMine: boolean,
doToast: ({ message: string, linkText: string, linkTarget: string }) => void,
};
export default function BlockButton(props: Props) {
const { permanentUrl, shortUrl, toggleBlockChannel, channelIsBlocked, claimIsMine, doToast } = props;
const blockRef = useRef();
const isHovering = useHover(blockRef);
const blockLabel = channelIsBlocked ? __('Blocked') : __('Block');
const blockTitlePrefix = channelIsBlocked ? __('Unblock this channel') : __('Block this channel');
const blockedOverride = channelIsBlocked && isHovering && __('Unblock');
return permanentUrl && (!claimIsMine || channelIsBlocked) ? (
<Button
ref={blockRef}
icon={ICONS.BLOCK}
button={'alt'}
label={blockedOverride || blockLabel}
title={blockTitlePrefix}
requiresAuth={IS_WEB}
onClick={e => {
e.stopPropagation();
if (!channelIsBlocked) {
doToast({
message: __('Blocked %channelUrl%', { channelUrl: shortUrl }),
linkText: __('Manage'),
linkTarget: `/${PAGES.BLOCKED}`,
});
}
toggleBlockChannel(permanentUrl);
}}
/>
) : null;
}

14
ui/component/channelBlockButton/index.js Normal file
View file

@ -0,0 +1,14 @@
import { connect } from 'react-redux';
import { doCommentModUnBlock, doCommentModBlock } from 'redux/actions/comments';
import { makeSelectChannelIsBlocked, makeSelectUriIsBlockingOrUnBlocking } from 'redux/selectors/comments';
import ChannelBlockButton from './view';
const select = (state, props) => ({
isBlocked: makeSelectChannelIsBlocked(props.uri)(state),
isBlockingOrUnBlocking: makeSelectUriIsBlockingOrUnBlocking(props.uri)(state),
});
export default connect(select, {
doCommentModUnBlock,
doCommentModBlock,
})(ChannelBlockButton);

41
ui/component/channelBlockButton/view.jsx Normal file
View file

@ -0,0 +1,41 @@
// @flow
import React from 'react';
import Button from 'component/button';
type Props = {
uri: string,
isBlocked: boolean,
isBlockingOrUnBlocking: boolean,
doCommentModUnBlock: (string) => void,
doCommentModBlock: (string) => void,
};
function ChannelBlockButton(props: Props) {
const { uri, doCommentModUnBlock, doCommentModBlock, isBlocked, isBlockingOrUnBlocking } = props;
function handleClick() {
if (isBlocked) {
doCommentModUnBlock(uri);
} else {
doCommentModBlock(uri);
}
}
return (
<Button
button={isBlocked ? 'alt' : 'secondary'}
label={
isBlocked
? isBlockingOrUnBlocking
? __('Unblocking...')
: __('Unblock')
: isBlockingOrUnBlocking
? __('Blocking...')
: __('Block')
}
onClick={handleClick}
/>
);
}
export default ChannelBlockButton;

4
ui/component/channelContent/index.js
View file

@ -8,7 +8,7 @@ import {
makeSelectClaimForUri,
SETTINGS,
} from 'lbry-redux';
import { selectChannelIsBlocked } from 'redux/selectors/blocked';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { withRouter } from 'react-router';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { makeSelectClientSetting } from 'redux/selectors/settings';
@ -24,7 +24,7 @@ const select = (state, props) => {
fetching: makeSelectFetchingChannelClaims(props.uri)(state),
totalPages: makeSelectTotalPagesInChannelSearch(props.uri, PAGE_SIZE)(state),
channelIsMine: makeSelectClaimIsMine(props.uri)(state),
channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
claim: props.uri && makeSelectClaimForUri(props.uri)(state),
isAuthenticated: selectUserVerifiedEmail(state),
showMature: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),

12
ui/component/channelMuteButton/index.js Normal file
View file

@ -0,0 +1,12 @@
import { connect } from 'react-redux';
import { doToggleMuteChannel } from 'redux/actions/blocked';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import ChannelMuteButton from './view';
const select = (state, props) => ({
isMuted: makeSelectChannelIsMuted(props.uri)(state),
});
export default connect(select, {
doToggleMuteChannel,
})(ChannelMuteButton);

24
ui/component/channelMuteButton/view.jsx Normal file
View file

@ -0,0 +1,24 @@
// @flow
import React from 'react';
import Button from 'component/button';
type Props = {
uri: string,
isMuted: boolean,
channelClaim: ?ChannelClaim,
doToggleMuteChannel: (string) => void,
};
function ChannelBlockButton(props: Props) {
const { uri, doToggleMuteChannel, isMuted } = props;
return (
<Button
button={isMuted ? 'alt' : 'secondary'}
label={isMuted ? __('Unmute') : __('Mute')}
onClick={() => doToggleMuteChannel(uri)}
/>
);
}
export default ChannelBlockButton;

4
ui/component/channelStakedIndicator/view.jsx
View file

@ -11,6 +11,7 @@ import CreditAmount from 'component/common/credit-amount';
type Props = {
channelClaim: ChannelClaim,
large?: boolean,
inline?: boolean,
};
function getChannelLevel(amount: number): number {
@ -47,7 +48,7 @@ function getChannelIcon(level: number): string {
}
function ChannelStakedIndicator(props: Props) {
const { channelClaim, large = false } = props;
const { channelClaim, large = false, inline = false } = props;
if (!channelClaim || !channelClaim.meta) {
return null;
@ -79,6 +80,7 @@ function ChannelStakedIndicator(props: Props) {
<div
className={classnames('channel-staked__wrapper', {
'channel-staked__wrapper--large': large,
'channel-staked__wrapper--inline': inline,
})}
>
<LevelIcon icon={icon} large={large} isControlling={isControlling} />

6
ui/component/claimList/view.jsx
View file

@ -32,12 +32,12 @@ type Props = {
showUnresolvedClaims?: boolean,
renderProperties: ?(Claim) => Node,
includeSupportAction?: boolean,
hideBlock: boolean,
injectedItem: ?Node,
timedOutMessage?: Node,
tileLayout?: boolean,
renderActions?: (Claim) => ?Node,
searchInLanguage: boolean,
hideMenu?: boolean,
};
export default function ClaimList(props: Props) {
@ -57,12 +57,12 @@ export default function ClaimList(props: Props) {
showUnresolvedClaims,
renderProperties,
includeSupportAction,
hideBlock,
injectedItem,
timedOutMessage,
tileLayout = false,
renderActions,
searchInLanguage,
hideMenu,
} = props;
const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
@ -149,12 +149,12 @@ export default function ClaimList(props: Props) {
<ClaimPreview
uri={uri}
type={type}
hideMenu={hideMenu}
includeSupportAction={includeSupportAction}
showUnresolvedClaim={showUnresolvedClaims}
properties={renderProperties || (type !== 'small' ? undefined : false)}
renderActions={renderActions}
showUserBlocked={showHiddenByUser}
hideBlock={hideBlock}
customShouldHide={(claim: StreamClaim) => {
// Hack to hide spee.ch thumbnail publishes
// If it meets these requirements, it was probably uploaded here:

6
ui/component/claimListDiscover/index.js
View file

@ -7,12 +7,12 @@ import {
SETTINGS,
} from 'lbry-redux';
import { selectFollowedTags } from 'redux/selectors/tags';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { doToggleTagFollowDesktop } from 'redux/actions/tags';
import { makeSelectClientSetting, selectLanguage } from 'redux/selectors/settings';
import ClaimListDiscover from './view';
const select = state => ({
const select = (state) => ({
followedTags: selectFollowedTags(state),
claimSearchByQuery: selectClaimSearchByQuery(state),
claimSearchByQueryLastPageReached: selectClaimSearchByQueryLastPageReached(state),
@ -20,7 +20,7 @@ const select = state => ({
showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
languageSetting: selectLanguage(state),
hiddenUris: selectBlockedChannels(state),
hiddenUris: selectMutedChannels(state),
searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
});

45
ui/component/claimListDiscover/view.jsx
View file

@ -20,11 +20,11 @@ type Props = {
doClaimSearch: ({}) => void,
loading: boolean,
personalView: boolean,
doToggleTagFollowDesktop: string => void,
doToggleTagFollowDesktop: (string) => void,
meta?: Node,
showNsfw: boolean,
hideReposts: boolean,
history: { action: string, push: string => void, replace: string => void },
history: { action: string, push: (string) => void, replace: (string) => void },
location: { search: string, pathname: string },
claimSearchByQuery: {
[string]: Array<string>,
@ -43,13 +43,12 @@ type Props = {
header?: Node,
headerLabel?: string | Node,
name?: string,
hideBlock?: boolean,
hideAdvancedFilter?: boolean,
claimType?: Array<string>,
defaultClaimType?: Array<string>,
streamType?: string | Array<string>,
defaultStreamType?: string | Array<string>,
renderProperties?: Claim => Node,
renderProperties?: (Claim) => Node,
includeSupportAction?: boolean,
repostedClaimId?: string,
pageSize?: number,
@ -89,7 +88,6 @@ function ClaimListDiscover(props: Props) {
name,
claimType,
pageSize,
hideBlock,
defaultClaimType,
streamType,
defaultStreamType,
@ -120,7 +118,7 @@ function ClaimListDiscover(props: Props) {
const isLargeScreen = useIsLargeScreen();
const [orderParamEntry, setOrderParamEntry] = usePersistedState(`entry-${location.pathname}`, CS.ORDER_BY_TRENDING);
const [orderParamUser, setOrderParamUser] = usePersistedState(`orderUser-${location.pathname}`, CS.ORDER_BY_TRENDING);
const followed = (followedTags && followedTags.map(t => t.name)) || [];
const followed = (followedTags && followedTags.map((t) => t.name)) || [];
const urlParams = new URLSearchParams(search);
const tagsParam = // can be 'x,y,z' or 'x' or ['x','y'] or CS.CONSTANT
(tags && getParamFromTags(tags)) ||
@ -206,7 +204,7 @@ function ClaimListDiscover(props: Props) {
no_totals: true,
not_channel_ids:
// If channelIdsParam were passed in, we don't need not_channel_ids
!channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map(hiddenUri => hiddenUri.split('#')[1]) : [],
!channelIdsParam && hiddenUris && hiddenUris.length ? hiddenUris.map((hiddenUri) => hiddenUri.split('#')[1]) : [],
not_tags: !showNsfw ? MATURE_TAGS : [],
order_by:
orderParam === CS.ORDER_BY_TRENDING
@ -247,12 +245,7 @@ function ClaimListDiscover(props: Props) {
if (claimType !== CS.CLAIM_CHANNEL) {
if (orderParam === CS.ORDER_BY_TOP && freshnessParam !== CS.FRESH_ALL) {
options.release_time = `>${Math.floor(
moment()
.subtract(1, freshnessParam)
.startOf('hour')
.unix()
)}`;
options.release_time = `>${Math.floor(moment().subtract(1, freshnessParam).startOf('hour').unix())}`;
} else if (orderParam === CS.ORDER_BY_NEW || orderParam === CS.ORDER_BY_TRENDING) {
// Warning - hack below
// If users are following more than 10 channels or tags, limit results to stuff less than a year old
@ -263,29 +256,15 @@ function ClaimListDiscover(props: Props) {
(options.channel_ids && options.channel_ids.length > 20) ||
(options.any_tags && options.any_tags.length > 20)
) {
options.release_time = `>${Math.floor(
moment()
.subtract(3, CS.FRESH_MONTH)
.startOf('week')
.unix()
)}`;
options.release_time = `>${Math.floor(moment().subtract(3, CS.FRESH_MONTH).startOf('week').unix())}`;
} else if (
(options.channel_ids && options.channel_ids.length > 10) ||
(options.any_tags && options.any_tags.length > 10)
) {
options.release_time = `>${Math.floor(
moment()
.subtract(1, CS.FRESH_YEAR)
.startOf('week')
.unix()
)}`;
options.release_time = `>${Math.floor(moment().subtract(1, CS.FRESH_YEAR).startOf('week').unix())}`;
} else {
// Hack for at least the New page until https://github.com/lbryio/lbry-sdk/issues/2591 is fixed
options.release_time = `<${Math.floor(
moment()
.startOf('minute')
.unix()
)}`;
options.release_time = `<${Math.floor(moment().startOf('minute').unix())}`;
}
}
}
@ -333,14 +312,14 @@ function ClaimListDiscover(props: Props) {
if (hideReposts && !options.reposted_claim_id && !forceShowReposts) {
if (Array.isArray(options.claim_type)) {
if (options.claim_type.length > 1) {
options.claim_type = options.claim_type.filter(claimType => claimType !== 'repost');
options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
}
} else {
options.claim_type = ['stream', 'channel'];
}
}
const hasMatureTags = tagsParam && tagsParam.split(',').some(t => MATURE_TAGS.includes(t));
const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
const claimSearchResult = claimSearchByQuery[claimSearchCacheQuery];
const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[claimSearchCacheQuery];
@ -499,7 +478,6 @@ function ClaimListDiscover(props: Props) {
timedOutMessage={timedOutMessage}
renderProperties={renderProperties}
includeSupportAction={includeSupportAction}
hideBlock={hideBlock}
injectedItem={injectedItem}
/>
{loading && (
@ -527,7 +505,6 @@ function ClaimListDiscover(props: Props) {
timedOutMessage={timedOutMessage}
renderProperties={renderProperties}
includeSupportAction={includeSupportAction}
hideBlock={hideBlock}
injectedItem={injectedItem}
/>
{loading && new Array(dynamicPageSize).fill(1).map((x, i) => <ClaimPreview key={i} placeholder="loading" />)}

30
ui/component/claimMenuList/claim-preview-loading.jsx Normal file
View file

@ -0,0 +1,30 @@
// @flow
import classnames from 'classnames';
import React from 'react';
type Props = {
isChannel: boolean,
type: string,
};
function ClaimPreviewLoading(props: Props) {
const { isChannel, type } = props;
return (
<li
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
})}
>
<div className={classnames('claim-preview', { 'claim-preview--large': type === 'large' })}>
<div className="placeholder media__thumb" />
<div className="placeholder__wrapper">
<div className="placeholder claim-preview__title" />
<div className="placeholder media__subtitle" />
</div>
</div>
</li>
);
}
export default ClaimPreviewLoading;

32
ui/component/claimMenuList/claim-preview-no-content.jsx Normal file
View file

@ -0,0 +1,32 @@
// @flow
import classnames from 'classnames';
import React from 'react';
import Empty from 'component/common/empty';
type Props = {
isChannel: boolean,
type: string,
};
function ClaimPreviewNoContent(props: Props) {
const { isChannel, type } = props;
return (
<li
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
})}
>
<div
className={classnames('claim-preview claim-preview--inactive', {
'claim-preview--large': type === 'large',
'claim-preview__empty': true,
})}
>
<Empty text={__('Nothing found here. Like big tech ethics.')} />
</div>
</li>
);
}
export default ClaimPreviewNoContent;

33
ui/component/claimMenuList/claim-preview-no-mature.jsx Normal file
View file

@ -0,0 +1,33 @@
// @flow
import classnames from 'classnames';
import React from 'react';
import Empty from 'component/common/empty';
type Props = {
isChannel: boolean,
type: string,
message: string,
};
function ClaimPreviewHidden(props: Props) {
const { isChannel, type, message } = props;
return (
<li
className={classnames('claim-preview__wrapper', {
'claim-preview__wrapper--channel': isChannel && type !== 'inline',
'claim-preview__wrapper--inline': type === 'inline',
})}
>
<div
className={classnames('claim-preview claim-preview--inactive claim-preview--empty', {
'claim-preview--large': type === 'large',
})}
>
<div className="media__thumb" />
<Empty text={message} />
</div>
</li>
);
}
export default ClaimPreviewHidden;

20
ui/component/claimMenuList/index.js Normal file
View file

@ -0,0 +1,20 @@
import { connect } from 'react-redux';
import { makeSelectClaimForUri, makeSelectClaimIsMine } from 'lbry-redux';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { doToggleMuteChannel } from 'redux/actions/blocked';
import { doCommentModBlock, doCommentModUnBlock } from 'redux/actions/comments';
import { makeSelectChannelIsBlocked } from 'redux/selectors/comments';
import ClaimPreview from './view';
const select = (state, props) => ({
claim: makeSelectClaimForUri(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
channelIsMuted: makeSelectChannelIsMuted(props.uri)(state),
channelIsBlocked: makeSelectChannelIsBlocked(props.uri)(state),
});
export default connect(select, {
doToggleMuteChannel,
doCommentModBlock,
doCommentModUnBlock,
})(ClaimPreview);

86
ui/component/claimMenuList/view.jsx Normal file
View file

@ -0,0 +1,86 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import Icon from 'component/common/icon';
type Props = {
claim: ?Claim,
inline?: boolean,
claimIsMine: boolean,
channelIsMuted: boolean,
channelIsBlocked: boolean,
doToggleMuteChannel: (string) => void,
doCommentModBlock: (string) => void,
doCommentModUnBlock: (string) => void,
};
function ClaimMenuList(props: Props) {
const {
claim,
inline = false,
claimIsMine,
doToggleMuteChannel,
channelIsMuted,
channelIsBlocked,
doCommentModBlock,
doCommentModUnBlock,
} = props;
const channelUri =
claim &&
(claim.value_type === 'channel'
? claim.permanent_url
: claim.signing_channel && claim.signing_channel.permanent_url);
if (!channelUri) {
return null;
}
function handleToggleMute() {
doToggleMuteChannel(channelUri);
}
function handleToggleBlock() {
if (channelIsBlocked) {
doCommentModUnBlock(channelUri);
} else {
doCommentModBlock(channelUri);
}
}
return (
<Menu>
<MenuButton
className={classnames('menu__button', { 'claim__menu-button': !inline, 'claim__menu-button--inline': inline })}
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<Icon size={20} icon={ICONS.MORE_VERTICAL} />
</MenuButton>
<MenuList className="menu__list">
{!claimIsMine && (
<>
<MenuItem className="comment__menu-option" onSelect={handleToggleBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{channelIsBlocked ? __('Unblock Channel') : __('Block Channel')}
</div>
</MenuItem>
<MenuItem className="comment__menu-option" onSelect={handleToggleMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{channelIsMuted ? __('Unmute Channel') : __('Mute Channel')}
</div>
</MenuItem>
</>
)}
</MenuList>
</Menu>
);
}
export default ClaimMenuList;

12
ui/component/claimPreview/index.js
View file

@ -11,7 +11,7 @@ import {
makeSelectClaimWasPurchased,
makeSelectStreamingUrlForUri,
} from 'lbry-redux';
import { selectBlockedChannels, selectChannelIsBlocked } from 'redux/selectors/blocked';
import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
import { selectShowMatureContent } from 'redux/selectors/settings';
import { makeSelectHasVisitedUri } from 'redux/selectors/content';
@ -30,17 +30,17 @@ const select = (state, props) => ({
nsfw: props.uri && makeSelectClaimIsNsfw(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
filteredOutpoints: selectFilteredOutpoints(state),
blockedChannelUris: selectBlockedChannels(state),
blockedChannelUris: selectMutedChannels(state),
hasVisitedUri: props.uri && makeSelectHasVisitedUri(props.uri)(state),
channelIsBlocked: props.uri && selectChannelIsBlocked(props.uri)(state),
channelIsBlocked: props.uri && makeSelectChannelIsMuted(props.uri)(state),
isSubscribed: props.uri && makeSelectIsSubscribed(props.uri, true)(state),
streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
});
const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
getFile: uri => dispatch(doFileGet(uri, false)),
const perform = (dispatch) => ({
resolveUri: (uri) => dispatch(doResolveUri(uri)),
getFile: (uri) => dispatch(doFileGet(uri, false)),
});
export default connect(select, perform)(ClaimPreview);

28
ui/component/claimPreview/view.jsx
View file

@ -3,7 +3,6 @@ import type { Node } from 'react';
import React, { useEffect, forwardRef } from 'react';
import { NavLink, withRouter } from 'react-router-dom';
import classnames from 'classnames';
import { SIMPLE_SITE } from 'config';
import { parseURI } from 'lbry-redux';
// @if TARGET='app'
import { openClaimPreviewMenu } from 'util/context-menu';
@ -16,7 +15,6 @@ import FileProperties from 'component/fileProperties';
import ClaimTags from 'component/claimTags';
import SubscribeButton from 'component/subscribeButton';
import ChannelThumbnail from 'component/channelThumbnail';
import BlockButton from 'component/blockButton';
import ClaimSupportButton from 'component/claimSupportButton';
import useGetThumbnail from 'effects/use-get-thumbnail';
import ClaimPreviewTitle from 'component/claimPreviewTitle';
@ -25,6 +23,8 @@ import ClaimRepostAuthor from 'component/claimRepostAuthor';
import FileDownloadLink from 'component/fileDownloadLink';
import AbandonedChannelPreview from 'component/abandonedChannelPreview';
import PublishPending from 'component/publishPending';
import ClaimMenuList from 'component/claimMenuList';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import ClaimPreviewLoading from './claim-preview-loading';
import ClaimPreviewHidden from './claim-preview-no-mature';
import ClaimPreviewNoContent from './claim-preview-no-content';
@ -55,12 +55,10 @@ type Props = {
}>,
blockedChannelUris: Array<string>,
channelIsBlocked: boolean,
isSubscribed: boolean,
actions: boolean | Node | string | number,
properties: boolean | Node | string | number | ((Claim) => Node),
empty?: Node,
onClick?: (any) => any,
hideBlock?: boolean,
streamingUrl: ?string,
getFile: (string) => void,
customShouldHide?: (Claim) => boolean,
@ -72,6 +70,7 @@ type Props = {
wrapperElement?: string,
hideRepostLabel?: boolean,
repostUrl?: string,
hideMenu?: boolean,
};
const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
@ -87,7 +86,6 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
// is the claim consider nsfw?
nsfw,
claimIsMine,
isSubscribed,
streamingUrl,
// user properties
channelIsBlocked,
@ -113,13 +111,13 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
hideActions = false,
properties,
onClick,
hideBlock,
actions,
blockedChannelUris,
blackListedOutpoints,
filteredOutpoints,
includeSupportAction,
renderActions,
hideMenu = false,
// repostUrl,
} = props;
const WrapperElement = wrapperElement || 'li';
@ -275,7 +273,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
>
{isChannelUri && claim ? (
<UriIndicator uri={contentUri} link>
<ChannelThumbnail uri={contentUri} obscure={channelIsBlocked} />
<ChannelThumbnail uri={contentUri} />
</UriIndicator>
) : (
<>
@ -313,9 +311,9 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
</NavLink>
)}
{type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
{/* {type !== 'small' && !isChannelUri && signingChannel && SIMPLE_SITE && (
<ChannelThumbnail uri={signingChannel.permanent_url} />
)}
)} */}
</div>
<ClaimPreviewSubtitle uri={uri} type={type} />
{(pending || !!reflectingProgress) && <PublishPending uri={uri} />}
@ -329,12 +327,17 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
actions
) : (
<div className="claim-preview__primary-actions">
{!isChannelUri && signingChannel && (
<div className="claim-preview__channel-staked">
<ChannelThumbnail uri={signingChannel.permanent_url} hideStakedIndicator />
<ChannelStakedIndicator uri={signingChannel.permanent_url} inline />
</div>
)}
{isChannelUri && !channelIsBlocked && !claimIsMine && (
<SubscribeButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
)}
{!hideBlock && isChannelUri && !isSubscribed && (!claimIsMine || channelIsBlocked) && (
<BlockButton uri={contentUri.startsWith('lbry://') ? contentUri : `lbry://${contentUri}`} />
)}
{includeSupportAction && <ClaimSupportButton uri={uri} />}
</div>
)}
@ -355,6 +358,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
)}
</div>
</div>
{!hideMenu && <ClaimMenuList uri={uri} />}
</WrapperElement>
);
});

10
ui/component/claimPreviewTile/index.js
View file

@ -9,7 +9,7 @@ import {
makeSelectChannelForClaimUri,
makeSelectClaimIsNsfw,
} from 'lbry-redux';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
import { selectShowMatureContent } from 'redux/selectors/settings';
import ClaimPreviewTile from './view';
@ -22,14 +22,14 @@ const select = (state, props) => ({
title: props.uri && makeSelectTitleForUri(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
filteredOutpoints: selectFilteredOutpoints(state),
blockedChannelUris: selectBlockedChannels(state),
blockedChannelUris: selectMutedChannels(state),
showMature: selectShowMatureContent(state),
isMature: makeSelectClaimIsNsfw(props.uri)(state),
});
const perform = dispatch => ({
resolveUri: uri => dispatch(doResolveUri(uri)),
getFile: uri => dispatch(doFileGet(uri, false)),
const perform = (dispatch) => ({
resolveUri: (uri) => dispatch(doResolveUri(uri)),
getFile: (uri) => dispatch(doFileGet(uri, false)),
});
export default connect(select, perform)(ClaimPreviewTile);

3
ui/component/claimPreviewTile/view.jsx
View file

@ -14,6 +14,8 @@ import { parseURI } from 'lbry-redux';
import FileProperties from 'component/fileProperties';
import FileDownloadLink from 'component/fileDownloadLink';
import ClaimRepostAuthor from 'component/claimRepostAuthor';
import ClaimMenuList from 'component/claimMenuList';
// @if TARGET='app'
import { openClaimPreviewMenu } from 'util/context-menu';
// @endif
@ -194,6 +196,7 @@ function ClaimPreviewTile(props: Props) {
<UriIndicator uri={uri} link />
</div>
)}
<ClaimMenuList uri={uri} />
</h2>
</NavLink>
<div>

6
ui/component/claimTilesDiscover/index.js
View file

@ -1,16 +1,16 @@
import { connect } from 'react-redux';
import { doClaimSearch, selectClaimSearchByQuery, selectFetchingClaimSearchByQuery, SETTINGS } from 'lbry-redux';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { doToggleTagFollowDesktop } from 'redux/actions/tags';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import ClaimListDiscover from './view';
const select = state => ({
const select = (state) => ({
claimSearchByQuery: selectClaimSearchByQuery(state),
fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
showNsfw: makeSelectClientSetting(SETTINGS.SHOW_MATURE)(state),
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
hiddenUris: selectBlockedChannels(state),
hiddenUris: selectMutedChannels(state),
});
const perform = {

4
ui/component/comment/index.js
View file

@ -1,7 +1,7 @@
import { connect } from 'react-redux';
import { makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
import { doCommentUpdate } from 'redux/actions/comments';
import { selectChannelIsBlocked } from 'redux/selectors/blocked';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { doToast } from 'redux/actions/notifications';
import { doSetPlayingUri } from 'redux/actions/content';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
@ -11,7 +11,7 @@ import Comment from './view';
const select = (state, props) => ({
thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
channelIsBlocked: props.authorUri && selectChannelIsBlocked(props.authorUri)(state),
channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
activeChannelClaim: selectActiveChannelClaim(state),

2
ui/component/comment/view.jsx
View file

@ -200,7 +200,7 @@ function Comment(props: Props) {
</div>
<div className="comment__menu">
<Menu>
<MenuButton>
<MenuButton className="menu__button">
<Icon
size={18}
className={mouseIsHovering ? 'comment__menu-icon--hovering' : 'comment__menu-icon'}

17
ui/component/commentMenuList/index.js
View file

@ -1,12 +1,7 @@
import { connect } from 'react-redux';
import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
import {
doCommentAbandon,
doCommentPin,
doCommentList,
// doCommentModBlock,
} from 'redux/actions/comments';
import { doToggleBlockChannel } from 'redux/actions/blocked';
import { doCommentAbandon, doCommentPin, doCommentList, doCommentModBlock } from 'redux/actions/comments';
import { doToggleMuteChannel } from 'redux/actions/blocked';
// import { doSetActiveChannel } from 'redux/actions/app';
import { doSetPlayingUri } from 'redux/actions/content';
import { selectActiveChannelClaim } from 'redux/selectors/app';
@ -19,14 +14,14 @@ const select = (state, props) => ({
activeChannelClaim: selectActiveChannelClaim(state),
});
const perform = dispatch => ({
const perform = (dispatch) => ({
closeInlinePlayer: () => dispatch(doSetPlayingUri({ uri: null })),
deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
blockChannel: channelUri => dispatch(doToggleBlockChannel(channelUri)),
blockChannel: (channelUri) => dispatch(doToggleMuteChannel(channelUri)),
pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, remove)),
fetchComments: uri => dispatch(doCommentList(uri)),
fetchComments: (uri) => dispatch(doCommentList(uri)),
// setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
// commentModBlock: commentAuthor => dispatch(doCommentModBlock(commentAuthor)),
commentModBlock: (commentAuthor) => dispatch(doCommentModBlock(commentAuthor)),
});
export default connect(select, perform)(CommentMenuList);

52
ui/component/commentMenuList/view.jsx
View file

@ -23,7 +23,7 @@ type Props = {
activeChannelClaim: ?ChannelClaim,
claimIsMine: boolean,
isTopLevel: boolean,
// commentModBlock: string => void,
commentModBlock: (string) => void,
};
function CommentMenuList(props: Props) {
@ -43,17 +43,10 @@ function CommentMenuList(props: Props) {
isPinned,
handleEditComment,
fetchComments,
// commentModBlock,
// setActiveChannel,
commentModBlock,
} = props;
const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
// let authorChannel;
// try {
// const { claimName } = parseURI(authorUri);
// authorChannel = claimName;
// } catch (e) {}
function handlePinComment(commentId, remove) {
pinComment(commentId, remove).then(() => fetchComments(uri));
}
@ -65,32 +58,16 @@ function CommentMenuList(props: Props) {
function handleCommentBlock() {
if (claimIsMine) {
// Block them from commenting on future content
// commentModBlock(authorUri);
commentModBlock(authorUri);
}
}
function handleCommentMute() {
blockChannel(authorUri);
}
// function handleChooseChannel() {
// const { channelClaimId } = parseURI(authorUri);
// setActiveChannel(channelClaimId);
// }
return (
<MenuList className="menu__list--comments">
{/* {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url !== authorUri && (
<MenuItem className="comment__menu-option" onSelect={handleChooseChannel}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.CHANNEL} />
{__('Use this channel')}
</div>
<span className="comment__menu-help">
{__('Switch to %channel_name% to interact with this comment', { channel_name: authorChannel })}.
</span>
</MenuItem>
)} */}
<MenuList className="menu__list">
{activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}
{activeChannelIsCreator && isTopLevel && (
@ -123,16 +100,25 @@ function CommentMenuList(props: Props) {
</MenuItem>
)}
{/* Disabled until we deal with current app blocklist parity */}
{!commentIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleCommentBlock}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.BLOCK} />
{__('Block')}
</div>
{/* {activeChannelIsCreator && (
<span className="comment__menu-help">Hide this channel's comments and block them from commenting.</span>
)} */}
{activeChannelIsCreator && (
<span className="comment__menu-help">Prevent this channel from interacting with you.</span>
)}
</MenuItem>
)}
{!commentIsMine && (
<MenuItem className="comment__menu-option" onSelect={handleCommentMute}>
<div className="menu__link">
<Icon aria-hidden icon={ICONS.MUTE} />
{__('Mute')}
</div>
{activeChannelIsCreator && <span className="comment__menu-help">Hide this channel for you only.</span>}
</MenuItem>
)}

7
ui/component/common/icon-custom.jsx
View file

@ -238,6 +238,13 @@ export const icons = {
<circle cx="12" cy="12" r="10" />
</g>
),
[ICONS.MUTE]: buildIcon(
<g>
<polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5" />
<line x1="23" y1="9" x2="17" y2="15" />
<line x1="17" y1="9" x2="23" y2="15" />
</g>
),
[ICONS.LIGHT]: buildIcon(
<g>
<circle cx="12" cy="12" r="5" />

2
ui/component/fileAuthor/view.jsx
View file

@ -10,7 +10,7 @@ function FileAuthor(props: Props) {
const { channelUri } = props;
return channelUri ? (
<ClaimPreview uri={channelUri} type="inline" properties={false} hideBlock />
<ClaimPreview uri={channelUri} type="inline" properties={false} />
) : (
<div className="claim-preview--inline claim-preview__title">{__('Anonymous')}</div>
);

6
ui/component/notification/view.jsx
View file

@ -22,7 +22,7 @@ type Props = {
menuButton: boolean,
children: any,
doReadNotifications: ([number]) => void,
doDeleteNotification: number => void,
doDeleteNotification: (number) => void,
};
export default function Notification(props: Props) {
@ -166,10 +166,10 @@ export default function Notification(props: Props) {
<div className="notification__menu">
<Menu>
<MenuButton onClick={e => e.stopPropagation()}>
<MenuButton onClick={(e) => e.stopPropagation()}>
<Icon size={18} icon={ICONS.MORE_VERTICAL} />
</MenuButton>
<MenuList className="menu__list--comments">
<MenuList className="menu__list">
<MenuItem className="menu__link" onSelect={() => doDeleteNotification(id)}>
<Icon aria-hidden icon={ICONS.DELETE} />
{__('Delete')}

2
ui/component/router/view.jsx
View file

@ -272,7 +272,7 @@ function AppRouter(props: Props) {
<PrivateRoute {...props} path={`/$/${PAGES.REWARDS_VERIFY}`} component={RewardsVerifyPage} />
<PrivateRoute {...props} path={`/$/${PAGES.LIBRARY}`} component={LibraryPage} />
<PrivateRoute {...props} path={`/$/${PAGES.TAGS_FOLLOWING_MANAGE}`} component={TagsFollowingManagePage} />
<PrivateRoute {...props} path={`/$/${PAGES.BLOCKED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`} component={ListBlockedPage} />
<PrivateRoute {...props} path={`/$/${PAGES.WALLET}`} exact component={WalletPage} />
<PrivateRoute {...props} path={`/$/${PAGES.CHANNELS}`} component={ChannelsPage} />
<PrivateRoute {...props} path={`/$/${PAGES.BUY}`} component={BuyPage} />

9
ui/constants/action_types.js
View file

@ -268,6 +268,15 @@ export const COMMENT_REACT_FAILED = 'COMMENT_REACT_FAILED';
export const COMMENT_PIN_STARTED = 'COMMENT_PIN_STARTED';
export const COMMENT_PIN_COMPLETED = 'COMMENT_PIN_COMPLETED';
export const COMMENT_PIN_FAILED = 'COMMENT_PIN_FAILED';
export const COMMENT_MODERATION_BLOCK_LIST_STARTED = 'COMMENT_MODERATION_BLOCK_LIST_STARTED';
export const COMMENT_MODERATION_BLOCK_LIST_COMPLETED = 'COMMENT_MODERATION_BLOCK_LIST_COMPLETED';
export const COMMENT_MODERATION_BLOCK_LIST_FAILED = 'COMMENT_MODERATION_BLOCK_LIST_FAILED';
export const COMMENT_MODERATION_BLOCK_STARTED = 'COMMENT_MODERATION_BLOCK_STARTED';
export const COMMENT_MODERATION_BLOCK_COMPLETE = 'COMMENT_MODERATION_BLOCK_COMPLETE';
export const COMMENT_MODERATION_BLOCK_FAILED = 'COMMENT_MODERATION_BLOCK_FAILED';
export const COMMENT_MODERATION_UN_BLOCK_STARTED = 'COMMENT_MODERATION_UN_BLOCK_STARTED';
export const COMMENT_MODERATION_UN_BLOCK_COMPLETE = 'COMMENT_MODERATION_UN_BLOCK_COMPLETE';
export const COMMENT_MODERATION_UN_BLOCK_FAILED = 'COMMENT_MODERATION_UN_BLOCK_FAILED';
// Blocked channels
export const TOGGLE_BLOCK_CHANNEL = 'TOGGLE_BLOCK_CHANNEL';

1
ui/constants/icons.js
View file

@ -82,6 +82,7 @@ export const LIBRARY = 'Folder';
export const TAG = 'Tag';
export const SUPPORT = 'TrendingUp';
export const BLOCK = 'Slash';
export const MUTE = 'VolumeX';
export const UNBLOCK = 'Circle';
export const VIEW = 'View';
export const EYE = 'Eye';

1
ui/constants/modal_types.js
View file

@ -41,7 +41,6 @@ export const LIQUIDATE_SUPPORTS = 'liquidate_supports';
export const MASS_TIP_UNLOCK = 'mass_tip_unlock';
export const CONFIRM_AGE = 'confirm_age';
export const SYNC_ENABLE = 'SYNC_ENABLE';
export const REMOVE_BLOCKED = 'remove_blocked';
export const IMAGE_UPLOAD = 'image_upload';
export const MOBILE_SEARCH = 'mobile_search';
export const VIEW_IMAGE = 'view_image';

2
ui/constants/pages.js
View file

@ -24,6 +24,7 @@ exports.SEND = 'send';
exports.SETTINGS = 'settings';
exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
exports.SETTINGS_ADVANCED = 'settings/advanced';
exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
exports.SHOW = 'show';
exports.ACCOUNT = 'account';
exports.SEARCH = 'search';
@ -36,7 +37,6 @@ exports.CHANNELS_FOLLOWING = 'following';
exports.DEPRECATED__CHANNELS_FOLLOWING_MANAGE = 'following/channels/manage';
exports.CHANNELS_FOLLOWING_DISCOVER = 'following/discover';
exports.WALLET = 'wallet';
exports.BLOCKED = 'blocked';
exports.CHANNELS = 'channels';
exports.EMBED = 'embed';
exports.TOP = 'top';

16
ui/modal/modalRemoveBlocked/index.js
View file

@ -1,16 +0,0 @@
import { connect } from 'react-redux';
import { doHideModal } from 'redux/actions/app';
import { doToggleBlockChannel } from 'redux/actions/blocked';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import ModalRemoveBlocked from './view';
const select = (state, props) => ({
blockedChannels: selectBlockedChannels(state),
});
const perform = dispatch => ({
closeModal: () => dispatch(doHideModal()),
toggleBlockChannel: uri => dispatch(doToggleBlockChannel(uri)),
});
export default connect(select, perform)(ModalRemoveBlocked);

46
ui/modal/modalRemoveBlocked/view.jsx
View file

@ -1,46 +0,0 @@
// @flow
import React from 'react';
import { Modal } from 'modal/modal';
import I18nMessage from 'component/i18nMessage';
type Props = {
blockedUri: string,
closeModal: () => void,
blockedChannels: Array<string>,
toggleBlockChannel: (uri: string) => void,
};
function ModalRemoveBlocked(props: Props) {
const { blockedUri, closeModal, blockedChannels, toggleBlockChannel } = props;
function handleConfirm() {
if (blockedUri && blockedChannels.includes(blockedUri)) {
// DANGER: Always ensure the uri is actually in the list since we are using a
// toggle function. If 'null' is accidentally toggled INTO the list, the app
// won't start. Ideally, we should add a "removeBlockedChannel()", but with
// the gating above, it should be safe/good enough.
toggleBlockChannel(blockedUri);
}
closeModal();
}
return (
<Modal
isOpen
type="confirm"
title={__('Remove from blocked list')}
confirmButtonLabel={__('Remove')}
onConfirmed={handleConfirm}
onAborted={() => closeModal()}
>
<em>{blockedUri}</em>
<p />
<p>
<I18nMessage>Are you sure you want to remove this from the list?</I18nMessage>
</p>
</Modal>
);
}
export default ModalRemoveBlocked;

3
ui/modal/modalRouter/view.jsx
View file

@ -16,7 +16,6 @@ import ModalRevokeClaim from 'modal/modalRevokeClaim';
import ModalPhoneCollection from 'modal/modalPhoneCollection';
import ModalFirstSubscription from 'modal/modalFirstSubscription';
import ModalConfirmTransaction from 'modal/modalConfirmTransaction';
import ModalRemoveBlocked from 'modal/modalRemoveBlocked';
import ModalSocialShare from 'modal/modalSocialShare';
import ModalSendTip from 'modal/modalSendTip';
import ModalPublish from 'modal/modalPublish';
@ -142,8 +141,6 @@ function ModalRouter(props: Props) {
return <ModalFileSelection {...modalProps} />;
case MODALS.LIQUIDATE_SUPPORTS:
return <ModalSupportsLiquidate {...modalProps} />;
case MODALS.REMOVE_BLOCKED:
return <ModalRemoveBlocked {...modalProps} />;
case MODALS.IMAGE_UPLOAD:
return <ModalImageUpload {...modalProps} />;
case MODALS.SYNC_ENABLE:

8
ui/page/channel/index.js
View file

@ -8,7 +8,7 @@ import {
makeSelectClaimForUri,
makeSelectClaimIsPending,
} from 'lbry-redux';
import { selectChannelIsBlocked } from 'redux/selectors/blocked';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { selectBlackListedOutpoints, doFetchSubCount, makeSelectSubCountForUri } from 'lbryinc';
import { selectYoutubeChannels } from 'redux/selectors/user';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@ -23,16 +23,16 @@ const select = (state, props) => ({
page: selectCurrentChannelPage(state),
claim: makeSelectClaimForUri(props.uri)(state),
isSubscribed: makeSelectIsSubscribed(props.uri, true)(state),
channelIsBlocked: selectChannelIsBlocked(props.uri)(state),
channelIsBlocked: makeSelectChannelIsMuted(props.uri)(state),
blackListedOutpoints: selectBlackListedOutpoints(state),
subCount: makeSelectSubCountForUri(props.uri)(state),
pending: makeSelectClaimIsPending(props.uri)(state),
youtubeChannels: selectYoutubeChannels(state),
});
const perform = dispatch => ({
const perform = (dispatch) => ({
openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
fetchSubCount: claimId => dispatch(doFetchSubCount(claimId)),
fetchSubCount: (claimId) => dispatch(doFetchSubCount(claimId)),
});
export default connect(select, perform)(ChannelPage);

4
ui/page/channel/view.jsx
View file

@ -6,7 +6,6 @@ import { parseURI } from 'lbry-redux';
import { YOUTUBE_STATUSES } from 'lbryinc';
import Page from 'component/page';
import SubscribeButton from 'component/subscribeButton';
import BlockButton from 'component/blockButton';
import ShareButton from 'component/shareButton';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from 'component/common/tabs';
import { useHistory } from 'react-router';
@ -21,6 +20,7 @@ import classnames from 'classnames';
import HelpLink from 'component/common/help-link';
import ClaimSupportButton from 'component/claimSupportButton';
import ChannelStakedIndicator from 'component/channelStakedIndicator';
import ClaimMenuList from 'component/claimMenuList';
export const PAGE_VIEW_QUERY = `view`;
const ABOUT_PAGE = `about`;
@ -157,7 +157,7 @@ function ChannelPage(props: Props) {
{!channelIsBlocked && !channelIsBlackListed && <ShareButton uri={uri} />}
{!channelIsBlocked && <ClaimSupportButton uri={uri} />}
{!channelIsBlocked && (!channelIsBlackListed || isSubscribed) && <SubscribeButton uri={permanentUrl} />}
{!isSubscribed && <BlockButton uri={permanentUrl} />}
<ClaimMenuList uri={claim.permanent_url} inline />
</div>
{cover && (
<img

6
ui/page/channelsFollowingDiscover/index.js
View file

@ -1,14 +1,14 @@
import { connect } from 'react-redux';
import { selectFollowedTags } from 'redux/selectors/tags';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectSubscriptions } from 'redux/selectors/subscriptions';
import { selectHomepageData } from 'redux/selectors/settings';
import ChannelsFollowingManagePage from './view';
const select = state => ({
const select = (state) => ({
followedTags: selectFollowedTags(state),
subscribedChannels: selectSubscriptions(state),
blockedChannels: selectBlockedChannels(state),
blockedChannels: selectMutedChannels(state),
homepageData: selectHomepageData(state),
});

11
ui/page/listBlocked/index.js
View file

@ -1,9 +1,12 @@
import { connect } from 'react-redux';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectModerationBlockList, selectFetchingModerationBlockList } from 'redux/selectors/comments';
import ListBlocked from './view';
const select = state => ({
uris: selectBlockedChannels(state),
const select = (state) => ({
mutedUris: selectMutedChannels(state),
blockedUris: selectModerationBlockList(state),
fetchingModerationBlockList: selectFetchingModerationBlockList(state),
});
export default connect(select, null)(ListBlocked);
export default connect(select)(ListBlocked);

123
ui/page/listBlocked/view.jsx
View file

@ -1,34 +1,125 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import classnames from 'classnames';
import ClaimList from 'component/claimList';
import Page from 'component/page';
import Card from 'component/common/card';
import Spinner from 'component/spinner';
import Button from 'component/button';
import usePrevious from 'effects/use-previous';
import usePersistedState from 'effects/use-persisted-state';
import ChannelBlockButton from 'component/channelBlockButton';
import ChannelMuteButton from 'component/channelMuteButton';
type Props = {
uris: Array<string>,
mutedUris: ?Array<string>,
blockedUris: ?Array<string>,
fetchingModerationBlockList: boolean,
};
const VIEW_BLOCKED = 'blocked';
const VIEW_MUTED = 'muted';
function ListBlocked(props: Props) {
const { uris } = props;
const { mutedUris, blockedUris, fetchingModerationBlockList } = props;
const [viewMode, setViewMode] = usePersistedState('blocked-muted:display', VIEW_BLOCKED);
const [loading, setLoading] = React.useState(!blockedUris || !blockedUris.length);
// Keep a local list to allow for undoing actions in this component
const [localBlockedList, setLocalBlockedList] = React.useState(undefined);
const [localMutedList, setLocalMutedList] = React.useState(undefined);
const previousFetchingModBlockList = usePrevious(fetchingModerationBlockList);
const hasLocalMuteList = localMutedList && localMutedList.length > 0;
const hasLocalBlockList = localBlockedList && localBlockedList.length > 0;
const stringifiedMutedChannels = JSON.stringify(mutedUris);
const justMuted = localMutedList && mutedUris && localMutedList.length < mutedUris.length;
const justBlocked = localBlockedList && blockedUris && localBlockedList.length < blockedUris.length;
const stringifiedBlockedChannels = JSON.stringify(blockedUris);
React.useEffect(() => {
if (previousFetchingModBlockList && !fetchingModerationBlockList) {
setLoading(false);
}
}, [setLoading, previousFetchingModBlockList, fetchingModerationBlockList]);
React.useEffect(() => {
const jsonMutedChannels = stringifiedMutedChannels && JSON.parse(stringifiedMutedChannels);
if (!hasLocalMuteList && jsonMutedChannels && jsonMutedChannels.length > 0) {
setLocalMutedList(jsonMutedChannels);
}
}, [stringifiedMutedChannels, hasLocalMuteList]);
React.useEffect(() => {
const jsonBlockedChannels = stringifiedBlockedChannels && JSON.parse(stringifiedBlockedChannels);
if (!hasLocalBlockList && jsonBlockedChannels && jsonBlockedChannels.length > 0) {
setLocalBlockedList(jsonBlockedChannels);
}
}, [stringifiedBlockedChannels, hasLocalBlockList]);
React.useEffect(() => {
if (justMuted && stringifiedMutedChannels) {
setLocalMutedList(JSON.parse(stringifiedMutedChannels));
}
}, [stringifiedMutedChannels, justMuted, setLocalMutedList]);
React.useEffect(() => {
if (justBlocked && stringifiedBlockedChannels) {
setLocalBlockedList(JSON.parse(stringifiedBlockedChannels));
}
}, [stringifiedBlockedChannels, justBlocked, setLocalBlockedList]);
return (
<Page>
{uris && uris.length ? (
<Card
isBodyList
title={__('Your blocked channels')}
body={<ClaimList uris={uris} showUnresolvedClaims showHiddenByUser />}
/>
) : (
{loading && (
<div className="main--empty">
<section className="card card--section">
<h2 className="card__title card__title--deprecated">{__('You aren’t blocking any channels')}</h2>
<p className="section__subtitle">
{__('When you block a channel, all content from that channel will be hidden.')}
</p>
</section>
<Spinner />
</div>
)}
{!loading && (
<>
<div className="section__header--actions">
<div className="section__actions--inline">
<Button
icon={ICONS.BLOCK}
button="alt"
label={__('Blocked')}
className={classnames(`button-toggle`, {
'button-toggle--active': viewMode === VIEW_BLOCKED,
})}
onClick={() => setViewMode(VIEW_BLOCKED)}
/>
<Button
icon={ICONS.MUTE}
button="alt"
label={__('Muted')}
className={classnames(`button-toggle`, {
'button-toggle--active': viewMode === VIEW_MUTED,
})}
onClick={() => setViewMode(VIEW_MUTED)}
/>
</div>
</div>
{
<ClaimList
uris={viewMode === VIEW_MUTED ? localMutedList : localBlockedList}
showUnresolvedClaims
showHiddenByUser
hideMenu
renderActions={(claim) => {
return (
<div className="section__actions">
<ChannelBlockButton uri={claim.permanent_url} />
<ChannelMuteButton uri={claim.permanent_url} />
</div>
);
}}
/>
}
</>
)}
</Page>
);
}

12
ui/page/settings/index.js
View file

@ -12,11 +12,10 @@ import {
import { doSetPlayingUri } from 'redux/actions/content';
import { makeSelectClientSetting, selectDaemonSettings, selectLanguage } from 'redux/selectors/settings';
import { doWalletStatus, selectWalletIsEncrypted, SETTINGS } from 'lbry-redux';
import { selectBlockedChannelsCount } from 'redux/selectors/blocked';
import SettingsPage from './view';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
const select = state => ({
const select = (state) => ({
daemonSettings: selectDaemonSettings(state),
allowAnalytics: selectAllowAnalytics(state),
isAuthenticated: selectUserVerifiedEmail(state),
@ -27,7 +26,6 @@ const select = state => ({
autoplay: makeSelectClientSetting(SETTINGS.AUTOPLAY)(state),
walletEncrypted: selectWalletIsEncrypted(state),
autoDownload: makeSelectClientSetting(SETTINGS.AUTO_DOWNLOAD)(state),
userBlockedChannelsCount: selectBlockedChannelsCount(state),
hideBalance: makeSelectClientSetting(SETTINGS.HIDE_BALANCE)(state),
floatingPlayer: makeSelectClientSetting(SETTINGS.FLOATING_PLAYER)(state),
hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
@ -35,14 +33,14 @@ const select = state => ({
language: selectLanguage(state),
});
const perform = dispatch => ({
const perform = (dispatch) => ({
setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)),
clearDaemonSetting: key => dispatch(doClearDaemonSetting(key)),
toggle3PAnalytics: allow => dispatch(doToggle3PAnalytics(allow)),
clearDaemonSetting: (key) => dispatch(doClearDaemonSetting(key)),
toggle3PAnalytics: (allow) => dispatch(doToggle3PAnalytics(allow)),
clearCache: () => dispatch(doClearCache()),
setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
updateWalletStatus: () => dispatch(doWalletStatus()),
confirmForgetPassword: modalProps => dispatch(doNotifyForgetPassword(modalProps)),
confirmForgetPassword: (modalProps) => dispatch(doNotifyForgetPassword(modalProps)),
clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
setDarkTime: (time, options) => dispatch(doSetDarkTime(time, options)),
openModal: (id, params) => dispatch(doOpenModal(id, params)),

35
ui/page/settings/view.jsx
View file

@ -44,9 +44,9 @@ type DaemonSettings = {
type Props = {
setDaemonSetting: (string, ?SetDaemonSettingArg) => void,
clearDaemonSetting: string => void,
clearDaemonSetting: (string) => void,
setClientSetting: (string, SetDaemonSettingArg) => void,
toggle3PAnalytics: boolean => void,
toggle3PAnalytics: (boolean) => void,
clearCache: () => Promise<any>,
daemonSettings: DaemonSettings,
allowAnalytics: boolean,
@ -60,14 +60,13 @@ type Props = {
autoplay: boolean,
updateWalletStatus: () => void,
walletEncrypted: boolean,
userBlockedChannelsCount?: number,
confirmForgetPassword: ({}) => void,
floatingPlayer: boolean,
hideReposts: ?boolean,
clearPlayingUri: () => void,
darkModeTimes: DarkModeTimes,
setDarkTime: (string, {}) => void,
openModal: string => void,
openModal: (string) => void,
language?: string,
enterSettings: () => void,
exitSettings: () => void,
@ -98,7 +97,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
if (isAuthenticated || !IS_WEB) {
this.props.updateWalletStatus();
getPasswordFromCookie().then(p => {
getPasswordFromCookie().then((p) => {
if (typeof p === 'string') {
this.setState({ storedPassword: true });
}
@ -172,7 +171,6 @@ class SettingsPage extends React.PureComponent<Props, State> {
setDaemonSetting,
setClientSetting,
toggle3PAnalytics,
userBlockedChannelsCount,
floatingPlayer,
hideReposts,
clearPlayingUri,
@ -262,7 +260,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
value={currentTheme}
disabled={automaticDarkModeEnabled}
>
{themes.map(theme => (
{themes.map((theme) => (
<option key={theme} value={theme}>
{theme === 'light' ? __('Light') : __('Dark')}
</option>
@ -282,11 +280,11 @@ class SettingsPage extends React.PureComponent<Props, State> {
<FormField
type="select"
name="automatic_dark_mode_range"
onChange={value => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
onChange={(value) => this.onChangeTime(value, { fromTo: 'from', time: 'hour' })}
value={darkModeTimes.from.hour}
label={__('From --[initial time]--')}
>
{startHours.map(time => (
{startHours.map((time) => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
@ -296,10 +294,10 @@ class SettingsPage extends React.PureComponent<Props, State> {
type="select"
name="automatic_dark_mode_range"
label={__('To --[final time]--')}
onChange={value => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
onChange={(value) => this.onChangeTime(value, { fromTo: 'to', time: 'hour' })}
value={darkModeTimes.to.hour}
>
{endHours.map(time => (
{endHours.map((time) => (
<option key={time} value={time}>
{this.to12Hour(time)}
</option>
@ -342,7 +340,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
<FormField
type="checkbox"
name="hide_reposts"
onChange={e => {
onChange={(e) => {
if (isAuthenticated) {
let param = e.target.checked ? { add: 'noreposts' } : { remove: 'noreposts' };
Lbryio.call('user_tag', 'edit', param);
@ -411,7 +409,7 @@ class SettingsPage extends React.PureComponent<Props, State> {
<FormField
type="checkbox"
name="share_third_party"
onChange={e => toggle3PAnalytics(e.target.checked)}
onChange={(e) => toggle3PAnalytics(e.target.checked)}
checked={allowAnalytics}
label={__('Allow the app to access third party analytics platforms')}
helper={__('We use detailed analytics to improve all aspects of the LBRY experience.')}
@ -438,21 +436,14 @@ class SettingsPage extends React.PureComponent<Props, State> {
/>
<Card
title={__('Blocked channels')}
subtitle={
userBlockedChannelsCount === 0
? __("You don't have blocked channels.")
: userBlockedChannelsCount === 1
? __('You have one blocked channel.')
: __('You have %channels% blocked channels.', { channels: userBlockedChannelsCount })
}
title={__('Blocked and muted channels')}
actions={
<div className="section__actions">
<Button
button="secondary"
label={__('Manage')}
icon={ICONS.SETTINGS}
navigate={`/$/${PAGES.BLOCKED}`}
navigate={`/$/${PAGES.SETTINGS_BLOCKED_MUTED}`}
/>
</div>
}

2
ui/redux/actions/blocked.js
View file

@ -3,7 +3,7 @@ import * as ACTIONS from 'constants/action_types';
import { selectPrefsReady } from 'redux/selectors/sync';
import { doAlertWaitingForSync } from 'redux/actions/app';
export const doToggleBlockChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
export const doToggleMuteChannel = (uri: string) => (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const ready = selectPrefsReady(state);

181
ui/redux/actions/comments.js
View file

@ -1,7 +1,7 @@
// @flow
import * as ACTIONS from 'constants/action_types';
import * as REACTION_TYPES from 'constants/reactions';
import { Lbry, selectClaimsByUri } from 'lbry-redux';
import { Lbry, buildURI, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
import { doToast, doSeeNotifications } from 'redux/actions/notifications';
import {
makeSelectCommentIdsForUri,
@ -50,7 +50,7 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
});
return result;
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_LIST_FAILED,
data: error,
@ -89,7 +89,7 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
},
});
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_FAILED,
data: error,
@ -171,14 +171,14 @@ export function doCommentReact(commentId: string, type: string) {
data: commentId + type,
});
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_REACT_FAILED,
data: commentId + type,
});
const myRevertedReactsObj = myReacts
.filter(el => el !== type)
.filter((el) => el !== type)
.reduce((acc, el) => {
acc[el] = 1;
return acc;
@ -233,7 +233,7 @@ export function doCommentCreate(comment: string = '', claim_id: string = '', par
});
return result;
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_CREATE_FAILED,
data: error,
@ -274,7 +274,7 @@ export function doCommentPin(commentId: string, remove: boolean) {
data: result,
});
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_PIN_FAILED,
data: error,
@ -339,7 +339,7 @@ export function doCommentAbandon(commentId: string, creatorChannelUri?: string)
);
}
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_ABANDON_FAILED,
data: error,
@ -389,7 +389,7 @@ export function doCommentUpdate(comment_id: string, comment: string) {
);
}
})
.catch(error => {
.catch((error) => {
dispatch({
type: ACTIONS.COMMENT_UPDATE_FAILED,
data: error,
@ -406,38 +406,157 @@ export function doCommentUpdate(comment_id: string, comment: string) {
}
// Hides a users comments from all creator's claims and prevent them from commenting in the future
export function doCommentModBlock(commentAuthor: string) {
export function doCommentModToggleBlock(channelUri: string, unblock: boolean = false) {
return async (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const claim = selectClaimsByUri(state)[commentAuthor];
const myChannels = selectMyChannelClaims(state);
const claim = selectClaimsByUri(state)[channelUri];
if (!claim) {
console.error("Can't find claim to block"); // eslint-disable-line
return;
}
const creatorIdToBan = claim ? claim.claim_id : null;
const creatorNameToBan = claim ? claim.name : null;
const activeChannelClaim = selectActiveChannelClaim(state);
dispatch({
type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED : ACTIONS.COMMENT_MODERATION_BLOCK_STARTED,
data: {
uri: channelUri,
},
});
let channelSignature = {};
if (activeChannelClaim) {
try {
channelSignature = await Lbry.channel_sign({
channel_id: activeChannelClaim.claim_id,
hexdata: toHex(activeChannelClaim.name),
});
} catch (e) {}
const creatorIdForAction = claim ? claim.claim_id : null;
const creatorNameForAction = claim ? claim.name : null;
let channelSignatures = [];
if (myChannels) {
for (const channelClaim of myChannels) {
try {
const channelSignature = await Lbry.channel_sign({
channel_id: channelClaim.claim_id,
hexdata: toHex(channelClaim.name),
});
channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
} catch (e) {}
}
}
return Comments.moderation_block({
mod_channel_id: activeChannelClaim.claim_id,
mod_channel_name: activeChannelClaim.name,
signature: channelSignature.signature,
signing_ts: channelSignature.signing_ts,
banned_channel_id: creatorIdToBan,
banned_channel_name: creatorNameToBan,
delete_all: true,
});
const sharedModBlockParams = unblock
? {
un_blocked_channel_id: creatorIdForAction,
un_blocked_channel_name: creatorNameForAction,
}
: {
blocked_channel_id: creatorIdForAction,
blocked_channel_name: creatorNameForAction,
};
const commentAction = unblock ? Comments.moderation_unblock : Comments.moderation_block;
return Promise.all(
channelSignatures.map((signatureData) =>
commentAction({
mod_channel_id: signatureData.claim_id,
mod_channel_name: signatureData.name,
signature: signatureData.signature,
signing_ts: signatureData.signing_ts,
...sharedModBlockParams,
})
)
)
.then(() => {
dispatch({
type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE : ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE,
data: { channelUri },
});
if (!unblock) {
dispatch(doToast({ message: __('Channel blocked. You will not see them again.') }));
}
})
.catch(() => {
dispatch({
type: unblock ? ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED : ACTIONS.COMMENT_MODERATION_BLOCK_FAILED,
});
});
};
}
export function doCommentModBlock(commentAuthor: string) {
return (dispatch: Dispatch) => {
return dispatch(doCommentModToggleBlock(commentAuthor));
};
}
export function doCommentModUnBlock(commentAuthor: string) {
return (dispatch: Dispatch) => {
return dispatch(doCommentModToggleBlock(commentAuthor, true));
};
}
export function doFetchModBlockedList() {
return async (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const myChannels = selectMyChannelClaims(state);
dispatch({
type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED,
});
let channelSignatures = [];
if (myChannels) {
for (const channelClaim of myChannels) {
try {
const channelSignature = await Lbry.channel_sign({
channel_id: channelClaim.claim_id,
hexdata: toHex(channelClaim.name),
});
channelSignatures.push({ ...channelSignature, claim_id: channelClaim.claim_id, name: channelClaim.name });
} catch (e) {}
}
}
return Promise.all(
channelSignatures.map((signatureData) =>
Comments.moderation_block_list({
mod_channel_id: signatureData.claim_id,
mod_channel_name: signatureData.name,
signature: signatureData.signature,
signing_ts: signatureData.signing_ts,
})
)
)
.then((blockLists) => {
let globalBlockList = new Set();
blockLists.forEach((channelBlockListData) => {
const blockListForChannel = channelBlockListData && channelBlockListData.blocked_channels;
if (blockListForChannel) {
blockListForChannel.forEach((blockedChannel) => {
// REMOVE THIS
if (blockedChannel.blocked_channel_name) {
const channelUri = buildURI({
channelName: blockedChannel.blocked_channel_name,
claimId: blockedChannel.blocked_channel_id,
});
globalBlockList.add(channelUri);
}
});
}
});
dispatch({
type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED,
data: {
blockList: Array.from(globalBlockList).reverse(),
},
});
})
.catch((err) => {
dispatch({
type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED,
});
});
};
}

6
ui/redux/reducers/blocked.js
View file

@ -15,9 +15,9 @@ export default handleActions(
let newBlockedChannels = blockedChannels.slice();
if (newBlockedChannels.includes(uri)) {
newBlockedChannels = newBlockedChannels.filter(id => id !== uri);
newBlockedChannels = newBlockedChannels.filter((id) => id !== uri);
} else {
newBlockedChannels.push(uri);
newBlockedChannels.unshift(uri);
}
return {
@ -29,7 +29,7 @@ export default handleActions(
action: { data: { blocked: ?Array<string> } }
) => {
const { blocked } = action.data;
const sanitizedBlocked = blocked && blocked.filter(e => typeof e === 'string');
const sanitizedBlocked = blocked && blocked.filter((e) => typeof e === 'string');
return {
...state,
blockedChannels: sanitizedBlocked && sanitizedBlocked.length ? sanitizedBlocked : state.blockedChannels,

107
ui/redux/reducers/comments.js
View file

@ -16,6 +16,10 @@ const defaultState: CommentsState = {
typesReacting: [],
myReactsByCommentId: undefined,
othersReactsByCommentId: undefined,
moderationBlockList: undefined,
fetchingModerationBlockList: false,
blockingByUri: {},
unBlockingByUri: {},
};
export default handleActions(
@ -144,7 +148,7 @@ export default handleActions(
};
},
[ACTIONS.COMMENT_LIST_STARTED]: state => ({ ...state, isLoading: true }),
[ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),
[ACTIONS.COMMENT_LIST_COMPLETED]: (state: CommentsState, action: any) => {
const { comments, claimId, uri } = action.data;
@ -227,17 +231,15 @@ export default handleActions(
isLoading: false,
};
},
// do nothing
[ACTIONS.COMMENT_ABANDON_FAILED]: (state: CommentsState, action: any) => ({
...state,
isCommenting: false,
}),
// do nothing
[ACTIONS.COMMENT_UPDATE_STARTED]: (state: CommentsState, action: any) => ({
...state,
isCommenting: true,
}),
// replace existing comment with comment returned here under its comment_id
[ACTIONS.COMMENT_UPDATE_COMPLETED]: (state: CommentsState, action: any) => {
const { comment } = action.data;
const commentById = Object.assign({}, state.commentById);
@ -249,25 +251,100 @@ export default handleActions(
isCommenting: false,
};
},
// nothing can be done here
[ACTIONS.COMMENT_UPDATE_FAILED]: (state: CommentsState, action: any) => ({
...state,
isCmmenting: false,
}),
// nothing can really be done here
[ACTIONS.COMMENT_HIDE_STARTED]: (state: CommentsState, action: any) => ({
[ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
...state,
isLoading: true,
fetchingModerationBlockList: true,
}),
[ACTIONS.COMMENT_HIDE_COMPLETED]: (state: CommentsState, action: any) => ({
...state, // todo: add HiddenComments state & create selectors
isLoading: false,
}),
// nothing can be done here
[ACTIONS.COMMENT_HIDE_FAILED]: (state: CommentsState, action: any) => ({
[ACTIONS.COMMENT_MODERATION_BLOCK_LIST_COMPLETED]: (state: CommentsState, action: any) => {
const { blockList } = action.data;
return {
...state,
moderationBlockList: blockList,
fetchingModerationBlockList: false,
};
},
[ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED]: (state: CommentsState, action: any) => ({
...state,
isLoading: false,
fetchingModerationBlockList: false,
}),
[ACTIONS.COMMENT_MODERATION_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
...state,
blockingByUri: {
...state.blockingByUri,
[action.data.uri]: true,
},
}),
[ACTIONS.COMMENT_MODERATION_UN_BLOCK_STARTED]: (state: CommentsState, action: any) => ({
...state,
unBlockingByUri: {
...state.unBlockingByUri,
[action.data.uri]: true,
},
}),
[ACTIONS.COMMENT_MODERATION_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
...state,
blockingByUri: {
...state.blockingByUri,
[action.data.uri]: false,
},
}),
[ACTIONS.COMMENT_MODERATION_UN_BLOCK_FAILED]: (state: CommentsState, action: any) => ({
...state,
unBlockingByUri: {
...state.unBlockingByUri,
[action.data.uri]: false,
},
}),
[ACTIONS.COMMENT_MODERATION_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
const { channelUri } = action.data;
const commentById = Object.assign({}, state.commentById);
const blockingByUri = Object.assign({}, state.blockingByUri);
const moderationBlockList = state.moderationBlockList || [];
const newModerationBlockList = moderationBlockList.slice();
for (const commentId in commentById) {
const comment = commentById[commentId];
if (channelUri === comment.channel_url) {
delete commentById[comment.comment_id];
}
}
delete blockingByUri[channelUri];
newModerationBlockList.push(channelUri);
return {
...state,
commentById,
blockingByUri,
moderationBlockList: newModerationBlockList,
};
},
[ACTIONS.COMMENT_MODERATION_UN_BLOCK_COMPLETE]: (state: CommentsState, action: any) => {
const { channelUri } = action.data;
const unBlockingByUri = Object.assign(state.unBlockingByUri, {});
const moderationBlockList = state.moderationBlockList || [];
const newModerationBlockList = moderationBlockList.slice().filter((uri) => uri !== channelUri);
delete unBlockingByUri[channelUri];
return {
...state,
unBlockingByUri,
moderationBlockList: newModerationBlockList,
};
},
},
defaultState
);

20
ui/redux/selectors/blocked.js
View file

@ -3,23 +3,11 @@ import { createSelector } from 'reselect';
const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
export const selectBlockedChannels = createSelector(selectState, (state: BlocklistState) => {
return state.blockedChannels.filter(e => typeof e === 'string');
export const selectMutedChannels = createSelector(selectState, (state: BlocklistState) => {
return state.blockedChannels.filter((e) => typeof e === 'string');
});
export const selectBlockedChannelsCount = createSelector(selectBlockedChannels, (state: Array<string>) => state.length);
export const selectBlockedChannelsObj = createSelector(selectState, (state: BlocklistState) => {
return state.blockedChannels.reduce((acc: any, val: any) => {
const outpoint = `${val.txid}:${String(val.nout)}`;
return {
...acc,
[outpoint]: 1,
};
}, {});
});
export const selectChannelIsBlocked = (uri: string) =>
createSelector(selectBlockedChannels, (state: Array<string>) => {
export const makeSelectChannelIsMuted = (uri: string) =>
createSelector(selectMutedChannels, (state: Array<string>) => {
return state.includes(uri);
});

79
ui/redux/selectors/comments.js
View file

@ -1,22 +1,28 @@
// @flow
import * as SETTINGS from 'constants/settings';
import { createSelector } from 'reselect';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { makeSelectClientSetting } from 'redux/selectors/settings';
import { selectBlacklistedOutpointMap, selectFilteredOutpointMap } from 'lbryinc';
import { selectClaimsById, isClaimNsfw, selectMyActiveClaims } from 'lbry-redux';
const selectState = state => state.comments || {};
const selectState = (state) => state.comments || {};
export const selectCommentsById = createSelector(selectState, state => state.commentById || {});
export const selectIsFetchingComments = createSelector(selectState, state => state.isLoading);
export const selectIsPostingComment = createSelector(selectState, state => state.isCommenting);
export const selectIsFetchingReacts = createSelector(selectState, state => state.isFetchingReacts);
export const selectOthersReactsById = createSelector(selectState, state => state.othersReactsByCommentId);
export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
export const selectOthersReactsById = createSelector(selectState, (state) => state.othersReactsByCommentId);
export const selectModerationBlockList = createSelector(
selectState,
(state) => state.moderationBlockList && state.moderationBlockList.reverse()
);
export const selectBlockingByUri = createSelector(selectState, (state) => state.blockingByUri);
export const selectUnBlockingByUri = createSelector(selectState, (state) => state.unBlockingByUri);
export const selectFetchingModerationBlockList = createSelector(
selectState,
(state) => state.fetchingModerationBlockList
);
export const selectCommentsByClaimId = createSelector(selectState, selectCommentsById, (state, byId) => {
const byClaimId = state.byId || {};
@ -40,7 +46,7 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
const comments = {};
// replace every comment_id in the list with the actual comment object
Object.keys(byClaimId).forEach(claimId => {
Object.keys(byClaimId).forEach((claimId) => {
const commentIds = byClaimId[claimId];
comments[claimId] = Array(commentIds === null ? 0 : commentIds.length);
@ -53,14 +59,14 @@ export const selectTopLevelCommentsByClaimId = createSelector(selectState, selec
});
export const makeSelectCommentForCommentId = (commentId: string) =>
createSelector(selectCommentsById, comments => comments[commentId]);
createSelector(selectCommentsById, (comments) => comments[commentId]);
export const selectRepliesByParentId = createSelector(selectState, selectCommentsById, (state, byId) => {
const byParentId = state.repliesByParentId || {};
const comments = {};
// replace every comment_id in the list with the actual comment object
Object.keys(byParentId).forEach(id => {
Object.keys(byParentId).forEach((id) => {
const commentIds = byParentId[id];
comments[id] = Array(commentIds === null ? 0 : commentIds.length);
@ -77,10 +83,10 @@ export const selectRepliesByParentId = createSelector(selectState, selectComment
selectState,
state => state.byId || {}
); */
export const selectCommentsByUri = createSelector(selectState, state => {
export const selectCommentsByUri = createSelector(selectState, (state) => {
const byUri = state.commentsByUri || {};
const comments = {};
Object.keys(byUri).forEach(uri => {
Object.keys(byUri).forEach((uri) => {
const claimId = byUri[uri];
if (claimId === null) {
comments[uri] = null;
@ -99,16 +105,16 @@ export const makeSelectCommentIdsForUri = (uri: string) =>
});
export const makeSelectMyReactionsForComment = (commentId: string) =>
createSelector(selectState, state => {
createSelector(selectState, (state) => {
return state.myReactsByCommentId[commentId] || [];
});
export const makeSelectOthersReactionsForComment = (commentId: string) =>
createSelector(selectState, state => {
createSelector(selectState, (state) => {
return state.othersReactsByCommentId[commentId];
});
export const selectPendingCommentReacts = createSelector(selectState, state => state.pendingCommentReactions);
export const selectPendingCommentReacts = createSelector(selectState, (state) => state.pendingCommentReactions);
export const makeSelectCommentsForUri = (uri: string) =>
createSelector(
@ -116,7 +122,7 @@ export const makeSelectCommentsForUri = (uri: string) =>
selectCommentsByUri,
selectClaimsById,
selectMyActiveClaims,
selectBlockedChannels,
selectMutedChannels,
selectBlacklistedOutpointMap,
selectFilteredOutpointMap,
makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -125,7 +131,12 @@ export const makeSelectCommentsForUri = (uri: string) =>
const comments = byClaimId && byClaimId[claimId];
return comments
? comments.filter(comment => {
? comments.filter((comment) => {
if (!comment) {
// It may have been recently deleted after being blocked
return false;
}
const channelClaim = claimsById[comment.channel_id];
// Return comment if `channelClaim` doesn't exist so the component knows to resolve the author
@ -162,7 +173,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
selectCommentsByUri,
selectClaimsById,
selectMyActiveClaims,
selectBlockedChannels,
selectMutedChannels,
selectBlacklistedOutpointMap,
selectFilteredOutpointMap,
makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -171,7 +182,7 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
const comments = byClaimId && byClaimId[claimId];
return comments
? comments.filter(comment => {
? comments.filter((comment) => {
if (!comment) {
return false;
}
@ -212,7 +223,7 @@ export const makeSelectRepliesForParentId = (id: string) =>
selectCommentsById,
selectClaimsById,
selectMyActiveClaims,
selectBlockedChannels,
selectMutedChannels,
selectBlacklistedOutpointMap,
selectFilteredOutpointMap,
makeSelectClientSetting(SETTINGS.SHOW_MATURE),
@ -223,13 +234,13 @@ export const makeSelectRepliesForParentId = (id: string) =>
if (!replyIdsForParent.length) return null;
const comments = [];
replyIdsForParent.forEach(cid => {
replyIdsForParent.forEach((cid) => {
comments.push(commentsById[cid]);
});
// const comments = byParentId && byParentId[id];
return comments
? comments.filter(comment => {
? comments.filter((comment) => {
if (!comment) {
return false;
}
@ -265,6 +276,20 @@ export const makeSelectRepliesForParentId = (id: string) =>
);
export const makeSelectTotalCommentsCountForUri = (uri: string) =>
createSelector(makeSelectCommentsForUri(uri), comments => {
createSelector(makeSelectCommentsForUri(uri), (comments) => {
return comments ? comments.length : 0;
});
export const makeSelectChannelIsBlocked = (uri: string) =>
createSelector(selectModerationBlockList, (blockedChannelUris) => {
if (!blockedChannelUris || !blockedChannelUris) {
return false;
}
return blockedChannelUris.includes(uri);
});
export const makeSelectUriIsBlockingOrUnBlocking = (uri: string) =>
createSelector(selectBlockingByUri, selectUnBlockingByUri, (blockingByUri, unBlockingByUri) => {
return blockingByUri[uri] || unBlockingByUri[uri];
});

4
ui/redux/selectors/content.js
View file

@ -13,7 +13,7 @@ import {
makeSelectFileNameForUri,
} from 'lbry-redux';
import { makeSelectRecommendedContentForUri } from 'redux/selectors/search';
import { selectBlockedChannels } from 'redux/selectors/blocked';
import { selectMutedChannels } from 'redux/selectors/blocked';
import { selectAllCostInfoByUri, makeSelectCostInfoForUri } from 'lbryinc';
import { selectShowMatureContent } from 'redux/selectors/settings';
import * as RENDER_MODES from 'constants/file_render_modes';
@ -81,7 +81,7 @@ export const makeSelectNextUnplayedRecommended = (uri: string) =>
selectHistory,
selectClaimsByUri,
selectAllCostInfoByUri,
selectBlockedChannels,
selectMutedChannels,
(
recommendedForUri: Array<string>,
history: Array<{ uri: string }>,

10
ui/scss/component/_channel.scss
View file

@ -390,6 +390,16 @@ $metadata-z-index: 1;
padding: 0;
}
.channel-staked__wrapper--inline {
position: relative;
background-color: transparent;
display: inline-block;
bottom: auto;
left: auto;
top: var(--spacing-xs);
padding: 0;
}
.channel-staked__indicator {
margin-left: 2px;
z-index: 3;

67
ui/scss/component/_claim-list.scss
View file

@ -64,6 +64,12 @@
.claim-preview__wrapper {
padding: var(--spacing-m);
list-style: none;
&:hover {
.claim__menu-button {
display: block;
}
}
}
.claim-preview__wrapper--notice {
@ -247,17 +253,6 @@
.claim-preview-info {
align-items: flex-start;
.channel-thumbnail {
display: none;
@include handleChannelGif(1.4rem);
margin-right: 0;
margin-left: var(--spacing-s);
@media (min-width: $breakpoint-small) {
display: block;
}
}
}
.claim-preview-info,
@ -408,6 +403,10 @@
&:hover {
cursor: pointer;
.claim__menu-button {
display: block;
}
}
@media (min-width: $breakpoint-large) {
@ -456,12 +455,23 @@
}
.claim-tile__title {
margin: var(--spacing-s);
position: relative;
padding: var(--spacing-s);
padding-right: var(--spacing-m);
padding-bottom: 0;
margin-bottom: var(--spacing-s);
font-weight: 600;
color: var(--color-text);
font-size: var(--font-small);
min-height: 2rem;
.claim__menu-button {
right: 0.2rem;
top: var(--spacing-s);
}
@media (min-width: $breakpoint-small) {
min-height: 2.5rem;
}
@ -571,3 +581,36 @@
.claim-preview__null-label {
margin: auto;
}
.claim-preview__channel-staked {
display: flex;
align-items: center;
.channel-thumbnail {
@include handleChannelGif(1.4rem);
margin-right: 0;
}
}
.claim__menu-button {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xs);
.icon {
stroke: var(--color-text);
}
&:not([aria-expanded='true']) {
display: none;
}
}
.claim__menu-button--inline {
position: relative;
display: block;
right: auto;
top: auto;
@extend .button--alt;
padding: 0 var(--spacing-xxs);
}

27
ui/scss/component/menu-button.scss
View file

@ -43,6 +43,15 @@
box-shadow: none;
}
.menu__button {
&:hover {
.icon {
border-radius: var(--border-radius);
background-color: var(--color-card-background-highlighted);
}
}
}
.menu__title {
&[aria-expanded='true'] {
background-color: var(--color-primary-alt);
@ -54,16 +63,7 @@
animation: menu-animate-in var(--animation-duration) var(--animation-style);
border-bottom-left-radius: var(--border-radius);
border-bottom-right-radius: var(--border-radius);
}
.menu__list--header {
@extend .menu__list;
padding: var(--spacing-xs);
margin-top: 19px;
}
.menu__list--comments {
@extend .menu__list;
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
padding: var(--spacing-xs) 0;
@ -73,6 +73,15 @@
}
}
.menu__list--header {
@extend .menu__list;
margin-top: 19px;
}
.menu__list--comments {
@extend .menu__list;
}
.menu__link {
display: flex;
align-items: center;

2
ui/scss/init/_color.scss
View file

@ -36,7 +36,7 @@
--color-button-primary-bg-hover: var(--color-primary-alt-2);
--color-button-primary-hover-text: var(--color-primary-alt);
--color-button-secondary-bg: var(--color-secondary-alt);
--color-button-secondary-border: #c5d7ed;
--color-button-secondary-border: var(--color-secondary-alt);
--color-button-secondary-text: var(--color-secondary);
--color-button-secondary-bg-hover: #b9d0e9;
--color-button-alt-bg: var(--color-gray-1);

9
ui/store.js
View file

@ -24,9 +24,9 @@ function isNotFunction(object) {
}
function createBulkThunkMiddleware() {
return ({ dispatch, getState }) => next => action => {
return ({ dispatch, getState }) => (next) => (action) => {
if (action.type === 'BATCH_ACTIONS') {
action.actions.filter(isFunction).map(actionFn => actionFn(dispatch, getState));
action.actions.filter(isFunction).map((actionFn) => actionFn(dispatch, getState));
}
return next(action);
};
@ -68,7 +68,6 @@ const subscriptionsFilter = createFilter('subscriptions', ['subscriptions']);
const blockedFilter = createFilter('blocked', ['blockedChannels']);
const settingsFilter = createBlacklistFilter('settings', ['loadedLanguages', 'language']);
const whiteListedReducers = [
'comments',
'fileInfo',
'publish',
'wallet',
@ -143,7 +142,7 @@ const sharedStateFilters = {
subscriptions: {
source: 'subscriptions',
property: 'subscriptions',
transform: function(value) {
transform: (value) => {
return value.map(({ uri }) => uri);
},
},
@ -162,7 +161,7 @@ const sharedStateCb = ({ dispatch, getState }) => {
};
const populateAuthTokenHeader = () => {
return next => action => {
return (next) => (action) => {
if (
(action.type === ACTIONS.USER_FETCH_SUCCESS || action.type === ACTIONS.AUTHENTICATION_SUCCESS) &&
action.data.user.has_verified_email === true

48
ui/util/hex.js
View file

@ -1,8 +1,50 @@
// @flow
const EMOJI_REGEX = /(?:[\u2700-\u27bf]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?(?:\u200d(?:[^\ud800-\udfff]|(?:\ud83c[\udde6-\uddff]){2}|[\ud800-\udbff][\udc00-\udfff])[\ufe0e\ufe0f]?(?:[\u0300-\u036f\ufe20-\ufe23\u20d0-\u20f0]|\ud83c[\udffb-\udfff])?)*/g;
export function toHex(str: string): string {
var result = '';
for (var i = 0; i < str.length; i++) {
result += str.charCodeAt(i).toString(16);
const array = Array.from(str);
let result = '';
for (var i = 0; i < array.length; i++) {
const val = array[i];
const isEmoji = EMOJI_REGEX.test(val);
const utf = isEmoji
? toUTF8Array(val)
.map((num) => num.toString(16))
.join('')
: val.charCodeAt(0).toString(16);
result += utf;
}
return result;
}
function toUTF8Array(str) {
var utf8 = [];
for (var i = 0; i < str.length; i++) {
var charcode = str.charCodeAt(i);
if (charcode < 0x80) utf8.push(charcode);
else if (charcode < 0x800) {
utf8.push(0xc0 | (charcode >> 6), 0x80 | (charcode & 0x3f));
} else if (charcode < 0xd800 || charcode >= 0xe000) {
utf8.push(0xe0 | (charcode >> 12), 0x80 | ((charcode >> 6) & 0x3f), 0x80 | (charcode & 0x3f));
}
// surrogate pair
else {
i++;
charcode = (((charcode & 0x3ff) << 10) | (str.charCodeAt(i) & 0x3ff)) + 0x010000;
utf8.push(
0xf0 | (charcode >> 18),
0x80 | ((charcode >> 12) & 0x3f),
0x80 | ((charcode >> 6) & 0x3f),
0x80 | (charcode & 0x3f)
);
}
}
return utf8;
}