Adapt preview styles to new layout

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

Author: marcoambrosini

src/components/MediaDevicesPreview.vue

@@ -250,16 +250,19 @@ export default {
 	},
 
 	watch: {
-		enabled(enabled) {
-			if (this.enabled) {
-				this.mediaDevicesManager.enableDeviceEvents()
-				this.updateAudioStream()
-				this.updateVideoStream()
-			} else {
-				this.mediaDevicesManager.disableDeviceEvents()
-				this.stopAudioStream()
-				this.stopVideoStream()
-			}
+		enabled: {
+			handler: function(enabled) {
+				if (this.enabled) {
+					this.mediaDevicesManager.enableDeviceEvents()
+					this.updateAudioStream()
+					this.updateVideoStream()
+				} else {
+					this.mediaDevicesManager.disableDeviceEvents()
+					this.stopAudioStream()
+					this.stopVideoStream()
+				}
+			},
+			immediate: true,
 		},
 
 		audioInputId(audioInputId) {
@@ -475,7 +478,6 @@ export default {
 <style lang="scss" scoped>
 .preview {
 	display: flex;
-	justify-content: center;
 
 	.icon {
 		background-size: 64px;
@@ -527,14 +529,14 @@ export default {
 }
 
 .preview-video {
+	margin-top: 24px;
 	.preview-not-available .icon {
-		margin-top: 64px;
+		margin-top: 16px;
 		margin-bottom: 16px;
 	}
 
 	video {
 		display: block;
-		max-height: 192px;
 	}
 }
 </style>

src/components/MediaDevicesSelector.vue

@@ -20,7 +20,9 @@
 
 <template>
 	<div class="media-devices-selector">
-		<label :for="deviceSelectorId">{{ deviceSelectorLabel }}</label>
+		<h3 :for="deviceSelectorId">
+			{{ deviceSelectorLabel }}
+		</h3>
 		<Multiselect :id="deviceSelectorId"
 			v-model="deviceSelectedOption"
 			:options="deviceOptions"
@@ -158,16 +160,11 @@ export default {
 
 <style lang="scss" scoped>
 .media-devices-selector {
-	display: flex;
-	align-items: center;
-
-	margin-top: 5px;
-	margin-bottom: 5px;
+	margin-top: 28px;
+	margin-bottom: 8px;
 
 	.multiselect {
-		flex-grow: 1;
-
-		margin-left: 5px;
+		width: 250px;
 	}
 }
 </style>