improve countdown timer display

photobooth-app · May 18, 2024 · e6ca1fc · e6ca1fc
1 parent ca07e1a
commit e6ca1fc
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/CountdownTimer.vue b/src/components/CountdownTimer.vue
@@ -8,7 +8,7 @@
       style="width: 100%; height: 100%"
       :value="remainingSeconds"
       :min="0"
-      :max="duration"
+      :max="startDuration"
       reverse
       animation-speed="100"
       size="70vh"
@@ -46,6 +46,7 @@ export default defineComponent({
     return {
       intervalTimerId: null,
       remainingSeconds: 0,
+      startDuration: 0,
     };
   },
   computed: {
@@ -72,8 +73,10 @@ export default defineComponent({
       this.remainingSeconds = 0;
     },
     startTimer() {
-      console.log(`starting timer, duration=${this.duration}`);
-      this.remainingSeconds = this.duration;
+      this.startDuration = this.duration;
+      this.remainingSeconds = this.startDuration;
+
+      console.log(`starting timer, duration=${this.startDuration}`);
 
       this.intervalTimerId = setInterval(() => {
         this.remainingSeconds -= 0.05;

diff --git a/src/pages/IndexPage.vue b/src/pages/IndexPage.vue
@@ -127,9 +127,10 @@ export default defineComponent({
     },
     showProcessing: {
       get() {
-        const capturesCompleted = this.stateStore.state == 'captures_completed';
         const capture = this.stateStore.state == 'capture';
-        return capturesCompleted || capture;
+        const capturesCompleted = this.stateStore.state == 'captures_completed';
+
+        return capturesCompleted || (capture && !this.showCountdownCounting);
       },
     },
     showRecording: {
@@ -146,8 +147,9 @@ export default defineComponent({
     showCountdownCounting: {
       get() {
         const machineCounting = this.stateStore.state == 'counting';
+        const capture = this.stateStore.state == 'capture';
 
-        return this.stateStore.duration > 0 && machineCounting;
+        return (this.stateStore.duration > 0 && machineCounting) || capture;
       },
     },
     showPreview: {
@@ -156,8 +158,9 @@ export default defineComponent({
         const machineIdle = !this.stateStore.state || this.stateStore.state == 'finished';
         const machineRecord = this.stateStore.state == 'record';
         const machineCounting = this.stateStore.state == 'counting';
+        const machineCapture = this.stateStore.state == 'capture';
 
-        return enabled && (machineIdle || machineCounting || machineRecord);
+        return enabled && (machineIdle || machineCounting || machineRecord || machineCapture);
       },
     },
     showFrontpage: {