From 7b90cd4f2648b97a47961a159bd5e75a91869900 Mon Sep 17 00:00:00 2001
From: r <roel.roscam-abbing@mau.se>
Date: Wed, 7 Jul 2021 14:16:12 +0200
Subject: [PATCH] working players in the feed prototype

---
 lumbung.space/videofeedprototype.html | 66 +++++++++++++++------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/lumbung.space/videofeedprototype.html b/lumbung.space/videofeedprototype.html
index 7cad3c3..fe3a6c2 100644
--- a/lumbung.space/videofeedprototype.html
+++ b/lumbung.space/videofeedprototype.html
@@ -200,10 +200,9 @@
   <div class='wrapper'>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/31650645-820e-45b5-a068-05479eaa3fa8">
+          <div class='media' id='media-93'>
+            <span class='video-thumbnail' id='thumb-93' onclick="loadPlayer('93', 'https://tv.lumbung.space/videos/embed/31650645-820e-45b5-a068-05479eaa3fa8')" href="https://tv.lumbung.space/videos/watch/31650645-820e-45b5-a068-05479eaa3fa8">
               <img src="https://tv.lumbung.space/lazy-static/previews/709054e1-dd2e-4cbc-a3fa-5bee1e18c56e.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/31650645-820e-45b5-a068-05479eaa3fa8" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               1:06:35 
@@ -216,11 +215,11 @@
           </div>
           <div class='metadata'>
             <div class='title'>[AUDIO] DENDANG PETANG - SEMAKBELUKAR Live at Kineruku, Bandung (08 December 2013)</div>
-            <span class="description collapsed" id='vid-93'> What SEMAKBELUKAR or Belukaria Orkestar performed at their last concert at Kineruku, Bandung in 2013 was not a sad celebration like a farewell that will certainly not meet again in the future. More than that, they know how to celebrate the reperto...</span>
+            <span class="description collapsed" id='meta-93'> What SEMAKBELUKAR or Belukaria Orkestar performed at their last concert at Kineruku, Bandung in 2013 was not a sad celebration like a farewell that will certainly not meet again in the future. More than that, they know how to celebrate the reperto...</span>
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/rahmat.arham_channel'> Main rahmat.arham channel</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-93')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-93')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/31650645-820e-45b5-a068-05479eaa3fa8'> 2021-07-05</a></span>
             </div>
@@ -228,10 +227,9 @@
       </div>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/e6d5bb2a-d77f-4a00-a449-992a579c8c0d">
+          <div class='media' id='media-90'>
+            <span class='video-thumbnail' id='thumb-90' onclick="loadPlayer('90', 'https://tv.lumbung.space/videos/embed/e6d5bb2a-d77f-4a00-a449-992a579c8c0d')" href="https://tv.lumbung.space/videos/watch/e6d5bb2a-d77f-4a00-a449-992a579c8c0d">
               <img src="https://tv.lumbung.space/lazy-static/previews/32291aa2-a391-4219-a413-87521ff373ba.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/e6d5bb2a-d77f-4a00-a449-992a579c8c0d" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               0:14:39 
@@ -244,11 +242,11 @@
           </div>
           <div class='metadata'>
             <div class='title'>Keroncong Tugu Cafrinho, Live at RURU Gallery, ruangrupa, Jakarta (19 August 2014)</div>
-            <span class="description collapsed" id='vid-90'> None</span>
+            <span class="description collapsed" id='meta-90'> None</span>
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/ruangrupa_ruru_channel'> ruangrupa</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-90')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-90')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/e6d5bb2a-d77f-4a00-a449-992a579c8c0d'> 2021-07-03</a></span>
             </div>
@@ -256,10 +254,9 @@
       </div>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/4ab2ce65-7cdd-4cb5-b197-20bebd626c17">
+          <div class='media' id='media-88'>
+            <span class='video-thumbnail' id='thumb-88' onclick="loadPlayer('88', 'https://tv.lumbung.space/videos/embed/4ab2ce65-7cdd-4cb5-b197-20bebd626c17')" href="https://tv.lumbung.space/videos/watch/4ab2ce65-7cdd-4cb5-b197-20bebd626c17">
               <img src="https://tv.lumbung.space/lazy-static/previews/c1291d9a-2dd5-453f-b13a-2c476b379a35.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/4ab2ce65-7cdd-4cb5-b197-20bebd626c17" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               0:11:55 
@@ -272,11 +269,11 @@
           </div>
           <div class='metadata'>
             <div class='title'>ruangrupa (2000-2014)</div>
-            <span class="description collapsed" id='vid-88'> ruangrupa (selalu ditulis dalam huruf kecil dan tanpa spasi) adalah organisasi seni rupa kontemporer yang didirikan pada tahun 2000 oleh sekelompok seniman di Jakarta. Sebagai organisasi nirlaba, ruangrupa bergiat mendorong kemajuan gagasan seni r...</span>
+            <span class="description collapsed" id='meta-88'> ruangrupa (selalu ditulis dalam huruf kecil dan tanpa spasi) adalah organisasi seni rupa kontemporer yang didirikan pada tahun 2000 oleh sekelompok seniman di Jakarta. Sebagai organisasi nirlaba, ruangrupa bergiat mendorong kemajuan gagasan seni r...</span>
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/ruangrupa_ruru_channel'> ruangrupa</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-88')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-88')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/4ab2ce65-7cdd-4cb5-b197-20bebd626c17'> 2021-07-03</a></span>
             </div>
@@ -284,10 +281,9 @@
       </div>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/65fd5f7f-1303-4d7b-92e4-033cbcf28515">
