Implemented basic stream preview

src/components/paneConnectComponents/hostDisplay.vue

@@ -1,19 +1,19 @@
 <template>
-<div class="host-display">
-	<h2>Debug</h2>
-	<div v-if="$store.state.connected">
-		<p><b>Host:</b> {{ $store.state.host }}</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>
+	<div class="host-display">
+		<h2>Debug</h2>
+		<div v-if="$store.state.connected">
+			<p><b>Host:</b> {{ $store.state.host }}</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>
+		</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>