From 1516b7349a8fc3939d9c4f206528c0cffa320dca Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Mon, 11 Oct 2021 15:38:22 +0100
Subject: [PATCH] include more info on film page

---
 app/static/js/film.js   |  38 +++++++++++++++
 app/templates/film.html | 103 +++++++++++++---------------------------
 app/video/models.py     |   8 ++++
 3 files changed, 78 insertions(+), 71 deletions(-)
 create mode 100644 app/static/js/film.js

diff --git a/app/static/js/film.js b/app/static/js/film.js
new file mode 100644
index 0000000..668e0e3
--- /dev/null
+++ b/app/static/js/film.js
@@ -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()
+})
diff --git a/app/templates/film.html b/app/templates/film.html
index 9dfd6f2..a360bd1 100644
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -2,82 +2,43 @@
 {% block main %}
 
 <div class="film">
-<div class="info">
-<h1>{{ film.data.title | safe }}</h1>
-{% comment %}
-<h2>{{ film.data.director|join:", "|safe }}</h2>
-{% endcomment %}
-<p>{{ film.data.summary|safe }}</p>
-<div class="details">
-Runtime: {{ film.duration }},
-Year: {{ film.data.date}},
-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 class="info">
+		<h1>{{ film.data.title | safe }}</h1>
+		{% comment %}
+		<h2>{{ film.data.director|join:", "|safe }}</h2>
+		{% endcomment %}
+		<p>{{ film.data.summary|safe }}</p>
+		<div class="details">
+			Runtime: {{ film.duration }},
+			Year: {{ film.data.date}},
+			Artist Bio: {{ film.data.bio|safe }}
 		</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>
 {% endblock %}
 
 {% block end %}
-<script>
-	var film = {
-		id: "{{ film.padma_id }}",
-	}
-</script>
 		<script>
-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()
-})
+			var film = {{ film.json | safe }};
 		</script>
-
+		<script src="{% static 'js/film.js' %}"></script>
 {% endblock %}
diff --git a/app/video/models.py b/app/video/models.py
index eb2be3a..3de1ec5 100644
--- a/app/video/models.py
+++ b/app/video/models.py
@@ -1,4 +1,5 @@
 import logging
+import json
 
 from django.conf import settings
 from django.contrib.auth import get_user_model
@@ -36,6 +37,13 @@ class Film(models.Model):
     def duration(self):
         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):
     created = models.DateTimeField(auto_now_add=True)
     modified = models.DateTimeField(auto_now=True)