add recording video player and drm!!!

content/lounge.md

@@ -5,9 +5,6 @@ menu:
     weight: 3
 ---
 
-{{<iframe class="aspect-178" src="https://live.franconian.net" title="Livestream of the franconian.net channel">}}
-
-Acts licensed under a Creative Commons (CC) license will be streamed via both {{<external href="streaming.media.ccc.de">}}streaming.media.ccc.de{{</external>}} and {{<external href="live.franconian.net">}}live.franconian.net{{</external>}} (see above). All other acts are exclusive to the latter.
 
 ## Day 1
 
@@ -36,7 +33,7 @@ Acts licensed under a Creative Commons (CC) license will be streamed via both {{
 | --------- | ---------------------------------------------------------------- | --- |
 | 16:30 CET | sun_or_cloudz_ _dubtechno _dub _110bpm _live 	       		| no |
 | 18:30 CET | Tün Ni _deep _techno _live				       	| no |
-| 21:00 CET | >TKG _analogsession _techno				       | yes |
+| 21:00 CET | [TKG _Live Techno](/lounge/tkg)					       | yes |
 | 22:00 CET | Åis _analogsession _techno _live				       | yes |
 | 23:45 CET | Noisemaker _techno _live			                       | no  |
 

content/lounge/tkg.md

@@ -0,0 +1,5 @@
+---
+title: Lounge Recording TKG
+---
+{{<recording_video mp4="http://assets.franconian.net/TKG_analogsession_techno.mp4">}}
+ 

layouts/shortcodes/recording_video.html

@@ -0,0 +1,52 @@
+<div id="vcon">
+<button id="pp">Play</button>
+<button id="vol">Volume: 100%</button>
+<button id="vd">-</button>
+<button id="vi">+</button>
+<div id="vidiv">
+<figure>
+  <video preload="none" controlsList="nodownload" id="drm" width="1280" height="720">
+  </video>
+  <figcaption>{{ .Get "alt" }}</figcaption>
+</figure>
+</div>
+<div id="firewall"></div>
+</div>
+<script>
+    let firewall = document.getElementById("firewall");
+    let vid = document.getElementById("drm");
+    vid.oncontextmenu = ()=>false
+    vid.src = atob("{{ .Get "mp4" | base64Encode}}");
+    let pbutton = document.getElementById("pp");
+    pbutton.onclick = ()=>{
+      if(vid.paused){
+        vid.play();
+        pbutton.textContent="Pause";
+      }else{
+        vid.pause();
+        pbutton.textContent="Play";
+      }
+    }
+    firewall.onclick = pbutton.onclick;
+    let vd =  document.getElementById("vd");
+    let vi =  document.getElementById("vi");
+    vd.onclick = ()=>{
+      vid.volume = Math.max(vid.volume-.1, 0)
+      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
+    }
+    vi.onclick = ()=>{
+      vid.volume = Math.min(vid.volume+.1, 1)
+      vol.textContent = `Volume: ${Math.round(vid.volume*100)}%`
+    }
+</script>
+<style>
+  #firewall{
+    position:absolute;
+    background-color: rgb(0, 0, 0);
+    width: 1280px;
+    height: 720px;
+    opacity: 0.0;
+  }
+  #vidiv{position:absolute;}
+  #vcon{overflow: hidden;}
+</style>