From 6eca14f140db85f4ca5f3b4513251dbb154e33ba Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 13 Jul 2021 15:19:52 -0500 Subject: [PATCH 01/89] fix issue of invalid aria-label values --- static/app-strings.json | 3 +++ ui/component/button/view.jsx | 5 ++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/static/app-strings.json b/static/app-strings.json index ec9a7c743..d56d79474 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2040,5 +2040,8 @@ "Tip Creators": "Tip Creators", "Only select creators can receive tips at this time": "Only select creators can receive tips at this time", "The payment will be made from your saved card": "The payment will be made from your saved card", + "Trending for #Art": "Trending for #Art", + "Trending for #Education": "Trending for #Education", + "Trending for #Technology": "Trending for #Technology", "--end--": "--end--" } diff --git a/ui/component/button/view.jsx b/ui/component/button/view.jsx index 46d467d05..dc0a18030 100644 --- a/ui/component/button/view.jsx +++ b/ui/component/button/view.jsx @@ -97,6 +97,9 @@ const Button = forwardRef((props: Props, ref: any) => { const combinedRef = useCombinedRefs(ref, innerRef, myref); const size = iconSize || (!label && !children) ? 18 : undefined; // Fall back to default + // Label can be a string or object ( use title instead ) + const ariaLabel = description || (typeof label === 'string' ? label : title); + const content = ( {icon && } @@ -224,7 +227,7 @@ const Button = forwardRef((props: Props, ref: any) => { ); @@ -96,6 +97,7 @@ class UriIndicator extends React.PureComponent { className={classnames(className, 'button--uri-indicator')} navigate={channelLink} target={external ? '_blank' : undefined} + {...props} > {inner} From 484f2830c82eab847ae78ddb81f680cd07d46b00 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 14 Jul 2021 17:12:07 -0500 Subject: [PATCH 09/89] improve accessibility of claim preview tiles: #6480 --- ui/component/claimPreviewTile/view.jsx | 27 ++++++++++++++------------ ui/scss/component/_claim-list.scss | 26 ++++++++++++++++++------- 2 files changed, 34 insertions(+), 19 deletions(-) diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index e95673ddf..3ffe7a484 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -225,18 +225,21 @@ function ClaimPreviewTile(props: Props) { )} - -

- - {isChannel && ( -
- -
- )} - {/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */} - -

- +
+ +

+ + {isChannel && ( +
+ +
+ )} +

+ + {/* CHECK CLAIM MENU LIST PARAMS (IS REPOST?) */} + +
+
{isChannel ? ( diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index b029bc046..d16439fe2 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -471,7 +471,7 @@ cursor: pointer; .claim__menu-button { - display: block; + opacity: 1; } .collection-preview__overlay-thumbs { opacity: 1; @@ -536,11 +536,6 @@ font-size: var(--font-small); min-height: 2rem; - .claim__menu-button { - right: 0.2rem; - top: var(--spacing-s); - } - @media (min-width: $breakpoint-small) { min-height: 2.5rem; padding-right: var(--spacing-m); @@ -737,6 +732,23 @@ } } +.claim-tile__header { + position: relative; + + .claim__menu-button { + right: 0.2rem; + top: var(--spacing-s); + + &:focus { + opacity: 1; + .icon { + background-color: var(--color-button-alt-bg); + border-radius: var(--border-radius); + } + } + } +} + .claim__menu-button { position: absolute; top: var(--spacing-xs); @@ -748,7 +760,7 @@ @media (min-width: $breakpoint-small) { &:not([aria-expanded='true']) { - display: none; + opacity: 0; } } } From 695343532d78f59535e6e7cb8acb805f5e6b00a1 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 14 Jul 2021 18:35:49 -0500 Subject: [PATCH 10/89] minor css fixes: #5145 --- ui/component/notification/view.jsx | 2 +- ui/scss/component/_claim-list.scss | 22 +++++++++++----------- ui/scss/component/_notification.scss | 5 ++++- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/ui/component/notification/view.jsx b/ui/component/notification/view.jsx index 65d6a8cba..8a6d9e181 100644 --- a/ui/component/notification/view.jsx +++ b/ui/component/notification/view.jsx @@ -193,7 +193,7 @@ export default function Notification(props: Props) {
- e.stopPropagation()}> + e.stopPropagation()}> diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index d16439fe2..b15e29568 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -79,7 +79,7 @@ &:hover { .claim__menu-button { - display: block; + opacity: 1 !important; } } } @@ -471,7 +471,7 @@ cursor: pointer; .claim__menu-button { - opacity: 1; + opacity: 1 !important; } .collection-preview__overlay-thumbs { opacity: 1; @@ -738,14 +738,6 @@ .claim__menu-button { right: 0.2rem; top: var(--spacing-s); - - &:focus { - opacity: 1; - .icon { - background-color: var(--color-button-alt-bg); - border-radius: var(--border-radius); - } - } } } @@ -758,8 +750,16 @@ stroke: var(--color-text); } + &:focus { + opacity: 1; + .icon { + background-color: var(--color-button-alt-bg); + border-radius: var(--border-radius); + } + } + @media (min-width: $breakpoint-small) { - &:not([aria-expanded='true']) { + &:not(:focus):not([aria-expanded='true']) { opacity: 0; } } diff --git a/ui/scss/component/_notification.scss b/ui/scss/component/_notification.scss index ce8e17189..f600afbde 100644 --- a/ui/scss/component/_notification.scss +++ b/ui/scss/component/_notification.scss @@ -219,7 +219,10 @@ $contentMaxWidth: 60rem; stroke: var(--color-text-help); } - button { + .notification__menu-button { + display: flex; + align-items: center; + justify-content: center; border-radius: var(--border-radius); &:focus { From 7aaaf998a8e726523e2a87de460c6f3822db3d4d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 14 Jul 2021 18:58:56 -0500 Subject: [PATCH 11/89] use aria-hidden on all tile cards thumbnails --- ui/component/claimPreview/view.jsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 4e04211b2..66541e208 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -29,7 +29,9 @@ import { ENABLE_NO_SOURCE_CLAIMS } from 'config'; import Button from 'component/button'; import * as ICONS from 'constants/icons'; -const AbandonedChannelPreview = lazyImport(() => import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */)); +const AbandonedChannelPreview = lazyImport(() => + import('component/abandonedChannelPreview' /* webpackChunkName: "abandonedChannelPreview" */) +); type Props = { uri: string, @@ -308,13 +310,13 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { })} > {isChannelUri && claim ? ( - + ) : ( <> {!pending ? ( - + {/* @if TARGET='app' */} {claim && !isCollection && ( From 6d7e92d73b2bb24a584c0f0875fd03d8fd1aa7d0 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 14 Jul 2021 22:08:30 -0500 Subject: [PATCH 12/89] improve header accessibility add skip navigation link + minor fixes --- static/app-strings.json | 1 + ui/component/header/view.jsx | 21 +++++++++++++++++++++ ui/component/page/view.jsx | 1 + ui/component/sideNavigation/view.jsx | 1 + ui/scss/component/_header.scss | 18 ++++++++++++++++++ 5 files changed, 42 insertions(+) diff --git a/static/app-strings.json b/static/app-strings.json index db3a632c5..524f02dfc 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2055,5 +2055,6 @@ "added to": "added to", "removed from": "removed from", "Item removed from Watch Later": "Item removed from Watch Later", + "Skip navigation": "Skip navigation", "--end--": "--end--" } diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index 8d127823a..2d03a19dd 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -64,6 +64,24 @@ type Props = { activeChannelStakedLevel: number, }; +const SkipNavigationButton = () => { + const skipNavigation = (e) => { + // Match any focusable element + const focusableElementQuery = ` + #main-content [tabindex]:not([tabindex="-1"]):not(:disabled), + #main-content a:not([aria-hidden]):not([tabindex="-1"]):not(:disabled), + #main-content button:not([aria-hidden]):not([tabindex="-1"]):not(:disabled) + `; + // Find first focusable element + const element = document.querySelector(focusableElementQuery); + // Trigger focus to skip navigation + if (element && element.focus) { + element.focus(); + } + }; + return ); @@ -97,7 +104,8 @@ class UriIndicator extends React.PureComponent { className={classnames(className, 'button--uri-indicator')} navigate={channelLink} target={external ? '_blank' : undefined} - {...props} + aria-hidden={!focusable} + tabIndex={focusable ? 0 : -1} > {inner} From ba763a85cd889acf1dc49ff8f9843e376b3a01ed Mon Sep 17 00:00:00 2001 From: btzr-io Date: Fri, 16 Jul 2021 02:22:54 -0500 Subject: [PATCH 27/89] remove react-helmet --- package.json | 1 - ui/component/app/view.jsx | 9 +++++---- yarn.lock | 25 +++---------------------- 3 files changed, 8 insertions(+), 27 deletions(-) diff --git a/package.json b/package.json index 6411cb3e4..51ccb5214 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,6 @@ "feed": "^4.2.2", "if-env": "^1.0.4", "react-datetime-picker": "^3.2.1", - "react-helmet": "^6.1.0", "react-top-loading-bar": "^2.0.1", "remove-markdown": "^0.3.0", "source-map-explorer": "^2.5.2", diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index dd4edbb36..d260fd053 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState, useLayoutEffect } from 'react'; import { lazyImport } from 'util/lazyImport'; import classnames from 'classnames'; import analytics from 'analytics'; -import { Helmet } from 'react-helmet'; import { buildURI, parseURI } from 'lbry-redux'; import { SIMPLE_SITE } from 'config'; import Router from 'component/router/index'; @@ -284,6 +283,11 @@ function App(props: Props) { } }, [hasMyChannels, hasNoChannels, hasActiveChannelClaim, setActiveChannelIfNotSet, setIncognito]); + useEffect(() => { + // $FlowFixMe + document.documentElement.setAttribute('lang', language); + }, [language]); + useEffect(() => { if (!languages.includes(language)) { setLanguage(language); @@ -416,9 +420,6 @@ function App(props: Props) { ref={appRef} onContextMenu={IS_WEB ? undefined : (e) => openContextMenu(e)} > - {/* Define main language */} - - {IS_WEB && lbryTvApiStatus === STATUS_DOWN ? ( Date: Tue, 20 Jul 2021 12:14:28 -0500 Subject: [PATCH 28/89] fix accessibility issue on rewards page #5991 --- ui/component/claimPreviewTile/view.jsx | 3 +-- ui/component/header/view.jsx | 6 +++--- ui/component/rewardLink/view.jsx | 5 +++-- ui/component/rewardTile/view.jsx | 18 +++++++++++++----- ui/page/rewards/view.jsx | 6 +++++- 5 files changed, 25 insertions(+), 13 deletions(-) diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index efb5e8aa4..9d17d31c7 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -206,14 +206,13 @@ function ClaimPreviewTile(props: Props) { return (
  • - + {!isChannel && ( diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index f3eb7d8d2..344855669 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -70,9 +70,9 @@ const SkipNavigationButton = () => { const skipNavigation = (e) => { // Match any focusable element const focusableElementQuery = ` - #main-content [tabindex]:not([tabIndex="-1"]):not(:disabled), - #main-content a:not([aria-hidden]):not([tabIndex="-1"]):not(:disabled), - #main-content button:not([aria-hidden]):not([tabIndex="-1"]):not(:disabled) + #main-content [tabindex]:not([tabindex="-1"]):not(:disabled), + #main-content a:not([aria-hidden]):not([tabindex="-1"]):not(:disabled), + #main-content button:not([aria-hidden]):not([tabindex="-1"]):not(:disabled) `; // Find first focusable element const element = document.querySelector(focusableElementQuery); diff --git a/ui/component/rewardLink/view.jsx b/ui/component/rewardLink/view.jsx index fba7f1758..b0167213e 100644 --- a/ui/component/rewardLink/view.jsx +++ b/ui/component/rewardLink/view.jsx @@ -13,11 +13,12 @@ type Props = { label: ?string, reward: Reward, button: ?boolean, + disabled: boolean, claimReward: (Reward) => void, }; const RewardLink = (props: Props) => { - const { reward, claimReward, label, isPending, button } = props; + const { reward, claimReward, label, isPending, button, disabled = false } = props; let displayLabel = label; if (isPending) { displayLabel = __('Claiming...'); @@ -34,7 +35,7 @@ const RewardLink = (props: Props) => { return !reward ? null : (
    • } diff --git a/ui/page/rewards/view.jsx b/ui/page/rewards/view.jsx index 0519b0702..a54df27ab 100644 --- a/ui/page/rewards/view.jsx +++ b/ui/page/rewards/view.jsx @@ -102,6 +102,8 @@ class RewardsPage extends PureComponent { } renderCustomRewardCode() { + const { user } = this.props; + const isNotEligible = !user || !user.primary_email || !user.has_verified_email || !user.is_reward_approved; return ( { reward_title: __('Custom Code'), reward_description: __('Are you a supermodel or rockstar that received a custom reward code? Claim it here.'), }} + disabled={isNotEligible} /> ); } @@ -155,12 +158,13 @@ class RewardsPage extends PureComponent { return (
    {rewards.map((reward) => ( - + ))} {this.renderCustomRewardCode()}
    From 7375c106a2509f4073430449607904037d1fb5bb Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 20 Jul 2021 12:56:55 -0500 Subject: [PATCH 29/89] fix channel quick menu actions z-index: #6582 --- static/app-strings.json | 11 +++-------- ui/scss/component/_channel.scss | 3 ++- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index 47a1a3569..1c82b4533 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2014,14 +2014,14 @@ "Chat": "Chat", "Tipped": "Tipped", "Fromage": "Fromage", - "In Favorites": "In Favorites", + "In Favorites": "In Favorites", "In Watch Later": "In Watch Later", "In %lastCollectionName%": "In %lastCollectionName%", "Remove from Watch Later": "Remove from Watch Later", "Add to Watch Later": "Add to Watch Later", - "Added": "Added", + "Added": "Added", "Item added to Watch Later": "Item added to Watch Later", - "Item removed from Watch Later": "Item removed from Watch Later", + "Item removed from Watch Later": "Item removed from Watch Later", "Item added to %lastCollectionName%": "Item added to %lastCollectionName%", "Item removed from %lastCollectionName%": "Item removed from %lastCollectionName%", "Your publish is being confirmed and will be live soon": "Your publish is being confirmed and will be live soon", @@ -2051,16 +2051,11 @@ "The payment will be made from your saved card": "The payment will be made from your saved card", "A channel is required to comment on lbry.tv": "A channel is required to comment on lbry.tv", "Commenting...": "Commenting...", - "Add to Watch Later": "Add to Watch Later", - "Remove from Watch Later": "Remove from Watch Later", - "Added": "Added", "Show %count% replies": "Show %count% replies", "Show reply": "Show reply", "added to": "added to", "removed from": "removed from", - "Item removed from Watch Later": "Item removed from Watch Later", "Skip Navigation": "Skip Navigation", - "In Favorites": "In Favorites", "by %channelTitle%": "by %channelTitle%", "Reset": "Reset", "Reset to original (previous) publish date": "Reset to original (previous) publish date", diff --git a/ui/scss/component/_channel.scss b/ui/scss/component/_channel.scss index a03cd891c..25d358df2 100644 --- a/ui/scss/component/_channel.scss +++ b/ui/scss/component/_channel.scss @@ -1,5 +1,6 @@ $cover-z-index: 0; $metadata-z-index: 1; +$actions-z-index: 2; .channel-cover { position: relative; @@ -200,7 +201,7 @@ $metadata-z-index: 1; top: 0; right: var(--spacing-m); margin-top: var(--spacing-m); - z-index: $metadata-z-index; + z-index: $actions-z-index; flex-wrap: wrap; font-size: var(--font-base); From f6261611f06471259ac9eb1bf49471d54dcd9991 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 20 Jul 2021 18:49:41 -0500 Subject: [PATCH 30/89] fix ClaimPreview errors --- ui/component/claimPreview/view.jsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 1694bbe24..a1b050c56 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -180,7 +180,17 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { const isCollection = claim && claim.value_type === 'collection'; const isChannelUri = isValid ? parseURI(uri).isChannel : false; const signingChannel = claim && claim.signing_channel; - const channelTitle = signingChannel && (signingChannel.value.title || signingChannel.name); + + // Get channel title ( use name as fallback ) + let channelTitle = null; + if (signingChannel) { + const { value, name } = signingChannel; + if (value && value.title) { + channelTitle = value.title; + } else { + channelTitle = name; + } + } // Aria-label value for claim preview let ariaLabelData = title; @@ -375,7 +385,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { {pending ? ( ) : ( - + )} From 6a8d32c9bf4dcf75dbe49cc06daa5164e9365322 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Tue, 20 Jul 2021 19:31:26 -0500 Subject: [PATCH 31/89] add SkipNavigationButton to its own file --- static/app-strings.json | 3 +++ ui/component/header/view.jsx | 21 +------------------- ui/component/skipNavigationButton/index.jsx | 22 +++++++++++++++++++++ 3 files changed, 26 insertions(+), 20 deletions(-) create mode 100644 ui/component/skipNavigationButton/index.jsx diff --git a/static/app-strings.json b/static/app-strings.json index 1c82b4533..337199728 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2059,5 +2059,8 @@ "by %channelTitle%": "by %channelTitle%", "Reset": "Reset", "Reset to original (previous) publish date": "Reset to original (previous) publish date", + "Trending for #Art": "Trending for #Art", + "Trending for #Education": "Trending for #Education", + "Trending for #Technology": "Trending for #Technology", "--end--": "--end--" } diff --git a/ui/component/header/view.jsx b/ui/component/header/view.jsx index fcf2334f3..c5ee304d0 100644 --- a/ui/component/header/view.jsx +++ b/ui/component/header/view.jsx @@ -15,6 +15,7 @@ import { useIsMobile } from 'effects/use-screensize'; import NotificationBubble from 'component/notificationBubble'; import NotificationHeaderButton from 'component/notificationHeaderButton'; import ChannelThumbnail from 'component/channelThumbnail'; +import SkipNavigationButton from 'component/skipNavigationButton'; // @if TARGET='app' import { remote } from 'electron'; import { IS_MAC } from 'component/app/view'; @@ -64,26 +65,6 @@ type Props = { activeChannelStakedLevel: number, }; -// Allow screen reader users ( or keyboard navigation ) -// to jump to main content -const SkipNavigationButton = () => { - const skipNavigation = (e) => { - // Match any focusable element - const focusableElementQuery = ` - #main-content [tabindex]:not([tabindex="-1"]):not(:disabled), - #main-content a:not([aria-hidden]):not([tabindex="-1"]):not(:disabled), - #main-content button:not([aria-hidden]):not([tabindex="-1"]):not(:disabled) - `; - // Find first focusable element - const element = document.querySelector(focusableElementQuery); - // Trigger focus to skip navigation - if (element && element.focus) { - element.focus(); - } - }; - return
    - {!hideMenu && ( - - )} + {!hideMenu && } ); From 083aff2ceb7432a59f0107c2c58c83a06e2e131d Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 22 Jul 2021 02:55:40 -0500 Subject: [PATCH 34/89] minor fix for channel menu button alignment --- ui/scss/component/_claim-list.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/scss/component/_claim-list.scss b/ui/scss/component/_claim-list.scss index d1ae58bcc..eca9875ca 100644 --- a/ui/scss/component/_claim-list.scss +++ b/ui/scss/component/_claim-list.scss @@ -760,6 +760,7 @@ width: var(--height-button); padding: 0; border-radius: var(--border-radius); + align-self: flex-end; } } From 86e1cfc3ddd54e16fdf72270cd268a3ead50136b Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 22 Jul 2021 03:24:25 -0500 Subject: [PATCH 35/89] refactoring of claim preview aria-label format --- static/app-strings.json | 1 + ui/component/claimPreview/view.jsx | 32 +++----------------------- ui/component/claimPreviewTile/view.jsx | 15 ++---------- ui/util/formatAriaLabel.js | 32 ++++++++++++++++++++++++++ 4 files changed, 38 insertions(+), 42 deletions(-) create mode 100644 ui/util/formatAriaLabel.js diff --git a/static/app-strings.json b/static/app-strings.json index 185ec6f77..5eb0aa77b 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2058,6 +2058,7 @@ "Skip Navigation": "Skip Navigation", "Reset": "Reset", "Reset to original (previous) publish date": "Reset to original (previous) publish date", + "%title% by %channelTitle%": "%title% by %channelTitle%", "%title% by %channelTitle% %ariaDate%": "%title% by %channelTitle% %ariaDate%", "%title% by %channelTitle% %ariaDate%, %mediaDuration%": "%title% by %channelTitle% %ariaDate%, %mediaDuration%", "--end--": "--end--" diff --git a/ui/component/claimPreview/view.jsx b/ui/component/claimPreview/view.jsx index 88bafe9e7..3f668d523 100644 --- a/ui/component/claimPreview/view.jsx +++ b/ui/component/claimPreview/view.jsx @@ -2,11 +2,12 @@ import type { Node } from 'react'; import React, { useEffect, forwardRef } from 'react'; import { NavLink, withRouter } from 'react-router-dom'; +import { isEmpty } from 'util/object'; import { lazyImport } from 'util/lazyImport'; import classnames from 'classnames'; import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux'; import { formatLbryUrlForWeb } from 'util/url'; -import { isEmpty } from 'util/object'; +import { formatClaimPreviewTitle } from 'util/formatAriaLabel'; import FileThumbnail from 'component/fileThumbnail'; import UriIndicator from 'component/uriIndicator'; import PreviewOverlayProperties from 'component/previewOverlayProperties'; @@ -27,7 +28,6 @@ import ClaimPreviewHidden from './claim-preview-no-mature'; import ClaimPreviewNoContent from './claim-preview-no-content'; import { ENABLE_NO_SOURCE_CLAIMS } from 'config'; import Button from 'component/button'; -import DateTime from 'component/dateTime'; import * as ICONS from 'constants/icons'; const AbandonedChannelPreview = lazyImport(() => @@ -194,33 +194,7 @@ const ClaimPreview = forwardRef((props: Props, ref: any) => { } // Aria-label value for claim preview - let ariaDate = date ? DateTime.getTimeAgoStr(date) : null; - let ariaLabelData = title; - - if (!isChannelUri && channelTitle) { - if (mediaDuration) { - if (ariaDate) { - ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%, %mediaDuration%', { - title, - channelTitle, - ariaDate, - mediaDuration, - }); - } else { - ariaLabelData += ariaLabelData = __('%title% by %channelTitle%, %mediaDuration%', { - title, - channelTitle, - mediaDuration, - }); - } - } else { - if (ariaDate) { - ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%', { title, channelTitle, ariaDate }); - } else { - ariaLabelData += ariaLabelData = __('%title% by %channelTitle%', { title, channelTitle }); - } - } - } + let ariaLabelData = isChannelUri ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration); let navigateUrl = formatLbryUrlForWeb((claim && claim.canonical_url) || uri || '/'); if (listId) { diff --git a/ui/component/claimPreviewTile/view.jsx b/ui/component/claimPreviewTile/view.jsx index f33aa9ef6..867fc89c7 100644 --- a/ui/component/claimPreviewTile/view.jsx +++ b/ui/component/claimPreviewTile/view.jsx @@ -10,6 +10,7 @@ import ChannelThumbnail from 'component/channelThumbnail'; import SubscribeButton from 'component/subscribeButton'; import useGetThumbnail from 'effects/use-get-thumbnail'; import { formatLbryUrlForWeb } from 'util/url'; +import { formatClaimPreviewTitle } from 'util/formatAriaLabel'; import { parseURI, COLLECTIONS_CONSTS, isURIEqual } from 'lbry-redux'; import PreviewOverlayProperties from 'component/previewOverlayProperties'; import FileDownloadLink from 'component/fileDownloadLink'; @@ -122,19 +123,7 @@ function ClaimPreviewTile(props: Props) { const channelTitle = signingChannel && (signingChannel.value.title || signingChannel.name); // Aria-label value for claim preview - let ariaLabelData = title; - - if (!isChannel && channelTitle) { - ariaLabelData += ' ' + __('by %channelTitle%', { channelTitle }); - } - - if (date) { - ariaLabelData += ' ' + DateTime.getTimeAgoStr(date); - } - - if (mediaDuration) { - ariaLabelData += ', ' + mediaDuration; - } + let ariaLabelData = isChannel ? title : formatClaimPreviewTitle(title, channelTitle, date, mediaDuration); function handleClick(e) { if (navigateUrl) { diff --git a/ui/util/formatAriaLabel.js b/ui/util/formatAriaLabel.js new file mode 100644 index 000000000..f45e87ee9 --- /dev/null +++ b/ui/util/formatAriaLabel.js @@ -0,0 +1,32 @@ +import DateTime from 'component/dateTime'; + +export function formatClaimPreviewTitle(title, channelTitle, date, mediaDuration) { + // Aria-label value for claim preview + let ariaDate = date ? DateTime.getTimeAgoStr(date) : null; + let ariaLabelData = title; + + if (mediaDuration) { + if (ariaDate) { + ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%, %mediaDuration%', { + title, + channelTitle, + ariaDate, + mediaDuration, + }); + } else { + ariaLabelData += ariaLabelData = __('%title% by %channelTitle%, %mediaDuration%', { + title, + channelTitle, + mediaDuration, + }); + } + } else { + if (ariaDate) { + ariaLabelData += ariaLabelData = __('%title% by %channelTitle% %ariaDate%', { title, channelTitle, ariaDate }); + } else { + ariaLabelData += ariaLabelData = __('%title% by %channelTitle%', { title, channelTitle }); + } + } + + return ariaLabelData; +} From c82884cff964ea15a7d405e41dcdae9c5d8fb495 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 22 Jul 2021 12:32:35 -0500 Subject: [PATCH 36/89] truncate title on channel Page #6635 --- ui/page/channel/view.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/ui/page/channel/view.jsx b/ui/page/channel/view.jsx index 1bd03b613..57eecb2d9 100644 --- a/ui/page/channel/view.jsx +++ b/ui/page/channel/view.jsx @@ -24,6 +24,7 @@ import ClaimMenuList from 'component/claimMenuList'; import OptimizedImage from 'component/optimizedImage'; import Yrbl from 'component/yrbl'; import I18nMessage from 'component/i18nMessage'; +import TruncatedText from 'component/common/truncated-text'; // $FlowFixMe cannot resolve ... import PlaceholderTx from 'static/img/placeholderTx.gif'; @@ -225,7 +226,9 @@ function ChannelPage(props: Props) {

    - {title || '@' + channelName} + + {title || '@' + channelName} +

    From f3b5079241e1686f5dcd521e40086ce6fd5e5182 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 22 Jul 2021 12:46:29 -0500 Subject: [PATCH 37/89] don't use break-all for livestream chat comments: #6602 --- ui/scss/component/_livestream.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/scss/component/_livestream.scss b/ui/scss/component/_livestream.scss index d22f467ff..cb7e5414c 100644 --- a/ui/scss/component/_livestream.scss +++ b/ui/scss/component/_livestream.scss @@ -318,7 +318,7 @@ $discussion-header__height: 3rem; padding-bottom: var(--spacing-xxs); .markdown-preview { p { - word-break: break-all; + word-break: break-word; } } } From f2cd9f372ebf2215e61fc8d5d3f941d05b7fc58c Mon Sep 17 00:00:00 2001 From: zeppi Date: Thu, 22 Jul 2021 23:07:32 -0400 Subject: [PATCH 38/89] Chan fol disc recon --- ui/page/channelsFollowingDiscover/view.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/ui/page/channelsFollowingDiscover/view.jsx b/ui/page/channelsFollowingDiscover/view.jsx index bf4b88fe5..a89737530 100644 --- a/ui/page/channelsFollowingDiscover/view.jsx +++ b/ui/page/channelsFollowingDiscover/view.jsx @@ -127,6 +127,9 @@ function ChannelsFollowingDiscover(props: Props) { claimType={CS.CLAIM_CHANNEL} claimIds={CUSTOM_HOMEPAGE && channelIds ? channelIds : undefined} scrollAnchor={MORE_CHANNELS_ANCHOR} + maxPages={SIMPLE_SITE ? 3 : undefined} + hideFilters={SIMPLE_SITE} + header={SIMPLE_SITE ?

    {__('Moon cheese is an acquired taste')}

    : undefined} /> ); From ed0387d94a046742096a741ac9fa7517905b7659 Mon Sep 17 00:00:00 2001 From: zeppi Date: Thu, 22 Jul 2021 22:15:45 -0400 Subject: [PATCH 39/89] pinning --- flow-typed/homepage.js | 2 +- ui/component/claimTilesDiscover/view.jsx | 14 +++++++++----- ui/page/home/view.jsx | 5 ++--- ui/util/buildHomepage.js | 1 + 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/flow-typed/homepage.js b/flow-typed/homepage.js index bf00bed7c..f1696840f 100644 --- a/flow-typed/homepage.js +++ b/flow-typed/homepage.js @@ -17,7 +17,7 @@ declare type RowDataItem = { help?: any, icon?: string, extra?: any, - pinUrls?: Array, + pinnedUrls?: Array, options?: { channelIds?: Array, limitClaimsPerChannel?: number, diff --git a/ui/component/claimTilesDiscover/view.jsx b/ui/component/claimTilesDiscover/view.jsx index 069c8f7ca..a54c04a73 100644 --- a/ui/component/claimTilesDiscover/view.jsx +++ b/ui/component/claimTilesDiscover/view.jsx @@ -114,7 +114,6 @@ type Props = { renderProperties?: (Claim) => ?Node, liveLivestreamsFirst?: boolean, livestreamMap?: { [string]: any }, - pin?: boolean, pinUrls?: Array, showNoSourceClaims?: boolean, }; @@ -147,7 +146,6 @@ function ClaimTilesDiscover(props: Props) { mutedUris, liveLivestreamsFirst, livestreamMap, - pin, pinUrls, prefixUris, showNoSourceClaims, @@ -291,9 +289,9 @@ function ClaimTilesDiscover(props: Props) { }; const modifiedUris = uris ? uris.slice() : []; - const fixUris = pinUrls || ['lbry://@AlisonMorrow#6/LBRY#8']; + const fixUris = pinUrls || []; - if (pin && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') { + if (pinUrls && modifiedUris && modifiedUris.length > 2 && window.location.pathname === '/') { fixUris.forEach((fixUri) => { if (modifiedUris.indexOf(fixUri) !== -1) { modifiedUris.splice(modifiedUris.indexOf(fixUri), 1); @@ -308,7 +306,13 @@ function ClaimTilesDiscover(props: Props) {