Use Babel and add JS licenses page

build/static/css/main.css

@@ -1 +1 @@
-:root{--bg-primary: #fcf5f4;--bg-secondary: #e9e1df;--bg-tertiary: #cec8c6;--fg-header: #000;--fg-primary: #181818;--fg-dim: #646464;--fg-link: #2664b5;--edge-mark: #aaa;--edge-table: #333}@media(prefers-color-scheme: dark){:root{--bg-primary: #232323;--bg-secondary: #191919;--bg-tertiary: #383838;--fg-header: #fff;--fg-primary: #d9d9d9;--fg-dim: #828282;--fg-link: #529ef5;--edge-mark: #555;--edge-table: #aaa}}body{background-color:var(--bg-primary);color:var(--fg-primary);font-size:20px;margin:0;padding:8px;font-family:sans-serif}a,a:visited{color:var(--fg-link)}noscript{display:block}mark{background-color:var(--bg-tertiary);color:var(--fg-primary);padding:3px 5px;border-radius:4px;border:1px solid var(--edge-mark)}table,td,th{border:1px solid var(--edge-table);border-collapse:collapse}td,th{padding:4px 8px}thead,tr:nth-child(even){background-color:var(--bg-secondary)}.banner{display:grid;grid-gap:24px;align-items:center;justify-items:center;justify-content:center;padding:20px}@media screen and (min-width: 520px){.banner{grid-template-columns:80px auto}}.banner .logo{width:80px;height:80px;background-size:contain;background-image:url(/static/img/invidious-logo-light.svg?static=25c5cd3acc)}@media(prefers-color-scheme: dark){.banner .logo{background-image:url(/static/img/invidious-logo-dark.svg?static=aa528cbad6)}}.banner h1{color:var(--fg-header);font-size:56px;font-weight:bold;text-transform:uppercase;margin:0;padding:0}.story{margin:40px 0px;text-align:center}@media screen and (min-width: 520px){.story{white-space:pre-line}}.instances-table{display:flex;justify-content:center}.instances-table table{width:100%;max-width:700px}.instances-list{text-align:center}.instances-list .list{margin:0 auto;padding-left:1em;text-align:left;max-width:max-content}.loading-td{text-align:center;padding:20px;background-color:var(--bg-secondary)}.column-center{text-align:center}.health-unknown{color:var(--fg-dim)}.script-warning{margin:0 auto;max-width:max-content;background:#700;color:#fff;padding:4px 20px;border-radius:8px;border:1px solid}
+:root{--bg-primary: #fcf5f4;--bg-secondary: #e9e1df;--bg-tertiary: #cec8c6;--fg-header: #000;--fg-primary: #181818;--fg-dim: #646464;--fg-link: #2664b5;--edge-mark: #aaa;--edge-table: #333}@media(prefers-color-scheme: dark){:root{--bg-primary: #232323;--bg-secondary: #191919;--bg-tertiary: #383838;--fg-header: #fff;--fg-primary: #d9d9d9;--fg-dim: #828282;--fg-link: #529ef5;--edge-mark: #555;--edge-table: #aaa}}body{background-color:var(--bg-primary);color:var(--fg-primary);font-size:20px;margin:0;padding:8px;font-family:sans-serif}a,a:visited{color:var(--fg-link)}noscript{display:block}mark{background-color:var(--bg-tertiary);color:var(--fg-primary);padding:3px 5px;border-radius:4px;border:1px solid var(--edge-mark)}table,td,th{border:1px solid var(--edge-table);border-collapse:collapse}td,th{padding:4px 8px}thead,tr:nth-child(even){background-color:var(--bg-secondary)}footer{font-size:16px;text-align:center;max-width:500px;margin:40px auto}.banner{display:grid;grid-gap:24px;align-items:center;justify-items:center;justify-content:center;padding:20px}@media screen and (min-width: 520px){.banner{grid-template-columns:80px auto}}.banner .logo{width:80px;height:80px;background-size:contain;background-image:url(/static/img/invidious-logo-light.svg?static=25c5cd3acc)}@media(prefers-color-scheme: dark){.banner .logo{background-image:url(/static/img/invidious-logo-dark.svg?static=aa528cbad6)}}.banner h1{color:var(--fg-header);font-size:56px;font-weight:bold;text-transform:uppercase;margin:0;padding:0}.story{margin:40px 0px;text-align:center}@media screen and (min-width: 520px){.story{white-space:pre-line}}.instances-table,.js-license-table{display:flex;justify-content:center}.instances-table table,.js-license-table table{width:100%;max-width:700px}.instances-list{text-align:center}.instances-list .list{margin:0 auto;padding-left:1em;text-align:left;max-width:max-content}.loading-td{text-align:center;padding:20px;background-color:var(--bg-secondary)}.column-center{text-align:center}.health-unknown{color:var(--fg-dim)}.script-warning{margin:0 auto;max-width:max-content;background:#700;color:#fff;padding:4px 20px;border-radius:8px;border:1px solid}.footer-link-list{margin:0;padding:0;justify-content:center;display:flex;list-style-type:none;white-space:pre-wrap}.footer-link-list li:not(:first-child)::before{content:" • ";display:inline}

build/static/js/main.js

@@ -23,11 +23,28 @@
 		return array
 	}
 
+	function request(url) {
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest()
+			xhr.addEventListener("readystatechange", () => {
+				if (xhr.readyState === 4) {
+					if (xhr.status === 200) {
+						resolve(JSON.parse(xhr.response))
+					}
+				}
+			})
+			xhr.open("GET", url)
+			xhr.send()
+		})
+	}
+
 	const destinationPath = window.location.href.slice(window.location.origin.length)
 
 	q("#watch-on-youtube").href = "https://www.youtube.com" + destinationPath
 
