facade for yt videos

hlxsites · Oct 26, 2023 · 45cb9c8 · 45cb9c8
1 parent 86d524d
commit 45cb9c8
Show file tree

Hide file tree

Showing 6 changed files with 466 additions and 149 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -3,4 +3,5 @@ scripts/jquery-1.11.2.min.js
 scripts/jquery.colorbox-min.js
 scripts/swiper-342.jquery.min.js
 scripts/main-scripts.js
-scripts/gcse.js
+scripts/gcse.js
+blocks/embed/lite-yt-embed/lite-yt-embed.js
diff --git a/blocks/embed/embed.css b/blocks/embed/embed.css
@@ -1,65 +1,49 @@
-main .embed {
-    width: unset;
-    text-align: center;
-    max-width: 800px;
-    margin: 32px auto;
-  }
-
-  main .embed > div {
-    display: flex;
-    justify-content: center;
-  }
-
-  main .embed.embed-twitter .twitter-tweet-rendered {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
-  main .embed .embed-placeholder {
-    width: 100%;
-    aspect-ratio: 16 / 9;
-    position: relative;
-  }
-
-  main .embed .embed-placeholder > * {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  main .embed .embed-placeholder picture img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  main .embed .embed-placeholder-play button {
-    box-sizing: border-box;
-    position: relative;
-    display: block;
-    transform: scale(3);
-    width: 22px;
-    height: 22px;
-    border: 2px solid;
-    border-radius: 20px;
-    padding: 0;
-  }
-
-  main .embed .embed-placeholder-play button::before {
-    content: "";
-    display: block;
-    box-sizing: border-box;
-    position: absolute;
-    width: 0;
-    height: 10px;
-    border-top: 5px solid transparent;
-    border-bottom: 5px solid transparent;
-    border-left: 6px solid;
-    top: 4px;
-    left: 7px;
-  }
+/*
+* Copyright 2021 Adobe. All rights reserved.
+* This file is licensed to you under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License. You may obtain a copy
+* of the License at http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software distributed under
+* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+* OF ANY KIND, either express or implied. See the License for the specific language
+* governing permissions and limitations under the License.
+*/
+.embed {
+  display: flex;
+  margin: 0 auto 2rem;
+  padding: 0;
+  flex-direction: column;
+  align-items: stretch;
+  max-width: 100%;
+}
+
+.embed > div,
+.embed blockquote,
+.embed iframe {
+  flex: 1;
+}
+
+.embed iframe {
+  border: 1px solid var(--color-gray-light-alt);
+  border-radius: .5rem;
+}
+
+.embed img {
+  max-width: 100%;
+}
+
+.embed.tiktok lite-tiktok {
+  margin: 0 auto;
+  width: 518px;
+  height: 738px;
+}
+
+.embed.instagram {
+  width: 325px;
+  min-height: 739px;
+}
+
+.embed.instagram > div {
+  display: flex;
+}
diff --git a/blocks/embed/embed.js b/blocks/embed/embed.js
@@ -1,113 +1,172 @@
-/*
- * Embed Block
- * Show videos and social posts directly on your page
- * https://www.hlx.live/developer/block-collection/embed
- */
+import { loadCSS, loadScript } from '../../scripts/aem.js';
 
-const loadScript = (url, callback, type) => {
-  const head = document.querySelector('head');
-  const script = document.createElement('script');
-  script.src = url;
-  if (type) {
-    script.setAttribute('type', type);
-  }
-  script.onload = callback;
-  head.append(script);
-  return script;
-};
+const FALLBACK_PUBLICATION_DATE = '2013-07-18'; // go-live date for the Franklin site, but could be any value
 
-const getDefaultEmbed = (url) => `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
-      <iframe src="${url.href}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen=""
-        scrolling="no" allow="encrypted-media" title="Content from ${url.hostname}" loading="lazy">
-      </iframe>
-    </div>`;
+const getDefaultEmbed = (url) => `<iframe src="${url.href}" allowfullscreen allow="encrypted-media" title="Content from ${url.hostname}" loading="lazy"></iframe>`;
+
+const embedYoutubeFacade = async (url) => {
+  loadCSS('/blocks/embed/lite-yt-embed/lite-yt-embed.css');
+  loadScript('/blocks/embed/lite-yt-embed/lite-yt-embed.js');
 
-const embedYoutube = (url, autoplay) => {
   const usp = new URLSearchParams(url.search);
-  const suffix = autoplay ? '&muted=1&autoplay=1' : '';
-  let vid = encodeURIComponent(usp.get('v'));
-  const embed = url.pathname;
+  let videoId = usp.get('v');
   if (url.origin.includes('youtu.be')) {
-    [, vid] = url.pathname.split('/');
+    videoId = url.pathname.substring(1);
+  } else {
+    videoId = url.pathname.split('/').pop();
   }
-  const embedHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
-        <iframe src="https://www.youtube.com${vid ? `/embed/${vid}?rel=0&v=${vid}${suffix}` : embed}" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
-        allow="autoplay; fullscreen; picture-in-picture; encrypted-media; accelerometer; gyroscope; picture-in-picture" allowfullscreen="" scrolling="no" title="Content from Youtube" loading="lazy"></iframe>
-      </div>`;
-  return embedHTML;
+  const wrapper = document.createElement('div');
+  wrapper.setAttribute('itemscope', '');
+  wrapper.setAttribute('itemtype', 'https://schema.org/VideoObject');
+  const litePlayer = document.createElement('lite-youtube');
+  litePlayer.setAttribute('videoid', videoId);
+  wrapper.append(litePlayer);
+
+  try {
+    const response = await fetch(`https://www.youtube.com/oembed?url=http://www.youtube.com/watch?v=${videoId}`);
+    const json = await response.json();
+    wrapper.innerHTML = `
+      <meta itemprop="name" content="${json.title}"/>
+      <meta itemprop="uploadDate" content="${document.head.querySelector('[name="publication-date"]')?.content || FALLBACK_PUBLICATION_DATE}"/>
+      <link itemprop="embedUrl" href="https://www.youtube.com/embed/${videoId}"/>
+      <link itemprop="thumbnailUrl" href="${json.thumbnail_url}"/>
+      
+      ${wrapper.innerHTML}
+    `;
+  } catch (err) {
+    // Nothing to do, metadata just won't be added to the video
+  }
+  return wrapper.outerHTML;
 };
 
-const embedVimeo = (url, autoplay) => {
-  const [, video] = url.pathname.split('/');
-  const suffix = autoplay ? '?muted=1&autoplay=1' : '';
-  const embedHTML = `<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;">
-        <iframe src="https://player.vimeo.com/video/${video}${suffix}" 
-        style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" 
-        frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen  
-        title="Content from Vimeo" loading="lazy"></iframe>
-      </div>`;
+const embedInstagram = (url) => {
+  const endingSlash = url.pathname.endsWith('/') ? '' : '/';
+  const location = window.location.href.endsWith('.html') ? window.location.href : `${window.location.href}.html`;
+  const src = `${url.origin}${url.pathname}${endingSlash}embed/captioned/?rd=${window.encodeURIComponent(location)}`;
+  const embedHTML = `
+    <div itemscope itemtype="https://schema.org/SocialMediaPosting">
+      <link itemprop="url" href="${url.origin}${url.pathname}${endingSlash}embed/captioned/"/>
+      <iframe src="${src}" allowfullscreen allowtransparency scrolling="no" frameborder="0" loading="lazy"></iframe>
+    </div>
+  `;
   return embedHTML;
 };
 
 const embedTwitter = (url) => {
-  const embedHTML = `<blockquote class="twitter-tweet"><a href="${url.href}"></a></blockquote>`;
   loadScript('https://platform.twitter.com/widgets.js');
+  const embedHTML = `
+    <blockquote itemscope itemtype="https://schema.org/SocialMediaPosting">
+      <a itemprop="url" href="${url}"></a>
+    </blockquote>
+  `;
   return embedHTML;
 };
 
-const loadEmbed = (block, link, autoplay) => {
-  if (block.classList.contains('embed-is-loaded')) {
-    return;
+const embedTiktokFacade = async (url) => {
+  loadScript('/blocks/embed/lite-tiktok/lite-tiktok.js', () => {}, { async: true, type: 'module' });
+  const videoId = url.pathname.split('/').pop();
+  try {
+    const request = await fetch(`https://www.tiktok.com/oembed?url=https://www.tiktok.com/video/${videoId}`);
+    const json = await request.json();
+    return `
+      <div itemscope itemtype="https://schema.org/VideoObject">
+        <meta itemprop="name" content="${json.title}"/>
+        <meta itemprop="uploadDate" content="${document.head.querySelector('[name="publication-date"]')?.content || FALLBACK_PUBLICATION_DATE}"/>
+        <link itemprop="thumbnailUrl" href="${json.thumbnail_url}"/>
+        <link itemprop="embedUrl" href="https://www.tiktok.com/video/${videoId}"/>
+        <lite-tiktok videoid="${videoId}"></lite-tiktok>
+      </div>
+    `;
+  } catch (err) {
+    return `
+      <div itemscope itemtype="https://schema.org/VideoObject">
+        <link itemprop="embedUrl" href="https://www.tiktok.com/video/${videoId}"/>
+        <lite-tiktok videoid="${videoId}"></lite-tiktok>
+      </div>
+    `;
   }
+};
 
-  const EMBEDS_CONFIG = [
-    {
-      match: ['youtube', 'youtu.be'],
-      embed: embedYoutube,
-    },
-    {
-      match: ['vimeo'],
-      embed: embedVimeo,
-    },
-    {
-      match: ['twitter'],
-      embed: embedTwitter,
-    },
-  ];
-
-  const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match)));
-  const url = new URL(link);
-  if (config) {
-    block.innerHTML = config.embed(url, autoplay);
-    block.classList = `block embed embed-${config.match[0]}`;
-  } else {
+const EMBEDS_CONFIG = {
+  instagram: embedInstagram,
+  tiktok: embedTiktokFacade,
+  twitter: embedTwitter,
+  youtube: embedYoutubeFacade,
+};
+
+function getPlatform(url) {
+  const [service] = url.hostname.split('.').slice(-2, -1);
+  if (service === 'youtu') {
+    return 'youtube';
+  }
+  return service;
+}
+
+const loadEmbed = async (block, service, url) => {
+  block.classList.toggle('skeleton', true);
+
+  const embed = EMBEDS_CONFIG[service];
+  if (!embed) {
+    block.classList.toggle('generic', true);
     block.innerHTML = getDefaultEmbed(url);
-    block.classList = 'block embed';
+    return;
+  }
+
+  try {
+    block.classList.toggle(service, true);
+    try {
+      block.innerHTML = await embed(url);
+    } catch (err) {
+      block.style.display = 'none';
+    } finally {
+      block.classList.toggle('skeleton', false);
+    }
+  } catch (err) {
+    block.style.maxHeight = '0px';
   }
-  block.classList.add('embed-is-loaded');
 };
 
+// Listen for messages from instagram embeds to update the embed height.
+window.addEventListener('message', (ev) => {
+  const iframe = [...document.querySelectorAll('iframe')].find((i) => i.contentWindow === ev.source);
+  if (!iframe) {
+    return;
+  }
+  let data;
+  try {
+    data = typeof ev.data === 'string' ? JSON.parse(ev.data) : ev.data;
+  } catch (e) {
+    // Nothing to do, the message isn't the one we are looking for
+    return;
+  }
+
+  if (data.type !== 'MEASURE') {
+    return;
+  }
+
+  iframe.closest('.block').style.height = `${data.details.height}px`;
+});
+
+/**
+ * @param {HTMLDivElement} block
+ */
 export default function decorate(block) {
-  const placeholder = block.querySelector('picture');
-  const link = block.querySelector('a').href;
-  block.textContent = '';
+  const url = new URL(block.querySelector('a').href.replace(/%5C%5C_/, '_'));
 
-  if (placeholder) {
-    const wrapper = document.createElement('div');
-    wrapper.className = 'embed-placeholder';
-    wrapper.innerHTML = '<div class="embed-placeholder-play"><button title="Play"></button></div>';
-    wrapper.prepend(placeholder);
-    wrapper.addEventListener('click', () => {
-      loadEmbed(block, link, true);
-    });
-    block.append(wrapper);
-  } else {
+  block.textContent = '';
+  const service = getPlatform(url);
+  // Both Youtube and TikTok use an optimized lib that already leverages the intersection observer
+  if (service !== 'tiktok' && service !== 'youtube') {
     const observer = new IntersectionObserver((entries) => {
-      if (entries.some((e) => e.isIntersecting)) {
-        observer.disconnect();
-        loadEmbed(block, link);
+      if (!entries.some((e) => e.isIntersecting)) {
+        return;
       }
+
+      loadEmbed(block, service, url);
+      observer.unobserve(block);
     });
     observer.observe(block);
+  } else {
+    loadEmbed(block, service, url);
   }
 }