listen to hash change and update

app/scripts/contentscript.js

@@ -1,4 +1,5 @@
 import * as WaveformPlaylist from 'waveform-playlist';
+import delay from 'delay';
 
 async function init() {
 	document.body.innerHTML = `
@@ -34,26 +35,52 @@ async function init() {
 		e => eventEmitter.emit("mastervolumechange", e.target.value)
 	);
 
+
 	// Read target fragment from URL
 	let start, end;
-	const fragmentIdentifier = window.location.hash;
-	if (fragmentIdentifier) {
-		const match = fragmentIdentifier.match(/#t=(\d+(?:\.\d+)?)?(?:,(\d+(?:\.\d+)?))?/);
-		if (match) {
-			if (match[1] !== undefined) {
-				start = Number.parseFloat(match[1]);
-			}
-			if (match[2] !== undefined) {
-				end = Number.parseFloat(match[2]);
+
+	async function setFragmentToSelection() {
+
+		const fragmentIdentifier = window.location.hash;
+		if (fragmentIdentifier) {
+			const match = fragmentIdentifier.match(/#t=(\d+(?:\.\d+)?)?(?:,(\d+(?:\.\d+)?))?/);
+			if (match) {
+				if (match[1] !== undefined) {
+					start = Number.parseFloat(match[1]);
+				}
+				if (match[2] !== undefined) {
+					end = Number.parseFloat(match[2]);
+				}
 			}
 		}
+
+		// Emit event to update selection in player
+		eventEmitter.emit('select', start, end);
+
 	}
 
+
+	// Bind window hash change to update player
+	window.addEventListener('hashchange', async function() {	
+		if(playlist.isPlaying()) {
+			eventEmitter.emit('stop')
+			// pause needs a small delay, coz the lib doesn't
+			// update player view (drawRequest) when isPlaying() = true.
+			await delay(10);
+		}
+	  	await setFragmentToSelection();
+	  	eventEmitter.emit('play');
+	});
+
+	
+	// Load Playlist
 	await playlist.load([{
-		src: document.URL,
-		selected: { start, end },
+		src: document.URL
 	}]);
 
+	// update start & end for initial load
+	setFragmentToSelection();
+
 	// Start playing. A tiny delay seems needed in Firefox to show the cursor at the right place.
 	requestAnimationFrame(() => eventEmitter.emit('play'));
 }