From 69696843c63c65fb71796c7d992f60a862aecbe6 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Fri, 28 Apr 2023 15:46:27 +0200
Subject: [PATCH] FIX: allows youtube embeds to respect the `t` param (#21295)

---
 .../assets/javascripts/discourse/components/lazy-iframe.js | 6 +++++-
 .../assets/javascripts/discourse/components/lazy-video.hbs | 2 ++
 .../assets/javascripts/lib/lazy-video-attributes.js        | 3 ++-
 .../discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb  | 2 ++
 .../test/javascripts/components/lazy-video-test.js         | 7 +++++++
 5 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
index 015e0ea521e..b75ad65fa66 100644
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
+++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-iframe.js
@@ -4,7 +4,11 @@ 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`;
+        let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1`;
+        if (this.args.startTime > 0) {
+          url += `&start=${this.args.startTime}`;
+        }
+        return url;
       case "vimeo":
         return `https://player.vimeo.com/video/${this.args.videoId}${
           this.args.videoId.includes("?") ? "&" : "?"
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
index b2f459a5288..0d0ae7138af 100644
--- a/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
+++ b/plugins/discourse-lazy-videos/assets/javascripts/discourse/components/lazy-video.hbs
@@ -6,6 +6,7 @@
   }}
   data-video-id={{@videoAttributes.id}}
   data-video-title={{@videoAttributes.title}}
+  data-video-start-time={{@videoAttributes.startTime}}
   data-provider-name={{@videoAttributes.providerName}}
 >
   {{#if this.isLoaded}}
@@ -13,6 +14,7 @@
       @providerName={{@videoAttributes.providerName}}
       @title={{@videoAttributes.title}}
       @videoId={{@videoAttributes.id}}
+      @startTime={{@videoAttributes.startTime}}
     />
   {{else}}
     <div
diff --git a/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js b/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js
index 70b19bb8696..c8e9bc272c8 100644
--- a/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js
+++ b/plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js
@@ -8,8 +8,9 @@ export default function getVideoAttributes(cooked) {
   const thumbnail = img?.getAttribute("src");
   const dominantColor = img?.dataset?.dominantColor;
   const title = cooked.dataset.videoTitle;
+  const startTime = cooked.dataset.videoStartTime || 0;
   const providerName = cooked.dataset.providerName;
   const id = cooked.dataset.videoId;
 
-  return { url, thumbnail, title, providerName, id, dominantColor };
+  return { url, thumbnail, title, providerName, id, dominantColor, startTime };
 }
diff --git a/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb
index adf3e64e788..78217a6d51f 100644
--- a/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb
+++ b/plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb
@@ -21,11 +21,13 @@ class Onebox::Engine::YoutubeOnebox
       end
 
       escaped_title = ERB::Util.html_escape(video_title)
+      escaped_start_time = ERB::Util.html_escape(params["t"] || 0)
 
       <<~HTML
         <div class="youtube-onebox lazy-video-container"
           data-video-id="#{video_id}"
           data-video-title="#{escaped_title}"
+          data-video-start-time="#{escaped_start_time}"
           data-provider-name="youtube">
           <a href="https://www.youtube.com/watch?v=#{video_id}" target="_blank">
             <img class="youtube-thumbnail"
diff --git a/plugins/discourse-lazy-videos/test/javascripts/components/lazy-video-test.js b/plugins/discourse-lazy-videos/test/javascripts/components/lazy-video-test.js
index 354bd5964e6..d0f12f9a0a7 100644
--- a/plugins/discourse-lazy-videos/test/javascripts/components/lazy-video-test.js
+++ b/plugins/discourse-lazy-videos/test/javascripts/components/lazy-video-test.js
@@ -13,6 +13,7 @@ module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
     providerName: "youtube",
     id: "kPRA0W1kECg",
     dominantColor: "00ffff",
+    startTime: 234,
   };
 
   test("displays the correct video title", async function (assert) {
@@ -21,6 +22,12 @@ module("Discourse Lazy Videos | Component | lazy-video", function (hooks) {
     assert.dom(".title-link").hasText(this.attributes.title);
   });
 
+  test("uses the correct video start time", async function (assert) {
+    await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);
+
+    assert.dom(".youtube-onebox").hasAttribute("data-video-start-time", "234");
+  });
+
   test("displays the correct provider icon", async function (assert) {
     await render(hbs`<LazyVideo @videoAttributes={{this.attributes}} />`);