From 0232f6fe872c73e5ef2eedca568c6f68ff88b522 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Thu, 30 Sep 2021 18:30:36 +0100
Subject: [PATCH] add links

---
 app/static/css/partials/_film.scss |  2 +
 app/static/css/style.scss          |  1 +
 app/templates/film.html            | 59 ++++++++++++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 app/static/css/partials/_film.scss

diff --git a/app/static/css/partials/_film.scss b/app/static/css/partials/_film.scss
new file mode 100644
index 0000000..139597f
--- /dev/null
+++ b/app/static/css/partials/_film.scss
@@ -0,0 +1,2 @@
+
+
diff --git a/app/static/css/style.scss b/app/static/css/style.scss
index b53e26c..d5fb348 100644
--- a/app/static/css/style.scss
+++ b/app/static/css/style.scss
@@ -1,4 +1,5 @@
 @import "partials/reset";
 @import "partials/layout";
 @import "partials/burger";
+@import "partials/film";
 @import "partials/ascroll";
diff --git a/app/templates/film.html b/app/templates/film.html
index edc9c1d..d4cffd1 100644
--- a/app/templates/film.html
+++ b/app/templates/film.html
@@ -6,4 +6,63 @@
 <h1>{{ film.data.title | safe }}</h1>
 <h2>{{ film.data.director|join:", "|safe }}</h2>
 <p>{{ film.data.summary|safe }}</p>
+
+<div>
+	<a href="" id="play-fullscreen">Watch Fullscreen</a>
+</div>
+<div>
+	<a href="play/en">Watch with Annotations</a>
+</div>
+<div>
+	<a href="play/zh">Watch with Annotations (Mandarin title)</a>
+</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()
+})
+		</script>
+
 {% endblock %}