2022-05-28 05:16:27 +00:00
|
|
|
<template>
|
2022-06-08 19:24:47 +00:00
|
|
|
<div style="color: #fff; font-size: 0.75rem">
|
2022-06-08 16:36:32 +00:00
|
|
|
{{ $vuetube.humanTime(currentTime) }}
|
2022-08-10 19:41:27 +00:00
|
|
|
<span style="color: #aaa"> / {{ humanDuration }} </span>
|
2022-05-28 05:16:27 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
2022-06-07 18:29:57 +00:00
|
|
|
props: {
|
2022-06-08 15:59:43 +00:00
|
|
|
duration: {
|
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
2022-06-08 16:36:32 +00:00
|
|
|
currentTime: {
|
2022-06-08 15:59:43 +00:00
|
|
|
type: Number,
|
|
|
|
required: true,
|
|
|
|
},
|
2022-05-28 05:16:27 +00:00
|
|
|
},
|
2022-08-10 19:41:27 +00:00
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
humanDuration: 0,
|
|
|
|
}
|
|
|
|
},
|
2022-08-10 20:01:54 +00:00
|
|
|
methods: {
|
|
|
|
calcDuration() {
|
|
|
|
this.humanDuration = this.$vuetube.humanTime(this.duration);
|
|
|
|
}
|
|
|
|
},
|
2022-08-10 19:41:27 +00:00
|
|
|
mounted() {
|
2022-08-10 20:01:54 +00:00
|
|
|
//--- Only call 'calcDuration()' when 'this.duration' becomes defined ---//
|
2022-08-10 19:41:27 +00:00
|
|
|
const durationTimer = setInterval(() => {
|
|
|
|
if (this.duration) {
|
2022-08-10 20:01:54 +00:00
|
|
|
this.calcDuration();
|
2022-08-10 19:41:27 +00:00
|
|
|
return clearInterval(durationTimer);
|
|
|
|
}
|
|
|
|
}, 100);
|
2022-08-10 20:01:54 +00:00
|
|
|
//--- END Only call 'calcDuration()' when 'this.duration' becomes defined ---//
|
2022-08-10 19:41:27 +00:00
|
|
|
}
|
2022-05-28 05:16:27 +00:00
|
|
|
};
|
|
|
|
</script>
|