From 0d7a2bbc992a9b001a4985bfc3c39b3f1cbd2dc8 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Mon, 18 Nov 2024 17:33:26 +0000
Subject: [PATCH 1/4] Allow for Vimeo vids in VideoPlayer

---
 .../components/VideoEmbed/VideoEmbed.tsx      | 38 ++++++++++++++-----
 .../ExhibitionGuideStops.tsx                  | 12 +++++-
 .../exhibitions/[id]/[type]/[stop]/index.tsx  |  6 ++-
 .../services/prismic/transformers/body.ts     |  4 ++
 .../prismic/transformers/exhibition-guides.ts | 16 ++++++--
 .../exhibition-highlight-tours.ts             | 22 +++++++++--
 content/webapp/types/exhibition-guides.ts     |  6 ++-
 7 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/common/views/components/VideoEmbed/VideoEmbed.tsx b/common/views/components/VideoEmbed/VideoEmbed.tsx
index 77ed17975e..3242e9db4f 100644
--- a/common/views/components/VideoEmbed/VideoEmbed.tsx
+++ b/common/views/components/VideoEmbed/VideoEmbed.tsx
@@ -10,6 +10,8 @@ import PrismicHtmlBlock from '@weco/common/views/components/PrismicHtmlBlock/Pri
 
 export type Props = {
   embedUrl: string;
+  videoProvider?: string;
+  videoThumbnail?: string;
   caption?: prismic.RichTextField;
   transcript?: prismic.RichTextField;
   hasFullSizePoster?: boolean;
@@ -54,6 +56,8 @@ const VideoTrigger = styled.button<{ $hasFullSizePoster?: boolean }>`
 
 const VideoEmbed: FunctionComponent<Props> = ({
   embedUrl,
+  videoProvider,
+  videoThumbnail,
   caption,
   transcript,
   hasFullSizePoster,
@@ -61,9 +65,14 @@ const VideoEmbed: FunctionComponent<Props> = ({
   const [isActive, setIsActive] = useState(false);
   const id = embedUrl.match(/embed\/(.*)\?/)?.[1];
   const hasAnalyticsConsent = getConsentState('analytics');
-  const isYouTube = embedUrl.indexOf('youtube') >= 0;
+  const isYouTube = videoProvider === 'YouTube';
+  const isVimeo = videoProvider === 'Vimeo';
 
   useEffect(() => {
+    // TODO do we need analytics consent for vimeo?
+    // Do we need this?
+    /* <script src="https://player.vimeo.com/api/player.js"></script> */
+
     if (isYouTube && hasAnalyticsConsent) {
       // GA4 automatically tracks YouTube engagement, but requires the iframe api
       // script to have been loaded on the page. Since we're lazyloading youtube
@@ -86,17 +95,31 @@ const VideoEmbed: FunctionComponent<Props> = ({
     }
   }, []);
 
+  const videoSrc = isYouTube
+    ? `${embedUrl}&enablejsapi=1&autoplay=1`
+    : isVimeo
+      ? `${embedUrl}&autoplay=1`
+      : undefined;
+
+  const thumbnailSrc = isYouTube
+    ? `https://img.youtube.com/vi/${id}/${
+        hasFullSizePoster ? 'maxresdefault' : 'hqdefault'
+      }.jpg`
+    : isVimeo
+      ? videoThumbnail
+      : undefined;
+
   return (
     <>
       <VideoEmbedWrapper data-chromatic="ignore">
         <IframeContainer>
-          {isActive ? (
+          {isActive && videoSrc ? (
             <iframe
               className="iframe"
               title="Video"
               allowFullScreen={true}
               allow="autoplay; picture-in-picture"
-              src={`${embedUrl}&enablejsapi=1&autoplay=1`}
+              src={videoSrc}
               style={{ border: 0 }}
             />
           ) : (
@@ -105,13 +128,8 @@ const VideoEmbed: FunctionComponent<Props> = ({
               $hasFullSizePoster={hasFullSizePoster}
             >
               <span className="visually-hidden">Play video</span>
-              <YouTubePlay />
-              <img
-                src={`https://img.youtube.com/vi/${id}/${
-                  hasFullSizePoster ? 'maxresdefault' : 'hqdefault'
-                }.jpg`}
-                alt=""
-              />
+              {isYouTube && <YouTubePlay />}
+              {thumbnailSrc && <img src={thumbnailSrc} alt="" />}
             </VideoTrigger>
           )}
         </IframeContainer>
diff --git a/content/webapp/components/ExhibitionGuideStops/ExhibitionGuideStops.tsx b/content/webapp/components/ExhibitionGuideStops/ExhibitionGuideStops.tsx
index 50bbf1b190..ff854db1cf 100644
--- a/content/webapp/components/ExhibitionGuideStops/ExhibitionGuideStops.tsx
+++ b/content/webapp/components/ExhibitionGuideStops/ExhibitionGuideStops.tsx
@@ -30,12 +30,16 @@ const VideoPlayerWrapper = styled.figure`
 type VideoPlayerProps = {
   title: string;
   videoUrl: string;
+  videoProvider: 'YouTube' | 'Vimeo';
+  videoThumbnail?: string;
   titleProps: { role: string; 'aria-level': number };
 };
 
 export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
   title,
   videoUrl,
