From dcf4abaf122f408c3dd71a480dad2e8c69343193 Mon Sep 17 00:00:00 2001
From: Demis Bellot <demis.bellot@gmail.com>
Date: Sun, 24 Nov 2024 18:49:00 +0800
Subject: [PATCH] Add youtube video

---
 AiServer/wwwroot/css/app.css               |  83 +++++++++++++-
 AiServer/wwwroot/css/lite-yt-embed.css     |  93 +++++++++++++++
 AiServer/wwwroot/index.html                |   2 +
 AiServer/wwwroot/lib/js/lite-yt-embed.js   | 125 +++++++++++++++++++++
 AiServer/wwwroot/mjs/components/UiHome.mjs |   4 +
 5 files changed, 303 insertions(+), 4 deletions(-)
 create mode 100644 AiServer/wwwroot/css/lite-yt-embed.css
 create mode 100644 AiServer/wwwroot/lib/js/lite-yt-embed.js

diff --git a/AiServer/wwwroot/css/app.css b/AiServer/wwwroot/css/app.css
index fb32da8..96de231 100644
--- a/AiServer/wwwroot/css/app.css
+++ b/AiServer/wwwroot/css/app.css
@@ -1317,6 +1317,10 @@ select{
   margin-top: auto;
 }
 
+.mt-24 {
+  margin-top: 6rem;
+}
+
 .block {
   display: block;
 }
@@ -1361,6 +1365,10 @@ select{
   display: none;
 }
 
+.aspect-video {
+  aspect-ratio: 16 / 9;
+}
+
 .h-10 {
   height: 2.5rem;
 }
@@ -1601,6 +1609,14 @@ select{
   max-width: 20rem;
 }
 
+.max-w-6xl {
+  max-width: 72rem;
+}
+
+.max-w-5xl {
+  max-width: 64rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
@@ -2327,6 +2343,11 @@ select{
   background-color: rgb(238 242 255 / var(--tw-bg-opacity, 1));
 }
 
+.bg-indigo-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
+}
+
 .bg-indigo-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(79 70 229 / var(--tw-bg-opacity, 1));
@@ -2543,6 +2564,11 @@ select{
   padding-right: 0.75rem;
 }
 
