GreaseMonkey SomaFM player UI enhancements for touch screen

somafm-ui.user.js

// ==UserScript==
// @name	_SomaFM player UI
// @description	SomaFM player UI enhancements for touch screen
// @author	Gigawatts
// @version	1.0.0
// @homepage	https://gist.github.com/gigawatts/95d9c3ae8ba89241e014a351e9cfb42a/
// @updateURL	https://gist.githubusercontent.com/raw/95d9c3ae8ba89241e014a351e9cfb42a/somafm-ui.user.js
// @downloadURL	https://gist.githubusercontent.com/raw/95d9c3ae8ba89241e014a351e9cfb42a/somafm-ui.user.js
// @match	*://somafm.com/player/*
// @grant	GM_addStyle
// @grant	GM.addStyle
// @require	https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js
// Credits
// https://stackoverflow.com/questions/6480082/add-a-javascript-button-using-greasemonkey-or-tampermonkey
// https://gist.github.com/demonixis/5188326
// ==/UserScript==

var backDiv = document.createElement('div');
backDiv.setAttribute ('id', 'backButton');
backDiv.setAttribute ('class', 'arrow-left');
document.body.appendChild(backDiv);

var fsDiv = document.createElement('div');
fsDiv.setAttribute ('id', 'fsButton');
fsDiv.setAttribute ('class', 'full-screen');
document.body.appendChild(fsDiv);

//--- Activate the newly added buttons
document.getElementById("backButton").addEventListener(
	"click", goBack, false
);
document.getElementById("fsButton").addEventListener(
	"click", toggleFullscreen, false
);

function goBack() {
	window.history.back();
}

function toggleFullscreen(event) {
	var element = document.documentElement;
	if (event instanceof HTMLElement) {
		element = event;
	}
	var isFullscreen = document.webkitIsFullScreen || document.mozFullScreen || false;
	element.requestFullScreen = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || function () { return false; };
	document.cancelFullScreen = document.cancelFullScreen || document.webkitCancelFullScreen || document.mozCancelFullScreen || function () { return false; };
	isFullscreen ? document.cancelFullScreen() : element.requestFullScreen();
}

//--- Style our newly added elements using CSS
GM.addStyle (`
.arrow-left {
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	margin: 15px;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-right: 40px solid white;
}

.full-screen {
	position: absolute;
	top: 0;
	right: 0;
	width: 0;
	height: 0;
	margin: 15px;
	vertical-align: middle;
	box-sizing: border-box;
	display: inline-block;
	border: .5em solid currentColor;
	width: 3em;
	height: 3em;
}
.full-screen:before, .full-screen:after {
	content: '';
	background: #1a1a1a;
	position: absolute;
}
.full-screen:before {
	width: 1em;
	height: 3em;
	left: .47em;
	top: -.5em;
}
.full-screen:after {
	width: 3em;
	height: 1em;
	top: .47em;
	left: -.5em;
}

`);