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/styles/layout.css

@@ -243,8 +243,8 @@ h2 {
 }
 
 #username-avatar {
-  height: 1.75em;
-  width: 1.75em;
+  height: 2.1em;
+  width: 2.1em;
   margin-right: .5em;
 }
 #username-display {
@@ -290,6 +290,10 @@ h2 {
   height: calc(var(--video-container-height));
   width: 100%;
   margin-top: var(--header-height);
+  background-position: center center;
+  background-repeat: no-repeat;
+  
+  background-size: 30%; 
 }
 
 .owncast-video-container {
@@ -310,18 +314,19 @@ h2 {
   min-height: 100%
 }
 
-.video-js .vjs-big-play-button {
-  left: 50%;
-  top: 50%;
-  margin-left: -1.5em;
-  margin-top: -0.75em;
-}
 .vjs-airplay .vjs-icon-placeholder::before {
   /* content: 'AP'; */
   content: url("../img/airplay.png");
 }
 
 
+#video {
+  transition: opacity .5s;
+  opacity: 0;
+}
+.online #video {
+  opacity: 1;
+}
 
 
 /* ************************************************8 */
@@ -360,6 +365,7 @@ h2 {
   justify-content: flex-end;
 }
 
+
 #messages-container {
   overflow: auto;
   padding: 1em 0;
@@ -378,6 +384,9 @@ h2 {
 #message-body-form {
   font-size: 1em;
 }
+#message-body-form:disabled{
+  opacity: .5;
+}
 #message-form-actions {
   flex-direction: row;
   justify-content: space-between;