GIVCAMP-282 | React Player preview (light) (#216)

* test out light mode

* only set playing=true when preview is enabled

* Preview icon

* Preview mode as a toggle in storyblok

* masonry grid video player preview mode

* Slightly smaller on mobile

* Enable preview mode aria-label

* Update feature masonry video embed preview mode also; Add hocus styles to icon

* playsinline

components/EmbedMedia/EmbedMedia.styles.ts

@@ -1,2 +1,4 @@
 export const mediaWrapper = '*:!w-full *:!h-full';
 export const caption = '*:*:leading-display caption mt-1em max-w-prose-wide';
+export const iconWrapper = 'size-50 sm:size-70 bg-black-true/70 border-3 rounded-full border-white group-hocus-within:scale-110 transition group-hocus-within:bg-digital-red';
+export const previewIcon = 'text-white size-24 sm:size-30';

components/EmbedMedia/EmbedMedia.tsx

@@ -2,7 +2,9 @@ import { useEffect, useState } from 'react';
 import { cnb } from 'cnbuilder';
 import ReactPlayer from 'react-player/lazy';
 import { Container } from '../Container';
+import { FlexBox } from '../FlexBox';
 import { WidthBox, type WidthType } from '../WidthBox';
+import { HeroIcon } from '../HeroIcon';
 import { type PaddingType } from '@/utilities/datasource';
 import { type MediaAspectRatioType, mediaAspectRatios } from '@/utilities/datasource';
 import * as styles from './EmbedMedia.styles';
@@ -16,8 +18,16 @@ type EmbedMediaProps = React.HTMLAttributes<HTMLDivElement> & {
   spacingTop?: PaddingType;
   spacingBottom?: PaddingType;
   isCaptionInset?: boolean;
+  isPreview?: boolean;
+  previewAriaLabel?: string;
 };
 
+const PlayPreviewIcon = (
+  <FlexBox alignItems="center" justifyContent="center" className={styles.iconWrapper}>
+    <HeroIcon icon="play" noBaseStyle className={styles.previewIcon} />
+  </FlexBox>
+);
+
 export const EmbedMedia = ({
   mediaUrl,
   caption,
@@ -27,6 +37,8 @@ export const EmbedMedia = ({
   spacingTop,
   spacingBottom,
   isCaptionInset,
+  isPreview,
+  previewAriaLabel,
   className,
   ...props
 }: EmbedMediaProps) => {
@@ -59,6 +71,13 @@ export const EmbedMedia = ({
               height="100%"
               url={mediaUrl}
               controls
+              playsinline
+              light={isPreview ? true : false}
+              playing={isPreview ? true : false}
+              playIcon={isPreview ? PlayPreviewIcon : undefined}
+              // This previewAriaLabel prop is not documented but it is in the React Player source code
+              previewAriaLabel={isPreview ? previewAriaLabel : undefined}
+              className="group"
             />
           )}
         </div>

components/FeaturedStories/FeatureMasonry.tsx

@@ -20,6 +20,7 @@ type FeatureMasonryProps = React.HTMLAttributes<HTMLDivElement> & {
   imageFocus1?: string;
   imageAlt1?: string;
   videoUrl?: string;
+  previewAriaLabel?: string;
   caption?: string;
 }
 
@@ -34,6 +35,7 @@ export const FeatureMasonry = ({
   imageFocus1,
   imageAlt1,
   videoUrl,
+  previewAriaLabel,
   caption,
   className,
   ...props
@@ -92,8 +94,10 @@ export const FeatureMasonry = ({
         </div>
         <EmbedMedia
           mediaUrl={videoUrl}
+          isPreview
           className="lg:col-span-6 bg-black-70"
           aspectRatio="16x9"
+          previewAriaLabel={previewAriaLabel}
         />
       </Grid>
       <Text variant="caption" leading="display" className="text-black-70 max-w-prose-wide mt-1em whitespace-pre-line">

components/HeroIcon/HeroIcon.styles.tsx

@@ -21,7 +21,7 @@ import {
   XMarkIcon,
 } from '@heroicons/react/24/outline';
 import { CheckIcon } from '@heroicons/react/16/solid';
-import { PlayIcon } from '@heroicons/react/24/solid';
+import { PlayIcon } from '@heroicons/react/20/solid';
 
 export const iconMap = {
   action: ChevronRightIcon,
@@ -50,7 +50,7 @@ export const iconMap = {
   minus: MinusIcon,
   more: ArrowRightIcon,
   pause: PauseCircleIcon,
-  play: PlayCircleIcon,
+  play: PlayIcon,
   'play-outline': PlayCircleIcon,
   plus: PlusIcon,
   right: ArrowRightIcon,

components/Storyblok/SbEmbedMedia.tsx

@@ -19,6 +19,8 @@ type SbEmbedMediaProps = {
     spacingBottom?: PaddingType;
     isCaptionInset?: boolean;
     isCaptionLight?: boolean;
+    isPreview?: boolean;
+    previewAriaLabel?: string;
   };
 };
 
@@ -33,6 +35,8 @@ export const SbEmbedMedia = ({
     spacingBottom,
     isCaptionInset,
     isCaptionLight,
+    isPreview,
+    previewAriaLabel = 'Play video',
   },
   blok,
 }: SbEmbedMediaProps) => {
@@ -49,6 +53,8 @@ export const SbEmbedMedia = ({
       spacingTop={spacingTop}
       spacingBottom={spacingBottom}
       isCaptionInset={isCaptionInset}
+      isPreview={isPreview}
+      previewAriaLabel={previewAriaLabel}
     />
   );
 };

components/Storyblok/SbFeatureMasonry.tsx

@@ -12,6 +12,7 @@ export type SbFeatureMasonryProps = {
     image1?: SbImageType;
     imageAlt1?: string;
     videoUrl?: string;
+    previewAriaLabel?: string;
     caption?: string;
   };
 };
@@ -25,6 +26,7 @@ export const SbFeatureMasonry = ({
     image1: { filename: imageSrc1, focus: imageFocus1 } = {},
     imageAlt1,
     videoUrl,
+    previewAriaLabel = 'Play video',
     caption,
   },
   blok,
@@ -41,6 +43,7 @@ export const SbFeatureMasonry = ({
     imageFocus1={imageFocus1}
     imageAlt1={imageAlt1}
     videoUrl={videoUrl}
+    previewAriaLabel={previewAriaLabel}
     caption={caption}
   />
 );

package.json

@@ -40,7 +40,7 @@
     "framer-motion": "^10.16.4",
     "next": "13.4.9",
     "react-loading-skeleton": "^3.3.1",
-    "react-player": "^2.14.1",
+    "react-player": "^2.15.1",
     "storyblok-rich-text-react-renderer-ts": "^3.2.0",
     "usehooks-ts": "^2.9.1"
   },