Merge pull request 'update for live stream' (#1) from live-update into master

Reviewed-on: #1

.gitignore

@@ -0,0 +1 @@
+node_modules

layouts/live/list.html

@@ -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 }}

layouts/partials/head.html

@@ -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 }}"/>

static/theme-oyd.css

@@ -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;
+}
+