Move all remote dependencies to be local (#220)

* Experiment with javascript bundling

* Experiment with snowpack. Making progress

* Success!  Uses local js modules and assets and no cdns

* Missing local css

webroot/js/components/chat/chat-input.js

@@ -1,8 +1,9 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
-import { EmojiButton } from 'https://unpkg.com/@joeattardi/emoji-button@4.2.0/dist/index.js';
+import { EmojiButton } from '/js/web_modules/@joeattardi/emoji-button.js';
+
 import ContentEditable, { replaceCaret } from './content-editable.js';
 import { generatePlaceholderText, getCaretPosition, convertToText, convertOnPaste } from '../../utils/chat.js';
 import { getLocalStorage, setLocalStorage, classNames } from '../../utils/helpers.js';

webroot/js/components/chat/chat.js

@@ -1,5 +1,5 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import Message from './message.js';

webroot/js/components/chat/content-editable.js

@@ -6,7 +6,7 @@ and here:
 https://stackoverflow.com/questions/22677931/react-js-onchange-event-for-contenteditable/27255103#27255103
 
 */
-import { Component, createRef, h } from 'https://unpkg.com/preact?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
 
 export function replaceCaret(el) {
   // Place the caret at the end of the element

webroot/js/components/chat/message.js

@@ -1,5 +1,5 @@
-import { h, Component } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { messageBubbleColorForString } from '../../utils/user-colors.js';

webroot/js/components/chat/username.js

@@ -1,5 +1,5 @@
-import { h, Component, createRef } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h, Component, createRef } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 
 import { generateAvatar, setLocalStorage } from '../../utils/helpers.js';

webroot/js/components/player.js

@@ -1,5 +1,7 @@
 // https://docs.videojs.com/player
 
+import videojs from '/js/web_modules/videojs/dist/video.min.js';
+
 const VIDEO_ID = 'video';
 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 const URL_STREAM = `/hls/stream.m3u8`;
@@ -52,13 +54,14 @@ class OwncastPlayer {
   }
 
   init() {
-    videojs.Vhs.xhr.beforeRequest = function (options) {
+    this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
+
+    this.vjsPlayer.beforeRequest = function (options) {
       const cachebuster = Math.round(new Date().getTime() / 1000);
       options.uri = `${options.uri}?cachebust=${cachebuster}`;
       return options;
     };
 
-    this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
     this.addAirplay();
     this.vjsPlayer.ready(this.handleReady);
   }
@@ -75,10 +78,10 @@ class OwncastPlayer {
   // play
   startPlayer() {
     this.log('Start playing');
-    const source = { ...VIDEO_SRC }
+    const source = { ...VIDEO_SRC };
     this.vjsPlayer.src(source);
     // this.vjsPlayer.play();
-  };
+  }
 
   handleReady() {
     this.log('on Ready');
@@ -117,7 +120,7 @@ class OwncastPlayer {
 
   setPoster() {
     const cachebuster = Math.round(new Date().getTime() / 1000);
-    const poster = POSTER_THUMB + "?okhi=" + cachebuster;
+    const poster = POSTER_THUMB + '?okhi=' + cachebuster;
 
     this.vjsPlayer.poster(poster);
   }
@@ -131,7 +134,6 @@ class OwncastPlayer {
       if (window.WebKitPlaybackTargetAvailabilityEvent) {
         var videoJsButtonClass = videojs.getComponent('Button');
         var concreteButtonClass = videojs.extend(videoJsButtonClass, {
-
           // The `init()` method will also work for constructor logic here, but it is
           // deprecated. If you provide an `init()` method, it will override the
           // `constructor()` method!
@@ -145,8 +147,10 @@ class OwncastPlayer {
           },
         });
 
-        var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
-        concreteButtonInstance.addClass("vjs-airplay");
+        var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(
+          new concreteButtonClass()
+        );
+        concreteButtonInstance.addClass('vjs-airplay');
       }
     });
   }

webroot/js/components/social.js

@@ -1,5 +1,5 @@
-import { h } from 'https://unpkg.com/preact?module';
-import htm from 'https://unpkg.com/htm?module';
+import { h } from '/js/web_modules/preact.js';
+import htm from '/js/web_modules/htm.js';
 const html = htm.bind(h);
 import { SOCIAL_PLATFORMS } from '../utils/social.js';
 import { classNames } from '../utils/helpers.js';