Adding sensitive content warning/filter to detail and search

src/apps/detailPages/MediaContents.tsx

@@ -1,15 +1,19 @@
 import { useTranslations } from '@i18n/useTranslations';
+import { Button } from '@performant-software/core-data';
 import Viewer from '@samvera/clover-iiif/viewer';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
+import _ from 'underscore';
 
 interface Props {
   model: string;
   uuid: string;
   data: any;
+  showContentWarning?: boolean;
 }
 
 const MediaContents = (props: Props) => {
   const { t } = useTranslations();
+  const [showContentWarning, setShowContentWarning] = useState(props.showContentWarning);
 
   const count = useMemo(
     () => props.data.items.reduce((acc, item) => acc + item.item_count, 0),
@@ -22,14 +26,28 @@ const MediaContents = (props: Props) => {
   return (
     <div className='py-6'>
       <h2 className='capitalize text-lg font-semibold mb-2'>{t('relatedMedia', { count })}</h2>
-      <Viewer 
-        iiifContent={iiifURL} 
-        options={{
-          informationPanel: {
-            open: false
-          }
-        }} 
-      />
+        { showContentWarning && (
+          <div className='flex items-center flex-col md:flex-row gap-6 my-4'>
+            <p className='text-lg'>{t('contentWarningRelatedMedia')}</p>
+            <Button
+              onClick={() => setShowContentWarning(false)}
+              primary='true'
+              rounded='true'
+            >
+              {t('yes')}
+            </Button>
+          </div>
+        ) }
+      { !showContentWarning && (
+        <Viewer 
+          iiifContent={iiifURL} 
+          options={{
+            informationPanel: {
+              open: false
+            }
+          }} 
+        />
+      ) }
     </div>
   )
 }

src/apps/detailPages/RelatedMedia.astro

@@ -1,6 +1,7 @@
 ---
 import MediaContents from '@apps/detailPages/MediaContents';
 import ServiceFactory from '@services/coreData/factory';
+import _ from 'underscore';
 
 interface Props {
   model: string;
@@ -11,12 +12,16 @@ const { model, uuid } = Astro.props;
 
 const service = ServiceFactory.getService(model);
 const manifests = await service.getRelatedManifests(uuid);
+const { mediaContents } = await service.getRelatedMedia(uuid);
+const showContentWarning = _.some(mediaContents, (img) => (img.content_warning));
+
 ---
 {manifests && manifests?.items?.length > 0 && (
   <MediaContents
     client:only='react'
     data={manifests}
     model={model}
     uuid={uuid}
+    showContentWarning={showContentWarning}
   />
 )}

src/apps/search/list/ListLayout.tsx

@@ -7,6 +7,7 @@ import { useContext } from 'react';
 import TranslationContext from '@contexts/TranslationContext';
 import SortBy from '@apps/search/list/SortBy';
 import Stats from '@apps/search/list/Stats';
+import SensitiveContentToggle from './SensitiveContentToggle';
 
 interface Props {
   lang: string;
@@ -42,7 +43,9 @@ const ListLayout = (props: Props) => {
             className='py-0'
             config={config}
             open
-          />
+          >
+            <SensitiveContentToggle />
+          </Facets>
         </div>
         <div className='flex-1 pb-6'>
           <div className='flex justify-between items-center py-5'>

src/apps/search/list/SensitiveContentToggle.tsx

@@ -0,0 +1,41 @@
+import TranslationContext from "@contexts/TranslationContext";
+import { Checkbox } from '@performant-software/core-data';
+import { useContext } from "react";
+import { useSearchConfig } from "../SearchConfigContext";
+import { useToggleRefinement } from "react-instantsearch";
+
+const SensitiveContentToggle = () => {
+  const { t } = useContext(TranslationContext);
+  const config = useSearchConfig();
+
+
+  if (!(config.type === 'image')) {
+    return null;
+  }
+
+  const { value, refine } = useToggleRefinement({
+    attribute: 'content_warning',
+    on: false
+  });
+
+  return (
+    <div
+      className='text-sm flex items-center'
+    >
+      <Checkbox
+        ariaLabel={t('sensitiveContentFilter')}
+        checked={value.isRefined}
+        id='sensitiveContentFilter'
+        onClick={(checked) => refine({ isRefined: !checked })} 
+      />
+      <label
+        htmlFor='sensitiveContentFilter'
+        className='px-1'
+      >
+        { t('sensitiveContentFilter') }
+      </label>
+    </div>
+  );
+}
+
+export default SensitiveContentToggle;

src/i18n/i18n.json

@@ -490,5 +490,17 @@
   "tags": {
     "tinaLabel": "Tags",
     "defaultValue": "Tags"
+  },
+  "content_warning": {
+    "tinaLabel": "Content Warning",
+    "defaultValue": "Content Warning"
+  },
+  "sensitiveContentFilter": {
+    "tinaLabel": "Sensitive content filter for image search",
+    "defaultValue": "Hide sensitive content"
+  },
+  "contentWarningRelatedMedia": {
+    "tinaLabel": "Sensitive content warning for related media",
+    "defaultValue": "This media contain sensitive content. Show anyway?"
   }
 }