Allow for Vimeo vids in VideoPlayer

wellcomecollection · Nov 18, 2024 · 0d7a2bb · 0d7a2bb
1 parent 0d3e125
commit 0d7a2bb
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 19 deletions.
diff --git 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,16 +56,23 @@ const VideoTrigger = styled.button<{ $hasFullSizePoster?: boolean }>`
 
 const VideoEmbed: FunctionComponent<Props> = ({
   embedUrl,
+  videoProvider,
+  videoThumbnail,
   caption,
   transcript,
   hasFullSizePoster,
 }: 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
   };
 };