update for live stream

live-update
murat emir cabaroğlu 4 years ago
parent f990fff55e
commit cb47048d72
  1. 1
      .gitignore
  2. 86
      layouts/live/list.html
  3. 4
      layouts/partials/head.html
  4. 55
      static/theme-oyd.css

1
.gitignore vendored

@ -0,0 +1 @@
node_modules

@ -0,0 +1,86 @@
{{ 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 }}

@ -67,6 +67,10 @@
<meta name="twitter:creator" content="@OzgurKonorg" />
<meta name="twitter:image" content="https://ozgurkon.org/tn.png?1234">
{{ if (.Type) eq "live" }}
<link href="https://vjs.zencdn.net/7.8.1/video-js.css" rel="stylesheet">
{{ end }}
{{ end }}
<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}"/>
<link href="{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}" rel="feed" type="application/rss+xml" title="{{ .Site.Title }}"/>

@ -2863,3 +2863,58 @@ main>.kids .content ul li{
padding:0 .5em
}
}
.live-section {
display: flex;
flex-direction: row;
align-items: center;
}
.live-tab-switcher {
font-size:2em;
display:-webkit-box;
display:flex;
flex-direction: row;
flex-wrap:wrap;
-webkit-box-pack:justify;
justify-content:center;
align-self:center;
padding:.5rem 10vw;
padding:var(--space-3) var(--container-margin);
}
.live-tab-link {
-webkit-box-flex:1;
flex-grow:1;
border-radius:.5rem;
border-radius:var(--space-3);
text-align:center;
background-color: #fff;
color: var(--primary);
margin-right: 1rem;
}
.live-tab-link.active {
background-color: var(--primary);
color: #fff;
}
.live-tab-d-none {
display: none;
}
.live-chat {
width: 30vw;
height: 60vh;
}
.live-player-wrapper {
width: 70vw;
height: 60vh;
margin-right: 10px;
}
.vjs-tech {
object-fit: cover;
}

Loading…
Cancel
Save