-	fetch("https://instances.invidio.us/instances.json?sort_by=type,health").then(res => res.json()).then(
+	qa("[data-loading-message]").forEach(e => e.textContent = e.getAttribute("data-loading-message"))
+
+	request("https://instances.invidio.us/instances.json?sort_by=type,health").then(
 	/** @param {[string, {monitor: any, flag: string, region: string, stats: any, type: string, uri: string}][]} root */ root => {
 		shuffle(root)
 		root.map(entry => {
@@ -35,7 +52,7 @@
 			return {
 				name: entry[0],
 				details: entry[1],
-				health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 99),
+				health: +(healthKnown ? entry[1].monitor.dailyRatios[0].ratio : 95),
 				healthKnown
 			}
 		}).filter(entry => {

build/static/js/main.min.js

@@ -0,0 +1,2 @@
+"use strict";function _createForOfIteratorHelper(o,allowArrayLike){var it;if(typeof Symbol==="undefined"||o[Symbol.iterator]==null){if(Array.isArray(o)||(it=_unsupportedIterableToArray(o))||allowArrayLike&&o&&typeof o.length==="number"){if(it)o=it;var i=0;var F=function F(){};return{s:F,n:function n(){if(i>=o.length)return{done:true};return{done:false,value:o[i++]}},e:function e(_e){throw _e},f:F}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var normalCompletion=true,didErr=false,err;return{s:function s(){it=o[Symbol.iterator]()},n:function n(){var step=it.next();normalCompletion=step.done;return step},e:function e(_e2){didErr=true;err=_e2},f:function f(){try{if(!normalCompletion&&it.return!=null)it.return()}finally{if(didErr)throw err}}}}function _unsupportedIterableToArray(o,minLen){if(!o)return;if(typeof o==="string")return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);if(n==="Object"&&o.constructor)n=o.constructor.name;if(n==="Map"||n==="Set")return Array.from(o);if(n==="Arguments"||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return _arrayLikeToArray(o,minLen)}function _arrayLikeToArray(arr,len){if(len==null||len>arr.length)len=arr.length;for(var i=0,arr2=new Array(len);i<len;i++){arr2[i]=arr[i]}return arr2};(function(){var q=function q(s){return document.querySelector(s)};var qa=function qa(s){return document.querySelectorAll(s)};function createElement(tag){var properties=arguments.length>1&&arguments[1]!==undefined?arguments[1]:{};var children=arguments.length>2&&arguments[2]!==undefined?arguments[2]:[];var e=document.createElement(tag);for(var _i=0,_Object$keys=Object.keys(properties);_i<_Object$keys.length;_i++){var key=_Object$keys[_i];e[key]=properties[key]}var _iterator=_createForOfIteratorHelper(children),_step;try{for(_iterator.s();!(_step=_iterator.n()).done;){var child=_step.value;e.appendChild(child)}}catch(err){_iterator.e(err)}finally{_iterator.f()}return e}function shuffle(array){for(var i=0;i<array.length;i++){var j=Math.floor(Math.random()*(array.length-i))+i;var _ref=[array[j],array[i]];array[i]=_ref[0];array[j]=_ref[1]}return array}function request(url){return new Promise(function(resolve,reject){var xhr=new XMLHttpRequest;xhr.addEventListener("readystatechange",function(){if(xhr.readyState===4){if(xhr.status===200){resolve(JSON.parse(xhr.response))}}});xhr.open("GET",url);xhr.send()})}var destinationPath=window.location.href.slice(window.location.origin.length);q("#watch-on-youtube").href="https://www.youtube.com"+destinationPath;qa("[data-loading-message]").forEach(function(e){return e.textContent=e.getAttribute("data-loading-message")});request("https://instances.invidio.us/instances.json?sort_by=type,health").then(function(root){shuffle(root);root.map(function(entry){var healthKnown=!!entry[1].monitor;return{name:entry[0],details:entry[1],health:+(healthKnown?entry[1].monitor.dailyRatios[0].ratio:95),healthKnown:healthKnown}}).filter(function(entry){return entry.details.type==="https"&&entry.health>0}).sort(function(a,b){return b.health-a.health}).forEach(function(entry){var target=entry.details.uri.replace(/\/*$/,"")+destinationPath;var healthUnknown=entry.healthKnown?"":"health-unknown ";var health=entry.healthKnown?entry.health.toFixed(0):"(unknown)";q("#instances-tbody").appendChild(createElement("tr",{},[createElement("td",{textContent:entry.name}),createElement("td",{className:"column-center "+healthUnknown,textContent:health}),createElement("td",{className:"column-center"},[createElement("a",{href:target,textContent:"Go \u2192"})])]))});qa(".loading").forEach(function(e){return e.remove()})})})();
+//# sourceMappingURL=/static/js/main.min.js.map