FSFE/fsfe-website
25
31
Fork 92
Code Issues 65 Pull Requests 8 Wiki Activity

Implement YH4F videobox (#4773)
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
Implemented using PeerTube iframes because now you can disable P2P for iframes [1].
The `talks` element is only added to the English page because the talks are in English.

If YH4F talks are carried out in other languages, it should be as simple as creating a `talks.[lang].xml` file with the links and adding the `talks` element to the respective page. From a GDPR perspective, as long as the talks are hosted in the FSFE's PeerTube and the `p2p` option is set to `0`, there shouldn't be any problems.

[1] https://docs.joinpeertube.org/api/embed-player#p2p

Reviewed-on: #4773
Reviewed-by: bonnie <bonnie@fsfe.org>
Co-authored-by: Sofía Aritz <sofiaritz@fsfe.org>
Co-committed-by: Sofía Aritz <sofiaritz@fsfe.org>
This commit is contained in:
Sofía Aritz 2025-01-24 08:34:40 +00:00 committed by bonnie
parent 421b2eeb92
commit 93fc4c22bd
4 changed files with 103 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
fsfe.org/activities/yh4f/data/talks.en.xml Normal file
View File

@ -0,0 +1,23 @@
<?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>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>

2
fsfe.org/activities/yh4f/index.en.xhtml
View File

@ -45,6 +45,8 @@ We have an international <a href="/activities/yh4f/jury.html">jury</a>, with lum
<a href="/activities/yh4f/register" class="btn btn-default">Register</a>
</div>
<talks/>
<h3>Decide yourself what you code</h3>
<p>

3
fsfe.org/activities/yh4f/index.sources
View File

@ -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:[]

76
fsfe.org/activities/yh4f/index.xsl
View File

@ -13,4 +13,80 @@
<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%;
}
#yh4f-figure {
width: 85vw;
}
#yh4f-iframe-container {
width: 100%;
min-height: 480px;
}
</style>
<figure id="yh4f-figure">
<div>
<div id="yh4f-iframe-container">
<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>