From ef6b766b29160e06bd9abfb864851f993e75703c Mon Sep 17 00:00:00 2001
From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Date: Mon, 29 Jan 2024 21:40:25 -0500
Subject: Add support for multi image community posts

---
 src/invidious/frontend/comments_youtube.cr | 30 ++++++++++++++++++++++++++++++
 src/invidious/helpers/i18n.cr              |  7 ++++++-
 src/invidious/views/template.ecr           |  1 +
 3 files changed, 37 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/invidious/frontend/comments_youtube.cr b/src/invidious/frontend/comments_youtube.cr
index ecc0bc1b..6551d411 100644
--- a/src/invidious/frontend/comments_youtube.cr
+++ b/src/invidious/frontend/comments_youtube.cr
@@ -107,6 +107,36 @@ module Invidious::Frontend::Comments
               </div>
               END_HTML
             end
+          when "multiImage"
+            html << <<-END_HTML
+              <section class="carousel">
+              <a class="skip-link" href="#skip-#{child["commentId"]}">#{translate(locale, "carousel_skip")}</a>
+              <div class="slides">
+              END_HTML
+            image_array = attachment["images"].as_a
+
+            image_array.each_index do |i|
+              html << <<-END_HTML
+                  <div class="slides-item slide-#{i + 1}" id="#{child["commentId"]}-slide-#{i + 1}" aria-label="#{translate(locale, "carousel_slide", nil, {"current" => (i + 1).to_s, "total" => image_array.size.to_s})}" tabindex="0">
+                    <img loading="lazy" src="/ggpht#{URI.parse(image_array[i][1]["url"].as_s).request_target}" alt="" />
+                  </div>
+                END_HTML
+            end
+
+            html << <<-END_HTML
+              </div>
+              <div class="carousel__nav">
+              END_HTML
+            attachment["images"].as_a.each_index do |i|
+              html << <<-END_HTML
+                  <a class="slider-nav" href="##{child["commentId"]}-slide-#{i + 1}" aria-label="#{translate(locale, "carousel_go_to", (i + 1).to_s)}" tabindex="-1" aria-hidden="true">#{i + 1}</a>
+                END_HTML
+            end
+            html << <<-END_HTML
+              </div>
+              <div id="skip-#{child["commentId"]}"></div>
+            </section>
+            END_HTML
           else nil # Ignore
           end
         end
diff --git a/src/invidious/helpers/i18n.cr b/src/invidious/helpers/i18n.cr
index 76e477a4..8e2f7f44 100644
--- a/src/invidious/helpers/i18n.cr
+++ b/src/invidious/helpers/i18n.cr
@@ -78,7 +78,7 @@ def load_all_locales
   return locales
 end
 
-def translate(locale : String?, key : String, text : String | Nil = nil) : String
+def translate(locale : String?, key : String, text : String | Nil = nil, texts : Hash(String, String) | Nil = nil) : String
   # Log a warning if "key" doesn't exist in en-US locale and return
   # that key as the text, so this is more or less transparent to the user.
   if !LOCALES["en-US"].has_key?(key)
@@ -116,6 +116,11 @@ def translate(locale : String?, key : String, text : String | Nil = nil) : Strin
 
   if text
     translation = translation.gsub("`x`", text)
+  elsif texts
+    # adds support for multi string interpolation. Based on i18next https://www.i18next.com/translation-function/interpolation#basic
+    texts.each_key do |hash_key|
+      translation = translation.gsub("{{#{hash_key}}}", texts[hash_key])
+    end
   end
 
   return translation
diff --git a/src/invidious/views/template.ecr b/src/invidious/views/template.ecr
index fd755619..379cf779 100644
--- a/src/invidious/views/template.ecr
+++ b/src/invidious/views/template.ecr
@@ -21,6 +21,7 @@
     <link rel="stylesheet" href="/css/grids-responsive-min.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/ionicons.min.css?v=<%= ASSET_COMMIT %>">
     <link rel="stylesheet" href="/css/default.css?v=<%= ASSET_COMMIT %>">
+    <link rel="stylesheet" href="/css/carousel.css?v=<%= ASSET_COMMIT %>">
     <script src="/js/_helpers.js?v=<%= ASSET_COMMIT %>"></script>
 </head>
 
-- 
cgit v1.2.3