chore(timeLabel): increased interval, made label work from translations

components/tailored/core/media/heading/Heading.html

@@ -1,5 +1,5 @@
 <div id="media-heading">
-  <UiTag :text="elapsed" />
+  <UiTag :text="elapsedTimeLabel" />
   <div class="spacer"></div>
   <transition name="media-fullscreen" mode="out-in">
     <div

components/tailored/core/media/heading/Heading.vue

@@ -13,14 +13,14 @@ export default Vue.extend({
     MaximizeIcon,
     MinimizeIcon,
   },
-  computed: {
-    ...mapState(['ui', 'webrtc']),
-  },
   data() {
     return {
-      elapsed: `${this.$i18n.t('ui.live')} 00:00`,
+      elapsedTimeLabel: ''
     }
   },
+  computed: {
+    ...mapState(['ui', 'webrtc']),
+  },
   mounted() {
     this.$store.commit('ui/fullscreen', false)
     this.timer = false
@@ -38,10 +38,10 @@ export default Vue.extend({
     toggleFullscreen() {
       this.$store.commit('ui/fullscreen', !this.ui.fullscreen)
     },
-    elapsedTime(start: number): string {
+    elapsedTime(start: number): void {
       const duration = dayjs.duration(Date.now() - start)
       const hours = duration.hours()
-      return `${this.$i18n.t('ui.live')} ${
+      this.elapsedTimeLabel = `${this.$t('ui.live')} ${
         hours > 0 ? `${hours}:` : ''
       }${duration.format('mm:ss')}`
     },
@@ -51,7 +51,7 @@ export default Vue.extend({
           this.elapsed = this.elapsedTime(this.webrtc.activeStream.createdAt)
           this.timerId = setInterval(() => {
             this.elapsed = this.elapsedTime(this.webrtc.activeStream.createdAt)
-          }, 500)
+          }, 1000)
         }
       }
     },