lumbung-video-prototype/video-feed-prototype.html
2021-06-16 12:00:53 +02:00

405 lines
15 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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/295dcb6d-7409-4bf7-8c3c-97b67b3775bc.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'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/75fbc455-2491-4df2-994c-92062801ecf3">
<img src="https://tv.lumbung.space/lazy-static/previews/295dcb6d-7409-4bf7-8c3c-97b67b3775bc.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/75fbc455-2491-4df2-994c-92062801ecf3" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
0:47:37
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>Sonic Liberation Front - 24/05/21</div>
<span class="description collapsed" id='vid-40'> Mirror from Radio Alhara<br />
https://yamakan.place/palestine/<br />
<br />
Recording on 24/5/21 from 15:00 - 15:45 Betlehem time.<br />
<br />
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020,...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/sonicliberation'> Sonic Liberation Front</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-40')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/75fbc455-2491-4df2-994c-92062801ecf3'> 2021-05-24</a></span>
</div>
</div>
</div>
<div class='video-box'>
<div class='media'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/698d6eb1-c76a-4b0a-ae32-e11692b356fb">
<img src="https://tv.lumbung.space/lazy-static/previews/464da572-89da-46ae-90c8-82dae3cea325.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/698d6eb1-c76a-4b0a-ae32-e11692b356fb" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
4:30:16
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>Sonic Liberation Front - 23/05/2021</div>
<span class="description collapsed" id='vid-35'> Mirror from Radio Alhara<br />
https://yamakan.place/palestine/<br />
<br />
Recording on 22/5/21 from 17:30 - 22:15 Betlehem time.<br />
<br />
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020,...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/sonicliberation'> Sonic Liberation Front</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-35')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/698d6eb1-c76a-4b0a-ae32-e11692b356fb'> 2021-05-23</a></span>
</div>
</div>
</div>
<div class='video-box'>
<div class='media'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/752f7991-995d-4a2f-a1a4-41cc5688b078">
<img src="https://tv.lumbung.space/lazy-static/previews/ce21bca7-c866-4093-b3d6-06e155291dfa.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/752f7991-995d-4a2f-a1a4-41cc5688b078" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
0:56:42
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>MAJÁLIS - A Lumbung tagok bemutatása | Politikai ágencia</div>
<span class="description collapsed" id='vid-39'> POLITICAL AGENCY<br />
The discussion will explore the possibilities for arts funding and political agency from the perspective of grassroots collectives.<br />
<br />
A conversation with the participation of Question of Funding (Palestine), hosted by OFF-Biennale...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/majelis'> Majelis</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-39')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/752f7991-995d-4a2f-a1a4-41cc5688b078'> 2021-05-23</a></span>
</div>
</div>
</div>
<div class='video-box'>
<div class='media'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/4eff6150-b688-4c42-958f-6e206319554d">
<img src="https://tv.lumbung.space/lazy-static/previews/9ce1f7f8-13cb-436b-8313-01d020bc8d1c.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/4eff6150-b688-4c42-958f-6e206319554d" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
5:07:46
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>Sonic Liberation Front / Frente de Liberación Sonoro - 22/5/2021</div>
<span class="description collapsed" id='vid-30'> Mirror from Radio Alhara<br />
https://yamakan.place/palestine/<br />
<br />
Recording on 22/5/21 from 19:00 - 24:00 Betlehem time.<br />
<br />
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020,...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/sonicliberation'> Sonic Liberation Front</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-30')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/4eff6150-b688-4c42-958f-6e206319554d'> 2021-05-22</a></span>
</div>
</div>
</div>
<div class='video-box'>
<div class='media'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/73d9f872-ea75-490c-a1be-60a398bac45e">
<img src="https://tv.lumbung.space/lazy-static/previews/6df9f482-ac52-45aa-a46b-5265df4439ee.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/73d9f872-ea75-490c-a1be-60a398bac45e" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
6:28:45
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>Sonic Liberation Front - 21/5/21</div>
<span class="description collapsed" id='vid-20'> Mirror from Radio Alhara<br />
https://yamakan.place/palestine/<br />
<br />
Recording on 21/5/21 from 14:00 - 19:00 Betlehem time. <br />
<br />
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/sonicliberation'> Sonic Liberation Front</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-20')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/73d9f872-ea75-490c-a1be-60a398bac45e'> 2021-05-21</a></span>
</div>
</div>
</div>
<div class='video-box'>
<div class='media'>
<a class='video-thumbnail' href="https://tv.lumbung.space/videos/watch/b4aafef4-892f-4036-a4bc-2e09027e2b4b">
<img src="https://tv.lumbung.space/lazy-static/previews/330965b6-f172-47bc-a914-d7d790858352.jpg">
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="https://tv.lumbung.space/videos/embed/b4aafef4-892f-4036-a4bc-2e09027e2b4b" frameborder="0" allowfullscreen></iframe> -->
<div class="video-thumbnail-duration-overlay">
LIVE
</div>
<div class="play-overlay">
<div class="play-icon"></div>
</div>
</a>
</div>
<div class='metadata'>
<div class='title'>Sonic Liberation Front</div>
<span class="description collapsed" id='vid-21'> Ongoing mirror of Radio Alhara<br />
<br />
https://yamakan.place/palestine/<br />
<br />
Radio Alhara is a radio station based in Bethlehem, Ramallah and Amman. Launched during a global lockdown crisis in March 2020, it encompasses the idea of a public space. The ra...</span>
<div class='footer'>
<span class='channel'><a href='https://tv.lumbung.space/video-channels/sonicliberation'> Sonic Liberation Front</a></span>
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-21')"> <a href='#'> </a></span>
<span class='date'> <a href='https://tv.lumbung.space/videos/watch/b4aafef4-892f-4036-a4bc-2e09027e2b4b'> 2021-05-21</a></span>
</div>
</div>
</div>
</div>
</body>
<script>
function toggleDescription(id){
document.querySelector(id).classList.toggle("collapsed");
}
</script>
</html>