FIX: Allow to use `%h%m%s` for youtube `t` param (#22299)

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

@@ -5,8 +5,8 @@ export default class LazyVideo extends Component {
     switch (this.args.providerName) {
       case "youtube":
         let url = `https://www.youtube.com/embed/${this.args.videoId}?autoplay=1`;
-        if (this.args.startTime > 0) {
+        if (this.args.startTime) {
-          url += `&start=${this.args.startTime}`;
+          url += `&start=${this.convertToSeconds(this.args.startTime)}`;
         }
         return url;
       case "vimeo":
@@ -17,4 +17,18 @@ export default class LazyVideo extends Component {
         return `https://www.tiktok.com/embed/v2/${this.args.videoId}`;
     }
   }
+
+  convertToSeconds(time) {
+    const match = time.toString().match(/(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?/);
+    const [hours, minutes, seconds] = match.slice(1);
+
+    if (hours || minutes || seconds) {
+      const h = parseInt(hours, 10) || 0;
+      const m = parseInt(minutes, 10) || 0;
+      const s = parseInt(seconds, 10) || 0;
+
+      return h * 3600 + m * 60 + s;
+    }
+    return time;
+  }
 }

plugins/discourse-lazy-videos/assets/javascripts/lib/lazy-video-attributes.js

@@ -8,7 +8,7 @@ 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 startTime = cooked.dataset.videoStartTime;
   const providerName = cooked.dataset.providerName;
   const id = cooked.dataset.videoId;
 

plugins/discourse-lazy-videos/lib/lazy-videos/lazy_youtube.rb

@@ -21,7 +21,8 @@ class Onebox::Engine::YoutubeOnebox
       end
 
       escaped_title = ERB::Util.html_escape(video_title)
-      escaped_start_time = ERB::Util.html_escape(params["t"] || 0)
+      escaped_start_time = ERB::Util.html_escape(params["t"])
+      t_param = "&t=#{escaped_start_time}" if escaped_start_time.present?
 
       <<~HTML
         <div class="youtube-onebox lazy-video-container"
@@ -29,7 +30,7 @@ class Onebox::Engine::YoutubeOnebox
           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">
+          <a href="https://www.youtube.com/watch?v=#{video_id}#{t_param}" target="_blank">
             <img class="youtube-thumbnail"
               src="#{thumbnail_url}"
               title="#{escaped_title}">