Add hint that results are being filtered by language

static/app-strings.json

@@ -2203,5 +2203,6 @@
   "Set minimum channel age": "Set minimum channel age",
   "The minimum duration must not exceed Feb 8th, 2022.": "The minimum duration must not exceed Feb 8th, 2022.",
   "No limit": "No limit",
+  "Search results are being filtered by language. Click here to change the setting.": "Search results are being filtered by language. Click here to change the setting.",
   "--end--": "--end--"
 }

ui/component/claimListDiscover/view.jsx

@@ -15,6 +15,7 @@ import ClaimList from 'component/claimList';
 import ClaimPreview from 'component/claimPreview';
 import ClaimPreviewTile from 'component/claimPreviewTile';
 import I18nMessage from 'component/i18nMessage';
+import LangFilterIndicator from 'component/langFilterIndicator';
 import ClaimListHeader from 'component/claimListHeader';
 import useFetchViewCount from 'effects/use-fetch-view-count';
 import { useIsLargeScreen } from 'effects/use-screensize';
@@ -233,7 +234,7 @@ function ClaimListDiscover(props: Props) {
         break;
 
       default:
-        console.log('Invalid or unhandled CONTENT_KEY:', contentTypeParam);
+        console.log('Invalid or unhandled CONTENT_KEY:', contentTypeParam); // eslint-disable-line no-console
         break;
     }
   }
@@ -641,9 +642,12 @@ function ClaimListDiscover(props: Props) {
       {headerLabel && <label className="claim-list__header-label">{headerLabel}</label>}
       {tileLayout ? (
         <div>
-          {!repostedClaimId && (
+          {!repostedClaimId && showHeader && (
             <div className="section__header--actions">
+              <div className="section__actions">
                 {headerToUse}
+                {searchInSelectedLangOnly && <LangFilterIndicator />}
+              </div>
               {meta && <div className="section__actions--no-margin">{meta}</div>}
             </div>
           )}
@@ -680,7 +684,10 @@ function ClaimListDiscover(props: Props) {
         <div>
           {showHeader && (
             <div className="section__header--actions">
+              <div className="section__actions">
                 {headerToUse}
+                {searchInSelectedLangOnly && <LangFilterIndicator />}
+              </div>
               {meta && <div className="section__actions--no-margin">{meta}</div>}
             </div>
           )}

ui/component/common/icon-custom.jsx

@@ -2766,5 +2766,18 @@ export const icons = {
       </svg>
     );
   },
-  [ICONS.SUBMIT]: buildIcon(<path d="M2.01 21 23 12 2.01 3 2 10l15 2-15 2z" />),
+  [ICONS.FILTERED_BY_LANG]: buildIcon(
+    <svg viewBox="0 0 140 140" xmlns="http://www.w3.org/2000/svg" strokeWidth="1.5">
+      <g transform="matrix(5.833333333333333,0,0,5.833333333333333,0,0)">
+        <path d="M15.750 16.500 A1.500 1.500 0 1 0 18.750 16.500 A1.500 1.500 0 1 0 15.750 16.500 Z" />
+        <path d="M18.524,10.7l.443,1.452a.992.992,0,0,0,1.173.681l1.472-.341a1.339,1.339,0,0,1,1.275,2.218l-1.031,1.111a1,1,0,0,0,0,1.362l1.031,1.111a1.339,1.339,0,0,1-1.275,2.219l-1.472-.342a.993.993,0,0,0-1.173.681L18.524,22.3a1.33,1.33,0,0,1-2.548,0l-.442-1.453a.994.994,0,0,0-1.174-.681l-1.472.342a1.339,1.339,0,0,1-1.274-2.219l1.03-1.111a1,1,0,0,0,0-1.362l-1.03-1.111a1.338,1.338,0,0,1,1.274-2.218l1.472.341a.993.993,0,0,0,1.174-.681l.442-1.452A1.33,1.33,0,0,1,18.524,10.7Z" />
+        <path d="M12,23.25A11.25,11.25,0,1,1,23.028,9.767" />
+        <path d="M9.289,22.921C7.768,20.689,6.75,16.633,6.75,12S7.768,3.312,9.289,1.079" />
+        <path d="M0.775 11.25L9 11.25" />
+        <path d="M2.999 5.25L21 5.25" />
+        <path d="M2.048 17.25L9 17.25" />
+        <path d="M14.711,1.079a15.282,15.282,0,0,1,2.068,5.632" />
+      </g>
+    </svg>
+  ),
 };

ui/component/langFilterIndicator/index.js

@@ -0,0 +1,2 @@
+import LangFilterIndicator from './view';
+export default LangFilterIndicator;

ui/component/langFilterIndicator/view.jsx

@@ -0,0 +1,18 @@
+// @flow
+import React from 'react';
+import Button from 'component/button';
+import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
+import { SEARCH_IN_LANGUAGE } from 'constants/hashes';
+
+export default function LangFilterIndicator() {
+  return (
+    <Button
+      className="icon--langFilter"
+      icon={ICONS.FILTERED_BY_LANG}
+      iconSize={20}
+      description={__('Search results are being filtered by language. Click here to change the setting.')}
+      navigate={`/$/${PAGES.SETTINGS}#${SEARCH_IN_LANGUAGE}`}
+    />
+  );
+}

ui/constants/hashes.js

@@ -0,0 +1 @@
+export const SEARCH_IN_LANGUAGE = 'searchInLanguage';

ui/constants/icons.js

@@ -197,3 +197,4 @@ export const ODYSEE_DARK_TEXT = 'OdyseeLogoDarkText';
 export const FEATURED = 'Featured';
 export const DISMISS_ALL = 'DismissAll';
 export const SUBMIT = 'Submit';
+export const FILTERED_BY_LANG = 'FilteredByLang';

ui/page/discover/view.jsx

@@ -259,6 +259,7 @@ function DiscoverPage(props: Props) {
         prefixUris={useDualList ? undefined : livestreamUris}
         pins={useDualList ? undefined : getPins(dynamicRouteProps)}
         hideFilters={SIMPLE_SITE ? !(dynamicRouteProps || tags) : undefined}
+        showHeader={!useDualList}
         header={useDualList ? <span /> : repostedUri ? <span /> : undefined}
         tileLayout={repostedUri ? false : tileLayout}
         defaultOrderBy={SIMPLE_SITE ? (dynamicRouteProps ? undefined : CS.ORDER_BY_TRENDING) : undefined}

ui/scss/component/_icon.scss

@@ -85,3 +85,9 @@
 .icon--margin-right {
   margin-right: var(--spacing-xs);
 }
+
+.icon--langFilter {
+  color: var(--color-live);
+  margin-left: var(--spacing-xs);
+  opacity: 0.9;
+}