Merge branch 'staging', remote-tracking branch 'origin' into bose/2088

sanityv3/schemas/objects/videoFile.tsx

@@ -20,6 +20,7 @@ export default {
       name: 'thumbnail',
       type: 'imageWithAlt',
       title: 'Thumbnail',
+      description: 'Use the alt text below to describe the video content (for screenreaders).',
       initialValue: {
         isDecorative: true,
       },

search/IndexSanityContent/events/sanity.ts

@@ -4,12 +4,13 @@ import * as TE from 'fp-ts/lib/TaskEither'
 import { pipe } from 'fp-ts/lib/function'
 import { SanityClient } from '@sanity/client'
 import { Language, Page } from '../../common'
+import { plainTextExcludingStrikeThrough } from '../../common/queryHelpers'
 
 const query = /* groq */ `*[_type match "route_" + $lang + "*" && content->_type == "event" && !(_id in path("drafts.**")) && excludeFromSearch != true] {
   "slug": slug.current,
   _id,
   "content": content->{
-    "title": pt::text(title),
+    "title": ${plainTextExcludingStrikeThrough('title')},
     "ingress": pt::text(ingress),
     "eventDate": eventDate.date,
     "eventDescription": pt::text(content),

search/IndexSanityContent/magazine/sanity.ts

@@ -4,6 +4,7 @@ import { pipe } from 'fp-ts/lib/function'
 import { SanityClient } from '@sanity/client'
 import { Language } from '../../common'
 import { MappableAccordionType, MappableTextBlockType } from '../common/mappers'
+import { plainTextExcludingStrikeThrough } from '../../common/queryHelpers'
 
 export enum HeroTypes {
   DEFAULT = 'default',
@@ -23,22 +24,22 @@ const publishDateTimeQuery = /* groq */ `
 export const query = /* groq */ `*[_type == "magazine" && _lang == $lang && !(_id in path("drafts.**")) && excludeFromSearch != true] {
   "slug": slug.current,
   _id,
-  "title": pt::text(title),
+  "title": ${plainTextExcludingStrikeThrough('title')},
   "type": _type,
   "ingress": pt::text(ingress),
   "textBlocks": content[_type == "textBlock"]{
     "_key": _key,
     "title": select(
       isBigText == true =>
-        pt::text(bigTitle),
-        pt::text(title)
+      ${plainTextExcludingStrikeThrough('bigTitle')},
+      ${plainTextExcludingStrikeThrough('title')}
       ),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },
   "accordions": content[_type == "accordion"] {
     "_key": _key,
-    "title": pt::text(title),
+    "title": ${plainTextExcludingStrikeThrough('title')},
     "ingress": pt::text(ingress),
     "accordionItems":accordion[]{
       "id": _key,

search/IndexSanityContent/topic/sanity.ts

@@ -4,25 +4,26 @@ import { pipe } from 'fp-ts/lib/function'
 import { SanityClient } from '@sanity/client'
 import { Language } from '../../common'
 import { MappableAccordionType, MappableTextBlockType } from '../common/mappers'
+import { plainTextExcludingStrikeThrough } from '../../common/queryHelpers'
 
 export const query = /* groq */ `*[_type match "route_" + $lang + "*" && content->_type == "page" && !(_id in path("drafts.**")) && excludeFromSearch != true] {
   "slug": slug.current,
   _id,
-  "title": pt::text(content->title),
+  "title": ${plainTextExcludingStrikeThrough('content->title')},
   "type": content->_type,
   "textBlocks": content->content[_type == "textBlock"]{
     "_key": _key,
     "title": select(
       isBigText == true =>
-        pt::text(bigTitle),
-        pt::text(title)
+        ${plainTextExcludingStrikeThrough('bigTitle')},
+        ${plainTextExcludingStrikeThrough('title')}
       ),
     "ingress": pt::text(ingress),
     "text": pt::text(text)  // TODO: Do this manually to cover all cases
   },
   "accordions": content->content[_type == "accordion"] {
     "_key": _key,
-    "title": pt::text(title),
+    "title": ${plainTextExcludingStrikeThrough('title')},
     "ingress": pt::text(ingress),
     "accordionItems":accordion[]{
       "id": _key,

search/common/queryHelpers.ts

@@ -0,0 +1,7 @@
+export const plainTextExcludingStrikeThrough = (blockTextField: string) => {
+  return /* groq */ `
+  pt::text(${blockTextField}[]{
+        ...,
+          children[!("s" in marks)]
+        })`
+}

web/components/src/HLSPlayer/index.tsx

@@ -10,6 +10,7 @@ import useVideoAnalytics from '../../../lib/hooks/useVideoAnalytics'
 type HLSProps = Omit<HTMLProps<HTMLVideoElement>, 'src'> & {
   src: string
   playButton?: boolean
+  videoDescription?: string
 }
 
 const Wrapper = styled.div<{ $showSpinner: boolean }>`
@@ -69,6 +70,8 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   controls = false,
   playButton = false,
   autoPlay = false,
+  muted = false,
+  videoDescription,
   ...props
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null)
@@ -157,7 +160,11 @@ export const HLSPlayer: React.FC<HLSProps> = ({
   }, [playButton])
 
   return (
-    <Wrapper $showSpinner={showSpinner}>
+    <Wrapper
+      $showSpinner={showSpinner}
+      role={muted ? 'img' : undefined}
+      aria-label={muted ? videoDescription : undefined}
+    >
       <video
         playsInline
         ref={videoRef}

web/lib/algolia.ts

@@ -1,5 +1,19 @@
 import algoliasearch, { AlgoliaSearchOptions } from 'algoliasearch/lite'
 import { algolia } from './config'
+import { createInMemoryCache } from '@algolia/cache-in-memory'
+import { createFallbackableCache } from '@algolia/cache-common'
+import { createBrowserLocalStorageCache } from '@algolia/cache-browser-local-storage'
 
-export const searchClient = (options: AlgoliaSearchOptions | undefined) =>
-  algoliasearch(algolia.applicationId, algolia.searchApiKey, options)
+export const searchClient = (options?: AlgoliaSearchOptions) =>
+  algoliasearch(algolia.applicationId, algolia.searchApiKey, {
+    ...options,
+    responsesCache: createFallbackableCache({
+      caches: [
+        createBrowserLocalStorageCache({
+          key: `algolia-responses-${algolia.applicationId}`,
+          timeToLive: 600, // 10 minutes cache
+        }),
+        createInMemoryCache(),
+      ],
+    }),
+  })

web/lib/queries/common/pageContentFields.ts

@@ -101,19 +101,15 @@ _type == "keyNumbers" =>{
   _type == "figure"=>{
     "type": _type,
     "id": _key,
-      // For these images, we don't want crop and hotspot
-  // because we don't know the aspect ratio
     "figure": figure{
       _type,
-        "image": {
-          "asset": image.asset,
-          "alt": image.alt,
-        },
+      image,
       attribution,
       caption
     },
     "designOptions": {
       "background": coalesce(background.title, 'White'),
+      "aspectRatio": coalesce(aspectRatio, '16:9'),
     },
   },
   _type == "textWithIconArray"=>{

web/package.json

@@ -21,6 +21,9 @@
     "type-check": "tsc --project tsconfig.json --pretty --noEmit"
   },
   "dependencies": {
+    "@algolia/cache-browser-local-storage": "^4.22.1",
+    "@algolia/cache-common": "^4.22.1",
+    "@algolia/cache-in-memory": "^4.22.1",
     "@chakra-ui/react": "^2.4.2",
     "@chakra-ui/skip-nav": "^2.0.12",
     "@emotion/react": "^11",

web/pageComponents/pageTemplates/newsroom/UncontrolledSearchBox.tsx

@@ -42,7 +42,7 @@ const Input = styled.input`
 
 export type SearchBoxProps = UseSearchBoxProps
 
-const DEBOUNCE_TIME = 300
+const DEBOUNCE_TIME = 800
 let timerId: any = undefined
 
 const queryHook: UseSearchBoxProps['queryHook'] = (query, search) => {

web/pageComponents/search/Search.tsx

@@ -22,7 +22,7 @@ const StyledPagination = styled(Pagination)`
   margin-top: var(--space-xLarge);
   justify-content: center;
 `
-const searchClient = client(undefined)
+const searchClient = client()
 const queriedSearchClient: SearchClient = {
   ...searchClient,
   search(requests: any) {

web/pageComponents/search/SearchBox.tsx

@@ -3,7 +3,7 @@ import { useSearchBox, UseSearchBoxProps } from 'react-instantsearch'
 import ControlledSearchBox from './ControlledSearchBox'
 import { SearchContext } from './SearchContext'
 
-const DEBOUNCE_TIME = 300
+const DEBOUNCE_TIME = 800
 
 export type SearchBoxProps = ComponentProps<'div'> & UseSearchBoxProps
 

web/pageComponents/shared/Hero/FiftyFiftyHero.tsx

@@ -86,14 +86,7 @@ export const FiftyFiftyHero = ({ title, ingress, link, background, figure, isBig
       <StyledHero background={background}>
         <StyledMedia>
           {figure && (
-            <Image
-              maxWidth={4096}
-              sizes="(min-width: 760px) 50vw, 100vw"
-              image={figure.image}
-              fill
-              style={{ objectFit: 'cover' }}
-              priority
-            />
+            <Image maxWidth={4096} sizes="(min-width: 760px) 50vw, 100vw" image={figure.image} fill priority />
           )}
         </StyledMedia>
         <StyledContent>

web/pageComponents/shared/Hero/LoopingVideo.tsx

@@ -40,7 +40,15 @@ export const LoopingVideo = ({ video }: { video: LoopingVideoData }) => {
   return (
     <Container $aspectRatio={ratio}>
       <StyledFigure>
-        <StyledHLSPlayer loop muted autoPlay title={title} poster={thumbnailURL.src} src={url} />
+        <StyledHLSPlayer
+          loop
+          muted
+          autoPlay
+          title={title}
+          poster={thumbnailURL.src}
+          src={url}
+          videoDescription={thumbnail.alt}
+        />
       </StyledFigure>
     </Container>
   )

web/pageComponents/shared/SanityImage.tsx

@@ -22,15 +22,7 @@ export enum Ratios {
 const DEFAULT_SIZES = '(max-width: 800px) 100vw, 800px'
 const DEFAULT_MAX_WIDTH = 1440
 
-const Image = ({
-  image,
-  aspectRatio,
-  sizes = DEFAULT_SIZES,
-  maxWidth = DEFAULT_MAX_WIDTH,
-  fill,
-  style,
-  ...rest
-}: Props) => {
+const Image = ({ image, aspectRatio, sizes = DEFAULT_SIZES, maxWidth = DEFAULT_MAX_WIDTH, fill, ...rest }: Props) => {
   const imageProps = useSanityLoader(image, maxWidth, aspectRatio)
   if (!image?.asset) return <></>
   const { width, height, src } = imageProps
@@ -41,14 +33,14 @@ const Image = ({
     // Layout fill
     props = {
       fill,
-      style: { ...style, objectFit: 'cover' },
+      style: { objectFit: 'cover' },
     }
   } else {
     // Layout responsive
     props = {
       width,
       height,
-      style: { ...style, display: 'flex', width: '100%', height: 'auto' },
+      style: { display: 'flex', width: '100%', height: 'auto' },
     }
   }
 

web/pageComponents/topicPages/Figure.tsx

@@ -2,7 +2,7 @@ import type { FigureData } from '../../types/types'
 import styled from 'styled-components'
 import { BackgroundContainer, FigureCaption } from '@components'
 import { StyledTextBlockWrapper } from './TextBlock'
-import Image from '../shared/SanityImage'
+import Image, { Ratios } from '../shared/SanityImage'
 
 type TeaserProps = {
   data: FigureData
@@ -35,15 +35,19 @@ const FullWidthImage = ({ data, anchor }: TeaserProps) => {
   if (!figure?.image) return null
 
   const { image, caption, attribution } = figure
+  const { aspectRatio } = designOptions
+  // If we add more ratios, create a switch statement for the sanity ratios, for now we only have 9:16
+  const sizes = '(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)'
 
   return (
     <StyledFigureWrapper background={designOptions?.background} id={anchor}>
       <StyledFigure>
-        <Image
-          image={image}
-          maxWidth={920}
-          sizes="(min-width: 2060px) 920px, (min-width: 440px) calc(34.56vw + 215px), calc(76.67vw + 38px)"
-        />
+        {aspectRatio !== 'original' ? (
+          <Image image={image} aspectRatio={Ratios.NINE_TO_SIXTEEN} maxWidth={920} sizes={sizes} />
+        ) : (
+          <Image image={image} maxWidth={920} sizes={sizes} />
+        )}
+
         {(caption || attribution) && (
           <FigureCaption>
             {caption && <FigureCaption.Caption>{caption}</FigureCaption.Caption>}

web/types/types.ts

@@ -269,6 +269,7 @@ export type DesignOptions = {
   background?: BackgroundColours
   imagePosition?: TeaserImagePosition
   imageSize?: TeaserImageSize
+  aspectRatio?: FigureRatio
 }
 
 export type TextBlockData = {
@@ -376,6 +377,8 @@ export type FullWidthVideoData = {
 
 export type FullWidthVideoRatio = 'fullScreen' | 'narrow' | '2:1'
 
+export type FigureRatio = 'original' | '9:16'
+
 export type FigureData = {
   type: string
   id: string