Abspielen in die Mitte, die beiden Zeiten daneben

Die verstrichene Zeit stand hinter dem Lautstärkeregler — „1:51:01"
direkt neben einem Schieber liest sich wie dessen Beschriftung — und die
verbleibende ganz rechts hinter den Menüs. Zwei Angaben über dieselbe
Sache, so weit auseinander wie möglich.

Jetzt stehen sie dort, wo man ohnehin hinsieht: links und rechts vom
Knopf, den man drückt.

Drei Spalten statt drei Flex-Kinder, denn die Mitte soll die Mitte des
Bildes sein und nicht die Mitte dessen, was links und rechts übrig
bleibt. Mit `space-between` wanderte der Knopf, sobald rechts ein Menü
dazukam oder links die Lautstärke wegfiel.

Schmal weicht, was man auch anders bekommt: die Lautstärke liegt am
Telefon auf einer Taste, und die verbleibende Zeit lässt sich an der
Leiste ablesen. Der Knopf in der Mitte weicht nicht — dort sucht ihn der
Daumen.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

web/app/src/spieler.ts

@@ -560,7 +560,21 @@ export function spieler(anfrage: Spieleranfrage): void {
 
   const links = document.createElement('div');
   links.className = 'pl-gruppe';
-  links.append(abspielknopf, tonknopf, lautstaerke);
+  links.append(tonknopf, lautstaerke);
+
+  // **Das Wichtigste in die Mitte, und die beiden Zeiten dazu.**
+  //
+  // Vorher stand die verstrichene Zeit hinter dem Lautstärkeregler und die
+  // verbleibende ganz rechts hinter den Menüs: zwei Angaben über dieselbe
+  // Sache, so weit auseinander wie möglich, und die erste neben etwas, mit
+  // dem sie nichts zu tun hat. „1:51:01" direkt neben einem Schieber für
+  // Lautstärke liest sich wie dessen Beschriftung.
+  //
+  // Jetzt stehen sie dort, wo man hinsieht: links und rechts vom Knopf, den
+  // man drückt.
+  const zeitmitte = document.createElement('div');
+  zeitmitte.className = 'pl-mitte';
+  zeitmitte.append(stand, abspielknopf, rest);
 
   const rechts = document.createElement('div');
   rechts.className = 'pl-gruppe';
@@ -568,20 +582,9 @@ export function spieler(anfrage: Spieleranfrage): void {
 
   const unten = document.createElement('div');
   unten.className = 'pl-unten';
-  unten.append(links, rechts);
+  unten.append(links, zeitmitte, rechts);
 
-  // **Die Zeitangaben gehören an die Zeitleiste, nicht zwischen die Knöpfe.**
+  bedienung.append(zeitleiste, unten);
-  //
-  // Die verstrichene Zeit stand hinter dem Lautstärkeregler und die
-  // verbleibende ganz rechts hinter den Menüs — zwei Angaben über dieselbe
-  // Sache, so weit auseinander wie möglich, und beide neben etwas, mit dem
-  // sie nichts zu tun haben. Jetzt stehen sie links und rechts von dem
-  // Balken, über den sie Auskunft geben.
-  const zeitreihe = document.createElement('div');
-  zeitreihe.className = 'pl-zeitreihe';
-  zeitreihe.append(stand, zeitleiste, rest);
-
-  bedienung.append(zeitreihe, unten);
 
   /* ---------- Verhalten ---------- */
 

web/app/src/style.css

@@ -906,17 +906,27 @@ textarea.feld {
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
 
-.pl-unten { display: flex; align-items: center; justify-content: space-between; gap: var(--s-regular); }
+/* **Drei Spalten, nicht drei Flex-Kinder.**
+ *
+ * Die Mitte soll die Mitte des Bildes sein, nicht die Mitte dessen, was
+ * links und rechts übrig bleibt. Mit `space-between` wanderte der
+ * Abspielknopf, sobald rechts ein Menü dazukam oder links die Lautstärke
+ * wegfiel. `1fr auto 1fr` hält ihn fest. */
+.pl-unten {
+  display: grid; grid-template-columns: 1fr auto 1fr;
+  align-items: center; gap: var(--s-regular);
+}
 .pl-gruppe { display: flex; align-items: center; gap: 6px; min-width: 0; }
+.pl-mitte { display: flex; align-items: center; gap: 12px; justify-self: center; }
+.pl-unten > .pl-gruppe:last-child { justify-self: end; }
 
 /* **Die rechte Gruppe gibt nicht nach.**
  *
  * Beide Gruppen durften schrumpfen, und ihre Knöpfe sind `flex: 0 0 auto` —
  * wird es eng, schrumpft also die Gruppe und ihre Knöpfe stehen heraus. Dann
  * liegt der äusserste halb hinter dem Fensterrand. Links gibt es etwas
- * nachzugeben (die Lautstärke, die Zeitangabe), rechts sind es nur Knöpfe. */
+ * nachzugeben (die Lautstärke), rechts sind es nur Knöpfe. */
-.pl-unten > .pl-gruppe:last-child { flex: 0 0 auto; }
+.pl-unten > .pl-gruppe:first-child { overflow: hidden; }
-.pl-unten > .pl-gruppe:first-child { flex: 0 1 auto; overflow: hidden; }
 
 /* **44 Bildpunkte, nicht 32.** Darunter trifft ein Finger daneben, und ein
    Fehlgriff auf der Zeitleiste wirft einen aus dem Film. */
@@ -935,16 +945,14 @@ textarea.feld {
   flex: 0 0 auto;
 }
 
-/* **Die Zeitangaben links und rechts vom Balken.**
+/* **Schmal weicht, was man auch anders bekommt.**
  *
- * Vorher stand die verstrichene Zeit hinter dem Lautstärkeregler und die
+ * Die Lautstärke liegt am Telefon auf einer Taste an der Seite, und die
- * verbleibende hinter den Menüs: zwei Angaben über dieselbe Sache, so weit
+ * verbleibende Zeit steht auch an der Zeitleiste ablesbar. Was nicht weicht,
- * auseinander wie möglich. */
+ * ist der Abspielknopf in der Mitte — sonst rutscht er aus der Mitte, und
-.pl-zeitreihe { display: flex; align-items: center; gap: 10px; }
+ * genau dort sucht ihn der Daumen. */
-
+@media (max-width: 560px) {
-/* Schmal ist der Balken wichtiger als die zweite Zahl. */
+  .pl-laut, .pl-rest { display: none; }
-@media (max-width: 520px) {
-  .pl-zeitreihe .pl-rest { display: none; }
 }
 
 /* Zeit- und Lautstärkeregler: dieselbe Form, verschiedene Breite. */