rra
/
lumbung-video-prototype
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity
Browse Source

init

pull/1/head
rra 3 years ago
commit
96912e1c95
4 changed files with 770 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 64
      streams-feed.py
  2. 405
      video-feed-prototype.html
  3. 240
      video-feed.html
  4. 61
      video-feed.py

64
streams-feed.py
View File

@ -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)

405
video-feed-prototype.html
View File

@ -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>

240
video-feed.html
View File

@ -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>

61
video-feed.py
View File

@ -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)
Write Preview
Loading…
Cancel
Save