.env.ody

@@ -0,0 +1,92 @@
+# Copy this file to .env to make modifications
+
+# Base config
+
+WEBPACK_WEB_PORT=9090
+WEBPACK_ELECTRON_PORT=9091
+WEB_SERVER_PORT=1337
+
+WELCOME_VERSION=1.0
+
+# Custom Site info
+DOMAIN=lbry.tv
+URL=https://lbry.tv
+
+# UI
+SITE_TITLE=lbry.tv
+SITE_NAME=local.lbry.tv
+SITE_DESCRIPTION=Meet LBRY, an open, free, and community-controlled content wonderland.
+LOGO_TITLE=local.lbry.tv
+
+##### ODYSEE SETTINGS #######
+
+MATOMO_URL=https://analytics.lbry.com/
+MATOMO_ID=4
+
+# Base config
+WEBPACK_WEB_PORT=9090
+WEBPACK_ELECTRON_PORT=9091
+WEB_SERVER_PORT=1337
+
+## APIS
+LBRY_API_URL=https://api.odysee.com
+#LBRY_WEB_API=https://api.na-backend.odysee.com
+#LBRY_WEB_STREAMING_API=https://cdn.lbryplayer.xyz
+# deprecated:
+#LBRY_WEB_BUFFER_API=https://collector-service.api.lbry.tv/api/v1/events/video
+#COMMENT_SERVER_API=https://comments.lbry.com/api/v2
+WELCOME_VERSION=1.0
+
+# STRIPE
+STRIPE_PUBLIC_KEY='pk_live_e8M4dRNnCCbmpZzduEUZBgJO'
+
+## UI
+
+LOADING_BAR_COLOR=#e50054
+
+# IMAGE ASSETS
+YRBL_HAPPY_IMG_URL=https://spee.ch/spaceman-happy:a.png
+YRBL_SAD_IMG_URL=https://spee.ch/spaceman-sad:d.png
+LOGIN_IMG_URL=https://spee.ch/login:b.png
+LOGO=https://spee.ch/odysee-logo-png:3.png
+LOGO_TEXT_LIGHT=https://spee.ch/odysee-white-png:f.png
+LOGO_TEXT_DARK=https://spee.ch/odysee-png:2.png
+AVATAR_DEFAULT=https://spee.ch/spaceman-png:2.png
+FAVICON=https://spee.ch/favicon-png:c.png
+
+# LOCALE
+DEFAULT_LANGUAGE=en
+
+## LINKED CONTENT WHITELIST
+KNOWN_APP_DOMAINS=open.lbry.com,lbry.tv,lbry.lat,odysee.com
+
+## CUSTOM CONTENT
+# If the following is true, copy custom/homepage.example.js to custom/homepage.js and modify
+CUSTOM_HOMEPAGE=true
+
+# Add channels to auto-follow on firstrun (space delimited)
+AUTO_FOLLOW_CHANNELS=lbry://@Odysee#80d2590ad04e36fb1d077a9b9e3a8bba76defdf8 lbry://@OdyseeHelp#b58dfaeab6c70754d792cdd9b56ff59b90aea334
+
+## FEATURES AND LIMITS
+SIMPLE_SITE=true
+BRANDED_SITE=odysee
+# SIMPLE_SITE REPLACEMENTS
+ENABLE_MATURE=false
+ENABLE_UI_NOTIFICATIONS=true
+ENABLE_WILD_WEST=true
+SHOW_TAGS_INTRO=false
+
+# CENTRALIZED FEATURES
+ENABLE_COMMENT_REACTIONS=true
+ENABLE_FILE_REACTIONS=true
+ENABLE_CREATOR_REACTIONS=true
+ENABLE_NO_SOURCE_CLAIMS=true
+ENABLE_PREROLL_ADS=false
+SHOW_ADS=true
+
+CHANNEL_STAKED_LEVEL_VIDEO_COMMENTS=4
+CHANNEL_STAKED_LEVEL_LIVESTREAM=3
+WEB_PUBLISH_SIZE_LIMIT_GB=4
+
+#SEARCH TYPES - comma-delimited
+LIGHTHOUSE_DEFAULT_TYPES=audio,video

.flowconfig

@@ -41,5 +41,14 @@ module.name_mapper='^web\/component\(.*\)$' -> '<PROJECT_ROOT>/web/component\1'
 module.name_mapper='^web\/effects\(.*\)$' -> '<PROJECT_ROOT>/web/effects\1'
 module.name_mapper='^web\/page\(.*\)$' -> '<PROJECT_ROOT>/web/page\1'
 module.name_mapper='^homepage\(.*\)$' -> '<PROJECT_ROOT>/ui/util/homepage\1'
+module.name_mapper='^scss\/component\(.*\)$' -> '<PROJECT_ROOT>/ui/scss/component/\1'
+
+; Extensions
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+module.file_ext=.css
+module.file_ext=.scss
+
 
 [strict]

.gitignore

@@ -33,6 +33,6 @@ package-lock.json
 !/custom/robots.disallowall
 !/custom/robots.allowall
 .env
-.env.ody
+!.env.ody
 .env.desktop
 .env.lbrytv

CHANGELOG.md

