Move play all clips button to clip info button and create ButtonConne…

…ctor (#187) * Remove combinedInfo prop from Button and create ButtonConnector component * Make styling a little better on Button(Connector) * Remove old play clips button and add click event to clipInfo button * Reset length of clips when removing last clip
sbondCo · May 18, 2021 · f6d28bd · f6d28bd
1 parent 953fb19
commit f6d28bd
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 33 deletions.
diff --git a/src/components/ui/Button.vue b/src/components/ui/Button.vue
@@ -1,14 +1,14 @@
 <template>
   <div class="btnWrapper">
-    <button v-if="combinedInfo" id="outlined" class="infoBtn">
-      <slot></slot>
-    </button>
-
     <button ref="mainBtn" class="mainBtn">
       <div class="content" @[clickEvent]="$emit('click')">
         <Icon v-if="icon" :i="icon" />
 
         <span v-if="text">{{ text }}</span>
+
+        <div v-if="this.$slots.info" class="infoBtn">
+          <slot name="info"></slot>
+        </div>
       </div>
 
       <input
@@ -26,7 +26,7 @@
 </template>
 
 <script lang="ts">
-import { Prop, Component, Vue } from "vue-property-decorator";
+import { Vue, Prop, Component, Watch } from "vue-property-decorator";
 import Icon from "./../Icon.vue";
 
 @Component({
@@ -39,7 +39,6 @@ export default class Button extends Vue {
   @Prop() text: string;
 
   @Prop({ default: false }) disabled: boolean;
-  @Prop() combinedInfo: boolean;
   @Prop() outlined: boolean;
   @Prop({ default: false }) slider: boolean;
   @Prop({ default: 0 }) sliderValue: string;
@@ -58,22 +57,17 @@ export default class Button extends Vue {
     if (this.outlined) this.mainBtn.id += "outlined";
     if (this.slider) this.initSlider();
 
+    // Run these at mount to match default var values passed
     this.handleDisability();
     this.updateSliderValue();
   }
 
-  updated() {
-    this.handleDisability();
-
-    // Update sliderBar value, if slider is enabled and it is updated
-    this.updateSliderValue();
-  }
-
   /**
    * Manage whether button should be disabled or not.
    */
+  @Watch("disabled")
   handleDisability() {
-    // Enable/disable button click event
+    // Enable/disable button click event & `disabled` class
     if (this.disabled) {
       this.clickEvent = "null";
       this.mainBtn.classList.add("disabled");
@@ -114,6 +108,7 @@ export default class Button extends Vue {
     );
   }
 
+  @Watch("sliderValue")
   updateSliderValue() {
     if (this.slider && this.sliderBar) {
       this.sliderBar.value = String(this.sliderValue);
@@ -199,7 +194,7 @@ export default class Button extends Vue {
     flex-flow: row;
     align-items: center;
     height: 100%;
-    padding: 3px;
+    padding: 3px 5px;
     border: unset;
     border: 2px solid $secondaryColor;
     border-radius: 3px;
@@ -220,6 +215,7 @@ export default class Button extends Vue {
     }
 
     &.disabled {
+      background-color: $secondaryColor;
       cursor: not-allowed;
     }
 

diff --git a/src/components/ui/ButtonConnector.vue b/src/components/ui/ButtonConnector.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="container">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component } from "vue-property-decorator";
+
+@Component
+export default class ButtonConnector extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  display: flex;
+  flex-flow: row;
+  height: 100%;
+  border: 2px solid $secondaryColor;
+  border-radius: 3px;
+
+  .btnWrapper {
+    margin-left: 0;
+
+    &:first-child:not(:only-child) ::v-deep .mainBtn {
+      border-right: 2px solid $secondaryColor;
+    }
+
+    &:first-child ::v-deep .mainBtn {
+      border-left: unset;
+      border-radius: 3px 0 0 3px;
+    }
+
+    &:last-child ::v-deep .mainBtn {
+      border-radius: 0 3px 3px 0;
+    }
+
+    ::v-deep #outlined {
+      padding: 5px;
+      border: unset;
+    }
+
+    ::v-deep .mainBtn {
+      border: unset;
+      border-left: 2px solid $secondaryColor;
+      border-radius: unset;
+    }
+  }
+}
+</style>
diff --git a/src/views/VideoPlayer.vue b/src/views/VideoPlayer.vue
@@ -33,26 +33,30 @@
         @click="showTimeAsElapsed ? (showTimeAsElapsed = false) : (showTimeAsElapsed = true)"
       />
 
-      <Button text="ADD CLIP" @click="addClip" />
+      <Button text="Add Clip" @click="addClip" />
 
       <Button icon="add" @click="adjustZoom(true)" />
       <Button icon="min2" @click="adjustZoom(false)" />
 
-      <Button icon="play" text="Play Clips" @click="playClips" />
-
       <div class="rightFromHere"></div>
 
-      <Button icon="arrow" :combinedInfo="continueBtnCI" :disabled="!continueBtnCI" @click="saveClips">
-        <div>
-          <Icon i="clips" wh="18" />
-          <span>{{ numberOfClips }}</span>
-        </div>
-
-        <div>
-          <Icon i="time" wh="18" />
-          <span>{{ lengthOfClips }}</span>
-        </div>
-      </Button>
+      <ButtonConnector>
+        <Button :outlined="true" @click="playClips">
+          <template slot="info">
+            <div>
+              <Icon i="clips" wh="18" />
+              <span>{{ numberOfClips }}</span>
+            </div>
+
+            <div>
+              <Icon i="time" wh="18" />
+              <span>{{ lengthOfClips }}</span>
+            </div>
+          </template>
+        </Button>
+
+        <Button icon="arrow" :disabled="continueBtnDisabled" @click="saveClips" />
+      </ButtonConnector>
     </div>
   </div>
   <div v-else>
@@ -64,6 +68,7 @@
 import { Vue, Component, Prop } from "vue-property-decorator";
 import Icon from "@/components/Icon.vue";
 import Button from "@/components/ui/Button.vue";
+import ButtonConnector from "@/components/ui/ButtonConnector.vue";
 import "@/libs/helpers/extensions";
 import Helpers from "@/libs/helpers";
 import RecordingsManager from "@/libs/recorder/recordingsManager";
@@ -74,7 +79,8 @@ import noUiSlider, { PipsMode, target } from "nouislider";
 @Component({
   components: {
     Icon,
-    Button
+    Button,
+    ButtonConnector
   }
 })
 export default class VideoPlayer extends Vue {
@@ -90,7 +96,7 @@ export default class VideoPlayer extends Vue {
   lengthOfClips = "00:00";
   maxVideoTime = 0;
   playPauseBtnIcon = "play";
-  continueBtnCI = false;
+  continueBtnDisabled = true;
   volumeIcon = "volumeMax";
   volume = 0.8;
   showTimeAsElapsed = false;
@@ -441,7 +447,7 @@ export default class VideoPlayer extends Vue {
     this.createClipsBar(starts, connects, tooltips);
 
     // Show continue button clip info
-    this.continueBtnCI = true;
+    this.continueBtnDisabled = false;
   }
 
   /**
@@ -471,11 +477,14 @@ export default class VideoPlayer extends Vue {
       // Remove unneeded tooltips
       tooltips = tooltips.slice(0, tooltips.length - 2);
     } else {
-      this.continueBtnCI = false;
+      this.continueBtnDisabled = true;
 
       starts = [];
       connects = [];
       tooltips = [];
+
+      // Reset length of clips
+      this.updateTotalLengthOfClips([]);
     }
 
     this.createClipsBar(starts, connects, tooltips);