pl12133

/* A collection of React higher order components I have been working on */
 
// <If>, the simplest of HOCs, to conditionally render it's children
// Accepts a `test`, if `test === true`, then render the children; else render nothing
function If ({children, test}) {
  return Boolean(test)
    ? children
    : null
}
If.propTypes = {

pl12133

/* Call a function when a fetch is made to a URL containing `str`
 * @param {String} str          if a URL being fetched contains this string, call {@param callback}
 * @param {Function} callback   a function to call when a fetch is made to the given {@param str}
 * @example <caption>Call debugger on fetches to `example.com`</caption>
 *
 * breakOnUrlMatch('example.com', () => { debugger; });
 */
function breakOnURLMatch(str, callback) {
       let nextOpen = XMLHttpRequest.prototype.open;
       XMLHttpRequest.prototype.open = function monkeypatchedOpen(...args) {

pl12133

import { h, Component } from 'preact';


function withScript(src) {
  return (Child) => class ScriptLoader extends Component {
    static script;

    componentWillMount() {
      if (typeof ScriptLoader.script === 'undefined') {
        ScriptLoader.script = document.createElement('script');

pl12133

const http = require('http');
const path = require('path');
const fs = require('fs');
const port = process.env.PORT || 8080;
const host = process.env.HOST || '0.0.0.0';
const publicPath = __dirname;

function serveStatic(publicPath) {
	return function(request, response) {
		let url = '.' + request.url;

pl12133

var vConsoleHid = (function hookVirtualConsole(window, document, undefined) {
	var [ input, btn, container, log ] = [ 'input', 'button', 'div', 'div' ].map((tag) => document.createElement(tag));
	container.setAttribute('style',
		`position: fixed; z-index: 99999999; left: 10vw; width: 80vw; top: calc(80vh - 100px); height: 160px; border: 2px solid #ccc; background-color: rgba(0,0,0,.2); overflow-y: auto;`
	);
	input.setAttribute('style', 'width: 95%; position: absolute; bottom: 0; left: 0;' );
	input.setAttribute('placeholder', 'JavaScript' );
	btn.textContent = 'Eval';
	btn.setAttribute('style', 'width: 5%; position: absolute; bottom: 0; right: 0;' );
	function submitScript() {

pl12133

function isInert(node) {
	// See https://www.w3.org/TR/html5/editing.html#inert
	let sty = getComputedStyle(node);
	return node.offsetHeight <= 0 || /hidden/.test(sty.getPropertyValue('visibility'));
}
function focusNext(e) {
	// Selector lifted from `jkup/focusable.git`
	let focusable = Array.from(document.querySelectorAll('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, [tabindex="0"], [contenteditable], audio[controls], video[controls]')),
		step = e && e.shiftKey ? -1 : 1,
		activeIndex = focusable.indexOf(document.activeElement),

pl12133

// This is mostly working but also useless, because the audio volume will periodically be reset during the discussion.

window.__hangoutsVolumeBookmarkletCleanup = (function createAudioModMenu(window, undefined) {
	if (window.__hangoutsVolumeBookmarkletCleanup) {
		window.__hangoutsVolumeBookmarkletCleanup();
	}
	var document = window.document;
	var participants = Array.from(document.querySelector('[aria-label="Video call participants"]').childNodes).slice(0, -1);
	var audios = Array.from(document.querySelectorAll('audio')).reverse();
	var children = [];

pl12133

import { h } from 'preact';

function lastChild(arr) {
	return arr && arr.length ? arr[arr.length - 1] : undefined;
}

function get(obj, key, def, p) {
	p = 0;
	key = key.split ? key.split('.') : key;
	while (obj && p<key.length) obj = obj[key[p++]];

pl12133

    <!-- Defaults -->
    <link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
    <link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
    <!-- Android -->
    <link rel="icon" type="image/png" href="/android-chrome-36x36.png" sizes="36x36">
    <link rel="icon" type="image/png" href="/android-chrome-48x48.png" sizes="48x48">
    <link rel="icon" type="image/png" href="/android-chrome-72x72.png" sizes="72x72">
    <link rel="icon" type="image/png" href="/android-chrome-96x96.png" sizes="96x96">
    <link rel="icon" type="image/png" href="/android-chrome-144x144.png" sizes="144x144">

pl12133

function breakOnUrlMatch(str, callback) {
       let nextOpen = XMLHttpRequest.prototype.open;
       XMLHttpRequest.prototype.open = function monkeypatchedOpen(...args) {
               let url = args[1];
               if (url && url.indexOf(str) >= 0) { if (callback()) { return; } }
//               console.log('XHR for ', url);
               return nextOpen(...args);
       }

       let nextFetch = window.fetch;