@ -1,88 +0,0 @@ |
||||
{{ 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'); |
||||
} |
||||
setTimeout(() => { |
||||
document.getElementById("button-akgul").click(); |
||||
},3000); |
||||
</script> |
||||
{{ end }} |
||||
Loading…
Reference in new issue