fixup controls on narrow videos

lib/widgets/players/player_controls.dart

@@ -51,34 +51,59 @@ class const PlayerControls(
         ? 1.0
         : duration.inMilliseconds.toDouble();
 
-    return Row(
+    final playButton = loading || buffering
-      children: [
+        ? SizedBox.square(
-        if (loading || buffering)
-          SizedBox.square(
             dimension: 48,
             child: CircularProgressIndicator(padding: .all(12), color: color),
           )
-        else
+        : IconButton(
-          IconButton(
             onPressed: player.playOrPause,
             color: color,
             tooltip: playing ? "Pause" : "Play",
             icon: Icon(playing ? Icons.pause_circle : Icons.play_circle),
-          ),
+          );
-        SizedBox(width: 8),
+
-        Text(format(position), style: textStyle),
+    Slider slider({EdgeInsetsGeometry? padding}) => Slider(
-        Expanded(
+      padding: padding,
-          child: Slider(
       max: max,
       value: min(position.inMilliseconds.toDouble(), max),
       onChanged: loading
           ? null
           : (value) => player.seek(.new(milliseconds: value.toInt())),
+    );
+
+    return LayoutBuilder(
+      builder: (context, constraints) => constraints.maxWidth < 300
+          ? Column(
+              mainAxisSize: .min,
+              children: [
+                slider(padding: const .symmetric(horizontal: 12)),
+                Row(
+                  children: [
+                    playButton,
+                    Expanded(
+                      child: Text(
+                        "${format(position)} / ${format(duration)}",
+                        style: textStyle,
+                        maxLines: 1,
+                        overflow: .ellipsis,
                       ),
                     ),
+                    ...actions,
+                  ],
+                ),
+              ],
+            )
+          : Row(
+              children: [
+                playButton,
+                SizedBox(width: 8),
+                Text(format(position), style: textStyle),
+                Expanded(child: slider()),
                 Text(format(duration), style: textStyle),
                 ...actions,
               ],
+            ),
     );
   }
 }