feat(scene): No animation for scene in timeline

Inform the user with an icon that a scene that is part of the timeline is missing at least 1
animation.

package.json

@@ -34,7 +34,7 @@
     "@apollo-elements/lit-apollo": "^0.0.5",
     "@material/layout-grid": "^0.39.0",
     "@material/mwc-button": "^0.7.1",
-    "@material/mwc-icon": "^0.7.1",
+    "@material/mwc-icon": "^0.9.1",
     "@polymer/app-layout": "3.0.1",
     "@polymer/iron-icons": "3.0.1",
     "@polymer/iron-pages": "3.0.1",

src/components/timeline/timeline-scene.js

@@ -1,11 +1,13 @@
-import { LitElement, html } from 'lit-element'
+import { LitElement, html, css } from 'lit-element'
 import { repeat } from 'lit-html/directives/repeat.js'
 import { store } from '../../reduxStore.js'
 import { connect } from 'pwa-helpers/connect-mixin.js'
 import './timeline-animation.js'
 import { getAnimation, getAnimations, getLive } from '../../selectors/index.js'
 import { SCENE_TYPE_STATIC } from '../../constants/timeline.js'
 import { setSceneOnTimeline } from '../../actions/index.js'
+import '@material/mwc-icon/mwc-icon.js'
+
 
 /*
  * Handle a scene in a timeline
@@ -15,6 +17,7 @@ class TimelineScene extends connect(store)(LitElement) {
     return {
       timelineScene: { type: Object },
       progress: { type: Number },
+      // All animations that exist in luminave, not only the ones assigned to the scene
       animations: { type: Array },
       live: { type: Boolean }
     }
@@ -42,6 +45,26 @@ class TimelineScene extends connect(store)(LitElement) {
     }
   }
 
+  /*
+   * This is broken as this.animations are ALL animations from all scenes... 
+   */
+  noAnimationInScene(animations) {
+
+    if (animations.length === 0) {
+      return html`<mwc-icon title="No animation is assigned to this Scene">error</mwc-icon>`
+    }
+
+    return html``
+  }
+
+  static get styles() {
+    return css`
+      mwc-icon {
+        color: var(--default-warning-color);
+      }
+    `
+  }
+
   render() {
     const { timelineScene, progress, live } = this
 
@@ -56,6 +79,8 @@ class TimelineScene extends connect(store)(LitElement) {
 
       <div>
         <h3>${timelineScene.scene.name}</h3>
+
+        ${this.noAnimationInScene(timelineScene.scene.animations)}
         
         ${repeat(timelineScene.scene.animations, animationId => html`
 

src/index.html

@@ -47,6 +47,9 @@
   <meta property="og:site_name" content="luminave">
   <meta property="og:image" content="/assets/icons/icon-192x192.png" />
 
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet">
+
 	<style>
     body {
       margin: 0;