add message to say content is hidden according to settings (2703)

CHANGELOG.md

@@ -68,6 +68,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Volume setting is now saved between videos ([#2934](https://github.com/lbryio/lbry-desktop/pull/2934))
 - Granular balance information on wallet page - includes LBC locked in tips/claims/supports ([#2916](https://github.com/lbryio/lbry-desktop/pull/2916))
 - Acknowledgement of [terms of service](https://lbry.com/termsofservice) and age verification on sign in ([#2925](https://github.com/lbryio/lbry-desktop/pull/2925))
+- Hidden NSFW content message on tag search results page ([#3038](https://github.com/lbryio/lbry-desktop/pull/3038))
 
 ### Changed
 

src/ui/component/claimListDiscover/view.jsx

@@ -45,6 +45,7 @@ type Props = {
     [string]: Array<string>,
   },
   hiddenUris: Array<string>,
+  hiddenNsfwMessage?: Node,
 };
 
 function ClaimListDiscover(props: Props) {
@@ -61,6 +62,7 @@ function ClaimListDiscover(props: Props) {
     location,
     hiddenUris,
     hideCustomization,
+    hiddenNsfwMessage,
   } = props;
   const didNavigateForward = history.action === 'PUSH';
   const [page, setPage] = useState(1);
@@ -109,6 +111,7 @@ function ClaimListDiscover(props: Props) {
     (personalSort === SEARCH_SORT_CHANNELS && subscribedChannels.length) ||
     (personalSort === SEARCH_SORT_YOU && !!tags.length) ||
     personalSort === SEARCH_SORT_ALL;
+  const hasMatureTags = tags.some(t => MATURE_TAGS.includes(t));
   const claimSearchCacheQuery = createNormalizedClaimSearchKey(options);
   const uris = (hasContent && claimSearchByQuery[claimSearchCacheQuery]) || [];
   const shouldPerformSearch =
@@ -237,6 +240,7 @@ function ClaimListDiscover(props: Props) {
           ))}
         </FormField>
       )}
+      {hasMatureTags && hiddenNsfwMessage}
     </Fragment>
   );
 

src/ui/component/common/hidden-nsfw.jsx

@@ -0,0 +1,23 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
+import I18nMessage from 'component/i18nMessage';
+
+type Props = {
+  type?: string,
+};
+
+export default function HiddenNsfw(props: Props) {
+  const { type = 'page' } = props;
+
+  return (
+    <div className="section--padded section__subtitle">
+      <Icon className="icon--hidden" icon={ICONS.EYE_OFF} />
+      <I18nMessage tokens={{ type, settings: <Button button="link" label={__('settings')} href="/$/settings" /> }}>
+        Content may be hidden on this %type% because of your %settings%
+      </I18nMessage>
+    </div>
+  );
+}

src/ui/page/tags/view.jsx

@@ -5,6 +5,7 @@ import ClaimListDiscover from 'component/claimListDiscover';
 import Button from 'component/button';
 import useHover from 'effects/use-hover';
 import analytics from 'analytics';
+import HiddenNsfw from 'component/common/hidden-nsfw';
 
 type Props = {
   location: { search: string },
@@ -45,6 +46,7 @@ function TagsPage(props: Props) {
     <Page>
       <ClaimListDiscover
         tags={tags}
+        hiddenNsfwMessage={<HiddenNsfw type="page" />}
         meta={<Button ref={buttonRef} button="link" onClick={handleFollowClick} requiresAuth={IS_WEB} label={label} />}
       />
     </Page>

src/ui/scss/component/_icon.scss

@@ -28,3 +28,7 @@
   height: 1rem;
   width: 1rem;
 }
+
+.icon--hidden {
+  margin-right: var(--spacing-small);
+}