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

Merge branch 'master' into accessibility

Browse source
This commit is contained in:
Baltazar Gomez 2021-07-14 13:48:37 -05:00 committed by GitHub
commit 2f67ca370e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
61 changed files with 1785 additions and 793 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
config.js
View file

@ -52,6 +52,7 @@ const config = {
STRIPE_PUBLIC_KEY: process.env.STRIPE_PUBLIC_KEY,
ENABLE_UI_NOTIFICATIONS: process.env.ENABLE_UI_NOTIFICATIONS === 'true',
ENABLE_MATURE: process.env.ENABLE_MATURE === 'true',
CUSTOM_HOMEPAGE: process.env.CUSTOM_HOMEPAGE === 'true',
};
config.URL_LOCAL = `http://localhost:${config.WEB_SERVER_PORT}`;

66
flow-typed/Comment.js vendored
View file

@ -13,6 +13,7 @@ declare type Comment = {
parent_id?: number, // comment_id of comment this is in reply to
is_pinned: boolean,
support_amount: number,
replies: number, // number of direct replies (i.e. excluding nested replies).
};
declare type PerChannelSettings = {
@ -27,15 +28,21 @@ declare type PerChannelSettings = {
declare type CommentsState = {
commentsByUri: { [string]: string },
superChatsByUri: { [string]: { totalAmount: number, comments: Array<Comment> } },
byId: { [string]: Array<string> },
repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of reply comments
topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of top level comments
byId: { [string]: Array<string> }, // ClaimID -> list of fetched comment IDs.
totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
repliesByParentId: { [string]: Array<string> }, // ParentCommentID -> list of fetched replies.
totalRepliesByParentId: {}, // ParentCommentID -> total replies in commentron.
topLevelCommentsById: { [string]: Array<string> }, // ClaimID -> list of fetched top level comments.
topLevelTotalPagesById: { [string]: number }, // ClaimID -> total number of top-level pages in commentron. Based on COMMENT_PAGE_SIZE_TOP_LEVEL.
topLevelTotalCommentsById: { [string]: number }, // ClaimID -> total top level comments in commentron.
commentById: { [string]: Comment },
linkedCommentAncestors: { [string]: Array<string> }, // {"linkedCommentId": ["parentId", "grandParentId", ...]}
isLoading: boolean,
isLoadingByParentId: { [string]: boolean },
myComments: ?Set<string>,
isFetchingReacts: boolean,
myReactsByCommentId: any,
othersReactsByCommentId: any,
myReactsByCommentId: ?{ [string]: Array<string> }, // {"CommentId:MyChannelId": ["like", "dislike", ...]}
othersReactsByCommentId: ?{ [string]: { [string]: number } }, // {"CommentId:MyChannelId": {"like": 2, "dislike": 2, ...}}
pendingCommentReactions: Array<string>,
moderationBlockList: ?Array<string>, // @KP rename to "personalBlockList"?
adminBlockList: ?Array<string>,
@ -64,17 +71,48 @@ declare type CommentReactParams = {
remove?: boolean,
};
declare type CommentReactListParams = {
comment_ids?: string,
channel_id?: string,
channel_name?: string,
wallet_id?: string,
react_types?: string,
};
declare type CommentListParams = {
page: number,
page_size: number,
claim_id: string,
page: number, // pagination: which page of results
page_size: number, // pagination: nr of comments to show in a page (max 200)
claim_id: string, // claim id of claim being commented on
channel_name?: string, // signing channel name of claim (enables 'commentsEnabled' check)
channel_id?: string, // signing channel claim id of claim (enables 'commentsEnabled' check)
author_claim_id?: string, // filters comments to just this author
parent_id?: string, // filters comments to those under this thread
top_level?: boolean, // filters to only top level comments
hidden?: boolean, // if true, will show hidden comments as well
sort_by?: number, // NEWEST=0, OLDEST=1, CONTROVERSY=2, POPULARITY=3,
};
declare type CommentListResponse = {
items: Array<Comment>,
total_amount: number,
page: number,
page_size: number,
total_items: number, // Grand total for the claim being commented on.
total_filtered_items: number, // Total for filtered queries (e.g. top_level=true, parent_id=xxx, etc.).
total_pages: number,
has_hidden_comments: boolean,
};
declare type CommentByIdParams = {
comment_id: string,
with_ancestors: boolean,
}
declare type CommentByIdResponse = {
item: Comment,
items: Comment,
ancestors: Array<Comment>,
}
declare type CommentAbandonParams = {
comment_id: string,
creator_channel_id?: string,
@ -94,6 +132,16 @@ declare type CommentCreateParams = {
declare type SuperListParams = {};
declare type SuperListResponse = {
page: number,
page_size: number,
total_pages: number,
total_items: number,
total_amount: number,
items: Array<Comment>,
has_hidden_comments: boolean,
};
declare type ModerationBlockParams = {};
declare type ModerationAddDelegateParams = {

2
flow-typed/homepage.js vendored
View file

@ -20,7 +20,7 @@ declare type RowDataItem = {
options?: {
channelIds?: Array<string>,
limitClaimsPerChannel?: number,
pageSize: number,
pageSize?: number,
},
route?: string,
hideForUnauth?: boolean,

181
homepages/homepage.js
View file

@ -1,38 +1,7 @@
// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as CS from 'constants/claim_search';
import { parseURI } from 'lbry-redux';
import moment from 'moment';
import { toCapitalCase } from 'util/string';
import { useIsLargeScreen } from 'effects/use-screensize';
import * as PAGES from '../ui/constants/pages';
import * as CS from '../ui/constants/claim_search';
export type RowDataItem = {
title: string,
link?: string,
help?: any,
options?: {},
icon?: string,
};
export default function GetHomePageRowData(
authenticated: boolean,
showPersonalizedChannels: boolean,
showPersonalizedTags: boolean,
subscribedChannels: Array<Subscription>,
followedTags: Array<Tag>,
showIndividualTags: boolean,
showNsfw: boolean
) {
const isLargeScreen = useIsLargeScreen();
function getPageSize(originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
}
let rowData: Array<RowDataItem> = [];
const individualTagDataItems: Array<RowDataItem> = [];
const YOUTUBER_CHANNEL_IDS = [
const YOUTUBER_CHANNEL_IDS = [
'fb364ef587872515f545a5b4b3182b58073f230f',
'589276465a23c589801d874f484cc39f307d7ec7',
'ba79c80788a9e1751e49ad401f5692d86f73a2db',
@ -116,142 +85,18 @@ export default function GetHomePageRowData(
'e8f68563d242f6ac9784dcbc41dd86c28a9391d6',
];
const YOUTUBE_CREATOR_ROW = {
title: __('CableTube Escape Artists'),
const YOUTUBERS = {
ids: YOUTUBER_CHANNEL_IDS,
link: `/$/${PAGES.DISCOVER}?${CS.CLAIM_TYPE}=${CS.CLAIM_STREAM}&${CS.CHANNEL_IDS_KEY}=${YOUTUBER_CHANNEL_IDS.join(
','
)}`,
options: {
claimType: ['stream'],
orderBy: ['release_time'],
pageSize: getPageSize(12),
channelIds: YOUTUBER_CHANNEL_IDS,
limitClaimsPerChannel: 1,
releaseTime: `>${Math.floor(moment().subtract(1, 'months').startOf('week').unix())}`,
},
name: 'general',
label: 'CableTube Escape Artists',
channelLimit: 1,
daysOfContent: 30,
pageSize: 24,
//pinnedUrls: [],
//mixIn: [],
};
if (followedTags.length) {
followedTags.forEach((tag: Tag) => {
const tagName = `#${toCapitalCase(tag.name)}`;
individualTagDataItems.push({
title: __('Trending for %tagName%', { tagName: tagName }),
link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
options: {
pageSize: 4,
tags: [tag.name],
claimType: ['stream'],
},
});
});
}
const RECENT_FROM_FOLLOWING = {
title: __('Recent From Following'),
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
icon: ICONS.SUBSCRIBE,
options: {
streamTypes: null,
orderBy: ['release_time'],
releaseTime:
subscribedChannels.length > 20
? `>${Math.floor(moment().subtract(6, 'months').startOf('week').unix())}`
: `>${Math.floor(moment().subtract(1, 'year').startOf('week').unix())}`,
pageSize: getPageSize(subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4),
channelIds: subscribedChannels.map((subscription: Subscription) => {
const { channelClaimId } = parseURI(subscription.uri);
return channelClaimId;
}),
},
};
const TOP_CONTENT_TODAY = {
title: __('Top Content from Today'),
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_DAY}`,
options: {
pageSize: getPageSize(showPersonalizedChannels || showPersonalizedTags ? 4 : 8),
orderBy: ['effective_amount'],
claimType: ['stream'],
limitClaimsPerChannel: 2,
releaseTime: `>${Math.floor(moment().subtract(1, 'day').startOf('day').unix())}`,
},
};
const TOP_CHANNELS = {
title: __('Top Channels On LBRY'),
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
orderBy: ['effective_amount'],
claimType: ['channel'],
},
};
// const TRENDING_CLASSICS = {
// title: __('Trending Classics'),
// link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TRENDING}&${CS.FRESH_KEY}=${CS.FRESH_WEEK}`,
// options: {
// pageSize: getPageSize(4),
// claimType: ['stream'],
// limitClaimsPerChannel: 1,
// releaseTime: `<${Math.floor(
// moment()
// .subtract(6, 'month')
// .startOf('day')
// .unix()
// )}`,
// },
// };
// const TRENDING_ON_LBRY = {
// title: __('Trending On LBRY'),
// link: `/$/${PAGES.DISCOVER}`,
// options: {
// pageSize: showPersonalizedChannels || showPersonalizedTags ? 4 : 8,
// },
// };
const TRENDING_FOR_TAGS = {
title: __('Trending For Your Tags'),
link: `/$/${PAGES.TAGS_FOLLOWING}`,
icon: ICONS.TAG,
options: {
pageSize: getPageSize(4),
tags: followedTags.map((tag) => tag.name),
claimType: ['stream'],
limitClaimsPerChannel: 2,
},
};
const LATEST_FROM_LBRY = {
title: __('Latest From @lbry'),
link: `/@lbry:3f`,
options: {
orderBy: ['release_time'],
pageSize: getPageSize(4),
channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
},
};
if (showPersonalizedChannels) rowData.push(RECENT_FROM_FOLLOWING);
if (showPersonalizedTags && !showIndividualTags) rowData.push(TRENDING_FOR_TAGS);
if (showPersonalizedTags && showIndividualTags) {
individualTagDataItems.forEach((item: RowDataItem) => {
rowData.push(item);
});
}
if (!authenticated) {
rowData.push(YOUTUBE_CREATOR_ROW);
}
rowData.push(TOP_CONTENT_TODAY);
// rowData.push(TRENDING_ON_LBRY);
rowData.push(LATEST_FROM_LBRY);
if (!showPersonalizedChannels) rowData.push(TOP_CHANNELS);
return rowData;
}
module.exports = { YOUTUBERS };

8
homepages/index.js
View file

@ -1,5 +1,3 @@
import * as lbrytv from './homepage';
// import all homepages
// export object of homepages
export default {'en': lbrytv};
export const NO_ADS_CHANNEL_IDS = [];
module.exports = {
en: {},
};

10
static/app-strings.json
View file

@ -1445,6 +1445,7 @@
"You loved this": "You loved this",
"Creator loved this": "Creator loved this",
"A channel is required to throw fire and slime": "A channel is required to throw fire and slime",
"The requested comment is no longer available.": "The requested comment is no longer available.",
"Best": "Best",
"Controversial": "Controversial",
"Show Replies": "Show Replies",
@ -1513,6 +1514,7 @@
"Create A Channel": "Create A Channel",
"At least 10 views are required to earn the reward, consume more!": "At least 10 views are required to earn the reward, consume more!",
"Blocked %channel%": "Blocked %channel%",
"Comment(s) blocked.": "Comment(s) blocked.",
"You earned %lbc% for streaming your first video.": "You earned %lbc% for streaming your first video.",
"You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.": "You earned %lbc% for successfully completing The Journey L4: Perfect Harmony.",
"You earned %lbc% for successfully completing The Journey L3: Bliss.": "You earned %lbc% for successfully completing The Journey L3: Bliss.",
@ -2040,11 +2042,7 @@
"Tip Creators": "Tip Creators",
"Only select creators can receive tips at this time": "Only select creators can receive tips at this time",
"The payment will be made from your saved card": "The payment will be made from your saved card",
"Trending for #Art": "Trending for #Art",
"Trending for #Education": "Trending for #Education",
"Trending for #Technology": "Trending for #Technology",
"Enter a @username or URL": "Enter a @username or URL",
"examples: @channel, @channel#3, https://odysee.com/@Odysee:8, lbry://@Odysee#8": "examples: @channel, @channel#3, https://odysee.com/@Odysee:8, lbry://@Odysee#8",
"Moderators": "Moderators",
"A channel is required to comment on lbry.tv": "A channel is required to comment on lbry.tv",
"Commenting...": "Commenting...",
"--end--": "--end--"
}

1
ui/comments.js
View file

@ -17,6 +17,7 @@ const Comments = {
comment_list: (params: CommentListParams) => fetchCommentsApi('comment.List', params),
comment_abandon: (params: CommentAbandonParams) => fetchCommentsApi('comment.Abandon', params),
comment_create: (params: CommentCreateParams) => fetchCommentsApi('comment.Create', params),
comment_by_id: (params: CommentByIdParams) => fetchCommentsApi('comment.ByID', params),
setting_list: (params: SettingsParams) => fetchCommentsApi('setting.List', params),
setting_block_word: (params: BlockWordParams) => fetchCommentsApi('setting.BlockWord', params),
setting_unblock_word: (params: BlockWordParams) => fetchCommentsApi('setting.UnBlockWord', params),

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

@ -1,6 +1,5 @@
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { makeSelectCommentForCommentId } from 'redux/selectors/comments';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import ChannelDiscussion from './view';
import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
@ -8,10 +7,9 @@ import { makeSelectTagInClaimOrChannelForUri } from 'lbry-redux';
const select = (state, props) => {
const { search } = props.location;
const urlParams = new URLSearchParams(search);
const linkedCommentId = urlParams.get('lc');
return {
linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
linkedCommentId: urlParams.get('lc'),
commentsDisabled: makeSelectTagInClaimOrChannelForUri(props.uri, DISABLE_COMMENTS_TAG)(state),
};
};

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

@ -5,19 +5,19 @@ import Empty from 'component/common/empty';
type Props = {
uri: string,
linkedComment: ?any,
linkedCommentId?: string,
commentsDisabled: boolean,
};
function ChannelDiscussion(props: Props) {
const { uri, linkedComment, commentsDisabled } = props;
const { uri, linkedCommentId, commentsDisabled } = props;
if (commentsDisabled) {
return <Empty text={__('This channel has disabled comments on their page.')} />;
}
return (
<section className="section">
<CommentsList uri={uri} linkedComment={linkedComment} />
<CommentsList uri={uri} linkedCommentId={linkedCommentId} />
</section>
);
}

3
ui/component/claimMenuList/index.js
View file

@ -28,6 +28,7 @@ import { doToast } from 'redux/actions/notifications';
import { makeSelectSigningIsMine } from 'redux/selectors/content';
import { doChannelSubscribe, doChannelUnsubscribe } from 'redux/actions/subscriptions';
import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import ClaimPreview from './view';
import fs from 'fs';
@ -38,6 +39,7 @@ const select = (state, props) => {
claim,
claimIsMine: makeSelectSigningIsMine(props.uri)(state),
hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, permanentUri)(state),
hasClaimInCustom: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.FAVORITES_ID, permanentUri)(state),
channelIsMuted: makeSelectChannelIsMuted(props.uri)(state),
channelIsBlocked: makeSelectChannelIsBlocked(props.uri)(state),
fileInfo: makeSelectFileInfoForUri(props.uri)(state),
@ -48,6 +50,7 @@ const select = (state, props) => {
collectionName: makeSelectNameForCollectionId(props.collectionId)(state),
isMyCollection: makeSelectCollectionIsMine(props.collectionId)(state),
editedCollection: makeSelectEditedCollectionForId(props.collectionId)(state),
isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
};
};

35
ui/component/claimMenuList/view.jsx
View file

@ -40,6 +40,7 @@ type Props = {
isRepost: boolean,
doCollectionEdit: (string, any) => void,
hasClaimInWatchLater: boolean,
hasClaimInCustom: boolean,
claimInCollection: boolean,
collectionName?: string,
collectionId: string,
@ -53,6 +54,7 @@ type Props = {
doChannelUnsubscribe: (SubscriptionArgs) => void,
isChannelPage: boolean,
editedCollection: Collection,
isAuthenticated: boolean,
};
function ClaimMenuList(props: Props) {
@ -75,6 +77,7 @@ function ClaimMenuList(props: Props) {
doCommentModUnBlockAsAdmin,
doCollectionEdit,
hasClaimInWatchLater,
hasClaimInCustom,
collectionId,
collectionName,
isMyCollection,
@ -87,6 +90,7 @@ function ClaimMenuList(props: Props) {
doChannelUnsubscribe,
isChannelPage = false,
editedCollection,
isAuthenticated,
} = props;
const repostedContent = claim && claim.reposted_claim;
const contentClaim = repostedContent || claim;
@ -96,6 +100,7 @@ function ClaimMenuList(props: Props) {
const isChannel = !incognitoClaim && signingChannel === claim;
const showDelete = claimIsMine || (fileInfo && (fileInfo.written_bytes > 0 || fileInfo.blobs_completed > 0));
const subscriptionLabel = isSubscribed ? __('Unfollow') : __('Follow');
const lastCollectionName = 'Favorites';
const { push, replace } = useHistory();
if (!claim) {
@ -219,8 +224,10 @@ function ClaimMenuList(props: Props) {
<Icon size={20} icon={ICONS.MORE_VERTICAL} />
</MenuButton>
<MenuList className="menu__list">
{/* WATCH LATER */}
{(!IS_WEB || (IS_WEB && isAuthenticated)) && (
<>
<>
{/* WATCH LATER */}
{isPlayable && !collectionId && (
<MenuItem
className="comment__menu-option"
@ -245,6 +252,29 @@ function ClaimMenuList(props: Props) {
</div>
</MenuItem>
)}
{/* CUSTOM LIST */}
{isPlayable && !collectionId && (
<MenuItem
className="comment__menu-option"
onSelect={() => {
doToast({
message: __(`Item %action% ${lastCollectionName}`, {
action: hasClaimInCustom ? __('removed from') : __('added to'),
}),
});
doCollectionEdit(COLLECTIONS_CONSTS.FAVORITES_ID, {
claims: [contentClaim],
remove: hasClaimInCustom,
type: 'playlist',
});
}}
>
<div className="menu__link">
<Icon aria-hidden icon={hasClaimInCustom ? ICONS.DELETE : ICONS.STAR} />
{hasClaimInCustom ? __(`In ${lastCollectionName}`) : __(`${lastCollectionName}`)}
</div>
</MenuItem>
)}
{/* COLLECTION OPERATIONS */}
{collectionId && collectionName && isCollectionClaim && (
<>
@ -366,7 +396,8 @@ function ClaimMenuList(props: Props) {
)}
</>
)}
</>
)}
<hr className="menu__separator" />
{isChannelPage && IS_WEB && rssUrl && (

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

@ -19,6 +19,7 @@ import ClaimPreviewTitle from 'component/claimPreviewTitle';
import ClaimPreviewSubtitle from 'component/claimPreviewSubtitle';
import ClaimRepostAuthor from 'component/claimRepostAuthor';
import FileDownloadLink from 'component/fileDownloadLink';
import FileWatchLaterLink from 'component/fileWatchLaterLink';
import PublishPending from 'component/publishPending';
import ClaimMenuList from 'component/claimMenuList';
import ClaimPreviewLoading from './claim-preview-loading';
@ -157,6 +158,15 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
isValid = false;
}
}
// $FlowFixMe
const isPlayable =
claim &&
// $FlowFixMe
claim.value &&
// $FlowFixMe
claim.value.stream_type &&
// $FlowFixMe
(claim.value.stream_type === 'audio' || claim.value.stream_type === 'video');
const isCollection = claim && claim.value_type === 'collection';
const isChannelUri = isValid ? parseURI(uri).isChannel : false;
const signingChannel = claim && claim.signing_channel;
@ -318,6 +328,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
<PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
</div>
)}
{isPlayable && (
<div className="claim-preview__hover-actions">
<FileWatchLaterLink uri={uri} />
</div>
)}
</FileThumbnail>
</NavLink>
) : (

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

@ -13,6 +13,7 @@ import { formatLbryUrlForWeb } from 'util/url';
import { parseURI, COLLECTIONS_CONSTS } from 'lbry-redux';
import PreviewOverlayProperties from 'component/previewOverlayProperties';
import FileDownloadLink from 'component/fileDownloadLink';
import FileWatchLaterLink from 'component/fileWatchLaterLink';
import ClaimRepostAuthor from 'component/claimRepostAuthor';
import ClaimMenuList from 'component/claimMenuList';
import CollectionPreviewOverlay from 'component/collectionPreviewOverlay';
@ -75,6 +76,15 @@ function ClaimPreviewTile(props: Props) {
const isRepost = claim && claim.repost_channel_url;
const isCollection = claim && claim.value_type === 'collection';
const isStream = claim && claim.value_type === 'stream';
// $FlowFixMe
const isPlayable =
claim &&
// $FlowFixMe
claim.value &&
// $FlowFixMe
claim.value.stream_type &&
// $FlowFixMe
(claim.value.stream_type === 'audio' || claim.value.stream_type === 'video');
const collectionClaimId = isCollection && claim && claim.claim_id;
const shouldFetch = claim === undefined;
const thumbnailUrl = useGetThumbnail(uri, claim, streamingUrl, getFile, placeholder) || thumbnail;
@ -195,6 +205,12 @@ function ClaimPreviewTile(props: Props) {
)}
{/* @endif */}
{isPlayable && (
<div className="claim-preview__hover-actions">
<FileWatchLaterLink uri={uri} />
</div>
)}
<div className="claim-preview__file-property-overlay">
<PreviewOverlayProperties uri={uri} properties={liveProperty || properties} />
</div>

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

@ -6,6 +6,7 @@ import Button from 'component/button';
import * as PAGES from 'constants/pages';
import Icon from 'component/common/icon';
import * as ICONS from 'constants/icons';
import { COLLECTIONS_CONSTS } from 'lbry-redux';
type Props = {
collectionUrls: Array<Claim>,
@ -26,7 +27,10 @@ export default function CollectionContent(props: Props) {
className="file-page__recommended"
title={
<span>
<Icon icon={ICONS.STACK} className="icon--margin-right" />
<Icon
icon={(id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK}
className="icon--margin-right" />
{collectionName}
</span>
}

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

@ -25,7 +25,7 @@ function CollectionSelectItem(props: Props) {
let icon;
switch (category) {
case 'builtin':
icon = id === COLLECTIONS_CONSTS.WATCH_LATER_ID ? ICONS.TIME : ICONS.STACK;
icon = (id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) || (id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK;
break;
case 'published':
icon = ICONS.STACK;

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

@ -68,7 +68,9 @@ export default function CollectionsListMine(props: Props) {
<span className="claim-grid__title-span">
{__(`${list.name}`)}
<div className="claim-grid__title--empty">
<Icon className="icon--margin-right" icon={ICONS.STACK} />
<Icon className="icon--margin-right"
icon={(list.id === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(list.id === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK} />
{itemUrls.length}
</div>
</span>

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

@ -1,30 +1,43 @@
import { connect } from 'react-redux';
import { makeSelectStakedLevelForChannelUri, makeSelectClaimForUri, makeSelectThumbnailForUri, selectMyChannelClaims } from 'lbry-redux';
import { doCommentUpdate } from 'redux/actions/comments';
import {
makeSelectStakedLevelForChannelUri,
makeSelectClaimForUri,
makeSelectThumbnailForUri,
selectMyChannelClaims,
} from 'lbry-redux';
import { doCommentUpdate, doCommentList } from 'redux/actions/comments';
import { makeSelectChannelIsMuted } from 'redux/selectors/blocked';
import { doToast } from 'redux/actions/notifications';
import { doSetPlayingUri } from 'redux/actions/content';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
import { selectActiveChannelClaim } from 'redux/selectors/app';
import { selectLinkedCommentAncestors, makeSelectOthersReactionsForComment } from 'redux/selectors/comments';
import { selectActiveChannelId, selectActiveChannelClaim } from 'redux/selectors/app';
import { selectPlayingUri } from 'redux/selectors/content';
import Comment from './view';
const select = (state, props) => ({
const select = (state, props) => {
const activeChannelId = selectActiveChannelId(state);
const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
return {
claim: makeSelectClaimForUri(props.uri)(state),
thumbnail: props.authorUri && makeSelectThumbnailForUri(props.authorUri)(state),
channelIsBlocked: props.authorUri && makeSelectChannelIsMuted(props.authorUri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
activeChannelClaim: selectActiveChannelClaim(state),
myChannels: selectMyChannelClaims(state),
playingUri: selectPlayingUri(state),
stakedLevel: makeSelectStakedLevelForChannelUri(props.authorUri)(state),
});
linkedCommentAncestors: selectLinkedCommentAncestors(state),
};
};
const perform = (dispatch) => ({
clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
updateComment: (commentId, comment) => dispatch(doCommentUpdate(commentId, comment)),
fetchReplies: (uri, parentId, page, pageSize, sortBy) =>
dispatch(doCommentList(uri, parentId, page, pageSize, sortBy)),
doToast: (options) => dispatch(doToast(options)),
});

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

@ -1,6 +1,7 @@
// @flow
import * as ICONS from 'constants/icons';
import * as PAGES from 'constants/pages';
import { SORT_BY, COMMENT_PAGE_SIZE_REPLIES } from 'constants/comment';
import { FF_MAX_CHARS_IN_COMMENT } from 'constants/form-field';
import { SITE_NAME, SIMPLE_SITE, ENABLE_COMMENT_REACTIONS } from 'config';
import React, { useEffect, useState } from 'react';
@ -23,6 +24,8 @@ import CommentMenuList from 'component/commentMenuList';
import UriIndicator from 'component/uriIndicator';
import CreditAmount from 'component/common/credit-amount';
const AUTO_EXPAND_ALL_REPLIES = false;
type Props = {
clearPlayingUri: () => void,
uri: string,
@ -36,8 +39,10 @@ type Props = {
claimIsMine: boolean, // if you control the claim which this comment was posted on
commentIsMine: boolean, // if this comment was signed by an owned channel
updateComment: (string, string) => void,
fetchReplies: (string, string, number, number, number) => void,
commentModBlock: (string) => void,
linkedComment?: any,
linkedCommentId?: string,
linkedCommentAncestors: { [string]: Array<string> },
myChannels: ?Array<ChannelClaim>,
commentingEnabled: boolean,
doToast: ({ message: string }) => void,
@ -53,6 +58,7 @@ type Props = {
playingUri: ?PlayingUri,
stakedLevel: number,
supportAmount: number,
numDirectReplies: number,
};
const LENGTH_TO_COLLAPSE = 300;
@ -71,7 +77,9 @@ function Comment(props: Props) {
commentIsMine,
commentId,
updateComment,
linkedComment,
fetchReplies,
linkedCommentId,
linkedCommentAncestors,
commentingEnabled,
myChannels,
doToast,
@ -82,18 +90,23 @@ function Comment(props: Props) {
playingUri,
stakedLevel,
supportAmount,
numDirectReplies,
} = props;
const {
push,
replace,
location: { pathname, search },
} = useHistory();
const [isReplying, setReplying] = React.useState(false);
const [isEditing, setEditing] = useState(false);
const [editedMessage, setCommentValue] = useState(message);
const [charCount, setCharCount] = useState(editedMessage.length);
// used for controlling the visibility of the menu icon
const [mouseIsHovering, setMouseHover] = useState(false);
const [showReplies, setShowReplies] = useState(false);
const [page, setPage] = useState(0);
const [advancedEditor] = usePersistedState('comment-editor-mode', false);
const [displayDeadComment, setDisplayDeadComment] = React.useState(false);
const hasChannels = myChannels && myChannels.length > 0;
@ -111,6 +124,19 @@ function Comment(props: Props) {
}
} catch (e) {}
// Auto-expand (limited to linked-comments for now, but can be for all)
useEffect(() => {
const isInLinkedCommentChain =
linkedCommentId &&
linkedCommentAncestors[linkedCommentId] &&
linkedCommentAncestors[linkedCommentId].includes(commentId);
if (isInLinkedCommentChain || AUTO_EXPAND_ALL_REPLIES) {
setShowReplies(true);
setPage(1);
}
}, []); // eslint-disable-line react-hooks/exhaustive-deps
useEffect(() => {
if (isEditing) {
setCharCount(editedMessage.length);
@ -131,6 +157,12 @@ function Comment(props: Props) {
}
}, [author, authorUri, editedMessage, isEditing, setEditing]);
useEffect(() => {
if (page > 0) {
fetchReplies(uri, commentId, page, COMMENT_PAGE_SIZE_REPLIES, SORT_BY.OLDEST);
}
}, [page, uri, commentId, fetchReplies]);
function handleEditMessageChanged(event) {
setCommentValue(!SIMPLE_SITE && advancedEditor ? event : event.target.value);
}
@ -176,7 +208,7 @@ function Comment(props: Props) {
>
<div
className={classnames('comment__content', {
'comment--highlighted': linkedComment && linkedComment.comment_id === commentId,
'comment--highlighted': linkedCommentId && linkedCommentId === commentId,
'comment--slimed': slimedToDeath && !displayDeadComment,
})}
>
@ -302,13 +334,43 @@ function Comment(props: Props) {
{ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
</div>
{numDirectReplies > 0 && !showReplies && (
<div className="comment__actions">
<Button
label={
numDirectReplies < 2
? __('Show reply')
: __('Show %count% replies', { count: numDirectReplies })
}
button="link"
onClick={() => {
setShowReplies(true);
if (page === 0) {
setPage(1);
}
}}
/>
</div>
)}
{numDirectReplies > 0 && showReplies && (
<div className="comment__actions">
<Button label={__('Hide replies')} button="link" onClick={() => setShowReplies(false)} />
</div>
)}
{isReplying && (
<CommentCreate
isReply
uri={uri}
parentId={commentId}
onDoneReplying={() => setReplying(false)}
onCancelReplying={() => setReplying(false)}
onDoneReplying={() => {
setShowReplies(true);
setReplying(false);
}}
onCancelReplying={() => {
setReplying(false);
}}
/>
)}
</>
@ -317,7 +379,16 @@ function Comment(props: Props) {
</div>
</div>
<CommentsReplies threadDepth={threadDepth - 1} uri={uri} parentId={commentId} linkedComment={linkedComment} />
{showReplies && (
<CommentsReplies
threadDepth={threadDepth - 1}
uri={uri}
parentId={commentId}
linkedCommentId={linkedCommentId}
numDirectReplies={numDirectReplies}
onShowMore={() => setPage(page + 1)}
/>
)}
</li>
);
}

11
ui/component/commentCreate/view.jsx
View file

@ -35,7 +35,6 @@ type Props = {
toast: (string) => void,
claimIsMine: boolean,
sendTip: ({}, (any) => void, (any) => void) => void,
justCommented: Array<string>,
};
export function CommentCreate(props: Props) {
@ -54,7 +53,6 @@ export function CommentCreate(props: Props) {
livestream,
claimIsMine,
sendTip,
justCommented,
} = props;
const buttonref: ElementRef<any> = React.useRef();
const {
@ -153,7 +151,6 @@ export function CommentCreate(props: Props) {
setIsReviewingSupportComment(false);
setIsSupportComment(false);
setCommentFailure(false);
justCommented.push(res.comment_id);
if (onDoneReplying) {
onDoneReplying();
@ -217,7 +214,13 @@ export function CommentCreate(props: Props) {
autoFocus
button="primary"
disabled={disabled}
label={isSubmitting ? __('Sending...') : (commentFailure && tipAmount === successTip.tipAmount) ? __('Re-submit') : __('Send')}
label={
isSubmitting
? __('Sending...')
: commentFailure && tipAmount === successTip.tipAmount
? __('Re-submit')
: __('Send')
}
onClick={handleSupportComment}
/>
<Button button="link" label={__('Cancel')} onClick={() => setIsReviewingSupportComment(false)} />

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

@ -3,7 +3,6 @@ import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectC
import {
doCommentAbandon,
doCommentPin,
doCommentList,
doCommentModBlock,
doCommentModBlockAsAdmin,
doCommentModBlockAsModerator,
@ -30,8 +29,7 @@ const perform = (dispatch) => ({
clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
deleteComment: (commentId, creatorChannelUrl) => dispatch(doCommentAbandon(commentId, creatorChannelUrl)),
muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)),
pinComment: (commentId, remove) => dispatch(doCommentPin(commentId, remove)),
fetchComments: (uri) => dispatch(doCommentList(uri)),
pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)),
// setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
commentModBlock: (commenterUri) => dispatch(doCommentModBlock(commenterUri)),
commentModBlockAsAdmin: (commenterUri, blockerId) => dispatch(doCommentModBlockAsAdmin(commenterUri, blockerId)),

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

@ -7,18 +7,15 @@ import Icon from 'component/common/icon';
import { parseURI } from 'lbry-redux';
type Props = {
uri: string,
claim: ?Claim,
clearPlayingUri: () => void,
authorUri: string, // full LBRY Channel URI: lbry://@channel#123...
commentId: string, // sha256 digest identifying the comment
commentIsMine: boolean, // if this comment was signed by an owned channel
deleteComment: (string, ?string) => void,
linkedComment?: any,
isPinned: boolean,
pinComment: (string, boolean) => Promise<any>,
pinComment: (string, string, boolean) => Promise<any>,
muteChannel: (string) => void,
fetchComments: (string) => void,
handleEditComment: () => void,
contentChannelPermanentUrl: any,
activeChannelClaim: ?ChannelClaim,
@ -35,7 +32,6 @@ type Props = {
function CommentMenuList(props: Props) {
const {
uri,
claim,
authorUri,
commentIsMine,
@ -49,7 +45,6 @@ function CommentMenuList(props: Props) {
isTopLevel,
isPinned,
handleEditComment,
fetchComments,
commentModBlock,
commentModBlockAsAdmin,
commentModBlockAsModerator,
@ -77,8 +72,8 @@ function CommentMenuList(props: Props) {
activeModeratorInfo &&
Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id);
function handlePinComment(commentId, remove) {
pinComment(commentId, remove).then(() => fetchComments(uri));
function handlePinComment(commentId, claimId, remove) {
pinComment(commentId, claimId, remove);
}
function handleDeleteComment() {
@ -122,7 +117,7 @@ function CommentMenuList(props: Props) {
{activeChannelIsCreator && isTopLevel && (
<MenuItem
className="comment__menu-option menu__link"
onSelect={isPinned ? () => handlePinComment(commentId, true) : () => handlePinComment(commentId, false)}
onSelect={() => handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)}
>
<span className={'button__content'}>
<Icon aria-hidden icon={ICONS.PIN} className={'icon'} />

19
ui/component/commentReactions/index.js
View file

@ -6,17 +6,22 @@ import { makeSelectMyReactionsForComment, makeSelectOthersReactionsForComment }
import { doCommentReact } from 'redux/actions/comments';
import { selectActiveChannelId } from 'redux/selectors/app';
const select = (state, props) => ({
const select = (state, props) => {
const activeChannelId = selectActiveChannelId(state);
const reactionKey = activeChannelId ? `${props.commentId}:${activeChannelId}` : props.commentId;
return {
claim: makeSelectClaimForUri(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
myReacts: makeSelectMyReactionsForComment(props.commentId)(state),
othersReacts: makeSelectOthersReactionsForComment(props.commentId)(state),
activeChannelId: selectActiveChannelId(state),
});
myReacts: makeSelectMyReactionsForComment(reactionKey)(state),
othersReacts: makeSelectOthersReactionsForComment(reactionKey)(state),
activeChannelId,
};
};
const perform = dispatch => ({
const perform = (dispatch) => ({
react: (commentId, type) => dispatch(doCommentReact(commentId, type)),
doToast: params => dispatch(doToast(params)),
doToast: (params) => dispatch(doToast(params)),
});
export default connect(select, perform)(Comment);

24
ui/component/commentsList/index.js
View file

@ -2,32 +2,42 @@ import { connect } from 'react-redux';
import { makeSelectClaimIsMine, selectFetchingMyChannels, selectMyChannelClaims } from 'lbry-redux';
import {
makeSelectTopLevelCommentsForUri,
makeSelectTopLevelTotalPagesForUri,
selectIsFetchingComments,
makeSelectTotalCommentsCountForUri,
selectOthersReactsById,
makeSelectCommentsDisabledForUri,
selectMyReactionsByCommentId,
makeSelectCommentIdsForUri,
} from 'redux/selectors/comments';
import { doCommentList, doCommentReactList } from 'redux/actions/comments';
import { doCommentReset, doCommentList, doCommentById, doCommentReactList } from 'redux/actions/comments';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { selectActiveChannelId } from 'redux/selectors/app';
import CommentsList from './view';
const select = (state, props) => ({
const select = (state, props) => {
return {
myChannels: selectMyChannelClaims(state),
comments: makeSelectTopLevelCommentsForUri(props.uri)(state),
allCommentIds: makeSelectCommentIdsForUri(props.uri)(state),
topLevelComments: makeSelectTopLevelCommentsForUri(props.uri)(state),
topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(props.uri)(state),
totalComments: makeSelectTotalCommentsCountForUri(props.uri)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
isFetchingComments: selectIsFetchingComments(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
commentsDisabledBySettings: makeSelectCommentsDisabledForUri(props.uri)(state),
fetchingChannels: selectFetchingMyChannels(state),
reactionsById: selectOthersReactsById(state),
myReactsByCommentId: selectMyReactionsByCommentId(state),
othersReactsById: selectOthersReactsById(state),
activeChannelId: selectActiveChannelId(state),
});
};
};
const perform = (dispatch) => ({
fetchComments: (uri) => dispatch(doCommentList(uri)),
fetchReacts: (uri) => dispatch(doCommentReactList(uri)),
fetchTopLevelComments: (uri, page, pageSize, sortBy) => dispatch(doCommentList(uri, '', page, pageSize, sortBy)),
fetchComment: (commentId) => dispatch(doCommentById(commentId)),
fetchReacts: (commentIds) => dispatch(doCommentReactList(commentIds)),
resetComments: (uri) => dispatch(doCommentReset(uri)),
});
export default connect(select, perform)(CommentsList);

217
ui/component/commentsList/view.jsx
View file

@ -1,7 +1,7 @@
// @flow
import * as REACTION_TYPES from 'constants/reactions';
import * as ICONS from 'constants/icons';
import { SORT_COMMENTS_NEW, SORT_COMMENTS_BEST, SORT_COMMENTS_CONTROVERSIAL } from 'constants/comment';
import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment';
import React, { useEffect } from 'react';
import classnames from 'classnames';
import CommentView from 'component/comment';
@ -11,59 +11,78 @@ import Card from 'component/common/card';
import CommentCreate from 'component/commentCreate';
import usePersistedState from 'effects/use-persisted-state';
import { ENABLE_COMMENT_REACTIONS } from 'config';
import { sortComments } from 'util/comments';
import Empty from 'component/common/empty';
import debounce from 'util/debounce';
const DEBOUNCE_SCROLL_HANDLER_MS = 200;
function scaleToDevicePixelRatio(value) {
const devicePixelRatio = window.devicePixelRatio || 1.0;
if (devicePixelRatio < 1.0) {
return Math.ceil(value / devicePixelRatio);
}
return Math.ceil(value * devicePixelRatio);
}
type Props = {
comments: Array<Comment>,
allCommentIds: any,
topLevelComments: Array<Comment>,
topLevelTotalPages: number,
commentsDisabledBySettings: boolean,
fetchComments: (string) => void,
fetchReacts: (string) => Promise<any>,
fetchTopLevelComments: (string, number, number, number) => void,
fetchComment: (string) => void,
fetchReacts: (Array<string>) => Promise<any>,
resetComments: (string) => void,
uri: string,
claimIsMine: boolean,
myChannels: ?Array<ChannelClaim>,
isFetchingComments: boolean,
linkedComment: any,
linkedCommentId?: string,
totalComments: number,
fetchingChannels: boolean,
reactionsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
myReactsByCommentId: ?{ [string]: Array<string> }, // "CommentId:MyChannelId" -> reaction array (note the ID concatenation)
othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
activeChannelId: ?string,
};
function CommentList(props: Props) {
const {
fetchComments,
allCommentIds,
fetchTopLevelComments,
fetchComment,
fetchReacts,
resetComments,
uri,
comments,
topLevelComments,
topLevelTotalPages,
commentsDisabledBySettings,
claimIsMine,
myChannels,
isFetchingComments,
linkedComment,
linkedCommentId,
totalComments,
fetchingChannels,
reactionsById,
myReactsByCommentId,
othersReactsById,
activeChannelId,
} = props;
const commentRef = React.useRef();
const spinnerRef = React.useRef();
const [sort, setSort] = usePersistedState(
'comment-sort',
ENABLE_COMMENT_REACTIONS ? SORT_COMMENTS_BEST : SORT_COMMENTS_NEW
);
const DEFAULT_SORT = ENABLE_COMMENT_REACTIONS ? SORT_BY.POPULARITY : SORT_BY.NEWEST;
const [sort, setSort] = usePersistedState('comment-sort-by', DEFAULT_SORT);
const [page, setPage] = React.useState(0);
const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
const [start] = React.useState(0);
const [end, setEnd] = React.useState(9);
// Display comments immediately if not fetching reactions
// If not, wait to show comments until reactions are fetched
const [readyToDisplayComments, setReadyToDisplayComments] = React.useState(
Boolean(reactionsById) || !ENABLE_COMMENT_REACTIONS
Boolean(othersReactsById) || !ENABLE_COMMENT_REACTIONS
);
const [justCommented] = React.useState([]);
const linkedCommentId = linkedComment && linkedComment.comment_id;
const hasNoComments = !totalComments;
const moreBelow = totalComments - end > 0;
const moreBelow = page < topLevelTotalPages;
const isMyComment = (channelId: string): boolean => {
if (myChannels != null && channelId != null) {
for (let i = 0; i < myChannels.length; i++) {
@ -75,86 +94,124 @@ function CommentList(props: Props) {
return false;
};
const handleMoreBelow = React.useCallback(() => {
if (moreBelow) {
setEnd(end + 10);
function changeSort(newSort) {
if (sort !== newSort) {
setSort(newSort);
setPage(0); // Invalidate existing comments
}
}
}, [end, setEnd, moreBelow]);
// Reset comments
useEffect(() => {
fetchComments(uri);
}, [fetchComments, uri]);
if (page === 0) {
resetComments(uri);
setPage(1);
}
}, [page, uri, resetComments]);
// Fetch top-level comments
useEffect(() => {
if (totalComments && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
fetchReacts(uri)
if (page !== 0) {
if (page === 1 && linkedCommentId) {
fetchComment(linkedCommentId);
}
fetchTopLevelComments(uri, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort);
}
}, [fetchTopLevelComments, uri, page, resetComments, sort, linkedCommentId, fetchComment]);
// Fetch reacts
useEffect(() => {
if (totalFetchedComments > 0 && ENABLE_COMMENT_REACTIONS && !fetchingChannels) {
let idsForReactionFetch;
if (!othersReactsById || !myReactsByCommentId) {
idsForReactionFetch = allCommentIds;
} else {
idsForReactionFetch = allCommentIds.filter((commentId) => {
const key = activeChannelId ? `${commentId}:${activeChannelId}` : commentId;
return !othersReactsById[key] || !myReactsByCommentId[key];
});
}
if (idsForReactionFetch.length !== 0) {
fetchReacts(idsForReactionFetch)
.then(() => {
setReadyToDisplayComments(true);
})
.catch(() => setReadyToDisplayComments(true));
}
}, [fetchReacts, uri, totalComments, activeChannelId, fetchingChannels]);
}
}, [
totalFetchedComments,
allCommentIds,
othersReactsById,
myReactsByCommentId,
fetchReacts,
uri,
activeChannelId,
fetchingChannels,
]);
// Scroll to linked-comment
useEffect(() => {
if (readyToDisplayComments && linkedCommentId && commentRef && commentRef.current) {
commentRef.current.scrollIntoView({ block: 'start' });
window.scrollBy(0, -100);
window.scrollBy(0, -125);
}
}, [readyToDisplayComments, linkedCommentId]);
// Infinite scroll
useEffect(() => {
function handleCommentScroll(e) {
// $FlowFixMe
const rect = spinnerRef.current.getBoundingClientRect();
function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
if (!spinnerRef || !spinnerRef.current) {
return false;
}
const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
const windowW = window.innerWidth || document.documentElement.clientWidth; // $FlowFixMe
const isApproachingViewport = yPrefetchPx !== 0 && rect.top < windowH + scaleToDevicePixelRatio(yPrefetchPx);
const isInViewport =
rect.top >= 0 &&
rect.left >= 0 &&
rect.width > 0 &&
rect.height > 0 &&
rect.bottom >= 0 &&
rect.right >= 0 &&
// $FlowFixMe
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.top <= windowH &&
// $FlowFixMe
rect.right <= (window.innerWidth || document.documentElement.clientWidth);
rect.left <= windowW;
if (isInViewport) {
handleMoreBelow();
return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
}
const handleCommentScroll = debounce(() => {
if (shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
setPage(page + 1);
}
}, DEBOUNCE_SCROLL_HANDLER_MS);
if (!isFetchingComments && readyToDisplayComments && moreBelow && spinnerRef && spinnerRef.current) {
if (shouldFetchNextPage(page, topLevelTotalPages, window, document, 0)) {
setPage(page + 1);
} else {
window.addEventListener('scroll', handleCommentScroll);
}
return () => window.removeEventListener('scroll', handleCommentScroll);
}, [moreBelow, handleMoreBelow, spinnerRef, isFetchingComments, readyToDisplayComments]);
function prepareComments(arrayOfComments, linkedComment, isFetchingComments) {
let orderedComments = [];
if (linkedComment) {
if (!linkedComment.parent_id) {
orderedComments = arrayOfComments.filter((c) => c.comment_id !== linkedComment.comment_id);
orderedComments.unshift(linkedComment);
} else {
const parentComment = arrayOfComments.find((c) => c.comment_id === linkedComment.parent_id);
orderedComments = arrayOfComments.filter((c) => c.comment_id !== linkedComment.parent_id);
if (parentComment) {
orderedComments.unshift(parentComment);
}
}
} else {
orderedComments = arrayOfComments;
}
return orderedComments;
}
}, [
page,
moreBelow,
spinnerRef,
isFetchingComments,
readyToDisplayComments,
topLevelComments.length,
topLevelTotalPages,
]);
// Default to newest first for apps that don't have comment reactions
const sortedComments = reactionsById
? sortComments({ comments, reactionsById, sort, isMyComment, justCommented })
: [];
const displayedComments = readyToDisplayComments
? prepareComments(sortedComments, linkedComment).slice(start, end)
: [];
const displayedComments = readyToDisplayComments ? topLevelComments : [];
return (
<Card
@ -174,9 +231,9 @@ function CommentList(props: Props) {
label={__('Best')}
icon={ICONS.BEST}
iconSize={18}
onClick={() => setSort(SORT_COMMENTS_BEST)}
onClick={() => changeSort(SORT_BY.POPULARITY)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_BEST,
'button-toggle--active': sort === SORT_BY.POPULARITY,
})}
/>
<Button
@ -184,9 +241,9 @@ function CommentList(props: Props) {
label={__('Controversial')}
icon={ICONS.CONTROVERSIAL}
iconSize={18}
onClick={() => setSort(SORT_COMMENTS_CONTROVERSIAL)}
onClick={() => changeSort(SORT_BY.CONTROVERSY)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_CONTROVERSIAL,
'button-toggle--active': sort === SORT_BY.CONTROVERSY,
})}
/>
<Button
@ -194,9 +251,9 @@ function CommentList(props: Props) {
label={__('New')}
icon={ICONS.NEW}
iconSize={18}
onClick={() => setSort(SORT_COMMENTS_NEW)}
onClick={() => changeSort(SORT_BY.NEWEST)}
className={classnames(`button-toggle`, {
'button-toggle--active': sort === SORT_COMMENTS_NEW,
'button-toggle--active': sort === SORT_BY.NEWEST,
})}
/>
</span>
@ -206,22 +263,21 @@ function CommentList(props: Props) {
icon={ICONS.REFRESH}
title={__('Refresh')}
onClick={() => {
fetchComments(uri);
fetchReacts(uri);
setPage(0);
}}
/>
</>
}
actions={
<>
<CommentCreate uri={uri} justCommented={justCommented} />
<CommentCreate uri={uri} />
{!commentsDisabledBySettings && !isFetchingComments && hasNoComments && (
<Empty padded text={__('That was pretty deep. What do you think?')} />
)}
<ul className="comments" ref={commentRef}>
{comments &&
{topLevelComments &&
displayedComments &&
displayedComments.map((comment) => {
return (
@ -238,9 +294,10 @@ function CommentList(props: Props) {
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
linkedComment={linkedComment}
linkedCommentId={linkedCommentId}
isPinned={comment.is_pinned}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
/>
);
})}

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

@ -1,14 +1,20 @@
import { connect } from 'react-redux';
import { makeSelectClaimIsMine, selectMyChannelClaims } from 'lbry-redux';
import { makeSelectRepliesForParentId } from 'redux/selectors/comments';
import {
selectIsFetchingCommentsByParentId,
makeSelectRepliesForParentId,
makeSelectTotalRepliesForParentId,
} from 'redux/selectors/comments';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import CommentsReplies from './view';
const select = (state, props) => ({
comments: makeSelectRepliesForParentId(props.parentId)(state),
fetchedReplies: makeSelectRepliesForParentId(props.parentId)(state),
totalReplies: makeSelectTotalRepliesForParentId(props.parentId)(state),
claimIsMine: makeSelectClaimIsMine(props.uri)(state),
commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
myChannels: selectMyChannelClaims(state),
isFetchingByParentId: selectIsFetchingCommentsByParentId(state),
});
export default connect(select)(CommentsReplies);

104
ui/component/commentsReplies/view.jsx
View file

@ -3,32 +3,45 @@ import * as ICONS from 'constants/icons';
import React from 'react';
import Comment from 'component/comment';
import Button from 'component/button';
import Spinner from 'component/spinner';
import ChannelThumbnail from 'component/channelThumbnail';
type Props = {
comments: Array<any>,
fetchedReplies: Array<any>,
totalReplies: number,
uri: string,
parentId: string,
claimIsMine: boolean,
myChannels: ?Array<ChannelClaim>,
linkedComment?: Comment,
linkedCommentId?: string,
commentingEnabled: boolean,
threadDepth: number,
numDirectReplies: number,
isFetchingByParentId: { [string]: boolean },
onShowMore?: () => void,
};
function CommentsReplies(props: Props) {
const { uri, comments, claimIsMine, myChannels, linkedComment, commentingEnabled, threadDepth } = props;
const {
uri,
parentId,
fetchedReplies,
totalReplies,
claimIsMine,
myChannels,
linkedCommentId,
commentingEnabled,
threadDepth,
numDirectReplies,
isFetchingByParentId,
onShowMore,
} = props;
const [isExpanded, setExpanded] = React.useState(true);
const [start, setStart] = React.useState(0);
const [end, setEnd] = React.useState(9);
const sortedComments = comments ? [...comments].reverse() : [];
const numberOfComments = comments ? comments.length : 0;
const linkedCommentId = linkedComment ? linkedComment.comment_id : '';
const commentsIndexOfLInked = comments && sortedComments.findIndex((e) => e.comment_id === linkedCommentId);
function showMore() {
if (start > 0) {
setStart(0);
} else {
setEnd(numberOfComments);
if (onShowMore) {
onShowMore();
}
}
@ -44,35 +57,12 @@ function CommentsReplies(props: Props) {
return false;
}
function handleCommentDone() {
if (!isExpanded) {
setExpanded(true);
setStart(numberOfComments || 0);
}
setEnd(numberOfComments + 1);
}
React.useEffect(() => {
if (
setStart &&
setEnd &&
setExpanded &&
linkedCommentId &&
Number.isInteger(commentsIndexOfLInked) &&
commentsIndexOfLInked > -1
) {
setStart(commentsIndexOfLInked);
setEnd(commentsIndexOfLInked + 1);
setExpanded(true);
}
}, [setStart, setEnd, setExpanded, linkedCommentId, commentsIndexOfLInked]);
const displayedComments = sortedComments.slice(start, end);
const displayedComments = fetchedReplies;
return (
Boolean(numberOfComments) && (
Boolean(numDirectReplies) && (
<div className="comment__replies-container">
{Boolean(numberOfComments) && !isExpanded && (
{Boolean(numDirectReplies) && !isExpanded && (
<div className="comment__actions--nested">
<Button
className="comment__action"
@ -82,13 +72,13 @@ function CommentsReplies(props: Props) {
/>
</div>
)}
{comments && displayedComments && isExpanded && (
{fetchedReplies && displayedComments && isExpanded && (
<div>
<div className="comment__replies">
<Button className="comment__threadline" aria-label="Hide Replies" onClick={() => setExpanded(false)} />
<ul className="comments--replies">
{displayedComments.map((comment, index) => {
{displayedComments.map((comment) => {
return (
<Comment
threadDepth={threadDepth}
@ -102,22 +92,46 @@ function CommentsReplies(props: Props) {
timePosted={comment.timestamp * 1000}
claimIsMine={claimIsMine}
commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
linkedComment={linkedComment}
linkedCommentId={linkedCommentId}
commentingEnabled={commentingEnabled}
handleCommentDone={handleCommentDone}
supportAmount={comment.support_amount}
numDirectReplies={comment.replies}
/>
);
})}
{totalReplies < numDirectReplies && (
<li className="comment comment--reply">
<div className="comment__content">
<div className="comment__thumbnail-wrapper">
<ChannelThumbnail xsmall className="comment__author-thumbnail" />
</div>
<div className="comment__body-container comment--blocked">
<div className="comment__meta">
<em>---</em>
</div>
<div>
<em>{__('Comment(s) blocked.')}</em>
</div>
</div>
</div>
</li>
)}
</ul>
</div>
</div>
)}
{isExpanded && comments && (end < numberOfComments || start > 0) && (
<div className="comment__actions">
{isExpanded && fetchedReplies && displayedComments.length < totalReplies && (
<div className="comment__actions--nested">
<Button button="link" label={__('Show more')} onClick={showMore} className="button--uri-indicator" />
</div>
)}
{isFetchingByParentId[parentId] && (
<div className="comment__replies-container">
<div className="comment__actions--nested">
<Spinner type="small" />
</div>
</div>
)}
</div>
)
);

14
ui/component/creatorAnalytics/view.jsx
View file

@ -15,14 +15,13 @@ import analytics from 'analytics';
type Props = {
claim: ?ChannelClaim,
fetchingChannels: boolean,
prepareEdit: string => void,
};
const UNAUTHENTICATED_ERROR = 'unauthenticated';
const GENERIC_ERROR = 'error';
export default function CreatorAnalytics(props: Props) {
const { prepareEdit, claim } = props;
const { claim } = props;
const history = useHistory();
const [stats, setStats] = React.useState();
const [error, setError] = React.useState();
@ -39,11 +38,11 @@ export default function CreatorAnalytics(props: Props) {
if (claimId && channelForEffect && channelHasClaims) {
setFetchingStats(true);
Lbryio.call('reports', 'content', { claim_id: claimId })
.then(res => {
.then((res) => {
setFetchingStats(false);
setStats(res);
})
.catch(error => {
.catch((error) => {
if (error.response.status === 401) {
setError(UNAUTHENTICATED_ERROR);
const channelToSend = JSON.parse(channelForEffect);
@ -218,12 +217,7 @@ export default function CreatorAnalytics(props: Props) {
button="primary"
icon={ICONS.PUBLISH}
label={__('Upload')}
onClick={() => {
if (claim) {
prepareEdit(claim.name);
history.push(`/$/${PAGES.UPLOAD}`);
}
}}
onClick={() => history.push(`/$/${PAGES.UPLOAD}`)}
/>
</div>
}

26
ui/component/fileWatchLaterLink/index.js Normal file
View file

@ -0,0 +1,26 @@
import { connect } from 'react-redux';
import {
makeSelectClaimForUri,
COLLECTIONS_CONSTS,
makeSelectCollectionForIdHasClaimUrl,
doCollectionEdit,
} from 'lbry-redux';
import FileWatchLaterLink from './view';
import { doToast } from 'redux/actions/notifications';
const select = (state, props) => {
const claim = makeSelectClaimForUri(props.uri)(state);
const permanentUri = claim && claim.permanent_url;
return {
claim,
hasClaimInWatchLater: makeSelectCollectionForIdHasClaimUrl(COLLECTIONS_CONSTS.WATCH_LATER_ID, permanentUri)(state),
};
};
const perform = dispatch => ({
doToast: (props) => dispatch(doToast(props)),
doCollectionEdit: (collection, props) => dispatch(doCollectionEdit(collection, props)),
});
export default connect(select, perform)(FileWatchLaterLink);

62
ui/component/fileWatchLaterLink/view.jsx Normal file
View file

@ -0,0 +1,62 @@
// @flow
import * as ICONS from 'constants/icons';
import React, { useRef } from 'react';
import Button from 'component/button';
import useHover from 'effects/use-hover';
import { COLLECTIONS_CONSTS } from 'lbry-redux';
type Props = {
uri: string,
claim: StreamClaim,
hasClaimInWatchLater: boolean,
doToast: ({ message: string }) => void,
doCollectionEdit: (string, any) => void,
};
function FileWatchLaterLink(props: Props) {
const {
claim,
hasClaimInWatchLater,
doToast,
doCollectionEdit,
} = props;
const buttonRef = useRef();
let isHovering = useHover(buttonRef);
if (!claim) {
return null;
}
function handleWatchLater(e) {
e.preventDefault();
doToast({
message: __('Item %action% Watch Later', {
action: hasClaimInWatchLater ? __('removed from') : __('added to'),
}),
linkText: !hasClaimInWatchLater && __('See All'),
linkTarget: !hasClaimInWatchLater && '/list/watchlater',
});
doCollectionEdit(COLLECTIONS_CONSTS.WATCH_LATER_ID, {
claims: [claim],
remove: hasClaimInWatchLater,
type: 'playlist',
});
}
const title = hasClaimInWatchLater ? __('Remove from Watch Later') : __('Add to Watch Later');
const label = !hasClaimInWatchLater ? __('Add') : __('Added');
return (
<Button
ref={buttonRef}
requiresAuth={IS_WEB}
title={title}
label={label}
className="button--file-action"
icon={(hasClaimInWatchLater && (isHovering ? ICONS.REMOVE : ICONS.COMPLETED)) || (isHovering ? ICONS.COMPLETED : ICONS.TIME)}
onClick={(e) => handleWatchLater(e)}
/>
);
}
export default FileWatchLaterLink;

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

@ -17,7 +17,7 @@ type Props = {
embed?: boolean,
doCommentSocketConnect: (string, string) => void,
doCommentSocketDisconnect: (string) => void,
doCommentList: (string, number, number) => void,
doCommentList: (string, string, number, number) => void,
comments: Array<Comment>,
fetchingComments: boolean,
doSuperChatList: (string) => void,
@ -68,7 +68,7 @@ export default function LivestreamComments(props: Props) {
React.useEffect(() => {
if (claimId) {
doCommentList(uri, 1, 75);
doCommentList(uri, '', 1, 75);
doSuperChatList(uri);
doCommentSocketConnect(uri, claimId);
}

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

@ -13,7 +13,7 @@ type Props = {
label: ?string,
reward: Reward,
button: ?boolean,
claimReward: Reward => void,
claimReward: (Reward) => void,
};
const RewardLink = (props: Props) => {
@ -36,6 +36,7 @@ const RewardLink = (props: Props) => {
button={button ? 'primary' : 'link'}
disabled={isPending}
label={<LbcMessage>{displayLabel}</LbcMessage>}
aria-label={displayLabel}
onClick={() => {
claimReward(reward);
}}

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

@ -8,6 +8,7 @@ import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
import { parseURI, isURIValid } from 'lbry-redux';
import { SITE_TITLE, WELCOME_VERSION, SIMPLE_SITE } from 'config';
import LoadingBarOneOff from 'component/loadingBarOneOff';
import { GetLinksData } from 'util/buildHomepage';
import HomePage from 'page/home';
@ -21,7 +22,9 @@ const Code2257Page = lazyImport(() => import('web/page/code2257' /* webpackChunk
// Chunk: "secondary"
const SignInPage = lazyImport(() => import('page/signIn' /* webpackChunkName: "secondary" */));
const SignInWalletPasswordPage = lazyImport(() => import('page/signInWalletPassword' /* webpackChunkName: "secondary" */));
const SignInWalletPasswordPage = lazyImport(() =>
import('page/signInWalletPassword' /* webpackChunkName: "secondary" */)
);
const SignUpPage = lazyImport(() => import('page/signUp' /* webpackChunkName: "secondary" */));
const SignInVerifyPage = lazyImport(() => import('page/signInVerify' /* webpackChunkName: "secondary" */));
@ -36,7 +39,9 @@ const WalletPage = lazyImport(() => import('page/wallet' /* webpackChunkName: "s
const NotificationsPage = lazyImport(() => import('page/notifications' /* webpackChunkName: "secondary" */));
const CollectionPage = lazyImport(() => import('page/collection' /* webpackChunkName: "secondary" */));
const ChannelNew = lazyImport(() => import('page/channelNew' /* webpackChunkName: "secondary" */));
const ChannelsFollowingDiscoverPage = lazyImport(() => import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */));
const ChannelsFollowingDiscoverPage = lazyImport(() =>
import('page/channelsFollowingDiscover' /* webpackChunkName: "secondary" */)
);
const ChannelsFollowingPage = lazyImport(() => import('page/channelsFollowing' /* webpackChunkName: "secondary" */));
const ChannelsPage = lazyImport(() => import('page/channels' /* webpackChunkName: "secondary" */));
const CheckoutPage = lazyImport(() => import('page/checkoutPage' /* webpackChunkName: "checkoutPage" */));
@ -65,10 +70,14 @@ const SearchPage = lazyImport(() => import('page/search' /* webpackChunkName: "s
const SettingsAdvancedPage = lazyImport(() => import('page/settingsAdvanced' /* webpackChunkName: "secondary" */));
const SettingsStripeCard = lazyImport(() => import('page/settingsStripeCard' /* webpackChunkName: "secondary" */));
const SettingsCreatorPage = lazyImport(() => import('page/settingsCreator' /* webpackChunkName: "secondary" */));
const SettingsNotificationsPage = lazyImport(() => import('page/settingsNotifications' /* webpackChunkName: "secondary" */));
const SettingsNotificationsPage = lazyImport(() =>
import('page/settingsNotifications' /* webpackChunkName: "secondary" */)
);
const SettingsPage = lazyImport(() => import('page/settings' /* webpackChunkName: "secondary" */));
const ShowPage = lazyImport(() => import('page/show' /* webpackChunkName: "secondary" */));
const TagsFollowingManagePage = lazyImport(() => import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */));
const TagsFollowingManagePage = lazyImport(() =>
import('page/tagsFollowingManage' /* webpackChunkName: "secondary" */)
);
const TagsFollowingPage = lazyImport(() => import('page/tagsFollowing' /* webpackChunkName: "secondary" */));
const TopPage = lazyImport(() => import('page/top' /* webpackChunkName: "secondary" */));
const Welcome = lazyImport(() => import('page/welcome' /* webpackChunkName: "secondary" */));
@ -150,7 +159,7 @@ function AppRouter(props: Props) {
const resetScroll = urlParams.get('reset_scroll');
const hasLinkedCommentInUrl = urlParams.get(LINKED_COMMENT_QUERY_PARAM);
const dynamicRoutes = Object.values(homepageData).filter(
const dynamicRoutes = GetLinksData(homepageData).filter(
(potentialRoute: any) => potentialRoute && potentialRoute.route
);

5
ui/component/searchOptions/index.js
View file

@ -1,14 +1,13 @@
import { connect } from 'react-redux';
import { doUpdateSearchOptions } from 'redux/actions/search';
import { selectSearchOptions, makeSelectQueryWithOptions } from 'redux/selectors/search';
import { selectSearchOptions } from 'redux/selectors/search';
import { doToggleSearchExpanded } from 'redux/actions/app';
import { selectSearchOptionsExpanded } from 'redux/selectors/app';
import SearchOptions from './view';
const select = state => ({
const select = (state) => ({
options: selectSearchOptions(state),
expanded: selectSearchOptionsExpanded(state),
query: makeSelectQueryWithOptions(undefined, {})(state),
});
const perform = (dispatch, ownProps) => {

35
ui/component/sideNavigation/view.jsx
View file

@ -9,7 +9,8 @@ import Icon from 'component/common/icon';
import NotificationBubble from 'component/notificationBubble';
import I18nMessage from 'component/i18nMessage';
import ChannelThumbnail from 'component/channelThumbnail';
import { PINNED_LABEL_1, PINNED_URI_1, PINNED_URI_2, PINNED_LABEL_2, SIMPLE_SITE, DOMAIN, ENABLE_UI_NOTIFICATIONS } from 'config';
import { GetLinksData } from 'util/buildHomepage';
import { SIMPLE_SITE, DOMAIN, ENABLE_UI_NOTIFICATIONS } from 'config';
// @if TARGET='app'
import { IS_MAC } from 'component/app/view';
// @endif
@ -76,8 +77,7 @@ function SideNavigation(props: Props) {
followedTags,
} = props;
const { EXTRA_SIDEBAR_LINKS } = homepageData;
const EXTRA_SIDEBAR_LINKS = GetLinksData(homepageData);
const FULL_LINKS: Array<SideNavLink> = [
{
title: 'Your Tags',
@ -197,22 +197,6 @@ function SideNavigation(props: Props) {
},
];
if (PINNED_URI_1 && PINNED_LABEL_1) {
MOBILE_LINKS.push({
title: PINNED_LABEL_1,
link: PINNED_URI_1,
icon: ICONS.PINNED,
});
}
if (PINNED_URI_2 && PINNED_LABEL_2) {
MOBILE_LINKS.push({
title: PINNED_LABEL_2,
link: PINNED_URI_2,
icon: ICONS.PINNED,
});
}
const notificationsEnabled = ENABLE_UI_NOTIFICATIONS || (user && user.experimental_ui);
const isAuthenticated = Boolean(email);
// SIDE LINKS: FOLLOWING, HOME, [FULL,] [EXTRA]
@ -239,8 +223,17 @@ function SideNavigation(props: Props) {
});
}
if (EXTRA_SIDEBAR_LINKS) {
if (SIMPLE_SITE && EXTRA_SIDEBAR_LINKS) {
// $FlowFixMe
SIDE_LINKS.push(...EXTRA_SIDEBAR_LINKS);
const WILD_WEST = {
title: 'Wild West',
link: `/$/${PAGES.WILD_WEST}`,
icon: ICONS.WILD_WEST,
};
SIDE_LINKS.push(WILD_WEST);
}
const [pulseLibrary, setPulseLibrary] = React.useState(false);
@ -275,7 +268,7 @@ function SideNavigation(props: Props) {
if (e.keyCode === ESCAPE_KEY_CODE && isAbsolute) {
setSidebarOpen(false);
} else if (e.keyCode === BACKSLASH_KEY_CODE) {
const hasActiveInput = document.querySelector('input:focus');
const hasActiveInput = document.querySelector('input:focus, textarea:focus');
if (!hasActiveInput) {
setSidebarOpen(!sidebarOpen);
}

86
ui/component/viewers/videoViewer/internal/plugins/videojs-aniview/plugin.js
View file

@ -1,10 +1,52 @@
// Created by xander on 6/21/2021
import videojs from 'video.js';
import 'videojs-contrib-ads';
import 'videojs-ima';
const VERSION = '0.0.1';
/* Macro provided by aniview
* const macroUrl =
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL_MACRO]` +
`&cb=[TIMESTAMP_MACRO]` +
`&AV_WIDTH=[WIDTH_MACRO]` +
`&AV_HEIGHT=[HEIGHT_MACRO]` +
`&AV_SCHAIN=[SCHAIN_MACRO]` +
`&AV_CCPA=[CCPA_MACRO]` +
`&AV_GDPR=[GDPR_MACRO]` +
`&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=false` +
`&usevslot=true` +
`&vastretry=3` +
`&hidecontrols=false`;
* */
// TEST PRE-ROLL WITH THIS TAG:
// https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator=
// Modified to work with IMA
const macroUrl =
'https://vast.aniview.com/api/adserver61/vast/?AV_PUBLISHERID=60afcbc58cfdb065440d2426&AV_CHANNELID=60b354389c7adb506d0bd9a4&AV_URL=[URL_MACRO]&cb=[TIMESTAMP_MACRO]&AV_WIDTH=[WIDTH_MACRO]&AV_HEIGHT=[HEIGHT_MACRO]&AV_SCHAIN=[SCHAIN_MACRO]&AV_CCPA=[CCPA_MACRO]&AV_GDPR=[GDPR_MACRO]&AV_CONSENT=[CONSENT_MACRO]&skip=true&skiptimer=5&usevslot=true&hidecontrols=false';
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL]` +
`&cb=[CACHEBUSTING]` +
`&AV_WIDTH=[WIDTH]` +
`&AV_HEIGHT=[HEIGHT]` +
// `&AV_SCHAIN=[SCHAIN_MACRO]` +
// `&AV_CCPA=[CCPA_MACRO]` +
// `&AV_GDPR=[GDPR_MACRO]` +
// `&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=true` +
`&usevslot=true` +
`&vastretry=5` +
`&hidecontrols=false`;
const defaults = {
adTagUrl: macroUrl,
@ -19,46 +61,24 @@ class AniviewPlugin extends Component {
super(player, options);
// Plugin started
if (options.debug) {
this.log(`Created aniview plugin.`);
}
if (options.debug) this.log(`Created aniview plugin.`);
// To help with debugging, we'll add a global vjs object with the video js player
window.aniview = player;
this.player = player;
const google = window.google;
player.ima({
// adTagUrl: macroUrl,
id: 'ad_content_video',
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl:
'https://vast.aniview.com/api/adserver61/vast/?AV_PUBLISHERID=60afcbc58cfdb065440d2426&AV_CHANNELID=60b354389c7adb506d0bd9a4',
});
// this.player.ads();
// const serverUrl = this.player.ads.adMacroReplacement(macroUrl);
// this.log(serverUrl);
// request ads whenever there's new video content
player.on('contentchanged', () => {
/* player.on('contentchanged', () => {
// in a real plugin, you might fetch your ad inventory here
player.trigger('adsready');
});
}); */
// Plugin event listeners
player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
// player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
}
onReadyForPreroll(event) {
this.player.ads.startLinearAdMode();
// play your linear ad content
// in this example, we use a static mp4
this.player.src('kitteh.mp4');
/* onReadyForPreroll(event) {
// send event when ad is playing to remove loading spinner
this.player.one('adplaying', () => {
this.player.trigger('ads-ad-started');
@ -68,7 +88,7 @@ class AniviewPlugin extends Component {
this.player.one('adended', () => {
this.player.ads.endLinearAdMode();
});
}
} */
log(...args) {
if (this.options_.debug) {
@ -90,6 +110,14 @@ const onPlayerReady = (player, options) => {
* @param {Object} [options={}]
*/
const plugin = function (options) {
const google = window.google;
this.ima({
// $FlowFixMe
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl: macroUrl,
});
this.ready(() => {
onPlayerReady(this, videojs.mergeOptions(defaults, options));
});

33
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -13,29 +13,9 @@ import hlsQualitySelector from './plugins/videojs-hls-quality-selector/plugin';
import recsys from './plugins/videojs-recsys/plugin';
import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
import 'videojs-contrib-ads';
import 'videojs-ima';
// import aniview from './plugins/videojs-aniview/plugin';
import './plugins/videojs-aniview/plugin';
const isDev = process.env.NODE_ENV !== 'production';
const macroUrl =
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_URL=[URL_MACRO]` +
`&cb=[TIMESTAMP_MACRO]` +
`&AV_WIDTH=[WIDTH_MACRO]` +
`&AV_HEIGHT=[HEIGHT_MACRO]` +
`&AV_SCHAIN=[SCHAIN_MACRO]` +
`&AV_CCPA=[CCPA_MACRO]` +
`&AV_GDPR=[GDPR_MACRO]` +
`&AV_CONSENT=[CONSENT_MACRO]` +
`&skip=true` +
`&skiptimer=5` +
`&logo=false` +
`&usevslot=true` +
`&vastretry=3` +
`&hidecontrols=false`;
export type Player = {
on: (string, (any) => void) => void,
@ -605,14 +585,9 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// pre-roll ads
// This must be initialized earlier than everything else
// otherwise a race condition occurs if we place this in the onReady call back
if (allowPreRoll && SIMPLE_SITE && window.google) {
const google = window.google;
// player.aniview();
vjs.ima({
// $FlowFixMe
vpaidMode: google.ima.ImaSdkSettings.VpaidMode.INSECURE,
adTagUrl: macroUrl,
});
// allow if isDev because otherwise you'll never see ads when basing to master
if ((allowPreRoll && SIMPLE_SITE) || isDev) {
vjs.aniview();
}
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)

2
ui/component/wunderbarSuggestions/index.js
View file

@ -2,7 +2,6 @@ import * as MODALS from 'constants/modal_types';
import { connect } from 'react-redux';
import { selectLanguage, selectShowMatureContent } from 'redux/selectors/settings';
import { doToast } from 'redux/actions/notifications';
import { doSearch } from 'redux/actions/search';
import { doOpenModal, doHideModal } from 'redux/actions/app';
import { withRouter } from 'react-router';
import { doResolveUris } from 'lbry-redux';
@ -16,7 +15,6 @@ const select = (state, props) => ({
const perform = (dispatch, ownProps) => ({
doResolveUris: (uris) => dispatch(doResolveUris(uris)),
doSearch: (query, options) => dispatch(doSearch(query, options)),
navigateToSearchPage: (query) => {
let encodedQuery = encodeURIComponent(query);
ownProps.history.push({ pathname: `/$/search`, search: `?q=${encodedQuery}` });

2
ui/constants/action_types.js
View file

@ -248,6 +248,8 @@ export const DISMISS_ERROR = 'DISMISS_ERROR';
export const COMMENT_LIST_STARTED = 'COMMENT_LIST_STARTED';
export const COMMENT_LIST_COMPLETED = 'COMMENT_LIST_COMPLETED';
export const COMMENT_LIST_FAILED = 'COMMENT_LIST_FAILED';
export const COMMENT_LIST_RESET = 'COMMENT_LIST_RESET';
export const COMMENT_BY_ID_COMPLETED = 'COMMENT_BY_ID_COMPLETED';
export const COMMENT_CREATE_STARTED = 'COMMENT_CREATE_STARTED';
export const COMMENT_CREATE_COMPLETED = 'COMMENT_CREATE_COMPLETED';
export const COMMENT_CREATE_FAILED = 'COMMENT_CREATE_FAILED';

10
ui/constants/comment.js
View file

@ -4,8 +4,18 @@ export const SORT_COMMENTS_NEW = 'new';
export const SORT_COMMENTS_BEST = 'best';
export const SORT_COMMENTS_CONTROVERSIAL = 'controversial';
export const SORT_BY = {
NEWEST: 0,
OLDEST: 1,
CONTROVERSY: 2,
POPULARITY: 3,
};
export const BLOCK_LEVEL = {
SELF: 'self',
MODERATOR: 'moderator',
ADMIN: 'admin',
};
export const COMMENT_PAGE_SIZE_TOP_LEVEL = 10;
export const COMMENT_PAGE_SIZE_REPLIES = 10;

5
ui/page/collection/view.jsx
View file

@ -111,7 +111,10 @@ export default function CollectionPage(props: Props) {
<Card
title={
<span>
<Icon icon={ICONS.STACK} className="icon--margin-right" />
<Icon
icon={(collectionId === COLLECTIONS_CONSTS.WATCH_LATER_ID && ICONS.TIME) ||
(collectionId === COLLECTIONS_CONSTS.FAVORITES_ID && ICONS.STAR) || ICONS.STACK}
className="icon--margin-right" />
{claim ? claim.value.title || claim.name : collection && collection.name}
</span>
}

4
ui/page/file/index.js
View file

@ -16,7 +16,6 @@ import {
import { makeSelectCostInfoForUri, doFetchCostInfoForUri } from 'lbryinc';
import { selectShowMatureContent, makeSelectClientSetting } from 'redux/selectors/settings';
import { makeSelectFileRenderModeForUri } from 'redux/selectors/content';
import { makeSelectCommentForCommentId } from 'redux/selectors/comments';
import { DISABLE_COMMENTS_TAG } from 'constants/tags';
import FilePage from './view';
@ -24,11 +23,10 @@ import FilePage from './view';
const select = (state, props) => {
const { search } = props.location;
const urlParams = new URLSearchParams(search);
const linkedCommentId = urlParams.get('lc');
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID);
return {
linkedComment: makeSelectCommentForCommentId(linkedCommentId)(state),
linkedCommentId: urlParams.get('lc'),
costInfo: makeSelectCostInfoForUri(props.uri)(state),
metadata: makeSelectMetadataForUri(props.uri)(state),
obscureNsfw: !selectShowMatureContent(state),

8
ui/page/file/view.jsx
View file

@ -27,7 +27,7 @@ type Props = {
renderMode: string,
obscureNsfw: boolean,
isMature: boolean,
linkedComment: any,
linkedCommentId?: string,
setPrimaryUri: (?string) => void,
collection?: Collection,
collectionId: string,
@ -46,7 +46,7 @@ function FilePage(props: Props) {
obscureNsfw,
isMature,
costInfo,
linkedComment,
linkedCommentId,
setPrimaryUri,
videoTheaterMode,
commentsDisabled,
@ -146,7 +146,7 @@ function FilePage(props: Props) {
<div>
{RENDER_MODES.FLOATING_MODES.includes(renderMode) && <FileTitleSection uri={uri} />}
{commentsDisabled && <Empty text={__('The creator of this content has disabled comments.')} />}
{!commentsDisabled && <CommentsList uri={uri} linkedComment={linkedComment} />}
{!commentsDisabled && <CommentsList uri={uri} linkedCommentId={linkedCommentId} />}
</div>
{!collection && !isMarkdown && videoTheaterMode && <RecommendedContent uri={uri} />}
{collection && !isMarkdown && videoTheaterMode && <CollectionContent id={collectionId} uri={uri} />}
@ -157,7 +157,7 @@ function FilePage(props: Props) {
{!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
{isMarkdown && (
<div className="file-page__post-comments">
<CommentsList uri={uri} linkedComment={linkedComment} />
<CommentsList uri={uri} linkedCommentId={linkedCommentId} />
</div>
)}
</Page>

16
ui/page/home/view.jsx
View file

@ -12,6 +12,11 @@ import I18nMessage from 'component/i18nMessage';
import LbcSymbol from 'component/common/lbc-symbol';
import WaitUntilOnPage from 'component/common/wait-until-on-page';
import useGetLivestreams from 'effects/use-get-livestreams';
import { GetLinksData } from 'util/buildHomepage';
// @if TARGET='web'
import Pixel from 'web/component/pixel';
// @endif
type Props = {
authenticated: boolean,
@ -26,10 +31,11 @@ function HomePage(props: Props) {
const showPersonalizedChannels = (authenticated || !IS_WEB) && subscribedChannels && subscribedChannels.length > 0;
const showPersonalizedTags = (authenticated || !IS_WEB) && followedTags && followedTags.length > 0;
const showIndividualTags = showPersonalizedTags && followedTags.length < 5;
const { default: getHomepage } = homepageData;
const { livestreamMap } = useGetLivestreams();
const rowData: Array<RowDataItem> = getHomepage(
const rowData: Array<RowDataItem> = GetLinksData(
homepageData,
true,
authenticated,
showPersonalizedChannels,
showPersonalizedTags,
@ -54,7 +60,7 @@ function HomePage(props: Props) {
livestreamMap={livestreamMap}
showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
hasSource
pin={route === `/$/${PAGES.GENERAL}`}
pin={route === `/$/${PAGES.GENERAL}`} // use pinUrls here
/>
);
@ -135,8 +141,12 @@ function HomePage(props: Props) {
</div>
)}
{rowData.map(({ title, route, link, icon, help, options = {} }, index) => {
// add pins here
return getRowElements(title, route, link, icon, help, options, index);
})}
{/* @if TARGET='web' */}
<Pixel type={'retargeting'} />
{/* @endif */}
</Page>
);
}

23
ui/page/search/index.js
View file

@ -1,43 +1,42 @@
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { doSearch } from 'redux/actions/search';
import { SIMPLE_SITE } from 'config';
import {
selectIsSearching,
makeSelectSearchUris,
makeSelectQueryWithOptions,
selectSearchOptions,
makeSelectHasReachedMaxResultsLength,
} from 'redux/selectors/search';
import { selectShowMatureContent } from 'redux/selectors/settings';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import { getSearchQueryString } from 'util/query-params';
import SearchPage from './view';
const select = (state, props) => {
const showMature = selectShowMatureContent(state);
const urlParams = new URLSearchParams(props.location.search);
let urlQuery = urlParams.get('q') || null;
if (urlQuery) {
urlQuery = urlQuery.replace(/^lbry:\/\//i, '').replace(/\//, ' ');
}
const query = makeSelectQueryWithOptions(
urlQuery,
SIMPLE_SITE
? { nsfw: false, isBackgroundSearch: false }
: showMature === false
? { nsfw: false, isBackgroundSearch: false }
: { isBackgroundSearch: false }
)(state);
const searchOptions = {
...selectSearchOptions(state),
isBackgroundSearch: false,
nsfw: showMature,
};
const query = getSearchQueryString(urlQuery, searchOptions);
const uris = makeSelectSearchUris(query)(state);
const hasReachedMaxResultsLength = makeSelectHasReachedMaxResultsLength(query)(state);
return {
urlQuery,
searchOptions,
isSearching: selectIsSearching(state),
showNsfw: showMature,
uris: uris,
isAuthenticated: selectUserVerifiedEmail(state),
searchOptions: selectSearchOptions(state),
hasReachedMaxResultsLength: hasReachedMaxResultsLength,
};
};

40
ui/page/search/view.jsx
View file

@ -11,43 +11,21 @@ import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router';
import { SEARCH_PAGE_SIZE } from 'constants/search';
type AdditionalOptions = {
isBackgroundSearch: boolean,
nsfw?: boolean,
from?: number,
};
type Props = {
search: (string, AdditionalOptions) => void,
searchOptions: {},
urlQuery: string,
searchOptions: SearchOptions,
search: (string, SearchOptions) => void,
isSearching: boolean,
location: UrlLocation,
uris: Array<string>,
showNsfw: boolean,
isAuthenticated: boolean,
hasReachedMaxResultsLength: boolean,
};
export default function SearchPage(props: Props) {
const {
search,
uris,
location,
isSearching,
showNsfw,
isAuthenticated,
searchOptions,
hasReachedMaxResultsLength,
} = props;
const { urlQuery, searchOptions, search, uris, isSearching, isAuthenticated, hasReachedMaxResultsLength } = props;
const { push } = useHistory();
const urlParams = new URLSearchParams(location.search);
const urlQuery = urlParams.get('q') || '';
const additionalOptions: AdditionalOptions = { isBackgroundSearch: false };
const [from, setFrom] = React.useState(0);
additionalOptions['nsfw'] = SIMPLE_SITE ? false : showNsfw;
additionalOptions['from'] = from;
const modifiedUrlQuery = urlQuery.trim().replace(/\s+/g, '').replace(/:/g, '#');
const uriFromQuery = `lbry://${modifiedUrlQuery}`;
@ -78,14 +56,14 @@ export default function SearchPage(props: Props) {
} catch (e) {}
}
const stringifiedOptions = JSON.stringify(additionalOptions);
const stringifiedSearchOptions = JSON.stringify(searchOptions);
useEffect(() => {
if (urlQuery) {
const jsonOptions = JSON.parse(stringifiedOptions);
search(urlQuery, jsonOptions);
const searchOptions = JSON.parse(stringifiedSearchOptions);
search(urlQuery, { ...searchOptions, from: from });
}
}, [search, urlQuery, stringifiedOptions, stringifiedSearchOptions]);
}, [search, urlQuery, stringifiedSearchOptions, from]);
function loadMore() {
if (!isSearching && !hasReachedMaxResultsLength) {
@ -114,7 +92,7 @@ export default function SearchPage(props: Props) {
header={
<SearchOptions
simple={SIMPLE_SITE}
additionalOptions={additionalOptions}
additionalOptions={searchOptions}
onSearchOptionsChanged={resetPage}
/>
}

9
ui/page/signInVerify/view.jsx
View file

@ -8,9 +8,11 @@ import Button from 'component/button';
import { Lbryio } from 'lbryinc';
import I18nMessage from 'component/i18nMessage';
import Card from 'component/common/card';
// @if TARGET='web'
import Pixel from 'web/component/pixel';
// @endif
type Props = {
history: { push: string => void, location: { search: string } },
history: { push: (string) => void, location: { search: string } },
doToast: ({}) => void,
};
@ -132,6 +134,9 @@ function SignInVerifyPage(props: Props) {
}
/>
</div>
{/* @if TARGET='web' */}
<Pixel type={'kill'} />
{/* @endif */}
</Page>
);
}

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

@ -2,11 +2,10 @@
import * as ACTIONS from 'constants/action_types';
import * as REACTION_TYPES from 'constants/reactions';
import * as PAGES from 'constants/pages';
import { BLOCK_LEVEL } from 'constants/comment';
import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
import { Lbry, parseURI, buildURI, selectClaimsById, selectClaimsByUri, selectMyChannelClaims } from 'lbry-redux';
import { doToast, doSeeNotifications } from 'redux/actions/notifications';
import {
makeSelectCommentIdsForUri,
makeSelectMyReactionsForComment,
makeSelectOthersReactionsForComment,
selectPendingCommentReacts,
@ -18,7 +17,22 @@ import { selectActiveChannelClaim } from 'redux/selectors/app';
import { toHex } from 'util/hex';
import Comments from 'comments';
export function doCommentList(uri: string, page: number = 1, pageSize: number = 99999) {
const isDev = process.env.NODE_ENV !== 'production';
function devToast(dispatch, msg) {
if (isDev) {
console.error(msg); // eslint-disable-line
dispatch(doToast({ isError: true, message: `DEV: ${msg}` }));
}
}
export function doCommentList(
uri: string,
parentId: string,
page: number = 1,
pageSize: number = 99999,
sortBy: number = SORT_BY.NEWEST
) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const claim = selectClaimsByUri(state)[uri];
@ -35,6 +49,9 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
dispatch({
type: ACTIONS.COMMENT_LIST_STARTED,
data: {
parentId,
},
});
// Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
@ -44,20 +61,28 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
page,
claim_id: claimId,
page_size: pageSize,
parent_id: parentId || undefined,
top_level: !parentId,
channel_id: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
channel_name: authorChannelClaim ? authorChannelClaim.name : undefined,
sort_by: sortBy,
})
.then((result: CommentListResponse) => {
const { items: comments } = result;
const { items: comments, total_items, total_filtered_items, total_pages } = result;
dispatch({
type: ACTIONS.COMMENT_LIST_COMPLETED,
data: {
comments,
parentId,
totalItems: total_items,
totalFilteredItems: total_filtered_items,
totalPages: total_pages,
claimId: claimId,
authorClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
uri: uri,
},
});
return result;
})
.catch((error) => {
@ -70,6 +95,7 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
},
});
} else {
devToast(dispatch, `doCommentList: ${error.message}`);
dispatch({
type: ACTIONS.COMMENT_LIST_FAILED,
data: error,
@ -79,6 +105,60 @@ export function doCommentList(uri: string, page: number = 1, pageSize: number =
};
}
export function doCommentById(commentId: string, toastIfNotFound: boolean = true) {
return (dispatch: Dispatch, getState: GetState) => {
return Comments.comment_by_id({ comment_id: commentId, with_ancestors: true })
.then((result: CommentByIdResponse) => {
const { item, items, ancestors } = result;
dispatch({
type: ACTIONS.COMMENT_BY_ID_COMPLETED,
data: {
comment: item || items, // Requested a change to rename it to 'item'. This covers both.
ancestors: ancestors,
},
});
return result;
})
.catch((error) => {
if (error.message === 'sql: no rows in result set' && toastIfNotFound) {
dispatch(
doToast({
isError: true,
message: __('The requested comment is no longer available.'),
})
);
} else {
devToast(dispatch, error.message);
}
});
};
}
export function doCommentReset(uri: string) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const claim = selectClaimsByUri(state)[uri];
const claimId = claim ? claim.claim_id : null;
if (!claimId) {
dispatch({
type: ACTIONS.COMMENT_LIST_FAILED,
data: 'unable to find claim for uri',
});
return;
}
dispatch({
type: ACTIONS.COMMENT_LIST_RESET,
data: {
claimId,
},
});
};
}
export function doSuperChatList(uri: string) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
@ -97,7 +177,7 @@ export function doSuperChatList(uri: string) {
return Comments.super_list({
claim_id: claimId,
})
.then((result: CommentListResponse) => {
.then((result: SuperListResponse) => {
const { items: comments, total_amount: totalAmount } = result;
dispatch({
type: ACTIONS.COMMENT_SUPER_CHAT_LIST_COMPLETED,
@ -117,17 +197,16 @@ export function doSuperChatList(uri: string) {
};
}
export function doCommentReactList(uri: string | null, commentId?: string) {
export function doCommentReactList(commentIds: Array<string>) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const activeChannelClaim = selectActiveChannelClaim(state);
const commentIds = uri ? makeSelectCommentIdsForUri(uri)(state) : [commentId];
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_STARTED,
});
const params: { comment_ids: string, channel_name?: string, channel_id?: string } = {
const params: CommentReactListParams = {
comment_ids: commentIds.join(','),
};
@ -144,10 +223,12 @@ export function doCommentReactList(uri: string | null, commentId?: string) {
data: {
myReactions: myReactions || {},
othersReactions,
channelId: activeChannelClaim ? activeChannelClaim.claim_id : undefined,
},
});
})
.catch((error) => {
devToast(dispatch, `doCommentReactList: ${error.message}`);
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_FAILED,
data: error,
@ -182,8 +263,9 @@ export function doCommentReact(commentId: string, type: string) {
return;
}
let myReacts = makeSelectMyReactionsForComment(commentId)(state);
const othersReacts = makeSelectOthersReactionsForComment(commentId)(state);
const reactKey = `${commentId}:${activeChannelClaim.claim_id}`;
const myReacts = makeSelectMyReactionsForComment(reactKey)(state);
const othersReacts = makeSelectOthersReactionsForComment(reactKey)(state);
const params: CommentReactParams = {
comment_ids: commentId,
channel_name: activeChannelClaim.name,
@ -217,8 +299,8 @@ export function doCommentReact(commentId: string, type: string) {
dispatch({
type: ACTIONS.COMMENT_REACTION_LIST_COMPLETED,
data: {
myReactions: { [commentId]: myReactsObj },
othersReactions: { [commentId]: othersReacts },
myReactions: { [reactKey]: myReactsObj },
othersReactions: { [reactKey]: othersReacts },
},
});
@ -371,7 +453,7 @@ export function doCommentCreate(
};
}
export function doCommentPin(commentId: string, remove: boolean) {
export function doCommentPin(commentId: string, claimId: string, remove: boolean) {
return (dispatch: Dispatch, getState: GetState) => {
const state = getState();
const activeChannel = selectActiveChannelClaim(state);
@ -394,7 +476,11 @@ export function doCommentPin(commentId: string, remove: boolean) {
.then((result: CommentPinResponse) => {
dispatch({
type: ACTIONS.COMMENT_PIN_COMPLETED,
data: result,
data: {
pinnedComment: result.items,
claimId,
unpin: remove,
},
});
})
.catch((error) => {

15
ui/redux/actions/search.js
View file

@ -1,13 +1,9 @@
// @flow
import * as ACTIONS from 'constants/action_types';
import { buildURI, doResolveUris, batchActions, isURIValid, makeSelectClaimForUri } from 'lbry-redux';
import {
makeSelectSearchUris,
makeSelectQueryWithOptions,
selectSearchValue,
selectSearchOptions,
} from 'redux/selectors/search';
import { makeSelectSearchUris, selectSearchValue } from 'redux/selectors/search';
import handleFetchResponse from 'util/handle-fetch';
import { getSearchQueryString } from 'util/query-params';
type Dispatch = (action: any) => any;
type GetState = () => { search: SearchState };
@ -44,10 +40,9 @@ export const doSearch = (rawQuery: string, searchOptions: SearchOptions) => (
const state = getState();
const mainOptions: any = selectSearchOptions(state);
const queryWithOptions = makeSelectQueryWithOptions(query, searchOptions)(state);
const queryWithOptions = getSearchQueryString(query, searchOptions);
const size = mainOptions.size;
const size = searchOptions.size;
const from = searchOptions.from;
// If we have already searched for something, we don't need to do anything
@ -101,7 +96,7 @@ export const doSearch = (rawQuery: string, searchOptions: SearchOptions) => (
});
dispatch(batchActions(...actions));
})
.catch((e) => {
.catch(() => {
dispatch({
type: ACTIONS.SEARCH_FAIL,
});

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

@ -3,17 +3,25 @@ import * as ACTIONS from 'constants/action_types';
import { handleActions } from 'util/redux-utils';
import { BLOCK_LEVEL } from 'constants/comment';
const IS_DEV = process.env.NODE_ENV !== 'production';
const defaultState: CommentsState = {
commentById: {}, // commentId -> Comment
byId: {}, // ClaimID -> list of comments
repliesByParentId: {}, // ParentCommentID -> list of reply comments
topLevelCommentsById: {}, // ClaimID -> list of top level comments
byId: {}, // ClaimID -> list of fetched comment IDs.
totalCommentsById: {}, // ClaimId -> ultimate total (including replies) in commentron.
repliesByParentId: {}, // ParentCommentID -> list of fetched replies.
totalRepliesByParentId: {}, // ParentCommentID -> total replies in commentron.
topLevelCommentsById: {}, // ClaimID -> list of fetched top level comments.
topLevelTotalPagesById: {}, // ClaimID -> total number of top-level pages in commentron. Based on COMMENT_PAGE_SIZE_TOP_LEVEL.
topLevelTotalCommentsById: {}, // ClaimID -> total top level comments in commentron.
// TODO:
// Remove commentsByUri
// It is not needed and doesn't provide anything but confusion
commentsByUri: {}, // URI -> claimId
linkedCommentAncestors: {}, // {"linkedCommentId": ["parentId", "grandParentId", ...]}
superChatsByUri: {},
isLoading: false,
isLoadingByParentId: {},
isCommenting: false,
myComments: undefined,
isFetchingReacts: false,
@ -39,6 +47,14 @@ const defaultState: CommentsState = {
fetchingBlockedWords: false,
};
function pushToArrayInObject(obj, key, valueToPush) {
if (!obj[key]) {
obj[key] = [valueToPush];
} else if (!obj[key].includes(valueToPush)) {
obj[key].push(valueToPush);
}
}
export default handleActions(
{
[ACTIONS.COMMENT_CREATE_STARTED]: (state: CommentsState, action: any): CommentsState => ({
@ -58,10 +74,13 @@ export default handleActions(
uri,
livestream,
}: { comment: Comment, claimId: string, uri: string, livestream: boolean } = action.data;
const commentById = Object.assign({}, state.commentById);
const byId = Object.assign({}, state.byId);
const totalCommentsById = Object.assign({}, state.totalCommentsById);
const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
const commentsByUri = Object.assign({}, state.commentsByUri);
const comments = byId[claimId] || [];
const newCommentIds = comments.slice();
@ -75,12 +94,27 @@ export default handleActions(
newCommentIds.unshift(comment.comment_id);
byId[claimId] = newCommentIds;
if (totalCommentsById[claimId]) {
totalCommentsById[claimId] += 1;
}
if (comment['parent_id']) {
if (!repliesByParentId[comment.parent_id]) {
repliesByParentId[comment.parent_id] = [comment.comment_id];
} else {
repliesByParentId[comment.parent_id].unshift(comment.comment_id);
}
if (!totalRepliesByParentId[comment.parent_id]) {
totalRepliesByParentId[comment.parent_id] = 1;
} else {
totalRepliesByParentId[comment.parent_id] += 1;
}
// Update the parent's "replies" value
if (commentById[comment.parent_id]) {
commentById[comment.parent_id].replies = (commentById[comment.parent_id].replies || 0) + 1;
}
} else {
if (!topLevelCommentsById[claimId]) {
commentsByUri[uri] = claimId;
@ -95,8 +129,10 @@ export default handleActions(
...state,
topLevelCommentsById,
repliesByParentId,
totalRepliesByParentId,
commentById,
byId,
totalCommentsById,
commentsByUri,
isLoading: false,
isCommenting: false,
@ -147,12 +183,14 @@ export default handleActions(
},
[ACTIONS.COMMENT_REACTION_LIST_COMPLETED]: (state: CommentsState, action: any): CommentsState => {
const { myReactions, othersReactions } = action.data;
const { myReactions, othersReactions, channelId } = action.data;
const myReacts = Object.assign({}, state.myReactsByCommentId);
const othersReacts = Object.assign({}, state.othersReactsByCommentId);
if (myReactions) {
Object.entries(myReactions).forEach(([commentId, reactions]) => {
myReacts[commentId] = Object.entries(reactions).reduce((acc, [name, count]) => {
const key = channelId ? `${commentId}:${channelId}` : commentId;
myReacts[key] = Object.entries(reactions).reduce((acc, [name, count]) => {
if (count === 1) {
acc.push(name);
}
@ -160,9 +198,11 @@ export default handleActions(
}, []);
});
}
if (othersReactions) {
Object.entries(othersReactions).forEach(([commentId, reactions]) => {
othersReacts[commentId] = reactions;
const key = channelId ? `${commentId}:${channelId}` : commentId;
othersReacts[key] = reactions;
});
}
@ -174,10 +214,32 @@ export default handleActions(
};
},
[ACTIONS.COMMENT_LIST_STARTED]: (state) => ({ ...state, isLoading: true }),
[ACTIONS.COMMENT_LIST_STARTED]: (state, action: any) => {
const { parentId } = action.data;
const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
if (parentId) {
isLoadingByParentId[parentId] = true;
}
return {
...state,
isLoading: true,
isLoadingByParentId,
};
},
[ACTIONS.COMMENT_LIST_COMPLETED]: (state: CommentsState, action: any) => {
const { comments, claimId, uri, disabled, authorClaimId } = action.data;
const {
comments,
parentId,
totalItems,
totalFilteredItems,
totalPages,
claimId,
uri,
disabled,
authorClaimId,
} = action.data;
const commentsDisabledChannelIds = [...state.commentsDisabledChannelIds];
if (disabled) {
@ -185,10 +247,16 @@ export default handleActions(
commentsDisabledChannelIds.push(authorClaimId);
}
const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
if (parentId) {
isLoadingByParentId[parentId] = false;
}
return {
...state,
commentsDisabledChannelIds,
isLoading: false,
isLoadingByParentId,
};
} else {
const index = commentsDisabledChannelIds.indexOf(authorClaimId);
@ -200,49 +268,135 @@ export default handleActions(
const commentById = Object.assign({}, state.commentById);
const byId = Object.assign({}, state.byId);
const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
const commentsByUri = Object.assign({}, state.commentsByUri);
const repliesByParentId = Object.assign({}, state.repliesByParentId);
const totalCommentsById = Object.assign({}, state.totalCommentsById);
const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
const commonUpdateAction = (comment, commentById, commentIds, index) => {
// map the comment_ids to the new comments
commentById[comment.comment_id] = comment;
commentIds[index] = comment.comment_id;
};
const tempRepliesByParent = {};
const topLevelComments = [];
if (comments) {
// we use an Array to preserve order of listing
// in reality this doesn't matter and we can just
// sort comments by their timestamp
const commentIds = Array(comments.length);
// map the comment_ids to the new comments
for (let i = 0; i < comments.length; i++) {
const comment = comments[i];
if (comment['parent_id']) {
if (!tempRepliesByParent[comment.parent_id]) {
tempRepliesByParent[comment.parent_id] = [comment.comment_id];
} else {
tempRepliesByParent[comment.parent_id].push(comment.comment_id);
}
} else {
commentById[comment.comment_id] = comment;
topLevelComments.push(comment.comment_id);
}
commentIds[i] = comments[i].comment_id;
commentById[commentIds[i]] = comments[i];
}
topLevelCommentsById[claimId] = topLevelComments;
// totalCommentsById[claimId] = totalItems;
// --> currently, this value is only correct when done via a top-level query.
// Until this is fixed, I'm moving it downwards to **
byId[claimId] = commentIds;
// --- Top-level comments ---
if (!parentId) {
totalCommentsById[claimId] = totalItems; // **
topLevelTotalCommentsById[claimId] = totalFilteredItems;
topLevelTotalPagesById[claimId] = totalPages;
if (!topLevelCommentsById[claimId]) {
topLevelCommentsById[claimId] = [];
}
const topLevelCommentIds = topLevelCommentsById[claimId];
for (let i = 0; i < comments.length; ++i) {
const comment = comments[i];
commonUpdateAction(comment, commentById, commentIds, i);
if (IS_DEV && comment['parent_id']) console.error('Invalid top-level comment:', comment); // eslint-disable-line
if (!topLevelCommentIds.includes(comment.comment_id)) {
topLevelCommentIds.push(comment.comment_id);
}
}
}
// --- Replies ---
else {
totalRepliesByParentId[parentId] = totalFilteredItems;
isLoadingByParentId[parentId] = false;
for (let i = 0; i < comments.length; ++i) {
const comment = comments[i];
commonUpdateAction(comment, commentById, commentIds, i);
if (IS_DEV && !comment['parent_id']) console.error('Missing parent_id:', comment); // eslint-disable-line
if (IS_DEV && comment.parent_id !== parentId) console.error('Black sheep in the family?:', comment); // eslint-disable-line
pushToArrayInObject(repliesByParentId, parentId, comment.comment_id);
}
}
byId[claimId] ? byId[claimId].push(...commentIds) : (byId[claimId] = commentIds);
commentsByUri[uri] = claimId;
}
const repliesByParentId = Object.assign({}, state.repliesByParentId, tempRepliesByParent); // {ParentCommentID -> [commentIds...] } list of reply comments
return {
...state,
topLevelCommentsById,
topLevelTotalCommentsById,
topLevelTotalPagesById,
repliesByParentId,
totalCommentsById,
totalRepliesByParentId,
byId,
commentById,
commentsByUri,
commentsDisabledChannelIds,
isLoading: false,
isLoadingByParentId,
};
},
[ACTIONS.COMMENT_BY_ID_COMPLETED]: (state: CommentsState, action: any) => {
const { comment, ancestors } = action.data;
const claimId = comment.claim_id;
const commentById = Object.assign({}, state.commentById);
const byId = Object.assign({}, state.byId);
const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
const repliesByParentId = Object.assign({}, state.repliesByParentId);
const linkedCommentAncestors = Object.assign({}, state.linkedCommentAncestors);
const updateStore = (comment, commentById, byId, repliesByParentId, topLevelCommentsById) => {
// 'comment.ByID' doesn't populate 'replies'. We should have at least 1
// at the moment, and the correct value will populated by 'comment.List'.
commentById[comment.comment_id] = { ...comment, replies: 1 };
byId[claimId] ? byId[claimId].unshift(comment.comment_id) : (byId[claimId] = [comment.comment_id]);
const parentId = comment.parent_id;
if (comment.parent_id) {
pushToArrayInObject(repliesByParentId, parentId, comment.comment_id);
} else {
pushToArrayInObject(topLevelCommentsById, claimId, comment.comment_id);
}
};
updateStore(comment, commentById, byId, repliesByParentId, topLevelCommentsById);
if (ancestors) {
ancestors.forEach((ancestor) => {
updateStore(ancestor, commentById, byId, repliesByParentId, topLevelCommentsById);
pushToArrayInObject(linkedCommentAncestors, comment.comment_id, ancestor.comment_id);
});
}
return {
...state,
topLevelCommentsById,
topLevelTotalCommentsById,
topLevelTotalPagesById,
repliesByParentId,
byId,
commentById,
linkedCommentAncestors,
};
},
@ -273,6 +427,51 @@ export default handleActions(
isLoading: false,
}),
[ACTIONS.COMMENT_LIST_RESET]: (state: CommentsState, action: any) => {
const { claimId } = action.data;
const byId = Object.assign({}, state.byId);
const totalCommentsById = Object.assign({}, state.totalCommentsById);
const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById); // was byId {ClaimId -> [commentIds...]}
const topLevelTotalCommentsById = Object.assign({}, state.topLevelTotalCommentsById);
const topLevelTotalPagesById = Object.assign({}, state.topLevelTotalPagesById);
const myReacts = Object.assign({}, state.myReactsByCommentId);
const othersReacts = Object.assign({}, state.othersReactsByCommentId);
function deleteReacts(reactObj, commentIdsToRemove) {
if (commentIdsToRemove && commentIdsToRemove.length > 0) {
let reactionKeys = Object.keys(reactObj);
reactionKeys.forEach((rk) => {
const colonIndex = rk.indexOf(':');
const commentId = colonIndex === -1 ? rk : rk.substring(0, colonIndex);
if (commentIdsToRemove.includes(commentId)) {
delete reactObj[rk];
}
});
}
}
deleteReacts(myReacts, byId[claimId]);
deleteReacts(othersReacts, byId[claimId]);
delete byId[claimId];
delete totalCommentsById[claimId];
delete topLevelCommentsById[claimId];
delete topLevelTotalCommentsById[claimId];
delete topLevelTotalPagesById[claimId];
return {
...state,
byId,
totalCommentsById,
topLevelCommentsById,
topLevelTotalCommentsById,
topLevelTotalPagesById,
myReactsByCommentId: myReacts,
othersReactsByCommentId: othersReacts,
};
},
[ACTIONS.COMMENT_RECEIVED]: (state: CommentsState, action: any) => {
const { uri, claimId, comment } = action.data;
const commentsByUri = Object.assign({}, state.commentsByUri);
@ -352,21 +551,50 @@ export default handleActions(
const { comment_id } = action.data;
const commentById = Object.assign({}, state.commentById);
const byId = Object.assign({}, state.byId);
const repliesByParentId = Object.assign({}, state.repliesByParentId); // {ParentCommentID -> [commentIds...] } list of reply comments
const totalRepliesByParentId = Object.assign({}, state.totalRepliesByParentId);
const totalCommentsById = Object.assign({}, state.totalCommentsById);
const comment = commentById[comment_id];
// to remove the comment and its references
const claimId = commentById[comment_id].claim_id;
const claimId = comment.claim_id;
for (let i = 0; i < byId[claimId].length; i++) {
if (byId[claimId][i] === comment_id) {
byId[claimId].splice(i, 1);
break;
}
}
// Update replies
if (comment['parent_id'] && repliesByParentId[comment.parent_id]) {
const index = repliesByParentId[comment.parent_id].indexOf(comment.comment_id);
if (index > -1) {
repliesByParentId[comment.parent_id].splice(index, 1);
if (commentById[comment.parent_id]) {
commentById[comment.parent_id].replies = Math.max(0, (commentById[comment.parent_id].replies || 0) - 1);
}
if (totalRepliesByParentId[comment.parent_id]) {
totalRepliesByParentId[comment.parent_id] = Math.max(0, totalRepliesByParentId[comment.parent_id] - 1);
}
}
}
if (totalCommentsById[claimId]) {
totalCommentsById[claimId] = Math.max(0, totalCommentsById[claimId] - 1);
}
delete commentById[comment_id];
return {
...state,
commentById,
byId,
totalCommentsById,
repliesByParentId,
totalRepliesByParentId,
isLoading: false,
};
},
@ -390,11 +618,41 @@ export default handleActions(
isCommenting: false,
};
},
[ACTIONS.COMMENT_UPDATE_FAILED]: (state: CommentsState, action: any) => ({
...state,
isCmmenting: false,
}),
[ACTIONS.COMMENT_PIN_COMPLETED]: (state: CommentsState, action: any) => {
const { pinnedComment, claimId, unpin } = action.data;
const commentById = Object.assign({}, state.commentById);
const topLevelCommentsById = Object.assign({}, state.topLevelCommentsById);
if (pinnedComment && topLevelCommentsById[claimId]) {
const index = topLevelCommentsById[claimId].indexOf(pinnedComment.comment_id);
if (index > -1) {
topLevelCommentsById[claimId].splice(index, 1);
if (unpin) {
// Without the sort score, I have no idea where to put it. Just
// dump it at the bottom. Users can refresh if they want it back to
// the correct sorted position.
topLevelCommentsById[claimId].push(pinnedComment.comment_id);
} else {
topLevelCommentsById[claimId].unshift(pinnedComment.comment_id);
}
commentById[pinnedComment.comment_id] = pinnedComment;
}
}
return {
...state,
commentById,
topLevelCommentsById,
};
},
[ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED]: (state: CommentsState, action: any) => ({
...state,
fetchingModerationBlockList: true,

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

@ -9,6 +9,7 @@ const selectState = (state) => state.comments || {};
export const selectCommentsById = createSelector(selectState, (state) => state.commentById || {});
export const selectIsFetchingComments = createSelector(selectState, (state) => state.isLoading);
export const selectIsFetchingCommentsByParentId = createSelector(selectState, (state) => state.isLoadingByParentId);
export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);
export const selectCommentsDisabledChannelIds = createSelector(
@ -143,19 +144,28 @@ export const selectCommentsByUri = createSelector(selectState, (state) => {
return comments;
});
export const selectLinkedCommentAncestors = createSelector(selectState, (state) => state.linkedCommentAncestors);
export const makeSelectCommentIdsForUri = (uri: string) =>
createSelector(selectState, selectCommentsByUri, selectClaimsById, (state, byUri) => {
const claimId = byUri[uri];
return state.byId[claimId];
});
export const makeSelectMyReactionsForComment = (commentId: string) =>
export const selectMyReactionsByCommentId = createSelector(selectState, (state) => state.myReactsByCommentId);
/**
* makeSelectMyReactionsForComment
*
* @param commentIdChannelId Format = "commentId:MyChannelId".
*/
export const makeSelectMyReactionsForComment = (commentIdChannelId: string) =>
createSelector(selectState, (state) => {
if (!state.myReactsByCommentId) {
return [];
}
return state.myReactsByCommentId[commentId] || [];
return state.myReactsByCommentId[commentIdChannelId] || [];
});
export const makeSelectOthersReactionsForComment = (commentId: string) =>
@ -276,6 +286,18 @@ export const makeSelectTopLevelCommentsForUri = (uri: string) =>
}
);
export const makeSelectTopLevelTotalCommentsForUri = (uri: string) =>
createSelector(selectState, selectCommentsByUri, (state, byUri) => {
const claimId = byUri[uri];
return state.topLevelTotalCommentsById[claimId] || 0;
});
export const makeSelectTopLevelTotalPagesForUri = (uri: string) =>
createSelector(selectState, selectCommentsByUri, (state, byUri) => {
const claimId = byUri[uri];
return state.topLevelTotalPagesById[claimId] || 0;
});
export const makeSelectRepliesForParentId = (id: string) =>
createSelector(
selectState, // no selectRepliesByParentId
@ -334,9 +356,15 @@ export const makeSelectRepliesForParentId = (id: string) =>
}
);
export const makeSelectTotalRepliesForParentId = (parentId: string) =>
createSelector(selectState, (state) => {
return state.totalRepliesByParentId[parentId] || 0;
});
export const makeSelectTotalCommentsCountForUri = (uri: string) =>
createSelector(makeSelectCommentsForUri(uri), (comments) => {
return comments ? comments.length : 0;
createSelector(selectState, selectCommentsByUri, (state, byUri) => {
const claimId = byUri[uri];
return state.totalCommentsById[claimId] || 0;
});
// Personal list

19
ui/redux/selectors/search.js
View file

@ -57,25 +57,6 @@ export const makeSelectHasReachedMaxResultsLength = (query: string): ((state: St
return hasReachedMaxResultsLength[query];
});
// Creates a query string based on the state in the search reducer
// Can be overrided by passing in custom sizes/from values for other areas pagination
type CustomOptions = {
isBackgroundSearch?: boolean,
size?: number,
from?: number,
related_to?: string,
nsfw?: boolean,
};
export const makeSelectQueryWithOptions = (customQuery: ?string, options: CustomOptions) =>
createSelector(selectSearchValue, selectSearchOptions, (query, defaultOptions) => {
const searchOptions = { ...defaultOptions, ...options };
const queryString = getSearchQueryString(customQuery || query, searchOptions);
return queryString;
});
export const makeSelectRecommendedContentForUri = (uri: string) =>
createSelector(
makeSelectClaimForUri(uri),

5
ui/redux/selectors/settings.js
View file

@ -1,8 +1,8 @@
import { SETTINGS, DAEMON_SETTINGS } from 'lbry-redux';
import { createSelector } from 'reselect';
import homepages from 'homepages';
import { ENABLE_MATURE } from 'config';
import { getDefaultHomepageKey, getDefaultLanguage } from 'util/default-languages';
const homepages = require('homepages');
const selectState = (state) => state.settings || {};
@ -70,7 +70,8 @@ export const selectHomepageData = createSelector(
selectHomepageCode,
(homepageCode) => {
// homepages = { 'en': homepageFile, ... }
return homepages[homepageCode] || homepages['en'];
// mixin Homepages here
return homepages[homepageCode] || homepages['en'] || {};
}
);

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

@ -677,9 +677,31 @@
& > * {
color: var(--color-black);
background-color: var(--color-white);
padding: var(--spacing-xs);
background-color: var(--color-black);
border-radius: var(--border-radius);
padding: var(--spacing-xxs);
margin-right: 0;
&:hover {
background-color: var(--color-button-alt-bg);
}
}
.button--file-action {
margin: 0 0;
padding: var(--spacing-xxs) var(--spacing-xxs);
height: unset;
.button__label {
color: var(--color-text);
font-size: var(--font-small);
display: none;
}
&:hover {
.button__label {
display: inline;
}
}
}
}

4
ui/scss/component/_comments.scss
View file

@ -441,3 +441,7 @@ $thumbnailWidthSmall: 1rem;
.comment__tip-input {
margin: var(--spacing-s) 0;
}
.comment--blocked {
opacity: 0.5;
}

324
ui/util/buildHomepage.js Normal file
View file

@ -0,0 +1,324 @@
// @flow
import * as PAGES from 'constants/pages';
import * as ICONS from 'constants/icons';
import * as CS from 'constants/claim_search';
import { parseURI } from 'lbry-redux';
import moment from 'moment';
import { toCapitalCase } from 'util/string';
import { useIsLargeScreen } from 'effects/use-screensize';
import { CUSTOM_HOMEPAGE } from 'config';
export type RowDataItem = {
title: any,
link?: string,
help?: any,
icon?: string,
extra?: any,
options?: {
channelIds?: Array<string>,
pageSize?: number,
limitClaimsPerChannel?: number,
},
route?: string,
hideForUnauth?: boolean,
};
export type HomepageCat = {
name: string,
icon: string,
label: string,
channelIds?: Array<string>,
daysOfContent?: number,
channelLimit?: string,
pageSize?: number,
claimType?: string,
order?: string,
tags?: Array<string>,
pinnedUrls?: Array<string>,
mixIn?: Array<string>,
};
function getLimitPerChannel(size, isChannel) {
if (isChannel) {
return 1;
} else {
return size < 250 ? (size < 150 ? 3 : 2) : 1;
}
}
export const getHomepageRowForCat = (cat: HomepageCat) => {
let orderValue;
switch (cat.order) {
case 'trending':
orderValue = CS.ORDER_BY_TRENDING_VALUE;
break;
case 'top':
orderValue = CS.ORDER_BY_TOP_VALUE;
break;
default:
orderValue = CS.ORDER_BY_NEW_VALUE;
}
let urlParams = new URLSearchParams();
if (cat.claimType) {
urlParams.set(CS.CLAIM_TYPE, cat.claimType);
}
if (cat.channelIds) {
urlParams.set(CS.CHANNEL_IDS_KEY, cat.channelIds.join(','));
}
const isChannelType = cat.claimType && cat.claimType === 'channel';
// can intend no limit, numerica auto limit, specific limit.
let limitClaims;
if (typeof cat.channelLimit === 'string' && cat.channelIds && cat.channelIds.length) {
if (cat.channelLimit === 'auto') {
limitClaims = getLimitPerChannel(cat.channelIds.length, isChannelType);
} else if (cat.channelLimit) {
const limitNumber = Number(cat.channelLimit);
// eslint-disable-next-line
if (limitNumber === limitNumber && limitNumber !== 0) {
// because javascript and NaN !== NaN
limitClaims = Math.floor(limitNumber);
}
}
}
return {
link: `/$/${PAGES.DISCOVER}?${urlParams.toString()}`,
route: cat.name ? `/$/${cat.name}` : undefined,
icon: cat.icon || '', // some default
title: cat.label,
options: {
claimType: cat.claimType || 'stream',
channelIds: cat.channelIds,
orderBy: orderValue,
pageSize: cat.pageSize || undefined,
limitClaimsPerChannel: limitClaims,
releaseTime: `>${Math.floor(
moment()
.subtract(cat.daysOfContent || 30, 'days')
.startOf('week')
.unix()
)}`,
},
};
};
export function GetLinksData(
all: any,
isHomepage?: boolean = false,
authenticated?: boolean,
showPersonalizedChannels?: boolean,
showPersonalizedTags?: boolean,
subscribedChannels?: Array<Subscription>,
followedTags?: Array<Tag>,
showIndividualTags?: boolean,
showNsfw?: boolean
) {
const isLargeScreen = useIsLargeScreen();
function getPageSize(originalSize) {
return isLargeScreen ? originalSize * (3 / 2) : originalSize;
}
// $FlowFixMe
let rowData: Array<RowDataItem> = [];
const individualTagDataItems: Array<RowDataItem> = [];
const YOUTUBER_CHANNEL_IDS = [
'fb364ef587872515f545a5b4b3182b58073f230f',
'589276465a23c589801d874f484cc39f307d7ec7',
'ba79c80788a9e1751e49ad401f5692d86f73a2db',
'b6e207c5f8c58e7c8362cd05a1501bf2f5b694f2',
'c5724e280283cd985186af9a62494aae377daabd',
'243b6f18093ff97c861d0568c7d3379606201a4b',
'5b7c7a202201033d99e1be2930d290c127c0f4fe',
'c9da929d12afe6066acc89eb044b552f0d63782a',
'89985db232ec2a9a31dbd985196de817da223fe6',
'187bf3616318b4bfb85223fc40724c307696f0c6',
'aa3db8d2145340e26597b88fbb6d0e7ff09786be',
'a9d289718f3f14e3d1fa8da7a7fcfdb6f40ae2d7',
'9a5dfcb1a4b29c3a1598392d039744b9938b5a26',
'0b998b98a2b9a88d9519739f99f2c74c95e3fc22',
'46be492ee0f56db11e005991c537c867a8682f77',
'c5cd9b63e2ba0abc191feae48238f464baecb147',
'4b602d7a3e268abb45951f623a109d2a131ab0ba',
'd25ae97a1516f5700fc717152b885f33da47f12b',
'8f4fecfc836ea33798ee3e5cef56926fa54e2cf9',
'8671dfd2f34302c1a4dcb4dd7361568a0bb23eba',
'b9288432bd089c6f332145aab08a56eec155f307',
'87b13b074936b1f42a7c6758c7c2995f58c602e7',
'25f384bd95e218f6ac37fcaca99ed40f36760d8c',
'02c020b2fab7dd1fbd175c3b22947688c0a219e5',
'57dbc8fdc4d062e2824d8550861b380203539099',
'4e17d248adc0128afe969c2e1327e10afd9cb921',
'760da3ba3dd85830a843beaaed543a89b7a367e7',
'5a1b164d0a2e7adf1db08d7363ea1cb06c30cd74',
'c9da929d12afe6066acc89eb044b552f0d63782a',
'113515e893b8186595595e594ecc410bae50c026',
'5fbfcf517d3df749bd032a44c1946b2baa738ecb',
'74333143a3dcc001a5602aa524583fc75a013d75',
'0d4e104ffc0ff0a6c8701e67cf13760f4e0335a8',
'b924ac36b7499591f7929d9c4903de79b07b1cb9',
'13edd7e7e2fbaf845699cf2f8f0b1c095bacb05f',
'7b1c72ba903af4aecdc2595397a9cb91bb7f188d',
'6c0bf1fed2705d675da950a94e4af004ec975a06',
'f33657a2fcbab2dc3ce555d5d6728f8758af7bc7',
'26c9b54d7e47dc8f7dc847821b26fce3009ee1a0',
'1516361918bfd02ddd460489f438e153c918521c',
'd468989b4668bce7452fc3434a6dc7ba7d799378',
'a1c8f84670da9a3371bc5832e86c8d32826b2f2e',
'70e56234217f30317c0e67fd0eede6e82b74aea0',
'7a88e0eabf60af5ac61240fe60f8f08fa3e48ab4',
'2f229d3ac26aa655c5123c29f1f7352403279ca3',
'7ea92a937f5755b40ac3d99ed37c53b40359b0a2',
'96ede5667bc4533ace8cfcbde4f33aa9fe1ae5f5',
'5097b175c4c58c431424ce3b60901de6ae650127',
'32de523ba228dd3f3159eb5a6cc07b6fd51f4dc0',
'cdb6fe516afe08618b91a754f92412e7f98a8a62',
'1e9f582c2df798228e8583fe1101fee551487d4b',
'b032695b52a78e0f5251b8d7f2f32183a5985d19',
'c042155dfcb5c813345248bff18a62d0f585718e',
'294f5c164da5ac9735658b2d58d8fee6745dfc45',
'07e4546674268fc0222b2ca22d31d0549dc217ee',
'1487afc813124abbeb0629d2172be0f01ccec3bf',
'ac471128a5ed05b80365170b29997d860afa33b7',
'c101bac49ec048acca169fd6090e70f7488645b1',
'c9282bbb89d3f9f5f1d972a02f96a5f0f0f40df8',
'9576be30de21b3b755828314d6ccbbaa3334f43a',
'b12e255e9f84d8b4ed86343b27676dccbc8b6d8b',
'50ebba2b06908f93d7963b1c6826cc0fd6104477',
'84342ae85d216d5ffc0ef149a123aae649d5c253',
'80f78c4b8591390758b9e6303eaf9087180444ad',
'086d2bacf441cef45ff15b5afe163d0b03a9f7ea',
'5af39f818f668d8c00943c9326c5201c4fe3c423',
'057053dfb657aaa98553e2c544b06e1a2371557e',
'fd1aee1d4858ec2ef6ccc3e60504c76e9d774386',
'930fc43ca7bae20d4706543e97175d1872b0671f',
'e715c457b4a3e51214b62f49f05303bba4ee5be9',
'ebf5bc6842638cefcf66904522ac96231ea7a9d8',
'1f9bb08bfa2259629f4aaa9ed40f97e9a41b6fa1',
'ac415179241e0cd8a14ed71175b759254d381137',
'8e098d2042ad9b9074f52cc06b89d6d4db5231dd',
'149c4686ff0792b8d68dac1f17b6273a85628d34',
'199eba05b6ecccab919e26a0cb7dacd544f25700',
'6569758308f12a66001e28f5e6056cb84334e69c',
'e50f82e2236274c54af762a9c2b897646477ef62',
'7e1a7afadc8734b33a3e219f5668470715fb063d',
'ff80e24f41a2d706c70df9779542cba4715216c9',
'e8f68563d242f6ac9784dcbc41dd86c28a9391d6',
];
const YOUTUBE_CREATOR_ROW = {
title: __('CableTube Escape Artists'),
link: `/$/${PAGES.DISCOVER}?${CS.CLAIM_TYPE}=${CS.CLAIM_STREAM}&${CS.CHANNEL_IDS_KEY}=${YOUTUBER_CHANNEL_IDS.join(
','
)}`,
options: {
claimType: ['stream'],
orderBy: ['release_time'],
pageSize: getPageSize(12),
channelIds: YOUTUBER_CHANNEL_IDS,
limitClaimsPerChannel: 1,
releaseTime: `>${Math.floor(moment().subtract(1, 'months').startOf('week').unix())}`,
},
};
const TOP_CONTENT_TODAY = {
title: __('Top Content from Today'),
link: `/$/${PAGES.DISCOVER}?${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_DAY}`,
options: {
pageSize: getPageSize(showPersonalizedChannels || showPersonalizedTags ? 4 : 8),
orderBy: ['effective_amount'],
claimType: ['stream'],
limitClaimsPerChannel: 2,
releaseTime: `>${Math.floor(moment().subtract(1, 'day').startOf('day').unix())}`,
},
};
const TOP_CHANNELS = {
title: __('Top Channels On LBRY'),
link: `/$/${PAGES.DISCOVER}?claim_type=channel&${CS.ORDER_BY_KEY}=${CS.ORDER_BY_TOP}&${CS.FRESH_KEY}=${CS.FRESH_ALL}`,
options: {
orderBy: ['effective_amount'],
claimType: ['channel'],
},
};
const LATEST_FROM_LBRY = {
title: __('Latest From @lbry'),
link: `/@lbry:3f`,
options: {
orderBy: ['release_time'],
pageSize: getPageSize(4),
channelIds: ['3fda836a92faaceedfe398225fb9b2ee2ed1f01a'],
},
};
if (isHomepage && showPersonalizedChannels && subscribedChannels) {
const RECENT_FROM_FOLLOWING = {
title: __('Recent From Following'),
link: `/$/${PAGES.CHANNELS_FOLLOWING}`,
icon: ICONS.SUBSCRIBE,
options: {
orderBy: CS.ORDER_BY_NEW_VALUE,
releaseTime:
subscribedChannels.length > 20
? `>${Math.floor(moment().subtract(9, 'months').startOf('week').unix())}`
: `>${Math.floor(moment().subtract(1, 'year').startOf('week').unix())}`,
pageSize: getPageSize(subscribedChannels.length > 3 ? (subscribedChannels.length > 6 ? 16 : 8) : 4),
streamTypes: CS.FILE_TYPES,
channelIds: subscribedChannels.map((subscription: Subscription) => {
const { channelClaimId } = parseURI(subscription.uri);
return channelClaimId;
}),
},
};
rowData.push(RECENT_FROM_FOLLOWING);
}
if (isHomepage && !CUSTOM_HOMEPAGE) {
if (followedTags) {
const TRENDING_FOR_TAGS = {
title: __('Trending For Your Tags'),
link: `/$/${PAGES.TAGS_FOLLOWING}`,
icon: ICONS.TAG,
options: {
pageSize: getPageSize(4),
tags: followedTags.map((tag) => tag.name),
claimType: ['stream'],
limitClaimsPerChannel: 2,
},
};
followedTags.forEach((tag: Tag) => {
const tagName = `#${toCapitalCase(tag.name)}`;
individualTagDataItems.push({
title: __('Trending for %tagName%', { tagName: tagName }),
link: `/$/${PAGES.DISCOVER}?t=${tag.name}`,
options: {
pageSize: 4,
tags: [tag.name],
claimType: ['stream'],
},
});
});
if (showPersonalizedTags && !showIndividualTags) rowData.push(TRENDING_FOR_TAGS);
if (showPersonalizedTags && showIndividualTags) {
individualTagDataItems.forEach((item: RowDataItem) => {
rowData.push(item);
});
}
}
}
if (!CUSTOM_HOMEPAGE) {
if (!authenticated) {
rowData.push(YOUTUBE_CREATOR_ROW);
}
rowData.push(TOP_CONTENT_TODAY);
rowData.push(LATEST_FROM_LBRY);
if (!showPersonalizedChannels) rowData.push(TOP_CHANNELS);
}
(Object.values(all): any).map((row) => rowData.push(getHomepageRowForCat(row)));
return rowData;
}

9
ui/util/comments.js
View file

@ -10,11 +10,10 @@ type SortProps = {
reactionsById: {},
sort: string,
isMyComment: (string) => boolean,
justCommented: Array<string>,
};
export function sortComments(sortProps: SortProps): Array<Comment> {
const { comments, reactionsById, sort, isMyComment, justCommented } = sortProps;
const { comments, reactionsById, sort, isMyComment } = sortProps;
if (!comments) return [];
@ -29,12 +28,10 @@ export function sortComments(sortProps: SortProps): Array<Comment> {
const aIsMine = isMyComment(a.channel_id);
const bIsMine = isMyComment(b.channel_id);
const aIsMyRecent = justCommented.includes(a.comment_id);
const bIsMyRecent = justCommented.includes(b.comment_id);
if (aIsMine && justCommented.length && aIsMyRecent) {
if (aIsMine) {
return -1;
} else if (bIsMine && justCommented.length && bIsMyRecent) {
} else if (bIsMine) {
return 1;
}

9
web/component/pixel/index.js Normal file
View file

@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { selectUserVerifiedEmail } from 'redux/selectors/user';
import Pixel from './view';
const select = (state) => ({
isAuthenticated: Boolean(selectUserVerifiedEmail(state)),
});
export default connect(select)(Pixel);

42
web/component/pixel/view.jsx Normal file
View file

@ -0,0 +1,42 @@
// @flow
import React from 'react';
import { SIMPLE_SITE } from 'config';
import { useIsMobile } from 'effects/use-screensize';
type Props = {
type: string,
isAuthenticated: boolean,
};
const Pixel = (props: Props) => {
const { type, isAuthenticated } = props;
const isMobile = useIsMobile();
// TODO: restrict to country
if (!SIMPLE_SITE || isMobile || isAuthenticated) {
return null;
}
if (type === 'retargeting') {
return (
<>
<img
src="https://ctrack.trafficjunky.net/ctrack?action=list&type=add&id=0&context=Odysee&cookiename=RetargetingPixel&age=44000&maxcookiecount=10"
alt=""
/>
</>
);
} else if (type === 'kill') {
return (
<>
<img
src="https://ctrack.trafficjunky.net/ctrack?action=list&type=add&id=0&context=Odysee&cookiename=KillPixel&age=0&maxcookiecount=10"
alt=""
/>
</>
);
} else {
return null;
}
};
export default Pixel;

13
web/src/getHomepageJSON.js Normal file
View file

@ -0,0 +1,13 @@
const memo = {};
// this didn't seem to help.
if (!memo.homepageData) {
try {
memo.homepageData = require('../../custom/homepages/v2');
} catch (err) {
console.log('homepage data failed');
}
}
const getHomepageJSON = () => {
return memo.homepageData || {};
};
module.exports = { getHomepageJSON };

26
web/src/routes.js
View file

@ -1,10 +1,10 @@
const { getHtml } = require('./html');
const { getRss } = require('./rss');
const { getHomepageJSON } = require('./getHomepageJSON');
const { generateStreamUrl } = require('../../ui/util/web');
const fetch = require('node-fetch');
const Router = require('@koa/router');
const fs = require('fs');
const path = require('path');
const { CUSTOM_HOMEPAGE } = require('../../config.js');
// So any code from 'lbry-redux'/'lbryinc' that uses `fetch` can be run on the server
global.fetch = fetch;
@ -24,18 +24,28 @@ const rssMiddleware = async (ctx) => {
ctx.body = xml;
};
router.get(`/$/api/content/get`, async (ctx) => {
router.get(`/$/api/content/v1/get`, async (ctx) => {
if (!CUSTOM_HOMEPAGE) {
ctx.status = 404;
ctx.body = {
message: 'Not Found',
};
} else {
let content;
try {
content = await fs.readFileSync(path.join(__dirname, '../../custom/content/test.json'), 'utf-8');
} catch (e) {
content = await fs.readFileSync(path.join(__dirname, '../../custom/content/default.json'), 'utf-8');
}
content = getHomepageJSON();
ctx.set('Content-Type', 'application/json');
ctx.body = {
status: 'success',
data: content,
};
} catch (err) {
ctx.status = err.statusCode || err.status || 500;
ctx.body = {
message: err.message,
};
}
}
});
router.get(`/$/download/:claimName/:claimId`, async (ctx) => {

8
webpack.base.config.js
View file

@ -44,9 +44,9 @@ let baseConfig = {
{ loader: 'postcss-loader',
options: {
plugins: function () {
return [ require( 'postcss-rtl' )() ]
}
}
return [ require('postcss-rtl')() ];
},
},
},
{ loader: 'sass-loader'},
],
@ -76,7 +76,7 @@ let baseConfig = {
alias: {
config: path.resolve(__dirname, 'config.js'),
homepage: 'util/homepage.js',
homepages: process.env.CUSTOM_HOMEPAGE === 'true' ? path.resolve(__dirname, 'custom/homepages/index.js') : ('homepages/index.js'),
homepages: process.env.CUSTOM_HOMEPAGE === 'true' ? path.resolve(__dirname, 'custom/homepages/v2/index.js') : ('homepages/index.js'),
lbryinc: 'lbryinc/dist/bundle.es.js',
// Build optimizations for 'redux-persist-transform-filter'
'redux-persist-transform-filter': 'redux-persist-transform-filter/index.js',