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
406 lines
15 KiB
<!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">
|
|
<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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
1:06:35
|
|
|
|
</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>
|
|
<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('#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>
|
|
</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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
0:14:39
|
|
|
|
</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>
|
|
<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('#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>
|
|
</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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
0:11:55
|
|
|
|
</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>
|
|
<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('#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>
|
|
</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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
1:31:07
|
|
|
|
</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 />
|
|
<br />
|
|
Guests: <br />
|
|
Sourabh Phadke, Architect and School Teacher<br />
|
|
Gridthiya Gaweewong, Curator <br />
|
|
<br />
|
|
...</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('#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>
|
|
</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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
1:24:29
|
|
|
|
</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 />
|
|
<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 />
|
|
<br />
|
|
Guests: <br />
|
|
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('#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>
|
|
</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">
|
|
<div class="video-thumbnail-duration-overlay">
|
|
|
|
1:42:16
|
|
|
|
</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 />
|
|
<br />
|
|
Guests: <br />
|
|
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('#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>
|
|
</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()
|
|
}
|
|
</script>
|
|
</html>
|