Skip to content

Commit

Permalink
add attending info on front page, prepare livestream page
Browse files Browse the repository at this point in the history
  • Loading branch information
tyrasd committed Sep 4, 2024
1 parent f597b4f commit 6e3e601
Show file tree
Hide file tree
Showing 6 changed files with 116 additions and 9 deletions.
12 changes: 8 additions & 4 deletions _includes/css/sotm.css
Original file line number Diff line number Diff line change
Expand Up @@ -253,24 +253,28 @@ footer a:focus,
.intro .intro-body .attending {
text-align: center;
display: inline-block;
width: 80%;
width: 75%;
border-radius: 8px;
margin-top: 80px;
margin-bottom: 40px;
padding: 1.5em 2em;
color: black;
background-color: {{ site.color.primary-dark }};
background-color: {{ site.color.primary-light }};
}
.intro .intro-body .attending img {
width: 8em;
width: 12em;
height: auto;
margin-right: 1em;
margin-left: 1em;
margin-bottom: 0.7em;
margin-top: 0.7em;
}
.intro .intro-body .attending p {
text-align: left;
}
.intro .intro-body ul {
list-style-type: '— ';
margin-left: 1em;
list-style-type: disc;
text-align: left;
}
.intro .intro-body ul li {
Expand Down
2 changes: 1 addition & 1 deletion _includes/footer.html
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<!--</nav>
<nav class="col3 pad2x">-->
<a class="block" href="https://en.osm.town/@sotm">Mastodon&nbsp;<svg class="icon"><use xlink:href="{{site.baseurl}}/img/icons/mastodon.svg#icon" href="{{site.baseurl}}/img/icons/mastodon.svg#icon"></use></svg></a>
<a class="block" href="https://twitter.com/sotm">Twitter&nbsp;<span class="icon twitter"></span></a>
<a class="block" href="https://x.com/sotm">X&nbsp;<span class="icon twitter"></span></a>
<a class="block" href="https://www.youtube.com/channel/UCLqJsr_5PfdvDFbgv1qp2aQ">Youtube&nbsp;<span class="icon video"></span></a>
<a class="block" href="https://t.me/sotm_international">Telegram<span class="icon compass"></span></a>
</nav>
Expand Down
25 changes: 23 additions & 2 deletions _includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,33 @@
<header class="intro">
<div class="intro-body">
<div class="limiter">
<div class="logo">
<!--<div class="logo">
<img src="img/logo/sotm_2024.svg">
<a href="#about" class="btn btn-circle page-scroll page-scroll-silent">
<i class="icon big down animated"></i>
</a>
</div>
</div>-->

<div class="attending">
<img src="img/logo/sotm_2024.svg">
<h1 class="space-bottom2">Attending State of the Map 2024</h1>
<p>Attending in person in Nairobi? You can here find more information about the <a href="/venue">venue</a> and the <a href="/programme">programme</a>.</p>
<p>Attending remotely? Head over to the <a href="https://sotm2024.venueless.events/">online conference platform</a> if you bought the Venueless ticket.</p>
<p>Or watch the free live <a href="/stream">stream</a> 🎥 here on the website.</p>
<h2>What's more?</h2>
<p>
<ul>
<li>Conference Posters are published <a href="/posters/">on the website</a>.</li>
<li>The recordings of the talks will be made available after the conference.</li>
<li>Follow State of the Map on social media (<a href="https://en.osm.town/@sotm">Mastodon</a> or <a href="https://x.com/sotm">X</a>) and use the hashtag <i>#sotm2024</i>.</li>
<li>Connect with others in our <a href="https://t.me/sotm2018">telegram group chat</a> and share your State of the Map experience!</li>
</ul>
</p>
<p>Thanks to our <a href="/#sponsors">sponsors</a> for supporting SotM 2024!</p>
<h2>And next year?</h2>
<p>The host city of next year's state of the map conference will be announced during the <a href="/sessions/8ZVKZV/">closing session</a>.</p>
</div>

</div>
</div>
<div class="credits">
Expand Down
4 changes: 2 additions & 2 deletions _includes/nav.html
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,9 @@
<a class="{% if page.url contains '/tickets' %}active{% endif %}" href="{{site.baseurl}}/tickets/">Tickets</a>
</li>

<!--<li>
<li>
<a class="{% if page.url contains '/stream' %}active{% endif %}" href="{{site.baseurl}}/stream/">Live Stream</a>
</li>-->
</li>

<!--<li>
{% if page.role == 'index' %}
Expand Down
2 changes: 2 additions & 0 deletions stream/hls.js

Large diffs are not rendered by default.

80 changes: 80 additions & 0 deletions stream/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
---
layout: page-with-toc
title: Live Stream
titlecontent: "Watch the SotM 2024 live stream. The following streams are available:"
headings: "auditorium-1,auditorium-2"
---

<p>The main tracks of the State of the Map with most talks of the general and academic <a href="../programme">programme</a> can be watched live here. Note that if you have a <em>“Venueless”</em> conference <a href="/tickets/">ticket</a>, you can watch all talks, ask questions and interact with other attendees on the conference platform at <a href="https://sotm2024.venueless.events/">https://sotm2024.venueless.events/</a>.</p>

<h2 id="auditorium-1">Maasai Mara</h2>

<video id="video-auditorium-1" style="width:100%" controls data-stream-url="https://cache.xemo.ch/live/sotm-2024-maasai-mara.m3u8"></video>

<p>Audio-only version: <audio id="audio-auditorium-1" controls src="https://cache.xemo.ch/live/sotm-2024-maasai-mara.mp3"></audio></p>

<h2 id="auditorium-2">Tsavo Hall</h2>

<video id="video-auditorium-2" style="width:100%" controls data-stream-url="https://cache.xemo.ch/live/sotm-2024-tsavo-hall.m3u8"></video>

<p>Audio-only version: <audio id="audio-auditorium-2" controls src="https://cache.xemo.ch/live/sotm-2024-tsavo-hall.mp3"></audio></p>


<script src="./hls.js"></script>
<script>
(function () {
const rooms = ['auditorium-A', 'auditorium-B', 'loop-cinema'];
rooms.forEach(function(room) {
const video = document.getElementById('video-'+room);
const videoSrc = video.dataset.streamUrl;
if (Hls.isSupported()) {
const hls = new Hls({
debug: false
});
hls.loadSource(videoSrc);
hls.attachMedia(video);
hls.on(Hls.Events.ERROR, function (event, data) {
if (data.fatal) {
switch (data.type) {
case Hls.ErrorTypes.NETWORK_ERROR:
console.log('Fatal network error encountered, try to recover');
hls.startLoad();
break;
case Hls.ErrorTypes.MEDIA_ERROR:
console.log('fatal media error encountered, try to recover');
hls.recoverMediaError();
break;
default:
console.log('fatal, unrecoverable error encountered, freeing resources');
hls.destroy();
break;
}
}
});
}
else if (video.canPlayType('application/vnd.apple.mpegurl')) {
video.src = videoSrc;
}
});
})();
</script>

<h2>Alternative watching methods</h2>
<p>
If you prefer watching the live stream using a dedicated player instead of the embedded one on this page, you can use the following URLs:
</p>

<ul>
<li>Maasai Mara
<ul>
<li>Video: <a href="https://cache.xemo.ch/live/sotm-2024-maasai-mara.m3u8">https://cache.xemo.ch/live/sotm-2024-maasai-mara.m3u8</a></li>
<li>Audio only: <a href="https://cache.xemo.ch/live/sotm-2024-maasai-mara.mp3">https://cache.xemo.ch/live/sotm-2024-maasai-mara.mp3 </a></li>
</ul>
</li>
<li>Tsavo Hall
<ul>
<li>Video: <a href="https://cache.xemo.ch/live/sotm-2024-tsavo-hall.m3u8">https://cache.xemo.ch/live/sotm-2024-tsavo-hall.m3u8</a></li>
<li>Audio only: <a href="https://cache.xemo.ch/live/sotm-2024-tsavo-hall.mp3">https://cache.xemo.ch/live/sotm-2024-tsavo-hall.mp3</a></li>
</ul>
</li>
</ul>

0 comments on commit 6e3e601

Please sign in to comment.