fix glitch with loading livestream when hitting dashboard page first

Dockerfile

@@ -122,6 +122,7 @@ RUN cp /home/agent/data/config/config.json /home/agent/data/config.template.json
 # Set permissions correctly
 
 RUN chown -R agent:kerberosio /home/agent/data
+RUN chown -R agent:kerberosio /home/agent/www
 
 ###########################
 # Grant the necessary root capabilities to the process trying to bind to the privileged port

ui/src/index.scss

@@ -157,9 +157,7 @@ body {
   color: rgba(255, 255, 255, 0.75);
   padding: size(1) 0;
 }
-.environment {
-  padding: 15px 0;
-}
+
 .environment.demo {
   background: repeating-linear-gradient(
     -55deg,
@@ -170,7 +168,7 @@ body {
   );
   text-align: center;
   color: rgba(255, 255, 255, 0.75);
-  padding: size(1) 0;
+  padding: 12px 0;
 }
 
 .environment.staging {
@@ -183,7 +181,7 @@ body {
   );
   text-align: center;
   color: white;
-  padding: size(1) 0;
+  padding: 12px 0;
 }
 
 .environment.acceptance {
@@ -196,5 +194,5 @@ body {
   );
   text-align: center;
   color: white;
-  padding: size(1) 0;
+  padding: 12px 0;
 }

ui/src/pages/Dashboard/Dashboard.jsx

@@ -37,6 +37,7 @@ class Dashboard extends React.Component {
       currentRecording: '',
       initialised: false,
     };
+    this.initialiseLiveview = this.initialiseLiveview.bind(this);
   }
 
   componentDidMount() {
@@ -48,30 +49,11 @@ class Dashboard extends React.Component {
         });
       });
     }
+    this.initialiseLiveview();
   }
 
   componentDidUpdate() {
-    const { initialised } = this.state;
-    if (!initialised) {
-      const { connected, dispatchSend } = this.props;
-      const message = {
-        message_type: 'stream-sd',
-      };
-      if (connected) {
-        dispatchSend(message);
-      }
-
-      const requestStreamInterval = interval(2000);
-      this.requestStreamSubscription = requestStreamInterval.subscribe(() => {
-        if (connected) {
-          dispatchSend(message);
-        }
-      });
-
-      this.setState({
-        initialised: true,
-      });
-    }
+    this.initialiseLiveview();
   }
 
   componentWillUnmount() {
@@ -101,6 +83,30 @@ class Dashboard extends React.Component {
     return Math.round(Date.now() / 1000);
   }
 
+  initialiseLiveview() {
+    const { initialised } = this.state;
+    if (!initialised) {
+      const message = {
+        message_type: 'stream-sd',
+      };
+      const { connected, dispatchSend } = this.props;
+      if (connected) {
+        dispatchSend(message);
+      }
+
+      const requestStreamInterval = interval(2000);
+      this.requestStreamSubscription = requestStreamInterval.subscribe(() => {
+        const { connected: isConnected } = this.props;
+        if (isConnected) {
+          dispatchSend(message);
+        }
+      });
+      this.setState({
+        initialised: true,
+      });
+    }
+  }
+
   openModal(file) {
     this.setState({
       open: true,