+          <div class='media' id='media-86'>
+            <span class='video-thumbnail' id='thumb-86' onclick="loadPlayer('86', 'https://tv.lumbung.space/videos/embed/65fd5f7f-1303-4d7b-92e4-033cbcf28515')" href="https://tv.lumbung.space/videos/watch/65fd5f7f-1303-4d7b-92e4-033cbcf28515">
               <img src="https://tv.lumbung.space/lazy-static/previews/b0c69309-2efb-4047-a78f-afc405533a50.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/65fd5f7f-1303-4d7b-92e4-033cbcf28515" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               1:31:07 
@@ -300,7 +296,7 @@
           </div>
           <div class='metadata'>
             <div class='title'>lumbung calling: Humor</div>
-            <span class="description collapsed" id='vid-86'> lumbung calling: Humor<br />
+            <span class="description collapsed" id='meta-86'> lumbung calling: Humor<br />
 Saturday, May 1st, 2021<br />
 2.30 pm (CET), 3.30 pm (IDT), 7.30 pm (WIB)<br />
 In English with translation into International Sign Language<br />
@@ -313,7 +309,7 @@ Gridthiya Gaweewong, Curator <br />
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-86')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-86')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/65fd5f7f-1303-4d7b-92e4-033cbcf28515'> 2021-07-03</a></span>
             </div>
@@ -321,10 +317,9 @@ Gridthiya Gaweewong, Curator <br />
       </div>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/9691360d-5362-4754-84ad-f62c140eea3a">
+          <div class='media' id='media-87'>
+            <span class='video-thumbnail' id='thumb-87' onclick="loadPlayer('87', 'https://tv.lumbung.space/videos/embed/9691360d-5362-4754-84ad-f62c140eea3a')" href="https://tv.lumbung.space/videos/watch/9691360d-5362-4754-84ad-f62c140eea3a">
               <img src="https://tv.lumbung.space/lazy-static/previews/3494d661-4a00-4e27-8282-93a7a5d1c667.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/9691360d-5362-4754-84ad-f62c140eea3a" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               1:24:29 
@@ -337,7 +332,7 @@ Gridthiya Gaweewong, Curator <br />
           </div>
           <div class='metadata'>
             <div class='title'>lumbung calling: Independence</div>
-            <span class="description collapsed" id='vid-87'> lumbung calling: Independence<br />
+            <span class="description collapsed" id='meta-87'> lumbung calling: Independence<br />
 <br />
 Saturday, June 5, 2021<br />
 8.30 am (CDT), 2.30 pm (CET), 3.30 pm (EEST), 7.30 pm (WIB) <br />
@@ -348,7 +343,7 @@ Tania Bruguera, founder of Instituto de Artivismo Hann...</span>
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-87')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-87')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/9691360d-5362-4754-84ad-f62c140eea3a'> 2021-07-03</a></span>
             </div>
@@ -356,10 +351,9 @@ Tania Bruguera, founder of Instituto de Artivismo Hann...</span>
       </div>
   
       <div class='video-box'>
-          <div class='media'>
-            <a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/e34800e2-1065-4945-8e02-958719e456a9">
+          <div class='media' id='media-85'>
+            <span class='video-thumbnail' id='thumb-85' onclick="loadPlayer('85', 'https://tv.lumbung.space/videos/embed/e34800e2-1065-4945-8e02-958719e456a9')" href="https://tv.lumbung.space/videos/watch/e34800e2-1065-4945-8e02-958719e456a9">
               <img src="https://tv.lumbung.space/lazy-static/previews/d6e8befd-ce10-4f6c-9bdc-b52124af1325.jpg">
-              <!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/e34800e2-1065-4945-8e02-958719e456a9" frameborder="0" allowfullscreen></iframe> -->  
             <div class="video-thumbnail-duration-overlay">
               
               1:42:16 
@@ -372,7 +366,7 @@ Tania Bruguera, founder of Instituto de Artivismo Hann...</span>
           </div>
           <div class='metadata'>
             <div class='title'>lumbung calling: Local Anchor</div>
-            <span class="description collapsed" id='vid-85'> lumbung calling: Local Anchor <br />
+            <span class="description collapsed" id='meta-85'> lumbung calling: Local Anchor <br />
 Saturday, April 3, 2021<br />
 2.30 pm (CET), 7.30 pm (WIB), 8.30 pm (WITA)<br />
 In English with translation into International Sign Language<br />
@@ -382,7 +376,7 @@ Melani Budianta, Professor of Literature and Cultural Studies at Unive...</span>
             <div class='footer'>
               <span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
               
-                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-85')"> <a href='#'>  </a></span>
+                <span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-85')"> <a href='#'>  </a></span>
               
               <span class='date'> <a href='https://tv.lumbung.space/videos/watch/e34800e2-1065-4945-8e02-958719e456a9'> 2021-07-03</a></span>
             </div>
@@ -396,5 +390,17 @@ Melani Budianta, Professor of Literature and Cultural Studies at Unive...</span>
   function toggleDescription(id){
     document.querySelector(id).classList.toggle("collapsed");
   }
+  function loadPlayer(id, embed_path){
+    media = document.querySelector('#media-'+ id)
+
+    var iframe = document.createElement('iframe');
+    iframe.src = embed_path + '?autoplay=1&title=0'
+    iframe.width = 560;
+    iframe.height = 315;
+    iframe.frameBorder = 0;
+    iframe.sandbox = "allow-same-origin allow-scripts allow-popups" 
+    media.appendChild(iframe)
+    document.querySelector('#thumb-'+ id).remove()
+  }
 </script>
 </html>