Allow for Vimeo vids in VideoEmbed

common/views/components/VideoEmbed/VideoEmbed.tsx

@@ -8,8 +8,12 @@ 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';
 
+export type VideoProvider = 'YouTube' | 'Vimeo';
+
 export type Props = {
   embedUrl: string;
+  videoProvider?: VideoProvider;
+  videoThumbnail?: string;
   caption?: prismic.RichTextField;
   transcript?: prismic.RichTextField;
   hasFullSizePoster?: boolean;
@@ -54,14 +58,17 @@ 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(() => {
     if (isYouTube && hasAnalyticsConsent) {
@@ -86,17 +93,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 +126,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>

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>

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}
+                    />
                   )}
                 </>
               ) : (

content/webapp/services/prismic/transformers/body.ts

@@ -337,28 +337,32 @@ export function transformEmbedSlice(
       type: 'videoEmbed',
       value: {
         embedUrl: getVimeoEmbedUrl(embed),
+        videoProvider: 'Vimeo',
+        videoThumbnail:
+          (embed.thumbnail_url_with_play_button as string) || undefined,
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },
     };
   }
 
-  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),
+        embedUrl: getSoundCloudEmbedUrl(embed),
         caption: slice.primary.caption,
         transcript: slice.primary.transcript,
       },

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,
       };
     }
   );

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,20 @@ export function transformGuideStopSlice(
   slice: RawGuideStopSlice
 ): GuideHighlightTour {
   const title = asTitle(slice.primary.title);
+
+  // 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 =
+    videoProvider === 'Vimeo'
+      ? (slice.primary.bsl_video?.thumbnail_url_with_play_button as string)
+      : undefined;
+
   return {
     number: slice.primary.number || undefined,
     title,
@@ -91,9 +108,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,

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';
 
@@ -24,8 +25,10 @@ export type GuideHighlightTour = {
   transcript?: prismic.RichTextField;
   audioDuration?: string;
   video?: string;
-  subtitles?: prismic.RichTextField;
+  videoProvider?: VideoProvider;
+  videoThumbnail?: string;
   videoDuration?: string;
+  subtitles?: prismic.RichTextField;
   image?: ImageType;
 };
 
@@ -38,6 +41,8 @@ export type ExhibitionGuideComponent = {
   audioWithoutDescription?: { url: string };
   bsl?: {
     embedUrl: string;
+    provider: VideoProvider;
+    thumbnail?: string;
   };
 };