diff --git a/app/scripts/contentscript.js b/app/scripts/contentscript.js index e9981b4..7df4b95 100644 --- a/app/scripts/contentscript.js +++ b/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')); }