FSFE/fsfe-website
27
32
Fork 92
Code Issues 63 Pull Requests 15 Wiki Activity

Implement YH4F videobox #4773

Merged
bonnie merged 3 commits from sofiaritz/fsfe-website:yh4f-video-thingy into master 2025-01-24 08:34:45 +00:00
Conversation 4 Commits 3 Files Changed 4 +103 -1
4 changed files with 103 additions and 1 deletions
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>
sofiaritz marked this conversation as resolved Outdated
bonnie commented 2025-01-23 11:05:45 +00:00
Outdated
Review
Copy Link

This talk is in German -> following my comment I would remove it.

This talk is in German -> following my comment I would remove it.
<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;
bonnie marked this conversation as resolved Outdated
bonnie commented 2025-01-23 11:09:26 +00:00
Outdated
Review
Copy Link

I might be absolutely wrong here! How does this work out on mobile end-devices, like Smartphones? Or is there now effect?

I might be absolutely wrong here! How does this work out on mobile end-devices, like Smartphones? Or is there now effect?
sofiaritz commented 2025-01-23 12:09:36 +00:00
Outdated
Review
Copy Link

That's from the default embedding style from PeerTube, it works just fine on smartphones (tested with the Firefox DevTools). No major effects removing it, I would keep it

That's from the default embedding style from PeerTube, it works just fine on smartphones (tested with the Firefox DevTools). No major effects removing it, I would keep it
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>