From f7f80e03e0fbfbb5ca482e3de7ff3a4da0305ad3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mir=C3=B3=20Allard?= <info@miroallard.com>
Date: Tue, 11 Mar 2025 12:58:18 +0100
Subject: [PATCH] Use multiplication symbol instead of letter x

Use the proper multiplication symbol for the playback speed. The order
of the number and symbol is reversed so it is read "times 1.0" instead
of "1.0 times" (or previously "1.0 x"). Between the symbol and the
number, a narrow no-break space (&#8239;) is added for proper spacing.
The classes of some spans are removed for better alignment.
---
 client/components/controls/PlaybackSpeedControl.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/client/components/controls/PlaybackSpeedControl.vue b/client/components/controls/PlaybackSpeedControl.vue
index 98f40866a..c314da7fd 100644
--- a/client/components/controls/PlaybackSpeedControl.vue
+++ b/client/components/controls/PlaybackSpeedControl.vue
@@ -1,7 +1,7 @@
 <template>
   <div ref="wrapper" class="relative ml-4 sm:ml-8" v-click-outside="clickOutside">
     <div class="flex items-center justify-center text-gray-300 cursor-pointer h-full" @mousedown.prevent @mouseup.prevent @click="setShowMenu(true)">
-      <span class="text-gray-200 text-sm sm:text-base">{{ playbackRateDisplay }}<span class="text-base">x</span></span>
+      <span class="text-gray-200 text-sm sm:text-base">×&#8239;{{ playbackRateDisplay }}</span>
     </div>
     <div v-show="showMenu" class="absolute -top-[5.5rem] z-20 bg-bg border-black-200 border shadow-xl rounded-lg" :style="{ left: menuLeft + 'px' }">
       <div class="absolute -bottom-1.5 right-0 w-full flex justify-center" :style="{ left: arrowLeft + 'px' }">
@@ -11,7 +11,7 @@
         <template v-for="rate in rates">
           <div :key="rate" class="h-full border-black-300 w-11 cursor-pointer border rounded-sm" :class="value === rate ? 'bg-black-100' : 'hover:bg-black hover:bg-opacity-10'" style="min-width: 44px; max-width: 44px" @click="set(rate)">
             <div class="w-full h-full flex justify-center items-center">
-              <p class="text-xs text-center">{{ rate }}<span class="text-sm">x</span></p>
+              <p class="text-xs text-center">×&#8239;{{ rate }}</p>
             </div>
           </div>
         </template>
@@ -19,7 +19,7 @@
       <div class="w-full py-1 px-1">
         <div class="flex items-center justify-between">
           <ui-icon-btn :disabled="!canDecrement" icon="remove" @click="decrement" />
-          <p class="px-2 text-2xl sm:text-3xl">{{ playbackRateDisplay }}<span class="text-2xl">x</span></p>
+          <p class="px-2 text-2xl sm:text-3xl"><span class="text-2xl">×&#8239;</span>{{ playbackRateDisplay }}</p>
           <ui-icon-btn :disabled="!canIncrement" icon="add" @click="increment" />
         </div>
       </div>