Allows to publish videos uploaded on tv.lumbung.space to the frontpage of lumbung.space
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

406 lines
15 KiB

3 years ago
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>lumbung.space video archive prototype</title>
<meta name="description" content="this page is generated on the basis of a peertube instance">
<meta property="og:title" content="lumbung.space video archive prototype">
<meta property="og:description" content="this page is generated on the basis of a peertube instance">
<meta property="og:image" content="https://tv.lumbung.space/lazy-static/previews/709054e1-dd2e-4cbc-a3fa-5bee1e18c56e.jpg">
3 years ago
<meta property="og:image:alt" content="Image description">
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:url" content="https://lumbung.space/videofeedprototype.html">
<link rel="canonical" href="https://lumbung.space/videofeedprototype.html">
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/my.webmanifest">
<meta name="theme-color" content="#FF00FF">
<style type="text/css">
@font-face{
font-family: "Space Grotesk";
src:url('SpaceGrotesk[wght].woff2')
}
body {font-size:1.3rem;font-family: sans-serif;}
.wrapper {
width: 50%;
margin: auto;
}
.video-box {
border:2px solid #0e0e22;
max-width:560px;
margin:auto;
box-shadow:1em 1em 0 #d2d1c8;
margin-bottom: 2em;
}
.video-box img {
max-width: 100%;
}
.video-box .media {
line-height: 0;
}
.metadata{
display: flex;
flex-direction: column;
background-color: #fff09d;
font-size:0.9rem;
}
.title{
margin-top:0;
border-top: 2px solid #0e0e22;
padding:0.5em;
font-weight:700;
font-size:1.3rem;
}
.footer{
margin-top:0;
border-top: 2px solid #0e0e22;
display: flex;
justify-content: space-between;
}
.channel{
border-right: 2px solid #0e0e22;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.2em;
display: inline-block;
padding-bottom: 0.2em;
}
.date {
float:right;
border-left: 2px solid #0e0e22;
padding-left: 1em;
padding-right: 1em;
padding-top: 0.2em;
display: inline-block;
padding-bottom: 0.2em;
}
.description{
padding: 1em;
display: block;
/*transition: height 0.5s linear;*/
overflow: hidden;
border-top: 2px solid #0e0e22;
}
.collapsed {
border-top: 0px;
/*transform:scaleY(0);*/
height: 0;
padding:0;
}
.descr_button {
cursor: pointer;
flex-grow: 1;
text-align: center;
}
.descr_button a {
color:inherit;
text-decoration: inherit;
}
.descr_button a:before {
content:'↕';
vertical-align: sub;
}
.descr_button:hover {
box-shadow: inset 2px 2px 0px #95948c;
}
.play-icon {
width: 0;
height: 0;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%) scale(.5);
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
border-left: 18px solid hsla(0,0%,100%,.95);
}
.video-thumbnail {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
.video-thumbnail {
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
background-color: #ececec;
transition: filter .2s ease;
}
.video-thumbnail-duration-overlay {
display: inline-block;
background-color: rgb(255, 240, 157);
color: #0e0e22;
font-size: 14px;
line-height: 1.1;
z-index: 10;
position: absolute;
padding: 1px 3px 1px 3px;
right: 5px;
bottom: 5px;
border: 2px solid #0e0e22;
}
.play-overlay {
transition: all .2s ease;
position: absolute;
right: 0;
bottom: 0;
width: inherit;
height: inherit;
opacity: 0;
background-color: rgba(0,0,0,.3);
}
.video-thumbnail:hover {
text-decoration:none!important
}
.video-thumbnail:hover .play-overlay {
opacity:1
}
.video-thumbnail:hover .play-overlay .play-icon {
transform:translate(-50%,-50%) scale(1)
}
/* @media screen and (min-width: 480px) {
* {
background: silver
}*/
</style>
</head>
<body>
<!-- Content -->
<div class='wrapper'>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
1:06:35
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>[AUDIO] DENDANG PETANG - SEMAKBELUKAR Live at Kineruku, Bandung (08 December 2013)</div>
<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>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/rahmat.arham_channel'> Main rahmat.arham channel</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-93')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/31650645-820e-45b5-a068-05479eaa3fa8'> 2021-07-05</a></span>
3 years ago
</div>
</div>
</div>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
0:14:39
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</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='meta-90'> None</span>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/ruangrupa_ruru_channel'> ruangrupa</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-90')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/e6d5bb2a-d77f-4a00-a449-992a579c8c0d'> 2021-07-03</a></span>
3 years ago
</div>
</div>
</div>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
0:11:55
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>ruangrupa (2000-2014)</div>
<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>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/ruangrupa_ruru_channel'> ruangrupa</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-88')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/4ab2ce65-7cdd-4cb5-b197-20bebd626c17'> 2021-07-03</a></span>
3 years ago
</div>
</div>
</div>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
1:31:07
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>lumbung calling: Humor</div>
<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 />
3 years ago
<br />
Guests: <br />
Sourabh Phadke, Architect and School Teacher<br />
Gridthiya Gaweewong, Curator <br />
3 years ago
<br />
...</span>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-86')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/65fd5f7f-1303-4d7b-92e4-033cbcf28515'> 2021-07-03</a></span>
3 years ago
</div>
</div>
</div>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
1:24:29
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>lumbung calling: Independence</div>
<span class="description collapsed" id='meta-87'> lumbung calling: Independence<br />
3 years ago
<br />
Saturday, June 5, 2021<br />
8.30 am (CDT), 2.30 pm (CET), 3.30 pm (EEST), 7.30 pm (WIB) <br />
In English with translation into International Sign Language<br />
3 years ago
<br />
Guests: <br />
Tania Bruguera, founder of Instituto de Artivismo Hann...</span>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-87')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/9691360d-5362-4754-84ad-f62c140eea3a'> 2021-07-03</a></span>
3 years ago
</div>
</div>
</div>
<div class='video-box'>
<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">
3 years ago
<div class="video-thumbnail-duration-overlay">
1:42:16
3 years ago
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>lumbung calling: Local Anchor</div>
<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 />
3 years ago
<br />
Guests: <br />
Melani Budianta, Professor of Literature and Cultural Studies at Unive...</span>
3 years ago
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/lumbung_calling'> lumbung calling</a></span>
3 years ago
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#meta-85')"> <a href='#'> </a></span>
3 years ago
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/e34800e2-1065-4945-8e02-958719e456a9'> 2021-07-03</a></span>
3 years ago
</div>
</div>
</div>
</div>
</body>
<script>
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()
}
3 years ago
</script>
</html>