bookmark-audio-fragment/app/create-bookmarks

import delay from 'delay';
import { makeRemotelyCallable, remoteFunction } from 'webextension-rpc';

function describeSelection() {
	const playlist = self.playlist;
	if (!playlist) {
		throw new Error('Player has not been initialised.');
	}

	let { start, end } = playlist.getTimeSelection();
	// Waveform Playlist tells us end=start when the selection is just a single line.
	if (end === start) end = undefined;
	// Round the numbers to two decimals.
	if (start !== undefined) start = Math.round(start * 100) / 100;
	if (end !== undefined) end = Math.round(end * 100) / 100;

	const fragmentIdentifier = `t=${start || ''}` + (end ? `,${end}` : '');

	const selector = {
		type: 'FragmentSelector',
    conformsTo: 'http://www.w3.org/TR/media-frags/',
		value: fragmentIdentifier,
	};
	return selector;
}

makeRemotelyCallable({
	describeSelection,
});

async function init() {
	let menuEl;

	function cleanupMenu() {
		if (!menuEl) return;
		menuEl.parentNode.removeChild(menuEl);
		menuEl = undefined;
	}

	function onContextMenu(event) {
		event.preventDefault();
		const left = event.pageX;
		const top = event.pageY;

		const playlist = self.playlist;
		if (!playlist) {
			throw new Error('Player has not been initialised.');
		}
		let { start, end } = playlist.getTimeSelection();
		const fragmentIsSelected = start !== end;

		cleanupMenu();
		menuEl = document.createElement('ul');
		const liEl = document.createElement('li');
		menuEl.appendChild(liEl);
		menuEl.setAttribute('style', `list-style: none; margin: 0; padding: 0; position: absolute; top: ${top}; left: ${left}; z-index: 9999999; background: #eee; border: 1px solid black;`);

		const buttonEl = document.createElement('button');
		buttonEl.innerText = browser.i18n.getMessage(fragmentIsSelected
			? 'bookmarkSelectionContextMenuItemForFragment'
			: 'bookmarkSelectionContextMenuItemForSingleMoment'
		);
		buttonEl.addEventListener('click', remoteFunction('createBookmark'));

		liEl.appendChild(buttonEl);
		document.body.appendChild(menuEl);
	}

	document.addEventListener('contextmenu', onContextMenu, false);

	document.addEventListener('click', event => {
		cleanupMenu();
	})
}

init();