Added input duration progress

src/App.vue

@@ -16,7 +16,7 @@
             // Program row
             program-row(:inputs="switcherInputs" :total-number-of-inputs="inputs.length")
             // Transition progress line
-            v-progress-linear(:value="transitionProgress" height="3").mt-5.mb-3
+            v-progress-linear(:value="transitionProgress" height="3").my-3
             // Preview row
             preview-row(:inputs="switcherInputs" :total-number-of-inputs="inputs.length")
 
@@ -38,7 +38,7 @@ import PreviewRow from './PreviewRow.vue'
 import ProgramRow from './ProgramRow.vue'
 import TransitionButtons from './TransitionButtons.vue'
 
-const FETCH_XML_DATA_INTERVAL: number = 2000 // ms
+const FETCH_XML_DATA_INTERVAL: number = 1500 // ms
 const TRANSITION_STEP: number = 100 // ms
 
 const LIMIT_NUMBER_OF_INPUTS: number = 8
@@ -102,7 +102,12 @@ export default class App extends Vue {
       const xmlContent = XmlApiDataParser.parse(xmlRawData)
 
       const inputs = Object.values(
-        XmlInputMapper.mapInputs(XmlInputMapper.extractInputsFromXML(xmlContent), ['title'])
+        XmlInputMapper.mapInputs(XmlInputMapper.extractInputsFromXML(xmlContent), [
+          'title',
+          'state',
+          'duration',
+          'position'
+        ])
       )
 
       const overlayChannels = XmlOverlayChannels.extract(xmlContent)
@@ -216,9 +221,8 @@ hr
 #connection-status
   text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)
 
-
 .rotated-header
-  /* Rotate from top left corner (not default) */
+  // Rotate from top left corner (not default)
   transform-origin: 0 0
   transform: rotate(90deg)
   // letter-spacing: 2px

src/components/SwitcherButton.vue

@@ -8,7 +8,7 @@ v-col.ma-1
     v-long-press="500"
     @long-press-start="onLongPressStart"
     @long-press-stop="onLongPressStop"
-  ).px-0
+  ).px-0.elevation-1
     v-col
       v-badge(
         v-if="badgeLeft"
@@ -28,7 +28,17 @@ v-col.ma-1
       )
         big {{ number }}
       div(v-else): big {{ number }}
-      div(style="font-size: 7pt") {{ input.title }}
+      div.switch-button-title-text {{ title }}
+      div
+        div(v-if="hasDuration").switch-button-title-text {{ elapsedText }}
+        div(v-else): p
+
+  v-progress-linear(
+    v-if="hasDuration"
+    :value="position"
+    :height="progressBarHeight"
+    :color="progressBarColor"
+  ).mt-1
 </template>
 
 <script lang="ts">
@@ -37,13 +47,15 @@ import { Vue, Component, Prop } from 'vue-property-decorator'
 // @ts-ignore
 import LongPress from 'vue-directive-long-press'
 
+import { durationNice } from '../utility'
+
 @Component({
   directives: {
     'long-press': LongPress
   }
 })
 export default class SwitcherButton extends Vue {
-  @Prop(Object) readonly input!: Object
+  @Prop(Object) readonly input!: { [key: string]: any }
   @Prop(Number) readonly number!: Number
   @Prop(String) readonly backgroundColor!: String
   @Prop(String) readonly badgeLeft!: String
@@ -54,6 +66,14 @@ export default class SwitcherButton extends Vue {
     isLongPress: false
   }
 
+  get title() {
+    if (this.input.title.length < 24) {
+      return this.input.title
+    }
+
+    return this.input.title.substr(0, 22) + '...'
+  }
+
   get style() {
     const styles: { [key: string]: string } = {
       height: '66px'
@@ -71,6 +91,33 @@ export default class SwitcherButton extends Vue {
     return this.backgroundColor
   }
 
+  get hasDuration() {
+    return this.input.duration && this.input.duration > 0
+  }
+
+  // Position of video / audio track
+  get position() {
+    return (this.input.position / this.input.duration) * 100
+  }
+
+  get elapsedText() {
+    return `${durationNice(Math.round(this.input.position / 1000))} / ${durationNice(
+      Math.round(this.input.duration / 1000)
+    )}`
+  }
+
+  get playing() {
+    return this.input.state === 'Running'
+  }
+
+  get progressBarColor() {
+    return this.playing ? 'green' : 'grey'
+  }
+
+  get progressBarHeight() {
+    return this.playing ? 5 : 3
+  }
+
   onLongPressStart() {
     // triggers after 300ms of mousedown
     console.log('Long Press detected... waiting for mouse up')
@@ -93,3 +140,9 @@ export default class SwitcherButton extends Vue {
   }
 }
 </script>
+
+<style lang="sass">
+.switch-button-title-text
+  font-size: 8pt
+  letter-spacing: -0.8px
+</style>

src/utility.ts

@@ -0,0 +1,9 @@
+//
+export function durationNice(duration: number): string {
+  const minutes = Math.floor(duration / 60)
+
+  const sec = duration % 60
+  const seconds = `${sec < 10 ? '0' : ''}${sec}`
+
+  return `${minutes}:${seconds}`
+}