import * as WaveformPlaylist from 'waveform-playlist';

async function init() {
	document.body.innerHTML = `
		<main>
			<div id="controls">
				<button id="playpause">⏯</button>
				<div>
				  <label for="volume" id="volume-label">🔊</label>
				  <input type="range" min="0" max="100" value="100" id="volume" />
				</div>
			</div>
			<div id="container">
			</div>
		</main>
	`;

	const playlist = WaveformPlaylist.init({
	  container: document.getElementById('container'),
		timescale: true,
		waveHeight: 100,
		state: 'select',
	});

	const eventEmitter = playlist.getEventEmitter();

	// Hook up play/pause and volume inputs
	const playpauseEl = document.getElementById('playpause');
	const volumeEl = document.getElementById('volume');
	playpauseEl.addEventListener('click',
		e => eventEmitter.emit(playlist.isPlaying() ? 'pause' : 'play')
	);
	volumeEl.addEventListener('input',
		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]);
			}
		}
	}

	await playlist.load([{
		src: document.URL,
		selected: { start, end },
	}]);

	// Start playing. A tiny delay seems needed in Firefox to show the cursor at the right place.
	requestAnimationFrame(() => eventEmitter.emit('play'));
}

init();