Loader at start

This allows the api to completely load before a user enters a room.

Author: kyle8998

css/style.css

@@ -19,6 +19,24 @@
      display: none;
  }
 
+ #page {
+    display: none;
+}
+/* Loader */
+ #loading {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(192, 192, 192, 0.5);
+    background-image: url("/img/loader.gif");
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
  html, body {
      max-width: 100%;
      overflow-x: hidden;

img/loader.gif

@@ -65,9 +65,14 @@
     <!-- Page Content -->
     <div class="container">
 
+        <!-- Loading page -->
+        <!-- Loader is currently dependent on the dailymotion api because it is the slowest -->
+        <div id="loading"></div>
+
         <!-- User Form (First Page) -->
         <div id="userFormArea" class="row">
             <div class="col-md-12">
+                <!-- ADD DESCRIPTION HERE -->
                 <form id="userForm">
                     <div class="form-group">
                         <label>Enter Name</label>

index.html

@@ -21,6 +21,8 @@ setTimeout(function() {
 
     dailyPlayer.addEventListener('apiready', function(e) {
         console.log('api ready', e);
+        // When api is ready
+        document.getElementById('loading').style.display = 'none';
     });
 
     // Play Event

js/dm.js

@@ -221,8 +221,11 @@ io.sockets.on('connection', function(socket) {
         io.sockets.adapter.rooms['room-' + socket.roomnum].host = host
         // Sets the default values when first initializing
         if (init) {
+            // Default Player
             io.sockets.adapter.rooms['room-' + socket.roomnum].currPlayer = 0
-            io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo = ''
+            // Default video
+            io.sockets.adapter.rooms['room-' + socket.roomnum].currVideo = 'M7lc1UVf-VE'
+            // Host username
             io.sockets.adapter.rooms['room-' + socket.roomnum].hostName = socket.username
         }