include more info on film page

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()
+})

app/templates/film.html

@@ -14,7 +14,6 @@ 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>
@@ -30,54 +29,16 @@ Artist Bio: {{ film.data.bio|safe }}
 			</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 = {
+			var film = {{ film.json | safe }};
-		id: "{{ film.padma_id }}",
-	}
 		</script>
-		<script>
+		<script src="{% static 'js/film.js' %}"></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()
-})
-		</script>
-
 {% endblock %}

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)