Don’t switch to right-handed mode on mobile

Continue to use left-to-right layout on mobile rather than switching the
order of the buttons. We still need to use the symmetrical layouts for
the large/screen player styles so I don’t think we should add a player
setting for this unless someone requests it to avoid ambiguity.

https://linear.app/beyondwords/issue/S-5283/make-the-playback-icon-default-to-the-left

src/components/UserInterface.svelte

@@ -418,6 +418,10 @@
     height: 144px;
   }
 
+  .large.mobile.advert_ .controls {
+    flex-direction: row-reverse;
+  }
+
   .large .no-image .summary {
     grid-column: 1 / span 2;
   }

src/components/time_indicators/TimeIndicator.svelte

@@ -75,10 +75,7 @@
     margin-left: -8px;
   }
 
-  .standard.advert_ {
-    justify-content: flex-end;
-  }
-
+  .standard.advert_,
   .standard.fixed-left.advert_ {
     justify-content: flex-start;
   }
@@ -89,27 +86,28 @@
     top: 28px;
   }
 
-  .small.stopped.mobile .inner,
-  .standard.stopped.mobile .inner {
+  .small.stopped.mobile .inner {
     position: absolute;
     left: 40px;
     top: 28px;
   }
 
-  .standard.stopped.fixed-right .inner {
+  .standard.stopped.mobile .inner {
     position: absolute;
-    left: 36px;
+    left: 52px;
     top: 28px;
   }
 
-  .standard.stopped.fixed-left .inner {
+  .standard.stopped.fixed-right .inner {
     position: absolute;
     left: 52px;
     top: 28px;
   }
 
-  .standard.stopped.mobile.no-logo .inner {
-    left: 24px;
+  .standard.stopped.fixed-left .inner {
+    position: absolute;
+    left: 52px;
+    top: 28px;
   }
 
   .large .inner {

src/helpers/controlsOrder.ts

@@ -4,14 +4,14 @@ const controlsOrder = ({ playerStyle, position, isMobile, isAdvert }) => (
     playerStyle === "screen"                                       ? "symmetrical"
   : playerStyle === "large"    && isMobile                         ? "symmetrical"
   : playerStyle === "standard" && position === "left"              ? "left-to-right"
-  : playerStyle === "standard" && isMobile                         ? "right-to-left"
+  : playerStyle === "standard" && isMobile                         ? "left-to-right"
   : playerStyle === "standard" && position === "right" && isAdvert ? "right-to-left"
   : playerStyle === "standard" && position === "right"             ? "left-to-right-but-swap-ends"
   : playerStyle === "small"    && position === "left"              ? "left-to-right"
   : playerStyle === "small"    && position === "right"             ? "right-to-left"
   : playerStyle === "video"    && position === "left"              ? "left-to-right"
-  : playerStyle === "video"    && isMobile                         ? "right-to-left"
-  : playerStyle === "video"    && position === "right"             ? "right-to-left"
+  : playerStyle === "video"    && isMobile                         ? "left-to-right"
+  : playerStyle === "video"    && position === "right"             ? "left-to-right"
                                                                    : "left-to-right"
 );