watch remaining seconds

[putrafajarh]

is there a way, to watch the remaining seconds?

I want to trigger class if remaining seconds below 5 minutes

this my components

<template>
  <vue-countdown-timer
    :start-time="startDate"
    :end-time="endDate"
    :interval="1000"
    :end-text="'Meet ended!'"
    @start_callback="startCallBack('event started')"
    @end_callback="endCallBack('event ended')"
  >
    <template slot="countdown" slot-scope="scope">
      <div class="text-white-80">
        <b-icon-clock-history></b-icon-clock-history> Durasi
        <span v-if="scope.props.days > 0" class="ct-num">{{ scope.props.days }}:</span
        ><span v-if="scope.props.hours > 0" class="ct-num">{{ scope.props.hours }}:</span
        ><span class="ct-num">{{ scope.props.minutes }}:</span><span class="ct-num">{{ scope.props.seconds }}</span>
      </div>
    </template>

    <template slot="end-text" slot-scope="scope">
      <span style="color: green">{{ scope.props.endText }}</span>
    </template>
  </vue-countdown-timer>
</template>

<script>
import { BIconClockHistory } from 'bootstrap-vue'
export default {
  name: 'Countdown',
  components: {
    BIconClockHistory,
  },
  props: {
    startDate: {
      type: String,
      required: true,
    },
    endDate: {
      type: String,
      required: true,
    },
  },
  methods: {
    startCallBack(x) {
      this.$emit('start', x)
    },
    endCallBack(x) {
      this.$emit('end', x)
    },
  },
}
</script>

<style>
.text-white-80 {
  color: rgba(255, 255, 255, 0.8) !important;
}
.ct-num {
  font-weight: bold;
  font-size: 18px;
  letter-spacing: 1px;
}
</style>

[bennyxguo]

@putrafajarh So bascially you want to trigger a callback when the timer reach a certain limit? Is that correct?

If that's the case, currently the plugin doesn't support this feature, but seems like a good idea tho.