0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

include more info on film page

Browse source
This commit is contained in:
j 2021-10-11 15:38:22 +01:00
parent 844af58b1d
commit 1516b7349a
3 changed files with 78 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
app/static/js/film.js Normal file
View file

@ -0,0 +1,38 @@
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
var video = document.createElement('video')
video.classList.add('player')
video.src = 'https://pad.ma/' + film.id + '/480p.webm'
video.controls = true
document.querySelector('main').appendChild(video)
video.style.display = 'none'
function enterFullscreen(event) {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
video.removeEventListener('play', enterFullscreen);
setTimeout(() => {
video.style.display = 'block'
}, 150)
}
video.addEventListener('play', enterFullscreen);
video.addEventListener('fullscreenchange', event => {
if (!document.fullscreen) {
video.remove()
if (document.fullscreenElement) {
document.exitFullscreen();
}
}
});
video.addEventListener('pause', event => {
})
video.addEventListener('ended', event => {
video.remove()
if (document.fullscreenElement) {
document.exitFullscreen();
}
});
video.play()
event.preventDefault()
event.stopPropagation()
})

103
app/templates/film.html
View file

@ -2,82 +2,43 @@
{% block main %} {% block main %}
<div class="film"> <div class="film">
<div class="info"> <div class="info">
<h1>{{ film.data.title | safe }}</h1> <h1>{{ film.data.title | safe }}</h1>
{% comment %} {% comment %}
<h2>{{ film.data.director|join:", "|safe }}</h2> <h2>{{ film.data.director|join:", "|safe }}</h2>
{% endcomment %} {% endcomment %}
<p>{{ film.data.summary|safe }}</p> <p>{{ film.data.summary|safe }}</p>
<div class="details"> <div class="details">
Runtime: {{ film.duration }}, Runtime: {{ film.duration }},
Year: {{ film.data.date}}, Year: {{ film.data.date}},
Artist Bio: {{ film.data.bio|safe }} Artist Bio: {{ film.data.bio|safe }}
</div>
</div>
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
<div class="play">
<div>
<a href="" id="play-fullscreen">Play</a>
</div>
<div class="texts">
{% for text in film.related_texts %}
<div class="text">
<a href="{{ text.get_absolute_url }}">
{{ text.title }}<br>
{{ text.byline }}
</a>
</div> </div>
{% endfor %} </div>
</div> <video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
<div class="play">
<div>
<a href="" id="play-fullscreen">Play</a>
</div>
<div class="texts">
{% for text in film.related_texts %}
<div class="text">
<a href="{{ text.get_absolute_url }}">
{{ text.title }}<br>
{{ text.byline }}
</a>
</div>
{% endfor %}
</div>
<div>
<a href="https://pad.ma/{{ film.padma_id }}/info" target="_blank">Open on pad.ma</a>
</div>
</div>
</div> </div>
{% endblock %} {% endblock %}
{% block end %} {% block end %}
<script>
var film = {
id: "{{ film.padma_id }}",
}
</script>
<script> <script>
document.querySelector('a#play-fullscreen').addEventListener('click', event => { var film = {{ film.json | safe }};
var video = document.createElement('video')
video.classList.add('player')
video.src = 'https://pad.ma/' + film.id + '/480p.webm'
video.controls = true
document.querySelector('main').appendChild(video)
video.style.display = 'none'
function enterFullscreen(event) {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
video.removeEventListener('play', enterFullscreen);
setTimeout(() => {
video.style.display = 'block'
}, 150)
}
video.addEventListener('play', enterFullscreen);
video.addEventListener('fullscreenchange', event => {
if (!document.fullscreen) {
video.remove()
if (document.fullscreenElement) {
document.exitFullscreen();
}
}
});
video.addEventListener('pause', event => {
})
video.addEventListener('ended', event => {
video.remove()
if (document.fullscreenElement) {
document.exitFullscreen();
}
});
video.play()
event.preventDefault()
event.stopPropagation()
})
</script> </script>
<script src="{% static 'js/film.js' %}"></script>
{% endblock %} {% endblock %}

8
app/video/models.py
View file

@ -1,4 +1,5 @@
import logging import logging
import json
from django.conf import settings from django.conf import settings
from django.contrib.auth import get_user_model from django.contrib.auth import get_user_model
@ -36,6 +37,13 @@ class Film(models.Model):
def duration(self): def duration(self):
return ox.format_timecode(self.data['duration'])[:-4] return ox.format_timecode(self.data['duration'])[:-4]
def json(self):
data = {}
data['id'] = self.padma_id
return json.dumps(data)
class Edit(models.Model): class Edit(models.Model):
created = models.DateTimeField(auto_now_add=True) created = models.DateTimeField(auto_now_add=True)
modified = models.DateTimeField(auto_now=True) modified = models.DateTimeField(auto_now=True)