WPD-207: Replace URLs for vimeo and youtube pages with the related em…

src/util/test/video.spec.ts

@@ -0,0 +1,33 @@
+import { VideoService } from '../video';
+
+describe('VideoService', () => {
+  describe('getEmbedHtml', () => {
+    it.each([
+      ['https://www.youtube.com/watch?v=dQw4w9WgXcQ', null, '<iframe loading="lazy" src="https://youtube.com/embed/dQw4w9WgXcQ"></iframe>'],
+      [
+        'https://vimeo.com/123456789',
+        null,
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      ['https://youtube.com/some/other/path', null, `<iframe loading="lazy" src="https://youtube.com/some/other/path"></iframe>`],
+      [
+        'https://player.vimeo.com/video/123456789',
+        'My Video',
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;" title="My Video"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      [
+        'https://player.vimeo.com/video/123456789',
+        null,
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      [
+        'https://player.vimeo.com/video/123456789',
+        '',
+        `<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/123456789?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479&amp;dnt=1" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" style="position:absolute;top:0;left:0;width:100%;height:100%;"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>`,
+      ],
+      ['https://example.com/video.mp4', null, `<video controls src="https://example.com/video.mp4"></video>`],
+    ] as const)('Returns appropriate HTML embed snippet for Video URL', (url: string, title: string | null, expectedSnippet: string) => {
+      expect(VideoService.getEmbedHtml(url, title)).toBe(expectedSnippet);
+    });
+  });
+});

src/util/video.ts

@@ -1,5 +1,7 @@
 export class VideoService {
   static getEmbedHtml(url: string, title: string | null) {
+    url = this.replacePageURLwithEmbedURL(url);
+
     if (url.match(/youtube\.com/g)) {
       return `<iframe loading="lazy" src="${url}"></iframe>`;
     } else if (url.match(/player\.vimeo\.com/g)) {
@@ -9,4 +11,20 @@ export class VideoService {
       return `<video controls src="${url}"></video>`;
     }
   }
+
+  /**
+   * If the user supplied a URL to view a page video in a page on youtube or vimeo,
+   * we replace it with the URL to the related embedabble iframe.
+   */
+  private static replacePageURLwithEmbedURL(url: string) {
+    let YoutubeMatch: RegExpMatchArray | null = null;
+    let VimeoMatch: RegExpMatchArray | null = null;
+
+    if ((YoutubeMatch = url.match(/youtube.com\/watch\?v=([a-zA-Z0-9]+)/))) {
+      url = `https://youtube\.com/embed/${YoutubeMatch[1]}`;
+    } else if ((VimeoMatch = url.match(/vimeo.com\/([0-9]+)/))) {
+      url = `https://player\.vimeo\.com/video/${VimeoMatch[1]}`;
+    }
+    return url;
+  }
 }