feat: allow single cams to fill the card space

Signed-off-by: Craig Bassett <craig.bassett@gmail.com>

src/components/cards/dashboard/CameraCard.vue

@@ -15,7 +15,11 @@
       :camera="dialogState.camera"
     ></camera-dialog>
 
-    <v-row class="ma-2" justify="space-around">
+    <v-row
+      v-if="cameras.length > 1 || !fillSpace"
+      class="ma-2"
+      justify="space-around"
+    >
       <template v-for="camera in cameras">
         <v-col
           v-if="!collapsed"
@@ -28,6 +32,12 @@
         </v-col>
       </template>
     </v-row>
+    <camera
+      v-if="!collapsed && fillSpace && cameras.length === 1"
+      :camera="cameras[0]"
+      flat
+      @click="handleCameraClick(cameras[0])"
+    ></camera>
 
   </collapsable-card>
 </template>
@@ -56,10 +66,15 @@ export default class CameraCard extends Mixins(StateMixin) {
   collapsed = false
 
   get cols () {
+    if (this.fillSpace) return 12
     if (this.cameras.length <= 2) return 6
     if (this.cameras.length > 2) return 4
   }
 
+  get fillSpace (): boolean {
+    return this.$store.state.cameras.fillSpace && this.cameras.length === 1
+  }
+
   get inLayout (): boolean {
     return (this.$store.state.config.layoutMode)
   }

src/components/dialogs/CameraDialog.vue

@@ -2,7 +2,7 @@
   <v-dialog
     @input="$emit('input', $event)"
     :value="value"
-    :width="640"
+    max-width="90vh"
   >
     <camera
       :camera="camera"

src/components/inputs/FluiddSetting.vue

@@ -8,8 +8,10 @@
   >
     <v-col :cols="cols[0]" class="setting-title">
       <slot name="title">{{ title }}</slot>
-      <div v-if="hasSubTitle">
-        <slot name="subtitle"></slot>
+      <div class="setting-sub-title grey--text" v-if="hasSubTitle">
+        <slot name="subtitle">
+            {{ subTitle }}
+        </slot>
       </div>
     </v-col>
     <v-col :cols="cols[1]" class="setting-controls" align-self="center">
@@ -26,6 +28,12 @@ export default class Setting extends Vue {
   @Prop({ type: String, default: '' })
   title!: string;
 
+  @Prop({ type: String })
+  subTitle!: string;
+
+  @Prop({ type: String })
+  help!: string;
+
   @Prop({ type: Number, default: 6 })
   rCols!: number;
 
@@ -38,7 +46,11 @@ export default class Setting extends Vue {
   }
 
   get hasSubTitle () {
-    return (this.$slots.subtitle || this.$scopedSlots.subtitle)
+    return (
+      this.$slots.subtitle ||
+      this.$scopedSlots.subtitle ||
+      this.subTitle
+    )
   }
 
   get classes () {
@@ -71,6 +83,11 @@ export default class Setting extends Vue {
     padding-bottom: 12px;
     padding-right: 12px;
   }
+
+  .col.setting-title > .setting-sub-title {
+    font-size: 0.875rem;
+  }
+
   .setting__link {
     cursor: pointer;
     user-select: none;

src/components/widgets/camera/Camera.vue

@@ -1,33 +1,36 @@
 <template>
-  <v-card
-    color="secondary"
-    :elevation="6"
-    v-on="$listeners"
-  >
-    <img
-      v-if="camera.type === 'mjpgstream' || camera.type === 'mjpgadaptive'"
-      :src="cameraUrl"
-      class="webcam"
-      :style="cameraTransformStyle"
-      @load="handleImgLoad"
-    />
-
-    <video
-      v-if="camera.type === 'ipstream'"
-      :src="cameraUrl"
-      autoplay
-      class="webcam"
-      :style="cameraTransformStyle"
-    />
-
-    <v-card-text
-      v-if="camera.name"
-      class="card-heading py-1 d-flex align-center justify-space-between"
+  <div>
+    <v-card
+      :elevation="(flat) ? 0 : 6"
+      v-on="$listeners"
+      color="secondary"
+      class="rounded-t-0"
     >
-      <span class="font-weight-light" style="font-size: 1.0rem;">{{ camera.name }}</span>
-      <small v-if="this.camera.type === 'mjpgadaptive' && this.time">FPS: {{ currentFPS }}</small>
-    </v-card-text>
-  </v-card>
+      <img
+        v-if="camera.type === 'mjpgstream' || camera.type === 'mjpgadaptive'"
+        :src="cameraUrl"
+        class="webcam"
+        :style="cameraTransformStyle"
+        @load="handleImgLoad"
+      />
+
+      <video
+        v-if="camera.type === 'ipstream'"
+        :src="cameraUrl"
+        autoplay
+        class="webcam"
+        :style="cameraTransformStyle"
+      />
+
+      <v-card-text
+        v-if="camera.name"
+        class="card-heading py-1 d-flex align-center justify-space-between"
+      >
+        <span class="font-weight-light" style="font-size: 1.0rem;">{{ camera.name }}</span>
+        <small v-if="this.camera.type === 'mjpgadaptive' && this.time">FPS: {{ currentFPS }}</small>
+      </v-card-text>
+    </v-card>
+  </div>
 </template>
 
 <script lang="ts">
@@ -42,6 +45,9 @@ export default class CameraCard extends Vue {
   @Prop({ type: Object, required: true })
   camera!: CameraConfig
 
+  @Prop({ type: Boolean, default: false })
+  flat!: boolean
+
   // Adaptive load counters
   request_start_time = performance.now()
   start_time = performance.now()

src/components/widgets/settings/CameraSettings.vue

@@ -18,6 +18,21 @@
         </btn>
       </fluidd-setting>
 
+      <v-divider></v-divider>
+
+      <fluidd-setting
+        :title="$t('app.setting.label.camera_fillspace')"
+        :r-cols="2"
+        :sub-title="$t('app.setting.label.camera_fillspace_help')"
+      >
+        <v-switch
+          @click.native.stop
+          v-model="fillSpace"
+          hide-details
+          class="mb-5"
+        ></v-switch>
+      </fluidd-setting>
+
       <v-divider v-if="cameras.length > 0"></v-divider>
 
       <template v-for="(camera, i) in cameras">
@@ -68,6 +83,14 @@ export default class CameraSettingsCard extends Vue {
     camera: null
   }
 
+  get fillSpace () {
+    return this.$store.state.cameras.fillSpace
+  }
+
+  set fillSpace (value: boolean) {
+    this.$store.dispatch('cameras/updateFillSpace', value)
+  }
+
   get cameras () {
     return this.$store.getters['cameras/getCameras']
   }

src/locales/en.yaml

@@ -214,6 +214,8 @@ app:
       tool: Tool
       thermal_presets: Thermal Presets
     label:
+      camera_fillspace: Fill space
+      camera_fillspace_help: With only one enabled camera, fill the dashboard camera space.
       camera_url: Camera Url
       printer_name: Printer Name
       language: Display Language

src/store/cameras/actions.ts

@@ -32,5 +32,13 @@ export const actions: ActionTree<CamerasState, RootState> = {
   async removeCamera ({ commit, state }, payload) {
     commit('setRemoveCamera', payload)
     SocketActions.serverWrite('cameras.cameras', state.cameras)
+  },
+
+  /**
+   * Sets fillspace
+   */
+  async updateFillSpace ({ commit }, payload) {
+    commit('setFillSpace', payload)
+    SocketActions.serverWrite('cameras.fillSpace', payload)
   }
 }

src/store/cameras/index.ts

@@ -8,6 +8,7 @@ import { v4 as uuidv4 } from 'uuid'
 
 export const defaultState = (): CamerasState => {
   return {
+    fillSpace: true,
     cameras: [
       {
         id: uuidv4(),

src/store/cameras/mutations.ts

@@ -42,5 +42,12 @@ export const mutations: MutationTree<CamerasState> = {
   setRemoveCamera (state, payload) {
     const i = state.cameras.findIndex(camera => camera.id === payload.id)
     state.cameras.splice(i, 1)
+  },
+
+  /**
+   * Sets Fillspace
+   */
+  setFillSpace (state, payload) {
+    state.fillSpace = payload
   }
 }

src/store/cameras/types.ts

@@ -1,4 +1,5 @@
 export interface CamerasState {
+  fillSpace: boolean;
   cameras: CameraConfig[];
 }