better marquee duration formula

ui/src/App.vue

@@ -4,7 +4,11 @@
       <TitleBar :title="title_html" />
       <Dashboard :message="message_html" />
     </v-main>
-    <TickerBar v-if="ticker_html !== ''" :content="ticker_html" />
+    <TickerBar
+      v-if="ticker_html !== ''"
+      :content="ticker_html"
+      color="primary"
+    />
   </v-app>
 </template>
 

ui/src/components/TickerBar.vue

@@ -1,13 +1,13 @@
 <template>
   <v-footer :color="color" :dark="is_dark" fixed>
-    <span class="text-h6" :style="{ 'animation-duration': marqueeDuration }">
-      <div v-html="content" />
+    <span ref="marquee" class="text-h6">
+      <div ref="content" v-html="content" />
     </span>
   </v-footer>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-property-decorator";
+import { Component, Prop, Ref, Vue, Watch } from "vue-property-decorator";
 import Color from "color";
 
 @Component
@@ -18,11 +18,17 @@ export default class TickerBar extends Vue {
   @Prop({ default: "primary" })
   private readonly color!: string;
 
+  @Ref("content")
+  private readonly _content!: HTMLDivElement;
+
+  @Ref("marquee")
+  private readonly _marquee!: HTMLSpanElement;
+
   private get is_dark(): boolean {
-    return this.footerColor.isDark();
+    return this.footer_color.isDark();
   }
 
-  private get footerColor(): Color {
+  private get footer_color(): Color {
     // try getting from vuetify theme
     let color = this.$vuetify.theme.themes.light[this.color];
 
@@ -34,10 +40,18 @@ export default class TickerBar extends Vue {
     return Color(this.color);
   }
 
-  private get marqueeDuration(): string {
-    // 10 seconds + another second per 7 chars
-    let dv = this.content ? Math.round(this.content.length / 7) : 0;
-    return 10 + dv + "s";
+  @Watch("content", { immediate: true })
+  private set_marquee_duration(): void {
+    this.$nextTick((): void => {
+      const width = parseFloat(
+        window.getComputedStyle(this._content).getPropertyValue("width")
+      );
+
+      // 10 seconds + another second per 40px
+      const duration = 10 + Math.round(width / 40);
+
+      this._marquee.style.setProperty("animation-duration", duration + "s");
+    });
   }
 }
 </script>