forked from oyd/ozgurkon-theme-hugo
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
86 lines
2.5 KiB
86 lines
2.5 KiB
5 years ago
|
{{ define "main" }}
|
||
|
|
{{ .Content }}
|
||
|
|
|
||
|
|
<nav class="live-tab-switcher">
|
||
|
|
{{ range $index, $room := $.Site.Data.live }}
|
||
|
|
<a class="live-tab-link{{ if ($index) eq 0 }} active {{end}}" id="button-{{$room.navId}}" onClick="switchTabs(event, '{{$room.navId}}')" href="#room-{{$room.navId}}">{{$room.name}}</a>
|
||
|
|
{{end}}
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<section class="live-section">
|
||
|
|
{{ range $index, $room := $.Site.Data.live }}
|
||
|
|
<div id="room-{{$room.navId}}" class="live-player-wrapper {{ if ($index) eq 1 }} live-tab-d-none {{end}}">
|
||
|
|
<video-js
|
||
|
|
id="player-{{$room.navId}}"
|
||
|
|
data-setup="{}"
|
||
|
|
>
|
||
|
|
<source src="{{ $room.url }}">
|
||
|
|
</video-js>
|
||
|
|
</div>
|
||
|
|
{{ end }}
|
||
|
|
<iframe src="https://kiwiirc.com/client/chat.freenode.net/?&theme=cli#ozgurkon" class="live-chat"></iframe>
|
||
|
|
</section>
|
||
|
|
{{end}}
|
||
|
|
|
||
|
|
{{ define "scripts"}}
|
||
|
|
<script type="text/javascript" src="https://vjs.zencdn.net/7.8.1/video.js"></script>
|
||
|
|
<script type="text/javascript" src="https://unpkg.com/@videojs/http-streaming@1.13.3/dist/videojs-http-streaming.min.js"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
|
||
|
|
const players = {
|
||
|
|
{{ range $room := $.Site.Data.live }}
|
||
|
|
{{ $room.navId}}: videojs('player-{{$room.navId}}', {
|
||
|
|
controls: true,
|
||
|
|
aspectRatio: '16:9'
|
||
|
|
}),
|
||
|
|
{{end}}
|
||
|
|
}
|
||
|
|
|
||
|
|
const roomAkgul = document.getElementById('room-akgul');
|
||
|
|
const roomUckan = document.getElementById('room-uckan');
|
||
|
|
const buttonAkgul = document.getElementById('button-akgul');
|
||
|
|
const buttonUckan = document.getElementById('button-uckan');
|
||
|
|
|
||
|
|
function switchTabs(event, id) {
|
||
|
|
event.preventDefault();
|
||
|
|
pausePlayer(id);
|
||
|
|
|
||
|
|
if(id === "akgul") {
|
||
|
|
setActive(buttonAkgul);
|
||
|
|
notActive(buttonUckan);
|
||
|
|
show(roomAkgul);
|
||
|
|
hide(roomUckan);
|
||
|
|
}
|
||
|
|
if(id === "uckan") {
|
||
|
|
setActive(buttonUckan);
|
||
|
|
notActive(buttonAkgul);
|
||
|
|
hide(roomAkgul);
|
||
|
|
show(roomUckan);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
function pausePlayer(id) {
|
||
|
|
const playerToPause = (id === "akgul") ? "uckan" : "akgul";
|
||
|
|
players[id].play();
|
||
|
|
players[playerToPause].pause();
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function show(el) {
|
||
|
|
if(el.classList.contains('live-tab-d-none')) return el.classList.remove('live-tab-d-none');
|
||
|
|
}
|
||
|
|
|
||
|
|
function hide(el) {
|
||
|
|
if(!el.classList.contains('live-tab-d-none')) return el.classList.add('live-tab-d-none');
|
||
|
|
}
|
||
|
|
|
||
|
|
function setActive(el) {
|
||
|
|
if(!el.classList.contains('active')) return el.classList.add('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
function notActive(el) {
|
||
|
|
if(el.classList.contains('active')) return el.classList.remove('active');
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
{{ end }}
|