commit
96912e1c95
4 changed files with 770 additions and 0 deletions
@ -0,0 +1,64 @@ |
|||||
|
#!/bin/python3 |
||||
|
|
||||
|
#lumbung.space video feed generator |
||||
|
#c 2021 roel roscam abbing gpvl3 etc |
||||
|
|
||||
|
import peertube |
||||
|
import jinja2 |
||||
|
import json |
||||
|
import os |
||||
|
import datetime |
||||
|
|
||||
|
|
||||
|
def duration(n): |
||||
|
""" |
||||
|
convert '6655' in '1:50:55' |
||||
|
|
||||
|
""" |
||||
|
return str(datetime.timedelta(seconds = n)) |
||||
|
|
||||
|
#def base64ify(url): |
||||
|
#download url to object |
||||
|
#run base64 lib on object |
||||
|
#format a data: string |
||||
|
#return base64string |
||||
|
|
||||
|
def linebreaks(text): |
||||
|
if not text: |
||||
|
return text |
||||
|
else: |
||||
|
import re |
||||
|
br = re.compile(r"(\r\n|\r|\n)") |
||||
|
return br.sub(r"<br />\n", text) |
||||
|
|
||||
|
|
||||
|
|
||||
|
env = jinja2.Environment( |
||||
|
loader=jinja2.FileSystemLoader(os.path.curdir) |
||||
|
) |
||||
|
env.filters['duration'] = duration |
||||
|
env.filters['linebreaks'] = linebreaks |
||||
|
|
||||
|
host = 'https://tv.lumbung.space' |
||||
|
|
||||
|
configuration = peertube.Configuration( |
||||
|
host = host+"/api/v1" |
||||
|
) |
||||
|
|
||||
|
client = peertube.ApiClient(configuration) |
||||
|
|
||||
|
v = peertube.VideoApi(client) |
||||
|
|
||||
|
response = v.videos_get(count=6, filter='local')#, tags_one_of='audio') |
||||
|
|
||||
|
videos = response.to_dict() |
||||
|
videos = videos['data'] |
||||
|
|
||||
|
template = env.get_template('video-feed.html') |
||||
|
|
||||
|
html = template.render(videos=videos, host=host) |
||||
|
|
||||
|
with open('video-feed-prototype.html','w') as f: |
||||
|
f.write(html) |
||||
|
print(html) |
||||
|
|
||||
@ -0,0 +1,405 @@ |
|||||
|
<!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 art’s 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> |
||||
@ -0,0 +1,240 @@ |
|||||
|
<!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="{{ host }}{{videos[0].preview_path}}"> |
||||
|
<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'> |
||||
|
{% for video in videos %} |
||||
|
<div class='video-box'> |
||||
|
<div class='media'> |
||||
|
<a class='video-thumbnail' href="{{ host }}/videos/watch/{{ video.uuid }}"> |
||||
|
<img src="{{ host }}{{ video.preview_path }}"> |
||||
|
<!-- <iframe width="560" height="315" sandbox="allow-same-origin allow-scripts allow-popups" src="{{ host }}{{ video.embed_path }}" frameborder="0" allowfullscreen></iframe> --> |
||||
|
<div class="video-thumbnail-duration-overlay"> |
||||
|
{% if video.is_live %} |
||||
|
LIVE |
||||
|
{% else %} |
||||
|
{{ video.duration | duration }} |
||||
|
{% endif %} |
||||
|
</div> |
||||
|
<div class="play-overlay"> |
||||
|
<div class="play-icon"></div> |
||||
|
</div> |
||||
|
</a> |
||||
|
</div> |
||||
|
<div class='metadata'> |
||||
|
<div class='title'>{{ video.name }}</div> |
||||
|
<span class="description collapsed" id='vid-{{ video.id }}'> {{ video.description | linebreaks }}</span> |
||||
|
<div class='footer'> |
||||
|
<span class='channel'><a href='{{ video.channel.url }}'> {{ video.channel.display_name }}</a></span> |
||||
|
|
||||
|
<span class='descr_button' id='toggle-button' onclick="toggleDescription('#vid-{{ video.id }}')"> <a href='#'> </a></span> |
||||
|
|
||||
|
<span class='date'> <a href='{{ host }}/videos/watch/{{ video.uuid }}'> {{ video.published_at.strftime('%Y-%m-%d') }}</a></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
{% endfor %} |
||||
|
</div> |
||||
|
|
||||
|
</body> |
||||
|
<script> |
||||
|
function toggleDescription(id){ |
||||
|
document.querySelector(id).classList.toggle("collapsed"); |
||||
|
} |
||||
|
</script> |
||||
|
</html> |
||||
@ -0,0 +1,61 @@ |
|||||
|
#!/bin/python3 |
||||
|
|
||||
|
#lumbung.space video feed generator |
||||
|
#c 2021 roel roscam abbing gpvl3 etc |
||||
|
|
||||
|
import peertube |
||||
|
import jinja2 |
||||
|
import json |
||||
|
import os |
||||
|
import datetime |
||||
|
|
||||
|
|
||||
|
def duration(n): |
||||
|
""" |
||||
|
convert '6655' in '1:50:55' |
||||
|
|
||||
|
""" |
||||
|
return str(datetime.timedelta(seconds = n)) |
||||
|
|
||||
|
def linebreaks(text): |
||||
|
import re |
||||
|
br = re.compile(r"(\r\n|\r|\n)") |
||||
|
return br.sub(r"<br />\n", text) |
||||
|
|
||||
|
#def base64ify(url): |
||||
|
#download url to object |
||||
|
#run base64 lib on object |
||||
|
#format a data: string |
||||
|
#return base64string |
||||
|
|
||||
|
|
||||
|
env = jinja2.Environment( |
||||
|
loader=jinja2.FileSystemLoader(os.path.curdir) |
||||
|
) |
||||
|
|
||||
|
env.filters['duration'] = duration |
||||
|
env.filters['linebreaks'] = linebreaks |
||||
|
|
||||
|
host = 'https://tv.lumbung.space' |
||||
|
|
||||
|
configuration = peertube.Configuration( |
||||
|
host = host+"/api/v1" |
||||
|
) |
||||
|
|
||||
|
client = peertube.ApiClient(configuration) |
||||
|
|
||||
|
v = peertube.VideoApi(client) |
||||
|
|
||||
|
response = v.videos_get(count=6, filter='local') |
||||
|
|
||||
|
videos = response.to_dict() |
||||
|
videos = videos['data'] |
||||
|
|
||||
|
template = env.get_template('video-feed.html') |
||||
|
|
||||
|
html = template.render(videos=videos, host=host, description=description) |
||||
|
|
||||
|
with open('video-feed-prototype.html','w') as f: |
||||
|
f.write(html) |
||||
|
print(html) |
||||
|
|
||||
Loading…
Reference in new issue