App Javascript refactor (#56)

* objectify app away from window. wip

* fix messaging obj binding; put logo behind video; fix /null issue with temp logo image

* first pass at js refactor

* remove unused files that had been consolidated during refactor

* set up vue before getting config

* add a few comments

* dont use big arrow function, just bind, for safari

* add airplay after instantiating video; check if input exists before disabling it;:

* only set poster on pause during playback, and onEnded; take out sample videoJS tech options

* disable chat after 5mins after going offline

* move 'online' class to video container as it conflicts with dynamically change classnames from non-vue sources

* disable chat based on lastdisconnecttime

* fix typo; do offline mode onEnded instead of status offline

* move offline ui display things to offline mode function; move poster setting on pause to main app to keep player obj cleaner; use opacity to hide video element on offline as sometimes control bars may still linger with vis:hidden

* fixes'

* don't autoplay. just show play button when stream is online so that it's easier to start playign without looking for the unmute button

* clean up console logs

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

webroot/js/player.js

@@ -0,0 +1,115 @@
+// https://docs.videojs.com/player
+
+class OwncastPlayer {
+  constructor() {
+    window.VIDEOJS_NO_DYNAMIC_STYLE = true; // style override
+
+    this.vjsPlayer = null;
+
+    this.appPlayerReadyCallback = null;
+    this.appPlayerPlayingCallback = null;
+    this.appPlayerEndedCallback = null;
+
+    // bind all the things because safari
+    this.startPlayer = this.startPlayer.bind(this);
+    this.handleReady = this.handleReady.bind(this);
+    this.handlePlaying = this.handlePlaying.bind(this);
+    this.handleEnded = this.handleEnded.bind(this);
+    this.handleError = this.handleError.bind(this);
+  }
+  init() {
+    this.vjsPlayer = videojs(VIDEO_ID, VIDEO_OPTIONS);
+    this.addAirplay();
+    this.vjsPlayer.ready(this.handleReady);
+  }
+
+  setupPlayerCallbacks(callbacks) {
+    const { onReady, onPlaying, onEnded, onError } = callbacks;
+
+    this.appPlayerReadyCallback = onReady;
+    this.appPlayerPlayingCallback = onPlaying;
+    this.appPlayerEndedCallback = onEnded;
+    this.appPlayerErrorCallback = onError;
+  }
+
+  // play
+  startPlayer() {
+    this.log('Start playing');
+    this.vjsPlayer.src(VIDEO_SRC);
+    // this.vjsPlayer.play();
+  };
+
+  handleReady() {
+    this.log('on Ready');
+    this.vjsPlayer.on('error', this.handleError);
+    this.vjsPlayer.on('playing', this.handlePlaying);
+    this.vjsPlayer.on('ended', this.handleEnded);
+
+    if (this.appPlayerReadyCallback) {
+      // start polling
+      this.appPlayerReadyCallback();
+    }
+  }
+
+  handlePlaying() {
+    this.log('on Playing');
+    if (this.appPlayerPlayingCallback) {
+      // start polling
+      this.appPlayerPlayingCallback();
+    }
+  }
+
+  handleEnded() {
+    this.log('on Ended');
+    if (this.appPlayerEndedCallback) {
+      this.appPlayerEndedCallback();
+    }
+    this.setPoster();
+  }
+
+  handleError(e) {
+    this.log(`on Error: ${JSON.stringify(e)}`);
+    if (this.appPlayerEndedCallback) {
+      this.appPlayerEndedCallback();
+    }
+  }
+
+  setPoster() {
+    const cachebuster = Math.round(new Date().getTime() / 1000);
+    const poster = POSTER_THUMB + "?okhi=" + cachebuster;
+
+    this.vjsPlayer.poster(poster);
+  }
+
+  log(message) {
+    console.log(`>>> Player: ${message}`);
+  }
+
+  addAirplay() {
+    videojs.hookOnce('setup', function (player) {
+      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!
+          constructor: function () {
+            videoJsButtonClass.call(this, player);
+          }, // notice the comma
+    
+          handleClick: function () {
+            const videoElement = document.getElementsByTagName('video')[0];
+            videoElement.webkitShowPlaybackTargetPicker();
+          }
+        });
+    
+        var concreteButtonInstance = this.vjsPlayer.controlBar.addChild(new concreteButtonClass());
+        concreteButtonInstance.addClass("vjs-airplay");
+      }
+    });  
+  }
+  
+
+}
+