- show offline state when stream ends and video is not playing (#130)

- style fixes

webroot/js/app.js

@@ -259,6 +259,10 @@ export default class App extends Component {
       streamOnline: false,
       streamStatusMessage: MESSAGE_OFFLINE,
     });
+
+    if (this.player.vjsPlayer && this.player.vjsPlayer.paused()) {
+      this.handlePlayerEnded();
+    }
   }
 
   // play video!
@@ -335,7 +339,6 @@ export default class App extends Component {
       windowHeight,
       windowWidth,
     } = state;
-    console.log("========sessionMaxViewerCount",sessionMaxViewerCount)
 
     const {
       version: appVersion,

webroot/styles/app.css

@@ -78,7 +78,7 @@ header {
   width: 100%;
 
   min-height: 480px;
-  max-height: calc(100vh - var(--header-height) - 2rem);
+  max-height: calc(100vh - var(--header-height) - 3rem);
   background-size: 30%;
 }
 #video-container #video {
@@ -154,6 +154,7 @@ header {
   position: relative;
   width: 100%;
   height: auto;
+  min-height: 800px;
 }
 /* .single-col #video-container {
   min-height: auto;
@@ -197,63 +198,9 @@ header {
     --right-col-width: 20em;
     --user-image-width: 6em;
   }
+  #video-container {
+    min-height: 240px;
+  }
 }
 
 /* ************************************************8 */
-
-
-/* single col layout */
-/* @media screen and (max-width: 640px ) {
-  :root {
-    --right-col-width: 0;
-    --video-container-height: 40vh;
-  }
-  #logo-container {
-    display: none;
-  }
-  header h1 {
-    max-width: 58%;
-  }
-  #user-options-container {
-    max-width: 41%;
-  }
-
-  #chat-container {
-    width: 100%;
-    position: static;
-    height: calc(100vh - var(--header-height) - var(--video-container-height) - 3vh)
-  }
-  #messages-container {
-    min-height: unset;
-  }
-  #user-content {
-    width: 100%;
-  }
-  #stream-info {
-    width: 100%;
-  }
-  #video-container {
-    width: 100%;
-  }
-  .chat #video-container {
-    width: 100%;
-  }
-  .chat #user-content {
-    display: none;
-  }
-  .chat footer {
-    display: none;
-  }
-} */
-
-
-
-
-/* @media screen and (max-height: 860px ) {
-  :root {
-    --video-container-height: 40vh;
-  }
-  .user-content {
-    flex-direction: column;
-  }
-} */