DEV: Remove lazy-yt and replace with lazy-videos (#20722)

- Refactors the old plugin to remove jquery usage
- Adds support for Vimeo videos (default on) and Tiktok (experimental and default off)

plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.hbs

@@ -0,0 +1,11 @@
+{{#if @providerName}}
+  <iframe
+    src={{this.iframeSrc}}
+    title={{@title}}
+    allowFullScreen
+    scrolling="no"
+    frameborder="0"
+    seamless="seamless"
+    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+  ></iframe>
+{{/if}}

plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js

@@ -0,0 +1,14 @@
+import Component from "@glimmer/component";
+
+export default class LazyVideo extends Component {
+  get iframeSrc() {
+    switch (this.args.providerName) {
+      case "youtube":
+        return `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1`;
+      case "vimeo":
+        return `https://player.vimeo.com/video/${this.args.videoId}?autoplay=1`;
+      case "tiktok":
+        return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
+    }
+  }
+}

plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs

@@ -0,0 +1,51 @@
+<div
+  class={{concat-class
+    "lazy-video-container"
+    (concat @videoAttributes.providerName "-onebox")
+    (if this.isLoaded "video-loaded")
+  }}
+  data-video-id={{@videoAttributes.id}}
+  data-video-title={{@videoAttributes.title}}
+  data-provider-name={{@videoAttributes.providerName}}
+>
+  {{#if this.isLoaded}}
+    <LazyIframe
+      @providerName={{@videoAttributes.providerName}}
+      @title={{@videoAttributes.title}}
+      @videoId={{@videoAttributes.id}}
+    />
+  {{else}}
+    <div
+      class={{concat-class "video-thumbnail" @videoAttributes.providerName}}
+      tabindex="0"
+      {{on "click" this.loadEmbed}}
+      {{on "keypress" this.loadEmbed}}
+    >
+      <img
+        class={{concat @videoAttributes.providerName "-thumbnail"}}
+        src={{@videoAttributes.thumbnail}}
+        title={{@videoAttributes.title}}
+        loading="lazy"
+      />
+      <div
+        class={{concat-class
+          "icon"
+          (concat @videoAttributes.providerName "-icon")
+        }}
+      ></div>
+    </div>
+    <div class="title-container">
+      <div class="title-wrapper">
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          class="title-link"
+          href={{@videoAttributes.url}}
+          title={{@videoAttributes.title}}
+        >
+          {{@videoAttributes.title}}
+        </a>
+      </div>
+    </div>
+  {{/if}}
+</div>

plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.js

@@ -0,0 +1,23 @@
+import Component from "@glimmer/component";
+import { action } from "@ember/object";
+import { tracked } from "@glimmer/tracking";
+
+export default class LazyVideo extends Component {
+  @tracked isLoaded = false;
+
+  @action
+  loadEmbed() {
+    if (!this.isLoaded) {
+      this.isLoaded = true;
+      this.args.onLoadedVideo?.();
+    }
+  }
+
+  @action
+  onKeyPress(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      this.loadEmbed();
+    }
+  }
+}