From 2826849ee0973d691b76908174e21eeb47beee19 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 20:56:47 +0000
Subject: [PATCH 01/35] assets/scripts.js: Fix JS warnings

---
 assets/scripts.js | 51 +++++++++++++++++++++++------------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 01826f8..d59085b 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -25,14 +25,14 @@ function generateJs(cond) {
 	} else if (cond[0] == 'not') {
 		return '!(' + generateJs(cond[1]) + ')';
 	} else if (cond[0] == 'and') {
-		var conds = [];
-		for (var i = 1; i < cond.length; i++) {
+		let conds = [];
+		for (let i = 1; i < cond.length; i++) {
 			conds.push('(' + generateJs(cond[i]) + ')');
 		}
 		return '(' + conds.join(' && ') + ')';
 	} else if (cond[0] == 'or') {
-		var conds = [];
-		for (var i = 1; i < cond.length; i++) {
+		let conds = [];
+		for (let i = 1; i < cond.length; i++) {
 			conds.push('(' + generateJs(cond[i]) + ')');
 		}
 		return '(' + conds.join(' || ') + ')';
@@ -61,13 +61,13 @@ function findSegment(id) {
 	if (id.startsWith('nsg-')) {
 		id = id.substr(4);
 	}
-	if (SegmentMap.segments[id]) {
+	if (segmentMap.segments[id]) {
 		// check precondition
 		return id;
 	}
 
 	if (segmentGroups[id]) {
-		for (v of segmentGroups[id]) {
+		for (let v of segmentGroups[id]) {
 			if (v.segmentGroup) {
 				return findSegment(v.segmentGroup);
 			} else if (v.segment) {
@@ -88,7 +88,7 @@ function getChoiceMs(choiceId) {
 }
 
 function getSegmentId(ms) {
-	for (const [k, v] of Object.entries(SegmentMap.segments)) {
+	for (const [k, v] of Object.entries(segmentMap.segments)) {
 		if (ms >= v.startTimeMs && ms < v.endTimeMs) {
 			return k;
 		}
@@ -102,7 +102,7 @@ function getSegmentMs(segmentId) {
 
 function getMoment(ms) {
 	for (const [k, v] of Object.entries(momentsBySegment)) {
-		for (r of v)
+		for (let r of v)
 			if (r.type == 'scene:cs_bs') {
 				if (ms >= r.startMs && ms < r.endMs) {
 					return r;
@@ -140,24 +140,24 @@ function setNextSegment(segmentId, comment) {
 
 function addZones(segmentId) {
 	var ul = newList("interactionZones");
-	var caption = 'currentSegment(' + segmentId + ')';
+	let caption = 'currentSegment(' + segmentId + ')';
 	addItem(ul, caption, 'javascript:playSegment("' + segmentId + '")');
 
 	var v = segmentMap.segments[segmentId];
 	if (v && v.ui && v.ui.interactionZones) {
 		var index = 0;
-		for (z of v.ui.interactionZones) {
+		for (var z of v.ui.interactionZones) {
 			var startMs = z[0];
 			var stopMs = z[1];
-			var caption = segmentId + ' interactionZone ' + index;
+			let caption = segmentId + ' interactionZone ' + index;
 			addItem(ul, caption, 'javascript:seek(' + startMs + ')');
 			index++;
 		}
 	}
 
-	var ul = newList("nextSegments");
+	ul = newList("nextSegments");
 	for (const [k, v] of Object.entries(segmentMap.segments[segmentId].next)) {
-		var caption = captions[k] ? captions[k] : k;
+		let caption = captions[k] ? captions[k] : k;
 		if (segmentMap.segments[segmentId].defaultNext == k) {
 			caption = '[' + caption + ']';
 			setNextSegment(k);
@@ -170,9 +170,9 @@ function addChoices(r) {
 	var ul = newList("choices");
 	document.getElementById("choiceCaption").innerHTML = '';
 	if (!r) return;
-	index = 0;
+	let index = 0;
 
-	for (x of r.choices) {
+	for (let x of r.choices) {
 		console.log(x.id, 'choice saved');
 		globalChoices[x.id] = x;
 
@@ -247,14 +247,14 @@ function ontimeupdate(evt) {
 	}
 }
 
-function jumpForward(ms) {
+function jumpForward() {
 	var ms = getCurrentMs();
 	var segmentId = getSegmentId(ms);
 	var v = segmentMap.segments[segmentId];
 
 	var interactionMs = 0;
 	if (v && v.ui && v.ui.interactionZones) {
-		for (z of v.ui.interactionZones) {
+		for (var z of v.ui.interactionZones) {
 			var startMs = z[0];
 			var stopMs = z[1];
 			if (ms < startMs)
@@ -315,13 +315,13 @@ function onload() {
 	var video_source_selector = document.getElementById("video-source");
 	var file_selector = document.getElementById("file-selector");
 	if (video_source_selector.getAttribute("src") == '') {
-		console.log('no video')
+		console.log('no video');
 		file_selector.style.display = 'table';
 		document.getElementById("wrapper-video").style.display = 'none';
 	}
 	document.getElementById('fileinput').addEventListener('change', function () {
 		var file = this.files[0];
-		var fileUrl =  URL.createObjectURL(file)
+		var fileUrl = URL.createObjectURL(file);
 		video_selector.src = fileUrl;
 		video_selector.play();
 		file_selector.style.display = 'none';
@@ -347,7 +347,7 @@ function onload() {
 			playSegment(0);
 		if (e.code == 'Space')
 			togglePlayPause();
-	}
+	};
 
 	document.onkeydown = function (evt) {
 		var v = document.getElementById("video");
@@ -359,14 +359,13 @@ function onload() {
 		if (evt.key == 'ArrowRight') {
 			jumpForward();
 		}
-	}
+	};
 
 	if (location.hash) {
 		var segmentId = location.hash.slice(1);
 		playSegment(segmentId);
 	}
-
-}
+};
 
 function seek(ms) {
 	clearTimeout(timerId);
@@ -389,7 +388,7 @@ function applyImpression(obj) {
 		return;
 	}
 
-	impressionData = obj.impressionData;
+	var impressionData = obj.impressionData;
 
 	if (impressionData && impressionData.type == 'userState') {
 		for (const [variable, value] of Object.entries(impressionData.data.persistent)) {
@@ -407,7 +406,7 @@ function applyPlaybackImpression(segmentId) {
 		return;
 	}
 
-	for (moment of moments) {
+	for (let moment of moments) {
 		if (moment.type != 'notification:playbackImpression') {
 			continue;
 		}
@@ -426,4 +425,4 @@ function playSegment(segmentId) {
 	document.title = 'Bandersnatch - Chapter ' + segmentId;
 	var ms = getSegmentMs(segmentId);
 	seek(ms);
-}
\ No newline at end of file
+}

From 19c8003e62dc39be39d84cc44dc79df41c62291f Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 21:26:34 +0000
Subject: [PATCH 02/35] assets/scripts.js: Delete unused function

---
 assets/scripts.js | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index d59085b..d9a8193 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -82,11 +82,6 @@ function findSegment(id) {
 	return id;
 }
 
-function getChoiceMs(choiceId) {
-	var segmentId = findSegment(choiceId);
-	return getSegmentMs(segmentId);
-}
-
 function getSegmentId(ms) {
 	for (const [k, v] of Object.entries(segmentMap.segments)) {
 		if (ms >= v.startTimeMs && ms < v.endTimeMs) {

From afc3abb81c8b3480a357576110670ac64c777dfa Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 22:04:21 +0000
Subject: [PATCH 03/35] Fix onload JS error

---
 assets/scripts.js | 2 +-
 index.html        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index d9a8193..72d9a8f 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -305,7 +305,7 @@ function togglePlayPause() {
 	else v.pause();
 }
 
-function onload() {
+window.onload = function() {
 	var video_selector = document.getElementById("video");
 	var video_source_selector = document.getElementById("video-source");
 	var file_selector = document.getElementById("file-selector");
diff --git a/index.html b/index.html
index 7b83fcd..d676070 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,7 @@
 
 </head>
 
-<body onload=onload()>
+<body>
 	<div>
 		<div id="c">
 			<section role="banner">

From 64bad02a3be632b6e8cb19f14e2f94d91a786250 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 22:09:35 +0000
Subject: [PATCH 04/35] assets/scripts.js: Do not trigger key events with
 modifier keys

These key combinations usually mean something else and are not
intended for the web page.
---
 assets/scripts.js | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 72d9a8f..31487c9 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -336,6 +336,8 @@ window.onload = function() {
 	};
 
 	document.onkeypress = function (e) {
+		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+			return;
 		if (e.code == 'KeyF')
 			toggleFullScreen();
 		if (e.code == 'KeyR')
@@ -344,14 +346,13 @@ window.onload = function() {
 			togglePlayPause();
 	};
 
-	document.onkeydown = function (evt) {
-		var v = document.getElementById("video");
-
-		if (evt.key == 'ArrowLeft') {
+	document.onkeydown = function (e) {
+		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
+			return;
+		if (e.key == 'ArrowLeft') {
 			jumpBack();
 		}
-
-		if (evt.key == 'ArrowRight') {
+		if (e.key == 'ArrowRight') {
 			jumpForward();
 		}
 	};

From 68ec8bb628054a00f74630afd8c37afbec326bf1 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 22:34:51 +0000
Subject: [PATCH 05/35] assets/scripts.js: Fix check for undefined

---
 assets/scripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 31487c9..43c18e5 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -413,7 +413,7 @@ function applyPlaybackImpression(segmentId) {
 
 function playSegment(segmentId) {
 	clearTimeout(timerId);
-	if (!segmentId || segmentId == "undefined")
+	if (!segmentId || typeof segmentId === "undefined")
 		segmentId = '1A';
 	console.log('playSegment', segmentId);
 	applyPlaybackImpression(segmentId);

From 7e26ff3ddb1abbfa684d6830bbfd5227259daa33 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 22:35:20 +0000
Subject: [PATCH 06/35] assets/scripts.js: Don't hardcode initial segment

---
 assets/scripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 43c18e5..eede1b0 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -414,7 +414,7 @@ function applyPlaybackImpression(segmentId) {
 function playSegment(segmentId) {
 	clearTimeout(timerId);
 	if (!segmentId || typeof segmentId === "undefined")
-		segmentId = '1A';
+		segmentId = segmentMap.initialSegment;
 	console.log('playSegment', segmentId);
 	applyPlaybackImpression(segmentId);
 	location.hash = segmentId;

From 2c987cd81e6aeb02b33e88971b77a6f7236c98d2 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 23:33:31 +0000
Subject: [PATCH 07/35] assets/scripts.js: Improve handling of pre-specified
 video src

Fixes behavior if HTML is edited to indicate the video source.
---
 assets/scripts.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index eede1b0..0ababa7 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -309,18 +309,24 @@ window.onload = function() {
 	var video_selector = document.getElementById("video");
 	var video_source_selector = document.getElementById("video-source");
 	var file_selector = document.getElementById("file-selector");
+	function startPlayback() {
+		file_selector.style.display = 'none';
+		playSegment(null);
+		video_selector.play();
+	}
 	if (video_source_selector.getAttribute("src") == '') {
 		console.log('no video');
 		file_selector.style.display = 'table';
 		document.getElementById("wrapper-video").style.display = 'none';
+	} else {
+		startPlayback();
 	}
 	document.getElementById('fileinput').addEventListener('change', function () {
 		var file = this.files[0];
 		var fileUrl = URL.createObjectURL(file);
 		video_selector.src = fileUrl;
-		video_selector.play();
-		file_selector.style.display = 'none';
 		document.getElementById("wrapper-video").style.display = 'block';
+		startPlayback();
 	}, false);
 
 	video_selector.ontimeupdate = ontimeupdate;

From 4195108b0d6986d850bed8a911d4f24c06b6c947 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sat, 27 Jul 2019 23:57:15 +0000
Subject: [PATCH 08/35] assets/scripts.js: Track time and moments properly

WIP.

- Fixes a family of bugs such as pausing the video during a choice
  resulting in the video resuming at the default choice (while still
  paused) after a while.

- Unifies tracking of moments and cleans up redundant code.

- Fixes unnecessary stutter when transitioning between two segments
  that are adjacent in the video file.
---
 assets/scripts.js | 162 ++++++++++++++++++++++------------------------
 1 file changed, 77 insertions(+), 85 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 0ababa7..7a0cffb 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -1,13 +1,15 @@
+// Data
 var segmentMap = SegmentMap;
 var bv = bandersnatch.videos['80988062'].interactiveVideoMoments.value;
 var choicePoints = bv.choicePointNavigatorMetadata.choicePointsMetadata.choicePoints;
 var momentsBySegment = bv.momentsBySegment;
 var segmentGroups = bv.segmentGroups;
+
+// Global mutable state
 var captions = {};
 var currentSegment;
-var currentMoment;
 var nextSegment = null;
-var momentSelected = null;
+var currentMoments = [];
 var persistentState = bv.stateHistory;
 var globalChoices = {};
 
@@ -82,6 +84,8 @@ function findSegment(id) {
 	return id;
 }
 
+/// Returns the segment ID at the given timestamp.
+/// There will be exactly one segment for any timestamp within the video file.
 function getSegmentId(ms) {
 	for (const [k, v] of Object.entries(segmentMap.segments)) {
 		if (ms >= v.startTimeMs && ms < v.endTimeMs) {
@@ -95,16 +99,16 @@ function getSegmentMs(segmentId) {
 	return segmentMap.segments[segmentId].startTimeMs;
 }
 
-function getMoment(ms) {
-	for (const [k, v] of Object.entries(momentsBySegment)) {
-		for (let r of v)
-			if (r.type == 'scene:cs_bs') {
-				if (ms >= r.startMs && ms < r.endMs) {
-					return r;
-				}
-			}
+function getMoments(segmentId, ms) {
+	let result = {};
+	let moments = momentsBySegment[segmentId] || [];
+	for (let i = 0; i < moments.length; i++) {
+		let m = moments[i];
+		if (ms >= m.startMs && ms < m.endMs) {
+			result[segmentId + '-' + i] = m;
+		}
 	}
-	return null;
+	return result;
 }
 
 function newList(id) {
@@ -180,66 +184,75 @@ function addChoices(r) {
 	document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
 }
 
-
-function updateProgressBar(ms, r) {
-	var p = 0;
-
-	if (r && ms > r.startMs && ms < r.endMs) {
-		p = 100 - Math.floor((ms - r.startMs) * 100 / (r.endMs - r.startMs));
+function momentStart(m) {
+	console.log('momentStart', m);
+	if (m.type == 'scene:cs_bs') {
+		addZones(currentSegment);
+		addChoices(m);
 	}
+	applyImpression(m.impressionData);
+}
 
-	document.getElementById("progress").style.width = p + '%';
+function momentUpdate(m, ms) {
+	//console.log('momentUpdate', m);
+	if (m.type == 'scene:cs_bs') {
+		var p = 100 - Math.floor((ms - m.startMs) * 100 / (m.endMs - m.startMs));
+		document.getElementById("progress").style.width = p + '%';
+	}
+}
+
+function momentEnd(m) {
+	console.log('momentEnd', m);
+	if (m.type == 'scene:cs_bs') {
+		setNextSegment(null);
+		addZones(currentSegment);
+		addChoices(0);
+		document.getElementById("progress").style.width = 0;
+	}
 }
 
 var timerId = 0;
 
-var switchFrom = null;
-var switchTo = null;
-
-function ontimeout(nextSegment) {
-	console.log('ontimeout', nextSegment);
-
-	if (switchFrom != currentSegment || switchTo != nextSegment) {
-		playSegment(nextSegment);
-	}
-
-	switchFrom = currentSegment;
-	switchTo = nextSegment;
-}
-
 function ontimeupdate(evt) {
 	var ms = getCurrentMs();
 
 	var segmentId = getSegmentId(ms);
 
-	// ontimeupdate resolution is about a second, better use timer
-	clearTimeout(timerId);
+	// ontimeupdate resolution is about a second. Augment it using timer.
+	if (timerId) {
+		clearTimeout(timerId);
+		timerId = 0;
+	}
 	if (segmentId && nextSegment && nextSegment != segmentId) {
-		var timeLeft = SegmentMap.segments[segmentId].endTimeMs - ms;
-		timerId = setTimeout(ontimeout, timeLeft, nextSegment);
+		var timeLeft = segmentMap.segments[segmentId].endTimeMs - ms;
+		timerId = setTimeout(ontimeupdate, timeLeft);
 	}
 
 	if (currentSegment != segmentId) {
 		console.log('ontimeupdate', currentSegment, segmentId, ms, msToString(ms));
-		currentSegment = segmentId;
-		addZones(segmentId);
-		currentMoment = null;
-		addChoices(0);
+		// Distinguish between the user seeking manually with <video> controls,
+		// from the video playing past the current segment end.
+		if (ms > segmentMap.segments[currentSegment].endTimeMs &&
+			ms < segmentMap.segments[currentSegment].endTimeMs + 2000) {
+			// TODO: activate and apply user choice (whether or not it
+			// was default) instead of just playing the next segment.
+			playSegment(nextSegment, true);
+		} else {
+			playSegment(segmentId, true);
+		}
 	}
 
-	var r = getMoment(ms);
-	if (r && momentSelected != r.id) {
-		updateProgressBar(ms, r);
-		if (currentMoment != r.id) {
-			currentMoment = r.id;
-			console.log('interaction', currentMoment);
-			addChoices(r);
-		}
-	} else {
-		currentMoment = null;
-		addChoices(0);
-		updateProgressBar(0);
-	}
+	var moments = getMoments(segmentId, ms);
+	for (let k in currentMoments)
+		if (!(k in moments))
+			momentEnd(currentMoments[k]);
+	for (let k in currentMoments)
+		if (k in moments)
+			momentUpdate(currentMoments[k], ms);
+	for (let k in moments)
+		if (!(k in currentMoments))
+			momentStart(moments[k]);
+	currentMoments = moments;
 }
 
 function jumpForward() {
@@ -379,19 +392,13 @@ function seek(ms) {
 function choice(choiceId, text, id) {
 	var segmentId = findSegment(choiceId);
 	console.log('choice', choiceId, 'nextSegment', segmentId);
-	applyImpression(globalChoices[id]);
+	applyImpression(globalChoices[id].impressionData);
 	setNextSegment(segmentId, text);
 	momentSelected = choiceId;
 	addChoices(0);
 }
 
-function applyImpression(obj) {
-	if (!obj) {
-		return;
-	}
-
-	var impressionData = obj.impressionData;
-
+function applyImpression(impressionData) {
 	if (impressionData && impressionData.type == 'userState') {
 		for (const [variable, value] of Object.entries(impressionData.data.persistent)) {
 			console.log('persistentState set', variable, '=', value);
@@ -400,31 +407,16 @@ function applyImpression(obj) {
 	}
 }
 
-function applyPlaybackImpression(segmentId) {
-	let moments = momentsBySegment[segmentId];
-
-	if (!moments) {
-		console.log('warning - no moments');
-		return;
-	}
-
-	for (let moment of moments) {
-		if (moment.type != 'notification:playbackImpression') {
-			continue;
-		}
-
-		applyImpression(moment);
-	}
-}
-
-function playSegment(segmentId) {
-	clearTimeout(timerId);
+function playSegment(segmentId, noSeek) {
 	if (!segmentId || typeof segmentId === "undefined")
 		segmentId = segmentMap.initialSegment;
-	console.log('playSegment', segmentId);
-	applyPlaybackImpression(segmentId);
-	location.hash = segmentId;
+	console.log('playSegment', currentSegment, '->', segmentId);
 	document.title = 'Bandersnatch - Chapter ' + segmentId;
-	var ms = getSegmentMs(segmentId);
-	seek(ms);
+	var oldSegment = getSegmentId(getCurrentMs());
+	currentSegment = segmentId;
+	location.hash = segmentId;
+	if (!noSeek || oldSegment != segmentId) {
+		var ms = getSegmentMs(segmentId);
+		seek(ms);
+	}
 }

From 350a2caead1e2dfda82fb91ac5b156b29df1b13e Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 00:30:18 +0000
Subject: [PATCH 09/35] assets/scripts.js: Fix undefined error for choices
 without descriptions

---
 assets/scripts.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 7a0cffb..920a569 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -181,7 +181,8 @@ function addChoices(r) {
 		index++;
 	}
 
-	document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
+	if (r.id in choicePoints)
+		document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
 }
 
 function momentStart(m) {

From 588036f80e2f7c4b0d1df36e3be6a840cf7fb195 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 00:47:38 +0000
Subject: [PATCH 10/35] assets/scripts.js: Rename generateJs to
 preconditionToJS

---
 assets/scripts.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 920a569..fe89365 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -21,21 +21,21 @@ function getCurrentMs() {
 	return Math.round(document.getElementById("video").currentTime * 1000.0);
 }
 
-function generateJs(cond) {
+function preconditionToJS(cond) {
 	if (cond[0] == 'persistentState') {
 		return '!!persistentState["' + cond[1] + '"]';
 	} else if (cond[0] == 'not') {
-		return '!(' + generateJs(cond[1]) + ')';
+		return '!(' + preconditionToJS(cond[1]) + ')';
 	} else if (cond[0] == 'and') {
 		let conds = [];
 		for (let i = 1; i < cond.length; i++) {
-			conds.push('(' + generateJs(cond[i]) + ')');
+			conds.push('(' + preconditionToJS(cond[i]) + ')');
 		}
 		return '(' + conds.join(' && ') + ')';
 	} else if (cond[0] == 'or') {
 		let conds = [];
 		for (let i = 1; i < cond.length; i++) {
-			conds.push('(' + generateJs(cond[i]) + ')');
+			conds.push('(' + preconditionToJS(cond[i]) + ')');
 		}
 		return '(' + conds.join(' || ') + ')';
 	} else {
@@ -48,7 +48,7 @@ function checkPrecondition(segmentId) {
 	let precondition = bv.preconditions[segmentId];
 
 	if (precondition) {
-		let cond = generateJs(precondition);
+		let cond = preconditionToJS(precondition);
 		let match = eval(cond);
 
 		console.log(cond, '==', match);

From b4e04bccd1c6c87bd9a62b5ee4011e46ddf0c183 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 01:14:19 +0000
Subject: [PATCH 11/35] assets/scripts.js: Improve handling of seeking

- Don't apply impressions when the player seeks into moments with
  impression data

- Fix false positives when seeking within the first few seconds of a
  segment
---
 assets/scripts.js | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index fe89365..4b2be9a 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -185,13 +185,14 @@ function addChoices(r) {
 		document.getElementById("choiceCaption").innerHTML = choicePoints[r.id].description;
 }
 
-function momentStart(m) {
-	console.log('momentStart', m);
+function momentStart(m, seeked) {
+	console.log('momentStart', m, seeked);
 	if (m.type == 'scene:cs_bs') {
 		addZones(currentSegment);
 		addChoices(m);
 	}
-	applyImpression(m.impressionData);
+	if (!seeked)
+		applyImpression(m.impressionData);
 }
 
 function momentUpdate(m, ms) {
@@ -202,8 +203,8 @@ function momentUpdate(m, ms) {
 	}
 }
 
-function momentEnd(m) {
-	console.log('momentEnd', m);
+function momentEnd(m, seeked) {
+	console.log('momentEnd', m, seeked);
 	if (m.type == 'scene:cs_bs') {
 		setNextSegment(null);
 		addZones(currentSegment);
@@ -213,6 +214,7 @@ function momentEnd(m) {
 }
 
 var timerId = 0;
+var lastMs = 0;
 
 function ontimeupdate(evt) {
 	var ms = getCurrentMs();
@@ -229,30 +231,33 @@ function ontimeupdate(evt) {
 		timerId = setTimeout(ontimeupdate, timeLeft);
 	}
 
+	// Distinguish between the user seeking manually with <video> controls,
+	// and the video playing normally (past some timestamp / boundary).
+	let timeElapsed = ms - lastMs;
+	let seeked = timeElapsed >= 0 && timeElapsed < 2000;
+	lastMs = ms;
+
 	if (currentSegment != segmentId) {
 		console.log('ontimeupdate', currentSegment, segmentId, ms, msToString(ms));
-		// Distinguish between the user seeking manually with <video> controls,
-		// from the video playing past the current segment end.
-		if (ms > segmentMap.segments[currentSegment].endTimeMs &&
-			ms < segmentMap.segments[currentSegment].endTimeMs + 2000) {
+		if (seeked) {
+			playSegment(segmentId, true);
+		} else {
 			// TODO: activate and apply user choice (whether or not it
 			// was default) instead of just playing the next segment.
 			playSegment(nextSegment, true);
-		} else {
-			playSegment(segmentId, true);
 		}
 	}
 
 	var moments = getMoments(segmentId, ms);
 	for (let k in currentMoments)
 		if (!(k in moments))
-			momentEnd(currentMoments[k]);
+			momentEnd(currentMoments[k], seeked);
 	for (let k in currentMoments)
 		if (k in moments)
 			momentUpdate(currentMoments[k], ms);
 	for (let k in moments)
 		if (!(k in currentMoments))
-			momentStart(moments[k]);
+			momentStart(moments[k], seeked);
 	currentMoments = moments;
 }
 
@@ -387,6 +392,7 @@ function seek(ms) {
 	clearTimeout(timerId);
 	console.log('seek', ms);
 	momentSelected = null;
+	lastMs = ms;
 	document.getElementById("video").currentTime = ms / 1000.0;
 }
 

From c5fafb4c16cc38386931d66ef426c8ff1235177f Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 01:27:28 +0000
Subject: [PATCH 12/35] assets/scripts.js: Allow jumping to a chapter by
 setting the hash

---
 assets/scripts.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 4b2be9a..702369e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -382,9 +382,11 @@ window.onload = function() {
 		}
 	};
 
-	if (location.hash) {
-		var segmentId = location.hash.slice(1);
-		playSegment(segmentId);
+	window.onhashchange = function() {
+		playHash(window.location.hash);
+	};
+	if (window.location.hash) {
+		playHash(window.location.hash);
 	}
 };
 
@@ -427,3 +429,14 @@ function playSegment(segmentId, noSeek) {
 		seek(ms);
 	}
 }
+
+function playHash(hash) {
+	if (hash) {
+		let loc = hash.slice(1).split('/');
+		let segmentId = loc[0];
+		if (loc.length > 1)
+			seek(momentsBySegment[segmentId][loc[1]].startMs);
+		else
+			seek(getSegmentMs(segmentId));
+	}
+}

From 363b1e32a8fd4f95be1bf9da36b2dae5ad421ac2 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 01:49:29 +0000
Subject: [PATCH 13/35] assets/scripts.js: Improve title and hash updates

- Update them when the playback position changes by any means, not
  just when playing a certain chapter

- Include moments (choices) in hash and title

- Use choice descriptions in titles

- Allow meaningful back/forward navigation through chapters and choices
---
 assets/scripts.js | 56 ++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 702369e..fbb9db1 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -105,7 +105,7 @@ function getMoments(segmentId, ms) {
 	for (let i = 0; i < moments.length; i++) {
 		let m = moments[i];
 		if (ms >= m.startMs && ms < m.endMs) {
-			result[segmentId + '-' + i] = m;
+			result[segmentId + '/' + i] = m;
 		}
 	}
 	return result;
@@ -218,7 +218,6 @@ var lastMs = 0;
 
 function ontimeupdate(evt) {
 	var ms = getCurrentMs();
-
 	var segmentId = getSegmentId(ms);
 
 	// ontimeupdate resolution is about a second. Augment it using timer.
@@ -237,6 +236,9 @@ function ontimeupdate(evt) {
 	let seeked = timeElapsed >= 0 && timeElapsed < 2000;
 	lastMs = ms;
 
+	// Recalculate title and hash only when we pass some meaningful timestamp.
+	let placeChanged = false;
+
 	if (currentSegment != segmentId) {
 		console.log('ontimeupdate', currentSegment, segmentId, ms, msToString(ms));
 		if (seeked) {
@@ -246,19 +248,54 @@ function ontimeupdate(evt) {
 			// was default) instead of just playing the next segment.
 			playSegment(nextSegment, true);
 		}
+		currentSegment = segmentId;
+		placeChanged = true;
 	}
 
 	var moments = getMoments(segmentId, ms);
 	for (let k in currentMoments)
-		if (!(k in moments))
+		if (!(k in moments)) {
 			momentEnd(currentMoments[k], seeked);
+			placeChanged = true;
+		}
 	for (let k in currentMoments)
 		if (k in moments)
 			momentUpdate(currentMoments[k], ms);
 	for (let k in moments)
-		if (!(k in currentMoments))
+		if (!(k in currentMoments)) {
 			momentStart(moments[k], seeked);
+			placeChanged = true;
+		}
 	currentMoments = moments;
+
+	if (placeChanged) {
+		let title = 'Bandersnatch';
+		title += ' - Chapter ' + segmentId;
+		for (let k in moments) {
+			let m = moments[k];
+			if (m.type.substr(0, 6) == 'scene:') {
+				if (m.id && m.id in choicePoints && choicePoints[m.id].description)
+					title += ' - Choice "' + choicePoints[m.id].description + '"';
+				else
+					title += ' - Choice ' + (m.id || k);
+			}
+		}
+		document.title = title;
+
+		let hash = segmentId;
+		// Pick the moment which starts closer to the current timestamp.
+		let bestMomentStart = segmentMap.segments[segmentId].startTimeMs;
+		for (let k in moments) {
+			let m = moments[k];
+			if (m.startMs > bestMomentStart) {
+				hash = k;
+				bestMomentStart = m.startMs;
+			}
+		}
+		hash = '#' + hash;
+		lastHash = hash; // suppress onhashchange event
+		location.hash = hash;
+	}
 }
 
 function jumpForward() {
@@ -395,6 +432,7 @@ function seek(ms) {
 	console.log('seek', ms);
 	momentSelected = null;
 	lastMs = ms;
+	currentSegment = getSegmentId(ms);
 	document.getElementById("video").currentTime = ms / 1000.0;
 }
 
@@ -419,18 +457,20 @@ function applyImpression(impressionData) {
 function playSegment(segmentId, noSeek) {
 	if (!segmentId || typeof segmentId === "undefined")
 		segmentId = segmentMap.initialSegment;
-	console.log('playSegment', currentSegment, '->', segmentId);
-	document.title = 'Bandersnatch - Chapter ' + segmentId;
 	var oldSegment = getSegmentId(getCurrentMs());
-	currentSegment = segmentId;
-	location.hash = segmentId;
+	console.log('playSegment', oldSegment, '->', segmentId);
 	if (!noSeek || oldSegment != segmentId) {
 		var ms = getSegmentMs(segmentId);
 		seek(ms);
 	}
 }
 
+var lastHash = '';
 function playHash(hash) {
+	// console.log('playHash', lastHash, '->', hash);
+	if (hash == lastHash)
+		return;
+	lastHash = hash;
 	if (hash) {
 		let loc = hash.slice(1).split('/');
 		let segmentId = loc[0];

From 776c2d1aaa6805b2695806a7c94b61ef732422d8 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 01:58:49 +0000
Subject: [PATCH 14/35] assets/scripts.js: Allow #t12345 hash syntax

Similar to YouTube's ?t=12345.

Mostly for debugging.
---
 assets/scripts.js | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index fbb9db1..362d45a 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -472,11 +472,16 @@ function playHash(hash) {
 		return;
 	lastHash = hash;
 	if (hash) {
-		let loc = hash.slice(1).split('/');
-		let segmentId = loc[0];
-		if (loc.length > 1)
-			seek(momentsBySegment[segmentId][loc[1]].startMs);
-		else
-			seek(getSegmentMs(segmentId));
+		hash = hash.slice(1);
+		if (hash[0] == 't')
+			seek(Number(Math.round(hash.slice(1) * 1000.0)));
+		else {
+			let loc = hash.split('/');
+			let segmentId = loc[0];
+			if (loc.length > 1)
+				seek(momentsBySegment[segmentId][loc[1]].startMs);
+			else
+				seek(getSegmentMs(segmentId));
+		}
 	}
 }

From 925d950efb4c82d7464a306335dd527658494b11 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 03:07:18 +0000
Subject: [PATCH 15/35] assets/scripts.js: Fix playing hash + pre-specified
 video src

---
 assets/scripts.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 362d45a..d624d34 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -367,7 +367,10 @@ window.onload = function() {
 	var file_selector = document.getElementById("file-selector");
 	function startPlayback() {
 		file_selector.style.display = 'none';
-		playSegment(null);
+		if (window.location.hash)
+			playHash(window.location.hash);
+		else
+			playSegment(null);
 		video_selector.play();
 	}
 	if (video_source_selector.getAttribute("src") == '') {
@@ -422,9 +425,6 @@ window.onload = function() {
 	window.onhashchange = function() {
 		playHash(window.location.hash);
 	};
-	if (window.location.hash) {
-		playHash(window.location.hash);
-	}
 };
 
 function seek(ms) {

From 9367a9fba9a82f53fdc00e66155bb4869bb567fd Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 03:22:09 +0000
Subject: [PATCH 16/35] assets/scripts.js: Add up/down keys to speed up/slow
 down video

Again, useful for debugging.
---
 assets/scripts.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index d624d34..1c5762d 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -414,12 +414,14 @@ window.onload = function() {
 	document.onkeydown = function (e) {
 		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)
 			return;
-		if (e.key == 'ArrowLeft') {
+		if (e.key == 'ArrowLeft')
 			jumpBack();
-		}
-		if (e.key == 'ArrowRight') {
+		if (e.key == 'ArrowRight')
 			jumpForward();
-		}
+		if (e.key == 'ArrowUp')
+			video_selector.playbackRate = video_selector.playbackRate * 2.0;
+		if (e.key == 'ArrowDown')
+			video_selector.playbackRate = video_selector.playbackRate / 2.0;
 	};
 
 	window.onhashchange = function() {

From ab29b0e5c8caa1cf4778e3f2887782aa860e6270 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 03:58:16 +0000
Subject: [PATCH 17/35] assets/scripts.js: More seek/timing logic fixes

---
 assets/scripts.js | 52 ++++++++++++++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 1c5762d..72e19cd 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -215,47 +215,60 @@ function momentEnd(m, seeked) {
 
 var timerId = 0;
 var lastMs = 0;
+var lastSegment = null;
+var segmentTransition = false;
 
 function ontimeupdate(evt) {
 	var ms = getCurrentMs();
-	var segmentId = getSegmentId(ms);
+	currentSegment = getSegmentId(ms);
 
 	// ontimeupdate resolution is about a second. Augment it using timer.
 	if (timerId) {
 		clearTimeout(timerId);
 		timerId = 0;
 	}
-	if (segmentId && nextSegment && nextSegment != segmentId) {
-		var timeLeft = segmentMap.segments[segmentId].endTimeMs - ms;
+	if (currentSegment && nextSegment && nextSegment != currentSegment) {
+		var timeLeft = segmentMap.segments[currentSegment].endTimeMs - ms;
 		timerId = setTimeout(ontimeupdate, timeLeft);
 	}
 
 	// Distinguish between the user seeking manually with <video> controls,
 	// and the video playing normally (past some timestamp / boundary).
 	let timeElapsed = ms - lastMs;
-	let seeked = timeElapsed >= 0 && timeElapsed < 2000;
+	let seeked = timeElapsed < 0 || timeElapsed >= 2000;
 	lastMs = ms;
 
 	// Recalculate title and hash only when we pass some meaningful timestamp.
 	let placeChanged = false;
 
-	if (currentSegment != segmentId) {
-		console.log('ontimeupdate', currentSegment, segmentId, ms, msToString(ms));
-		if (seeked) {
-			playSegment(segmentId, true);
-		} else {
+	// Handle segment change
+	if (lastSegment != currentSegment) {
+		console.log('ontimeupdate', lastSegment, '->', currentSegment, ms, msToString(ms), seeked);
+		lastSegment = currentSegment;
+		if (!seeked) {
 			// TODO: activate and apply user choice (whether or not it
 			// was default) instead of just playing the next segment.
-			playSegment(nextSegment, true);
+			segmentTransition = true;
+			if (playSegment(nextSegment, true)) {
+				// playSegment decided to seek, which means that this
+				// currentSegment is invalid, and a recursive
+				// ontimeupdate invocation should have taken care of
+				// things already. Return.
+				return;
+			}
 		}
-		currentSegment = segmentId;
+		setNextSegment(null);
+		addZones(currentSegment);
 		placeChanged = true;
 	}
 
-	var moments = getMoments(segmentId, ms);
+	var naturalTransition = !seeked || segmentTransition;
+	segmentTransition = false;
+
+	var moments = getMoments(currentSegment, ms);
 	for (let k in currentMoments)
 		if (!(k in moments)) {
-			momentEnd(currentMoments[k], seeked);
+			momentEnd(currentMoments[k], !naturalTransition);
 			placeChanged = true;
 		}
 	for (let k in currentMoments)
@@ -263,14 +276,14 @@ function ontimeupdate(evt) {
 			momentUpdate(currentMoments[k], ms);
 	for (let k in moments)
 		if (!(k in currentMoments)) {
-			momentStart(moments[k], seeked);
+			momentStart(moments[k], !naturalTransition);
 			placeChanged = true;
 		}
 	currentMoments = moments;
 
 	if (placeChanged) {
 		let title = 'Bandersnatch';
-		title += ' - Chapter ' + segmentId;
+		title += ' - Chapter ' + currentSegment;
 		for (let k in moments) {
 			let m = moments[k];
 			if (m.type.substr(0, 6) == 'scene:') {
@@ -282,9 +295,9 @@ function ontimeupdate(evt) {
 		}
 		document.title = title;
 
-		let hash = segmentId;
+		let hash = currentSegment;
 		// Pick the moment which starts closer to the current timestamp.
-		let bestMomentStart = segmentMap.segments[segmentId].startTimeMs;
+		let bestMomentStart = segmentMap.segments[currentSegment].startTimeMs;
 		for (let k in moments) {
 			let m = moments[k];
 			if (m.startMs > bestMomentStart) {
@@ -433,9 +446,8 @@ function seek(ms) {
 	clearTimeout(timerId);
 	console.log('seek', ms);
 	momentSelected = null;
-	lastMs = ms;
-	currentSegment = getSegmentId(ms);
 	document.getElementById("video").currentTime = ms / 1000.0;
+	ontimeupdate(null);
 }
 
 function choice(choiceId, text, id) {
@@ -464,7 +476,9 @@ function playSegment(segmentId, noSeek) {
 	if (!noSeek || oldSegment != segmentId) {
 		var ms = getSegmentMs(segmentId);
 		seek(ms);
+		return true;
 	}
+	return false;
 }
 
 var lastHash = '';

From 783db22881a5dffc66594114eb7f9b88b008864c Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 03:58:26 +0000
Subject: [PATCH 18/35] assets/scripts.js: Show choices on game-over screens,
 too

---
 assets/scripts.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 72e19cd..8ca5279 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -187,8 +187,7 @@ function addChoices(r) {
 
 function momentStart(m, seeked) {
 	console.log('momentStart', m, seeked);
-	if (m.type == 'scene:cs_bs') {
-		addZones(currentSegment);
+	if (m.choices) {
 		addChoices(m);
 	}
 	if (!seeked)
@@ -197,7 +196,7 @@ function momentStart(m, seeked) {
 
 function momentUpdate(m, ms) {
 	//console.log('momentUpdate', m);
-	if (m.type == 'scene:cs_bs') {
+	if (m.choices) {
 		var p = 100 - Math.floor((ms - m.startMs) * 100 / (m.endMs - m.startMs));
 		document.getElementById("progress").style.width = p + '%';
 	}
@@ -205,9 +204,7 @@ function momentUpdate(m, ms) {
 
 function momentEnd(m, seeked) {
 	console.log('momentEnd', m, seeked);
-	if (m.type == 'scene:cs_bs') {
-		setNextSegment(null);
-		addZones(currentSegment);
+	if (m.choices) {
 		addChoices(0);
 		document.getElementById("progress").style.width = 0;
 	}

From ea6ff3f69ea82a3031a88359bf735b3620184d98 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 04:33:23 +0000
Subject: [PATCH 19/35] assets/scripts.js: Use moments for right key

Allows stopping at false interactions (e.g. 2B/1).
---
 assets/scripts.js | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 8ca5279..7d1b35e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -311,17 +311,13 @@ function ontimeupdate(evt) {
 function jumpForward() {
 	var ms = getCurrentMs();
 	var segmentId = getSegmentId(ms);
-	var v = segmentMap.segments[segmentId];
 
 	var interactionMs = 0;
-	if (v && v.ui && v.ui.interactionZones) {
-		for (var z of v.ui.interactionZones) {
-			var startMs = z[0];
-			var stopMs = z[1];
-			if (ms < startMs)
-				interactionMs = startMs;
-		}
-	}
+	let moments = momentsBySegment[segmentId] || [];
+	// Find the earliest moment within this segment
+	for (let m of moments)
+		if (m.startMs >= ms && (interactionMs == 0 || m.startMs < interactionMs))
+			interactionMs = m.startMs;
 
 	if (interactionMs) {
 		seek(interactionMs);

From 7989e92f2b086bb6abb4fbce83b7596e05243ee4 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 04:37:36 +0000
Subject: [PATCH 20/35] assets/scripts.js: Fix Space not unpausing with visible
 controls

When the video controls are visible, the video is paused, and the
video element is focused, pressing Space would unpause the video and
then immediately pause it again.
---
 assets/scripts.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/assets/scripts.js b/assets/scripts.js
index 7d1b35e..dec8f84 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -416,6 +416,10 @@ window.onload = function() {
 		if (e.code == 'Space')
 			togglePlayPause();
 	};
+	video_selector.onkeydown = function(e) {
+		if (e.code == 'Space')
+			e.preventDefault();
+	};
 
 	document.onkeydown = function (e) {
 		if (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)

From 336a65f31a4d83ee196cc9bf95100cc4d6552a0f Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 04:40:17 +0000
Subject: [PATCH 21/35] assets/scripts.js: Pause and unpause on click

- By placing the event handler on the video element, we ensure we don't
  receive it when a choice item was clicked.

- Use preventDefault to avoid the pause-and-immediately-unpause
  problem due to the video element itself also handling the event.
---
 assets/scripts.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index dec8f84..2e4906e 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -398,12 +398,9 @@ window.onload = function() {
 
 	var c = document.getElementById("c");
 	c.ondblclick = toggleFullScreen;
-	c.onclick = function () {
-		// can't togglePlayPause here, choice buttons stop the video
-		// should use preventdefault or something
-		// use spacebar for now
-		// mind that autoplay is disabled in latest chrome, so play after click
-		document.getElementById("video").play();
+	video_selector.onclick = function (e) {
+		togglePlayPause();
+		e.preventDefault();
 	};
 
 	document.onkeypress = function (e) {

From 449e1120407ac9c070b1ae25cbaf401b9fca35b6 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 05:24:03 +0000
Subject: [PATCH 22/35] assets/scripts.js: Make persistent state actually
 persistent

Use localStorage to save persistent variables.
---
 assets/scripts.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 2e4906e..10d116a 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -10,9 +10,11 @@ var captions = {};
 var currentSegment;
 var nextSegment = null;
 var currentMoments = [];
-var persistentState = bv.stateHistory;
 var globalChoices = {};
 
+// Persistent state
+var ls = window.localStorage || {};
+
 function msToString(ms) {
 	return new Date(ms).toUTCString().split(' ')[4];
 }
@@ -23,7 +25,7 @@ function getCurrentMs() {
 
 function preconditionToJS(cond) {
 	if (cond[0] == 'persistentState') {
-		return '!!persistentState["' + cond[1] + '"]';
+		return 'JSON.parse(ls["persistentState_' + cond[1] + '"])';
 	} else if (cond[0] == 'not') {
 		return '!(' + preconditionToJS(cond[1]) + ')';
 	} else if (cond[0] == 'and') {
@@ -457,7 +459,7 @@ function applyImpression(impressionData) {
 	if (impressionData && impressionData.type == 'userState') {
 		for (const [variable, value] of Object.entries(impressionData.data.persistent)) {
 			console.log('persistentState set', variable, '=', value);
-			persistentState[variable] = value;
+			ls["persistentState_" + variable] = JSON.stringify(value);
 		}
 	}
 }

From bc5a6bf2b98bfe4baab641f5a328abc810eeeb30 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 05:28:46 +0000
Subject: [PATCH 23/35] assets/scripts.js: Clean up some global variables

---
 assets/scripts.js | 47 +++++++++++++++++++++++------------------------
 1 file changed, 23 insertions(+), 24 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 10d116a..9307e0b 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -5,13 +5,6 @@ var choicePoints = bv.choicePointNavigatorMetadata.choicePointsMetadata.choicePo
 var momentsBySegment = bv.momentsBySegment;
 var segmentGroups = bv.segmentGroups;
 
-// Global mutable state
-var captions = {};
-var currentSegment;
-var nextSegment = null;
-var currentMoments = [];
-var globalChoices = {};
-
 // Persistent state
 var ls = window.localStorage || {};
 
@@ -130,6 +123,8 @@ function addItem(ul, text, url) {
 	ul.appendChild(li);
 }
 
+var nextSegment = null;
+
 function setNextSegment(segmentId, comment) {
 	console.log('setNextSegment', segmentId, comment);
 	nextSegment = segmentId;
@@ -158,7 +153,7 @@ function addZones(segmentId) {
 
 	ul = newList("nextSegments");
 	for (const [k, v] of Object.entries(segmentMap.segments[segmentId].next)) {
-		let caption = captions[k] ? captions[k] : k;
+		let caption = k;
 		if (segmentMap.segments[segmentId].defaultNext == k) {
 			caption = '[' + caption + ']';
 			setNextSegment(k);
@@ -167,6 +162,8 @@ function addZones(segmentId) {
 	}
 }
 
+var globalChoices = {};
+
 function addChoices(r) {
 	var ul = newList("choices");
 	document.getElementById("choiceCaption").innerHTML = '';
@@ -214,8 +211,10 @@ function momentEnd(m, seeked) {
 
 var timerId = 0;
 var lastMs = 0;
+var currentSegment;
 var lastSegment = null;
 var segmentTransition = false;
+var lastMoments = [];
 
 function ontimeupdate(evt) {
 	var ms = getCurrentMs();
@@ -264,27 +263,27 @@ function ontimeupdate(evt) {
 	var naturalTransition = !seeked || segmentTransition;
 	segmentTransition = false;
 
-	var moments = getMoments(currentSegment, ms);
-	for (let k in currentMoments)
-		if (!(k in moments)) {
-			momentEnd(currentMoments[k], !naturalTransition);
-			placeChanged = true;
-		}
-	for (let k in currentMoments)
-		if (k in moments)
-			momentUpdate(currentMoments[k], ms);
-	for (let k in moments)
+	var currentMoments = getMoments(currentSegment, ms);
+	for (let k in lastMoments)
 		if (!(k in currentMoments)) {
-			momentStart(moments[k], !naturalTransition);
+			momentEnd(lastMoments[k], !naturalTransition);
 			placeChanged = true;
 		}
-	currentMoments = moments;
+	for (let k in lastMoments)
+		if (k in currentMoments)
+			momentUpdate(lastMoments[k], ms);
+	for (let k in currentMoments)
+		if (!(k in lastMoments)) {
+			momentStart(currentMoments[k], !naturalTransition);
+			placeChanged = true;
+		}
+	lastMoments = currentMoments;
 
 	if (placeChanged) {
 		let title = 'Bandersnatch';
 		title += ' - Chapter ' + currentSegment;
-		for (let k in moments) {
-			let m = moments[k];
+		for (let k in currentMoments) {
+			let m = currentMoments[k];
 			if (m.type.substr(0, 6) == 'scene:') {
 				if (m.id && m.id in choicePoints && choicePoints[m.id].description)
 					title += ' - Choice "' + choicePoints[m.id].description + '"';
@@ -297,8 +296,8 @@ function ontimeupdate(evt) {
 		let hash = currentSegment;
 		// Pick the moment which starts closer to the current timestamp.
 		let bestMomentStart = segmentMap.segments[currentSegment].startTimeMs;
-		for (let k in moments) {
-			let m = moments[k];
+		for (let k in currentMoments) {
+			let m = currentMoments[k];
 			if (m.startMs > bestMomentStart) {
 				hash = k;
 				bestMomentStart = m.startMs;

From 57166f7daadb33d36a0e7b59a16a38f6b41b21f2 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 05:38:41 +0000
Subject: [PATCH 24/35] assets/scripts.js: Remember and restore playback
 position when reopening

Just like the real thing.
---
 assets/scripts.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/assets/scripts.js b/assets/scripts.js
index 9307e0b..4861f0c 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -306,6 +306,7 @@ function ontimeupdate(evt) {
 		hash = '#' + hash;
 		lastHash = hash; // suppress onhashchange event
 		location.hash = hash;
+		ls.place = hash;
 	}
 }
 
@@ -376,6 +377,8 @@ window.onload = function() {
 		file_selector.style.display = 'none';
 		if (window.location.hash)
 			playHash(window.location.hash);
+		else if (ls.place)
+			playHash(ls.place);
 		else
 			playSegment(null);
 		video_selector.play();

From 39c3144e4cde185ab75a0fbfff14a0a4fa5ab8f4 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 06:01:13 +0000
Subject: [PATCH 25/35] assets/scripts.js: Improve timer logic

Use end of ongoing moments and start of upcoming moments too.
---
 assets/scripts.js | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 4861f0c..3110b06 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -220,15 +220,10 @@ function ontimeupdate(evt) {
 	var ms = getCurrentMs();
 	currentSegment = getSegmentId(ms);
 
-	// ontimeupdate resolution is about a second. Augment it using timer.
 	if (timerId) {
 		clearTimeout(timerId);
 		timerId = 0;
 	}
-	if (currentSegment && nextSegment && nextSegment != currentSegment) {
-		var timeLeft = segmentMap.segments[currentSegment].endTimeMs - ms;
-		timerId = setTimeout(ontimeupdate, timeLeft);
-	}
 
 	// Distinguish between the user seeking manually with <video> controls,
 	// and the video playing normally (past some timestamp / boundary).
@@ -308,6 +303,20 @@ function ontimeupdate(evt) {
 		location.hash = hash;
 		ls.place = hash;
 	}
+
+	// ontimeupdate resolution is about a second. Augment it using timer.
+	let nextEvent = segmentMap.segments[currentSegment].endTimeMs;
+	for (let k in currentMoments) {
+		let m = currentMoments[k];
+		if (m.endMs < nextEvent)
+			nextEvent = m.endMs;
+	}
+	for (let m of momentsBySegment[currentSegment] || [])
+		if (ms < m.startMs && m.startMs < nextEvent)
+			nextEvent = m.startMs;
+	var timeLeft = nextEvent - ms;
+	if (timeLeft > 0)
+		timerId = setTimeout(ontimeupdate, timeLeft);
 }
 
 function jumpForward() {

From d5b63699fed7873d06b781f73f6011466898628b Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 06:03:47 +0000
Subject: [PATCH 26/35] assets/scripts.js: Make choice timer bar animation
 smoother

It's still not smooth due to the ontimeupdate rate limit, but at least
it's less choppy (moves at a consistent speed).
---
 assets/scripts.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 3110b06..8a8e751 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -196,7 +196,7 @@ function momentStart(m, seeked) {
 function momentUpdate(m, ms) {
 	//console.log('momentUpdate', m);
 	if (m.choices) {
-		var p = 100 - Math.floor((ms - m.startMs) * 100 / (m.endMs - m.startMs));
+		var p = 100 - ((ms - m.startMs) * 100.0 / (m.endMs - m.startMs));
 		document.getElementById("progress").style.width = p + '%';
 	}
 }

From 2fce7361e9ada58bfad0c4db3d099a34f54fa6e5 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 06:05:55 +0000
Subject: [PATCH 27/35] index.html: Disable looping

Pointless in this case.

Avoid inadvertently resetting all variables upon reaching the credits screen.
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index d676070..1906e04 100644
--- a/index.html
+++ b/index.html
@@ -77,7 +77,7 @@
 
 				</div>
 				<div id="wrapper-video">
-					<video id="video" loop preload="metadata">
+					<video id="video" preload="metadata">
 						<source id="video-source" src="">
 						<track label="English" kind="subtitles" srclang="en"
 							src="subtitle/Black.Mirror.Bandersnatch.2018.WEBRip.x264-NoGRP.vtt" default>

From e7b80f431ae009b2784229a7a25c8d404769b92e Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 07:10:53 +0000
Subject: [PATCH 28/35] assets/scripts.js: Improve choice handling

- Apply effects of the default choice even if the user didn't click
  anything

- Pave way for implementing disableImmediateSceneTransition
---
 assets/scripts.js | 57 ++++++++++++++++++++++++++++-------------------
 1 file changed, 34 insertions(+), 23 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 8a8e751..60518d2 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -123,11 +123,13 @@ function addItem(ul, text, url) {
 	ul.appendChild(li);
 }
 
+var nextChoice = -1;
 var nextSegment = null;
 
 function setNextSegment(segmentId, comment) {
 	console.log('setNextSegment', segmentId, comment);
 	nextSegment = segmentId;
+	nextChoice = -1;
 	var ul = newList("nextSegment");
 	var caption = 'nextSegment: ' + segmentId;
 	addItem(ul, comment ? caption + ' (' + comment + ')' : caption,
@@ -152,31 +154,34 @@ function addZones(segmentId) {
 	}
 
 	ul = newList("nextSegments");
+	let defaultSegmentId = null;
 	for (const [k, v] of Object.entries(segmentMap.segments[segmentId].next)) {
 		let caption = k;
 		if (segmentMap.segments[segmentId].defaultNext == k) {
 			caption = '[' + caption + ']';
-			setNextSegment(k);
+			defaultSegmentId = k;
 		}
 		addItem(ul, caption, 'javascript:playSegment("' + k + '")');
 	}
+	setNextSegment(defaultSegmentId);
 }
 
-var globalChoices = {};
+var currentChoices = [];
 
 function addChoices(r) {
+	currentChoices = [];
+	nextChoice = -1;
 	var ul = newList("choices");
 	document.getElementById("choiceCaption").innerHTML = '';
 	if (!r) return;
+
+	currentChoices = r.choices;
+	nextChoice = r.defaultChoiceIndex;
+
 	let index = 0;
-
 	for (let x of r.choices) {
-		console.log(x.id, 'choice saved');
-		globalChoices[x.id] = x;
-
 		var caption = r.defaultChoiceIndex == index ? '[' + x.text + ']' : x.text;
-		addItem(ul, caption, 'javascript:choice("' +
-			(x.segmentId ? x.segmentId : (x.sg ? x.sg : x.id)) + '", "' + x.text + '", "' + x.id + '")');
+		addItem(ul, caption, 'javascript:choice(' + index + ')');
 		index++;
 	}
 
@@ -239,10 +244,7 @@ function ontimeupdate(evt) {
 		console.log('ontimeupdate', lastSegment, '->', currentSegment, ms, msToString(ms), seeked);
 		lastSegment = currentSegment;
 		if (!seeked) {
-			// TODO: activate and apply user choice (whether or not it
-			// was default) instead of just playing the next segment.
-			segmentTransition = true;
-			if (playSegment(nextSegment, true)) {
+			if (playNextSegment()) {
 				// playSegment decided to seek, which means that this
 				// currentSegment is invalid, and a recursive
 				// ontimeupdate invocation should have taken care of
@@ -250,7 +252,6 @@ function ontimeupdate(evt) {
 				return;
 			}
 		}
-		setNextSegment(null);
 		addZones(currentSegment);
 		placeChanged = true;
 	}
@@ -319,6 +320,22 @@ function ontimeupdate(evt) {
 		timerId = setTimeout(ontimeupdate, timeLeft);
 }
 
+function playNextSegment() {
+	if (nextChoice >= 0) {
+		let x = currentChoices[nextChoice];
+		let choiceId = x.segmentId ? x.segmentId : (x.sg ? x.sg : x.id);
+		var segmentId = findSegment(choiceId);
+		console.log('choice', choiceId, 'nextSegment', segmentId);
+		applyImpression(x.impressionData);
+		nextSegment = segmentId;
+	}
+
+	segmentTransition = true;
+	let segment = nextSegment;
+	nextSegment = null;
+	return playSegment(segment, true);
+}
+
 function jumpForward() {
 	var ms = getCurrentMs();
 	var segmentId = getSegmentId(ms);
@@ -333,7 +350,7 @@ function jumpForward() {
 	if (interactionMs) {
 		seek(interactionMs);
 	} else {
-		playSegment(nextSegment);
+		playNextSegment();
 	}
 }
 
@@ -450,20 +467,14 @@ window.onload = function() {
 };
 
 function seek(ms) {
-	clearTimeout(timerId);
 	console.log('seek', ms);
-	momentSelected = null;
 	document.getElementById("video").currentTime = ms / 1000.0;
 	ontimeupdate(null);
 }
 
-function choice(choiceId, text, id) {
-	var segmentId = findSegment(choiceId);
-	console.log('choice', choiceId, 'nextSegment', segmentId);
-	applyImpression(globalChoices[id].impressionData);
-	setNextSegment(segmentId, text);
-	momentSelected = choiceId;
-	addChoices(0);
+function choice(choiceIndex) {
+	nextChoice = choiceIndex;
+	newList("choices");
 }
 
 function applyImpression(impressionData) {

From d228a13031590576a3f9eaa50ede19c763a774be Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 07:14:57 +0000
Subject: [PATCH 29/35] assets/scripts.js: Implement
 disableImmediateSceneTransition

Allow navigating from dead-end segments without waiting for the
segment to end.
---
 assets/scripts.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 60518d2..ea9fca0 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -166,16 +166,15 @@ function addZones(segmentId) {
 	setNextSegment(defaultSegmentId);
 }
 
-var currentChoices = [];
+var currentChoiceMoment = null;
 
 function addChoices(r) {
-	currentChoices = [];
+	currentChoiceMoment = r;
 	nextChoice = -1;
 	var ul = newList("choices");
 	document.getElementById("choiceCaption").innerHTML = '';
 	if (!r) return;
 
-	currentChoices = r.choices;
 	nextChoice = r.defaultChoiceIndex;
 
 	let index = 0;
@@ -209,7 +208,7 @@ function momentUpdate(m, ms) {
 function momentEnd(m, seeked) {
 	console.log('momentEnd', m, seeked);
 	if (m.choices) {
-		addChoices(0);
+		addChoices(null);
 		document.getElementById("progress").style.width = 0;
 	}
 }
@@ -322,7 +321,7 @@ function ontimeupdate(evt) {
 
 function playNextSegment() {
 	if (nextChoice >= 0) {
-		let x = currentChoices[nextChoice];
+		let x = currentChoiceMoment.choices[nextChoice];
 		let choiceId = x.segmentId ? x.segmentId : (x.sg ? x.sg : x.id);
 		var segmentId = findSegment(choiceId);
 		console.log('choice', choiceId, 'nextSegment', segmentId);
@@ -475,6 +474,8 @@ function seek(ms) {
 function choice(choiceIndex) {
 	nextChoice = choiceIndex;
 	newList("choices");
+	if (!currentChoiceMoment.config.disableImmediateSceneTransition)
+		playNextSegment();
 }
 
 function applyImpression(impressionData) {

From bc81c00be8146dc9d880c5fdf5511a7609e9eb2e Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 07:40:43 +0000
Subject: [PATCH 30/35] Make the left-arrow key do the reverse of the
 right-arrow key

Track how we got to a certain scene through persistent breadcrumbs,
then follow them back to go along the path the user took.
---
 assets/scripts.js | 44 +++++++++++++++++++++++++++++++++++++++-----
 index.html        |  2 +-
 2 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index ea9fca0..17ccb97 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -329,6 +329,10 @@ function playNextSegment() {
 		nextSegment = segmentId;
 	}
 
+	let breadcrumb = 'breadcrumb_' + nextSegment;
+	if (!(breadcrumb in ls))
+		ls[breadcrumb] = lastSegment;
+
 	segmentTransition = true;
 	let segment = nextSegment;
 	nextSegment = null;
@@ -341,7 +345,7 @@ function jumpForward() {
 
 	var interactionMs = 0;
 	let moments = momentsBySegment[segmentId] || [];
-	// Find the earliest moment within this segment
+	// Find the earliest moment within this segment after cursor
 	for (let m of moments)
 		if (m.startMs >= ms && (interactionMs == 0 || m.startMs < interactionMs))
 			interactionMs = m.startMs;
@@ -356,10 +360,40 @@ function jumpForward() {
 function jumpBack() {
 	var ms = getCurrentMs();
 	var segmentId = getSegmentId(ms);
-	var startMs = getSegmentMs(segmentId);
-	var previousSegment = getSegmentId(startMs - 1000);
-	console.log('jumpBack from-to', segmentId, previousSegment);
-	playSegment(previousSegment);
+	let segment = segmentMap.segments[segmentId];
+
+	var interactionMs = 0;
+	let moments = momentsBySegment[segmentId] || [];
+	let inMoment = false;
+	// Find the latest moment within this segment before cursor
+	for (let m of moments) {
+		if (m.endMs < ms && m.startMs > interactionMs)
+			interactionMs = m.startMs;
+		if (m.startMs != segment.startTimeMs && m.startMs <= ms && ms < m.endMs)
+			inMoment = true;
+	}
+
+	if (interactionMs) {
+		seek(interactionMs);
+	} else if (inMoment) {
+		seek(segment.startTimeMs);
+	} else {
+		let breadcrumb = 'breadcrumb_' + segmentId;
+		if (breadcrumb in ls) {
+			// Jump to last moment in previous segment
+			segmentId = ls[breadcrumb];
+			segment = segmentMap.segments[segmentId];
+
+			interactionMs = segment.startTimeMs;
+			let moments = momentsBySegment[segmentId] || [];
+			for (let m of moments)
+				if (m.startMs > interactionMs)
+					interactionMs = m.startMs;
+			seek(interactionMs);
+		} else {
+			seek(0);
+		}
+	}
 }
 
 function toggleFullScreen() {
diff --git a/index.html b/index.html
index 1906e04..d8e3d9b 100644
--- a/index.html
+++ b/index.html
@@ -68,7 +68,7 @@
 								<li><kbd>F</kbd> - Toggle fullscreen</li>
 								<li><kbd>R</kbd> - Restart video</li>
 								<li><kbd>→</kbd> - Jump to the next segment (or to the next interaction zone)</li>
-								<li><kbd>←</kbd> - Jump to the previous segment</li>
+								<li><kbd>←</kbd> - Jump to the previous segment (or interaction zone)</li>
 								<li><kbd>Space</kbd> - Toggle play and pause</li>
 
 							</ul>

From 59782b070700f2d6d4a267ad4d92bd09c3ea2bc2 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 08:16:31 +0000
Subject: [PATCH 31/35] assets/scripts.js: Improve precondition handling

---
 assets/scripts.js | 63 +++++++++++++++++++++++++----------------------
 1 file changed, 34 insertions(+), 29 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 17ccb97..02046b9 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -39,14 +39,14 @@ function preconditionToJS(cond) {
 	}
 }
 
-function checkPrecondition(segmentId) {
-	let precondition = bv.preconditions[segmentId];
+function checkPrecondition(preconditionId) {
+	let precondition = bv.preconditions[preconditionId];
 
 	if (precondition) {
 		let cond = preconditionToJS(precondition);
 		let match = eval(cond);
 
-		console.log(cond, '==', match);
+		console.log(preconditionId, ':', cond, '==', match);
 
 		return match;
 	}
@@ -54,29 +54,29 @@ function checkPrecondition(segmentId) {
 	return true;
 }
 
-function findSegment(id) {
-	if (id.startsWith('nsg-')) {
-		id = id.substr(4);
-	}
-	if (segmentMap.segments[id]) {
-		// check precondition
-		return id;
-	}
-
-	if (segmentGroups[id]) {
-		for (let v of segmentGroups[id]) {
-			if (v.segmentGroup) {
-				return findSegment(v.segmentGroup);
-			} else if (v.segment) {
-				// check precondition
-				return v.segment;
-			} else {
-				if (checkPrecondition(v))
-					return v;
-			}
+function resolveSegmentGroup(sg) {
+	let results = [];
+	for (let v of segmentGroups[sg]) {
+		if (v.precondition) {
+			if (!checkPrecondition(v.precondition))
+				continue;
+		}
+		if (v.segmentGroup) {
+			results.push(resolveSegmentGroup(v.segmentGroup));
+		} else if (v.segment) {
+			// TODO: does the included precondition override or
+			// complement the segment precondition?
+			if (!checkPrecondition(v.segment))
+				continue;
+			results.push(v.segment);
+		} else {
+			if (!checkPrecondition(v))
+				continue;
+			results.push(v);
 		}
 	}
-	return id;
+	console.log('segment group', sg, '=>', results);
+	return results[0];
 }
 
 /// Returns the segment ID at the given timestamp.
@@ -322,11 +322,14 @@ function ontimeupdate(evt) {
 function playNextSegment() {
 	if (nextChoice >= 0) {
 		let x = currentChoiceMoment.choices[nextChoice];
-		let choiceId = x.segmentId ? x.segmentId : (x.sg ? x.sg : x.id);
-		var segmentId = findSegment(choiceId);
-		console.log('choice', choiceId, 'nextSegment', segmentId);
+		if (x.segmentId)
+			nextSegment = x.segmentId;
+		else if (x.sg)
+			nextSegment = resolveSegmentGroup(x.sg);
+		else
+			nextSegment = null;
+		console.log('choice', nextChoice, 'nextSegment', nextSegment);
 		applyImpression(x.impressionData);
-		nextSegment = segmentId;
 	}
 
 	let breadcrumb = 'breadcrumb_' + nextSegment;
@@ -336,7 +339,9 @@ function playNextSegment() {
 	segmentTransition = true;
 	let segment = nextSegment;
 	nextSegment = null;
-	return playSegment(segment, true);
+	if (segment)
+		return playSegment(segment, true);
+	return false;
 }
 
 function jumpForward() {

From 60fd4fa8827c13cd97f9b960cdd09c8a628cf9ff Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 08:21:34 +0000
Subject: [PATCH 32/35] assets/scripts.js: Check moment preconditions

---
 assets/scripts.js | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 02046b9..cf5b874 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -39,21 +39,21 @@ function preconditionToJS(cond) {
 	}
 }
 
-function checkPrecondition(preconditionId) {
-	let precondition = bv.preconditions[preconditionId];
-
+function evalPrecondition(precondition, text) {
 	if (precondition) {
 		let cond = preconditionToJS(precondition);
 		let match = eval(cond);
-
-		console.log(preconditionId, ':', cond, '==', match);
-
+		console.log(text, ':', cond, '==', match);
 		return match;
 	}
 
 	return true;
 }
 
+function checkPrecondition(preconditionId) {
+	return evalPrecondition(bv.preconditions[preconditionId], preconditionId);
+}
+
 function resolveSegmentGroup(sg) {
 	let results = [];
 	for (let v of segmentGroups[sg]) {
@@ -99,7 +99,7 @@ function getMoments(segmentId, ms) {
 	let moments = momentsBySegment[segmentId] || [];
 	for (let i = 0; i < moments.length; i++) {
 		let m = moments[i];
-		if (ms >= m.startMs && ms < m.endMs) {
+		if (ms >= m.startMs && ms < m.endMs && evalPrecondition(m.precondition)) {
 			result[segmentId + '/' + i] = m;
 		}
 	}

From f9b7bc840cd171c56d7d94e6fcf08837b98442e2 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 08:35:23 +0000
Subject: [PATCH 33/35] assets/scripts.js: Simplify some precondition code

---
 assets/scripts.js | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index cf5b874..950c961 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -22,17 +22,9 @@ function preconditionToJS(cond) {
 	} else if (cond[0] == 'not') {
 		return '!(' + preconditionToJS(cond[1]) + ')';
 	} else if (cond[0] == 'and') {
-		let conds = [];
-		for (let i = 1; i < cond.length; i++) {
-			conds.push('(' + preconditionToJS(cond[i]) + ')');
-		}
-		return '(' + conds.join(' && ') + ')';
+		return '(' + cond.slice(1).map(preconditionToJS).join(' && ') + ')';
 	} else if (cond[0] == 'or') {
-		let conds = [];
-		for (let i = 1; i < cond.length; i++) {
-			conds.push('(' + preconditionToJS(cond[i]) + ')');
-		}
-		return '(' + conds.join(' || ') + ')';
+		return '(' + cond.slice(1).map(preconditionToJS).join(' || ') + ')';
 	} else {
 		console.log('unsupported condition!', cond);
 		return 'true';

From 3fbed6886b9d5d1813ca631af6abef562dc10e01 Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 08:35:36 +0000
Subject: [PATCH 34/35] assets/scripts.js: Implement more precondition
 expression types

---
 assets/scripts.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/assets/scripts.js b/assets/scripts.js
index 950c961..3186853 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -25,6 +25,14 @@ function preconditionToJS(cond) {
 		return '(' + cond.slice(1).map(preconditionToJS).join(' && ') + ')';
 	} else if (cond[0] == 'or') {
 		return '(' + cond.slice(1).map(preconditionToJS).join(' || ') + ')';
+	} else if (cond[0] == 'eql' && cond.length == 3) {
+		return '(' + cond.slice(1).map(preconditionToJS).join(' == ') + ')';
+	} else if (cond === false) {
+		return false;
+	} else if (cond === true) {
+		return true;
+	} else if (typeof cond === 'string') {
+		return cond;
 	} else {
 		console.log('unsupported condition!', cond);
 		return 'true';

From 4260f0ccf4de8602c17f7e3f01aa6df7035ebc4e Mon Sep 17 00:00:00 2001
From: Vladimir Panteleev <git@thecybershadow.net>
Date: Sun, 28 Jul 2019 08:35:58 +0000
Subject: [PATCH 35/35] assets/scripts.js: Tweak precondition debug log

---
 assets/scripts.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/assets/scripts.js b/assets/scripts.js
index 3186853..1c0585c 100644
--- a/assets/scripts.js
+++ b/assets/scripts.js
@@ -43,7 +43,7 @@ function evalPrecondition(precondition, text) {
 	if (precondition) {
 		let cond = preconditionToJS(precondition);
 		let match = eval(cond);
-		console.log(text, ':', cond, '==', match);
+		console.log('precondition', text, ':', cond, '==', match);
 		return match;
 	}
 
@@ -99,8 +99,9 @@ function getMoments(segmentId, ms) {
 	let moments = momentsBySegment[segmentId] || [];
 	for (let i = 0; i < moments.length; i++) {
 		let m = moments[i];
-		if (ms >= m.startMs && ms < m.endMs && evalPrecondition(m.precondition)) {
-			result[segmentId + '/' + i] = m;
+		let momentId = segmentId + '/' + i;
+		if (ms >= m.startMs && ms < m.endMs && evalPrecondition(m.precondition, 'moment ' + momentId)) {
+			result[momentId] = m;
 		}
 	}
 	return result;