From b788dac65cb689d82f270d0ce6ffa5c746591d2f Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 30 Jan 2024 12:03:51 -0800 Subject: [PATCH 1/9] test out light mode --- components/EmbedMedia/EmbedMedia.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 19673016..c06feb10 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -59,6 +59,8 @@ export const EmbedMedia = ({ height="100%" url={mediaUrl} controls + light={mediaUrl?.includes('soundcloud') ? false : true} + playing /> )} From 09518a8d0cc563e23ba7b3c3a63f7c8acc2c2379 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 30 Jan 2024 16:16:57 -0800 Subject: [PATCH 2/9] only set playing=true when preview is enabled --- components/EmbedMedia/EmbedMedia.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index c06feb10..6ce11efa 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -60,7 +60,7 @@ export const EmbedMedia = ({ url={mediaUrl} controls light={mediaUrl?.includes('soundcloud') ? false : true} - playing + playing={mediaUrl?.includes('soundcloud') ? false : true} /> )} From fd617aca469baa53dacdaf1fabd852f43b1ff220 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 31 Jan 2024 11:36:10 -0800 Subject: [PATCH 3/9] Preview icon --- components/EmbedMedia/EmbedMedia.styles.ts | 2 ++ components/EmbedMedia/EmbedMedia.tsx | 9 +++++++++ components/HeroIcon/HeroIcon.styles.tsx | 4 ++-- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/components/EmbedMedia/EmbedMedia.styles.ts b/components/EmbedMedia/EmbedMedia.styles.ts index b4cf4a41..5e0681bd 100644 --- a/components/EmbedMedia/EmbedMedia.styles.ts +++ b/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-70 bg-black-true/70 border-3 rounded-full border-white'; +export const previewIcon = 'text-white size-30'; diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 6ce11efa..448d7e5d 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/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'; @@ -18,6 +20,12 @@ type EmbedMediaProps = React.HTMLAttributes & { isCaptionInset?: boolean; }; +const PlayPreviewIcon = ( + + + +); + export const EmbedMedia = ({ mediaUrl, caption, @@ -61,6 +69,7 @@ export const EmbedMedia = ({ controls light={mediaUrl?.includes('soundcloud') ? false : true} playing={mediaUrl?.includes('soundcloud') ? false : true} + playIcon={mediaUrl?.includes('soundcloud') ? undefined : PlayPreviewIcon} /> )} diff --git a/components/HeroIcon/HeroIcon.styles.tsx b/components/HeroIcon/HeroIcon.styles.tsx index 8bc90191..7d6d1386 100644 --- a/components/HeroIcon/HeroIcon.styles.tsx +++ b/components/HeroIcon/HeroIcon.styles.tsx @@ -20,7 +20,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, @@ -48,7 +48,7 @@ export const iconMap = { minus: MinusIcon, more: ArrowRightIcon, pause: PauseCircleIcon, - play: PlayCircleIcon, + play: PlayIcon, 'play-outline': PlayCircleIcon, plus: PlusIcon, right: ArrowRightIcon, From f936c8cf27b9cb16849ea6ac0878635bbdd7c3c6 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 31 Jan 2024 11:55:05 -0800 Subject: [PATCH 4/9] Preview mode as a toggle in storyblok --- components/EmbedMedia/EmbedMedia.tsx | 8 +++++--- components/Storyblok/SbEmbedMedia.tsx | 3 +++ 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 448d7e5d..7c5705e9 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -18,6 +18,7 @@ type EmbedMediaProps = React.HTMLAttributes & { spacingTop?: PaddingType; spacingBottom?: PaddingType; isCaptionInset?: boolean; + isPreview?: boolean; }; const PlayPreviewIcon = ( @@ -35,6 +36,7 @@ export const EmbedMedia = ({ spacingTop, spacingBottom, isCaptionInset, + isPreview, className, ...props }: EmbedMediaProps) => { @@ -67,9 +69,9 @@ export const EmbedMedia = ({ height="100%" url={mediaUrl} controls - light={mediaUrl?.includes('soundcloud') ? false : true} - playing={mediaUrl?.includes('soundcloud') ? false : true} - playIcon={mediaUrl?.includes('soundcloud') ? undefined : PlayPreviewIcon} + light={isPreview ? true : false} + playing={isPreview ? true : false} + playIcon={isPreview ? PlayPreviewIcon : undefined} /> )} diff --git a/components/Storyblok/SbEmbedMedia.tsx b/components/Storyblok/SbEmbedMedia.tsx index 63ab971f..a7f56cf1 100644 --- a/components/Storyblok/SbEmbedMedia.tsx +++ b/components/Storyblok/SbEmbedMedia.tsx @@ -19,6 +19,7 @@ type SbEmbedMediaProps = { spacingBottom?: PaddingType; isCaptionInset?: boolean; isCaptionLight?: boolean; + isPreview?: boolean; }; }; @@ -33,6 +34,7 @@ export const SbEmbedMedia = ({ spacingBottom, isCaptionInset, isCaptionLight, + isPreview, }, blok, }: SbEmbedMediaProps) => { @@ -49,6 +51,7 @@ export const SbEmbedMedia = ({ spacingTop={spacingTop} spacingBottom={spacingBottom} isCaptionInset={isCaptionInset} + isPreview={isPreview} /> ); }; From 0fce6a10323bd7ae59dbe2be4f0186543b705d29 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 31 Jan 2024 11:57:30 -0800 Subject: [PATCH 5/9] masonry grid video player preview mode --- components/FeaturedStories/FeatureMasonry.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/FeaturedStories/FeatureMasonry.tsx b/components/FeaturedStories/FeatureMasonry.tsx index 6750842d..7d195be0 100644 --- a/components/FeaturedStories/FeatureMasonry.tsx +++ b/components/FeaturedStories/FeatureMasonry.tsx @@ -92,6 +92,7 @@ export const FeatureMasonry = ({ From 9b208e86a071cd2bb46917415cfc696a1a799853 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Wed, 31 Jan 2024 12:15:19 -0800 Subject: [PATCH 6/9] Slightly smaller on mobile --- components/EmbedMedia/EmbedMedia.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/EmbedMedia/EmbedMedia.styles.ts b/components/EmbedMedia/EmbedMedia.styles.ts index 5e0681bd..9fc5586a 100644 --- a/components/EmbedMedia/EmbedMedia.styles.ts +++ b/components/EmbedMedia/EmbedMedia.styles.ts @@ -1,4 +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-70 bg-black-true/70 border-3 rounded-full border-white'; -export const previewIcon = 'text-white size-30'; +export const iconWrapper = 'size-50 sm:size-70 bg-black-true/70 border-3 rounded-full border-white'; +export const previewIcon = 'text-white size-24 sm:size-30'; From 51fb9498373aae2f05f1ac1bd4c6dac3d601ab73 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 2 Apr 2024 13:16:56 -0700 Subject: [PATCH 7/9] Enable preview mode aria-label --- components/EmbedMedia/EmbedMedia.tsx | 4 ++++ components/Storyblok/SbEmbedMedia.tsx | 3 +++ package-lock.json | 8 ++++---- package.json | 2 +- 4 files changed, 12 insertions(+), 5 deletions(-) diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 7c5705e9..42717423 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -19,6 +19,7 @@ type EmbedMediaProps = React.HTMLAttributes & { spacingBottom?: PaddingType; isCaptionInset?: boolean; isPreview?: boolean; + previewAriaLabel?: string; }; const PlayPreviewIcon = ( @@ -37,6 +38,7 @@ export const EmbedMedia = ({ spacingBottom, isCaptionInset, isPreview, + previewAriaLabel, className, ...props }: EmbedMediaProps) => { @@ -72,6 +74,8 @@ export const EmbedMedia = ({ 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} /> )} diff --git a/components/Storyblok/SbEmbedMedia.tsx b/components/Storyblok/SbEmbedMedia.tsx index a7f56cf1..73252ed6 100644 --- a/components/Storyblok/SbEmbedMedia.tsx +++ b/components/Storyblok/SbEmbedMedia.tsx @@ -20,6 +20,7 @@ type SbEmbedMediaProps = { isCaptionInset?: boolean; isCaptionLight?: boolean; isPreview?: boolean; + previewAriaLabel?: string; }; }; @@ -35,6 +36,7 @@ export const SbEmbedMedia = ({ isCaptionInset, isCaptionLight, isPreview, + previewAriaLabel = 'Play video', }, blok, }: SbEmbedMediaProps) => { @@ -52,6 +54,7 @@ export const SbEmbedMedia = ({ spacingBottom={spacingBottom} isCaptionInset={isCaptionInset} isPreview={isPreview} + previewAriaLabel={previewAriaLabel} /> ); }; diff --git a/package-lock.json b/package-lock.json index 9b659b37..a5df6ab5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,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" }, @@ -4370,9 +4370,9 @@ } }, "node_modules/react-player": { - "version": "2.14.1", - "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.14.1.tgz", - "integrity": "sha512-jILj7F9o+6NHzrJ1GqZIxfJgskvGmKeJ05FNhPvgiCpvMZFmFneKEkukywHcULDO2lqITm+zcEkLSq42mX0FbA==", + "version": "2.15.1", + "resolved": "https://registry.npmjs.org/react-player/-/react-player-2.15.1.tgz", + "integrity": "sha512-ni1XFuYZuhIKKdeFII+KRLmIPcvCYlyXvtSMhNOgssdfnSovmakBtBTW2bxowPvmpKy5BTR4jC4CF79ucgHT+g==", "dependencies": { "deepmerge": "^4.0.0", "load-script": "^1.0.0", diff --git a/package.json b/package.json index 76f56a61..f4da6521 100644 --- a/package.json +++ b/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" }, From 5bb2ed78f49f04043ef1dc7691a164a958dfdbe6 Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 2 Apr 2024 16:40:22 -0700 Subject: [PATCH 8/9] Update feature masonry video embed preview mode also; Add hocus styles to icon --- components/EmbedMedia/EmbedMedia.styles.ts | 2 +- components/EmbedMedia/EmbedMedia.tsx | 1 + components/FeaturedStories/FeatureMasonry.tsx | 3 +++ components/Storyblok/SbFeatureMasonry.tsx | 3 +++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/EmbedMedia/EmbedMedia.styles.ts b/components/EmbedMedia/EmbedMedia.styles.ts index 9fc5586a..568e846e 100644 --- a/components/EmbedMedia/EmbedMedia.styles.ts +++ b/components/EmbedMedia/EmbedMedia.styles.ts @@ -1,4 +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'; +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'; diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 42717423..36a59a69 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -76,6 +76,7 @@ export const EmbedMedia = ({ 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" /> )} diff --git a/components/FeaturedStories/FeatureMasonry.tsx b/components/FeaturedStories/FeatureMasonry.tsx index 3b244910..1d78917b 100644 --- a/components/FeaturedStories/FeatureMasonry.tsx +++ b/components/FeaturedStories/FeatureMasonry.tsx @@ -20,6 +20,7 @@ type FeatureMasonryProps = React.HTMLAttributes & { imageFocus1?: string; imageAlt1?: string; videoUrl?: string; + previewAriaLabel?: string; caption?: string; } @@ -34,6 +35,7 @@ export const FeatureMasonry = ({ imageFocus1, imageAlt1, videoUrl, + previewAriaLabel, caption, className, ...props @@ -95,6 +97,7 @@ export const FeatureMasonry = ({ isPreview className="lg:col-span-6 bg-black-70" aspectRatio="16x9" + previewAriaLabel={previewAriaLabel} /> diff --git a/components/Storyblok/SbFeatureMasonry.tsx b/components/Storyblok/SbFeatureMasonry.tsx index a68f95ed..2e7a90ee 100644 --- a/components/Storyblok/SbFeatureMasonry.tsx +++ b/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} /> ); From dd20af703062c226286f266d28cdb0870f254b0e Mon Sep 17 00:00:00 2001 From: Yvonne Tang Date: Tue, 2 Apr 2024 17:21:38 -0700 Subject: [PATCH 9/9] playsinline --- components/EmbedMedia/EmbedMedia.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/EmbedMedia/EmbedMedia.tsx b/components/EmbedMedia/EmbedMedia.tsx index 36a59a69..5e2eb457 100644 --- a/components/EmbedMedia/EmbedMedia.tsx +++ b/components/EmbedMedia/EmbedMedia.tsx @@ -71,6 +71,7 @@ export const EmbedMedia = ({ height="100%" url={mediaUrl} controls + playsinline light={isPreview ? true : false} playing={isPreview ? true : false} playIcon={isPreview ? PlayPreviewIcon : undefined}