☰

Mercator Studio for Google Meet

Change how you look on Google Meet.

// ==UserScript==
// @name	Mercator Studio for Google Meet
// @version	2.2.1
// @description	Change how you look on Google Meet.
// @author	Xing <[email protected]> (https://x-ing.space)
// @copyright	2020-2021, Xing (https://x-ing.space)
// @license	MIT License; https://x-ing.space/mercator/LICENSE
// @namespace	https://x-ing.space
// @homepageURL	https://x-ing.space/mercator
// @icon	https://x-ing.space/mercator/icon.png
// @match	https://meet.google.com/*
// @grant	none
// ==/UserScript==
(async function mercator_studio() {
	'use strict'

	// Create shadow root

	const host = document.createElement('aside')
	host.style.position = 'absolute'
	host.style.zIndex = 10
	host.style.pointerEvents = 'none'
	const shadow = host.attachShadow({ mode: 'open' })

	const isFirefox = navigator.userAgent.includes('Firefox')

	// Create form

	const main = document.createElement('main')
	const style = document.createElement('style')
	const body_fonts = 'Roboto, RobotDraft, Helvetica, sans-serif, serif'
	const display_fonts = '"Google Sans", ' + body_fonts
	style.textContent = `
a, button {
	all: unset;
	cursor: pointer;
	text-align: center;
}
main, main *, a, button {
	box-sizing: border-box;
	transition-duration: 200ms;
	transition-property: opacity, background, transform, padding, border-radius, border-color;

	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
}
:not(input) {
	user-select: none;
}
@media (prefers-reduced-motion) {
	* {
		transition-duration: 0s;
	}
}
:focus {
	outline: 0;
}

/* -- */

main {
	--bg: #3C4042;
	--bg-x: #434649;
	--bg-xx: #505457;
	--txt: white;	

	font-family: ${display_fonts};
	font-size: 0.9rem;
	width: 25rem;
	max-width: 100vw;
	height: 100vh;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 0.5rem;
	display: flex;
	flex-direction: column-reverse;
	overflow: hidden;
	pointer-events: none;
}
main > * {
	color: var(--txt);
}
#fields,
#bar,
#labels > * {
	border-radius: .5rem;
	box-shadow: 0 .1rem .25rem #0004;
	pointer-events: all;
}
:not(.edit)>#fields{
	display: none;
	opacity: 0;
}
:not(.edit)>#bar{
	border-radius: 1.5rem;
	flex-basis: 4rem;
}
#text:hover, #text:focus,
#presets:hover,
#bar>:hover, #bar>:focus,
#tips > * {
	background: var(--bg-x);
}
#text:hover:focus,
#presets:hover,
#bar>:hover:focus {
	background: var(--bg-xx);
}

/* -- */

#tips {
	position: relative;
	font-family: ${body_fonts};
	font-size: 0.8rem;
	line-height: 1rem;
	z-index: 10;
}
#tips > * {
	display: block;
	position: absolute;
	bottom: 0rem;
	height: 1.5rem;
	padding: 0.25rem;
	border-radius: 0.25rem;
}
#tips > :not(.show) {
	opacity: 0;
}
#tips > [for="minimize"] {
	left: 0;
}
#tips > [for="previews"] {
	left: 50%;
	transform: translateX(-50%);
}
#tips > [for="donate"] {
	right: 0;
}
.edit > #tips > * {
	top: 1rem;
}

/* -- */

#bar {
	margin-top: .5rem;
	overflow: hidden;
	flex: 0 0 auto;
	display: flex;
}
.minimize #bar {
	width: 1rem;
}
#bar > * {
	background: var(--bg);
}
#bar #minimize,
#bar #donate {
	font-size: .5rem;
	flex: 0 0 1.5rem;
	width: var(--radius);
	text-align: center;
	line-height: 4rem;
	height: 100%;
	overflow-wrap: anywhere;
}
.edit #bar #minimize,
.edit #bar #donate,
.edit #bar h2,
.minimize #bar :not(#minimize) {
	display: none;
}
:not(.minimize) #minimize:hover,
.minimize #minimize:not(:hover) {
	padding-right: 2px;
}
#donate:hover {
	padding-left: 2px;
}
.minimize #minimize{
	flex-basis: 1rem;
}
#previews {
	flex: 1 0 0;
	width: 0;
	display: flex;
}
#previews video,
#previews canvas {
	width: auto;
	height: auto;
	background-image: linear-gradient(90deg,
		hsl( 18, 100%, 68%) 16.7%,	hsl(-10, 100%, 80%) 16.7%,
		hsl(-10, 100%, 80%) 33.3%,	hsl(5,90%, 72%) 33.3%,
		hsl(5,90%, 72%) 50%,	hsl( 48, 100%, 75%) 50%,
		hsl( 48, 100%, 75%) 66.7%,	hsl( 36, 100%, 70%) 66.7%,
		hsl( 36, 100%, 70%) 83.3%,	hsl( 20,90%, 70%) 83.3%
	);
}
.edit #previews video,
.edit #previews canvas {
	height: auto;
	max-width: 50%;
	object-fit: contain;
}
#previews>h2 {
	flex-grow: 1;
	font-size: .9rem;
	line-height: 1.4;
	display: flex;
	text-align: center;
	align-items: center;
	justify-content: center;
}
#previews:hover>h2 {
	transform: translateY(-2px);
}

/* -- */

#fields {
	display: flex;
	flex-direction: column;
	overflow: hidden scroll;
	padding: 1rem;
	flex: 0 1 auto;
	background: var(--bg);
}
#presets,
#fields > label {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#fields > label+label {
	margin-top: 0.5rem;
}
#fields > label:focus-within{
	font-weight: bold;
}
#fields > label > * {
	width: calc(100% - 4.5rem);
	height: 1rem;
	border-radius: 0.5rem;
	border: 0.15rem solid var(--bg-x);
	font-size: 0.8rem;
}
#presets:focus-within,
#fields > label > :focus,
#fields > label > :hover {
	border-width: 0.15rem;
	border-color: var(--txt);
}
#fields > label > #presets {
	overflow: hidden;
	height: auto;
	margin-bottom: -0.15rem;
}
#presets>* {
	border: 0;
	border-radius: 0;
	background: transparent;
	flex-grow: 1;
	height: 1.3rem;
	font-weight: normal;
}
#presets>:first-child {
	border-radius: 0.25rem 0 0 0.25rem;
}
#presets>:last-child {
	border-radius: 0 0.25rem 0.25rem 0;
}
#presets>:hover {
	background: var(--bg);
}
#presets>:focus {
	background: var(--txt);
	color: var(--bg);
}
#fields > label > #text {
	text-align: center;
	font-weight: bold;
	resize: none;
	line-height: 1.1;
	overflow: hidden scroll;
	background: var(--bg);
	height: auto;
}
#text::placeholder {
	color: inherit;
}
#text::selection {
	color: var(--bg);
	background: var(--txt);
}
input[type=checkbox] {
	cursor: pointer;
}
input[type=range] {
	-webkit-appearance: none;
	cursor: ew-resize;
	--gradient: transparent, transparent;
	--rainbow: hsl(0, 80%, 75%), hsl(30, 80%, 75%), hsl(60, 80%, 75%), hsl(90, 80%, 75%), hsl(120, 80%, 75%), hsl(150, 80%, 75%), hsl(180, 80%, 75%), hsl(210, 80%, 75%), hsl(240, 80%, 75%), hsl(270, 80%, 75%), hsl(300, 80%, 75%), hsl(330, 80%, 75%);
	background: linear-gradient(90deg, var(--gradient)), linear-gradient(90deg, var(--rainbow));
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: none;
	transition: inherit;
	background: var(--bg);
	width: 1rem;
	height: 1rem;
	border: 0.1rem solid var(--txt);
	transform: scale(1.5);
	border-radius: 100%;
}
input[type=range]:hover::-webkit-slider-thumb {
	background: var(--bg-x);
}
input[type=range]:focus::-webkit-slider-thumb {
	border-color: var(--bg);
	background: var(--txt);
}
input[type=range]::-moz-range-thumb {
	transition: inherit;
	background: var(--bg);
	width: 1rem;
	height: 1rem;
	border: 0.1rem solid var(--txt);
	transform: scale(1.5);
	border-radius: 100%;
	box-sizing: border-box;
}
input[type=range]:hover::-moz-range-thumb {
	background: var(--bg-x);
}
input[type=range]:focus::-moz-range-thumb {
	border-color: var(--bg);
	background: var(--txt);
}
input#light,
input#fade,
input#vignette {
	--gradient: black, #8880, white
}
input#contrast {
	--gradient: gray, #8880
}
input#warmth,
input#tilt {
	--gradient: #88f, #8880, #ff8
}
input#tint,
input#pan {
	--gradient: #f8f, #8880, #8f8
}
input#sepia {
	--gradient: #8880, #aa8
}
input#hue,
input#rotate {
	background: linear-gradient(90deg, hsl(0, 80%, 75%), hsl(60, 80%, 75%), hsl(120, 80%, 75%), hsl(180, 80%, 75%), hsl(240, 80%, 75%), hsl(300, 80%, 75%), hsl(0, 80%, 75%), hsl(60, 80%, 75%), hsl(120, 80%, 75%), hsl(180, 80%, 75%), hsl(240, 80%, 75%), hsl(300, 80%, 75%), hsl(0, 80%, 75%))
}
input#saturate {
	--gradient: gray, #8880 50%, blue, magenta
}
input#blur {
	--gradient: #8880, gray
}
input#scale,
input#pillarbox,
input#letterbox {
	--gradient: black, white
}
`

	// Translate labels
	// Top languages of users: English, Portuguese, Spanish, Italian, Polish

	const i18n = {
		light:	{ en: 'light',	es: 'brillo',	fr: 'lumin',	it: 'lumin',	pt: 'brilho',	zh: '亮度' },
		contrast:	{ en: 'contrast',	es: 'contraste',	fr: 'contraste',	it: 'contrasto',	pt: 'contraste',	zh: '对比度' },
		warmth:	{ en: 'warmth',	es: 'calor',	fr: 'chaleur',	it: 'calore',	pt: 'calor',	zh: '温度' },
		tint:	{ en: 'tint',	es: 'tinción',	fr: 'teinte',	it: 'tinta',	pt: 'verde',	zh: '色调' },
		sepia:	{ en: 'sepia',	es: 'sepia',	fr: 'sépia',	it: 'seppia',	pt: 'sépia',	zh: '泛黄' },
		hue:	{ en: 'hue',	es: 'tono',	fr: 'ton',	it: 'tonalità',	pt: 'matiz',	zh: '色相' },
		saturate:	{ en: 'saturate',	es: 'satura',	fr: 'sature',	it: 'saturare',	pt: 'satura',	zh: '饱和度' },
		blur:	{ en: 'blur',	es: 'difuminar',	fr: 'flou',	it: 'sfocatura',	pt: 'enevoa',	zh: '模糊' },
		fade:	{ en: 'fade',	es: 'fundido',	fr: 'fondu',	it: 'svanisci',	pt: 'fundido',	zh: '淡出' },
		vignette:	{ en: 'vignette',	es: 'viñeta',	fr: 'vignette',	it: 'vignetta',	pt: 'vinheta',	zh: '虚光照' },
		rotate:	{ en: 'rotate',	es: 'rota',	fr: 'pivote',	it: 'ruoti',	pt: 'rota',	zh: '旋转' },
		scale:	{ en: 'scale',	es: 'zoom',	fr: 'zoom',	it: 'scala',	pt: 'zoom',	zh: '大小' },
		pan:	{ en: 'pan',	es: 'panea',	fr: 'pan',	it: 'sposti-h',	pt: 'panea',	zh: '左右移动' },
		tilt:	{ en: 'tilt',	es: 'inclina',	fr: 'incline', 	it: 'sposti-v',	pt: 'empina',	zh: '上下移动' },
		pillarbox:	{ en: 'pillarbox',	es: 'recorta-h',	fr: 'taille-h',	it: 'tagli-h',	pt: 'recorta-h', zh: '左右裁剪' },
		letterbox:	{ en: 'letterbox',	es: 'recorta-v',	fr: 'taille-v',	it: 'tagli-v',	pt: 'recorta-v', zh: '上下裁剪' },
		text:	{ en: 'text',	es: 'texto',	fr: 'texte',	it: 'testo',	pt: 'texto',	zh: '文字' },
		mirror:	{ en: 'mirror',	es: 'refleja',	fr: 'réfléch',	it: 'rispecchi',	pt: 'refleja',	zh: '反射' },
		freeze:	{ en: 'freeze',	es: 'pausa',	fr: 'arrête',	it: 'pausa',	pt: 'pausa',	zh: '暂停' },
		presets:	{ en: 'presets',	es: 'estilos',	fr: 'styles',	it: 'stili',	pt: 'estilos',	zh: '预设' },
		preset:	{ en: 'preset: ',	es: 'estilo: ',	fr: 'style: ',	it: 'stile: ',	pt: 'estilo: ',	zh: '预设：' },
		reset:	{ en: 'reset',	es: 'reini',	fr: 'réinit',	it: 'reset',	pt: 'reini',	zh: '重置'	},
		open_tip:	{ en: 'Open',	es: 'Abre',	fr: 'Ouvre',	it: 'Apri',	pt: 'Aberto',	zh: '打开' },
		close_tip:	{ en: 'Close',	es: 'Cierra',	fr: 'Ferme',	it: 'Chiudi',	pt: 'Feche',	zh: '合起' },
		minimize_tip:	{ en: 'Minimize',	es: 'Minimizas',	fr: 'Minimise',	it: 'Minimizzi',	pt: 'Minimiza',	zh: '合起' },
		previews_tip:	{ en: ' previews',	es: ' visualizaciones',	fr: ' aperçus',	it: ' anteprima',	pt: 'visualizações',	zh: '预览' },
		studio_tip:	{ en: ' studio',	es: ' estudio',	fr: ' studio',	it: ' studio',	pt: ' estúdio',	zh: '画室' },
		text_tip:	{ en: 'Write text here',	es: 'Escribe el texto aquí',	fr: 'Écrivez du texte ici',	it: 'Scrivi il testo qui',	pt: 'Escreva o texto aqui',	zh: '在这里写字' },
		donate_tip:	{ en: 'Donate to the dev',	es: 'Donas al dev',	fr: 'Fais un don au dev',	it: 'Donare al dev',	pt: 'Você doa para o dev',	zh: '捐款给作者' },
	}
	const langs = [ 'en', 'es', 'fr', 'it', 'pt', 'zh' ]
	main.lang = langs.find( x => x === navigator.language.split('-')[0] ) || 'en'
	for(const key in i18n) i18n[key] = i18n[key][main.lang]

	// Create inputs
	
	const fields = document.createElement('section')
	fields.id= 'fields'
	
	const types = {
		light: 'range',
		contrast: 'range',
		warmth: 'range',
		tint: 'range',
		sepia: 'range_positive',
		hue: 'range_loop',
		saturate: 'range',
		blur: 'range_positive',
		fade: 'range',
		vignette: 'range',
		rotate: 'range_loop',
		scale: 'range_positive',
		pan: 'range',
		tilt: 'range',
		pillarbox: 'range_positive',
		letterbox: 'range_positive',
		text: 'textarea',
		mirror: 'checkbox',
		freeze: 'checkbox',
		presets: 'radio',
	}
	const default_values = {
		light: 0,
		contrast: 0,
		warmth: 0,
		tint: 0,
		sepia: 0,
		hue: 0,
		saturate: 0,
		blur: 0,
		fade: 0,
		vignette: 0,
		rotate: 0,
		scale: 0,
		pan: 0,
		tilt: 0,
		pillarbox: 0,
		letterbox: 0,
		text: '',
		mirror: false,
		freeze: false,
		presets: 'reset',
	}
	const saved_values = JSON.parse(window.localStorage.getItem('mercator-studio-values-20')) || {}

	const preset_values = {
		reset: {},
		concorde: {
			contrast: 0.1,
			warmth: -0.25,
			tint: -0.05,
			saturate: 0.2,
		},
		mono: {
			light: 0.1,
			contrast: -0.1,
			sepia: 0.8,
			saturate: -1,
			vignette: -0.5,
		},
		matcha: {
			light: 0.1,
			tint: -0.75,
			sepia: 1,
			hue: 0.2,
			vignette: 0.3,
			fade: 0.3,
		},
		deepfry: {
			contrast: 1,
			saturate: 0.5,
		}
	}

	// Clone default values into updating object
	const values = {
		...default_values,
		...saved_values
	}

	const inputs = Object.fromEntries(
		Object.entries(values)
		.map(([key, value]) => {
			let input
			const type = types[key]
			switch (type) {
				case 'textarea':
					input = document.createElement('textarea')
					input.rows = 3
					input.placeholder = `\n🌈 ${i18n.text_tip} 🌦️`
					input.addEventListener('input', () => {
						// String substitution
						set_value(input, (input.value + '')
							.replace(/--/g, '―')
							.replace(/\\sqrt/g, '√')
							.replace(/\\pm/g, '±')
							.replace(/\\times/g, '×')
							.replace(/\\cdot/g, '·')
							.replace(/\\over/g, '∕')
							// Numbers starting with ^ (superscript) or _ (subscript)
							.replace(/(\^|\_)(\d+)/g, (_, sign, number) =>
								number.split('').map(digit =>
									String.fromCharCode(digit.charCodeAt(0) + (
										// Difference in character codes between subscript numbers and their regular equivalents.
										sign === '_' ? 8272 :
										// Superscript 1, 2 & 3 are in separate ranges.
										digit === '1' ? 136 :
										'23'.includes(digit) ? 128 : 8256
									))
								).join('')
							)
						)
					})
					break
				case 'checkbox':
					input = document.createElement('input')
					input.type = 'checkbox'
					input.addEventListener('change', () =>
						set_value(input, input.checked)
					)
					break
				case 'radio':
					input = document.createElement('label')
					input.append(...Object.keys(preset_values).map(key => {
						const button = document.createElement('button')
						button.textContent = ( key === 'reset' ) ? i18n.reset : key
						button.setAttribute('aria-label', i18n.preset + button.textContent)
						button.addEventListener('click', event => {
							event.preventDefault()
							Object.entries({...default_values,...preset_values[key]})
								.forEach(([key, value]) => set_value(inputs[key], value))
						})
						return button
					}))
					break
				default:
					input = document.createElement('input')
					input.type = 'range'

					// These inputs go from 0 to 1, the rest -1 to 1
					input.min = ( type === 'range_positive' ) - 1
					input.max = 1

					// Use 32 steps normally, 128 if CTRL, 512 if SHIFT
					const range = input.max - input.min
					input.step = range / 32
					input.addEventListener('keydown', ({ code, ctrlKey, shiftKey }) => {
						if(code === 'Digit0') reset_value(input)
						input.step = range / (shiftKey ? 512 : ctrlKey ? 128 : 32)
					})
					input.addEventListener('keyup', () =>
						input.step = range / 32
					)

					input.addEventListener('input', () => {
						input.focus()
						set_value(input, input.valueAsNumber)
					})

					// Scroll to change values
					input.addEventListener('wheel', event => {
						event.preventDefault()
						input.focus()
						const width = input.getBoundingClientRect().width
						const dx = -event.deltaX
						const dy = event.deltaY
						const ratio = (Math.abs(dx) > Math.abs(dy) ? dx : dy) / width
						const range = input.max - input.min
						const raw_value = input.valueAsNumber + ratio * range
						const clamped_value = Math.min(Math.max(raw_value, input.min), input.max)
						const stepped_value = Math.round(clamped_value / input.step) * input.step
						const value = stepped_value
						set_value(input, value)
					})

					// Right click to individually reset
					input.addEventListener('contextmenu', event => {
						event.preventDefault()
						reset_value(input)
					})
			}

			input.value = value
			input.id = key

			if (!(isFirefox && ['warmth', 'tint'].includes(key))) {
				// Disable the SVG filters for Firefox
				let label = document.createElement('label')
				label.textContent = i18n[key]

				label.append(input)
				fields.append(label)
			}
			return [key, input]
		})
	)

	function set_value(input, value) {
		values[input.id] = input.value = value
		window.localStorage.setItem('mercator-studio-values-20', JSON.stringify(values))
	}
	function reset_value(input) {
		set_value(input, default_values[input.id])
	}

	// Create color balance matrix
	const svgNS = 'http://www.w3.org/2000/svg'
	const svg = document.createElementNS(svgNS, 'svg')
	const filter = document.createElementNS(svgNS, 'filter')
	filter.id = 'filter'
	const component_transfer = document.createElementNS(svgNS, 'feComponentTransfer')
	const components = Object.fromEntries(
		['R', 'G', 'B'].map(hue => {
			const func = document.createElementNS(svgNS, 'feFunc' + hue)
			func.setAttribute('type', 'table')
			func.setAttribute('tableValues', '0 1')
			return [hue, func]
		}))
	component_transfer.append(...Object.values(components))
	filter.append(component_transfer)
	svg.append(filter)

	// Create labels
	
	const minimize_tip = document.createElement('label')
	minimize_tip.htmlFor = 'minimize'
	minimize_tip.dataset.off = `${i18n.minimize_tip}${i18n.previews_tip} (ctrl + shift + m)`
	minimize_tip.dataset.on = `${i18n.open_tip}${i18n.previews_tip} (ctrl + shift + m)`
	minimize_tip.textContent = minimize_tip.dataset.off

	const previews_tip = document.createElement('label')
	previews_tip.htmlFor = 'previews'
	previews_tip.dataset.off = `${i18n.open_tip}${i18n.studio_tip} (ctrl + m)`
	previews_tip.dataset.on = `${i18n.close_tip}${i18n.studio_tip} (ctrl + m)`
	previews_tip.textContent = previews_tip.dataset.off

	const donate_tip = document.createElement('label')
	donate_tip.htmlFor = 'donate'
	donate_tip.textContent = i18n.donate_tip

	const tips = document.createElement('section')
	tips.id = 'tips'
	tips.append(minimize_tip,previews_tip,donate_tip)

	// Mimic Google Meet tooltip behavior where hover gets priority over focused
	const update_tips = () => {
		tips.querySelectorAll('.show').forEach(tip=>tip.classList.remove('show'))
		const show = tips.querySelector('.hover') || tips.querySelector('.focus')
		if(show) show.classList.add('show')
	}
	const link_tip = ( original, tip ) => {
		original.addEventListener('mouseenter',()=>{
			tip.classList.add('hover')
			update_tips()
		})
		original.addEventListener('mouseleave',()=>{
			tip.classList.remove('hover')
			update_tips()
		})
		original.addEventListener('focus',()=>{
			tip.classList.add('focus')
			update_tips()
		})
		original.addEventListener('blur',()=>{
			tip.classList.remove('focus')
			update_tips()
		})
	}

	// create bottom bar

	const bar = document.createElement('section')
	bar.id = 'bar'

	const minimize = document.createElement('button')
	minimize.id = 'minimize'
	minimize.textContent = '◀'
	const toggleMinimize = () => {
		main.classList.remove('edit')
		main.classList.toggle('minimize')
		minimize.focus()
		const state = main.classList.contains('minimize')
		minimize.textContent = state ? '▶' : '◀'
		minimize_tip.textContent = minimize_tip.dataset[ state ? 'on' : 'off' ]
		minimize_tip.classList.remove('focus')
		update_tips()
	}
	minimize.addEventListener('click', toggleMinimize)
	link_tip(minimize,minimize_tip)

	const donate = document.createElement('a')
	donate.id = 'donate'
	donate.href = 'https://ko-fi.com/xingyzt'
	donate.target = '_blank'
	donate.textContent = '🤍'
	donate.setAttribute('aria-label',i18n.donate_tip)
	link_tip(donate,donate_tip)


	// Create previews
	const previews = document.createElement('button')
	previews.id = 'previews'
	const toggleEdit = () => {
		main.classList.remove('minimize')
		main.classList.toggle('edit')
		previews.focus()
		const state = main.classList.contains('edit')
		state ? Object.values(inputs)[0].focus() : previews.focus()
		previews_tip.textContent = previews_tip.dataset[state ? 'on' : 'off']
		previews_tip.classList.remove('focus')
		update_tips()
	}
	previews.addEventListener('click', toggleEdit)
	link_tip(previews,previews_tip)

	// Ctrl+m to toggle
	window.addEventListener('keydown', event => {
		if (event.code=='KeyM' && event.ctrlKey) {
			event.preventDefault()
			event.shiftKey ? toggleMinimize(event) : toggleEdit(event)
		}
	})

	// Create preview video
	const video = document.createElement('video')
	video.setAttribute('playsinline', '')
	video.setAttribute('autoplay', '')
	video.setAttribute('muted', '')

	// Create canvases
	const canvases = Object.fromEntries(['buffer', 'freeze', 'display'].map(name => {
		const element = document.createElement('canvas')
		const context = element.getContext('2d')
		return [name, {
			element,
			context
		}]
	}))

	// Create title
	const title = document.createElement('h2')
	title.id = 'title'
	title.innerText = 'Mercator\nStudio'

	previews.append(video, title, canvases.buffer.element)
	bar.append(minimize, previews, donate)

	// Add UI to page
	main.append(bar, tips, fields)
	shadow.append(main, style, svg)
	document.body.append(host)

	// Define mappings of linear values
	const polynomial_map = (value, degree) => (value + 1) ** degree
	const polynomial_table = (factor, steps = 32) => Array(steps).fill(0)
		.map((_, index) => Math.pow(index / (steps - 1), 2 ** factor)).join(' ')
	const percentage = (value) => value * 100 + '%'

	const amp = 8

	let task = 0

	// Background Blur for Google Meet does this ([email protected])

	class mercator_studio_MediaStream extends MediaStream {

		constructor(old_stream) {

			// Copy original stream settings

			super(old_stream)

			video.srcObject = old_stream

			const old_stream_settings = old_stream.getVideoTracks()[0].getSettings()

			const w = old_stream_settings.width
			const h = old_stream_settings.height
			const center = [w / 2, h / 2]
			Object.values(canvases).forEach(canvas => {
				canvas.element.width = w
				canvas.element.height = h
			})
			const canvas = canvases.buffer.buffer
			const context = canvases.buffer.context
			const freeze = {
				state: false,
				init: false,
				image: document.createElement('img'),
				canvas: canvases.freeze,
			}
			inputs.freeze.addEventListener('change', e => {
				freeze.state = freeze.init = e.target.checked
			})

			// Amp: for values that can range from 0 to +infinity, amp**value does the mapping.

			context.textAlign = 'center'
			context.textBaseline = 'middle'

			function draw() {

				context.clearRect(0, 0, w, h)

				// Get values

				inputs.hue.value %= 1
				inputs.rotate.value %= 1

				let v = values

				let light = percentage(polynomial_map(v.light, 2))
				let contrast = percentage(polynomial_map(v.contrast, 3))
				let warmth = isFirefox ? 0 : v.warmth
				let tint = isFirefox ? 0 : v.tint
				let sepia = percentage(v.sepia)
				let hue = 360 * v.hue + 'deg'
				let saturate = percentage(amp ** v.saturate)
				let blur = v.blur * w / 16 + 'px'
				let fade = v.fade
				let vignette = v.vignette
				let rotate = v.rotate * 2 * Math.PI
				let scale = polynomial_map(v.scale, 2)
				let mirror = v.mirror
				let move_x = v.pan * w
				let move_y = v.tilt * h
				let pillarbox = v.pillarbox * w / 2
				let letterbox = v.letterbox * h / 2
				let text = v.text.split('\n')

				// Color balance

				components.R.setAttribute('tableValues', polynomial_table(-warmth + tint / 2))
				components.G.setAttribute('tableValues', polynomial_table(-tint))
				components.B.setAttribute('tableValues', polynomial_table( warmth + tint / 2))

				// CSS filters

				context.filter = (`
					brightness(${light})
					contrast(${contrast})
					${'url(#filter)'.repeat(Boolean(warmth||tint))}
					sepia(${sepia})
					hue-rotate(${hue})
					saturate(${saturate})
					blur(${blur})
				`)

				// Linear transformations: rotation, scaling, translation
				context.translate(...center)
				if (rotate) context.rotate(rotate)
				if (scale - 1) context.scale(scale, scale)
				if (mirror) context.scale(-1, 1)
				if (move_x || move_y) context.translate(move_x, move_y)
				context.translate(-w / 2, -h / 2)

				// Apply CSS filters & linear transformations
				if (freeze.init) {
					freeze.canvas.context.drawImage(video, 0, 0, w, h)
					let data = freeze.canvas.element.toDataURL('image/png')
					freeze.image.setAttribute('src', data)
					freeze.init = false
				} else if (freeze.state) {
					// Draw frozen image
					context.drawImage(freeze.image, 0, 0, w, h)
				} else if (video.srcObject) {
					// Draw video
					context.drawImage(video, 0, 0, w, h)
				} else {
					// Draw preview stripes if video doesn't exist
					'18, 100%, 68%; -10,100%,80%; 5, 90%, 72%; 48, 100%, 75%; 36, 100%, 70%; 20, 90%, 70%'
					.split(';')
						.forEach((color, index) => {
							context.fillStyle = `hsl(${color})`
							context.fillRect(index * w / 6, 0, w / 6, h)
						})
				}

				// Clear transforms & filters
				context.setTransform(1, 0, 0, 1, 0, 0)
				context.filter = 'brightness(1)'

				// Fade: cover the entire image with a single color
				if (fade) {
					let fade_lum = Math.sign(fade) * 100
					let fade_alpha = Math.abs(fade)

					context.fillStyle = `hsla(0,0%,${fade_lum}%,${fade_alpha})`
					context.fillRect(0, 0, w, h)
				}

				// Vignette: cover the edges of the image with a single color
				if (vignette) {
					let vignette_lum = Math.sign(vignette) * 100
					let vignette_alpha = Math.abs(vignette)
					let vignette_gradient = context.createRadialGradient(
						...center, 0,
						...center, Math.sqrt((w / 2) ** 2 + (h / 2) ** 2)
					)

					vignette_gradient.addColorStop(0, `hsla(0,0%,${vignette_lum}%,0`)
					vignette_gradient.addColorStop(1, `hsla(0,0%,${vignette_lum}%,${vignette_alpha}`)

					context.fillStyle = vignette_gradient
					context.fillRect(0, 0, w, h)

				}

				// Pillarbox: crop width
				if (pillarbox) {
					context.clearRect(0, 0, pillarbox, h)
					context.clearRect(w, 0, -pillarbox, h)
				}

				// Letterbox: crop height
				if (letterbox) {
					context.clearRect(0, 0, w, letterbox)
					context.clearRect(0, h, w, -letterbox)
				}

				// Text:
				if (text) {

					// Find out the font size that just fits

					const vw = 0.9 * (w - 2 * pillarbox)
					const vh = 0.9 * (h - 2 * letterbox)

					context.font = `bold ${vw}px ${display_fonts}`

					let char_metrics = context.measureText('0')
					let line_height = char_metrics.actualBoundingBoxAscent + char_metrics.actualBoundingBoxDescent
					let text_width = text.reduce(
						(max_width, current_line) => Math.max(
							max_width,
							context.measureText(current_line).width
						), 0 // Accumulator starts at 0
					)

					const font_size = Math.min(vw ** 2 / text_width, vh ** 2 / line_height / text.length)

					// Found the font size. Time to draw!

					context.font = `bold ${font_size}px ${display_fonts}`

					char_metrics = context.measureText('0')
					line_height = 1.5 * (char_metrics.actualBoundingBoxAscent + char_metrics.actualBoundingBoxDescent)

					context.lineWidth = font_size / 8
					context.strokeStyle = 'black'
					context.fillStyle = 'white'

					text.forEach((line, index) => {
						let x = center[0]
						let y = center[1] + line_height * (index - text.length / 2 + 0.5)
						context.strokeText(line, x, y)
						context.fillText(line, x, y)
					})
				}

				canvases.display.context.clearRect(0, 0, w, h)
				canvases.display.context.drawImage(canvases.buffer.element, 0, 0)
			}
			clearInterval(task)
			task = setInterval(draw, 33)
			const new_stream = canvases.display.element.captureStream(30)
			new_stream.addEventListener('inactive', () => {
				old_stream.getTracks().forEach(track => {
					track.stop()
				})
				canvases.display.context.clearRect(0, 0, w, h)
				video.srcObject = null
			})
			return new_stream
		}
	}

	MediaDevices.prototype.old_getUserMedia = MediaDevices.prototype.getUserMedia
	MediaDevices.prototype.getUserMedia = async constraints =>
		(constraints && constraints.video && !constraints.audio) ?
		new mercator_studio_MediaStream(await navigator.mediaDevices.old_getUserMedia(constraints)) :
		navigator.mediaDevices.old_getUserMedia(constraints)
})()