Watch
1
0
Fork
You've already forked nexus
0
forked from Nexus/nexus

replace media_kit's video widget with a custom impl

Fixes #48

This helps Linux touchscreen devices like Linux phones, where the old widget didn't work correctly.
This commit is contained in:
Henry Hiles 2026-10-15 10:53:30 -04:00
commit 27137c488d
Signed by: Henry-Hiles
SSH key fingerprint: SHA256:VKQUdS31Q90KvX7EkKMHMBpUspcmItAh86a+v7PGiIs
3 changed files with 169 additions and 70 deletions

View file

@ -7,6 +7,7 @@ import "package:nexus/models/info/video.dart";
import "package:flutter_hooks/flutter_hooks.dart";
import "package:media_kit/media_kit.dart";
import "package:media_kit_video/media_kit_video.dart";
import "package:nexus/widgets/players/player_controls.dart";
class const VideoPlayer(
final Uri uri,
@ -20,19 +21,95 @@ class const VideoPlayer(
() => Player(configuration: .new(bufferSize: 128 * 1024 * 1024)),
);
final controller = useMemoized(() => VideoController(player));
final loaded = useState(false);
useEffect(() {
player.platform?.state = player.platform!.state.copyWith(buffering: true);
scheduleMicrotask(() async {
final video = await ref
.read(ClientController.provider.notifier)
.downloadMedia(.new(mxc: uri, encrypted: encrypted));
await player.open(Media(video.path), play: false);
if (context.mounted) loaded.value = true;
});
return player.dispose;
}, []);
return SizedBox(height: 300, child: Video(controller: controller));
final aspectRatio = switch (info) {
VideoInfo(:final width?, :final height?) when width > 0 && height > 0 =>
width / height,
_ => 16 / 9,
};
return ConstrainedBox(
constraints: const .new(maxHeight: 300),
child: AspectRatio(
aspectRatio: aspectRatio,
child: ClipRRect(
borderRadius: .circular(12),
child: Video(
controller: controller,
controls: (_) =>
// Until media_kit moves to material_ui, this Material is needed.
Material(
type: .transparency,
child: Stack(
children: [
Positioned.fill(
child: GestureDetector(
behavior: .opaque,
onTap: loaded.value ? player.playOrPause : null,
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: DecoratedBox(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: .bottomCenter,
end: .topCenter,
colors: [Colors.black54, Colors.transparent],
),
),
child: Padding(
padding: const .only(left: 4, right: 4, top: 16),
child: PlayerControls(
player,
loading: !loaded.value,
color: Colors.white,
actions: .new([
Builder(
builder: (context) {
final fullscreen = isFullscreen(context);
return IconButton(
onPressed: () =>
toggleFullscreen(context),
color: Colors.white,
tooltip: fullscreen
? "Exit fullscreen"
: "Fullscreen",
icon: Icon(
fullscreen
? Icons.fullscreen_exit
: Icons.fullscreen,
),
);
},
),
]),
),
),
),
),
],
),
),
),
),
),
);
}
}