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: [PATCH 1/3] Add support for multi image community posts --- assets/css/carousel.css | 119 +++++++++++++++++++++ locales/en-US.json | 5 +- src/invidious/frontend/comments_youtube.cr | 30 ++++++ src/invidious/helpers/i18n.cr | 7 +- src/invidious/views/template.ecr | 1 + 5 files changed, 160 insertions(+), 2 deletions(-) create mode 100644 assets/css/carousel.css diff --git a/assets/css/carousel.css b/assets/css/carousel.css new file mode 100644 index 00000000..8f0906d8 --- /dev/null +++ b/assets/css/carousel.css @@ -0,0 +1,119 @@ +/* +Copyright (c) 2024 by Jennifer (https://codepen.io/jwjertzoch/pen/JjyGeRy) + +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation +files (the "Software"), to deal in the Software without restriction, + including without limitation the rights to use, copy, modify, +merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall +be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +DEALINGS IN THE SOFTWARE. +*/ + +.carousel { + margin: 0 auto; + overflow: hidden; + text-align: center; +} + +.slides { + width: 100%; + display: flex; + overflow-x: scroll; + scrollbar-width: none; + scroll-snap-type: x mandatory; + scroll-behavior: smooth; +} + +.slides::-webkit-scrollbar { + display: none; +} + +.slides-item { + align-items: center; + border-radius: 10px; + display: flex; + flex-shrink: 0; + font-size: 100px; + height: 600px; + justify-content: center; + margin: 0 1rem; + position: relative; + scroll-snap-align: start; + transform: scale(1); + transform-origin: center center; + transition: transform .5s; + width: 100%; +} + +.carousel__nav { + padding: 1.25rem .5rem; +} + +.slider-nav { + align-items: center; + background-color: #ddd; + border-radius: 50%; + color: #000; + display: inline-flex; + height: 1.5rem; + justify-content: center; + padding: .5rem; + position: relative; + text-decoration: none; + width: 1.5rem; +} + +.skip-link { + height: 1px; + overflow: hidden; + position: absolute; + top: auto; + width: 1px; +} + +.skip-link:focus { + align-items: center; + background-color: #000; + color: #fff; + display: flex; + font-size: 30px; + height: 30px; + justify-content: center; + opacity: .8; + text-decoration: none; + width: 50%; + z-index: 1; +} + +.light-theme .slider-nav { + background-color: #ddd; +} + +.dark-theme .slider-nav { + background-color: #0005; +} + +@media (prefers-color-scheme: light) { + .no-theme .slider-nav { + background-color: #ddd; + } +} + +@media (prefers-color-scheme: dark) { + .no-theme .slider-nav { + background-color: #0005; + } +} \ No newline at end of file diff --git a/locales/en-US.json b/locales/en-US.json index 227b0677..7899ba0a 100644 --- a/locales/en-US.json +++ b/locales/en-US.json @@ -488,5 +488,8 @@ "channel_tab_playlists_label": "Playlists", "channel_tab_community_label": "Community", "channel_tab_channels_label": "Channels", - "toggle_theme": "Toggle Theme" + "toggle_theme": "Toggle Theme", + "carousel_slide": "Slide {{current}} of {{total}}", + "carousel_skip": "Skip the Carousel", + "carousel_go_to": "Go to slide `x`" } 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 END_HTML end + when "multiImage" + html << <<-END_HTML +
+ +
+ END_HTML + image_array = attachment["images"].as_a + + image_array.each_index do |i| + html << <<-END_HTML +
(i + 1).to_s, "total" => image_array.size.to_s})}" tabindex="0"> + +
+ END_HTML + end + + html << <<-END_HTML +
+
+ END_HTML + attachment["images"].as_a.each_index do |i| + html << <<-END_HTML + + END_HTML + end + html << <<-END_HTML +
+
+
+ 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 @@ + From 26429bee3f2bede1d4270f6e71a52482be1d5d49 Mon Sep 17 00:00:00 2001 From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com> Date: Thu, 15 Feb 2024 21:44:40 -0500 Subject: [PATCH 2/3] make it so interpolation text can be a hash Co-Authored-By: Samantaz Fox --- src/invidious/frontend/comments_youtube.cr | 2 +- src/invidious/helpers/i18n.cr | 20 +++++++++++--------- 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/src/invidious/frontend/comments_youtube.cr b/src/invidious/frontend/comments_youtube.cr index 6551d411..aecac87f 100644 --- a/src/invidious/frontend/comments_youtube.cr +++ b/src/invidious/frontend/comments_youtube.cr @@ -117,7 +117,7 @@ module Invidious::Frontend::Comments image_array.each_index do |i| html << <<-END_HTML -
(i + 1).to_s, "total" => image_array.size.to_s})}" tabindex="0"> +
(i + 1).to_s, "total" => image_array.size.to_s})}" tabindex="0">
END_HTML diff --git a/src/invidious/helpers/i18n.cr b/src/invidious/helpers/i18n.cr index 8e2f7f44..23a1aafc 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, texts : Hash(String, String) | Nil = nil) : String +def translate(locale : String?, key : String, text : String | 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) @@ -101,10 +101,12 @@ def translate(locale : String?, key : String, text : String | Nil = nil, texts : match_length = 0 raw_data.as_h.each do |hash_key, value| - if md = text.try &.match(/#{hash_key}/) - if md[0].size >= match_length - translation = value.as_s - match_length = md[0].size + if text.is_a?(String) + if md = text.try &.match(/#{hash_key}/) + if md[0].size >= match_length + translation = value.as_s + match_length = md[0].size + end end end end @@ -114,12 +116,12 @@ def translate(locale : String?, key : String, text : String | Nil = nil, texts : raise "Invalid translation \"#{raw_data}\"" end - if text + if text.is_a?(String) translation = translation.gsub("`x`", text) - elsif texts + elsif text.is_a?(Hash(String, String)) # 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]) + text.each_key do |hash_key| + translation = translation.gsub("{{#{hash_key}}}", text[hash_key]) end end From a957b0fb7c517193dc9b20e7724feb46fe23912e Mon Sep 17 00:00:00 2001 From: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com> Date: Fri, 16 Feb 2024 16:22:43 -0500 Subject: [PATCH 3/3] remove trailing white spaces --- assets/css/carousel.css | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/assets/css/carousel.css b/assets/css/carousel.css index 8f0906d8..4bae92e5 100644 --- a/assets/css/carousel.css +++ b/assets/css/carousel.css @@ -1,24 +1,24 @@ /* Copyright (c) 2024 by Jennifer (https://codepen.io/jwjertzoch/pen/JjyGeRy) -Permission is hereby granted, free of charge, to any person -obtaining a copy of this software and associated documentation +Permission is hereby granted, free of charge, to any person +obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, - including without limitation the rights to use, copy, modify, -merge, publish, distribute, sublicense, and/or sell copies of -the Software, and to permit persons to whom the Software is + including without limitation the rights to use, copy, modify, +merge, publish, distribute, sublicense, and/or sell copies of +the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: -The above copyright notice and this permission notice shall +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, -EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES -OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND -NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT -HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, -WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ @@ -36,7 +36,7 @@ DEALINGS IN THE SOFTWARE. scroll-snap-type: x mandatory; scroll-behavior: smooth; } - + .slides::-webkit-scrollbar { display: none; } @@ -116,4 +116,4 @@ DEALINGS IN THE SOFTWARE. .no-theme .slider-nav { background-color: #0005; } -} \ No newline at end of file +}