From 257d923f90dabb3afe4e609d504a013b76dfeced Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sof=C3=ADa=20Aritz?= <sofiaritz@fsfe.org>
Date: Wed, 22 Jan 2025 14:19:42 +0100
Subject: [PATCH] Implement YH4F videobox

---
 fsfe.org/activities/yh4f/data/talks.en.xml | 29 ++++++++++
 fsfe.org/activities/yh4f/index.en.xhtml    |  2 +
 fsfe.org/activities/yh4f/index.sources     |  3 +-
 fsfe.org/activities/yh4f/index.xsl         | 67 ++++++++++++++++++++++
 4 files changed, 100 insertions(+), 1 deletion(-)
 create mode 100644 fsfe.org/activities/yh4f/data/talks.en.xml

diff --git a/fsfe.org/activities/yh4f/data/talks.en.xml b/fsfe.org/activities/yh4f/data/talks.en.xml
new file mode 100644
index 0000000000..bb52a83824
--- /dev/null
+++ b/fsfe.org/activities/yh4f/data/talks.en.xml
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+
+<talkset>
+    <version>1</version>
+
+    <talk>
+        <title>Youth Hacking 4 Freedom</title>
+        <iframe-url>https://media.fsfe.org/videos/embed/0dbe49c1-bd7d-44ca-bb97-1b922b3e110e?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
+        <external-url>https://media.fsfe.org/w/2GqZexjuYceajrbo7B8Sc1</external-url>
+    </talk>
+
+    <talk>
+        <title>LUGA 2023: Youth Hacking 4 Freedom - Hacking competition for teenagers from Europe</title>
+        <iframe-url>https://media.fsfe.org/videos/embed/8b2d8bb6-0284-4f0e-b614-8ca55cd32c94?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
+        <external-url>https://media.fsfe.org/w/ibNDS7ojB7eHpenrXS835d</external-url>
+    </talk>
+
+    <talk>
+        <title>FOSDEM 2024 - Presenting Youth Hacking 4 Freedom, FSFE programming competition for European teenagers</title>
+        <iframe-url>https://media.fsfe.org/videos/embed/3e64d66f-f2fd-4927-80b9-a63dca49aece?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
+        <external-url>https://media.fsfe.org/w/8GSutX7VcnGtMiqm3Ng96m</external-url>
+    </talk>
+
+    <talk>
+        <title>38c3 Lightning Talks - \"Youth Hacking 4 Freedom\"</title>
+        <iframe-url>https://media.fsfe.org/videos/embed/32cf8100-48c4-4194-9cd2-8838ca2fb01e?title=0&amp;peertubeLink=0&amp;p2p=0</iframe-url>
+        <external-url>https://media.fsfe.org/w/7gULawAUxMXp1tcnShiX4d</external-url>
+    </talk>
+</talkset>
\ No newline at end of file
diff --git a/fsfe.org/activities/yh4f/index.en.xhtml b/fsfe.org/activities/yh4f/index.en.xhtml
index e2b9612902..9658083f07 100644
--- a/fsfe.org/activities/yh4f/index.en.xhtml
+++ b/fsfe.org/activities/yh4f/index.en.xhtml
@@ -96,6 +96,8 @@ We have an international <a href="/activities/yh4f/jury.html">jury</a>, with lum
     educative and exciting days in Brussels and socialise with fellow winners.
   </p>
 
+  <talks/>
+
 <h2>2024 Winners</h2>
     
     <figure>
diff --git a/fsfe.org/activities/yh4f/index.sources b/fsfe.org/activities/yh4f/index.sources
index e083e2eab2..744ae835cc 100644
--- a/fsfe.org/activities/yh4f/index.sources
+++ b/fsfe.org/activities/yh4f/index.sources
@@ -1,3 +1,4 @@
+fsfe.org/activities/yh4f/data/talks*:[]
 fsfe.org/news/202*/*:[routers]
 fsfe.org/news/202*/.*:[routers]
-global/countries/countries:[]
+global/countries/countries:[]
\ No newline at end of file
diff --git a/fsfe.org/activities/yh4f/index.xsl b/fsfe.org/activities/yh4f/index.xsl
index 8dc4c9707a..b7bb0b97c6 100644
--- a/fsfe.org/activities/yh4f/index.xsl
+++ b/fsfe.org/activities/yh4f/index.xsl
@@ -13,4 +13,71 @@
       <xsl:with-param name="subset" select="'yh4f'"/>
     </xsl:call-template>
   </xsl:template>
+
+  <!-- "Videobox" (provisional name) with YH4F/related talks -->
+  <xsl:template match="talks">
+    <style>
+    #yh4f-slideshow-caption {
+      display: flex;
+      justify-content: space-between;
+      gap: 1rem;
+      align-items: baseline;
+    }
+
+    #yh4f-iframe {
+      position: absolute;
+      inset: 0px;
+      min-height: 480px;
+      width: 100%;
+    }
+    </style>
+
+    <figure>
+      <div>
+        <div style="min-width: 720px; min-height: 480px">
+          <iframe id="yh4f-iframe" src="https://media.fsfe.org/videos/embed/0dbe49c1-bd7d-44ca-bb97-1b922b3e110e" frameborder="0" allowfullscreen="" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" />
+        </div>
+      </div>
+      <figcaption id="yh4f-slideshow-caption">
+        <button onclick="prevVideo();">←</button>
+        <a id="yh4f-title" href="https://media.fsfe.org/w/2GqZexjuYceajrbo7B8Sc1">Youth Hacking 4 Freedom</a>
+        <button onclick="nextVideo();">→</button>
+      </figcaption>
+    </figure>
+
+    <script type="text/javascript">
+      /* &lt;![CDATA[ */
+      var videos = [
+      <xsl:for-each select="/buildinfo/document/set/talk">
+        {
+          title: "<xsl:value-of select="title"/>",
+          iframe_url: "<xsl:value-of select="iframe-url"/>",
+          external_url: "<xsl:value-of select="external-url"/>",
+        },
+      </xsl:for-each>
+      ];
+
+      <![CDATA[
+      var index = Math.floor(Math.random()*videos.length);
+
+      function nextVideo() {
+        index = (index+1)%videos.length;
+        updateVideo();
+      }
+
+      function prevVideo() {
+        index = (index-1+videos.length)%videos.length;
+        updateVideo();
+      }
+
+      function updateVideo() {
+        $('#yh4f-iframe').attr("src", videos[index]['iframe_url']);
+        $('#yh4f-title').attr("href", videos[index]['external_url']);
+        $('#yh4f-title').text(videos[index]['title']);
+      }
+      ]]>
+
+      /* ]]&gt; */
+    </script>
+  </xsl:template>
 </xsl:stylesheet>