@@ -12,6 +12,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added "Shuffle" option on Lists ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added Play Next/Previous buttons (with shortcuts SHIFT+N/SHIFT+P) ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Added separate control for autoplay next on video player ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
+- Added Channel Mention selection ability while creating a comment ([#7151](https://github.com/lbryio/lbry-desktop/pull/7151))
 
 ### Changed
 - Changing the supported language from Filipino to Tagalog _community pr!_ ([#6951](https://github.com/lbryio/lbry-desktop/pull/6951))
@@ -22,7 +23,9 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Clicking on the title of a floating player will take you back to the list ([#6921](https://github.com/lbryio/lbry-desktop/pull/6921))
 - Fix floating player stopping on markdown or image files ([#7073](https://github.com/lbryio/lbry-desktop/pull/7073))
 - Fix list thumbnail upload ([#7074](https://github.com/lbryio/lbry-desktop/pull/7074))
-- Stream Key is now hidden. ([#7127](https://github.com/lbryio/lbry-desktop/pull/7127))
+- Stream Key is now hidden _community pr!_ ([#7127](https://github.com/lbryio/lbry-desktop/pull/7127))
+- Fix playlist preview thumbnail ([#7178](https://github.com/lbryio/lbry-desktop/pull/7178)
+- Fixed “Your Account” popup on mobile ([#7172](https://github.com/lbryio/lbry-desktop/pull/7172))
 
 ## [0.51.2] - [2021-08-20]
 
@@ -1956,4 +1959,4 @@ This release includes a breaking change that will reset many of your settings. T
 
 - Use local file for publishing
 - Use local file and html5 for video playback
-- Misc changes needed to make UI compatible with electron.
+- Misc changes needed to make UI compatible with electron.

flow-typed/Comment.js

@@ -43,6 +43,7 @@ declare type CommentsState = {
   linkedCommentAncestors: { [string]: Array<string> }, // {"linkedCommentId": ["parentId", "grandParentId", ...]}
   pinnedCommentsById: {}, // ClaimId -> array of pinned comment IDs
   isLoading: boolean,
+  isLoadingById: boolean,
   isLoadingByParentId: { [string]: boolean },
   myComments: ?Set<string>,
   isFetchingReacts: boolean,
@@ -110,14 +111,14 @@ declare type ReactionListResponse = {
 declare type CommentListParams = {
   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
+  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,
+  sort_by?: number,         // @see: ui/constants/comments.js::SORT_BY
 };
 
 declare type CommentListResponse = {

flow-typed/livestream.js

@@ -24,4 +24,18 @@ declare type LivestreamReplayData = Array<LivestreamReplayItem>;
 declare type LivestreamState = {
   fetchingById: {},
   viewersById: {},
+  fetchingActiveLivestreams: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  activeLivestreamsLastFetchedDate: number,
+  activeLivestreamsLastFetchedOptions: {},
+}
+
+declare type LivestreamInfo = {
+  [/* creatorId */ string]: {
+    live: boolean,
+    viewCount: number,
+    creatorId: string,
+    latestClaimId: string,
+    latestClaimUri: string,
+  }
 }

package.json

@@ -37,6 +37,7 @@
     "build": "cross-env NODE_ENV=production yarn compile:electron && electron-builder build",
     "build:dir": "yarn build -- --dir -c.compression=store -c.mac.identity=null",
     "crossenv": "./node_modules/cross-env/dist/bin/cross-env",
+    "flow": "flow",
     "lint": "eslint 'ui/**/*.{js,jsx}' && eslint 'web/**/*.{js,jsx}' && eslint 'electron/**/*.js' && flow",
     "lint-fix": "eslint --fix --quiet 'ui/**/*.{js,jsx}' && eslint --fix --quiet 'web/**/*.{js,jsx}' && eslint --fix --quiet 'electron/**/*.js'",
     "format": "prettier 'src/**/*.{js,jsx,scss,json}' --write",

static/app-strings.json

@@ -51,7 +51,6 @@
   "Description of your content": "Description of your content",
   "Price": "Price",
   "Free": "Free",
-  "Learn more": "Learn more",
   "Name": "Name",
   "Deposit": "Deposit",
   "Language": "Language",
@@ -103,7 +102,6 @@
   "Enter a URL for your thumbnail.": "Enter a URL for your thumbnail.",
   "Thumbnail Preview": "Thumbnail Preview",
   "Use thumbnail upload tool": "Use thumbnail upload tool",
-  "Thumbnails that entice a viewer to watch a video work best": "Thumbnails that entice a viewer to watch a video work best",
   "Create a URL for this content. Simpler names are easier to find and remember.": "Create a URL for this content. Simpler names are easier to find and remember.",
   "Open file": "Open file",
   "Delete": "Delete",
@@ -175,7 +173,6 @@
   "Continue": "Continue",
   "This file has been shared with you by other people.": "This file has been shared with you by other people.",
   "LBRY Inc is not responsible for its content, click continue to proceed at your own risk.": "LBRY Inc is not responsible for its content, click continue to proceed at your own risk.",
-  "Find what you were looking for?": "Find what you were looking for?",
   "Yes": "Yes",
   "No": "No",
   "These search results are provided by LBRY, Inc.": "These search results are provided by LBRY, Inc.",
@@ -207,8 +204,14 @@
   "View": "View",
   "Edit": "Edit",
   "Copied": "Copied",
+  "Copied stream key.": "Copied stream key.",
+  "Copied stream server URL.": "Copied stream server URL.",
+  "Failed to copy.": "Failed to copy.",
   "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.": "The publisher has chosen to charge %lbc% to view this content. Your balance is currently too low to view it. Check out %reward_link% for free %lbc% or send more %lbc% to your wallet. You can also %buy_link% more %lbc%.",
   "Connecting...": "Connecting...",
+  "Your comments": "Your comments",
+  "View your past comments.": "View your past comments.",
+  "Content or channel was deleted.": "Content or channel was deleted.",
   "Comments": "Comments",
   "Comment": "Comment",
   "Comment --[button to submit something]--": "Comment",
@@ -314,6 +317,8 @@
   "Confirm Thumbnail Upload": "Confirm Thumbnail Upload",
   "Upload": "Upload",
   "upload": "upload",
+  "Your uploads": "Your uploads",
+  "Invalid thumbnail": "Invalid thumbnail",
   "Uploading thumbnail": "Uploading thumbnail",
   "Please wait for thumbnail to finish uploading": "Please wait for thumbnail to finish uploading",
   "A thumbnail is required. Please upload or provide an image URL above.": "A thumbnail is required. Please upload or provide an image URL above.",
@@ -538,6 +543,7 @@
   "Create a new account or sign in.": "Create a new account or sign in.",
   "Terms of Service": "Terms of Service",
   "Learn More": "Learn More",
+  "Learn more": "Learn more",
   "Community": "Community",
   "Resources": "Resources",
   "Policies": "Policies",
@@ -780,6 +786,7 @@
   "There was an error reposting this claim. Please try again later.": "There was an error reposting this claim. Please try again later.",
   "Claim ID": "Claim ID",
   "Official YouTube Creator": "Official YouTube Creator",
+  "YouTube Sync": "YouTube Sync",
   "Last checked %time_ago%": "Last checked %time_ago%",
   "Install Now": "Install Now",
   "Invite Link": "Invite Link",
@@ -1397,8 +1404,8 @@
   "Gaming": "Gaming",
   "Game": "Game",
   "Nice People": "Nice People",
-  "Tech": "Tech",
   "Lab": "Lab",
+  "Tech": "Tech",
   "Technology": "Technology",
   "Movies": "Movies",
   "News": "News",
@@ -1456,6 +1463,7 @@
   "Staked LBRY Credits": "Staked LBRY Credits",
   "1 comment": "1 comment",
   "%total_comments% comments": "%total_comments% comments",
+  "No comments": "No comments",
   "Upvote": "Upvote",
   "Downvote": "Downvote",
   "You loved this": "You loved this",
@@ -1752,12 +1760,8 @@
   "Moderator": "Moderator",
   "Global Unblock Channel": "Global Unblock Channel",
   "Global Block Channel": "Global Block Channel",
-  "Moderator tools": "Moderator tools",
+  "Block this channel on behalf of %creator%.": "Block this channel on behalf of %creator%.",
-  "Global Block": "Global Block",
+  "Block this channel on behalf of the creator.": "Block this channel on behalf of the creator.",
-  "Block this channel as global admin": "Block this channel as global admin",
-  "Moderator Block": "Moderator Block",
-  "Block this channel on behalf of %creator%": "Block this channel on behalf of %creator%",
-  "creator": "creator",
   "Enter the timeout duration. Examples: %examples%": "Enter the timeout duration. Examples: %examples%",
   "Wow, banned for more than 100 years?": "Wow, banned for more than 100 years?",
   "Invalid duration.": "Invalid duration.",
@@ -1775,12 +1779,15 @@
   "Moderators": "Moderators",
   "Moderators can block channels on your behalf. Blocked channels will appear in your \"Blocked and Muted\" list.": "Moderators can block channels on your behalf. Blocked channels will appear in your \"Blocked and Muted\" list.",
   "Add as moderator": "Add as moderator",
-  "Assign this user to moderate %channel%": "Assign this user to moderate %channel%",
+  "Assign this user to moderate %channel%.": "Assign this user to moderate %channel%.",
+  "Assign this user to moderate your channel.": "Assign this user to moderate your channel.",
   "Mute (m)": "Mute (m)",
   "Playback Rate (<, >)": "Playback Rate (<, >)",
   "Fullscreen (f)": "Fullscreen (f)",
   "Pause (space)": "Pause (space)",
   "Play (space)": "Play (space)",
+  "Play Next (SHIFT+N)": "Play Next (SHIFT+N)",
+  "Play Previous (SHIFT+P)": "Play Previous (SHIFT+P)",
   "Unmute (m)": "Unmute (m)",
   "Exit Fullscreen (f)": "Exit Fullscreen (f)",
   "Theater Mode (t)": "Theater Mode (t)",
@@ -2108,6 +2115,7 @@
   "Manage Card": "Manage Card",
   "Card Details": "Card Details",
   "Remove Card": "Remove Card",
+  "Sorry, there was an error in processing your payment!": "Sorry, there was an error in processing your payment!",
   "Congratulations! Your account has been connected with Odysee.": "Congratulations! Your account has been connected with Odysee.",
   "Your account balance is %balance% USD. Functionality to view your transactions and withdraw your balance will be landing shortly.": "Your account balance is %balance% USD. Functionality to view your transactions and withdraw your balance will be landing shortly.",
   "Your account balance is $0 USD. When you receive a tip you will see it here.": "Your account balance is $0 USD. When you receive a tip you will see it here.",
@@ -2137,11 +2145,8 @@
   "%title% by %channelTitle%": "%title% by %channelTitle%",
   "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%",
   "%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%",
-  "Collapse Thread": "Collapse Thread",
   "Collapse": "Collapse",
-  "Expand Comments": "Expand Comments",
   "Expand": "Expand",
-  "Load More": "Load More",
   "%formattedSubCount% Followers": "%formattedSubCount% Followers",
   "1 Follower": "1 Follower",
   "Collection": "Collection",
@@ -2170,5 +2175,20 @@
   "Card Last 4": "Card Last 4",
   "Search blocked channel name": "Search blocked channel name",
   "Discuss": "Discuss",
+  "Play Next (SHIFT+N)": "Play Next (SHIFT+N)",
+  "Play Previous (SHIFT+P)": "Play Previous (SHIFT+P)",
+  "Finance": "Finance",
+  "You followed @veritasium!": "You followed @veritasium!",
+  "Downloading": "Downloading",
+  "Do you cancel download this file?": "Do you cancel download this file?",
+  "%remainingMinutes% minutes %remainSecond% seconds remaining": "%remainingMinutes% minutes %remainSecond% seconds remaining",
+  "%remainSecond% seconds remaining": "%remainSecond% seconds remaining",
+  "%written% of %total%": "%written% of %total%",
+  "(%speed%/sec)": "(%speed%/sec)",
+  "lbry.tv has been retired. You have been magically transported to Odysee.com. %more%": "lbry.tv has been retired. You have been magically transported to Odysee.com. %more%",
+  "Show more livestreams": "Show more livestreams",
+  "Creator": "Creator",
+  "From comments": "From comments",
+  "From search": "From search",
   "--end--": "--end--"
 }

static/index-web.html

@@ -13,6 +13,8 @@
     <link rel="preload" href="/public/font/v1/700.woff" as="font" type="font/woff" crossorigin />
     <link rel="preload" href="/public/font/v1/700i.woff" as="font" type="font/woff" crossorigin />
 
+    <link rel="shortcut icon" href="/public/favicon-spaceman.png">
+
     <style>
       @font-face {
         font-family: 'Inter';

ui/component/channelContent/view.jsx

@@ -56,7 +56,8 @@ function ChannelContent(props: Props) {
     claimType,
     empty,
   } = props;
-  const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+  // const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;
+  const claimsInChannel = 9999;
   const [searchQuery, setSearchQuery] = React.useState('');
   const [searchResults, setSearchResults] = React.useState(undefined);
   const {

ui/component/channelDiscussion/view.jsx

@@ -17,7 +17,7 @@ function ChannelDiscussion(props: Props) {
   }
   return (
     <section className="section">
-      <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
+      <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
     </section>
   );
 }

ui/component/channelMentionSuggestion/index.js

@@ -0,0 +1,10 @@
+import { connect } from 'react-redux';
+import { makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import ChannelMentionSuggestion from './view';
+
+const select = (state, props) => ({
+  claim: makeSelectClaimForUri(props.uri)(state),
+  isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+});
+
+export default connect(select)(ChannelMentionSuggestion);

ui/component/channelMentionSuggestion/view.jsx

@@ -0,0 +1,32 @@
+// @flow
+import { ComboboxOption } from '@reach/combobox';
+import ChannelThumbnail from 'component/channelThumbnail';
+import React from 'react';
+
+type Props = {
+  claim: ?Claim,
+  uri?: string,
+  isResolvingUri: boolean,
+};
+
+export default function ChannelMentionSuggestion(props: Props) {
+  const { claim, uri, isResolvingUri } = props;
+
+  return !claim ? null : (
+    <ComboboxOption value={uri}>
+      {isResolvingUri ? (
+        <div className="channel-mention__suggestion">
+          <div className="media__thumb media__thumb--resolving" />
+        </div>
+      ) : (
+        <div className="channel-mention__suggestion">
+          <ChannelThumbnail xsmall uri={uri} />
+          <span className="channel-mention__suggestion-label">
+            <div className="channel-mention__suggestion-title">{(claim.value && claim.value.title) || claim.name}</div>
+            <div className="channel-mention__suggestion-name">{claim.name}</div>
+          </span>
+        </div>
+      )}
+    </ComboboxOption>
+  );
+}

ui/component/channelMentionSuggestions/index.js

@@ -0,0 +1,36 @@
+import { connect } from 'react-redux';
+import { selectShowMatureContent } from 'redux/selectors/settings';
+import { selectSubscriptions } from 'redux/selectors/subscriptions';
+import { withRouter } from 'react-router';
+import { doResolveUris, makeSelectClaimForUri } from 'lbry-redux';
+import { makeSelectTopLevelCommentsForUri } from 'redux/selectors/comments';
+import ChannelMentionSuggestions from './view';
+
+const select = (state, props) => {
+  const subscriptionUris = selectSubscriptions(state).map(({ uri }) => uri);
+  const topLevelComments = makeSelectTopLevelCommentsForUri(props.uri)(state);
+
+  const commentorUris = [];
+  // Avoid repeated commentors
+  topLevelComments.map(({ channel_url }) => !commentorUris.includes(channel_url) && commentorUris.push(channel_url));
+
+  const getUnresolved = (uris) =>
+    uris.map((uri) => !makeSelectClaimForUri(uri)(state) && uri).filter((uri) => uri !== false);
+  const getCanonical = (uris) =>
+    uris
+      .map((uri) => makeSelectClaimForUri(uri)(state) && makeSelectClaimForUri(uri)(state).canonical_url)
+      .filter((uri) => Boolean(uri));
+
+  return {
+    commentorUris,
+    subscriptionUris,
+    unresolvedCommentors: getUnresolved(commentorUris),
+    unresolvedSubscriptions: getUnresolved(subscriptionUris),
+    canonicalCreator: getCanonical([props.creatorUri])[0],
+    canonicalCommentors: getCanonical(commentorUris),
+    canonicalSubscriptions: getCanonical(subscriptionUris),
+    showMature: selectShowMatureContent(state),
+  };
+};
+
+export default withRouter(connect(select, { doResolveUris })(ChannelMentionSuggestions));

ui/component/channelMentionSuggestions/view.jsx

@@ -0,0 +1,285 @@
+// @flow
+import { Combobox, ComboboxInput, ComboboxPopover, ComboboxList } from '@reach/combobox';
+import { Form } from 'component/common/form';
+import { parseURI, regexInvalidURI } from 'lbry-redux';
+import { SEARCH_OPTIONS } from 'constants/search';
+import * as KEYCODES from 'constants/keycodes';
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import ChannelMentionTopSuggestion from 'component/channelMentionTopSuggestion';
+import React from 'react';
+import Spinner from 'component/spinner';
+import type { ElementRef } from 'react';
+import useLighthouse from 'effects/use-lighthouse';
+
+const INPUT_DEBOUNCE_MS = 1000;
+const LIGHTHOUSE_MIN_CHARACTERS = 3;
+
+type Props = {
+  inputRef: any,
+  mentionTerm: string,
+  noTopSuggestion?: boolean,
+  showMature: boolean,
+  isLivestream: boolean,
+  creatorUri: string,
+  commentorUris: Array<string>,
+  subscriptionUris: Array<string>,
+  unresolvedCommentors: Array<string>,
+  unresolvedSubscriptions: Array<string>,
+  canonicalCreator: string,
+  canonicalCommentors: Array<string>,
+  canonicalSubscriptions: Array<string>,
+  doResolveUris: (Array<string>) => void,
+  customSelectAction?: (string, number) => void,
+};
+
+export default function ChannelMentionSuggestions(props: Props) {
+  const {
+    unresolvedCommentors,
+    unresolvedSubscriptions,
+    canonicalCreator,
+    isLivestream,
+    creatorUri,
+    inputRef,
+    showMature,
+    noTopSuggestion,
+    mentionTerm,
+    doResolveUris,
+    customSelectAction,
+  } = props;
+  const comboboxInputRef: ElementRef<any> = React.useRef();
+  const comboboxListRef: ElementRef<any> = React.useRef();
+
+  const mainEl = document.querySelector('.channel-mention__suggestions');
+
+  const [debouncedTerm, setDebouncedTerm] = React.useState('');
+  const [mostSupported, setMostSupported] = React.useState('');
+  const [canonicalResults, setCanonicalResults] = React.useState([]);
+
+  const isRefFocused = (ref) => ref && ref.current === document.activeElement;
+
+  const subscriptionUris = props.subscriptionUris.filter((uri) => uri !== creatorUri);
+  const canonicalSubscriptions = props.canonicalSubscriptions.filter((uri) => uri !== canonicalCreator);
+  const commentorUris = props.commentorUris.filter((uri) => uri !== creatorUri && !subscriptionUris.includes(uri));
+  const canonicalCommentors = props.canonicalCommentors.filter(
+    (uri) => uri !== canonicalCreator && !canonicalSubscriptions.includes(uri)
+  );
+
+  const termToMatch = mentionTerm && mentionTerm.replace('@', '').toLowerCase();
+  const allShownUris = [creatorUri, ...subscriptionUris, ...commentorUris];
+  const allShownCanonical = [canonicalCreator, ...canonicalSubscriptions, ...canonicalCommentors];
+  const possibleMatches = allShownUris.filter((uri) => {
+    try {
+      const { channelName } = parseURI(uri);
+      return channelName.toLowerCase().includes(termToMatch);
+    } catch (e) {}
+  });
+
+  const searchSize = 5;
+  const additionalOptions = { isBackgroundSearch: false, [SEARCH_OPTIONS.CLAIM_TYPE]: SEARCH_OPTIONS.INCLUDE_CHANNELS };
+  const { results, loading } = useLighthouse(debouncedTerm, showMature, searchSize, additionalOptions, 0);
+  const stringifiedResults = JSON.stringify(results);
+
+  const hasMinLength = mentionTerm && mentionTerm.length >= LIGHTHOUSE_MIN_CHARACTERS;
+  const isTyping = debouncedTerm !== mentionTerm;
+  const showPlaceholder = isTyping || loading;
+
+  const isUriFromTermValid = !regexInvalidURI.test(mentionTerm.substring(1));
+
+  const handleSelect = React.useCallback(
+    (value, key) => {
+      if (customSelectAction) {
+        // Give them full results, as our resolved one might truncate the claimId.
+        customSelectAction(value || (results && results.find((r) => r.startsWith(value))) || '', Number(key));
+      }
+    },
+    [customSelectAction, results]
+  );
+
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (isTyping) setDebouncedTerm(!hasMinLength ? '' : mentionTerm);
+    }, INPUT_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [hasMinLength, isTyping, mentionTerm]);
+
+  React.useEffect(() => {
+    if (!mainEl) return;
+    const header = document.querySelector('.header__navigation');
+
+    function handleReflow() {
+      const boxAtTopOfPage = header && mainEl.getBoundingClientRect().top <= header.offsetHeight;
+      const boxAtBottomOfPage = mainEl.getBoundingClientRect().bottom >= window.innerHeight;
+
+      if (boxAtTopOfPage) {
+        mainEl.setAttribute('flow-bottom', '');
+      }
+      if (mainEl.getAttribute('flow-bottom') !== null && boxAtBottomOfPage) {
+        mainEl.removeAttribute('flow-bottom');
+      }
+    }
+    handleReflow();
+
+    window.addEventListener('scroll', handleReflow);
+    return () => window.removeEventListener('scroll', handleReflow);
+  }, [mainEl]);
+
+  React.useEffect(() => {
+    if (!inputRef || !comboboxInputRef || !mentionTerm) return;
+
+    function handleKeyDown(event) {
+      const { keyCode } = event;
+      const activeElement = document.activeElement;
+
+      if (keyCode === KEYCODES.UP || keyCode === KEYCODES.DOWN) {
+        if (isRefFocused(comboboxInputRef)) {
+          const selectedId = activeElement && activeElement.getAttribute('aria-activedescendant');
+          const selectedItem = selectedId && document.querySelector(`li[id="${selectedId}"]`);
+          if (selectedItem) selectedItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+        } else {
+          // $FlowFixMe
+          comboboxInputRef.current.focus();
+        }
+      } else {
+        if ((isRefFocused(comboboxInputRef) || isRefFocused(inputRef)) && keyCode === KEYCODES.TAB) {
+          event.preventDefault();
+          const activeValue = activeElement && activeElement.getAttribute('value');
+
+          if (activeValue) {
+            handleSelect(activeValue, keyCode);
+          } else if (possibleMatches.length) {
+            // $FlowFixMe
+            const suggest = allShownCanonical.find((matchUri) => possibleMatches.find((uri) => uri.includes(matchUri)));
+            if (suggest) handleSelect(suggest, keyCode);
+          } else if (results) {
+            handleSelect(mentionTerm, keyCode);
+          }
+        }
+        if (isRefFocused(comboboxInputRef)) {
+          // $FlowFixMe
+          inputRef.current.focus();
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown);
+
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [allShownCanonical, handleSelect, inputRef, mentionTerm, possibleMatches, results]);
+
+  React.useEffect(() => {
+    if (!stringifiedResults) return;
+
+    const arrayResults = JSON.parse(stringifiedResults);
+    if (arrayResults && arrayResults.length > 0) {
+      // $FlowFixMe
+      doResolveUris(arrayResults).then((response) => {
+        try {
+          // $FlowFixMe
+          const canonical_urls = Object.values(response).map(({ canonical_url }) => canonical_url);
+          setCanonicalResults(canonical_urls);
+        } catch (e) {}
+      });
+    }
+  }, [doResolveUris, stringifiedResults]);
+
+  // Only resolve commentors on Livestreams when actually mentioning/looking for it
+  React.useEffect(() => {
+    if (isLivestream && unresolvedCommentors && mentionTerm) doResolveUris(unresolvedCommentors);
+  }, [doResolveUris, isLivestream, mentionTerm, unresolvedCommentors]);
+
+  // Only resolve the subscriptions that match the mention term, instead of all
+  React.useEffect(() => {
+    if (isTyping) return;
+
+    const urisToResolve = [];
+    subscriptionUris.map(
+      (uri) =>
+        hasMinLength &&
+        possibleMatches.includes(uri) &&
+        unresolvedSubscriptions.includes(uri) &&
+        urisToResolve.push(uri)
+    );
+
+    if (urisToResolve.length > 0) doResolveUris(urisToResolve);
+  }, [doResolveUris, hasMinLength, isTyping, possibleMatches, subscriptionUris, unresolvedSubscriptions]);
+
+  const suggestionsRow = (
+    label: string,
+    suggestions: Array<string>,
+    canonical: Array<string>,
+    hasSuggestionsBelow: boolean
+  ) => {
+    if (mentionTerm.length > 1 && suggestions !== results) {
+      suggestions = suggestions.filter((uri) => possibleMatches.includes(uri));
+    } else if (suggestions === results) {
+      suggestions = suggestions.filter((uri) => !allShownUris.includes(uri));
+    }
+    // $FlowFixMe
+    suggestions = suggestions
+      .map((matchUri) => canonical.find((uri) => matchUri.includes(uri)))
+      .filter((uri) => Boolean(uri));
+
+    if (canonical === canonicalResults) {
+      suggestions = suggestions.filter((uri) => uri !== mostSupported);
+    }
+
+    return !suggestions.length ? null : (
+      <>
+        <div className="channel-mention__label">{label}</div>
+        {suggestions.map((uri) => (
+          <ChannelMentionSuggestion key={uri} uri={uri} />
+        ))}
+        {hasSuggestionsBelow && <hr className="channel-mention__top-separator" />}
+      </>
+    );
+  };
+
+  return isRefFocused(inputRef) || isRefFocused(comboboxInputRef) ? (
+    <Form onSubmit={() => handleSelect(mentionTerm)}>
+      <Combobox className="channel-mention" onSelect={handleSelect}>
+        <ComboboxInput ref={comboboxInputRef} className="channel-mention__input--none" value={mentionTerm} />
+        {mentionTerm && isUriFromTermValid && (
+          <ComboboxPopover portal={false} className="channel-mention__suggestions">
+            <ComboboxList ref={comboboxListRef}>
+              {creatorUri &&
+                suggestionsRow(
+                  __('Creator'),
+                  [creatorUri],
+                  [canonicalCreator],
+                  canonicalSubscriptions.length > 0 || commentorUris.length > 0 || !showPlaceholder
+                )}
+              {canonicalSubscriptions.length > 0 &&
+                suggestionsRow(
+                  __('Following'),
+                  subscriptionUris,
+                  canonicalSubscriptions,
+                  commentorUris.length > 0 || !showPlaceholder
+                )}
+              {commentorUris.length > 0 &&
+                suggestionsRow(__('From comments'), commentorUris, canonicalCommentors, !showPlaceholder)}
+
+              {hasMinLength &&
+                (showPlaceholder ? (
+                  <Spinner type="small" />
+                ) : (
+                  results && (
+                    <>
+                      {!noTopSuggestion && (
+                        <ChannelMentionTopSuggestion
+                          query={debouncedTerm}
+                          shownUris={allShownCanonical}
+                          setMostSupported={(winningUri) => setMostSupported(winningUri)}
+                        />
+                      )}
+                      {suggestionsRow(__('From search'), results, canonicalResults, false)}
+                    </>
+                  )
+                ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </Form>
+  ) : null;
+}

ui/component/channelMentionTopSuggestion/index.js

@@ -0,0 +1,15 @@
+import { connect } from 'react-redux';
+import { makeSelectIsUriResolving, doResolveUri } from 'lbry-redux';
+import { makeSelectWinningUriForQuery } from 'redux/selectors/search';
+import ChannelMentionTopSuggestion from './view';
+
+const select = (state, props) => {
+  const uriFromQuery = `lbry://${props.query}`;
+  return {
+    uriFromQuery,
+    isResolvingUri: makeSelectIsUriResolving(uriFromQuery)(state),
+    winningUri: makeSelectWinningUriForQuery(props.query)(state),
+  };
+};
+
+export default connect(select, { doResolveUri })(ChannelMentionTopSuggestion);

ui/component/channelMentionTopSuggestion/view.jsx

@@ -0,0 +1,49 @@
+// @flow
+import ChannelMentionSuggestion from 'component/channelMentionSuggestion';
+import LbcSymbol from 'component/common/lbc-symbol';
+import React from 'react';
+
+type Props = {
+  uriFromQuery: string,
+  winningUri: string,
+  isResolvingUri: boolean,
+  shownUris: Array<string>,
+  setMostSupported: (string) => void,
+  doResolveUri: (string) => void,
+};
+
+export default function ChannelMentionTopSuggestion(props: Props) {
+  const { uriFromQuery, winningUri, isResolvingUri, shownUris, setMostSupported, doResolveUri } = props;
+
+  React.useEffect(() => {
+    if (uriFromQuery) doResolveUri(uriFromQuery);
+  }, [doResolveUri, uriFromQuery]);
+
+  React.useEffect(() => {
+    if (winningUri) setMostSupported(winningUri);
+  }, [setMostSupported, winningUri]);
+
+  if (isResolvingUri) {
+    return (
+      <div className="channel-mention__winning-claim">
+        <div className="channel-mention__label channel-mention__placeholder-label" />
+
+        <div className="channel-mention__suggestion channel-mention__placeholder-suggestion">
+          <div className="channel-mention__placeholder-thumbnail" />
+          <div className="channel-mention__placeholder-info" />
+        </div>
+        <hr className="channel-mention__top-separator" />
+      </div>
+    );
+  }
+
+  return !winningUri || shownUris.includes(winningUri) ? null : (
+    <>
+      <div className="channel-mention__label">
+        <LbcSymbol prefix={__('Most Supported')} />
+      </div>
+      <ChannelMentionSuggestion uri={winningUri} />
+      <hr className="channel-mention__top-separator" />
+    </>
+  );
+}

ui/component/claimLink/index.js

@@ -1,22 +1,33 @@
 import { connect } from 'react-redux';
-import { doResolveUri, makeSelectTitleForUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import { doResolveUri, makeSelectClaimForUri, makeSelectIsUriResolving } from 'lbry-redux';
+import { doSetPlayingUri } from 'redux/actions/content';
+import { punctuationMarks } from 'util/remark-lbry';
 import { selectBlackListedOutpoints } from 'lbryinc';
 import { selectPlayingUri } from 'redux/selectors/content';
-import { doSetPlayingUri } from 'redux/actions/content';
 import ClaimLink from './view';
 
 const select = (state, props) => {
+  let uri = props.uri;
+  let claim;
+
+  function getValidClaim(testUri) {
+    claim = makeSelectClaimForUri(testUri)(state);
+    if (claim === null && punctuationMarks.includes(testUri.charAt(testUri.length - 1))) {
+      getValidClaim(testUri.substring(0, testUri.length - 1));
+    } else {
+      uri = testUri;
+    }
+  }
+  getValidClaim(uri);
+
   return {
-    uri: props.uri,
+    uri,
-    claim: makeSelectClaimForUri(props.uri)(state),
+    claim,
-    title: makeSelectTitleForUri(props.uri)(state),
+    fullUri: props.uri,
-    isResolvingUri: makeSelectIsUriResolving(props.uri)(state),
+    isResolvingUri: makeSelectIsUriResolving(uri)(state),
     blackListedOutpoints: selectBlackListedOutpoints(state),
     playingUri: selectPlayingUri(state),
   };
 };
 
-export default connect(select, {
+export default connect(select, { doResolveUri, doSetPlayingUri })(ClaimLink);
-  doResolveUri,
-  doSetPlayingUri,
-})(ClaimLink);

ui/component/claimLink/view.jsx

@@ -1,14 +1,15 @@
 // @flow
-import * as React from 'react';
-import classnames from 'classnames';
-import EmbedPlayButton from 'component/embedPlayButton';
-import Button from 'component/button';
-import UriIndicator from 'component/uriIndicator';
 import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
 import { SIMPLE_SITE } from 'config';
+import * as React from 'react';
+import Button from 'component/button';
+import classnames from 'classnames';
+import EmbedPlayButton from 'component/embedPlayButton';
+import UriIndicator from 'component/uriIndicator';
 
 type Props = {
   uri: string,
+  fullUri: string,
   claim: StreamClaim,
   children: React.Node,
   description: ?string,
@@ -68,6 +69,7 @@ class ClaimLink extends React.Component<Props> {
   render() {
     const {
       uri,
+      fullUri,
       claim,
       children,
       isResolvingUri,
@@ -92,7 +94,10 @@ class ClaimLink extends React.Component<Props> {
     const isChannel = valueType === 'channel';
 
     return isChannel ? (
-      <UriIndicator uri={uri} link />
+      <>
+        <UriIndicator uri={uri} link />
+        <span>{fullUri.length > uri.length ? fullUri.substring(uri.length, fullUri.length) : ''}</span>
+      </>
     ) : allowPreview ? (
       <div className={classnames('claim-link')}>
         <div

ui/component/claimList/index.js

@@ -1,12 +1,10 @@
 import { connect } from 'react-redux';
 import ClaimList from './view';
-import { SETTINGS, selectClaimSearchByQuery, selectClaimsByUri } from 'lbry-redux';
+import { SETTINGS } from 'lbry-redux';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 const select = (state) => ({
   searchInLanguage: makeSelectClientSetting(SETTINGS.SEARCH_IN_LANGUAGE)(state),
-  claimSearchByQuery: selectClaimSearchByQuery(state),
-  claimsByUri: selectClaimsByUri(state),
 });
 
 export default connect(select)(ClaimList);

ui/component/claimList/view.jsx

@@ -9,7 +9,6 @@ import { FormField } from 'component/common/form';
 import usePersistedState from 'effects/use-persisted-state';
 import debounce from 'util/debounce';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import { prioritizeActiveLivestreams } from 'component/claimTilesDiscover/view';
 
 const DEBOUNCE_SCROLL_HANDLER_MS = 150;
 const SORT_NEW = 'new';
@@ -17,6 +16,7 @@ const SORT_OLD = 'old';
 
 type Props = {
   uris: Array<string>,
+  prefixUris?: Array<string>,
   header: Node | boolean,
   headerAltControls: Node,
   loading: boolean,
@@ -41,9 +41,6 @@ type Props = {
   hideMenu?: boolean,
   claimSearchByQuery: { [string]: Array<string> },
   claimsByUri: { [string]: any },
-  liveLivestreamsFirst?: boolean,
-  livestreamMap?: { [string]: any },
-  searchOptions?: any,
   collectionId?: string,
   showNoSourceClaims?: boolean,
   onClick?: (e: any, claim?: ?Claim, index?: number) => void,
@@ -53,6 +50,7 @@ export default function ClaimList(props: Props) {
   const {
     activeUri,
     uris,
+    prefixUris,
     headerAltControls,
     loading,
     persistedStorageKey,
@@ -73,37 +71,25 @@ export default function ClaimList(props: Props) {
     renderProperties,
     searchInLanguage,
     hideMenu,
-    claimSearchByQuery,
-    claimsByUri,
-    liveLivestreamsFirst,
-    livestreamMap,
-    searchOptions,
     collectionId,
     showNoSourceClaims,
     onClick,
   } = props;
 
   const [currentSort, setCurrentSort] = usePersistedState(persistedStorageKey, SORT_NEW);
+
+  // Exclude prefix uris in these results variables. We don't want to show
+  // anything if the search failed or timed out.
   const timedOut = uris === null;
   const urisLength = (uris && uris.length) || 0;
 
-  const liveUris = [];
+  const tileUris = (prefixUris || []).concat(uris);
-  if (liveLivestreamsFirst && livestreamMap) {
+  const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? tileUris : tileUris.slice().reverse())) || [];
-    prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, searchOptions);
-  }
 
-  const sortedUris = (urisLength > 0 && (currentSort === SORT_NEW ? uris : uris.slice().reverse())) || [];
   const noResultMsg = searchInLanguage
     ? __('No results. Contents may be hidden by the Language filter.')
     : __('No results');
 
-  const resolveLive = (index) => {
-    if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
-      return true;
-    }
-    return undefined;
-  };
-
   function handleSortChange() {
     setCurrentSort(currentSort === SORT_NEW ? SORT_OLD : SORT_NEW);
   }
@@ -138,13 +124,12 @@ export default function ClaimList(props: Props) {
   return tileLayout && !header ? (
     <section className="claim-grid">
       {urisLength > 0 &&
-        uris.map((uri, index) => (
+        tileUris.map((uri) => (
           <ClaimPreviewTile
             key={uri}
             uri={uri}
             showHiddenByUser={showHiddenByUser}
             properties={renderProperties}
-            live={resolveLive(index)}
             collectionId={collectionId}
             showNoSourceClaims={showNoSourceClaims}
           />
@@ -216,7 +201,6 @@ export default function ClaimList(props: Props) {
                   // https://github.com/lbryio/lbry-redux/blob/master/src/redux/actions/publish.js#L74-L79
                   return claim.name.length === 24 && !claim.name.includes(' ') && claim.value.author === 'Spee.ch';
                 }}
-                live={resolveLive(index)}
                 onClick={(e, claim, index) => handleClaimClicked(e, claim, index)}
               />
             </React.Fragment>

ui/component/claimListDiscover/view.jsx

@@ -13,11 +13,12 @@ import ClaimPreview from 'component/claimPreview';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import I18nMessage from 'component/i18nMessage';
 import ClaimListHeader from 'component/claimListHeader';
+import useFetchViewCount from 'effects/use-fetch-view-count';
 import { useIsLargeScreen } from 'effects/use-screensize';
-import { getLivestreamOnlyOptions } from 'util/search';
 
 type Props = {
   uris: Array<string>,
+  prefixUris?: Array<string>,
   name?: string,
   type: string,
   pageSize?: number,
@@ -31,7 +32,6 @@ type Props = {
   includeSupportAction?: boolean,
   infiniteScroll?: Boolean,
   isChannel?: boolean,
-  liveLivestreamsFirst?: boolean,
   personalView: boolean,
   showHeader: boolean,
   showHiddenByUser?: boolean,
@@ -64,7 +64,6 @@ type Props = {
   channelIds?: Array<string>,
   claimIds?: Array<string>,
   subscribedChannels: Array<Subscription>,
-  livestreamMap?: { [string]: any },
 
   header?: Node,
   headerLabel?: string | Node,
@@ -137,6 +136,7 @@ function ClaimListDiscover(props: Props) {
     injectedItem,
     feeAmount,
     uris,
+    prefixUris,
     tileLayout,
     hideFilters = false,
     claimIds,
@@ -148,8 +148,6 @@ function ClaimListDiscover(props: Props) {
     releaseTime,
     scrollAnchor,
     showHiddenByUser = false,
-    liveLivestreamsFirst,
-    livestreamMap,
     hasSource,
     hasNoSource,
     isChannel = false,
@@ -380,9 +378,9 @@ function ClaimListDiscover(props: Props) {
 
   const hasMatureTags = tagsParam && tagsParam.split(',').some((t) => MATURE_TAGS.includes(t));
 
-  const mainSearchKey = createNormalizedClaimSearchKey(options);
+  const searchKey = createNormalizedClaimSearchKey(options);
-  let claimSearchResult = claimSearchByQuery[mainSearchKey];
+  const claimSearchResult = claimSearchByQuery[searchKey];
-  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[mainSearchKey];
+  const claimSearchResultLastPageReached = claimSearchByQueryLastPageReached[searchKey];
 
   // uncomment to fix an item on a page
   //   const fixUri = 'lbry://@corbettreport#0/lbryodysee#5';
@@ -400,14 +398,6 @@ function ClaimListDiscover(props: Props) {
   //     claimSearchResult.splice(2, 0, fixUri);
   //   }
 
-  const livestreamSearchKey = liveLivestreamsFirst
-    ? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
-    : undefined;
-  const livestreamSearchResult = livestreamSearchKey && claimSearchByQuery[livestreamSearchKey];
-
-  const [finalUris, setFinalUris] = React.useState(
-    getFinalUrisInitialState(history.action === 'POP', claimSearchResult)
-  );
   const [prevOptions, setPrevOptions] = React.useState(null);
 
   if (!isJustScrollingToNewPage(prevOptions, options)) {
@@ -469,6 +459,8 @@ function ClaimListDiscover(props: Props) {
     </div>
   );
 
+  const renderUris = uris || claimSearchResult;
+
   // **************************************************************************
   // Helpers
   // **************************************************************************
@@ -514,41 +506,6 @@ function ClaimListDiscover(props: Props) {
     }
   }
 
-  function urisEqual(prev: Array<string>, next: Array<string>) {
-    if (!prev || !next) {
-      // From 'ClaimList', "null" and "undefined" have special meaning,
-      // so we can't just compare array length here.
-      //   - null = "timed out"
-      //   - undefined = "no result".
-      return prev === next;
-    }
-    return prev.length === next.length && prev.every((value, index) => value === next[index]);
-  }
-
-  function getFinalUrisInitialState(isNavigatingBack, claimSearchResult) {
-    if (isNavigatingBack && claimSearchResult && claimSearchResult.length > 0) {
-      return claimSearchResult;
-    } else {
-      return [];
-    }
-  }
-
-  function fetchViewCountForUris(uris) {
-    const claimIds = [];
-
-    if (uris) {
-      uris.forEach((uri) => {
-        if (claimsByUri[uri]) {
-          claimIds.push(claimsByUri[uri].claim_id);
-        }
-      });
-    }
-
-    if (claimIds.length > 0) {
-      doFetchViewCount(claimIds.join(','));
-    }
-  }
-
   function resolveOrderByOption(orderBy: string | Array<string>, sortBy: string | Array<string>) {
     const order_by =
       orderBy === CS.ORDER_BY_TRENDING
@@ -567,38 +524,15 @@ function ClaimListDiscover(props: Props) {
   // **************************************************************************
   // **************************************************************************
 
+  useFetchViewCount(fetchViewCount, renderUris, claimsByUri, doFetchViewCount);
+
   React.useEffect(() => {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringForEffect);
       doClaimSearch(searchOptions);
-
-      if (liveLivestreamsFirst && options.page === 1) {
-        doClaimSearch(getLivestreamOnlyOptions(searchOptions));
-      }
     }
   }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, forceRefresh]);
 
-  // Resolve 'finalUri'
-  React.useEffect(() => {
-    if (uris) {
-      if (!urisEqual(uris, finalUris)) {
-        setFinalUris(uris);
-      }
-    } else {
-      // Wait until all queries are done before updating the uris to avoid layout shifts.
-      const pending = claimSearchResult === undefined || (liveLivestreamsFirst && livestreamSearchResult === undefined);
-      if (!pending && !urisEqual(claimSearchResult, finalUris)) {
-        setFinalUris(claimSearchResult);
-      }
-    }
-  }, [uris, claimSearchResult, finalUris, setFinalUris, liveLivestreamsFirst, livestreamSearchResult]);
-
-  React.useEffect(() => {
-    if (fetchViewCount) {
-      fetchViewCountForUris(finalUris);
-    }
-  }, [finalUris]); // eslint-disable-line react-hooks/exhaustive-deps
-
   const headerToUse = header || (
     <ClaimListHeader
       channelIds={channelIds}
@@ -636,7 +570,8 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             tileLayout
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
+            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -645,8 +580,6 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
-            liveLivestreamsFirst={liveLivestreamsFirst}
-            livestreamMap={livestreamMap}
             searchOptions={options}
             showNoSourceClaims={showNoSourceClaims}
             empty={empty}
@@ -670,7 +603,8 @@ function ClaimListDiscover(props: Props) {
           <ClaimList
             type={type}
             loading={loading}
-            uris={finalUris}
+            uris={renderUris}
+            prefixUris={prefixUris}
             onScrollBottom={handleScrollBottom}
             page={page}
             pageSize={dynamicPageSize}
@@ -679,8 +613,6 @@ function ClaimListDiscover(props: Props) {
             includeSupportAction={includeSupportAction}
             injectedItem={injectedItem}
             showHiddenByUser={showHiddenByUser}
-            liveLivestreamsFirst={liveLivestreamsFirst}
-            livestreamMap={livestreamMap}
             searchOptions={options}
             showNoSourceClaims={hasNoSource || showNoSourceClaims}
             empty={empty}

ui/component/claimPreview/index.js

@@ -20,6 +20,7 @@ import {
 } from 'lbry-redux';
 import { selectMutedChannels, makeSelectChannelIsMuted } from 'redux/selectors/blocked';
 import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import { makeSelectHasVisitedUri } from 'redux/selectors/content';
 import { makeSelectIsSubscribed } from 'redux/selectors/subscriptions';
@@ -56,6 +57,7 @@ const select = (state, props) => {
     streamingUrl: props.uri && makeSelectStreamingUrlForUri(props.uri)(state),
     wasPurchased: props.uri && makeSelectClaimWasPurchased(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
     isCollectionMine: makeSelectCollectionIsMine(props.collectionId)(state),
     collectionUris: makeSelectUrlsForCollectionId(props.collectionId)(state),
     collectionIndex: makeSelectIndexForUrlInCollection(props.uri, props.collectionId)(state),

ui/component/claimPreview/view.jsx

@@ -70,6 +70,7 @@ type Props = {
   streamingUrl: ?string,
   getFile: (string) => void,
   customShouldHide?: (Claim) => boolean,
+  searchParams?: { [string]: string },
   showUnresolvedClaim?: boolean,
   showNullPlaceholder?: boolean,
   includeSupportAction?: boolean,
@@ -80,7 +81,7 @@ type Props = {
   repostUrl?: string,
   hideMenu?: boolean,
   isLivestream?: boolean,
-  live?: boolean,
+  isLivestreamActive: boolean,
   collectionId?: string,
   editCollection: (string, CollectionEditParams) => void,
   isCollectionMine: boolean,
@@ -125,6 +126,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     // modifiers
     active,
     customShouldHide,
+    searchParams,
     showNullPlaceholder,
     // value from show mature content user setting
     // true if the user doesn't wanna see nsfw content
@@ -145,7 +147,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
     hideMenu = false,
     // repostUrl,
     isLivestream, // need both? CHECK
-    live,
+    isLivestreamActive,
     collectionId,
     collectionIndex,
     editCollection,
@@ -221,6 +223,11 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   if (listId) {
     navigateSearch.set(COLLECTIONS_CONSTS.COLLECTION_ID, listId);
   }
+  if (searchParams) {
+    Object.keys(searchParams).forEach((key) => {
+      navigateSearch.set(key, searchParams[key]);
+    });
+  }
 
   const handleNavLinkClick = (e) => {
     if (onClick) {
@@ -336,7 +343,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
   }
 
   let liveProperty = null;
-  if (live === true) {
+  if (isLivestreamActive === true) {
     liveProperty = (claim) => <>LIVE</>;
   }
 
@@ -349,7 +356,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
         'claim-preview__wrapper--channel': isChannelUri && type !== 'inline',
         'claim-preview__wrapper--inline': type === 'inline',
         'claim-preview__wrapper--small': type === 'small',
-        'claim-preview__live': live,
+        'claim-preview__live': isLivestreamActive,
         'claim-preview__active': active,
       })}
     >
@@ -386,7 +393,7 @@ const ClaimPreview = forwardRef<any, {}>((props: Props, ref: any) => {
                       )}
                     </div>
                     {/* @endif */}
-                    {!isLivestream && (
+                    {(!isLivestream || isLivestreamActive) && (
                       <div className="claim-preview__file-property-overlay">
                         <PreviewOverlayProperties uri={uri} small={type === 'small'} properties={liveProperty} />
                       </div>

ui/component/claimPreviewSubtitle/view.jsx

@@ -16,6 +16,7 @@ type Props = {
   isLivestream: boolean,
 };
 
+// previews used in channel overview and homepage (and other places?)
 function ClaimPreviewSubtitle(props: Props) {
   const { pending, uri, claim, type, beginPublish, isLivestream } = props;
   const claimsInChannel = (claim && claim.meta.claims_in_channel) || 0;

ui/component/claimPreviewTile/index.js

@@ -12,7 +12,8 @@ import {
   makeSelectDateForUri,
 } from 'lbry-redux';
 import { selectMutedChannels } from 'redux/selectors/blocked';
-import { selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectViewCountForUri, selectBlackListedOutpoints, selectFilteredOutpoints } from 'lbryinc';
+import { makeSelectIsActiveLivestream } from 'redux/selectors/livestream';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import ClaimPreviewTile from './view';
 import formatMediaDuration from 'util/formatMediaDuration';
@@ -36,6 +37,8 @@ const select = (state, props) => {
     showMature: selectShowMatureContent(state),
     isMature: makeSelectClaimIsNsfw(props.uri)(state),
     isLivestream: makeSelectClaimIsStreamPlaceholder(props.uri)(state),
+    isLivestreamActive: makeSelectIsActiveLivestream(props.uri)(state),
+    viewCount: makeSelectViewCountForUri(props.uri)(state),
   };
 };
 

ui/component/claimPreviewTile/view.jsx

@@ -48,13 +48,14 @@ type Props = {
   showMature: boolean,
   showHiddenByUser?: boolean,
   properties?: (Claim) => void,
-  live?: boolean,
   collectionId?: string,
   showNoSourceClaims?: boolean,
   isLivestream: boolean,
+  viewCount: string,
+  isLivestreamActive: boolean,
 };
 
-// preview image cards used in related video functionality
+// preview image cards used in related video functionality, channel overview page and homepage
 function ClaimPreviewTile(props: Props) {
   const {
     history,
@@ -75,11 +76,12 @@ function ClaimPreviewTile(props: Props) {
     showMature,
     showHiddenByUser,
     properties,
-    live,
     showNoSourceClaims,
     isLivestream,
+    isLivestreamActive,
     collectionId,
     mediaDuration,
+    viewCount,
   } = props;
   const isRepost = claim && claim.repost_channel_url;
   const isCollection = claim && claim.value_type === 'collection';
@@ -177,6 +179,10 @@ function ClaimPreviewTile(props: Props) {
     return null;
   }
 
+  const isChannelPage = window.location.pathname.startsWith('/@');
+
+  const shouldShowViewCount = !(!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage);
+
   if (placeholder || (!claim && isResolvingUri)) {
     return (
       <li className={classnames('claim-preview--tile', {})}>
@@ -185,14 +191,18 @@ function ClaimPreviewTile(props: Props) {
         </div>
         <div className="placeholder__wrapper">
           <div className="placeholder claim-tile__title" />
-          <div className="placeholder claim-tile__info" />
+          <div
+            className={classnames('claim-tile__info placeholder', {
+              contains_view_count: shouldShowViewCount,
+            })}
+          />
         </div>
       </li>
     );
   }
 
   let liveProperty = null;
-  if (live === true) {
+  if (isLivestreamActive === true) {
     liveProperty = (claim) => <>LIVE</>;
   }
 
@@ -201,7 +211,7 @@ function ClaimPreviewTile(props: Props) {
       onClick={handleClick}
       className={classnames('card claim-preview--tile', {
         'claim-preview__wrapper--channel': isChannel,
-        'claim-preview__live': live,
+        'claim-preview__live': isLivestreamActive,
       })}
     >
       <NavLink {...navLinkProps} role="none" tabIndex={-1} aria-hidden>
@@ -245,7 +255,11 @@ function ClaimPreviewTile(props: Props) {
         <ClaimMenuList uri={uri} collectionId={listId} channelUri={channelUri} />
       </div>
       <div>
-        <div className="claim-tile__info">
+        <div
+          className={classnames('claim-tile__info', {
+            contains_view_count: shouldShowViewCount,
+          })}
+        >
           {isChannel ? (
             <div className="claim-tile__about--channel">
               <SubscribeButton uri={repostedChannelUri || uri} />

ui/component/claimTilesDiscover/index.js

@@ -1,27 +1,36 @@
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router';
 import {
   doClaimSearch,
   selectClaimSearchByQuery,
   selectFetchingClaimSearchByQuery,
   SETTINGS,
   selectClaimsByUri,
+  MATURE_TAGS,
 } from 'lbry-redux';
 import { doFetchViewCount } from 'lbryinc';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
 import { makeSelectClientSetting, selectShowMatureContent } from 'redux/selectors/settings';
-import { selectModerationBlockList } from 'redux/selectors/comments';
+import { selectMutedAndBlockedChannelIds } from 'redux/selectors/blocked';
-import { selectMutedChannels } from 'redux/selectors/blocked';
+import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
+import * as CS from 'constants/claim_search';
+
 import ClaimListDiscover from './view';
 
-const select = (state) => ({
+const select = (state, props) => {
-  claimSearchByQuery: selectClaimSearchByQuery(state),
+  const showNsfw = selectShowMatureContent(state);
-  claimsByUri: selectClaimsByUri(state),
+  const hideReposts = makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state);
-  fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
+  const mutedAndBlockedChannelIds = selectMutedAndBlockedChannelIds(state);
-  showNsfw: selectShowMatureContent(state),
+
-  hideReposts: makeSelectClientSetting(SETTINGS.HIDE_REPOSTS)(state),
+  return {
-  mutedUris: selectMutedChannels(state),
+    claimSearchByQuery: selectClaimSearchByQuery(state),
-  blockedUris: selectModerationBlockList(state),
+    claimsByUri: selectClaimsByUri(state),
-});
+    fetchingClaimSearchByQuery: selectFetchingClaimSearchByQuery(state),
+    showNsfw,
+    hideReposts,
+    options: resolveSearchOptions({ showNsfw, hideReposts, mutedAndBlockedChannelIds, pageSize: 8, ...props }),
+  };
+};
 
 const perform = {
   doClaimSearch,
@@ -29,4 +38,97 @@ const perform = {
   doFetchViewCount,
 };
 
-export default connect(select, perform)(ClaimListDiscover);
+export default withRouter(connect(select, perform)(ClaimListDiscover));
+
+// ****************************************************************************
+// ****************************************************************************
+
+function resolveSearchOptions(props) {
+  const {
+    showNsfw,
+    hideReposts,
+    mutedAndBlockedChannelIds,
+    location,
+    pageSize,
+    claimType,
+    tags,
+    languages,
+    channelIds,
+    orderBy,
+    streamTypes,
+    hasNoSource,
+    hasSource,
+    releaseTime,
+    feeAmount,
+    limitClaimsPerChannel,
+    timestamp,
+    claimIds,
+  } = props;
+
+  const urlParams = new URLSearchParams(location.search);
+  const feeAmountInUrl = urlParams.get('fee_amount');
+  const feeAmountParam = feeAmountInUrl || feeAmount;
+
+  let streamTypesParam;
+  if (streamTypes) {
+    streamTypesParam = streamTypes;
+  } else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
+    streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
+  }
+
+  const options = {
+    page_size: pageSize,
+    claim_type: claimType || ['stream', 'repost', 'channel'],
+    // no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
+    // it's faster, but we will need to remove it if we start using total_pages
+    no_totals: true,
+    any_tags: tags || [],
+    not_tags: !showNsfw ? MATURE_TAGS : [],
+    any_languages: languages,
+    channel_ids: channelIds || [],
+    not_channel_ids: mutedAndBlockedChannelIds,
+    order_by: orderBy || ['trending_group', 'trending_mixed'],
+    stream_types: streamTypesParam,
+  };
+
+  if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
+    options.has_no_source = true;
+  } else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
+    options.has_source = true;
+  }
+
+  if (releaseTime) {
+    options.release_time = releaseTime;
+  }
+
+  if (feeAmountParam) {
+    options.fee_amount = feeAmountParam;
+  }
+
+  if (limitClaimsPerChannel) {
+    options.limit_claims_per_channel = limitClaimsPerChannel;
+  }
+
+  // https://github.com/lbryio/lbry-desktop/issues/3774
+  if (hideReposts) {
+    if (Array.isArray(options.claim_type)) {
+      options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
+    } else {
+      options.claim_type = ['stream', 'channel'];
+    }
+  }
+
+  if (claimType) {
+    options.claim_type = claimType;
+  }
+
+  if (timestamp) {
+    options.timestamp = timestamp;
+  }
+
+  if (claimIds) {
+    options.claim_ids = claimIds;
+  }
+
+  return options;
+}

ui/component/claimTilesDiscover/view.jsx

@@ -1,83 +1,42 @@
 // @flow
-import { ENABLE_NO_SOURCE_CLAIMS, SIMPLE_SITE } from 'config';
-import * as CS from 'constants/claim_search';
 import type { Node } from 'react';
 import React from 'react';
-import { createNormalizedClaimSearchKey, MATURE_TAGS, splitBySeparator } from 'lbry-redux';
+import { createNormalizedClaimSearchKey } from 'lbry-redux';
 import ClaimPreviewTile from 'component/claimPreviewTile';
-import { useHistory } from 'react-router';
+import useFetchViewCount from 'effects/use-fetch-view-count';
-import { getLivestreamOnlyOptions } from 'util/search';
+import usePrevious from 'effects/use-previous';
 
-/**
+type SearchOptions = {
- * Updates 'uris' by adding and/or moving active livestreams to the front of
+  page_size: number,
- * list.
+  no_totals: boolean,
- * 'liveUris' is also updated with any entries that were moved to the
+  any_tags: Array<string>,
- * front, for convenience.
+  channel_ids: Array<string>,
- *
+  claim_ids?: Array<string>,
- * @param uris [Ref]
+  not_channel_ids: Array<string>,
- * @param liveUris [Ref]
+  not_tags: Array<string>,
- * @param livestreamMap
+  order_by: Array<string>,
- * @param claimsByUri
+  languages?: Array<string>,
- * @param claimSearchByQuery
+  release_time?: string,
- * @param options
+  claim_type?: string | Array<string>,
- */
+  timestamp?: string,
-export function prioritizeActiveLivestreams(
+  fee_amount?: string,
-  uris: Array<string>,
+  limit_claims_per_channel?: number,
-  liveUris: Array<string>,
+  stream_types?: Array<string>,
-  livestreamMap: { [string]: any },
+  has_source?: boolean,
-  claimsByUri: { [string]: any },
+  has_no_source?: boolean,
-  claimSearchByQuery: { [string]: Array<string> },
+};
-  options: any
-) {
-  if (!livestreamMap || !uris) return;
 
-  const claimIsLive = (claim, liveChannelIds) => {
+function urisEqual(prev: ?Array<string>, next: ?Array<string>) {
-    // This function relies on:
+  if (!prev || !next) {
-    // 1. Only 1 actual livestream per channel (i.e. all other livestream-claims
+    // ClaimList: "null" and "undefined" have special meaning,
-    //    for that channel actually point to the same source).
+    // so we can't just compare array length here.
-    // 2. 'liveChannelIds' needs to be pruned after being accounted for,
+    //   - null = "timed out"
-    //    otherwise all livestream-claims will be "live" (we'll only take the
+    //   - undefined = "no result".
-    //    latest one as "live" ).
+    return prev === next;
-    return (
-      claim &&
-      claim.value_type === 'stream' &&
-      claim.value.source === undefined &&
-      claim.signing_channel &&
-      liveChannelIds.includes(claim.signing_channel.claim_id)
-    );
-  };
-
-  let liveChannelIds = Object.keys(livestreamMap);
-
-  // 1. Collect active livestreams from the primary search to put in front.
-  uris.forEach((uri) => {
-    const claim = claimsByUri[uri];
-    if (claimIsLive(claim, liveChannelIds)) {
-      liveUris.push(uri);
-      // This live channel has been accounted for, so remove it.
-      liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
-    }
-  });
-
-  // 2. Now, repeat on the secondary search.
-  if (options) {
-    const livestreamsOnlySearchCacheQuery = createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options));
-    const livestreamsOnlyUris = claimSearchByQuery[livestreamsOnlySearchCacheQuery];
-    if (livestreamsOnlyUris) {
-      livestreamsOnlyUris.forEach((uri) => {
-        const claim = claimsByUri[uri];
-        if (!uris.includes(uri) && claimIsLive(claim, liveChannelIds)) {
-          liveUris.push(uri);
-          // This live channel has been accounted for, so remove it.
-          liveChannelIds.splice(liveChannelIds.indexOf(claim.signing_channel.claim_id), 1);
-        }
-      });
-    }
   }
 
-  // 3. Finalize uris by putting live livestreams in front.
+  // $FlowFixMe - already checked for null above.
-  const newUris = liveUris.concat(uris.filter((uri) => !liveUris.includes(uri)));
+  return prev.length === next.length && prev.every((value, index) => value === next[index]);
-  uris.splice(0, uris.length, ...newUris);
 }
 
 // ****************************************************************************
@@ -88,8 +47,6 @@ type Props = {
   prefixUris?: Array<string>,
   pinUrls?: Array<string>,
   uris: Array<string>,
-  liveLivestreamsFirst?: boolean,
-  livestreamMap?: { [string]: any },
   showNoSourceClaims?: boolean,
   renderProperties?: (Claim) => ?Node,
   fetchViewCount?: boolean,
@@ -109,13 +66,13 @@ type Props = {
   hasSource?: boolean,
   hasNoSource?: boolean,
   // --- select ---
+  location: { search: string },
   claimSearchByQuery: { [string]: Array<string> },
   claimsByUri: { [string]: any },
   fetchingClaimSearchByQuery: { [string]: boolean },
   showNsfw: boolean,
   hideReposts: boolean,
-  mutedUris: Array<string>,
+  options: SearchOptions,
-  blockedUris: Array<string>,
   // --- perform ---
   doClaimSearch: ({}) => void,
   doFetchViewCount: (claimIdCsv: string) => void,
@@ -126,234 +83,78 @@ function ClaimTilesDiscover(props: Props) {
     doClaimSearch,
     claimSearchByQuery,
     claimsByUri,
-    showNsfw,
-    hideReposts,
     fetchViewCount,
-    // Below are options to pass that are forwarded to claim_search
-    tags,
-    channelIds,
-    claimIds,
-    orderBy,
-    pageSize = 8,
-    releaseTime,
-    languages,
-    claimType,
-    streamTypes,
-    timestamp,
-    feeAmount,
-    limitClaimsPerChannel,
     fetchingClaimSearchByQuery,
-    hasSource,
     hasNoSource,
     renderProperties,
-    blockedUris,
-    mutedUris,
-    liveLivestreamsFirst,
-    livestreamMap,
     pinUrls,
     prefixUris,
     showNoSourceClaims,
     doFetchViewCount,
+    pageSize = 8,
+    options,
   } = props;
 
-  const { location } = useHistory();
+  const searchKey = createNormalizedClaimSearchKey(options);
-  const urlParams = new URLSearchParams(location.search);
+  const fetchingClaimSearch = fetchingClaimSearchByQuery[searchKey];
-  const feeAmountInUrl = urlParams.get('fee_amount');
+  const claimSearchUris = claimSearchByQuery[searchKey] || [];
-  const feeAmountParam = feeAmountInUrl || feeAmount;
+  const isUnfetchedClaimSearch = claimSearchByQuery[searchKey] === undefined;
-  const mutedAndBlockedChannelIds = Array.from(
-    new Set(mutedUris.concat(blockedUris).map((uri) => splitBySeparator(uri)[1]))
-  );
-  const liveUris = [];
-  let streamTypesParam;
-  if (streamTypes) {
-    streamTypesParam = streamTypes;
-  } else if (SIMPLE_SITE && !hasNoSource && streamTypes !== null) {
-    streamTypesParam = [CS.FILE_VIDEO, CS.FILE_AUDIO];
-  }
-
-  const [prevUris, setPrevUris] = React.useState([]);
-
-  const options: {
-    page_size: number,
-    no_totals: boolean,
-    any_tags: Array<string>,
-    channel_ids: Array<string>,
-    claim_ids?: Array<string>,
-    not_channel_ids: Array<string>,
-    not_tags: Array<string>,
-    order_by: Array<string>,
-    languages?: Array<string>,
-    release_time?: string,
-    claim_type?: string | Array<string>,
-    timestamp?: string,
-    fee_amount?: string,
-    limit_claims_per_channel?: number,
-    stream_types?: Array<string>,
-    has_source?: boolean,
-    has_no_source?: boolean,
-  } = {
-    page_size: pageSize,
-    claim_type: claimType || ['stream', 'repost', 'channel'],
-    // no_totals makes it so the sdk doesn't have to calculate total number pages for pagination
-    // it's faster, but we will need to remove it if we start using total_pages
-    no_totals: true,
-    any_tags: tags || [],
-    not_tags: !showNsfw ? MATURE_TAGS : [],
-    any_languages: languages,
-    channel_ids: channelIds || [],
-    not_channel_ids: mutedAndBlockedChannelIds,
-    order_by: orderBy || ['trending_group', 'trending_mixed'],
-    stream_types: streamTypesParam,
-  };
-
-  if (ENABLE_NO_SOURCE_CLAIMS && hasNoSource) {
-    options.has_no_source = true;
-  } else if (hasSource || (!ENABLE_NO_SOURCE_CLAIMS && (!claimType || claimType === 'stream'))) {
-    options.has_source = true;
-  }
-
-  if (releaseTime) {
-    options.release_time = releaseTime;
-  }
-
-  if (feeAmountParam) {
-    options.fee_amount = feeAmountParam;
-  }
-
-  if (limitClaimsPerChannel) {
-    options.limit_claims_per_channel = limitClaimsPerChannel;
-  }
-
-  // https://github.com/lbryio/lbry-desktop/issues/3774
-  if (hideReposts) {
-    if (Array.isArray(options.claim_type)) {
-      options.claim_type = options.claim_type.filter((claimType) => claimType !== 'repost');
-    } else {
-      options.claim_type = ['stream', 'channel'];
-    }
-  }
-
-  if (claimType) {
-    options.claim_type = claimType;
-  }
-
-  if (timestamp) {
-    options.timestamp = timestamp;
-  }
-
-  if (claimIds) {
-    options.claim_ids = claimIds;
-  }
-
-  const mainSearchKey = createNormalizedClaimSearchKey(options);
-  const livestreamSearchKey = liveLivestreamsFirst
-    ? createNormalizedClaimSearchKey(getLivestreamOnlyOptions(options))
-    : undefined;
-
-  let uris = (prefixUris || []).concat(claimSearchByQuery[mainSearchKey] || []);
-
-  const isLoading = fetchingClaimSearchByQuery[mainSearchKey];
-
-  if (liveLivestreamsFirst && livestreamMap && !isLoading) {
-    prioritizeActiveLivestreams(uris, liveUris, livestreamMap, claimsByUri, claimSearchByQuery, options);
-  }
 
   // Don't use the query from createNormalizedClaimSearchKey for the effect since that doesn't include page & release_time
   const optionsStringForEffect = JSON.stringify(options);
-  const shouldPerformSearch = !isLoading && uris.length === 0;
+  const shouldPerformSearch = !fetchingClaimSearch && claimSearchUris.length === 0;
 
-  if (
+  const uris = (prefixUris || []).concat(claimSearchUris);
-    prefixUris === undefined &&
-    (claimSearchByQuery[mainSearchKey] === undefined ||
-      (livestreamSearchKey && claimSearchByQuery[livestreamSearchKey] === undefined))
-  ) {
-    // This is a new query and we don't have results yet ...
-    if (prevUris.length !== 0) {
-      // ... but we have previous results. Use it until new results are here.
-      uris = prevUris;
-    }
-  }
 
-  const modifiedUris = uris ? uris.slice() : [];
+  if (pinUrls && uris && uris.length > 2 && window.location.pathname === '/') {
-  const fixUris = pinUrls || [];
+    pinUrls.forEach((pin) => {
-
+      if (uris.indexOf(pin) !== -1) {
-  if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') {
+        uris.splice(uris.indexOf(pin), 1);
-    fixUris.forEach((fixUri) => {
-      if (modifiedUris.indexOf(fixUri) !== -1) {
-        modifiedUris.splice(modifiedUris.indexOf(fixUri), 1);
       } else {
-        modifiedUris.pop();
+        uris.pop();
       }
     });
-    modifiedUris.splice(2, 0, ...fixUris);
+    uris.splice(2, 0, ...pinUrls);
   }
 
-  // **************************************************************************
+  if (uris.length > 0 && uris.length < pageSize && shouldPerformSearch) {
-  // **************************************************************************
+    // prefixUri and pinUrls might already be present while waiting for the
-
+    // remaining claim_search results. Fill the space to prevent layout shifts.
-  function resolveLive(index) {
+    uris.push(...Array(pageSize - uris.length).fill(''));
-    if (liveLivestreamsFirst && livestreamMap && index < liveUris.length) {
-      return true;
-    }
-    return undefined;
   }
 
-  function fetchViewCountForUris(uris) {
+  const prevUris = usePrevious(uris);
-    const claimIds = [];
 
-    if (uris) {
+  useFetchViewCount(fetchViewCount, uris, claimsByUri, doFetchViewCount);
-      uris.forEach((uri) => {
-        if (claimsByUri[uri]) {
-          claimIds.push(claimsByUri[uri].claim_id);
-        }
-      });
-    }
-
-    if (claimIds.length > 0) {
-      doFetchViewCount(claimIds.join(','));
-    }
-  }
-
-  // **************************************************************************
-  // **************************************************************************
 
+  // Run `doClaimSearch`
   React.useEffect(() => {
     if (shouldPerformSearch) {
       const searchOptions = JSON.parse(optionsStringForEffect);
       doClaimSearch(searchOptions);
-
-      if (liveLivestreamsFirst) {
-        doClaimSearch(getLivestreamOnlyOptions(searchOptions));
-      }
     }
-  }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect, liveLivestreamsFirst]);
+  }, [doClaimSearch, shouldPerformSearch, optionsStringForEffect]);
 
-  React.useEffect(() => {
+  // Show previous results while we fetch to avoid blinkies and poor CLS.
-    if (JSON.stringify(prevUris) !== JSON.stringify(uris) && !shouldPerformSearch) {
+  const finalUris = isUnfetchedClaimSearch && prevUris ? prevUris : uris;
-      // Stash new results for next render cycle:
-      setPrevUris(uris);
-      // Fetch view count:
-      if (fetchViewCount) {
-        fetchViewCountForUris(uris);
-      }
-    }
-  }, [shouldPerformSearch, prevUris, uris]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  // **************************************************************************
-  // **************************************************************************
 
   return (
     <ul className="claim-grid">
-      {modifiedUris && modifiedUris.length
+      {finalUris && finalUris.length
-        ? modifiedUris.map((uri, index) => (
+        ? finalUris.map((uri, i) => {
-            <ClaimPreviewTile
+            if (uri) {
-              showNoSourceClaims={hasNoSource || showNoSourceClaims}
+              return (
-              key={uri}
+                <ClaimPreviewTile
-              uri={uri}
+                  showNoSourceClaims={hasNoSource || showNoSourceClaims}
-              properties={renderProperties}
+                  key={uri}
-              live={resolveLive(index)}
+                  uri={uri}
-            />
+                  properties={renderProperties}
-          ))
+                />
+              );
+            } else {
+              return <ClaimPreviewTile showNoSourceClaims={hasNoSource || showNoSourceClaims} key={i} placeholder />;
+            }
+          })
         : new Array(pageSize)
             .fill(1)
             .map((x, i) => (
@@ -362,4 +163,64 @@ function ClaimTilesDiscover(props: Props) {
     </ul>
   );
 }
-export default ClaimTilesDiscover;
+
+export default React.memo<Props>(ClaimTilesDiscover, areEqual);
+
+function debug_trace(val) {
+  if (process.env.DEBUG_TRACE) console.log(`Render due to: ${val}`);
+}
+
+function areEqual(prev: Props, next: Props) {
+  const prevOptions: SearchOptions = prev.options;
+  const nextOptions: SearchOptions = next.options;
+
+  const prevSearchKey = createNormalizedClaimSearchKey(prevOptions);
+  const nextSearchKey = createNormalizedClaimSearchKey(nextOptions);
+
+  if (prevSearchKey !== nextSearchKey) {
+    debug_trace('search key');
+    return false;
+  }
+
+  // --- Deep-compare ---
+  if (!urisEqual(prev.claimSearchByQuery[prevSearchKey], next.claimSearchByQuery[nextSearchKey])) {
+    debug_trace('claimSearchByQuery');
+    return false;
+  }
+
+  const ARRAY_KEYS = ['prefixUris', 'channelIds'];
+  for (let i = 0; i < ARRAY_KEYS.length; ++i) {
+    const key = ARRAY_KEYS[i];
+    if (!urisEqual(prev[key], next[key])) {
+      debug_trace(`${key}`);
+      return false;
+    }
+  }
+
+  // --- Default the rest(*) to shallow-compare ---
+  // (*) including new props introduced in the future, in case developer forgets
+  // to update this function. Better to render more than miss an important one.
+  const KEYS_TO_IGNORE = [
+    ...ARRAY_KEYS,
+    'claimSearchByQuery',
+    'fetchingClaimSearchByQuery', // We are showing previous results while fetching.
+    'options', // Covered by search-key comparison.
+    'location',
+    'history',
+    'match',
+    'claimsByUri',
+    'doClaimSearch',
+    'doToggleTagFollowDesktop',
+  ];
+
+  const propKeys = Object.keys(next);
+  for (let i = 0; i < propKeys.length; ++i) {
+    const pk = propKeys[i];
+    if (!KEYS_TO_IGNORE.includes(pk) && prev[pk] !== next[pk]) {
+      debug_trace(`${pk}`);
+      return false;
+    }
+  }
+
+  return true;
+}

ui/component/collectionPreviewOverlay/index.js

@@ -7,6 +7,7 @@ import {
   makeSelectNameForCollectionId,
   makeSelectPendingCollectionForId,
   makeSelectCountForCollectionId,
+  doFetchItemsInCollection,
 } from 'lbry-redux';
 import CollectionPreviewOverlay from './view';
 
@@ -27,4 +28,8 @@ const select = (state, props) => {
   };
 };
 
-export default connect(select)(CollectionPreviewOverlay);
+const perform = (dispatch) => ({
+  fetchCollectionItems: (claimId) => dispatch(doFetchItemsInCollection({ collectionId: claimId })), // if collection not resolved, resolve it
+});
+
+export default connect(select, perform)(CollectionPreviewOverlay);

ui/component/collectionPreviewOverlay/view.jsx

@@ -12,10 +12,17 @@ type Props = {
   pendingCollection?: Collection,
   claim: ?Claim,
   collectionItemUrls: Array<string>,
+  fetchCollectionItems: (string) => void,
 };
 
 function CollectionPreviewOverlay(props: Props) {
-  const { collectionItemUrls } = props;
+  const { collectionId, collectionItemUrls, fetchCollectionItems } = props;
+
+  React.useEffect(() => {
+    if (!collectionItemUrls) {
+      fetchCollectionItems(collectionId);
+    }
+  }, [collectionId, collectionItemUrls, fetchCollectionItems]);
 
   if (collectionItemUrls && collectionItemUrls.length > 0) {
     return (

ui/component/comment/view.jsx

@@ -52,6 +52,7 @@ type Props = {
   doToast: ({ message: string }) => void,
   isTopLevel?: boolean,
   threadDepth: number,
+  hideActions?: boolean,
   isPinned: boolean,
   othersReacts: ?{
     like: number,
@@ -95,6 +96,7 @@ function Comment(props: Props) {
     doToast,
     isTopLevel,
     threadDepth,
+    hideActions,
     isPinned,
     othersReacts,
     playingUri,
@@ -348,18 +350,20 @@ function Comment(props: Props) {
                   )}
                 </div>
 
-                <div className="comment__actions">
+                {!hideActions && (
-                  {threadDepth !== 0 && (
+                  <div className="comment__actions">
-                    <Button
+                    {threadDepth !== 0 && (
-                      requiresAuth={IS_WEB}
+                      <Button
-                      label={commentingEnabled ? __('Reply') : __('Log in to reply')}
+                        requiresAuth={IS_WEB}
-                      className="comment__action"
+                        label={commentingEnabled ? __('Reply') : __('Log in to reply')}
-                      onClick={handleCommentReply}
+                        className="comment__action"
-                      icon={ICONS.REPLY}
+                        onClick={handleCommentReply}
-                    />
+                        icon={ICONS.REPLY}
-                  )}
+                      />
-                  {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                    )}
-                </div>
+                    {ENABLE_COMMENT_REACTIONS && <CommentReactions uri={uri} commentId={commentId} />}
+                  </div>
+                )}
 
                 {numDirectReplies > 0 && !showReplies && (
                   <div className="comment__actions">

ui/component/commentCreate/index.js

@@ -6,16 +6,13 @@ import {
   selectFetchingMyChannels,
   doSendTip,
 } from 'lbry-redux';
-import { doOpenModal, doSetActiveChannel } from 'redux/actions/app';
 import { doCommentCreate, doFetchCreatorSettings, doCommentById } from 'redux/actions/comments';
-import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
 import { selectSettingsByChannelId } from 'redux/selectors/comments';
 import { CommentCreate } from './view';
 import { doToast } from 'redux/actions/notifications';
 
 const select = (state, props) => ({
-  commentingEnabled: IS_WEB ? Boolean(selectUserVerifiedEmail(state)) : true,
   claim: makeSelectClaimForUri(props.uri)(state),
   channels: selectMyChannelClaims(state),
   isFetchingChannels: selectFetchingMyChannels(state),
@@ -38,8 +35,6 @@ const perform = (dispatch, ownProps) => ({
         environment
       )
     ),
-  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
-  setActiveChannel: (claimId) => dispatch(doSetActiveChannel(claimId)),
   sendTip: (params, callback, errorCallback) => dispatch(doSendTip(params, false, callback, errorCallback, false)),
   doToast: (options) => dispatch(doToast(options)),
   doFetchCreatorSettings: (channelClaimId) => dispatch(doFetchCreatorSettings(channelClaimId)),

ui/component/commentCreate/view.jsx

@@ -1,40 +1,39 @@
 // @flow
-import type { ElementRef } from 'react';
-import { SIMPLE_SITE } from 'config';
-import * as PAGES from 'constants/pages';
-import * as ICONS from 'constants/icons';
-import * as KEYCODES from 'constants/keycodes';
-import React from 'react';
-import classnames from 'classnames';
-import { FormField, Form } from 'component/common/form';
-import Icon from 'component/common/icon';
-import Button from 'component/button';
-import SelectChannel from 'component/selectChannel';
-import usePersistedState from 'effects/use-persisted-state';
 import { FF_MAX_CHARS_IN_COMMENT, FF_MAX_CHARS_IN_LIVESTREAM_COMMENT } from 'constants/form-field';
-import { useHistory } from 'react-router';
+import { FormField, Form } from 'component/common/form';
-import WalletTipAmountSelector from 'component/walletTipAmountSelector';
-import CreditAmount from 'component/common/credit-amount';
-import ChannelThumbnail from 'component/channelThumbnail';
-import I18nMessage from 'component/i18nMessage';
-import UriIndicator from 'component/uriIndicator';
-import Empty from 'component/common/empty';
 import { getChannelIdFromClaim } from 'util/claim';
 import { Lbryio } from 'lbryinc';
+import { SIMPLE_SITE } from 'config';
+import { useHistory } from 'react-router';
+import * as ICONS from 'constants/icons';
+import * as KEYCODES from 'constants/keycodes';
+import * as PAGES from 'constants/pages';
+import Button from 'component/button';
+import ChannelMentionSuggestions from 'component/channelMentionSuggestions';
+import ChannelThumbnail from 'component/channelThumbnail';
+import classnames from 'classnames';
+import CreditAmount from 'component/common/credit-amount';
+import Empty from 'component/common/empty';
+import I18nMessage from 'component/i18nMessage';
+import Icon from 'component/common/icon';
+import React from 'react';
+import SelectChannel from 'component/selectChannel';
+import type { ElementRef } from 'react';
+import UriIndicator from 'component/uriIndicator';
+import usePersistedState from 'effects/use-persisted-state';
+import WalletTipAmountSelector from 'component/walletTipAmountSelector';
 
 import { getStripeEnvironment } from 'util/stripe';
 let stripeEnvironment = getStripeEnvironment();
 
 const TAB_FIAT = 'TabFiat';
 const TAB_LBC = 'TabLBC';
+const MENTION_DEBOUNCE_MS = 100;
 
 type Props = {
   uri: string,
   claim: StreamClaim,
-  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
   channels: ?Array<ChannelClaim>,
-  onDoneReplying?: () => void,
-  onCancelReplying?: () => void,
   isNested: boolean,
   isFetchingChannels: boolean,
   parentId: string,
@@ -44,25 +43,26 @@ type Props = {
   bottom: boolean,
   livestream?: boolean,
   embed?: boolean,
-  toast: (string) => void,
   claimIsMine: boolean,
-  sendTip: ({}, (any) => void, (any) => void) => void,
-  doToast: ({ message: string }) => void,
   supportDisabled: boolean,
-  doFetchCreatorSettings: (channelId: string) => Promise<any>,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  shouldFetchComment: boolean,
+  doToast: ({ message: string }) => void,
+  createComment: (string, string, string, ?string, ?string, ?string) => Promise<any>,
+  onDoneReplying?: () => void,
+  onCancelReplying?: () => void,
+  toast: (string) => void,
+  sendTip: ({}, (any) => void, (any) => void) => void,
+  doFetchCreatorSettings: (channelId: string) => Promise<any>,
   setQuickReply: (any) => void,
   fetchComment: (commentId: string) => Promise<any>,
-  shouldFetchComment: boolean,
 };
 
 export function CommentCreate(props: Props) {
   const {
-    createComment,
+    uri,
     claim,
     channels,
-    onDoneReplying,
-    onCancelReplying,
     isNested,
     isFetchingChannels,
     isReply,
@@ -72,36 +72,64 @@ export function CommentCreate(props: Props) {
     livestream,
     embed,
     claimIsMine,
-    sendTip,
-    doToast,
-    doFetchCreatorSettings,
     settingsByChannelId,
     supportDisabled,
+    shouldFetchComment,
+    doToast,
+    createComment,
+    onDoneReplying,
+    onCancelReplying,
+    sendTip,
+    doFetchCreatorSettings,
     setQuickReply,
     fetchComment,
-    shouldFetchComment,
   } = props;
+  const formFieldRef: ElementRef<any> = React.useRef();
+  const formFieldInputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
+  const selectionIndex = formFieldInputRef && formFieldInputRef.current && formFieldInputRef.current.selectionStart;
   const buttonRef: ElementRef<any> = React.useRef();
   const {
     push,
     location: { pathname },
   } = useHistory();
+
   const [isSubmitting, setIsSubmitting] = React.useState(false);
   const [commentFailure, setCommentFailure] = React.useState(false);
   const [successTip, setSuccessTip] = React.useState({ txid: undefined, tipAmount: undefined });
-  const claimId = claim && claim.claim_id;
   const [isSupportComment, setIsSupportComment] = React.useState();
   const [isReviewingSupportComment, setIsReviewingSupportComment] = React.useState();
   const [tipAmount, setTipAmount] = React.useState(1);
   const [commentValue, setCommentValue] = React.useState('');
   const [advancedEditor, setAdvancedEditor] = usePersistedState('comment-editor-mode', false);
-  const hasChannels = channels && channels.length;
-  const charCount = commentValue.length;
   const [activeTab, setActiveTab] = React.useState('');
   const [tipError, setTipError] = React.useState();
   const [deletedComment, setDeletedComment] = React.useState(false);
-  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length;
+  const [pauseQuickSend, setPauseQuickSend] = React.useState(false);
   const [shouldDisableReviewButton, setShouldDisableReviewButton] = React.useState();
+
+  const selectedMentionIndex =
+    commentValue.indexOf('@', selectionIndex) === selectionIndex
+      ? commentValue.indexOf('@', selectionIndex)
+      : commentValue.lastIndexOf('@', selectionIndex);
+  const modifierIndex = commentValue.indexOf(':', selectedMentionIndex);
+  const spaceIndex = commentValue.indexOf(' ', selectedMentionIndex);
+  const mentionLengthIndex =
+    modifierIndex >= 0 && (spaceIndex === -1 || modifierIndex < spaceIndex)
+      ? modifierIndex
+      : spaceIndex >= 0 && (modifierIndex === -1 || spaceIndex < modifierIndex)
+      ? spaceIndex
+      : commentValue.length;
+  const channelMention =
+    selectedMentionIndex >= 0 && selectionIndex <= mentionLengthIndex
+      ? commentValue.substring(selectedMentionIndex, mentionLengthIndex)
+      : '';
+
+  const claimId = claim && claim.claim_id;
+  const signingChannel = (claim && claim.signing_channel) || claim;
+  const channelUri = signingChannel && signingChannel.permanent_url;
+  const hasChannels = channels && channels.length;
+  const charCount = commentValue ? commentValue.length : 0;
+  const disabled = deletedComment || isSubmitting || isFetchingChannels || !commentValue.length || pauseQuickSend;
   const channelId = getChannelIdFromClaim(claim);
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
   const minSuper = (channelSettings && channelSettings.min_tip_amount_super_chat) || 0;
@@ -109,15 +137,6 @@ export function CommentCreate(props: Props) {
   const minAmount = minTip || minSuper || 0;
   const minAmountMet = minAmount === 0 || tipAmount >= minAmount;
 
-  // Fetch top-level comments to identify if it has been deleted and can reply to it
-  React.useEffect(() => {
-    if (shouldFetchComment && fetchComment) {
-      fetchComment(parentId).then((result) => {
-        setDeletedComment(String(result).includes('Error'));
-      });
-    }
-  }, [fetchComment, shouldFetchComment, parentId]);
-
   const minAmountRef = React.useRef(minAmount);
   minAmountRef.current = minAmount;
 
@@ -157,6 +176,20 @@ export function CommentCreate(props: Props) {
     setCommentValue(commentValue);
   }
 
+  function handleSelectMention(mentionValue, key) {
+    let newMentionValue = mentionValue.replace('lbry://', '');
+    if (newMentionValue.includes('#')) newMentionValue = newMentionValue.replace('#', ':');
+
+    if (livestream && key !== KEYCODES.TAB) setPauseQuickSend(true);
+    setCommentValue(
+      commentValue.substring(0, selectedMentionIndex) +
+        `${newMentionValue}` +
+        (commentValue.length > mentionLengthIndex + 1
+          ? commentValue.substring(mentionLengthIndex, commentValue.length)
+          : ' ')
+    );
+  }
+
   function altEnterListener(e: SyntheticKeyboardEvent<*>) {
     if ((livestream || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
       e.preventDefault();
@@ -365,10 +398,6 @@ export function CommentCreate(props: Props) {
       });
   }
 
-  function toggleEditorMode() {
-    setAdvancedEditor(!advancedEditor);
-  }
-
   // **************************************************************************
   // Effects
   // **************************************************************************
@@ -378,7 +407,28 @@ export function CommentCreate(props: Props) {
     if (!channelSettings && channelId) {
       doFetchCreatorSettings(channelId);
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [channelId, channelSettings, doFetchCreatorSettings]);
+
+  // Notifications: Fetch top-level comments to identify if it has been deleted and can reply to it
+  React.useEffect(() => {
+    if (shouldFetchComment && fetchComment) {
+      fetchComment(parentId).then((result) => {
+        setDeletedComment(String(result).includes('Error'));
+      });
+    }
+  }, [fetchComment, shouldFetchComment, parentId]);
+
+  // Debounce for disabling the submit button when mentioning a user with Enter
+  // so that the comment isn't sent at the same time
+  React.useEffect(() => {
+    const timer = setTimeout(() => {
+      if (pauseQuickSend) {
+        setPauseQuickSend(false);
+      }
+    }, MENTION_DEBOUNCE_MS);
+
+    return () => clearTimeout(timer);
+  }, [pauseQuickSend]);
 
   // **************************************************************************
   // Render
@@ -466,10 +516,22 @@ export function CommentCreate(props: Props) {
         'comment__create--bottom': bottom,
       })}
     >
+      {!advancedEditor && (
+        <ChannelMentionSuggestions
+          uri={uri}
+          isLivestream={livestream}
+          inputRef={formFieldInputRef}
+          mentionTerm={channelMention}
+          creatorUri={channelUri}
+          customSelectAction={handleSelectMention}
+        />
+      )}
       <FormField
         disabled={isFetchingChannels}
         type={SIMPLE_SITE ? 'textarea' : advancedEditor && !isReply ? 'markdown' : 'textarea'}
         name={isReply ? 'content_reply' : 'content_description'}
+        ref={formFieldRef}
+        className={isReply ? 'content_reply' : 'content_comment'}
         label={
           <span className="comment-new__label-wrapper">
             {!livestream && (
@@ -481,7 +543,7 @@ export function CommentCreate(props: Props) {
         quickActionLabel={
           !SIMPLE_SITE && (isReply ? undefined : advancedEditor ? __('Simple Editor') : __('Advanced Editor'))
         }
-        quickActionHandler={!SIMPLE_SITE && toggleEditorMode}
+        quickActionHandler={() => !SIMPLE_SITE && setAdvancedEditor(!advancedEditor)}
         onFocus={onTextareaFocus}
         onBlur={onTextareaBlur}
         placeholder={__('Say something about this...')}

ui/component/commentMenuList/index.js

@@ -1,13 +1,13 @@
 import { connect } from 'react-redux';
-import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
-import { doCommentPin, doCommentModAddDelegate } from 'redux/actions/comments';
 import { doChannelMute } from 'redux/actions/blocked';
-// import { doSetActiveChannel } from 'redux/actions/app';
+import { doCommentPin, doCommentModAddDelegate } from 'redux/actions/comments';
 import { doOpenModal } from 'redux/actions/app';
 import { doSetPlayingUri } from 'redux/actions/content';
+import { doToast } from 'redux/actions/notifications';
+import { makeSelectChannelPermUrlForClaimUri, makeSelectClaimIsMine, makeSelectClaimForUri } from 'lbry-redux';
 import { selectActiveChannelClaim } from 'redux/selectors/app';
-import { selectPlayingUri } from 'redux/selectors/content';
 import { selectModerationDelegatorsById } from 'redux/selectors/comments';
+import { selectPlayingUri } from 'redux/selectors/content';
 import CommentMenuList from './view';
 
 const select = (state, props) => ({
@@ -24,9 +24,9 @@ const perform = (dispatch) => ({
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
   muteChannel: (channelUri) => dispatch(doChannelMute(channelUri)),
   pinComment: (commentId, claimId, remove) => dispatch(doCommentPin(commentId, claimId, remove)),
-  //   setActiveChannel: channelId => dispatch(doSetActiveChannel(channelId)),
   commentModAddDelegate: (modChanId, modChanName, creatorChannelClaim) =>
     dispatch(doCommentModAddDelegate(modChanId, modChanName, creatorChannelClaim, true)),
+  doToast: (props) => dispatch(doToast(props)),
 });
 
 export default connect(select, perform)(CommentMenuList);

ui/component/commentMenuList/view.jsx

@@ -1,12 +1,14 @@
 // @flow
+import { getChannelFromClaim } from 'util/claim';
+import { MenuList, MenuItem } from '@reach/menu-button';
+import { parseURI } from 'lbry-redux';
+import { URL } from 'config';
+import { useHistory } from 'react-router';
 import * as ICONS from 'constants/icons';
 import * as MODALS from 'constants/modal_types';
-import React from 'react';
-import { MenuList, MenuItem } from '@reach/menu-button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import Icon from 'component/common/icon';
-import { parseURI } from 'lbry-redux';
+import React from 'react';
-import { getChannelFromClaim } from 'util/claim';
 
 type Props = {
   uri: ?string,
@@ -18,7 +20,6 @@ type Props = {
   disableEdit?: boolean,
   disableRemove?: boolean,
   supportAmount?: any,
-  handleEditComment: () => void,
   // --- select ---
   claim: ?Claim,
   claimIsMine: boolean,
@@ -27,6 +28,8 @@ type Props = {
   playingUri: ?PlayingUri,
   moderationDelegatorsById: { [string]: { global: boolean, delegators: { name: string, claimId: string } } },
   // --- perform ---
+  doToast: ({ message: string }) => void,
+  handleEditComment: () => void,
   openModal: (id: string, {}) => void,
   clearPlayingUri: () => void,
   muteChannel: (string) => void,
@@ -42,24 +45,29 @@ function CommentMenuList(props: Props) {
     authorUri,
     commentIsMine,
     commentId,
-    muteChannel,
-    pinComment,
-    clearPlayingUri,
     activeChannelClaim,
     contentChannelPermanentUrl,
     isTopLevel,
     isPinned,
-    handleEditComment,
-    commentModAddDelegate,
     playingUri,
     moderationDelegatorsById,
     disableEdit,
     disableRemove,
-    openModal,
     supportAmount,
+    doToast,
+    handleEditComment,
+    openModal,
+    clearPlayingUri,
+    muteChannel,
+    pinComment,
+    commentModAddDelegate,
     setQuickReply,
   } = props;
 
+  const {
+    location: { pathname, search },
+  } = useHistory();
+
   const contentChannelClaim = getChannelFromClaim(claim);
   const activeModeratorInfo = activeChannelClaim && moderationDelegatorsById[activeChannelClaim.claim_id];
   const activeChannelIsCreator = activeChannelClaim && activeChannelClaim.permanent_url === contentChannelPermanentUrl;
@@ -70,10 +78,6 @@ function CommentMenuList(props: Props) {
     activeModeratorInfo &&
     Object.values(activeModeratorInfo.delegators).includes(contentChannelClaim.claim_id);
 
-  function handlePinComment(commentId, claimId, remove) {
-    pinComment(commentId, claimId, remove);
-  }
-
   function handleDeleteComment() {
     if (playingUri && playingUri.source === 'comment') {
       clearPlayingUri();
@@ -87,14 +91,6 @@ function CommentMenuList(props: Props) {
     });
   }
 
-  function handleCommentBlock() {
-    openModal(MODALS.BLOCK_CHANNEL, { contentUri: uri, commenterUri: authorUri });
-  }
-
-  function handleCommentMute() {
-    muteChannel(authorUri);
-  }
-
   function assignAsModerator() {
     if (activeChannelClaim && authorUri) {
       const { channelName, channelClaimId } = parseURI(authorUri);
@@ -155,6 +151,15 @@ function CommentMenuList(props: Props) {
     );
   }
 
+  function handleCopyCommentLink() {
+    const urlParams = new URLSearchParams(search);
+    urlParams.delete('lc');
+    urlParams.append('lc', commentId);
+    navigator.clipboard
+      .writeText(`${URL}${pathname}?${urlParams.toString()}`)
+      .then(() => doToast({ message: __('Link copied.') }));
+  }
+
   return (
     <MenuList className="menu__list">
       {activeChannelIsCreator && <div className="comment__menu-title">{__('Creator tools')}</div>}
@@ -162,7 +167,7 @@ function CommentMenuList(props: Props) {
       {activeChannelIsCreator && isTopLevel && (
         <MenuItem
           className="comment__menu-option menu__link"
-          onSelect={() => handlePinComment(commentId, claim ? claim.claim_id : '', isPinned)}
+          onSelect={() => pinComment(commentId, claim ? claim.claim_id : '', isPinned)}
         >
           <span className={'button__content'}>
             <Icon aria-hidden icon={ICONS.PIN} className={'icon'} />
@@ -171,20 +176,27 @@ function CommentMenuList(props: Props) {
         </MenuItem>
       )}
 
-      {activeChannelIsCreator && (
+      {activeChannelIsCreator && activeChannelClaim && activeChannelClaim.permanent_url !== authorUri && (
         <MenuItem className="comment__menu-option" onSelect={assignAsModerator}>
           <div className="menu__link">
             <Icon aria-hidden icon={ICONS.ADD} />
             {__('Add as moderator')}
           </div>
           <span className="comment__menu-help">
-            {__('Assign this user to moderate %channel%', {
+            {activeChannelClaim
-              channel: activeChannelClaim ? activeChannelClaim.name : __('your channel'),
+              ? __('Assign this user to moderate %channel%.', { channel: activeChannelClaim.name })
-            })}
+              : __('Assign this user to moderate your channel.')}
           </span>
         </MenuItem>
       )}
 
+      {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url === authorUri && !disableEdit && (
+        <MenuItem className="comment__menu-option menu__link" onSelect={handleEditComment}>
+          <Icon aria-hidden icon={ICONS.EDIT} />
+          {__('Edit')}
+        </MenuItem>
+      )}
+
       {!disableRemove &&
         activeChannelClaim &&
         (activeChannelClaim.permanent_url === authorUri ||
@@ -197,28 +209,32 @@ function CommentMenuList(props: Props) {
           </MenuItem>
         )}
 
-      {commentIsMine && activeChannelClaim && activeChannelClaim.permanent_url === authorUri && !disableEdit && (
+      {!commentIsMine && (
-        <MenuItem className="comment__menu-option menu__link" onSelect={handleEditComment}>
+        <>
-          <Icon aria-hidden icon={ICONS.EDIT} />
+          <MenuItem
-          {__('Edit')}
+            className="comment__menu-option"
-        </MenuItem>
+            onSelect={() => openModal(MODALS.BLOCK_CHANNEL, { contentUri: uri, commenterUri: authorUri })}
+          >
+            {getBlockOptionElem()}
+          </MenuItem>
+          <MenuItem className="comment__menu-option" onSelect={() => muteChannel(authorUri)}>
+            <div className="menu__link">
+              <Icon aria-hidden icon={ICONS.MUTE} />
+              {__('Mute')}
+            </div>
+            {activeChannelIsCreator && (
+              <span className="comment__menu-help">{__('Hide this channel for you only.')}</span>
+            )}
+          </MenuItem>
+        </>
       )}
 
-      {!commentIsMine && (
+      {IS_WEB && (
-        <MenuItem className="comment__menu-option" onSelect={handleCommentBlock}>
+        <MenuItem className="comment__menu-option" onSelect={handleCopyCommentLink}>
-          {getBlockOptionElem()}
-        </MenuItem>
-      )}
-
-      {!commentIsMine && (
-        <MenuItem className="comment__menu-option" onSelect={handleCommentMute}>
           <div className="menu__link">
-            <Icon aria-hidden icon={ICONS.MUTE} />
+            <Icon aria-hidden icon={ICONS.COPY_LINK} />
-            {__('Mute')}
+            {__('Copy Link')}
           </div>
-          {activeChannelIsCreator && (
-            <span className="comment__menu-help">{__('Hide this channel for you only.')}</span>
-          )}
         </MenuItem>
       )}
 

ui/component/commentsList/index.js

@@ -9,6 +9,7 @@ import {
   makeSelectTopLevelCommentsForUri,
   makeSelectTopLevelTotalPagesForUri,
   selectIsFetchingComments,
+  selectIsFetchingCommentsById,
   selectIsFetchingReacts,
   makeSelectTotalCommentsCountForUri,
   selectOthersReactsById,
@@ -33,6 +34,7 @@ const select = (state, props) => {
     claim: makeSelectClaimForUri(props.uri)(state),
     claimIsMine: makeSelectClaimIsMine(props.uri)(state),
     isFetchingComments: selectIsFetchingComments(state),
+    isFetchingCommentsById: selectIsFetchingCommentsById(state),
     isFetchingReacts: selectIsFetchingReacts(state),
     fetchingChannels: selectFetchingMyChannels(state),
     settingsByChannelId: selectSettingsByChannelId(state),
@@ -46,7 +48,7 @@ const perform = (dispatch) => ({
   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)),
+  resetComments: (claimId) => dispatch(doCommentReset(claimId)),
 });
 
 export default connect(select, perform)(CommentsList);

ui/component/commentsList/view.jsx

@@ -1,27 +1,25 @@
 // @flow
-import * as REACTION_TYPES from 'constants/reactions';
-import * as ICONS from 'constants/icons';
 import { COMMENT_HIGHLIGHTED } from 'constants/classnames';
 import { COMMENT_PAGE_SIZE_TOP_LEVEL, SORT_BY } from 'constants/comment';
-import React, { useEffect } from 'react';
+import { ENABLE_COMMENT_REACTIONS } from 'config';
-import classnames from 'classnames';
+import { getChannelIdFromClaim } from 'util/claim';
-import CommentView from 'component/comment';
+import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
-import Spinner from 'component/spinner';
+import * as ICONS from 'constants/icons';
+import * as REACTION_TYPES from 'constants/reactions';
 import Button from 'component/button';
 import Card from 'component/common/card';
+import classnames from 'classnames';
 import CommentCreate from 'component/commentCreate';
-import usePersistedState from 'effects/use-persisted-state';
+import CommentView from 'component/comment';
-import { ENABLE_COMMENT_REACTIONS } from 'config';
-import Empty from 'component/common/empty';
 import debounce from 'util/debounce';
-import { useIsMobile, useIsMediumScreen } from 'effects/use-screensize';
+import Empty from 'component/common/empty';
-import { getChannelIdFromClaim } from 'util/claim';
+import React, { useEffect } from 'react';
+import Spinner from 'component/spinner';
+import useFetched from 'effects/use-fetched';
+import usePersistedState from 'effects/use-persisted-state';
 
 const DEBOUNCE_SCROLL_HANDLER_MS = 200;
 
-// "3" due to 2 separate fetches needed + 1 buffer just in case.
-const MAX_LINKED_COMMENT_SCROLL_ATTEMPTS = 3;
-
 function scaleToDevicePixelRatio(value) {
   const devicePixelRatio = window.devicePixelRatio || 1.0;
   if (devicePixelRatio < 1.0) {
@@ -35,15 +33,12 @@ type Props = {
   pinnedComments: Array<Comment>,
   topLevelComments: Array<Comment>,
   topLevelTotalPages: number,
-  fetchTopLevelComments: (string, number, number, number) => void,
-  fetchComment: (string) => void,
-  fetchReacts: (Array<string>) => Promise<any>,
-  resetComments: (string) => void,
   uri: string,
   claim: ?Claim,
   claimIsMine: boolean,
   myChannels: ?Array<ChannelClaim>,
   isFetchingComments: boolean,
+  isFetchingCommentsById: boolean,
   isFetchingReacts: boolean,
   linkedCommentId?: string,
   totalComments: number,
@@ -52,15 +47,16 @@ type Props = {
   othersReactsById: ?{ [string]: { [REACTION_TYPES.LIKE | REACTION_TYPES.DISLIKE]: number } },
   activeChannelId: ?string,
   settingsByChannelId: { [channelId: string]: PerChannelSettings },
+  fetchReacts: (Array<string>) => Promise<any>,
+  commentsAreExpanded?: boolean,
+  fetchTopLevelComments: (string, number, number, number) => void,
+  fetchComment: (string) => void,
+  resetComments: (string) => void,
 };
 
 function CommentList(props: Props) {
   const {
     allCommentIds,
-    fetchTopLevelComments,
-    fetchComment,
-    fetchReacts,
-    resetComments,
     uri,
     pinnedComments,
     topLevelComments,
@@ -69,6 +65,7 @@ function CommentList(props: Props) {
     claimIsMine,
     myChannels,
     isFetchingComments,
+    isFetchingCommentsById,
     isFetchingReacts,
     linkedCommentId,
     totalComments,
@@ -77,21 +74,28 @@ function CommentList(props: Props) {
     othersReactsById,
     activeChannelId,
     settingsByChannelId,
+    fetchReacts,
+    commentsAreExpanded,
+    fetchTopLevelComments,
+    fetchComment,
+    resetComments,
   } = props;
 
+  const isMobile = useIsMobile();
+  const isMediumScreen = useIsMediumScreen();
   const spinnerRef = React.useRef();
   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 [lcScrollAttempts, setLcScrollAttempts] = React.useState(
+  const fetchedCommentsOnce = useFetched(isFetchingComments);
-    linkedCommentId ? 0 : MAX_LINKED_COMMENT_SCROLL_ATTEMPTS
+  const fetchedReactsOnce = useFetched(isFetchingReacts);
-  );
+  const fetchedLinkedComment = useFetched(isFetchingCommentsById);
-  const isMobile = useIsMobile();
+  const hasDefaultExpansion = commentsAreExpanded || (!isMobile && !isMediumScreen);
-  const isMediumScreen = useIsMediumScreen();
+  const [expandedComments, setExpandedComments] = React.useState(hasDefaultExpansion);
-  const [expandedComments, setExpandedComments] = React.useState(!isMobile && !isMediumScreen);
   const totalFetchedComments = allCommentIds ? allCommentIds.length : 0;
   const channelId = getChannelIdFromClaim(claim);
   const channelSettings = channelId ? settingsByChannelId[channelId] : undefined;
+  const moreBelow = page < topLevelTotalPages;
 
   // Display comments immediately if not fetching reactions
   // If not, wait to show comments until reactions are fetched
@@ -99,20 +103,6 @@ function CommentList(props: Props) {
     Boolean(othersReactsById) || !ENABLE_COMMENT_REACTIONS
   );
 
-  const hasNoComments = !totalComments;
-  const moreBelow = page < topLevelTotalPages;
-
-  const isMyComment = (channelId: string): boolean => {
-    if (myChannels != null && channelId != null) {
-      for (let i = 0; i < myChannels.length; i++) {
-        if (myChannels[i].claim_id === channelId) {
-          return true;
-        }
-      }
-    }
-    return false;
-  };
-
   function changeSort(newSort) {
     if (sort !== newSort) {
       setSort(newSort);
@@ -120,41 +110,16 @@ function CommentList(props: Props) {
     }
   }
 
-  function getCommentElems(comments) {
-    return comments.map((comment) => {
-      return (
-        <CommentView
-          isTopLevel
-          threadDepth={3}
-          key={comment.comment_id}
-          uri={uri}
-          authorUri={comment.channel_url}
-          author={comment.channel_name}
-          claimId={comment.claim_id}
-          commentId={comment.comment_id}
-          message={comment.comment}
-          timePosted={comment.timestamp * 1000}
-          claimIsMine={claimIsMine}
-          commentIsMine={comment.channel_id && isMyComment(comment.channel_id)}
-          linkedCommentId={linkedCommentId}
-          isPinned={comment.is_pinned}
-          supportAmount={comment.support_amount}
-          numDirectReplies={comment.replies}
-          isModerator={comment.is_moderator}
-          isGlobalMod={comment.is_global_mod}
-          isFiat={comment.is_fiat}
-        />
-      );
-    });
-  }
-
   // Reset comments
   useEffect(() => {
     if (page === 0) {
-      resetComments(uri);
+      if (claim) {
+        resetComments(claim.claim_id);
+      }
       setPage(1);
     }
-  }, [page, uri, resetComments]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, uri, resetComments]); // 'claim' is derived from 'uri'
 
   // Fetch top-level comments
   useEffect(() => {
@@ -165,7 +130,7 @@ function CommentList(props: Props) {
 
       fetchTopLevelComments(uri, page, COMMENT_PAGE_SIZE_TOP_LEVEL, sort);
     }
-  }, [fetchTopLevelComments, uri, page, resetComments, sort, linkedCommentId, fetchComment]);
+  }, [fetchComment, fetchTopLevelComments, linkedCommentId, page, sort, uri]);
 
   // Fetch reacts
   useEffect(() => {
@@ -190,39 +155,36 @@ function CommentList(props: Props) {
       }
     }
   }, [
-    totalFetchedComments,
-    allCommentIds,
-    othersReactsById,
-    myReactsByCommentId,
-    fetchReacts,
-    uri,
     activeChannelId,
+    allCommentIds,
+    fetchReacts,
     fetchingChannels,
     isFetchingReacts,
+    myReactsByCommentId,
+    othersReactsById,
+    totalFetchedComments,
   ]);
 
   // Scroll to linked-comment
   useEffect(() => {
-    if (lcScrollAttempts < MAX_LINKED_COMMENT_SCROLL_ATTEMPTS && readyToDisplayComments && !isFetchingComments) {
+    if (fetchedLinkedComment && fetchedCommentsOnce && fetchedReactsOnce) {
       const elems = document.getElementsByClassName(COMMENT_HIGHLIGHTED);
       if (elems.length > 0) {
-        setLcScrollAttempts(MAX_LINKED_COMMENT_SCROLL_ATTEMPTS);
+        const ROUGH_HEADER_HEIGHT = 125; // @see: --header-height
         const linkedComment = elems[0];
-        linkedComment.scrollIntoView({ block: 'start' });
+        window.scrollTo({
-        window.scrollBy(0, -125);
+          top: linkedComment.getBoundingClientRect().top + window.scrollY - ROUGH_HEADER_HEIGHT,
-      } else {
+          left: 0,
-        setLcScrollAttempts(lcScrollAttempts + 1);
+          behavior: 'smooth',
+        });
       }
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [fetchedLinkedComment, fetchedCommentsOnce, fetchedReactsOnce]);
-  }, [readyToDisplayComments, isFetchingComments]); // We just want to respond to these, nothing else.
 
   // Infinite scroll
   useEffect(() => {
     function shouldFetchNextPage(page, topLevelTotalPages, window, document, yPrefetchPx = 1000) {
-      if (!spinnerRef || !spinnerRef.current) {
+      if (!spinnerRef || !spinnerRef.current) return false;
-        return false;
-      }
 
       const rect = spinnerRef.current.getBoundingClientRect(); // $FlowFixMe
       const windowH = window.innerHeight || document.documentElement.clientHeight; // $FlowFixMe
@@ -244,7 +206,7 @@ function CommentList(props: Props) {
     }
 
     const handleCommentScroll = debounce(() => {
-      if (!isMobile && !isMediumScreen && shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
+      if (hasDefaultExpansion && shouldFetchNextPage(page, topLevelTotalPages, window, document)) {
         setPage(page + 1);
       }
     }, DEBOUNCE_SCROLL_HANDLER_MS);
@@ -257,85 +219,76 @@ function CommentList(props: Props) {
         return () => window.removeEventListener('scroll', handleCommentScroll);
       }
     }
-  }, [
+  }, [hasDefaultExpansion, isFetchingComments, moreBelow, page, readyToDisplayComments, topLevelTotalPages]);
-    isMobile,
-    isMediumScreen,
-    page,
-    moreBelow,
-    spinnerRef,
-    isFetchingComments,
-    readyToDisplayComments,
-    topLevelComments.length,
-    topLevelTotalPages,
-  ]);
 
-  // Expand comments
+  const getCommentElems = (comments) => {
-  useEffect(() => {
+    return comments.map((comment) => (
-    if (!isMobile && !isMediumScreen && !expandedComments) {
+      <CommentView
-      setExpandedComments(true);
+        isTopLevel
-    }
+        threadDepth={3}
-  }, [isMobile, isMediumScreen, expandedComments]);
+        key={comment.comment_id}
+        uri={uri}
+        authorUri={comment.channel_url}
+        author={comment.channel_name}
+        claimId={comment.claim_id}
+        commentId={comment.comment_id}
+        message={comment.comment}
+        timePosted={comment.timestamp * 1000}
+        claimIsMine={claimIsMine}
+        commentIsMine={
+          comment.channel_id && myChannels && myChannels.some(({ claim_id }) => claim_id === comment.channel_id)
+        }
+        linkedCommentId={linkedCommentId}
+        isPinned={comment.is_pinned}
+        supportAmount={comment.support_amount}
+        numDirectReplies={comment.replies}
+        isModerator={comment.is_moderator}
+        isGlobalMod={comment.is_global_mod}
+        isFiat={comment.is_fiat}
+      />
+    ));
+  };
+
+  const sortButton = (label, icon, sortOption) => {
+    return (
+      <Button
+        button="alt"
+        label={label}
+        icon={icon}
+        iconSize={18}
+        onClick={() => changeSort(sortOption)}
+        className={classnames(`button-toggle`, {
+          'button-toggle--active': sort === sortOption,
+        })}
+      />
+    );
+  };
 
   return (
     <Card
+      className="card--enable-overflow"
       title={
-        totalComments > 0
+        (totalComments === 0 && __('Leave a comment')) ||
-          ? totalComments === 1
+        (totalComments === 1 && __('1 comment')) ||
-            ? __('1 comment')
+        __('%totalComments% comments', { totalComments })
-            : __('%total_comments% comments', { total_comments: totalComments })
-          : __('Leave a comment')
       }
       titleActions={
         <>
           {totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
             <span className="comment__sort">
-              <Button
+              {sortButton(__('Best'), ICONS.BEST, SORT_BY.POPULARITY)}
-                button="alt"
+              {sortButton(__('Controversial'), ICONS.CONTROVERSIAL, SORT_BY.CONTROVERSY)}
-                label={__('Best')}
+              {sortButton(__('New'), ICONS.NEW, SORT_BY.NEWEST)}
-                icon={ICONS.BEST}
-                iconSize={18}
-                onClick={() => changeSort(SORT_BY.POPULARITY)}
-                className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.POPULARITY,
-                })}
-              />
-              <Button
-                button="alt"
-                label={__('Controversial')}
-                icon={ICONS.CONTROVERSIAL}
-                iconSize={18}
-                onClick={() => changeSort(SORT_BY.CONTROVERSY)}
-                className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.CONTROVERSY,
-                })}
-              />
-              <Button
-                button="alt"
-                label={__('New')}
-                icon={ICONS.NEW}
-                iconSize={18}
-                onClick={() => changeSort(SORT_BY.NEWEST)}
-                className={classnames(`button-toggle`, {
-                  'button-toggle--active': sort === SORT_BY.NEWEST,
-                })}
-              />
             </span>
           )}
-          <Button
+          <Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
-            button="alt"
-            icon={ICONS.REFRESH}
-            title={__('Refresh')}
-            onClick={() => {
-              setPage(0);
-            }}
-          />
         </>
       }
       actions={
         <>
           <CommentCreate uri={uri} />
 
-          {channelSettings && channelSettings.comments_enabled && !isFetchingComments && hasNoComments && (
+          {channelSettings && channelSettings.comments_enabled && !isFetchingComments && !totalComments && (
             <Empty padded text={__('That was pretty deep. What do you think?')} />
           )}
 
@@ -349,36 +302,28 @@ function CommentList(props: Props) {
             {readyToDisplayComments && topLevelComments && getCommentElems(topLevelComments)}
           </ul>
 
-          {(isMobile || isMediumScreen) && (
+          {!hasDefaultExpansion && (
             <div className="card__bottom-actions--comments">
               {(!expandedComments || moreBelow) && (
                 <Button
                   button="link"
-                  title={!expandedComments ? __('Expand Comments') : __('Load More')}
+                  title={!expandedComments ? __('Expand') : __('More')}
                   label={!expandedComments ? __('Expand') : __('More')}
-                  onClick={() => {
+                  onClick={() => (!expandedComments ? setExpandedComments(true) : setPage(page + 1))}
-                    if (!expandedComments) {
-                      setExpandedComments(true);
-                    } else {
-                      setPage(page + 1);
-                    }
-                  }}
                 />
               )}
               {expandedComments && (
                 <Button
                   button="link"
-                  title={__('Collapse Thread')}
+                  title={__('Collapse')}
                   label={__('Collapse')}
-                  onClick={() => {
+                  onClick={() => setExpandedComments(false)}
-                    setExpandedComments(false);
-                  }}
                 />
               )}
             </div>
           )}
 
-          {(isFetchingComments || (!isMobile && !isMediumScreen && moreBelow)) && (
+          {(isFetchingComments || (hasDefaultExpansion && moreBelow)) && (
             <div className="main--empty" ref={spinnerRef}>
               <Spinner type="small" />
             </div>

ui/component/common/icon-custom.jsx

@@ -2469,4 +2469,61 @@ export const icons = {
       <line x1="4" y1="4" x2="9" y2="9" />
     </g>
   ),
+  [ICONS.HOLD_PHONE]: buildIcon(
+    <g>
+      <path d="M12 17.491L1.5 17.491" />
+      <path d="M8,19.241H8a.25.25,0,0,1,.25.25h0a.25.25,0,0,1-.25.25H8a.25.25,0,0,1-.25-.25h0a.25.25,0,0,1,.25-.25" />
+      <path d="M12.5,21.491h-9a2,2,0,0,1-2-2v-17a2,2,0,0,1,2-2h9a2,2,0,0,1,2,2V13.265" />
+      <path d="M22.5,23.487l-3-4.393V13.372c0-2.127-3.46-3.9-5-5.08" />
+      <path d="M16.5,14.868l-3.727-2.987a1.331,1.331,0,0,0-1.883,1.883l3.61,4.079V20.4c0,1.206,1.724,3.111,1.724,3.111" />
+      <path d="M5.750 5.741 A2.250 2.250 0 1 0 10.250 5.741 A2.250 2.250 0 1 0 5.750 5.741 Z" />
+      <path d="M12.11,11.524a4.628,4.628,0,0,0-8.61.967" />
+    </g>
+  ),
+  [ICONS.LIFE]: buildIcon(
+    <g>
+      <path d="M12 23.5L12 6.836" />
+      <path d="M12,6.836s2-1.291,2-3.228a4.144,4.144,0,0,0-1.69-3,.49.49,0,0,0-.621,0,4.143,4.143,0,0,0-1.689,3C10,5.545,12,6.836,12,6.836Z" />
+      <path d="M12,10.455s.9-4.038,6.093-4.038a.5.5,0,0,1,.419.8A7.942,7.942,0,0,1,12,10.455Z" />
+      <path d="M12,10.455s-.9-4.038-6.093-4.038a.5.5,0,0,0-.419.8A7.942,7.942,0,0,0,12,10.455Z" />
+      <path d="M12,15.455s1.809-4.31,7.6-3.2a.5.5,0,0,1,.262.858A8.855,8.855,0,0,1,12,15.455Z" />
+      <path d="M12,15.455s-1.809-4.31-7.6-3.2a.5.5,0,0,0-.262.858A8.855,8.855,0,0,0,12,15.455Z" />
+      <path d="M12,19.955s-2.767-3.766-8.139-1.331a.505.505,0,0,0-.054.9A8.853,8.853,0,0,0,12,19.955Z" />
+      <path d="M12,19.955s2.767-3.766,8.139-1.331a.505.505,0,0,1,.054.9A8.853,8.853,0,0,1,12,19.955Z" />
+    </g>
+  ),
+  [ICONS.ARTISTS]: buildIcon(
+    <g>
+      <path d="M10.107,16.884,22.372,4.657a2.5,2.5,0,0,0-3.744-3.314L7.954,15.04" />
+      <path d="M1.285,22.879a.5.5,0,0,1,.027-.915C3.693,21,2.926,18.286,3.633,16.835a3.56,3.56,0,0,1,4.728-1.627C13.677,17.8,7.349,25.765,1.285,22.879Z" />
+    </g>
+  ),
+  [ICONS.MYSTERIES]: buildIcon(
+    <g>
+      <path d="M9.926,14.581c-6.5,0-5.912-5.912-5.912-5.912C11.108,8.669,9.926,14.581,9.926,14.581Z" />
+      <path d="M14.074,14.581c6.5,0,5.912-5.912,5.912-5.912C12.892,8.669,14.074,14.581,14.074,14.581Z" />
+      <path d="M22.5,10.25c0,6.352-7.5,13-10.5,13S1.5,16.6,1.5,10.25,5.648.75,12,.75,22.5,3.9,22.5,10.25Z" />
+    </g>
+  ),
+  [ICONS.TECHNOLOGY]: buildIcon(
+    <g>
+      <rect x="0.5" y="13.5" width="23" height="10" rx="2" ry="2" />
+      <path d="M3.5,13.5v-1a3,3,0,0,1,3-3H20a3.5,3.5,0,0,0,0-7H13.5A1.5,1.5,0,0,1,12,1V.5" />
+      <line x1="4" y1="20.5" x2="5" y2="20.5" />
+      <line x1="4" y1="18.5" x2="5" y2="18.5" />
+      <line x1="7" y1="18.5" x2="8" y2="18.5" />
+      <line x1="10" y1="18.5" x2="11" y2="18.5" />
+      <line x1="13" y1="18.5" x2="14" y2="18.5" />
+      <line x1="16" y1="18.5" x2="17" y2="18.5" />
+      <line x1="19" y1="18.5" x2="20" y2="18.5" />
+      <line x1="4" y1="16.5" x2="5" y2="16.5" />
+      <line x1="7" y1="16.5" x2="8" y2="16.5" />
+      <line x1="10" y1="16.5" x2="11" y2="16.5" />
+      <line x1="13" y1="16.5" x2="14" y2="16.5" />
+      <line x1="16" y1="16.5" x2="17" y2="16.5" />
+      <line x1="19" y1="16.5" x2="20" y2="16.5" />
+      <line x1="7" y1="20.5" x2="17" y2="20.5" />
+      <line x1="19" y1="20.5" x2="20" y2="20.5" />
+    </g>
+  ),
 };

ui/component/copyableStreamkey/index.js

@@ -1,7 +0,0 @@
-import { connect } from 'react-redux';
-import { doToast } from 'redux/actions/notifications';
-import CopyableStreamkey from './view';
-
-export default connect(null, {
-  doToast,
-})(CopyableStreamkey);

ui/component/copyableStreamkey/view.jsx

@@ -1,93 +0,0 @@
-// @flow
-import * as ICONS from 'constants/icons';
-import { FormField } from 'component/common/form';
-import Button from 'component/button';
-import React, { useRef, Fragment } from 'react';
-
-type Props = {
-  copyable: string,
-  snackMessage: ?string,
-  doToast: ({ message: string }) => void,
-  primaryButton?: boolean,
-  name?: string,
-  onCopy?: (string) => string,
-  enableMask?: boolean,
-};
-
-export default function CopyableStreamkey(props: Props) {
-  const { copyable, doToast, snackMessage, primaryButton = false, name, onCopy, enableMask = true } = props;
-
-  const input = useRef();
-
-  function copyToClipboard() {
-    const topRef = input.current;
-    if (topRef[1].type === 'password') {
-      navigator.clipboard.writeText(topRef[1].defaultValue);
-    }
-    if (topRef[1].type === 'text') {
-      topRef[1].select();
-      if (onCopy) {
-        onCopy(topRef[1]);
-      }
-    }
-
-    document.execCommand('copy');
-  }
-
-  function checkMaskType() {
-    if (enableMask === true) {
-      return 'password';
-    }
-    if (enableMask === false) {
-      return 'text';
-    }
-  }
-  function showStreamkeyFunc() {
-    const topRef = input.current;
-    if (topRef[1].type === 'password') {
-      topRef[1].type = 'text';
-      topRef[0].innerText = 'Hide';
-      return;
-    }
-    if (topRef[1].type === 'text') {
-      topRef[1].type = 'password';
-      topRef[0].innerText = 'Show';
-    }
-  }
-
-  return (
-    <Fragment>
-      <form ref={input}>
-        <div>
-          <label name="livestream-key">Stream key</label>{' '}
-          <Button
-            className="button--link"
-            label={__('Show')}
-            onClick={() => {
-              showStreamkeyFunc();
-            }}
-          />
-        </div>
-        <FormField
-          type={checkMaskType()}
-          className="form-field--copyable-streamkey"
-          readOnly
-          name={name}
-          value={copyable || ''}
-          inputButton={
-            <Button
-              button={primaryButton ? 'primary' : 'secondary'}
-              icon={ICONS.COPY}
-              onClick={() => {
-                copyToClipboard();
-                doToast({
-                  message: snackMessage || __('Text copied'),
-                });
-              }}
-            />
-          }
-        />
-      </form>
-    </Fragment>
-  );
-}

ui/component/copyableText/view.jsx

@@ -12,23 +12,38 @@ type Props = {
   primaryButton?: boolean,
   name?: string,
   onCopy?: (string) => string,
+  enableInputMask?: boolean,
 };
 
 export default function CopyableText(props: Props) {
-  const { copyable, doToast, snackMessage, label, primaryButton = false, name, onCopy } = props;
+  const { copyable, doToast, snackMessage, label, primaryButton = false, name, onCopy, enableInputMask } = props;
+  const [maskInput, setMaskInput] = React.useState(enableInputMask);
 
   const input = useRef();
 
-  function copyToClipboard() {
+  function handleCopyText() {
-    const topRef = input.current;
+    if (enableInputMask) {
-    if (topRef && topRef.input && topRef.input.current) {
+      navigator.clipboard
-      topRef.input.current.select();
+        .writeText(copyable)
-      if (onCopy) {
+        .then(() => {
-        onCopy(topRef.input.current);
+          doToast({ message: snackMessage || __('Text copied') });
+        })
+        .catch(() => {
+          doToast({ message: __('Failed to copy.'), isError: true });
+        });
+    } else {
+      const topRef = input.current;
+      if (topRef && topRef.input && topRef.input.current) {
+        topRef.input.current.select();
+        if (onCopy) {
+          // Allow clients to change the selection before making the copy.
+          onCopy(topRef.input.current);
+        }
       }
-    }
 
-    document.execCommand('copy');
+      document.execCommand('copy');
+      doToast({ message: snackMessage || __('Text copied') });
+    }
   }
 
   function onFocus() {
@@ -41,7 +56,7 @@ export default function CopyableText(props: Props) {
 
   return (
     <FormField
-      type="text"
+      type={maskInput ? 'password' : 'text'}
       className="form-field--copyable"
       readOnly
       name={name}
@@ -50,16 +65,12 @@ export default function CopyableText(props: Props) {
       ref={input}
       onFocus={onFocus}
       inputButton={
-        <Button
+        <Button button={primaryButton ? 'primary' : 'secondary'} icon={ICONS.COPY} onClick={handleCopyText} />
-          button={primaryButton ? 'primary' : 'secondary'}
+      }
-          icon={ICONS.COPY}
+      helper={
-          onClick={() => {
+        enableInputMask && (
-            copyToClipboard();
+          <Button button="link" onClick={() => setMaskInput(!maskInput)} label={maskInput ? __('Show') : __('Hide')} />
-            doToast({
+        )
-              message: snackMessage || __('Text copied'),
-            });
-          }}
-        />
       }
     />
   );

ui/component/creatorAnalytics/view.jsx

@@ -27,7 +27,9 @@ export default function CreatorAnalytics(props: Props) {
   const [error, setError] = React.useState();
   const [fetchingStats, setFetchingStats] = React.useState(false);
   const claimId = claim && claim.claim_id;
-  const channelHasClaims = claim && claim.meta && claim.meta.claims_in_channel && claim.meta.claims_in_channel > 0;
+  // TODO: put this back when hubs are fixed
+  // const channelHasClaims = claim && claim.meta && claim.meta.claims_in_channel && claim.meta.claims_in_channel > 0 || true;
+  const channelHasClaims = true;
 
   React.useEffect(() => {
     setStats(null);

ui/component/dateTime/view.jsx

@@ -104,11 +104,15 @@ class DateTime extends React.Component<Props, State> {
         return null;
       }
 
-      return <span title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>{DateTime.getTimeAgoStr(date)}</span>;
+      return (
+        <span className="date_time" title={moment(date).format(`MMMM Do, YYYY ${clockFormat}`)}>
+          {DateTime.getTimeAgoStr(date)}
+        </span>
+      );
     }
 
     return (
-      <span>
+      <span className="date_time">
         {date && show === DateTime.SHOW_DATE && moment(date).format('MMMM Do, YYYY')}
         {date && show === DateTime.SHOW_TIME && moment(date).format(clockFormat)}
         {!date && '...'}

ui/component/downloadProgress/index.js

@@ -1,16 +1,24 @@
 import { connect } from 'react-redux';
 import DownloadProgress from './view';
-import { doSetPlayingUri, doStopDownload } from 'redux/actions/content';
+import { doSetPlayingUri, doStopDownload, doUpdateDownloadingStatus } from 'redux/actions/content';
+import { selectFileInfosByOutpoint } from 'lbry-redux';
+
 const select = (state) => {
-  // console.log('DownloadProgress select state', state.fileInfo);
+  const byOutpoint = selectFileInfosByOutpoint(state);
+  const runningByOutpoint = [];
+
+  for (const key in byOutpoint) {
+    if (byOutpoint[key] && byOutpoint[key].status === 'running') runningByOutpoint.push(byOutpoint[key]);
+  }
 
   return {
-    downloadList: state.fileInfo.byOutpoint,
+    downloadList: runningByOutpoint,
   };
 };
 
 const perform = (dispatch) => ({
   pause: () => dispatch(doSetPlayingUri({ uri: null })),
-  stopDownload: (outpoint, sd_hash) => dispatch(doStopDownload(outpoint, sd_hash)),
+  updateDownloadingStatus: (outpoint) => dispatch(doUpdateDownloadingStatus(outpoint)),
+  stopDownload: (outpoint) => dispatch(doStopDownload(outpoint)),
 });
 export default connect(select, perform)(DownloadProgress);

ui/component/downloadProgress/view.jsx

@@ -1,67 +1,52 @@
 // @flow
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { shell } from 'electron';
-import Icon from 'component/common/icon';
+import Button from 'component/button';
 import * as ICONS from 'constants/icons';
+import { buildURI } from 'lbry-redux';
+import { formatBytes } from 'util/format-bytes';
+import usePersistedState from 'effects/use-persisted-state';
 
 type Props = {
-  downloadList: any,
+  downloadList: any[],
-  stopDownload: (outpoint: string, sd_hash: string) => void,
+  stopDownload: (outpoint: string) => void,
+  updateDownloadingStatus: (outpoint: string) => void,
 };
 
-function DownloadProgress(props: Props) {
+function DownloadProgress({ downloadList, stopDownload, updateDownloadingStatus }: Props) {
-  const [isShow, setIsShow] = useState(true);
+  const [isShow, setIsShow] = usePersistedState('download-progress', true);
   const [cancelHash] = useState({});
+  const [checkDownloadingHash] = useState({});
 
   const handleCancel = (hash, value) => {
     cancelHash[hash] = value;
   };
-  // return (
-  //   <div className="download--header">
-  //     <button className="download--top-close-button" onClick={() => setIsShow(false)}>
-  //       <div />
-  //     </button>
-  //     <DownloadState
-  //       fileName="being-offended-is-a-bad-trait.mp4"
-  //       title="Being offended is a bad trait"
-  //       releaseTime={'9/27/2021'}
-  //       writtenBytes={100000}
-  //       totalBytes={500000}
-  //       addedOn={1632388934}
-  //       directory={''}
-  //       stopDownload={props.stopDownload}
-  //       outpoint={'asdfasdfsa'}
-  //       sd_hash={'asdfsadfsadfsd'}
-  //       isCancel
-  //       handleCancel={handleCancel}
-  //     />
-  //   </div>
-  // );
-
-  // console.log('DownloadProgress', props.downloadList);
-  if (!props.downloadList) return null;
-
-  const downloadList = [];
-  Object.keys(props.downloadList).map((key) => {
-    const item = props.downloadList[key];
-    if (item.status === 'running') downloadList.push(item);
-  });
 
   if (downloadList.length === 0) return null;
 
+  downloadList.map((item) => {
+    if (item && !checkDownloadingHash[item.outpoint]) {
+      updateDownloadingStatus(item.outpoint);
+      checkDownloadingHash[item.outpoint] = true;
+    }
+  });
+
   if (!isShow) {
     return (
-      <button onClick={() => setIsShow(true)} className="download__toggle-button">
+      <Button
-        <Icon icon={ICONS.DOWNLOAD} size={40} />
+        iconSize={40}
-      </button>
+        icon={ICONS.DOWNLOAD}
+        className="download-progress__toggle-button"
+        onClick={() => setIsShow(true)}
+      />
     );
   }
 
   return (
-    <div className="download--header">
+    <div className="download-progress__header">
-      <button className="download--top-close-button" onClick={() => setIsShow(false)}>
+      <Button className="download-progress__top-close-button" onClick={() => setIsShow(false)}>
         <div />
-      </button>
+      </Button>
 
       {downloadList.map((item, index) => {
         let releaseTime = '';
@@ -69,9 +54,9 @@ function DownloadProgress(props: Props) {
           releaseTime = new Date(parseInt(item.metadata.release_time) * 1000).toISOString().split('T')[0];
         }
         return (
-          <div key={item.sd_hash}>
+          <div key={item.outpoint}>
-            {index !== 0 && <hr className="download--divider" />}
+            {index !== 0 && <hr className="download-progress__divider" />}
-            <DownloadState
+            <DownloadProgressItem
               fileName={item.suggested_file_name}
               title={item.metadata.title}
               releaseTime={releaseTime}
@@ -79,10 +64,11 @@ function DownloadProgress(props: Props) {
               totalBytes={item.total_bytes}
               addedOn={item.added_on}
               directory={item.download_directory}
-              stopDownload={props.stopDownload}
+              stopDownload={stopDownload}
               outpoint={item.outpoint}
-              sd_hash={item.sd_hash}
+              isCancel={cancelHash[item.outpoint]}
-              isCancel={cancelHash[item.sd_hash]}
+              claimID={item.claim_id}
+              claimName={item.claim_name}
               handleCancel={handleCancel}
             />
           </div>
@@ -92,7 +78,7 @@ function DownloadProgress(props: Props) {
   );
 }
 
-type DownloadStateProps = {
+type DownloadProgressItemProps = {
   fileName: string,
   writtenBytes: number,
   totalBytes: number,
@@ -101,13 +87,14 @@ type DownloadStateProps = {
   releaseTime: string,
   directory: string,
   outpoint: string,
-  sd_hash: string,
   isCancel: boolean,
-  stopDownload: (outpoint: string, sd_hash: string) => void,
+  claimID: string,
+  claimName: string,
+  stopDownload: (outpoint: string) => void,
   handleCancel: (hash: string, value: boolean) => void,
 };
 
-function DownloadState({
+function DownloadProgressItem({
   fileName,
   writtenBytes,
   totalBytes,
@@ -116,86 +103,95 @@ function DownloadState({
   releaseTime,
   directory,
   outpoint,
-  sd_hash,
   isCancel,
+  claimID,
+  claimName,
   stopDownload,
   handleCancel,
-}: DownloadStateProps) {
+}: DownloadProgressItemProps) {
   const processStopDownload = () => {
-    handleCancel(sd_hash, false);
+    handleCancel(outpoint, false);
-    stopDownload(outpoint, sd_hash);
+    stopDownload(outpoint);
   };
 
-  const percent = ((writtenBytes / totalBytes) * 100).toFixed(0);
+  const [percent, setPercent] = useState(0);
+  const [progressText, setProgressText] = useState('');
+
+  useEffect(() => {
+    const updatePercent = ((writtenBytes / totalBytes) * 100).toFixed(0);
+    setPercent(updatePercent);
+
+    let updateText = '';
+    const downloadSpeed = Math.ceil(writtenBytes / (Date.now() / 1000 - addedOn));
+    const remainingSecond = Math.ceil((totalBytes - writtenBytes) / downloadSpeed);
+    const remainingMinutes = Math.floor(remainingSecond / 60);
+
+    if (remainingMinutes > 0) {
+      updateText += __('%remainingMinutes% minutes %remainSecond% seconds remaining', {
+        remainingMinutes: remainingMinutes,
+        remainSecond: remainingSecond - 60 * remainingMinutes,
+      });
+    } else {
+      updateText += __('%remainSecond% seconds remaining', { remainSecond: remainingSecond - 60 * remainingMinutes });
+    }
+    updateText += ' -- ';
+
+    updateText += __('%written% of %total%', {
+      written: formatBytes(writtenBytes),
+      total: formatBytes(totalBytes),
+    });
+    updateText += ' ';
+
+    updateText += __('(%speed%/sec)', {
+      speed: formatBytes(downloadSpeed),
+    });
+
+    setProgressText(updateText);
+  }, [writtenBytes, totalBytes, addedOn]);
 
-  const sizeTypeText = ['Bytes', 'KB', 'MB', 'GB'];
-  const getSizeType = (size) => Math.floor(Math.log(size) / Math.log(1024));
-  const convertSizeUnit = (size, sizeType) => {
-    const unitSize = size / Math.pow(1024, sizeType);
-    if (unitSize > 100) return unitSize.toFixed(0);
-    if (unitSize > 10) return unitSize.toFixed(1);
-    return unitSize.toFixed(2);
-  };
   const openDownloadFolder = () => {
     shell.openPath(directory);
   };
 
-  let text = '';
-
-  const downloadSpeed = Math.ceil(writtenBytes / (Date.now() / 1000 - addedOn));
-  const remainingSecond = Math.ceil((totalBytes - writtenBytes) / downloadSpeed);
-  const remainingMinutes = Math.floor(remainingSecond / 60);
-
-  if (remainingMinutes > 0) text += `${remainingMinutes} minutes `;
-
-  text += `${remainingSecond - 60 * remainingMinutes} seconds remaining`;
-  text += ' -- ';
-
-  let sizeType = getSizeType(totalBytes);
-  text += ` ${convertSizeUnit(writtenBytes, sizeType)} of ${convertSizeUnit(totalBytes, sizeType)} ${
-    sizeTypeText[sizeType]
-  }`;
-
-  sizeType = getSizeType(downloadSpeed);
-  text += ` (${convertSizeUnit(downloadSpeed, sizeType)} ${sizeTypeText[sizeType]}/sec)`;
-
   return (
-    <div className="download--state-container">
+    <div className=" download-progress__state-container">
-      <div className="download--state-bar">
+      <div className="download-progress__state-bar">
-        <p className="download--file-name">{title}</p>
+        <Button
+          label={title}
+          className="download-progress__state-filename"
+          navigate={buildURI({ claimName, claimID })}
+        />
         <div
-          className="download--close-button"
+          className="download-progress__close-button"
           onClick={() => {
-            handleCancel(sd_hash, true);
+            handleCancel(outpoint, true);
           }}
         >
           &times;
         </div>
       </div>
-      <div className="download--state-bar">
+      <div className="download-progress__state-bar">
-        <a className="download--file-name-link" onClick={openDownloadFolder}>
+        <a className="download-progress__state-filename-link" onClick={openDownloadFolder}>
           {fileName}
         </a>
-        <p className="download--release-Time">{releaseTime}</p>
+        <p className="download-progress__release-time">{releaseTime}</p>
       </div>
-
+      <div className="download-progress__state-bar">
-      <div className="download--state-bar">
+        <div className="download-progress__bar-container">
-        <div className="download--bar-container">
+          <div className="download-progress__bar-content" style={{ width: `${percent}%` }} />
-          <div className="download--bar-content" style={{ width: `${percent}%` }} />
         </div>
       </div>
-
+      <p className="download-progress__count-time">{progressText}</p>
-      <p className="download-count-time">{text}</p>
       {isCancel && (
-        <div className="download-cancel">
+        <div className="download-progress__cancel">
-          <p>Do you want to cancel download this file?</p>
+          <p>{__('Do you cancel download this file?')}</p>
-          <div className="download-cancel-confirm">
+          <div className="download-progress__cancel-confirm">
-            <button type="button" className="download-cancel-ok" onClick={processStopDownload}>
+            <Button label={__('Yes')} className="download-progress__cancel-ok" onClick={processStopDownload} />
-              Yes
+            <Button
-            </button>
+              label={__('No')}
-            <button type="button" className="download-cancel-ok" onClick={() => handleCancel(sd_hash, false)}>
+              className="download-progress__cancel-ok"
-              No
+              onClick={() => handleCancel(outpoint, false)}
-            </button>
+            />
           </div>
         </div>
       )}

ui/component/fileDownloadLink/view.jsx

@@ -73,9 +73,17 @@ function FileDownloadLink(props: Props) {
 
     if (fileInfo && fileInfo.written_bytes > 0) {
       const progress = (fileInfo.written_bytes / fileInfo.total_bytes) * 100;
-      return <span className="download-text">{__('%percent%% downloaded', { percent: progress.toFixed(0) })}</span>;
+      return (
+        <span className="download-text" style={{ backgroundColor: '#FFF' }}>
+          {__('%percent%% downloaded', { percent: progress.toFixed(0) })}
+        </span>
+      );
     } else {
-      return <span className="download-text">{__('Connecting...')}</span>;
+      return (
+        <span className="download-text" style={{ backgroundColor: '#FFF' }}>
+          {__('Connecting...')}
+        </span>
+      );
     }
   }
   // @endif

ui/component/fileRenderFloating/index.js

@@ -65,6 +65,7 @@ const perform = (dispatch) => ({
       ),
       dispatch(doSetPlayingUri({ uri, collectionId }))
     ),
+  clearSecondarySource: (uri) => dispatch(doSetPlayingUri({ uri })),
 });
 
 export default withRouter(connect(select, perform)(FileRenderFloating));

ui/component/fileRenderFloating/view.jsx

@@ -31,6 +31,7 @@ type Props = {
   title: ?string,
   floatingPlayerEnabled: boolean,
   closeFloatingPlayer: () => void,
+  clearSecondarySource: (string) => void,
   renderMode: string,
   playingUri: ?PlayingUri,
   primaryUri: ?string,
@@ -53,6 +54,7 @@ export default function FileRenderFloating(props: Props) {
     title,
     isFloating,
     closeFloatingPlayer,
+    clearSecondarySource,
     floatingPlayerEnabled,
     renderMode,
     playingUri,
@@ -68,8 +70,11 @@ export default function FileRenderFloating(props: Props) {
   } = props;
   const { location, push } = useHistory();
   const hideFloatingPlayer = location.state && location.state.hideFloatingPlayer;
+  const playingUriSource = playingUri && playingUri.source;
+  const isComment = playingUriSource === 'comment';
   const isMobile = useIsMobile();
   const mainFilePlaying = !isFloating && isURIEqual(uri, primaryUri);
+
   const [fileViewerRect, setFileViewerRect] = useState();
   const [desktopPlayStartTime, setDesktopPlayStartTime] = useState();
   const [wasDragging, setWasDragging] = useState(false);
@@ -86,11 +91,11 @@ export default function FileRenderFloating(props: Props) {
   });
 
   const navigateUrl =
-    playingUri && playingUri.primaryUri + (collectionId ? generateListSearchUrlParams(collectionId) : '');
+    playingUri &&
+    (playingUri.primaryUri || playingUri.uri) + (collectionId ? generateListSearchUrlParams(collectionId) : '');
 
   const isFree = costInfo && costInfo.cost === 0;
   const canViewFile = isFree || claimWasPurchased;
-  const playingUriSource = playingUri && playingUri.source;
   const isPlayable = RENDER_MODES.FLOATING_MODES.includes(renderMode);
   const isReadyToPlay = isPlayable && (streamingUrl || (fileInfo && fileInfo.completed));
   const loadingMessage =
@@ -145,13 +150,28 @@ export default function FileRenderFloating(props: Props) {
     const jsonPosition = JSON.parse(stringifiedPosition);
 
     if (isFloating) {
+      // When the player begins floating, remove the comment source
+      // so that it doesn't try to resize again in case of going back
+      // to the origin's comment section and fail to position correctly
+      if (isComment && playingUri) clearSecondarySource(playingUri.uri);
+
       let pos = { x: jsonPosition.x, y: jsonPosition.y };
       clampToScreen(pos);
       if (pos.x !== position.x || pos.y !== position.y) {
         setPosition({ x: pos.x, y: pos.y });
       }
     }
-  }, [clampToScreen, isFloating, position.x, position.y, setPosition, stringifiedPosition]);
+  }, [
+    clampToScreen,
+    clearSecondarySource,
+    isComment,
+    isFloating,
+    playingUri,
+    position.x,
+    position.y,
+    setPosition,
+    stringifiedPosition,
+  ]);
 
   // Listen to main-window resizing and adjust the fp position accordingly:
   useEffect(() => {
@@ -197,7 +217,7 @@ export default function FileRenderFloating(props: Props) {
   }, [mainFilePlaying]);
 
   useEffect(() => {
-    if (playingUri && playingUri.primaryUri) {
+    if (playingUri && (playingUri.primaryUri || playingUri.uri)) {
       handleResize();
       setCountdownCanceled(false);
     }
@@ -312,7 +332,7 @@ export default function FileRenderFloating(props: Props) {
         className={classnames('content__viewer', {
           'content__viewer--floating': isFloating,
           'content__viewer--inline': !isFloating,
-          'content__viewer--secondary': playingUriSource === 'comment',
+          'content__viewer--secondary': isComment,
           'content__viewer--theater-mode': !isFloating && videoTheaterMode,
         })}
         style={

ui/component/fileViewCountInline/view.jsx

@@ -1,5 +1,6 @@
 // @flow
 import React from 'react';
+import 'scss/component/_view_count.scss';
 
 type Props = {
   uri: string,
@@ -15,12 +16,12 @@ export default function FileViewCountInline(props: Props) {
   let formattedViewCount;
 
   try {
+    // SI notation that changes 1234 to 1.2K, look up Intl.NumberFormat() for docs
     formattedViewCount = Number(viewCount).toLocaleString(lang || 'en', {
       compactDisplay: 'short',
       notation: 'compact',
     });
   } catch (err) {
-    // No soup for you!
     formattedViewCount = Number(viewCount).toLocaleString();
   }
 
@@ -29,6 +30,7 @@ export default function FileViewCountInline(props: Props) {
   // clean up (only one place edit/remove).
   const isChannelPage = window.location.pathname.startsWith('/@');
 
+  // dont show if no view count, if it's a repost, a livestream or isn't a channel page
   if (!viewCount || (claim && claim.repost_url) || isLivestream || !isChannelPage) {
     // (1) Currently, makeSelectViewCountForUri doesn't differentiate between
     // un-fetched view-count vs zero view-count. But since it's probably not

ui/component/livestreamLink/view.jsx

@@ -18,7 +18,10 @@ export default function LivestreamLink(props: Props) {
   const [livestreamClaim, setLivestreamClaim] = React.useState(false);
   const [isLivestreaming, setIsLivestreaming] = React.useState(false);
   const livestreamChannelId = (channelClaim && channelClaim.claim_id) || ''; // TODO: fail in a safer way, probably
-  const isChannelEmpty = !channelClaim || !channelClaim.meta || !channelClaim.meta.claims_in_channel;
+  // TODO: pput this back when hubs claims_in_channel are fixed
+  const isChannelEmpty = !channelClaim || !channelClaim.meta;
+  // ||
+  // !channelClaim.meta.claims_in_channel;
 
   React.useEffect(() => {
     // Don't search empty channels

ui/component/page/view.jsx

@@ -6,8 +6,8 @@ import { lazyImport } from 'util/lazyImport';
 import SideNavigation from 'component/sideNavigation';
 import SettingsSideNavigation from 'component/settingsSideNavigation';
 import Header from 'component/header';
-import DownloadProgress from '../downloadProgress';
 /* @if TARGET='app' */
+import DownloadProgress from '../downloadProgress';
 import StatusBar from 'component/common/status-bar';
 /* @endif */
 import usePersistedState from 'effects/use-persisted-state';
@@ -103,7 +103,7 @@ function Page(props: Props) {
       setSidebarOpen(false);
     }
     // TODO: make sure setState callback for usePersistedState uses useCallback to it doesn't cause effect to re-run
-  }, [isOnFilePage, isMediumScreen]);
+  }, [isOnFilePage, isMediumScreen, setSidebarOpen]);
 
   return (
     <Fragment>
@@ -151,7 +151,9 @@ function Page(props: Props) {
         </React.Suspense>
       )}
       {/* @endif */}
+      {/* @if TARGET='app' */}
       <DownloadProgress />
+      {/* @endif */}
     </Fragment>
   );
 }

ui/component/router/view.jsx

@@ -59,6 +59,7 @@ const ListBlockedPage = lazyImport(() => import('page/listBlocked' /* webpackChu
 const ListsPage = lazyImport(() => import('page/lists' /* webpackChunkName: "secondary" */));
 const LiveStreamSetupPage = lazyImport(() => import('page/livestreamSetup' /* webpackChunkName: "secondary" */));
 const LivestreamCurrentPage = lazyImport(() => import('page/livestreamCurrent' /* webpackChunkName: "secondary" */));
+const OwnComments = lazyImport(() => import('page/ownComments' /* webpackChunkName: "ownComments" */));
 const PasswordResetPage = lazyImport(() => import('page/passwordReset' /* webpackChunkName: "secondary" */));
 const PasswordSetPage = lazyImport(() => import('page/passwordSet' /* webpackChunkName: "secondary" */));
 const PublishPage = lazyImport(() => import('page/publish' /* webpackChunkName: "secondary" */));
@@ -329,6 +330,7 @@ function AppRouter(props: Props) {
         <PrivateRoute {...props} path={`/$/${PAGES.SWAP}`} component={SwapPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.NOTIFICATIONS}`} component={NotificationsPage} />
         <PrivateRoute {...props} path={`/$/${PAGES.AUTH_WALLET_PASSWORD}`} component={SignInWalletPasswordPage} />
+        <PrivateRoute {...props} path={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`} component={OwnComments} />
 
         <Route path={`/$/${PAGES.EMBED}/:claimName`} exact component={EmbedWrapperPage} />
         <Route path={`/$/${PAGES.EMBED}/:claimName/:claimId`} exact component={EmbedWrapperPage} />

ui/component/settingAccount/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { doWalletStatus, selectWalletIsEncrypted } from 'lbry-redux';
+import { doWalletStatus, selectMyChannelClaims, selectWalletIsEncrypted } from 'lbry-redux';
 import { selectUser, selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectLanguage } from 'redux/selectors/settings';
 
@@ -9,6 +9,7 @@ const select = (state) => ({
   isAuthenticated: selectUserVerifiedEmail(state),
   walletEncrypted: selectWalletIsEncrypted(state),
   user: selectUser(state),
+  myChannels: selectMyChannelClaims(state),
   language: selectLanguage(state),
 });
 

ui/component/settingAccount/view.jsx

@@ -15,12 +15,13 @@ type Props = {
   isAuthenticated: boolean,
   walletEncrypted: boolean,
   user: User,
+  myChannels: ?Array<ChannelClaim>,
   // --- perform ---
   doWalletStatus: () => void,
 };
 
 export default function SettingAccount(props: Props) {
-  const { isAuthenticated, walletEncrypted, user, doWalletStatus } = props;
+  const { isAuthenticated, walletEncrypted, user, myChannels, doWalletStatus } = props;
   const [storedPassword, setStoredPassword] = React.useState(false);
 
   // Determine if password is stored.
@@ -92,6 +93,17 @@ export default function SettingAccount(props: Props) {
               </SettingsRow>
             )}
             {/* @endif */}
+
+            {myChannels && (
+              <SettingsRow title={__('Comments')} subtitle={__('View your past comments.')}>
+                <Button
+                  button="inverse"
+                  label={__('Manage')}
+                  icon={ICONS.ARROW_RIGHT}
+                  navigate={`/$/${PAGES.SETTINGS_OWN_COMMENTS}`}
+                />
+              </SettingsRow>
+            )}
           </>
         }
       />

ui/component/sideNavigation/view.jsx

@@ -75,7 +75,8 @@ function SideNavigation(props: Props) {
     followedTags,
   } = props;
 
-  const EXTRA_SIDEBAR_LINKS = GetLinksData(homepageData);
+  const EXTRA_SIDEBAR_LINKS = GetLinksData(homepageData).map(({ pinnedUrls, ...theRest }) => theRest);
+
   const FULL_LINKS: Array<SideNavLink> = [
     {
       title: 'Your Tags',

ui/component/snackBar/view.jsx

@@ -7,7 +7,7 @@ import Icon from 'component/common/icon';
 import LbcMessage from 'component/common/lbc-message';
 
 type Props = {
-  removeSnack: any => void,
+  removeSnack: (any) => void,
   snack: ?{
     linkTarget: ?string,
     linkText: ?string,
@@ -53,9 +53,9 @@ class SnackBar extends React.PureComponent<Props> {
         <div className="snack-bar__message">
           <Icon icon={isError ? ICONS.ALERT : ICONS.COMPLETED} size={18} />
 
-          <div>
+          <p className="snack-bar__messageText">
             <LbcMessage>{message}</LbcMessage>
-          </div>
+          </p>
         </div>
         {linkText && linkTarget && (
           // This is a little weird because of `linkTarget` code in `lbry-redux`

ui/component/userChannelFollowIntro/view.jsx

@@ -22,10 +22,14 @@ const channelsToSubscribe = AUTO_FOLLOW_CHANNELS.trim()
 
 function UserChannelFollowIntro(props: Props) {
   const { subscribedChannels, channelSubscribe, onContinue, homepageData, prefsReady } = props;
-  const { PRIMARY_CONTENT } = homepageData;
+  const { PRIMARY_CONTENT, LATEST } = homepageData;
   let channelIds;
-  if (PRIMARY_CONTENT && CUSTOM_HOMEPAGE) {
+  if (CUSTOM_HOMEPAGE) {
-    channelIds = PRIMARY_CONTENT.channelIds;
+    if (LATEST) {
+      channelIds = LATEST.channelIds;
+    } else if (PRIMARY_CONTENT) {
+      channelIds = PRIMARY_CONTENT.channelIds;
+    }
   }
   const followingCount = (subscribedChannels && subscribedChannels.length) || 0;
   const followingCountIgnoringAutoFollows = (subscribedChannels || []).filter(

ui/constants/action_types.js

@@ -253,6 +253,7 @@ 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_STARTED = 'COMMENT_BY_ID_STARTED';
 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';
@@ -352,3 +353,7 @@ export const FETCH_NO_SOURCE_CLAIMS_STARTED = 'FETCH_NO_SOURCE_CLAIMS_STARTED';
 export const FETCH_NO_SOURCE_CLAIMS_COMPLETED = 'FETCH_NO_SOURCE_CLAIMS_COMPLETED';
 export const FETCH_NO_SOURCE_CLAIMS_FAILED = 'FETCH_NO_SOURCE_CLAIMS_FAILED';
 export const VIEWERS_RECEIVED = 'VIEWERS_RECEIVED';
+export const FETCH_ACTIVE_LIVESTREAMS_STARTED = 'FETCH_ACTIVE_LIVESTREAMS_STARTED';
+export const FETCH_ACTIVE_LIVESTREAMS_FAILED = 'FETCH_ACTIVE_LIVESTREAMS_FAILED';
+export const FETCH_ACTIVE_LIVESTREAMS_SKIPPED = 'FETCH_ACTIVE_LIVESTREAMS_SKIPPED';
+export const FETCH_ACTIVE_LIVESTREAMS_COMPLETED = 'FETCH_ACTIVE_LIVESTREAMS_COMPLETED';

ui/constants/comment.js

@@ -9,6 +9,7 @@ export const SORT_BY = {
   OLDEST: 1,
   CONTROVERSY: 2,
   POPULARITY: 3,
+  NEWEST_NO_PINS: 4,
 };
 
 export const BLOCK_LEVEL = {

ui/constants/icons.js

@@ -174,3 +174,8 @@ export const BADGE_STREAMER = 'BadgeStreamer';
 export const REPLAY = 'Replay';
 export const REPEAT = 'Repeat';
 export const SHUFFLE = 'Shuffle';
+export const HOLD_PHONE = 'HoldPhone';
+export const LIFE = 'Life';
+export const ARTISTS = 'Artists';
+export const MYSTERIES = 'Mysteries';
+export const TECHNOLOGY = 'Technology';

ui/constants/pageTitles.js

@@ -1,6 +1,7 @@
 // Customer-facing title for a page.
 //
 // Primarily used for the browser tab and history title.
+// Ensure new strings are added to 'app-string.json' for localization.
 
 import * as PAGES from 'constants/pages';
 
@@ -9,14 +10,16 @@ export const PAGE_TITLE = {
   [PAGES.BIG_HITS]: 'Big Hits',
   [PAGES.DISCOVER]: 'Wild West',
   // [PAGES.ENLIGHTENMENT] = 'Enlightenment',
-  [PAGES.FINANCE]: 'Finance',
+  [PAGES.FINANCE]: 'Finance 2.0',
   [PAGES.GAMING]: 'Gaming',
   [PAGES.GENERAL]: 'Cheese',
   [PAGES.LAB]: 'Lab',
   [PAGES.MOVIES]: 'Movies',
   [PAGES.MUSIC]: 'Music',
   [PAGES.NEWS]: 'News & Politics',
-  // [PAGES.RABBIT_HOLE] = 'The Rabbit Hole';
+  // [PAGES.RABBIT_HOLE]: 'The Rabbit Hole';
+  [PAGES.TECH]: 'Tech',
+  [PAGES.UNIVERSE]: 'The Universe',
   [PAGES.WILD_WEST]: 'Wild West',
 
   // --- Everything else in alphabetical order ---
@@ -46,9 +49,10 @@ export const PAGE_TITLE = {
   [PAGES.SETTINGS_BLOCKED_MUTED]: 'Block and muted channels',
   [PAGES.SETTINGS_CREATOR]: 'Creator settings',
   [PAGES.SETTINGS_NOTIFICATIONS]: 'Manage notifications',
-  [PAGES.SETTINGS_STRIPE_ACCOUNT]: 'settings/tip_account',
+  [PAGES.SETTINGS_STRIPE_ACCOUNT]: 'Bank Accounts',
-  [PAGES.SETTINGS_STRIPE_CARD]: 'settings/card',
+  [PAGES.SETTINGS_STRIPE_CARD]: 'Payment Methods',
   [PAGES.SETTINGS_UPDATE_PWD]: 'Update password',
+  [PAGES.SETTINGS_OWN_COMMENTS]: 'Your comments',
   [PAGES.SWAP]: 'Swap Credits',
   [PAGES.TAGS_FOLLOWING]: 'Tags',
   [PAGES.TAGS_FOLLOWING_MANAGE]: 'Manage tags',
@@ -56,4 +60,5 @@ export const PAGE_TITLE = {
   [PAGES.UPLOADS]: 'Your uploads',
   [PAGES.WALLET]: 'Wallet',
   [PAGES.WELCOME]: 'Welcome',
+  [PAGES.YOUTUBE_SYNC]: 'YouTube Sync',
 };

ui/constants/pages.js

@@ -20,6 +20,8 @@ exports.NEWS = 'news';
 exports.RABBIT_HOLE = 'rabbithole';
 exports.SCIENCE = 'science';
 exports.TECHNOLOGY = 'technology';
+exports.TECH = 'tech';
+exports.UNIVERSE = 'universe';
 exports.WILD_WEST = 'wildwest';
 exports.HOME = 'home';
 exports.HELP = 'help';
@@ -44,6 +46,7 @@ exports.SETTINGS_NOTIFICATIONS = 'settings/notifications';
 exports.SETTINGS_BLOCKED_MUTED = 'settings/block_and_mute';
 exports.SETTINGS_CREATOR = 'settings/creator';
 exports.SETTINGS_UPDATE_PWD = 'settings/update_password';
+exports.SETTINGS_OWN_COMMENTS = 'settings/ownComments';
 exports.SHOW = 'show';
 exports.ACCOUNT = 'account';
 exports.SEARCH = 'search';

ui/effects/use-fetch-view-count.js

@@ -0,0 +1,24 @@
+// @flow
+import { useState, useEffect } from 'react';
+
+export default function useFetchViewCount(
+  shouldFetch: ?boolean,
+  uris: Array<string>,
+  claimsByUri: any,
+  doFetchViewCount: (string) => void
+) {
+  const [fetchedUris, setFetchedUris] = useState([]);
+
+  useEffect(() => {
+    if (shouldFetch && uris && uris.length > 0) {
+      const urisToFetch = uris.filter((uri) => uri && !fetchedUris.includes(uri) && Boolean(claimsByUri[uri]));
+
+      if (urisToFetch.length > 0) {
+        const claimIds = urisToFetch.map((uri) => claimsByUri[uri].claim_id);
+        doFetchViewCount(claimIds.join(','));
+        setFetchedUris([...fetchedUris, ...urisToFetch]);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [uris]);
+}

ui/effects/use-get-livestreams.js

@@ -1,55 +0,0 @@
-// @flow
-import React from 'react';
-import { LIVESTREAM_LIVE_API } from 'constants/livestream';
-
-/**
- * Gets latest livestream info list. Returns null (instead of a blank object)
- * when there are no active livestreams.
- *
- * @param minViewers
- * @param refreshMs
- * @returns {{livestreamMap: null, loading: boolean}}
- */
-export default function useGetLivestreams(minViewers: number = 0, refreshMs: number = 0) {
-  const [loading, setLoading] = React.useState(true);
-  const [livestreamMap, setLivestreamMap] = React.useState(null);
-
-  React.useEffect(() => {
-    function checkCurrentLivestreams() {
-      fetch(LIVESTREAM_LIVE_API)
-        .then((res) => res.json())
-        .then((res) => {
-          setLoading(false);
-          if (!res.data) {
-            setLivestreamMap(null);
-            return;
-          }
-
-          const livestreamMap = res.data.reduce((acc, curr) => {
-            if (curr.viewCount >= minViewers) {
-              acc[curr.claimId] = curr;
-            }
-            return acc;
-          }, {});
-
-          setLivestreamMap(livestreamMap);
-        })
-        .catch((err) => {
-          setLoading(false);
-        });
-    }
-
-    checkCurrentLivestreams();
-
-    if (refreshMs > 0) {
-      let fetchInterval = setInterval(checkCurrentLivestreams, refreshMs);
-      return () => {
-        if (fetchInterval) {
-          clearInterval(fetchInterval);
-        }
-      };
-    }
-  }, []);
-
-  return { livestreamMap, loading };
-}

ui/modal/modalBlockChannel/view.jsx

@@ -153,9 +153,9 @@ export default function ModalBlockChannel(props: Props) {
       case TAB.MODERATOR:
         return (
           <p className="help">
-            {__('Block this channel on behalf of %creator%', {
+            {contentChannelClaim
-              creator: contentChannelClaim ? contentChannelClaim.name : __('creator'),
+              ? __('Block this channel on behalf of %creator%.', { creator: contentChannelClaim.name })
-            })}
+              : __('Block this channel on behalf of the creator.')}
           </p>
         );
       case TAB.ADMIN:

ui/page/channelsFollowing/index.js

@@ -1,13 +1,18 @@
 import { connect } from 'react-redux';
 import { SETTINGS } from 'lbry-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
 import { makeSelectClientSetting } from 'redux/selectors/settings';
 
 import ChannelsFollowingPage from './view';
 
-const select = state => ({
+const select = (state) => ({
   subscribedChannels: selectSubscriptions(state),
   tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
+  activeLivestreams: selectActiveLivestreams(state),
 });
 
-export default connect(select)(ChannelsFollowingPage);
+export default connect(select, {
+  doFetchActiveLivestreams,
+})(ChannelsFollowingPage);

ui/page/channelsFollowing/view.jsx

@@ -9,24 +9,32 @@ import ClaimListDiscover from 'component/claimListDiscover';
 import Page from 'component/page';
 import Button from 'component/button';
 import Icon from 'component/common/icon';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import { splitBySeparator } from 'lbry-redux';
+import { getLivestreamUris } from 'util/livestream';
 
 type Props = {
   subscribedChannels: Array<Subscription>,
   tileLayout: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: () => void,
 };
 
 function ChannelsFollowingPage(props: Props) {
-  const { subscribedChannels, tileLayout } = props;
+  const { subscribedChannels, tileLayout, activeLivestreams, doFetchActiveLivestreams } = props;
+
   const hasSubsribedChannels = subscribedChannels.length > 0;
-  const { livestreamMap } = useGetLivestreams();
+  const channelIds = subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1]);
+
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
 
   return !hasSubsribedChannels ? (
     <ChannelsFollowingDiscoverPage />
   ) : (
     <Page noFooter fullWidthPage={tileLayout}>
       <ClaimListDiscover
+        prefixUris={getLivestreamUris(activeLivestreams, channelIds)}
         hideAdvancedFilter={SIMPLE_SITE}
         streamType={SIMPLE_SITE ? CS.CONTENT_ALL : undefined}
         tileLayout={tileLayout}
@@ -37,7 +45,7 @@ function ChannelsFollowingPage(props: Props) {
           </span>
         }
         defaultOrderBy={CS.ORDER_BY_NEW}
-        channelIds={subscribedChannels.map((sub) => splitBySeparator(sub.uri)[1])}
+        channelIds={channelIds}
         meta={
           <Button
             icon={ICONS.SEARCH}
@@ -46,8 +54,6 @@ function ChannelsFollowingPage(props: Props) {
             navigate={`/$/${PAGES.CHANNELS_FOLLOWING_DISCOVER}`}
           />
         }
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
         hasSource
       />

ui/page/channelsFollowingDiscover/view.jsx

@@ -28,10 +28,14 @@ type ChannelsFollowingItem = {
 
 function ChannelsFollowingDiscover(props: Props) {
   const { followedTags, subscribedChannels, blockedChannels, homepageData } = props;
-  const { PRIMARY_CONTENT } = homepageData;
+  const { PRIMARY_CONTENT, LATEST } = homepageData;
   let channelIds;
-  if (PRIMARY_CONTENT && CUSTOM_HOMEPAGE) {
+  if (CUSTOM_HOMEPAGE) {
-    channelIds = PRIMARY_CONTENT.channelIds;
+    if (LATEST) {
+      channelIds = LATEST.channelIds;
+    } else if (PRIMARY_CONTENT) {
+      channelIds = PRIMARY_CONTENT.channelIds;
+    }
   }
   let rowData: Array<ChannelsFollowingItem> = [];
   const notChannels = subscribedChannels

ui/page/discover/index.js

@@ -1,6 +1,8 @@
 import * as CS from 'constants/claim_search';
 import { connect } from 'react-redux';
 import { makeSelectClaimForUri, doResolveUri, SETTINGS } from 'lbry-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { doToggleTagFollowDesktop } from 'redux/actions/tags';
@@ -18,10 +20,12 @@ const select = (state, props) => {
     repostedClaim: repostedUri ? makeSelectClaimForUri(repostedUri)(state) : null,
     isAuthenticated: selectUserVerifiedEmail(state),
     tileLayout: makeSelectClientSetting(SETTINGS.TILE_LAYOUT)(state),
+    activeLivestreams: selectActiveLivestreams(state),
   };
 };
 
 export default connect(select, {
   doToggleTagFollowDesktop,
   doResolveUri,
+  doFetchActiveLivestreams,
 })(Tags);

ui/page/discover/view.jsx

@@ -8,15 +8,17 @@ import Page from 'component/page';
 import ClaimListDiscover from 'component/claimListDiscover';
 import Button from 'component/button';
 import useHover from 'effects/use-hover';
-import { useIsMobile } from 'effects/use-screensize';
+import { useIsMobile, useIsLargeScreen } from 'effects/use-screensize';
 import analytics from 'analytics';
 import HiddenNsfw from 'component/common/hidden-nsfw';
 import Icon from 'component/common/icon';
 import Ads from 'web/component/ads';
 import LbcSymbol from 'component/common/lbc-symbol';
 import I18nMessage from 'component/i18nMessage';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import moment from 'moment';
+import { getLivestreamUris } from 'util/livestream';
+
+const DEFAULT_LIVESTREAM_TILE_LIMIT = 8;
 
 type Props = {
   location: { search: string },
@@ -28,6 +30,8 @@ type Props = {
   isAuthenticated: boolean,
   dynamicRouteProps: RowDataItem,
   tileLayout: boolean,
+  activeLivestreams: ?LivestreamInfo,
+  doFetchActiveLivestreams: (orderBy?: Array<string>, pageSize?: number, forceFetch?: boolean) => void,
 };
 
 function DiscoverPage(props: Props) {
@@ -40,12 +44,14 @@ function DiscoverPage(props: Props) {
     doResolveUri,
     isAuthenticated,
     tileLayout,
+    activeLivestreams,
+    doFetchActiveLivestreams,
     dynamicRouteProps,
   } = props;
   const buttonRef = useRef();
   const isHovering = useHover(buttonRef);
   const isMobile = useIsMobile();
-  const { livestreamMap } = useGetLivestreams();
+  const isLargeScreen = useIsLargeScreen();
 
   const urlParams = new URLSearchParams(search);
   const claimType = urlParams.get('claim_type');
@@ -58,6 +64,8 @@ function DiscoverPage(props: Props) {
   // Eventually allow more than one tag on this page
   // Restricting to one to make follow/unfollow simpler
   const tag = (tags && tags[0]) || null;
+  const channelIds =
+    (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined;
 
   const isFollowing = followedTags.map(({ name }) => name).includes(tag);
   let label = isFollowing ? __('Following --[button label indicating a channel has been followed]--') : __('Follow');
@@ -65,6 +73,46 @@ function DiscoverPage(props: Props) {
     label = __('Unfollow');
   }
 
+  const initialLivestreamTileLimit = getPageSize(DEFAULT_LIVESTREAM_TILE_LIMIT);
+
+  const [showViewMoreLivestreams, setShowViewMoreLivestreams] = React.useState(!dynamicRouteProps);
+  const livestreamUris = getLivestreamUris(activeLivestreams, channelIds);
+  const useDualList = showViewMoreLivestreams && livestreamUris.length > initialLivestreamTileLimit;
+
+  function getElemMeta() {
+    return !dynamicRouteProps ? (
+      <a
+        className="help"
+        href="https://lbry.com/faq/trending"
+        title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
+      >
+        <I18nMessage
+          tokens={{
+            lbc: <LbcSymbol />,
+          }}
+        >
+          Results boosted by %lbc%
+        </I18nMessage>
+      </a>
+    ) : (
+      tag && !isMobile && (
+        <Button
+          ref={buttonRef}
+          button="alt"
+          icon={ICONS.SUBSCRIBE}
+          iconColor="red"
+          onClick={handleFollowClick}
+          requiresAuth={IS_WEB}
+          label={label}
+        />
+      )
+    );
+  }
+
+  function getPageSize(originalSize) {
+    return isLargeScreen ? originalSize * (3 / 2) : originalSize;
+  }
+
   React.useEffect(() => {
     if (repostedUri && !repostedClaimIsResolved) {
       doResolveUri(repostedUri);
@@ -106,16 +154,53 @@ function DiscoverPage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    if (showViewMoreLivestreams) {
+      doFetchActiveLivestreams(CS.ORDER_BY_TRENDING_VALUE);
+    } else {
+      doFetchActiveLivestreams();
+    }
+  }, []);
+
   return (
     <Page noFooter fullWidthPage={tileLayout}>
+      {useDualList && (
+        <>
+          <ClaimListDiscover
+            uris={livestreamUris.slice(0, initialLivestreamTileLimit)}
+            headerLabel={headerLabel}
+            header={repostedUri ? <span /> : undefined}
+            tileLayout={repostedUri ? false : tileLayout}
+            hideAdvancedFilter
+            hideFilters
+            infiniteScroll={false}
+            showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
+            meta={getElemMeta()}
+          />
+          <div className="livestream-list--view-more">
+            <Button
+              label={__('Show more livestreams')}
+              button="link"
+              iconRight={ICONS.ARROW_RIGHT}
+              className="claim-grid__title--secondary"
+              onClick={() => {
+                doFetchActiveLivestreams();
+                setShowViewMoreLivestreams(false);
+              }}
+            />
+          </div>
+        </>
+      )}
+
       <ClaimListDiscover
+        prefixUris={useDualList ? undefined : livestreamUris}
         hideAdvancedFilter={SIMPLE_SITE}
         hideFilters={SIMPLE_SITE ? !dynamicRouteProps : undefined}
-        header={repostedUri ? <span /> : undefined}
+        header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
         tileLayout={repostedUri ? false : tileLayout}
         defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}
         claimType={claimType ? [claimType] : undefined}
-        headerLabel={headerLabel}
+        headerLabel={!useDualList && headerLabel}
         tags={tags}
         hiddenNsfwMessage={<HiddenNsfw type="page" />}
         repostedClaimId={repostedClaim ? repostedClaim.claim_id : null}
@@ -133,47 +218,14 @@ function DiscoverPage(props: Props) {
             : undefined
         }
         feeAmount={SIMPLE_SITE ? !dynamicRouteProps && CS.FEE_AMOUNT_ANY : undefined}
-        channelIds={
+        channelIds={channelIds}
-          (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.channelIds) || undefined
-        }
         limitClaimsPerChannel={
           SIMPLE_SITE
             ? (dynamicRouteProps && dynamicRouteProps.options && dynamicRouteProps.options.limitClaimsPerChannel) ||
               undefined
             : 3
         }
-        meta={
+        meta={!useDualList && getElemMeta()}
-          !dynamicRouteProps ? (
-            <a
-              className="help"
-              href="https://lbry.com/faq/trending"
-              title={__('Learn more about LBRY Credits on %DOMAIN%', { DOMAIN })}
-            >
-              <I18nMessage
-                tokens={{
-                  lbc: <LbcSymbol />,
-                }}
-              >
-                Results boosted by %lbc%
-              </I18nMessage>
-            </a>
-          ) : (
-            tag &&
-            !isMobile && (
-              <Button
-                ref={buttonRef}
-                button="alt"
-                icon={ICONS.SUBSCRIBE}
-                iconColor="red"
-                onClick={handleFollowClick}
-                requiresAuth={IS_WEB}
-                label={label}
-              />
-            )
-          )
-        }
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         hasSource
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
       />

ui/page/file/view.jsx

@@ -220,7 +220,7 @@ function FilePage(props: Props) {
       {!collection && !isMarkdown && !videoTheaterMode && <RecommendedContent uri={uri} />}
       {isMarkdown && (
         <div className="file-page__post-comments">
-          <CommentsList uri={uri} linkedCommentId={linkedCommentId} />
+          <CommentsList uri={uri} linkedCommentId={linkedCommentId} commentsAreExpanded />
         </div>
       )}
     </Page>

ui/page/home/index.js

@@ -1,4 +1,6 @@
 import { connect } from 'react-redux';
+import { doFetchActiveLivestreams } from 'redux/actions/livestream';
+import { selectActiveLivestreams } from 'redux/selectors/livestream';
 import { selectFollowedTags } from 'redux/selectors/tags';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
 import { selectSubscriptions } from 'redux/selectors/subscriptions';
@@ -12,8 +14,11 @@ const select = (state) => ({
   authenticated: selectUserVerifiedEmail(state),
   showNsfw: selectShowMatureContent(state),
   homepageData: selectHomepageData(state),
+  activeLivestreams: selectActiveLivestreams(state),
 });
 
-const perform = {};
+const perform = (dispatch) => ({
+  doFetchActiveLivestreams: () => dispatch(doFetchActiveLivestreams()),
+});
 
 export default connect(select, perform)(DiscoverPage);

ui/page/home/view.jsx

@@ -9,8 +9,8 @@ import ClaimTilesDiscover from 'component/claimTilesDiscover';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import Icon from 'component/common/icon';
 import WaitUntilOnPage from 'component/common/wait-until-on-page';
-import useGetLivestreams from 'effects/use-get-livestreams';
 import { GetLinksData } from 'util/buildHomepage';
+import { getLivestreamUris } from 'util/livestream';
 
 // @if TARGET='web'
 import Pixel from 'web/component/pixel';
@@ -23,14 +23,23 @@ type Props = {
   subscribedChannels: Array<Subscription>,
   showNsfw: boolean,
   homepageData: any,
+  activeLivestreams: any,
+  doFetchActiveLivestreams: () => void,
 };
 
 function HomePage(props: Props) {
-  const { followedTags, subscribedChannels, authenticated, showNsfw, homepageData } = props;
+  const {
+    followedTags,
+    subscribedChannels,
+    authenticated,
+    showNsfw,
+    homepageData,
+    activeLivestreams,
+    doFetchActiveLivestreams,
+  } = 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 { livestreamMap } = useGetLivestreams();
 
   const rowData: Array<RowDataItem> = GetLinksData(
     homepageData,
@@ -52,13 +61,13 @@ function HomePage(props: Props) {
         ))}
       </ul>
     );
+
     const claimTiles = (
       <ClaimTilesDiscover
         {...options}
-        liveLivestreamsFirst
-        livestreamMap={livestreamMap}
         showNoSourceClaims={ENABLE_NO_SOURCE_CLAIMS}
         hasSource
+        prefixUris={getLivestreamUris(activeLivestreams, options.channelIds)}
         pinUrls={pinUrls}
       />
     );
@@ -95,6 +104,10 @@ function HomePage(props: Props) {
     );
   }
 
+  React.useEffect(() => {
+    doFetchActiveLivestreams();
+  }, []);
+
   return (
     <Page fullWidthPage>
       {!SIMPLE_SITE && (authenticated || !IS_WEB) && !subscribedChannels.length && (

ui/page/listBlocked/view.jsx

@@ -221,15 +221,17 @@ function ListBlocked(props: Props) {
 
   function getRefreshElem() {
     return (
-      <Button
+      myChannelClaims && (
-        icon={ICONS.REFRESH}
+        <Button
-        button="alt"
+          icon={ICONS.REFRESH}
-        label={__('Refresh')}
+          button="alt"
-        onClick={() => {
+          label={__('Refresh')}
-          fetchModBlockedList();
+          onClick={() => {
-          fetchModAmIList();
+            fetchModBlockedList();
-        }}
+            fetchModAmIList();
-      />
+          }}
+        />
+      )
     );
   }
 

ui/page/livestreamSetup/view.jsx

@@ -13,7 +13,6 @@ import { Lbry } from 'lbry-redux';
 import { toHex } from 'util/hex';
 import { FormField } from 'component/common/form';
 import CopyableText from 'component/copyableText';
-import CopyableStreamkey from 'component/copyableStreamkey';
 import Card from 'component/common/card';
 import ClaimList from 'component/claimList';
 import usePersistedState from 'effects/use-persisted-state';
@@ -185,14 +184,15 @@ export default function LivestreamSetupPage(props: Props) {
                       name="stream-server"
                       label={__('Stream server')}
                       copyable={LIVESTREAM_RTMP_URL}
-                      snackMessage={__('Copied')}
+                      snackMessage={__('Copied stream server URL.')}
                     />
-                    <CopyableStreamkey
+                    <CopyableText
                       primaryButton
+                      enableInputMask
                       name="livestream-key"
                       label={__('Stream key')}
                       copyable={streamKey}
-                      snackMessage={__('Copied')}
+                      snackMessage={__('Copied stream key.')}
                     />
                   </>
                 }

ui/page/ownComments/index.js

@@ -0,0 +1,33 @@
+import { connect } from 'react-redux';
+import { doCommentListOwn, doCommentReset } from 'redux/actions/comments';
+import { selectActiveChannelClaim } from 'redux/selectors/app';
+import {
+  selectIsFetchingComments,
+  makeSelectCommentsForUri,
+  makeSelectTotalCommentsCountForUri,
+  makeSelectTopLevelTotalPagesForUri,
+} from 'redux/selectors/comments';
+import { selectClaimsById } from 'lbry-redux';
+
+import OwnComments from './view';
+
+const select = (state) => {
+  const activeChannelClaim = selectActiveChannelClaim(state);
+  const uri = activeChannelClaim && activeChannelClaim.canonical_url;
+
+  return {
+    activeChannelClaim,
+    allComments: makeSelectCommentsForUri(uri)(state),
+    totalComments: makeSelectTotalCommentsCountForUri(uri)(state),
+    topLevelTotalPages: makeSelectTopLevelTotalPagesForUri(uri)(state),
+    isFetchingComments: selectIsFetchingComments(state),
+    claimsById: selectClaimsById(state),
+  };
+};
+
+const perform = (dispatch) => ({
+  doCommentReset: (a) => dispatch(doCommentReset(a)),
+  doCommentListOwn: (a, b, c) => dispatch(doCommentListOwn(a, b, c)),
+});
+
+export default connect(select, perform)(OwnComments);

ui/page/ownComments/view.jsx

@@ -0,0 +1,210 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import ChannelSelector from 'component/channelSelector';
+import ClaimPreview from 'component/claimPreview';
+import Comment from 'component/comment';
+import Card from 'component/common/card';
+import Empty from 'component/common/empty';
+import Page from 'component/page';
+import Spinner from 'component/spinner';
+import { COMMENT_PAGE_SIZE_TOP_LEVEL } from 'constants/comment';
+import * as ICONS from 'constants/icons';
+import useFetched from 'effects/use-fetched';
+import debounce from 'util/debounce';
+
+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 = {
+  activeChannelClaim: ?ChannelClaim,
+  allComments: Array<Comment>,
+  totalComments: number,
+  topLevelTotalPages: number,
+  isFetchingComments: boolean,
+  claimsById: any,
+  doCommentReset: (claimId: string) => void,
+  doCommentListOwn: (channelId: string, page: number, pageSize: number) => void,
+};
+
+export default function OwnComments(props: Props) {
+  const {
+    activeChannelClaim,
+    allComments,
+    totalComments,
+    isFetchingComments,
+    claimsById,
+    doCommentReset,
+    doCommentListOwn,
+  } = props;
+  const spinnerRef = React.useRef();
+  const [page, setPage] = React.useState(0);
+  const [activeChannelId, setActiveChannelId] = React.useState('');
+
+  // Since we are sharing the key for Discussion and MyComments, don't show
+  // the list until we've gone through the initial reset.
+  const wasResetAndReady = useFetched(isFetchingComments);
+
+  const totalPages = Math.ceil(totalComments / COMMENT_PAGE_SIZE_TOP_LEVEL);
+  const moreBelow = page < totalPages;
+
+  function getCommentsElem(comments) {
+    return comments.map((comment) => {
+      const contentClaim = claimsById[comment.claim_id];
+      const isChannel = contentClaim && contentClaim.value_type === 'channel';
+      const isLivestream = Boolean(contentClaim && contentClaim.value_type === 'stream' && !contentClaim.value.source);
+
+      return (
+        <div key={comment.comment_id} className="comments-own card__main-actions">
+          <div className="section__actions">
+            <div className="comments-own--claim">
+              {contentClaim && (
+                <ClaimPreview
+                  uri={contentClaim.canonical_url}
+                  searchParams={{
+                    ...(isChannel ? { view: 'discussion' } : {}),
+                    ...(isLivestream ? {} : { lc: comment.comment_id }),
+                  }}
+                  hideActions
+                  hideMenu
+                  properties={() => null}
+                />
+              )}
+              {!contentClaim && <Empty text={__('Content or channel was deleted.')} />}
+            </div>
+            <Comment
+              isTopLevel
+              hideActions
+              authorUri={comment.channel_url}
+              author={comment.channel_name}
+              commentId={comment.comment_id}
+              message={comment.comment}
+              timePosted={comment.timestamp * 1000}
+              commentIsMine
+              supportAmount={comment.support_amount}
+              numDirectReplies={0} // Don't show replies here
+              isModerator={comment.is_moderator}
+              isGlobalMod={comment.is_global_mod}
+              isFiat={comment.is_fiat}
+            />
+          </div>
+        </div>
+      );
+    });
+  }
+
+  // Active channel changed
+  React.useEffect(() => {
+    if (activeChannelClaim && activeChannelClaim.claim_id !== activeChannelId) {
+      setActiveChannelId(activeChannelClaim.claim_id);
+      setPage(0);
+    }
+  }, [activeChannelClaim, activeChannelId]);
+
+  // Reset comments
+  React.useEffect(() => {
+    if (page === 0 && activeChannelId) {
+      doCommentReset(activeChannelId);
+      setPage(1);
+    }
+  }, [page, activeChannelId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Fetch own comments
+  React.useEffect(() => {
+    if (page !== 0 && activeChannelId) {
+      doCommentListOwn(activeChannelId, page, COMMENT_PAGE_SIZE_TOP_LEVEL);
+    }
+  }, [page]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Infinite scroll
+  React.useEffect(() => {
+    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.width > 0 &&
+        rect.height > 0 &&
+        rect.bottom >= 0 &&
+        rect.right >= 0 &&
+        // $FlowFixMe
+        rect.top <= windowH &&
+        // $FlowFixMe
+        rect.left <= windowW;
+
+      return (isInViewport || isApproachingViewport) && page < topLevelTotalPages;
+    }
+
+    const handleCommentScroll = debounce(() => {
+      if (shouldFetchNextPage(page, totalPages, window, document)) {
+        setPage(page + 1);
+      }
+    }, 200);
+
+    if (!isFetchingComments && moreBelow && spinnerRef && spinnerRef.current) {
+      if (shouldFetchNextPage(page, totalPages, window, document, 0)) {
+        setPage(page + 1);
+      } else {
+        window.addEventListener('scroll', handleCommentScroll);
+        return () => window.removeEventListener('scroll', handleCommentScroll);
+      }
+    }
+  }, [page, spinnerRef, isFetchingComments, moreBelow, totalPages]);
+
+  // **************************************************************************
+  // **************************************************************************
+
+  if (!activeChannelClaim) {
+    return null;
+  }
+
+  return (
+    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Your comments'), backLabel: __('Back') }}>
+      <ChannelSelector hideAnon />
+      <Card
+        isBodyList
+        title={
+          totalComments > 0
+            ? totalComments === 1
+              ? __('1 comment')
+              : __('%total_comments% comments', { total_comments: totalComments })
+            : isFetchingComments
+            ? ''
+            : __('No comments')
+        }
+        titleActions={
+          <Button
+            button="alt"
+            icon={ICONS.REFRESH}
+            title={__('Refresh')}
+            onClick={() => {
+              setPage(0);
+            }}
+          />
+        }
+        body={
+          <>
+            {wasResetAndReady && <ul className="comments">{allComments && getCommentsElem(allComments)}</ul>}
+            {(isFetchingComments || moreBelow) && (
+              <div className="main--empty" ref={spinnerRef}>
+                <Spinner type="small" />
+              </div>
+            )}
+          </>
+        }
+      />
+    </Page>
+  );
+}

ui/redux/actions/comments.js

@@ -3,7 +3,15 @@ import * as ACTIONS from 'constants/action_types';
 import * as REACTION_TYPES from 'constants/reactions';
 import * as PAGES from 'constants/pages';
 import { SORT_BY, BLOCK_LEVEL } from 'constants/comment';
-import { Lbry, parseURI, buildURI, selectClaimsByUri, selectMyChannelClaims, isURIEqual } from 'lbry-redux';
+import {
+  Lbry,
+  parseURI,
+  buildURI,
+  selectClaimsByUri,
+  selectMyChannelClaims,
+  isURIEqual,
+  doClaimSearch,
+} from 'lbry-redux';
 import { doToast, doSeeNotifications } from 'redux/actions/notifications';
 import {
   makeSelectMyReactionsForComment,
@@ -127,7 +135,6 @@ export function doCommentList(
         type: ACTIONS.COMMENT_LIST_FAILED,
         data: 'unable to find claim for uri',
       });
-
       return;
     }
 
@@ -139,7 +146,7 @@ export function doCommentList(
     });
 
     // Adding 'channel_id' and 'channel_name' enables "CreatorSettings > commentsEnabled".
-    const authorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
+    const creatorChannelClaim = claim.value_type === 'channel' ? claim : claim.signing_channel;
 
     return Comments.comment_list({
       page,
@@ -147,8 +154,8 @@ export function doCommentList(
       page_size: pageSize,
       parent_id: parentId || undefined,
       top_level: !parentId,
-      channel_id: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+      channel_id: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
-      channel_name: authorChannelClaim ? authorChannelClaim.name : undefined,
+      channel_name: creatorChannelClaim ? creatorChannelClaim.name : undefined,
       sort_by: sortBy,
     })
       .then((result: CommentListResponse) => {
@@ -162,7 +169,7 @@ export function doCommentList(
             totalFilteredItems: total_filtered_items,
             totalPages: total_pages,
             claimId: claimId,
-            commenterClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+            creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
             uri: uri,
           },
         });
@@ -175,7 +182,7 @@ export function doCommentList(
             dispatch({
               type: ACTIONS.COMMENT_LIST_COMPLETED,
               data: {
-                authorClaimId: authorChannelClaim ? authorChannelClaim.claim_id : undefined,
+                creatorClaimId: creatorChannelClaim ? creatorChannelClaim.claim_id : undefined,
                 disabled: true,
               },
             });
@@ -201,8 +208,109 @@ export function doCommentList(
   };
 }
 
+export function doCommentListOwn(
+  channelId: string,
+  page: number = 1,
+  pageSize: number = 99999,
+  sortBy: number = SORT_BY.NEWEST_NO_PINS
+) {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const myChannelClaims = selectMyChannelClaims(state);
+    if (!myChannelClaims) {
+      console.error('Failed to fetch channel list.'); // eslint-disable-line
+      return;
+    }
+
+    const channelClaim = myChannelClaims.find((x) => x.claim_id === channelId);
+    if (!channelClaim) {
+      console.error('You do not own this channel.'); // eslint-disable-line
+      return;
+    }
+
+    const channelSignature = await channelSignName(channelClaim.claim_id, channelClaim.name);
+    if (!channelSignature) {
+      console.error('Failed to sign channel name.'); // eslint-disable-line
+      return;
+    }
+
+    dispatch({
+      type: ACTIONS.COMMENT_LIST_STARTED,
+      data: {},
+    });
+
+    return Comments.comment_list({
+      page,
+      page_size: pageSize,
+      sort_by: sortBy,
+      author_claim_id: channelId,
+      requestor_channel_name: channelClaim.name,
+      requestor_channel_id: channelClaim.claim_id,
+      signature: channelSignature.signature,
+      signing_ts: channelSignature.signing_ts,
+    })
+      .then((result: CommentListResponse) => {
+        const { items: comments, total_items, total_filtered_items, total_pages } = result;
+
+        if (!comments) {
+          dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: 'No more comments.' });
+          return;
+        }
+
+        dispatch(
+          doClaimSearch({
+            page: 1,
+            page_size: 20,
+            no_totals: true,
+            claim_ids: comments.map((c) => c.claim_id),
+          })
+        )
+          .then((result) => {
+            dispatch({
+              type: ACTIONS.COMMENT_LIST_COMPLETED,
+              data: {
+                comments,
+                totalItems: total_items,
+                totalFilteredItems: total_filtered_items,
+                totalPages: total_pages,
+                uri: channelClaim.canonical_url, // hijack "Discussion Page"
+                claimId: channelClaim.claim_id, // hijack "Discussion Page"
+              },
+            });
+          })
+          .catch((err) => {
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: err });
+          });
+      })
+      .catch((error) => {
+        switch (error.message) {
+          case FETCH_API_FAILED_TO_FETCH:
+            dispatch(
+              doToast({
+                isError: true,
+                message: Comments.isCustomServer
+                  ? __('Failed to fetch comments. Verify custom server settings.')
+                  : __('Failed to fetch comments.'),
+              })
+            );
+            dispatch(doToast({ isError: true, message: `${error.message}` }));
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
+            break;
+
+          default:
+            dispatch(doToast({ isError: true, message: `${error.message}` }));
+            dispatch({ type: ACTIONS.COMMENT_LIST_FAILED, data: error });
+        }
+      });
+  };
+}
+
 export function doCommentById(commentId: string, toastIfNotFound: boolean = true) {
   return (dispatch: Dispatch, getState: GetState) => {
+    dispatch({
+      type: ACTIONS.COMMENT_BY_ID_STARTED,
+    });
+
     return Comments.comment_by_id({ comment_id: commentId, with_ancestors: true })
       .then((result: CommentByIdResponse) => {
         const { item, items, ancestors } = result;
@@ -235,17 +343,10 @@ export function doCommentById(commentId: string, toastIfNotFound: boolean = true
   };
 }
 
-export function doCommentReset(uri: string) {
+export function doCommentReset(claimId: string) {
-  return (dispatch: Dispatch, getState: GetState) => {
+  return (dispatch: Dispatch) => {
-    const state = getState();
-    const claim = selectClaimsByUri(state)[uri];
-    const claimId = claim ? claim.claim_id : null;
-
     if (!claimId) {
-      dispatch({
+      console.error(`Failed to reset comments`); //eslint-disable-line
-        type: ACTIONS.COMMENT_LIST_FAILED,
-        data: 'unable to find claim for uri',
-      });
       return;
     }
 
@@ -1055,6 +1156,10 @@ export function doFetchModBlockedList() {
   return async (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const myChannels = selectMyChannelClaims(state);
+    if (!myChannels) {
+      dispatch({ type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_FAILED });
+      return;
+    }
 
     dispatch({
       type: ACTIONS.COMMENT_MODERATION_BLOCK_LIST_STARTED,
@@ -1377,6 +1482,10 @@ export function doFetchCommentModAmIList(channelClaim: ChannelClaim) {
   return async (dispatch: Dispatch, getState: GetState) => {
     const state = getState();
     const myChannels = selectMyChannelClaims(state);
+    if (!myChannels) {
+      dispatch({ type: ACTIONS.COMMENT_MODERATION_AM_I_LIST_FAILED });
+      return;
+    }
 
     dispatch({ type: ACTIONS.COMMENT_MODERATION_AM_I_LIST_STARTED });
 

ui/redux/actions/content.js

@@ -5,6 +5,7 @@ import * as MODALS from 'constants/modal_types';
 import { ipcRenderer } from 'electron';
 // @endif
 import { doOpenModal } from 'redux/actions/app';
+import { doDeleteFile } from 'redux/actions/file';
 import {
   Lbry,
   SETTINGS,
@@ -25,12 +26,11 @@ import { makeSelectClientSetting, selectosNotificationsEnabled, selectDaemonSett
 const DOWNLOAD_POLL_INTERVAL = 1000;
 var timeOutHash = {};
 
-export function doUpdateLoadStatus(uri: string, outpoint: string) {
+export function doUpdateLoadStatus(uri: any, outpoint: string) {
   // Updates the loading status for a uri as it's downloading
   // Calls file_list and checks the written_bytes value to see if the number has increased
   // Not needed on web as users aren't actually downloading the file
   // @if TARGET='app'
-
   return (dispatch: Dispatch, getState: GetState) => {
     const setNextStatusUpdate = () =>
       (timeOutHash[outpoint] = setTimeout(() => {
@@ -100,22 +100,21 @@ export function doUpdateLoadStatus(uri: string, outpoint: string) {
   // @endif
 }
 
-export function doStopDownload(outpoint: string, sd_hash: string) {
+export function doUpdateDownloadingStatus(outpoint: string) {
+  return (dispatch: Dispatch) => {
+    if (!timeOutHash[outpoint]) {
+      dispatch(doUpdateLoadStatus(null, outpoint));
+    }
+  };
+}
+
+export function doStopDownload(outpoint: string) {
   return (dispatch: Dispatch) => {
     if (timeOutHash[outpoint]) {
       clearInterval(timeOutHash[outpoint]);
       timeOutHash[outpoint] = undefined;
     }
-    Lbry.file_delete({
+    dispatch(doDeleteFile(outpoint, false, false, null));
-      sd_hash,
-    });
-
-    dispatch({
-      type: ACTIONS.FILE_DELETE,
-      data: {
-        outpoint,
-      },
-    });
   };
 }
 

ui/redux/actions/livestream.js

@@ -1,6 +1,7 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
 import { doClaimSearch } from 'lbry-redux';
+import { LIVESTREAM_LIVE_API } from 'constants/livestream';
 
 export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dispatch, getState: GetState) => {
   dispatch({
@@ -31,3 +32,90 @@ export const doFetchNoSourceClaims = (channelId: string) => async (dispatch: Dis
     });
   }
 };
+
+const FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS = 5 * 60 * 1000;
+
+export const doFetchActiveLivestreams = (
+  orderBy: Array<string> = ['release_time'],
+  pageSize: number = 50,
+  forceFetch: boolean = false
+) => {
+  return async (dispatch: Dispatch, getState: GetState) => {
+    const state = getState();
+    const now = Date.now();
+    const timeDelta = now - state.livestream.activeLivestreamsLastFetchedDate;
+
+    const prevOptions = state.livestream.activeLivestreamsLastFetchedOptions;
+    const nextOptions = { page_size: pageSize, order_by: orderBy };
+    const sameOptions = JSON.stringify(prevOptions) === JSON.stringify(nextOptions);
+
+    if (!forceFetch && sameOptions && timeDelta < FETCH_ACTIVE_LIVESTREAMS_MIN_INTERVAL_MS) {
+      dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_SKIPPED });
+      return;
+    }
+
+    dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED });
+
+    fetch(LIVESTREAM_LIVE_API)
+      .then((res) => res.json())
+      .then((res) => {
+        if (!res.data) {
+          dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+          return;
+        }
+
+        const activeLivestreams: LivestreamInfo = res.data.reduce((acc, curr) => {
+          acc[curr.claimId] = {
+            live: curr.live,
+            viewCount: curr.viewCount,
+            creatorId: curr.claimId,
+          };
+          return acc;
+        }, {});
+
+        dispatch(
+          // ** Creators can have multiple livestream claims (each with unique
+          // chat), and all of them will play the same stream when creator goes
+          // live. The UI usually just wants to report the latest claim, so we
+          // query that store it in `latestClaimUri`.
+          doClaimSearch({
+            page_size: nextOptions.page_size,
+            has_no_source: true,
+            channel_ids: Object.keys(activeLivestreams),
+            claim_type: ['stream'],
+            order_by: nextOptions.order_by, // **
+            limit_claims_per_channel: 1, // **
+            no_totals: true,
+          })
+        )
+          .then((resolveInfo) => {
+            Object.values(resolveInfo).forEach((x) => {
+              // $FlowFixMe
+              const channelId = x.stream.signing_channel.claim_id;
+              activeLivestreams[channelId] = {
+                ...activeLivestreams[channelId],
+                // $FlowFixMe
+                latestClaimId: x.stream.claim_id,
+                // $FlowFixMe
+                latestClaimUri: x.stream.canonical_url,
+              };
+            });
+
+            dispatch({
+              type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED,
+              data: {
+                activeLivestreams,
+                activeLivestreamsLastFetchedDate: now,
+                activeLivestreamsLastFetchedOptions: nextOptions,
+              },
+            });
+          })
+          .catch(() => {
+            dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+          });
+      })
+      .catch((err) => {
+        dispatch({ type: ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED });
+      });
+  };
+};

ui/redux/actions/search.js

@@ -1,6 +1,5 @@
 // @flow
 import * as ACTIONS from 'constants/action_types';
-import { SEARCH_OPTIONS } from 'constants/search';
 import { selectShowMatureContent } from 'redux/selectors/settings';
 import {
   buildURI,
@@ -13,7 +12,8 @@ import {
 import { makeSelectSearchUrisForQuery, selectSearchValue } from 'redux/selectors/search';
 import handleFetchResponse from 'util/handle-fetch';
 import { getSearchQueryString } from 'util/query-params';
-import { SIMPLE_SITE, SEARCH_SERVER_API } from 'config';
+import { getRecommendationSearchOptions } from 'util/search';
+import { SEARCH_SERVER_API } from 'config';
 
 type Dispatch = (action: any) => any;
 type GetState = () => { search: SearchState };
@@ -140,17 +140,7 @@ export const doFetchRecommendedContent = (uri: string) => (dispatch: Dispatch, g
   const claimIsMature = makeSelectClaimIsNsfw(uri)(state);
 
   if (claim && claim.value && claim.claim_id) {
-    const options: SearchOptions = { size: 20, nsfw: matureEnabled, isBackgroundSearch: true };
+    const options: SearchOptions = getRecommendationSearchOptions(matureEnabled, claimIsMature, claim.claim_id);
-
-    if (SIMPLE_SITE) {
-      options[SEARCH_OPTIONS.CLAIM_TYPE] = SEARCH_OPTIONS.INCLUDE_FILES;
-      options[SEARCH_OPTIONS.MEDIA_VIDEO] = true;
-      options[SEARCH_OPTIONS.PRICE_FILTER_FREE] = true;
-    }
-    if (matureEnabled || !claimIsMature) {
-      options[SEARCH_OPTIONS.RELATED_TO] = claim.claim_id;
-    }
-
     const { title } = claim.value;
 
     if (title && options) {

ui/redux/reducers/comments.js

@@ -21,6 +21,7 @@ const defaultState: CommentsState = {
   superChatsByUri: {},
   pinnedCommentsById: {}, // ClaimId -> array of pinned comment IDs
   isLoading: false,
+  isLoadingById: false,
   isLoadingByParentId: {},
   isCommenting: false,
   myComments: undefined,
@@ -245,7 +246,7 @@ export default handleActions(
         claimId,
         uri,
         disabled,
-        commenterClaimId,
+        creatorClaimId,
       } = action.data;
 
       const commentById = Object.assign({}, state.commentById);
@@ -261,8 +262,8 @@ export default handleActions(
       const isLoadingByParentId = Object.assign({}, state.isLoadingByParentId);
       const settingsByChannelId = Object.assign({}, state.settingsByChannelId);
 
-      settingsByChannelId[commenterClaimId] = {
+      settingsByChannelId[creatorClaimId] = {
-        ...(settingsByChannelId[commenterClaimId] || {}),
+        ...(settingsByChannelId[creatorClaimId] || {}),
         comments_enabled: !disabled,
       };
 
@@ -335,6 +336,8 @@ export default handleActions(
       };
     },
 
+    [ACTIONS.COMMENT_BY_ID_STARTED]: (state) => ({ ...state, isLoadingById: true }),
+
     [ACTIONS.COMMENT_BY_ID_COMPLETED]: (state: CommentsState, action: any) => {
       const { comment, ancestors } = action.data;
       const claimId = comment.claim_id;
@@ -349,9 +352,7 @@ export default handleActions(
       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
+        commentById[comment.comment_id] = comment;
-        // 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;
@@ -377,6 +378,7 @@ export default handleActions(
 
       return {
         ...state,
+        isLoadingById: false,
         topLevelCommentsById,
         topLevelTotalCommentsById,
         topLevelTotalPagesById,

ui/redux/reducers/livestream.js

@@ -5,6 +5,10 @@ import { handleActions } from 'util/redux-utils';
 const defaultState: LivestreamState = {
   fetchingById: {},
   viewersById: {},
+  fetchingActiveLivestreams: false,
+  activeLivestreams: null,
+  activeLivestreamsLastFetchedDate: 0,
+  activeLivestreamsLastFetchedOptions: {},
 };
 
 export default handleActions(
@@ -36,6 +40,22 @@ export default handleActions(
       newViewersById[claimId] = connected;
       return { ...state, viewersById: newViewersById };
     },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_STARTED]: (state: LivestreamState) => {
+      return { ...state, fetchingActiveLivestreams: true };
+    },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_FAILED]: (state: LivestreamState) => {
+      return { ...state, fetchingActiveLivestreams: false };
+    },
+    [ACTIONS.FETCH_ACTIVE_LIVESTREAMS_COMPLETED]: (state: LivestreamState, action: any) => {
+      const { activeLivestreams, activeLivestreamsLastFetchedDate, activeLivestreamsLastFetchedOptions } = action.data;
+      return {
+        ...state,
+        fetchingActiveLivestreams: false,
+        activeLivestreams,
+        activeLivestreamsLastFetchedDate,
+        activeLivestreamsLastFetchedOptions,
+      };
+    },
   },
   defaultState
 );

ui/redux/reducers/settings.js

@@ -70,7 +70,6 @@ const defaultState = {
     // Content
     [SETTINGS.SHOW_MATURE]: false,
     [SETTINGS.AUTOPLAY_MEDIA]: true,
-    [SETTINGS.AUTOPLAY_NEXT]: [SETTINGS.AUTOPLAY_MEDIA],
     [SETTINGS.FLOATING_PLAYER]: true,
     [SETTINGS.AUTO_DOWNLOAD]: true,
     [SETTINGS.HIDE_REPOSTS]: SIMPLE_SITE,
@@ -80,6 +79,7 @@ const defaultState = {
     [SETTINGS.TO_TRAY_WHEN_CLOSED]: true,
   },
 };
+defaultState.clientSettings[SETTINGS.AUTOPLAY_NEXT] = defaultState.clientSettings[SETTINGS.AUTOPLAY_MEDIA];
 
 reducers[ACTIONS.REHYDRATE] = (state, action) => {
   const { clientSettings } = state;

ui/redux/selectors/blocked.js

@@ -1,5 +1,6 @@
 // @flow
 import { createSelector } from 'reselect';
+import { splitBySeparator } from 'lbry-redux';
 
 const selectState = (state: { blocked: BlocklistState }) => state.blocked || {};
 
@@ -11,3 +12,15 @@ export const makeSelectChannelIsMuted = (uri: string) =>
   createSelector(selectMutedChannels, (state: Array<string>) => {
     return state.includes(uri);
   });
+
+export const selectMutedAndBlockedChannelIds = createSelector(
+  selectState,
+  (state) => state.comments,
+  (state, commentsState) => {
+    const mutedUris = state.blockedChannels;
+    const blockedUris = commentsState.moderationBlockList;
+    return Array.from(
+      new Set((mutedUris || []).concat(blockedUris || []).map((uri) => splitBySeparator(uri)[1]))
+    ).sort();
+  }
+);

ui/redux/selectors/comments.js

@@ -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 selectIsFetchingCommentsById = createSelector(selectState, (state) => state.isLoadingById);
 export const selectIsFetchingCommentsByParentId = createSelector(selectState, (state) => state.isLoadingByParentId);
 export const selectIsPostingComment = createSelector(selectState, (state) => state.isCommenting);
 export const selectIsFetchingReacts = createSelector(selectState, (state) => state.isFetchingReacts);

ui/redux/selectors/content.js

@@ -32,13 +32,19 @@ export const makeSelectIsPlaying = (uri: string) =>
 
 export const makeSelectIsPlayerFloating = (location: UrlLocation) =>
   createSelector(selectPrimaryUri, selectPlayingUri, (primaryUri, playingUri) => {
-    const hasSecondarySource = playingUri && (playingUri.source === 'comment' || playingUri.source === 'markdown');
+    if (!playingUri) return false;
+
+    const { pathname, search } = location;
+    const hasSecondarySource = Boolean(playingUri.source);
+    const isComment = playingUri.source === 'comment';
     const isInlineSecondaryPlayer =
-      playingUri && playingUri.uri !== primaryUri && location.pathname === playingUri.pathname && hasSecondarySource;
+      hasSecondarySource && playingUri.uri !== primaryUri && pathname === playingUri.pathname;
+
+    if (isComment && isInlineSecondaryPlayer && search && search !== '?view=discussion') return true;
 
     if (
-      (playingUri && (hasSecondarySource ? playingUri.primaryUri === primaryUri : playingUri.uri === primaryUri)) ||
+      isInlineSecondaryPlayer ||
-      isInlineSecondaryPlayer
+      (hasSecondarySource && !isComment ? playingUri.primaryUri === primaryUri : playingUri.uri === primaryUri)
     ) {
       return false;
     }

ui/redux/selectors/file_info.js

@@ -1,11 +1,11 @@
 import { selectClaimsByUri, selectIsFetchingClaimListMine, selectMyClaims } from 'lbry-redux';
 import { createSelector } from 'reselect';
 
-export const selectState = state => state.fileInfo || {};
+export const selectState = (state) => state.fileInfo || {};
 
-export const selectFileInfosByOutpoint = createSelector(selectState, state => state.byOutpoint || {});
+export const selectFileInfosByOutpoint = createSelector(selectState, (state) => state.byOutpoint || {});
 
-export const selectIsFetchingFileList = createSelector(selectState, state => state.isFetchingFileList);
+export const selectIsFetchingFileList = createSelector(selectState, (state) => state.isFetchingFileList);
 
 export const selectIsFetchingFileListDownloadedOrPublished = createSelector(
   selectIsFetchingFileList,
@@ -13,31 +13,31 @@ export const selectIsFetchingFileListDownloadedOrPublished = createSelector(
   (isFetchingFileList, isFetchingClaimListMine) => isFetchingFileList || isFetchingClaimListMine
 );
 
-export const makeSelectFileInfoForUri = uri =>
+export const makeSelectFileInfoForUri = (uri) =>
   createSelector(selectClaimsByUri, selectFileInfosByOutpoint, (claims, byOutpoint) => {
     const claim = claims[uri];
     const outpoint = claim ? `${claim.txid}:${claim.nout}` : undefined;
     return outpoint ? byOutpoint[outpoint] : undefined;
   });
 
-export const selectDownloadingByOutpoint = createSelector(selectState, state => state.downloadingByOutpoint || {});
+export const selectDownloadingByOutpoint = createSelector(selectState, (state) => state.downloadingByOutpoint || {});
 
-export const makeSelectDownloadingForUri = uri =>
+export const makeSelectDownloadingForUri = (uri) =>
   createSelector(selectDownloadingByOutpoint, makeSelectFileInfoForUri(uri), (byOutpoint, fileInfo) => {
     if (!fileInfo) return false;
     return byOutpoint[fileInfo.outpoint];
   });
 
-export const selectUrisLoading = createSelector(selectState, state => state.urisLoading || {});
+export const selectUrisLoading = createSelector(selectState, (state) => state.urisLoading || {});
 
-export const makeSelectLoadingForUri = uri => createSelector(selectUrisLoading, byUri => byUri && byUri[uri]);
+export const makeSelectLoadingForUri = (uri) => createSelector(selectUrisLoading, (byUri) => byUri && byUri[uri]);
 
 export const selectFileInfosDownloaded = createSelector(
   selectFileInfosByOutpoint,
   selectMyClaims,
   (byOutpoint, myClaims) =>
-    Object.values(byOutpoint).filter(fileInfo => {
+    Object.values(byOutpoint).filter((fileInfo) => {
-      const myClaimIds = myClaims.map(claim => claim.claim_id);
+      const myClaimIds = myClaims.map((claim) => claim.claim_id);
 
       return fileInfo && myClaimIds.indexOf(fileInfo.claim_id) === -1 && (fileInfo.completed || fileInfo.written_bytes);
     })
@@ -59,7 +59,7 @@ export const selectDownloadingFileInfos = createSelector(
     const outpoints = Object.keys(downloadingByOutpoint);
     const fileInfos = [];
 
-    outpoints.forEach(outpoint => {
+    outpoints.forEach((outpoint) => {
       const fileInfo = fileInfosByOutpoint[outpoint];
 
       if (fileInfo) fileInfos.push(fileInfo);
@@ -69,10 +69,10 @@ export const selectDownloadingFileInfos = createSelector(
   }
 );
 
-export const selectTotalDownloadProgress = createSelector(selectDownloadingFileInfos, fileInfos => {
+export const selectTotalDownloadProgress = createSelector(selectDownloadingFileInfos, (fileInfos) => {
   const progress = [];
 
-  fileInfos.forEach(fileInfo => {
+  fileInfos.forEach((fileInfo) => {
     progress.push((fileInfo.written_bytes / fileInfo.total_bytes) * 100);
   });
 
@@ -82,4 +82,4 @@ export const selectTotalDownloadProgress = createSelector(selectDownloadingFileI
   return -1;
 });
 
-export const selectFileInfoErrors = createSelector(selectState, state => state.errors || {});
+export const selectFileInfoErrors = createSelector(selectState, (state) => state.errors || {});

ui/redux/selectors/livestream.js

@@ -40,3 +40,23 @@ export const makeSelectPendingLivestreamsForChannelId = (channelId: string) =>
         claim.signing_channel.claim_id === channelId
     );
   });
+
+export const selectActiveLivestreams = createSelector(selectState, (state) => state.activeLivestreams);
+
+export const makeSelectIsActiveLivestream = (uri: string) =>
+  createSelector(selectState, (state) => {
+    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
+    // $FlowFixMe
+    return Boolean(activeLivestreamValues.find((v) => v.latestClaimUri === uri));
+  });
+
+export const makeSelectActiveLivestreamUris = (uri: string) =>
+  createSelector(selectState, (state) => {
+    const activeLivestreamValues = (state.activeLivestreams && Object.values(state.activeLivestreams)) || [];
+    const uris = [];
+    activeLivestreamValues.forEach((v) => {
+      // $FlowFixMe
+      if (v.latestClaimUri) uris.push(v.latestClaimUri);
+    });
+    return uris;
+  });

ui/redux/selectors/search.js

@@ -13,7 +13,7 @@ import {
   makeSelectIsUriResolving,
 } from 'lbry-redux';
 import { createSelector } from 'reselect';
-import { createNormalizedSearchKey } from 'util/search';
+import { createNormalizedSearchKey, getRecommendationSearchOptions } from 'util/search';
 import { selectMutedChannels } from 'redux/selectors/blocked';
 import { selectHistory } from 'redux/selectors/content';
 import { selectAllCostInfoByUri } from 'lbryinc';
@@ -155,36 +155,34 @@ export const makeSelectRecommendedContentForUri = (uri: string) =>
   );
 
 export const makeSelectRecommendedRecsysIdForClaimId = (claimId: string) =>
-  createSelector(makeSelectClaimForClaimId(claimId), selectSearchResultByQuery, (claim, searchUrisByQuery) => {
+  createSelector(
-    // TODO: DRY this out.
+    makeSelectClaimForClaimId(claimId),
-    let poweredBy;
+    selectShowMatureContent,
-    if (claim && claimId) {
+    selectSearchResultByQuery,
-      const isMature = isClaimNsfw(claim);
+    (claim, matureEnabled, searchUrisByQuery) => {
-      const { title } = claim.value;
+      // TODO: DRY this out.
+      let poweredBy;
+      if (claim && claimId) {
+        const isMature = isClaimNsfw(claim);
+        const { title } = claim.value;
+        if (!title) {
+          return;
+        }
 
-      if (!title) {
+        const options = getRecommendationSearchOptions(matureEnabled, isMature, claimId);
-        return;
+        const searchQuery = getSearchQueryString(title.replace(/\//, ' '), options);
-      }
+        const normalizedSearchQuery = createNormalizedSearchKey(searchQuery);
-
+
-      const options: {
+        const searchResult = searchUrisByQuery[normalizedSearchQuery];
-        related_to?: string,
+        if (searchResult) {
-        nsfw?: boolean,
+          poweredBy = searchResult.recsys;
-        isBackgroundSearch?: boolean,
+        } else {
-      } = { related_to: claim.claim_id, isBackgroundSearch: true };
+          return normalizedSearchQuery;
-
+        }
-      options['nsfw'] = isMature;
-      const searchQuery = getSearchQueryString(title.replace(/\//, ' '), options);
-      const normalizedSearchQuery = createNormalizedSearchKey(searchQuery);
-
-      let searchResult = searchUrisByQuery[normalizedSearchQuery];
-      if (searchResult) {
-        poweredBy = searchResult.recsys;
-      } else {
-        return normalizedSearchQuery;
       }
+      return poweredBy;
     }
-    return poweredBy;
+  );
-  });
 
 export const makeSelectWinningUriForQuery = (query: string) => {
   const uriFromQuery = `lbry://${query}`;

ui/scss/all.scss

@@ -14,6 +14,7 @@
 @import 'component/button';
 @import 'component/card';
 @import 'component/channel';
+@import 'component/channel-mention';
 @import 'component/claim-list';
 @import 'component/collection';
 @import 'component/comments';

ui/scss/component/_channel-mention.scss

@@ -0,0 +1,125 @@
+.channel-mention {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  bottom: calc(100% - 1.8rem);
+  z-index: 3;
+  font-size: var(--font-small);
+  padding-left: var(--spacing-s);
+
+  > .icon {
+    top: 0;
+    left: var(--spacing-m);
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    stroke: var(--color-input-placeholder);
+  }
+
+  @media (min-width: $breakpoint-small) {
+    padding: 0;
+  }
+}
+
+.channel-mention__suggestions {
+  @extend .card;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  max-height: 30vh;
+  position: absolute;
+  text-overflow: ellipsis;
+  width: 22rem;
+  z-index: 3;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  box-shadow: var(--card-box-shadow);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom: none;
+
+  .channel-mention__label:first-of-type {
+    margin-top: var(--spacing-xs);
+  }
+}
+
+.channel-mention__suggestions[flow-bottom] {
+  top: 4rem;
+  bottom: auto;
+  border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top: none;
+  border-bottom-right-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom: auto;
+}
+
+.channel-mention__input--none {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.channel-mention__label {
+  @extend .wunderbar__label;
+}
+
+.channel-mention__top-separator {
+  @extend .wunderbar__top-separator;
+}
+
+.channel-mention__suggestion {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .channel-thumbnail {
+    @include handleChannelGif(2.1rem);
+    position: absolute;
+
+    @media (min-width: $breakpoint-small) {
+      @include handleChannelGif(2.1rem);
+    }
+  }
+}
+
+.channel-mention__suggestion-label {
+  @extend .wunderbar__suggestion-label;
+  margin-left: var(--spacing-m);
+  display: block;
+  position: relative;
+}
+
+.channel-mention__suggestion-name {
+  @extend .wunderbar__suggestion-name;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__suggestion-title {
+  @extend .wunderbar__suggestion-title;
+  margin-left: calc(var(--spacing-l) - var(--spacing-xxs));
+}
+
+.channel-mention__placeholder-suggestion {
+  @extend .wunderbar__placeholder-suggestion;
+  padding: 0 var(--spacing-xxs);
+  margin-left: var(--spacing-xxs);
+}
+
+.channel-mention__placeholder-label {
+  @extend .wunderbar__placeholder-label;
+  margin-left: var(--spacing-m);
+}
+
+.channel-mention__placeholder-thumbnail {
+  @extend .wunderbar__placeholder-thumbnail;
+  margin-left: var(--spacing-m);
+}
+.channel-mention__placeholder-info {
+  @extend .wunderbar__placeholder-info;
+  margin-left: var(--spacing-m);
+}

ui/scss/component/_claim-list.scss

@@ -556,9 +556,9 @@
 .claim-tile__info {
   display: flex;
   margin-top: var(--spacing-s);
-  padding: var(--spacing-s);
   border-top: 1px solid var(--color-border);
   color: var(--color-subtitle);
+  padding: var(--spacing-s);
 
   .channel-thumbnail {
     @include handleChannelGif(2.1rem);
@@ -605,13 +605,6 @@
   flex-wrap: wrap;
 }
 
-.view_count {
-  &::after {
-    content: '•';
-    margin: 0 var(--spacing-xxs);
-  }
-}
-
 .claim-preview__file-property-overlay {
   position: absolute;
   bottom: var(--spacing-xxs);

ui/scss/component/_comments.scss

@@ -34,6 +34,16 @@ $thumbnailWidthSmall: 1rem;
 
 .comment__create {
   font-size: var(--font-small);
+  position: relative;
+
+  fieldset-section,
+  .form-field--SimpleMDE {
+    margin-top: 0;
+  }
+
+  .form-field__two-column {
+    column-count: 2;
+  }
 }
 
 .comment__create--reply {
@@ -80,6 +90,10 @@ $thumbnailWidthSmall: 1rem;
   }
 }
 
+.content_comment {
+  position: relative;
+}
+
 .comment__thumbnail-wrapper {
   flex: 0;
   margin-top: var(--spacing-xxs);
@@ -186,6 +200,9 @@ $thumbnailWidthSmall: 1rem;
 }
 
 .comment__body-container {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
   flex: 1;
   margin-left: var(--spacing-xs);
 
@@ -473,3 +490,60 @@ $thumbnailWidthSmall: 1rem;
     margin-bottom: -3px; // TODO fix few instances of these (find "-2px")
   }
 }
+
+.comments-own {
+  .section__actions {
+    align-items: flex-start;
+  }
+
+  .comments-own--claim {
+    min-width: 100%;
+    max-width: 100%;
+
+    @media (min-width: $breakpoint-medium) {
+      min-width: 40%;
+      max-width: 40%;
+    }
+
+    .media__thumb {
+      flex-shrink: 0;
+      overflow: hidden;
+      $width: 5rem;
+      @include handleClaimListGifThumbnail($width);
+      width: $width;
+      height: calc(#{$width} * (9 / 16));
+      margin-right: var(--spacing-s);
+    }
+
+    .channel-thumbnail {
+      @include handleChannelGif(calc(5rem * 9 / 16));
+      margin-right: var(--spacing-xs);
+
+      @media (min-width: $breakpoint-small) {
+        @include handleChannelGif(calc(5rem * 9 / 16));
+        margin-right: var(--spacing-s);
+      }
+    }
+  }
+
+  .claim-preview__wrapper {
+    margin: 0 0;
+    padding: 0;
+
+    @media (min-width: $breakpoint-medium) {
+      margin: 0 var(--spacing-xs);
+    }
+  }
+
+  .comment {
+    margin-top: var(--spacing-s);
+    margin-left: 0;
+    padding-left: var(--spacing-m);
+    border-left: 4px solid var(--color-border);
+
+    @media (min-width: $breakpoint-medium) {
+      margin-top: 0;
+      margin-left: var(--spacing-s);
+    }
+  }
+}

ui/scss/component/_download-progress.scss

@@ -1,4 +1,4 @@
-.download--header {
+.download-progress__header {
   padding: 15px;
   position: fixed;
   bottom: 0;
@@ -6,11 +6,11 @@
   width: 400px;
   display: flex;
   flex-direction: column;
-  background-color: #f2f2f2;
+  background-color: var(--color-header-background); //var(--color-gray-9):dark-mode
   border-radius: 10px;
-  border: 1px solid #c5c4c3;
+  border: 1px solid var(--color-gray-3);
 }
-.download--top-close-button {
+.download-progress__top-close-button {
   position: absolute;
   top: 7px;
   right: 15px;
@@ -21,18 +21,18 @@
   div {
     height: 2px;
     width: 13px;
-    background-color: #979696;
+    background-color: var(--color-gray-4);
     border-radius: 3px;
   }
 }
-.download--state-container {
+.download-progress__state-container {
   margin-top: 10px;
   padding-bottom: 10px;
   display: flex;
   flex-direction: column;
   width: 100%;
 }
-.download--file-name {
+.download-progress__state-filename {
   margin: 0;
   font-weight: 800;
   font-size: 13px;
@@ -41,8 +41,11 @@
   white-space: nowrap;
   text-overflow: ellipsis;
   margin-right: 10px;
+  span.button__label {
+    color: var(--color-text);
+  }
 }
-.download--file-name-link {
+.download-progress__state-filename-link {
   margin: 0;
   font-weight: 800;
   font-size: 13px;
@@ -54,56 +57,55 @@
   text-decoration: underline;
   cursor: pointer;
 }
-.download--release-Time {
+.download-progress__release-time {
   margin: 0;
   font-weight: 800;
   font-size: 12px;
   margin-left: auto;
   font-style: italic;
 }
-.download--state-bar {
+.download-progress__state-bar {
   display: flex;
   flex-direction: row;
   width: 100%;
   align-items: center;
   margin-bottom: 2px;
 }
-.download--bar-container {
+.download-progress__bar-container {
   width: 100%;
-  background-color: gray;
+  background-color: var(--color-gray-5);
   height: 6px;
   border-radius: 10px;
 }
-.download--bar-content {
+.download-progress__bar-content {
   border-radius: 10px;
   height: 100%;
-  background-color: #ff9933;
+  background-color: var(--color-primary);
 }
-.download--close-button {
+.download-progress__close-button {
   flex-shrink: 0;
   margin-left: auto;
   font-size: 20px;
   cursor: pointer;
 }
-.download-count-time {
+.download-progress__count-time {
   font-size: 11px;
-  // color: gray;
+  letter-spacing: -0.6px;
 }
-.download--divider {
+.download-progress__divider {
-  border-top: 1px solid #bbb;
+  border-top: 1px solid var(--color-gray-6);
   margin-left: -15px;
   width: 110%;
 }
-.download-cancel {
+.download-progress__cancel {
   margin-top: 7px;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
 }
-.download-cancel p {
+.download-progress__cancel p {
   margin: 0;
-  color: black;
   font-size: 12px;
   margin: 0;
   white-space: nowrap;
@@ -111,23 +113,23 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.download-cancel b {
+.download-progress__cancel b {
   font-size: 13px;
 }
-.download-cancel-confirm {
+.download-progress__cancel-confirm {
   width: 90px;
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
-.download-cancel-ok {
+.download-progress__cancel-ok {
   border: none;
-  // color: rgb(4, 120, 87);
   background-color: transparent;
   font-size: 13px;
+  color: var(--color-text);
 }
-.download-cancel-ok:hover {
+.download-progress__cancel-ok:hover {
-  color: rgb(4, 120, 87);
+  color: var(--color-primary);
 }
 .download__container {
   position: fixed;
@@ -136,21 +138,24 @@
   width: 400px;
   height: 300px;
   border-radius: 10px;
-  box-shadow: 2px 2px 5px grey;
+  box-shadow: 2px 2px 5px var(--color-gray-4);
-  background-color: white;
+  background-color: var(--color-white);
   transition: width 2s;
 }
-.download__toggle-button {
+.download-progress__toggle-button {
   position: fixed;
   bottom: 10px;
   right: 10px;
   border: none;
-  background: white;
+  background: var(--color-white);
-  color: #4f4f4fbf;
+  color: var(--color-gray-6);
-  width: 60px;
+  width: 50px;
-  height: 60px;
+  height: 50px;
-  border-radius: 30px;
+  border-radius: 10px;
-  box-shadow: 2px 2px 4px grey;
+  box-shadow: 0px 5px 4px var(--color-gray-4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 .download_close_modal {
   float: right;

ui/scss/component/_expandable.scss

@@ -1,10 +1,12 @@
+$COLLAPSED_HEIGHT: 120px;
+
 .expandable--closed,
 .expandable--open {
   margin-bottom: var(--spacing-s);
 }
 
 .expandable--closed {
-  max-height: 10rem;
+  max-height: $COLLAPSED_HEIGHT * 3 / 4;
   overflow-y: hidden;
   position: relative;
   -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0)));

ui/scss/component/_livestream.scss

@@ -27,8 +27,6 @@ $recent-msg-button__height: 2rem;
 
 .livestream__discussion {
   width: 100%;
-  margin-top: var(--spacing-m);
-  margin-bottom: var(--spacing-s);
 
   @media (min-width: $breakpoint-medium) {
     margin: 0;
@@ -359,6 +357,10 @@ $recent-msg-button__height: 2rem;
     p {
       word-break: break-word;
     }
+
+    .channel-name {
+      font-size: var(--font-small);
+    }
   }
 }
 
@@ -459,3 +461,9 @@ $recent-msg-button__height: 2rem;
     }
   }
 }
+
+.livestream-list--view-more {
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: var(--spacing-m);
+}