Style cleanup

src/App.vue

@@ -24,12 +24,12 @@ export default {
   name: 'App',
   components: {
     Scene,
-    Frame,
+    Frame
   },
   computed: {
     scenes () {
       return this.$store.state.scenes
-    },
+    }
   }
 }
 </script>

src/components/Scene.vue

@@ -8,7 +8,7 @@
         <a-button-group>
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item v-for="s in scenes" v-if="s != scene">
+            <a-menu-item v-for="s in scenes" v-if="s != scene" :key="s.id">
               <router-link :to="{ name: 'SceneView', params: { id: s.id }}" v-on:click.native="sceneFade(s)">{{ s.name }}</router-link>
             </a-menu-item>
           </a-menu>
@@ -19,7 +19,7 @@
 
         <a-dropdown>
           <a-menu slot="overlay">
-            <a-menu-item v-for="s in scenes" v-if="s != scene">
+            <a-menu-item v-for="s in scenes" v-if="s != scene" :key="s.id">
               <router-link :to="{ name: 'SceneView', params: { id: s.id }}" v-on:click.native="sceneCut(s)">{{ s.name }}</router-link>
             </a-menu-item>
           </a-menu>
@@ -42,7 +42,6 @@
             </DraggableFrame>
           </DragParent>
         </div>
-        <div v-for="frame in frames" :key="frame.id">{{ frame.position }}</div>
       </a-tab-pane>
       <a-tab-pane tab="Timing" key="2">
         <a-slider :defaultValue="30" />

src/components/SceneView.vue

@@ -43,6 +43,7 @@ export default {
 
 .videoframe {
   border: none;
+  background: #eee;
   width: 100%;
   height: 180px;
 }

src/components/SourceSelector.vue

@@ -3,13 +3,15 @@
     <a-select-option value="-:-1"><a-badge status="default" text="Blank" /></a-select-option>
     <a-select-opt-group>
       <span slot="label"><a-icon type="video-camera"/> Feed</span>
-      <a-select-option :value="'feed:' + source.id" v-for="source in feeds">
+      <a-select-option :value="'feed:' + source.id" v-for="source in feeds" :key="source.id">
         <a-badge :status="mapState(source.state)" :text="source.name" />
       </a-select-option>
     </a-select-opt-group>
     <a-select-opt-group>
       <span slot="label"><a-icon type="picture"/> Image</span>
-      <a-select-option :value="'image:' + image.id" v-for="image in images">{{ image.source }}</a-select-option>
+      <a-select-option :value="'image:' + image.id" v-for="image in images" :key="image.id">
+        {{ image.source }}
+      </a-select-option>
     </a-select-opt-group>
     <a-select-opt-group>
       <span slot="label">Others</span>
@@ -23,7 +25,7 @@ export default {
   props: ['value'],
   computed: {
     feeds () { return this.$store.state.feeds },
-    images () { return this.$store.state.images },
+    images () { return this.$store.state.images }
   },
   methods: {
     mapState (state) {

src/store.js

@@ -62,10 +62,6 @@ export default new Vuex.Store({
         'id': scene.id,
         [type + 'alpha']: alpha
       })
-
-      /*return api.patch('/scenes/' + scene.id, {
-        [type + 'alpha']: alpha
-      })*/
     },
     setFrameAlpha ({ commit }, [sceneId, frameId, side, alpha]) {
       console.info('Setting alpha for', frameId, alpha)