+.px-3\.5 {
+  padding-left: 0.875rem;
+  padding-right: 0.875rem;
+}
+
 .px-4 {
   padding-left: 1rem;
   padding-right: 1rem;
@@ -2634,6 +2660,10 @@ select{
   padding-bottom: 2.5rem;
 }
 
+.pb-16 {
+  padding-bottom: 4rem;
+}
+
 .pb-2 {
   padding-bottom: 0.5rem;
 }
@@ -2742,6 +2772,10 @@ select{
   padding-top: 0.375rem;
 }
 
+.pt-16 {
+  padding-top: 4rem;
+}
+
 .pt-2 {
   padding-top: 0.5rem;
 }
@@ -2766,10 +2800,6 @@ select{
   padding-top: 1.5rem;
 }
 
-.pt-12 {
-  padding-top: 3rem;
-}
-
 .text-left {
   text-align: left;
 }
@@ -3607,6 +3637,11 @@ select{
   background-color: rgb(199 210 254 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-indigo-400:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(129 140 248 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:bg-indigo-500:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
@@ -3913,6 +3948,10 @@ select{
   outline-color: #000;
 }
 
+.focus-visible\:outline-indigo-400:focus-visible {
+  outline-color: #818cf8;
+}
+
 .focus-visible\:outline-indigo-600:focus-visible {
   outline-color: #4f46e5;
 }
@@ -4650,6 +4689,10 @@ select{
     margin-top: 5rem;
   }
 
+  .sm\:mt-5 {
+    margin-top: 1.25rem;
+  }
+
   .sm\:block {
     display: block;
   }
@@ -4852,6 +4895,11 @@ select{
     line-height: 1.25rem;
   }
 
+  .sm\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+
   .sm\:duration-700 {
     transition-duration: 700ms;
   }
@@ -5045,6 +5093,10 @@ select{
     margin-top: 6rem;
   }
 
+  .lg\:mt-6 {
+    margin-top: 1.5rem;
+  }
+
   .lg\:block {
     display: block;
   }
@@ -5089,6 +5141,10 @@ select{
     max-width: 768px;
   }
 
+  .lg\:max-w-xl {
+    max-width: 36rem;
+  }
+
   .lg\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
@@ -5148,9 +5204,18 @@ select{
     padding-top: 1rem;
   }
 
+  .lg\:pt-8 {
+    padding-top: 2rem;
+  }
+
   .lg\:text-center {
     text-align: center;
   }
+
+  .lg\:text-lg {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1280px) {
@@ -5192,6 +5257,16 @@ select{
     padding-left: 1.25rem;
     padding-right: 1.25rem;
   }
+
+  .xl\:text-6xl {
+    font-size: 3.75rem;
+    line-height: 1;
+  }
+
+  .xl\:text-xl {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
 }
 
 @media (min-width: 1536px) {
diff --git a/AiServer/wwwroot/css/lite-yt-embed.css b/AiServer/wwwroot/css/lite-yt-embed.css
new file mode 100644
index 0000000..50bc3d1
--- /dev/null
+++ b/AiServer/wwwroot/css/lite-yt-embed.css
@@ -0,0 +1,93 @@
+lite-youtube {
+    background-color: #000;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+    position: relative;
+    display: block;
+    contain: content;
+    background-position: center center;
+    background-size: cover;
+    cursor: pointer;
+    max-width: 720px;
+}
+
+lite-youtube:hover {
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* gradient */
+lite-youtube::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: 0;
+    /*background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);*/
+    background-position: top;
+    background-repeat: repeat-x;
+    height: 60px;
+    padding-bottom: 50px;
+    width: 100%;
+    transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+
+/* responsive iframe with a 16:9 aspect ratio
+    thanks https://css-tricks.com/responsive-iframes/
+*/
+lite-youtube::after {
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (16 / 9));
+}
+lite-youtube > iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border: 0;
+}
+
+/* play button */
+lite-youtube > .lty-playbtn {
+    width: 60px;
+    height: 42px;
+    position: absolute;
+    cursor: pointer;
+    transform: translate3d(-50%, -50%, 0);
+    color: white;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    opacity: 30%;
+    background: transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"><path fill="%23f00" fill-opacity="0.8" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path d="M 45,24 27,14 27,34" fill="%23fff"></path></svg>') no-repeat;
+    filter: grayscale(100%);
+    border: none;
+}
+
+lite-youtube:hover > .lty-playbtn,
+lite-youtube .lty-playbtn:focus {
+    filter: grayscale(0);
+    transition: opacity 0.5s, filter .1s cubic-bezier(0, 0, 0.2, 1);
+    -webkit-transition: opacity 0.5s;
+    opacity: 100%;
+    outline: none;
+}
+
+/* Post-click styles */
+lite-youtube.lyt-activated {
+    cursor: unset;
+}
+lite-youtube.lyt-activated::before,
+lite-youtube.lyt-activated > .lty-playbtn {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.lyt-visually-hidden {
+    clip: rect(0 0 0 0);
+    clip-path: inset(50%);
+    height: 1px;
+    overflow: hidden;
+    position: absolute;
+    white-space: nowrap;
+    width: 1px;
+}
\ No newline at end of file
diff --git a/AiServer/wwwroot/index.html b/AiServer/wwwroot/index.html
index 7a03bd3..a406e8d 100644
--- a/AiServer/wwwroot/index.html
+++ b/AiServer/wwwroot/index.html
@@ -6,6 +6,7 @@
     <link rel="stylesheet" href="/css/app.css">
     <link rel="stylesheet" href="/css/typography.css">
     <link rel="stylesheet" href="/css/highlight.css">
+    <link rel="stylesheet" href="/css/lite-yt-embed.css">
     <link rel="stylesheet" href="/css/asciinema-player.css">
     <style>
         ::-webkit-scrollbar { width: 8px; height: 8px }
@@ -109,6 +110,7 @@
 </script>
 
 
+<script src="/lib/js/lite-yt-embed.js"></script>
 <script src="/lib/js/asciinema-player.js"></script>
 
 </body>
diff --git a/AiServer/wwwroot/lib/js/lite-yt-embed.js b/AiServer/wwwroot/lib/js/lite-yt-embed.js
new file mode 100644
index 0000000..ae02034
--- /dev/null
+++ b/AiServer/wwwroot/lib/js/lite-yt-embed.js
@@ -0,0 +1,125 @@
+/**
+ * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
+ *
+ * Thx to these as the inspiration
+ *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
+ *   https://autoplay-youtube-player.glitch.me/
+ *
+ * Once built it, I also found these:
+ *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
+ *   https://github.com/Daugilas/lazyYT
+ *   https://github.com/vb/lazyframe
+ */
+class LiteYTEmbed extends HTMLElement {
+    connectedCallback() {
+        this.videoId = this.getAttribute('videoid');
+        let playBtnEl = this.querySelector('.lty-playbtn');
+        // A label for the button takes priority over a [playlabel] attribute on the custom-element
+        this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
+
+        /**
+         * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
+         *
+         * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
+         *
+         * TODO: Do the sddefault->hqdefault fallback
+         *       - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940)
+         * TODO: Consider using webp if supported, falling back to jpg
+         */
+        if (!this.style.backgroundImage) {
+            this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
+            // Warm the connection for the poster image
+            LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image');
+
+            this.style.backgroundImage = `url("${this.posterUrl}")`;
+        }
+
+        // Set up play button, and its visually hidden label
+        if (!playBtnEl) {
+            playBtnEl = document.createElement('button');
+            playBtnEl.type = 'button';
+            playBtnEl.classList.add('lty-playbtn');
+            this.append(playBtnEl);
+        }
+        if (!playBtnEl.textContent) {
+            const playBtnLabelEl = document.createElement('span');
+            playBtnLabelEl.className = 'lyt-visually-hidden';
+            playBtnLabelEl.textContent = this.playLabel;
+            playBtnEl.append(playBtnLabelEl);
+        }
+
+        // On hover (or tap), warm up the TCP connections we're (likely) about to use.
+        this.removeEventListener('pointerover', LiteYTEmbed.warmConnections);
+        this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
+
+        // Once the user clicks, add the real iframe and drop our play button
+        // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
+        //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
+        this.removeEventListener('click', this.addIframe);
+        this.addEventListener('click', this.addIframe);
+    }
+
+    // // TODO: Support the the user changing the [videoid] attribute
+    // attributeChangedCallback() {
+    // }
+
+    /**
+     * Add a <link rel={preload | preconnect} ...> to the head
+     */
+    static addPrefetch(kind, url, as) {
+        const linkEl = document.createElement('link');
+        linkEl.rel = kind;
+        linkEl.href = url;
+        if (as) {
+            linkEl.as = as;
+        }
+        document.head.append(linkEl);
+    }
+
+    /**
+     * Begin pre-connecting to warm up the iframe load
+     * Since the embed's network requests load within its iframe,
+     *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
+     * So, the best we can do is warm up a few connections to origins that are in the critical path.
+     *
+     * Maybe `<link rel=preload as=document>` would work, but it's unsupported: http://crbug.com/593267
+     * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
+     */
+    static warmConnections() {
+        if (LiteYTEmbed.preconnected) return;
+
+        // The iframe document and most of its subresources come right off youtube.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
+        // The botguard script is fetched off from google.com
+        LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
+
+        // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
+        LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
+        LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
+
+        LiteYTEmbed.preconnected = true;
+    }
+
+    addIframe() {
+        const params = new URLSearchParams(this.getAttribute('params') || []);
+        params.append('autoplay', '1');
+        const iframeEl = document.createElement('iframe');
+        iframeEl.width = 560;
+        iframeEl.height = 315;
+        // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
+        iframeEl.title = this.playLabel;
+        iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
+        iframeEl.allowFullscreen = true;
+        // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
+        // https://stackoverflow.com/q/64959723/89484
+        iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`;
+        this.append(iframeEl);
+
+        this.classList.add('lyt-activated');
+
+        // Set focus for a11y
+        this.querySelector('iframe').focus();
+    }
+}
+// Register custom element
+customElements.define('lite-youtube', LiteYTEmbed);
\ No newline at end of file
diff --git a/AiServer/wwwroot/mjs/components/UiHome.mjs b/AiServer/wwwroot/mjs/components/UiHome.mjs
index e010aec..aa418e8 100644
--- a/AiServer/wwwroot/mjs/components/UiHome.mjs
+++ b/AiServer/wwwroot/mjs/components/UiHome.mjs
@@ -69,6 +69,10 @@ export default {
       </dl>
     </div>
     
+  <div class="mt-24">
+        <lite-youtube class="mx-auto max-w-5xl aspect-video w-full" videoid="Ojo80oFQte8"
+                      style="background-image: url('https://img.youtube.com/vi/Ojo80oFQte8/maxresdefault.jpg')"></lite-youtube>
+  </div>
     
 <div class="overflow-hidden bg-white py-24 sm:py-32">
   <div class="mx-auto max-w-7xl px-6 lg:px-8">