Implemented basic stream preview

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <div v-bind:class="responsiveToggleButton" id="overlay-toggle">
+    <div id="overlay-toggle">
       <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
     </div>
     <div uk-grid class="uk-height-1-1" margin=0>
@@ -11,7 +11,9 @@
         <panelLeft/>
       </div>
       <div class="uk-width-expand">
-        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">Width: {{ window.width }}</div>
+        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">
+          <panelDisplay/>
+        </div>
       </div>
     </div>
   </div>
@@ -28,13 +30,15 @@ UIkit.use(Icons);
 
 // Import components
 import panelLeft from './components/panelLeft.vue'
+import panelDisplay from './components/panelDisplay.vue'
 
 // Export main app
 export default {
   name: 'app',
 
   components: {
-    panelLeft
+    panelLeft,
+    panelDisplay
   },
 
   data: function () {
@@ -69,11 +73,6 @@ export default {
         //'uk-hidden': this.window.width<850,
         'overlay-panel': this.window.width<850
       }
-    },
-    responsiveToggleButton: function () {
-      return {
-        //'uk-hidden': this.window.width>=850,
-      }
     }
   }
 

src/components/paneConnectComponents/hostDisplay.vue

@@ -1,19 +1,19 @@
 <template>
-<div class="host-display">
+	<div class="host-display">
-	<h2>Debug</h2>
+		<h2>Debug</h2>
-	<div v-if="$store.state.connected">
+		<div v-if="$store.state.connected">
-		<p><b>Host:</b> {{ $store.state.host }}</p>
+			<p><b>Host:</b> {{ $store.state.host }}</p>
-		<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
+			<p><b>Base URI:</b> {{ $store.getters.uri }}</p>
-		<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
+			<p v-if="$store.state.apiConfig.name"><b>Device name:</b> {{ $store.state.apiConfig.name }}</p>
+		</div>
+		<div v-else-if="$store.state.waiting">
+			<div uk-spinner></div>
+		</div>
+		<div v-else-if="$store.state.error">
+			<b>Error:</b> {{ $store.state.error }}
+		</div>
+		<div v-else>
+			Enter a hostname and connect to start.
+		</div>
 	</div>
-	<div v-else-if="$store.state.waiting">
-		<div uk-spinner></div>
-	</div>
-	<div v-else-if="$store.state.error">
-		<b>Error:</b> {{ $store.state.error }}
-	</div>
-	<div v-else>
-		Enter a hostname and connect to start.
-	</div>
-</div>
 </template>

src/components/paneDisplayComponents/streamDisplay.vue

@@ -0,0 +1,36 @@
+<template>
+	<div class="streamDisplay">
+		<div class="streamContainer" v-if="$store.state.connected">
+			<img v-bind:src="streamImgUri" alt="Stream">
+		</div>
+	</div>
+</template>
+
+<script>
+// Export main app
+export default {
+  name: 'streanmDisplay',
+
+  computed: {
+    // a computed getter
+    streamImgUri: function () {
+      // `this` points to the vm instance
+      return this.$store.getters.uri + "/stream"
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="less">
+	.streamContainer img {
+		width: 100%;
+		height: 100%;
+		object-fit: contain
+	}
+
+	.streamContainer, .streamDisplay {
+		width: 100%;
+		height: 100%;
+	}
+</style>

src/components/panelDisplay.vue

@@ -0,0 +1,27 @@
+<template>
+  <div id="panelDisplay">
+    <streamDisplay/>
+  </div>
+</template>
+
+<script>
+// Import components
+import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
+
+// Export main app
+export default {
+  name: 'panelDisplay',
+
+  components: {
+    streamDisplay
+  }
+
+}
+</script>
+
+<style lang="less">
+#panelDisplay {
+	width: 100%;
+	height: 100%;
+}
+</style>