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] 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;
   };
 };