From 26e8b4183057de7f454a18cfc1065d3b829de144 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Tue, 13 Sep 2022 02:24:23 +0000
Subject: [PATCH] better marquee duration formula

---
 ui/src/App.vue                  |  6 +++++-
 ui/src/components/TickerBar.vue | 32 +++++++++++++++++++++++---------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 145328b..74b6fc0 100644
--- a/ui/src/App.vue
+++ b/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>
 
diff --git a/ui/src/components/TickerBar.vue b/ui/src/components/TickerBar.vue
index 5d21395..fdaae04 100644
--- a/ui/src/components/TickerBar.vue
+++ b/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>