Dreamview: updated loading page for the dreamview in offline mode

hackcat · Dec 18, 2017 · 778f459 · 778f459
1 parent 29ba038
commit 778f459
Show file tree

Hide file tree

Showing 6 changed files with 35 additions and 8 deletions.
diff --git a/modules/dreamview/frontend/src/components/Layouts/MainView.js b/modules/dreamview/frontend/src/components/Layouts/MainView.js
@@ -49,7 +49,7 @@ export default class MainView extends React.Component {
 
         if (hmi.showNavigationMap) {
             return <Navigation height={sceneDimension.height}/>;
-        } else if (!isInitialized) {
+        } else if (!isInitialized && !OFFLINE_PLAYBACK) {
             return <Loader height={sceneDimension.height}/>;
         } else {
             return <SceneView />;

diff --git a/modules/dreamview/frontend/src/components/Offlineview.js b/modules/dreamview/frontend/src/components/Offlineview.js
@@ -4,6 +4,7 @@ import { inject, observer } from "mobx-react";
 import Header from "components/Header";
 import MainView from "components/Layouts/MainView";
 import ToolView from "components/Layouts/ToolView";
+import Loader from "components/common/Loader";
 import WS from "store/websocket";
 
 
@@ -34,6 +35,14 @@ export default class Dreamview extends React.Component {
     render() {
         const { isInitialized, dimension, sceneDimension, options, hmi } = this.props.store;
 
+        if (!isInitialized) {
+            return (
+                <div className="offlineview">
+                    <Loader extraClasses="offline-loader"/>
+                </div>
+            );
+        }
+
         return (
             <div className="offlineview">
                 <MainView />

diff --git a/modules/dreamview/frontend/src/components/common/Loader.js b/modules/dreamview/frontend/src/components/common/Loader.js
@@ -1,18 +1,23 @@
 import React from "react";
 
+import classNames from "classnames";
+
 import RENDERER from "renderer";
 import loaderImg from "assets/images/logo_apollo.png";
+import loaderGif from "assets/images/loader_apollo.gif";
 
 
 export default class Loader extends React.Component {
     render() {
-        const { height } = this.props;
-        const message = OFFLINE_PLAYBACK ? "" : "Please send car initial position and map data.";
+        const { height, extraClasses } = this.props;
+        const message = OFFLINE_PLAYBACK
+                            ? "Loading ...." : "Please send car initial position and map data.";
+        const imgSrc = OFFLINE_PLAYBACK ? loaderGif : loaderImg;
 
         return (
-            <div className="loader" style={{height: height}}>
-                <div className="img-container">
-                    <img src={loaderImg} alt="Loader"/>
+            <div className="loader"style={{height: height}}>
+                <div className={classNames("img-container", extraClasses)}>
+                    <img src={imgSrc} alt="Loader"/>
                     <div className="status-message">{message}</div>
                 </div>
             </div>

diff --git a/modules/dreamview/frontend/src/styles/main.scss b/modules/dreamview/frontend/src/styles/main.scss
@@ -1132,6 +1132,8 @@ body {
     flex: 0 0 auto;
 
     position: relative;
+    width: 100%;
+    height: 100%;
     background-color: #000C17;
 
     .img-container {
@@ -1171,6 +1173,17 @@ body {
             }
         }
     }
+
+    .offline-loader {
+        width: 80%;
+
+        .status-message {
+            position: relative;
+            top: -80px;
+
+            font-size: 3.5vw;
+        }
+    }
 }
 
 .video {

diff --git a/modules/dreamview/frontend/webpack.config.js b/modules/dreamview/frontend/webpack.config.js
@@ -92,7 +92,7 @@ module.exports = {
                 // first, and then file-loader.
                 //
                 // Now you can import images just like js.
-                test: /\.(png|jpe?g|svg|mp4|mov)$/i,
+                test: /\.(png|jpe?g|svg|mp4|mov|gif)$/i,
                 use: [
                     {
                         loader: "file-loader",

diff --git a/modules/dreamview/frontend/webpack.offline.config.js b/modules/dreamview/frontend/webpack.offline.config.js
@@ -93,7 +93,7 @@ module.exports = {
                 // first, and then file-loader.
                 //
                 // Now you can import images just like js.
-                test: /\.(png|jpe?g|svg|mp4|mov)$/i,
+                test: /\.(png|jpe?g|svg|mp4|mov|gif)$/i,
                 use: [
                     {
                         loader: "file-loader",