+  videoProvider,
+  videoThumbnail,
   titleProps,
 }) => (
   <VideoPlayerWrapper>
@@ -44,7 +48,11 @@ export const VideoPlayer: FunctionComponent<VideoPlayerProps> = ({
         {title}
       </figcaption>
     </Space>
-    <VideoEmbed embedUrl={videoUrl} />
+    <VideoEmbed
+      embedUrl={videoUrl}
+      videoProvider={videoProvider}
+      videoThumbnail={videoThumbnail}
+    />
   </VideoPlayerWrapper>
 );
 
@@ -108,6 +116,8 @@ export const Stops: FunctionComponent<Props> = ({ stops, type }) => {
                     title={stopTitle}
                     titleProps={titleProps}
                     videoUrl={bsl.embedUrl}
+                    videoProvider={bsl.provider}
+                    videoThumbnail={bsl.thumbnail}
                   />
                 )}
               </Stop>
diff --git a/content/webapp/pages/guides/exhibitions/[id]/[type]/[stop]/index.tsx b/content/webapp/pages/guides/exhibitions/[id]/[type]/[stop]/index.tsx
index 253491fa40..39ba4bb587 100644
--- a/content/webapp/pages/guides/exhibitions/[id]/[type]/[stop]/index.tsx
+++ b/content/webapp/pages/guides/exhibitions/[id]/[type]/[stop]/index.tsx
@@ -356,7 +356,11 @@ const ExhibitionGuidePage: FunctionComponent<Props> = props => {
               {type === 'bsl' ? (
                 <>
                   {currentStop.video && (
-                    <VideoEmbed embedUrl={currentStop.video} />
+                    <VideoEmbed
+                      embedUrl={currentStop.video}
+                      videoThumbnail={currentStop.videoThumbnail}
+                      videoProvider={currentStop.videoProvider}
+                    />
                   )}
                 </>
               ) : (
diff --git a/content/webapp/services/prismic/transformers/body.ts b/content/webapp/services/prismic/transformers/body.ts
index 39a7229540..2f3866f0de 100644
--- a/content/webapp/services/prismic/transformers/body.ts
+++ b/content/webapp/services/prismic/transformers/body.ts
@@ -337,6 +337,9 @@ export function transformEmbedSlice(
       type: 'videoEmbed',
       value: {
         embedUrl: getVimeoEmbedUrl(embed),
+        videoProvider: 'Vimeo',
+        // TODO
+        // videoThumbnail
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },
@@ -359,6 +362,7 @@ export function transformEmbedSlice(
       type: 'videoEmbed',
       value: {
         embedUrl: getYouTubeEmbedUrl(embed),
+        videoProvider: 'YouTube',
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },
diff --git a/content/webapp/services/prismic/transformers/exhibition-guides.ts b/content/webapp/services/prismic/transformers/exhibition-guides.ts
index 2ccd755ee7..af16f844ed 100644
--- a/content/webapp/services/prismic/transformers/exhibition-guides.ts
+++ b/content/webapp/services/prismic/transformers/exhibition-guides.ts
@@ -19,7 +19,7 @@ import {
 } from '@weco/content/types/exhibition-guides';
 
 import { asRichText, asTitle } from '.';
-import { getYouTubeEmbedUrl } from './embeds';
+import { getVimeoEmbedUrl, getYouTubeEmbedUrl } from './embeds';
 import { transformImagePromo } from './images';
 
 export function transformExhibitionGuideToExhibitionGuideBasic(
@@ -99,8 +99,18 @@ export function transformExhibitionGuide(
             : undefined,
         bsl:
           component['bsl-video'].provider_name === 'YouTube'
-            ? { embedUrl: getYouTubeEmbedUrl(component['bsl-video']) }
-            : undefined,
+            ? {
+                embedUrl: getYouTubeEmbedUrl(component['bsl-video']),
+                provider: 'YouTube' as const,
+              }
+            : component['bsl-video'].provider_name === 'Vimeo'
+              ? {
+                  embedUrl: getVimeoEmbedUrl(component['bsl-video']),
+                  provider: 'Vimeo' as const,
+                  thumbnail: component['bsl-video']
+                    .thumbnail_url_with_play_button as string,
+                }
+              : undefined,
       };
     }
   );
diff --git a/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts b/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
index 8d92b0dbd4..4a97a8af5e 100644
--- a/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
+++ b/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
@@ -10,7 +10,10 @@ import {
   isFilledLinkToMediaField,
   PaginatedResults,
 } from '@weco/common/services/prismic/types';
-import { getYouTubeEmbedUrl } from '@weco/content/services/prismic/transformers/embeds';
+import {
+  getVimeoEmbedUrl,
+  getYouTubeEmbedUrl,
+} from '@weco/content/services/prismic/transformers/embeds';
 import { transformRelatedExhibition } from '@weco/content/services/prismic/transformers/exhibition-guides';
 import { transformQuery } from '@weco/content/services/prismic/transformers/paginated-results';
 import { PromoSliceZone } from '@weco/content/services/prismic/types';
@@ -80,6 +83,15 @@ export function transformGuideStopSlice(
   slice: RawGuideStopSlice
 ): GuideHighlightTour {
   const title = asTitle(slice.primary.title);
+
+  const videoProvider = slice.primary?.bsl_video?.provider_name || undefined;
+
+  // We get the YouTube video through their API, so we don't need it here.
+  const videoThumbnail =
+    videoProvider === 'Vimeo'
+      ? (slice.primary.bsl_video?.thumbnail_url_with_play_button as string)
+      : undefined;
+
   return {
     number: slice.primary.number || undefined,
     title,
@@ -91,9 +103,13 @@ export function transformGuideStopSlice(
       : undefined,
     audioDuration: slice.primary.audio_duration || undefined,
     video:
-      slice.primary.bsl_video.provider_name === 'YouTube'
+      videoProvider === 'YouTube'
         ? getYouTubeEmbedUrl(slice.primary.bsl_video)
-        : undefined,
+        : videoProvider === 'Vimeo'
+          ? getVimeoEmbedUrl(slice.primary.bsl_video)
+          : undefined,
+    videoProvider,
+    videoThumbnail,
     subtitles: slice.primary.subtitles
       ? asRichText(slice.primary.subtitles)
       : undefined,
diff --git a/content/webapp/types/exhibition-guides.ts b/content/webapp/types/exhibition-guides.ts
index b58f799163..2631a1065c 100644
--- a/content/webapp/types/exhibition-guides.ts
+++ b/content/webapp/types/exhibition-guides.ts
@@ -24,8 +24,10 @@ export type GuideHighlightTour = {
   transcript?: prismic.RichTextField;
   audioDuration?: string;
   video?: string;
-  subtitles?: prismic.RichTextField;
+  videoProvider?: string;
+  videoThumbnail?: string;
   videoDuration?: string;
+  subtitles?: prismic.RichTextField;
   image?: ImageType;
 };
 
@@ -38,6 +40,8 @@ export type ExhibitionGuideComponent = {
   audioWithoutDescription?: { url: string };
   bsl?: {
     embedUrl: string;
+    provider: 'YouTube' | 'Vimeo';
+    thumbnail?: string;
   };
 };
 

From 0aebd07f5b0ab5f6845985eee7f6ed40d7734a35 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 19 Nov 2024 09:10:02 +0000
Subject: [PATCH 2/4] Narrow video provider type

---
 .../views/components/VideoEmbed/VideoEmbed.tsx   |  3 ++-
 .../webapp/services/prismic/transformers/body.ts | 16 ++++++++--------
 .../transformers/exhibition-highlight-tours.ts   |  7 ++++++-
 content/webapp/types/exhibition-guides.ts        |  6 ++++--
 4 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/common/views/components/VideoEmbed/VideoEmbed.tsx b/common/views/components/VideoEmbed/VideoEmbed.tsx
index 3242e9db4f..816c686148 100644
--- a/common/views/components/VideoEmbed/VideoEmbed.tsx
+++ b/common/views/components/VideoEmbed/VideoEmbed.tsx
@@ -7,10 +7,11 @@ import Caption from '@weco/common/views/components/Caption/Caption';
 import CollapsibleContent from '@weco/common/views/components/CollapsibleContent';
 import { IframeContainer } from '@weco/common/views/components/Iframe/Iframe';
 import PrismicHtmlBlock from '@weco/common/views/components/PrismicHtmlBlock/PrismicHtmlBlock';
+import { VideoProvider } from '@weco/content/types/exhibition-guides';
 
 export type Props = {
   embedUrl: string;
-  videoProvider?: string;
+  videoProvider?: VideoProvider;
   videoThumbnail?: string;
   caption?: prismic.RichTextField;
   transcript?: prismic.RichTextField;
diff --git a/content/webapp/services/prismic/transformers/body.ts b/content/webapp/services/prismic/transformers/body.ts
index 2f3866f0de..5d9be048a1 100644
--- a/content/webapp/services/prismic/transformers/body.ts
+++ b/content/webapp/services/prismic/transformers/body.ts
@@ -338,7 +338,7 @@ export function transformEmbedSlice(
       value: {
         embedUrl: getVimeoEmbedUrl(embed),
         videoProvider: 'Vimeo',
-        // TODO
+        // TODO? Do we want to support it on legacy guides?
         // videoThumbnail
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
@@ -346,23 +346,23 @@ export function transformEmbedSlice(
     };
   }
 
-  if (embed.provider_name === 'SoundCloud') {
+  if (embed.provider_name === 'YouTube') {
     return {
-      type: 'soundcloudEmbed',
+      type: 'videoEmbed',
       value: {
-        embedUrl: getSoundCloudEmbedUrl(embed),
+        embedUrl: getYouTubeEmbedUrl(embed),
+        videoProvider: 'YouTube',
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },
     };
   }
 
-  if (embed.provider_name === 'YouTube') {
+  if (embed.provider_name === 'SoundCloud') {
     return {
-      type: 'videoEmbed',
+      type: 'soundcloudEmbed',
       value: {
-        embedUrl: getYouTubeEmbedUrl(embed),
-        videoProvider: 'YouTube',
+        embedUrl: getSoundCloudEmbedUrl(embed),
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },
diff --git a/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts b/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
index 4a97a8af5e..509a8f22c8 100644
--- a/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
+++ b/content/webapp/services/prismic/transformers/exhibition-highlight-tours.ts
@@ -84,7 +84,12 @@ export function transformGuideStopSlice(
 ): GuideHighlightTour {
   const title = asTitle(slice.primary.title);
 
-  const videoProvider = slice.primary?.bsl_video?.provider_name || undefined;
+  // We only support YT and Vimeo at the moment
+  const videoProvider =
+    slice.primary?.bsl_video?.provider_name === 'YouTube' ||
+    slice.primary?.bsl_video?.provider_name === 'Vimeo'
+      ? slice.primary?.bsl_video?.provider_name
+      : undefined;
 
   // We get the YouTube video through their API, so we don't need it here.
   const videoThumbnail =
diff --git a/content/webapp/types/exhibition-guides.ts b/content/webapp/types/exhibition-guides.ts
index 2631a1065c..374c4e5427 100644
--- a/content/webapp/types/exhibition-guides.ts
+++ b/content/webapp/types/exhibition-guides.ts
@@ -17,6 +17,8 @@ type CaptionsOrTranscripts = {
   context?: prismic.RichTextField;
 };
 
+export type VideoProvider = 'YouTube' | 'Vimeo';
+
 export type GuideHighlightTour = {
   number?: number;
   title: string;
@@ -24,7 +26,7 @@ export type GuideHighlightTour = {
   transcript?: prismic.RichTextField;
   audioDuration?: string;
   video?: string;
-  videoProvider?: string;
+  videoProvider?: VideoProvider;
   videoThumbnail?: string;
   videoDuration?: string;
   subtitles?: prismic.RichTextField;
@@ -40,7 +42,7 @@ export type ExhibitionGuideComponent = {
   audioWithoutDescription?: { url: string };
   bsl?: {
     embedUrl: string;
-    provider: 'YouTube' | 'Vimeo';
+    provider: VideoProvider;
     thumbnail?: string;
   };
 };

From 32a62e0286ba8b0a511815b9a982e923b0d08651 Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 19 Nov 2024 09:18:17 +0000
Subject: [PATCH 3/4] Move type to common folder

---
 common/views/components/VideoEmbed/VideoEmbed.tsx | 3 ++-
 content/webapp/types/exhibition-guides.ts         | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/common/views/components/VideoEmbed/VideoEmbed.tsx b/common/views/components/VideoEmbed/VideoEmbed.tsx
index 816c686148..bddbfccf0d 100644
--- a/common/views/components/VideoEmbed/VideoEmbed.tsx
+++ b/common/views/components/VideoEmbed/VideoEmbed.tsx
@@ -7,7 +7,8 @@ import Caption from '@weco/common/views/components/Caption/Caption';
 import CollapsibleContent from '@weco/common/views/components/CollapsibleContent';
 import { IframeContainer } from '@weco/common/views/components/Iframe/Iframe';
 import PrismicHtmlBlock from '@weco/common/views/components/PrismicHtmlBlock/PrismicHtmlBlock';
-import { VideoProvider } from '@weco/content/types/exhibition-guides';
+
+export type VideoProvider = 'YouTube' | 'Vimeo';
 
 export type Props = {
   embedUrl: string;
diff --git a/content/webapp/types/exhibition-guides.ts b/content/webapp/types/exhibition-guides.ts
index 374c4e5427..b9d95c9551 100644
--- a/content/webapp/types/exhibition-guides.ts
+++ b/content/webapp/types/exhibition-guides.ts
@@ -5,6 +5,7 @@ import {
   ExhibitionHighlightToursDocumentData as RawExhibitionHighlightToursDocumentData,
   ExhibitionTextsDocumentData as RawExhibitionTextsDocumentData,
 } from '@weco/common/prismicio-types';
+import { VideoProvider } from '@weco/common/views/components/VideoEmbed/VideoEmbed';
 
 import { ImagePromo } from './image-promo';
 
@@ -17,8 +18,6 @@ type CaptionsOrTranscripts = {
   context?: prismic.RichTextField;
 };
 
-export type VideoProvider = 'YouTube' | 'Vimeo';
-
 export type GuideHighlightTour = {
   number?: number;
   title: string;

From bfce97e3e26572f0c1adb19f93589832c58a6b9e Mon Sep 17 00:00:00 2001
From: Raphaelle Cantin <r.cantin@wellcome.ac.uk>
Date: Tue, 19 Nov 2024 12:20:16 +0000
Subject: [PATCH 4/4] Remove TODO and add thumbnail to Embed slice

---
 common/views/components/VideoEmbed/VideoEmbed.tsx    | 4 ----
 content/webapp/services/prismic/transformers/body.ts | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/common/views/components/VideoEmbed/VideoEmbed.tsx b/common/views/components/VideoEmbed/VideoEmbed.tsx
index bddbfccf0d..f64f55a2e2 100644
--- a/common/views/components/VideoEmbed/VideoEmbed.tsx
+++ b/common/views/components/VideoEmbed/VideoEmbed.tsx
@@ -71,10 +71,6 @@ const VideoEmbed: FunctionComponent<Props> = ({
   const isVimeo = videoProvider === 'Vimeo';
 
   useEffect(() => {
-    // TODO do we need analytics consent for vimeo?
-    // Do we need this?
-    /* <script src="https://player.vimeo.com/api/player.js"></script> */
-
     if (isYouTube && hasAnalyticsConsent) {
       // GA4 automatically tracks YouTube engagement, but requires the iframe api
       // script to have been loaded on the page. Since we're lazyloading youtube
diff --git a/content/webapp/services/prismic/transformers/body.ts b/content/webapp/services/prismic/transformers/body.ts
index 5d9be048a1..f4dbd4f98a 100644
--- a/content/webapp/services/prismic/transformers/body.ts
+++ b/content/webapp/services/prismic/transformers/body.ts
@@ -338,8 +338,8 @@ export function transformEmbedSlice(
       value: {
         embedUrl: getVimeoEmbedUrl(embed),
         videoProvider: 'Vimeo',
-        // TODO? Do we want to support it on legacy guides?
-        // videoThumbnail
+        videoThumbnail:
+          (embed.thumbnail_url_with_play_button as string) || undefined,
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },