feat: import Chinese-localized Buzz source snapshot

Signed-off-by: cls_宁波本机 <908705107@qq.com>

mobile/lib/features/channels/media_viewer_page/image_controls.dart

@@ -0,0 +1,300 @@
+part of '../media_viewer_page.dart';
+
+class _MediaViewerBottomControls extends StatelessWidget {
+  final List<MediaViewerImage> images;
+  final int currentIndex;
+  final ValueListenable<double> pagePosition;
+  final ValueChanged<double> onScrubUpdate;
+  final VoidCallback onScrubEnd;
+  final ValueChanged<int> onSelect;
+  final VoidCallback? onReply;
+  final VoidCallback? onMore;
+
+  const _MediaViewerBottomControls({
+    required this.images,
+    required this.currentIndex,
+    required this.pagePosition,
+    required this.onScrubUpdate,
+    required this.onScrubEnd,
+    required this.onSelect,
+    required this.onReply,
+    required this.onMore,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(Grid.sm, Grid.xxs, Grid.sm, 0),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.center,
+        children: [
+          _MediaViewerCircleButton(
+            key: const ValueKey('message-media-image-viewer-reply-thread'),
+            icon: LucideIcons.messageSquareReply,
+            tooltip: context.l10n.replyInThread,
+            onPressed: onReply,
+          ),
+          const SizedBox(width: Grid.xxs),
+          Expanded(
+            child: images.length > 1
+                ? _MediaViewerFilmstrip(
+                    key: const ValueKey('message-media-image-viewer-filmstrip'),
+                    images: images,
+                    currentIndex: currentIndex,
+                    pagePosition: pagePosition,
+                    onScrubUpdate: onScrubUpdate,
+                    onScrubEnd: onScrubEnd,
+                    onSelect: onSelect,
+                  )
+                : const SizedBox(height: 56),
+          ),
+          const SizedBox(width: Grid.xxs),
+          _MediaViewerCircleButton(
+            key: const ValueKey('message-media-image-viewer-more-actions'),
+            icon: LucideIcons.ellipsis,
+            tooltip: context.l10n.moreImageActions,
+            onPressed: onMore,
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _MediaViewerFilmstrip extends StatelessWidget {
+  final List<MediaViewerImage> images;
+  final int currentIndex;
+  final ValueListenable<double> pagePosition;
+  final ValueChanged<double> onScrubUpdate;
+  final VoidCallback onScrubEnd;
+  final ValueChanged<int> onSelect;
+
+  const _MediaViewerFilmstrip({
+    super.key,
+    required this.images,
+    required this.currentIndex,
+    required this.pagePosition,
+    required this.onScrubUpdate,
+    required this.onScrubEnd,
+    required this.onSelect,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: 56,
+      child: RepaintBoundary(
+        child: GestureDetector(
+          behavior: HitTestBehavior.opaque,
+          onHorizontalDragUpdate: (details) =>
+              onScrubUpdate(details.primaryDelta ?? 0),
+          onHorizontalDragEnd: (_) => onScrubEnd(),
+          child: ValueListenableBuilder<double>(
+            valueListenable: pagePosition,
+            builder: (context, position, _) {
+              return LayoutBuilder(
+                builder: (context, constraints) {
+                  const compactWidth = 40.0;
+                  const focusedWidth = 72.0;
+                  const itemHeight = 52.0;
+                  const spacing = Grid.half;
+                  final clampedPosition = position
+                      .clamp(0.0, images.length - 1.0)
+                      .toDouble();
+                  final widths = <double>[];
+                  final proximities = <double>[];
+                  final centers = <double>[];
+                  var cursor = 0.0;
+
+                  for (var index = 0; index < images.length; index++) {
+                    final proximity = (1 - (index - clampedPosition).abs())
+                        .clamp(0.0, 1.0)
+                        .toDouble();
+                    final width =
+                        compactWidth +
+                        ((focusedWidth - compactWidth) * proximity);
+                    widths.add(width);
+                    proximities.add(proximity);
+                    centers.add(cursor + (width / 2));
+                    cursor += width + spacing;
+                  }
+
+                  final lowerIndex = clampedPosition.floor();
+                  final upperIndex = clampedPosition.ceil();
+                  final fraction = clampedPosition - lowerIndex;
+                  final lowerCenter = centers[lowerIndex];
+                  final upperCenter = centers[upperIndex];
+                  final focusCenter =
+                      lowerCenter + ((upperCenter - lowerCenter) * fraction);
+                  final viewportCenter = constraints.maxWidth / 2;
+
+                  return Stack(
+                    clipBehavior: Clip.hardEdge,
+                    children: [
+                      for (var index = 0; index < images.length; index++)
+                        Positioned(
+                          left:
+                              viewportCenter +
+                              centers[index] -
+                              focusCenter -
+                              (widths[index] / 2),
+                          top: Grid.quarter,
+                          width: widths[index],
+                          height: itemHeight,
+                          child: _MediaViewerFilmstripImage(
+                            image: images[index],
+                            index: index,
+                            proximity: proximities[index],
+                            selected: index == currentIndex,
+                            onSelect: onSelect,
+                          ),
+                        ),
+                    ],
+                  );
+                },
+              );
+            },
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MediaViewerFilmstripImage extends StatelessWidget {
+  final MediaViewerImage image;
+  final int index;
+  final double proximity;
+  final bool selected;
+  final ValueChanged<int> onSelect;
+
+  const _MediaViewerFilmstripImage({
+    required this.image,
+    required this.index,
+    required this.proximity,
+    required this.selected,
+    required this.onSelect,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final borderWidth = 1 + (1.5 * proximity);
+    return Semantics(
+      button: true,
+      selected: selected,
+      label: selected
+          ? context.l10n.imageSelected(index + 1)
+          : context.l10n.showImage(index + 1),
+      child: GestureDetector(
+        key: ValueKey('message-media-image-viewer-thumbnail:$index'),
+        onTap: () => onSelect(index),
+        child: Container(
+          height: 52,
+          padding: EdgeInsets.all(borderWidth),
+          decoration: BoxDecoration(
+            borderRadius: BorderRadius.circular(Radii.sm),
+            border: Border.all(
+              color: Colors.white.withValues(alpha: 0.28 + (0.72 * proximity)),
+              width: borderWidth,
+            ),
+          ),
+          child: ClipRRect(
+            key: ValueKey('message-media-image-viewer-thumbnail-clip:$index'),
+            borderRadius: BorderRadius.circular(Radii.sm - borderWidth),
+            clipBehavior: Clip.antiAlias,
+            child: Opacity(
+              opacity: 0.62 + (0.38 * proximity),
+              child: MediaImage(
+                url: image.url,
+                decodeWidth: 72,
+                fit: BoxFit.cover,
+                semanticLabel: image.semanticLabel,
+                errorBuilder: (_, _, _) => const ColoredBox(
+                  color: Color.fromRGBO(255, 255, 255, 0.12),
+                  child: Icon(
+                    LucideIcons.imageOff,
+                    color: Colors.white70,
+                    size: 18,
+                  ),
+                ),
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _MediaViewerCircleButton extends StatelessWidget {
+  final IconData icon;
+  final String tooltip;
+  final VoidCallback? onPressed;
+
+  const _MediaViewerCircleButton({
+    super.key,
+    required this.icon,
+    required this.tooltip,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox.square(
+      dimension: 48,
+      child: onPressed == null
+          ? const SizedBox.shrink()
+          : DecoratedBox(
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.16),
+                shape: BoxShape.circle,
+              ),
+              child: IconButton(
+                onPressed: onPressed,
+                tooltip: tooltip,
+                icon: Icon(icon, color: Colors.white, size: 20),
+              ),
+            ),
+    );
+  }
+}
+
+Size _imageViewerSize(Size viewport, double? aspectRatio) {
+  if (aspectRatio == null || aspectRatio <= 0) {
+    return viewport;
+  }
+
+  final safeAspectRatio = aspectRatio.clamp(0.05, 20.0).toDouble();
+  if (viewport.aspectRatio > safeAspectRatio) {
+    return Size(viewport.height * safeAspectRatio, viewport.height);
+  }
+  return Size(viewport.width, viewport.width / safeAspectRatio);
+}
+
+void _precacheViewerImages(
+  BuildContext context,
+  List<MediaViewerImage> images,
+  int focusedIndex,
+) {
+  for (var index = focusedIndex - 2; index <= focusedIndex + 2; index++) {
+    if (index < 0 || index >= images.length) {
+      continue;
+    }
+    final provider = images[index].preloadProvider;
+    if (provider == null) {
+      continue;
+    }
+    unawaited(precacheImage(provider, context, onError: (_, _) {}));
+  }
+}
+
+bool _hasImageTransform(Matrix4 transform) {
+  final storage = transform.storage;
+  for (var index = 0; index < storage.length; index++) {
+    if ((storage[index] - _identityTransformStorage[index]).abs() >
+        _identityTransformEpsilon) {
+      return true;
+    }
+  }
+  return false;
+}

mobile/lib/features/channels/media_viewer_page/route_transition.dart

@@ -0,0 +1,22 @@
+part of '../media_viewer_page.dart';
+
+class _MediaViewerRouteTransition extends StatelessWidget {
+  final Animation<double> animation;
+  final Widget child;
+
+  const _MediaViewerRouteTransition({
+    required this.animation,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final fade = CurvedAnimation(
+      parent: animation,
+      curve: Curves.easeOutCubic,
+      reverseCurve: Curves.easeInOutCubic,
+    );
+
+    return FadeTransition(opacity: fade, child: child);
+  }
+}

mobile/lib/features/channels/media_viewer_page/video_controls.dart

@@ -0,0 +1,142 @@
+part of '../media_viewer_page.dart';
+
+/// Video transport and message actions, kept visually aligned with the image
+/// viewer chrome while the native player owns decoding and playback.
+class _VideoViewerBottomControls extends StatelessWidget {
+  final VideoPlayerController? controller;
+  final VoidCallback? onReply;
+
+  const _VideoViewerBottomControls({
+    required this.controller,
+    required this.onReply,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final readyController = controller?.value.isInitialized == true
+        ? controller
+        : null;
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(Grid.sm, Grid.xxs, Grid.sm, 0),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (readyController != null)
+            _VideoTransportBar(controller: readyController),
+          Row(
+            children: [
+              _MediaViewerCircleButton(
+                key: const ValueKey('message-media-video-viewer-reply-thread'),
+                icon: LucideIcons.messageSquareReply,
+                tooltip: context.l10n.replyInThread,
+                onPressed: onReply,
+              ),
+              const Spacer(),
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class _VideoTransportBar extends HookConsumerWidget {
+  final VideoPlayerController controller;
+
+  const _VideoTransportBar({required this.controller});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    useListenable(controller);
+    final value = controller.value;
+    final durationMs = value.duration.inMilliseconds;
+    final positionMs = value.position.inMilliseconds.clamp(0, durationMs);
+    final hasDuration = durationMs > 0;
+
+    return Padding(
+      padding: const EdgeInsets.only(bottom: Grid.xxs),
+      child: DecoratedBox(
+        decoration: BoxDecoration(
+          color: Colors.black.withValues(alpha: 0.42),
+          border: Border.all(color: Colors.white.withValues(alpha: 0.12)),
+          borderRadius: BorderRadius.circular(Radii.full),
+        ),
+        child: Padding(
+          padding: const EdgeInsets.symmetric(horizontal: Grid.xxs),
+          child: Row(
+            children: [
+              IconButton(
+                key: const ValueKey('message-media-video-viewer-play-pause'),
+                onPressed: () {
+                  if (value.isPlaying) {
+                    controller.pause();
+                  } else {
+                    controller.play();
+                  }
+                },
+                tooltip: value.isPlaying
+                    ? context.l10n.pauseVideo
+                    : context.l10n.playVideo,
+                icon: Icon(
+                  value.isPlaying ? LucideIcons.pause : LucideIcons.play,
+                  color: Colors.white,
+                ),
+              ),
+              Text(
+                _formatVideoDuration(Duration(milliseconds: positionMs)),
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: Colors.white,
+                  fontFeatures: const [FontFeature.tabularFigures()],
+                ),
+              ),
+              Expanded(
+                child: SliderTheme(
+                  data: SliderTheme.of(context).copyWith(
+                    activeTrackColor: Colors.white,
+                    inactiveTrackColor: Colors.white.withValues(alpha: 0.28),
+                    thumbColor: Colors.white,
+                    overlayColor: Colors.white.withValues(alpha: 0.12),
+                    trackHeight: 3,
+                    thumbShape: const RoundSliderThumbShape(
+                      enabledThumbRadius: 5,
+                    ),
+                  ),
+                  child: Slider(
+                    value: hasDuration ? positionMs.toDouble() : 0,
+                    min: 0,
+                    max: hasDuration ? durationMs.toDouble() : 1,
+                    onChanged: hasDuration
+                        ? (next) => controller.seekTo(
+                            Duration(milliseconds: next.round()),
+                          )
+                        : null,
+                  ),
+                ),
+              ),
+              Text(
+                _formatVideoDuration(value.duration),
+                style: context.textTheme.labelSmall?.copyWith(
+                  color: Colors.white.withValues(alpha: 0.78),
+                  fontFeatures: const [FontFeature.tabularFigures()],
+                ),
+              ),
+              const SizedBox(width: Grid.xxs),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+String _formatVideoDuration(Duration duration) {
+  final totalSeconds = duration.inSeconds.clamp(0, 359999);
+  final hours = totalSeconds ~/ 3600;
+  final minutes = (totalSeconds % 3600) ~/ 60;
+  final seconds = totalSeconds % 60;
+  final paddedSeconds = seconds.toString().padLeft(2, '0');
+  if (hours > 0) {
+    return '$hours:${minutes.toString().padLeft(2, '0')}:$paddedSeconds';
+  }
+  return '$minutes:$paddedSeconds';
+}

mobile/lib/features/channels/media_viewer_page/video_viewer.dart

@@ -0,0 +1,385 @@
+part of '../media_viewer_page.dart';
+
+class MediaVideoViewerPage extends HookConsumerWidget {
+  final String videoUrl;
+  final String? posterUrl;
+  final VoidCallback? onReply;
+
+  static const _dismissThreshold = 100.0;
+  static const _dismissVelocity = 700.0;
+  static const _backgroundFadeDivisor = 300.0;
+
+  const MediaVideoViewerPage({
+    super.key,
+    required this.videoUrl,
+    this.posterUrl,
+    this.onReply,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final controller = useState<VideoPlayerController?>(null);
+    final videoFile = useRef<File?>(null);
+    final downloadRequestAbort = useRef<Completer<void>?>(null);
+    final downloadSubscription = useRef<StreamSubscription<List<int>>?>(null);
+    final downloadSink = useRef<IOSink?>(null);
+    final initializeFuture = useState<Future<void>?>(null);
+    final error = useState<String?>(null);
+    final dragOffset = useState(0.0);
+    final isDragging = useState(false);
+    final snapBackController = useAnimationController(
+      duration: const Duration(milliseconds: 200),
+    );
+
+    Future<void> deleteVideoFile() async {
+      final file = videoFile.value;
+      videoFile.value = null;
+      if (file == null) return;
+      try {
+        if (await file.exists()) await file.delete();
+      } on FileSystemException {
+        // Temporary storage cleanup should not make closing the viewer fail.
+      }
+    }
+
+    useEffect(() {
+      var disposed = false;
+      Future<void> initializeVideo() async {
+        final auth = ref.read(mediaGetAuthServiceProvider);
+        final uri = Uri.parse(videoUrl);
+
+        // ExoPlayer supports the request headers on every range request, so
+        // keep Android on its streaming path. iOS uses the authenticated local
+        // copy below because AVPlayer can drop those headers after the first
+        // request.
+        if (Platform.isAndroid) {
+          VideoPlayerController? streamingController;
+          try {
+            streamingController = VideoPlayerController.networkUrl(
+              uri,
+              httpHeaders: auth.headersFor(videoUrl),
+            );
+            await streamingController.initialize();
+            await streamingController.play();
+            if (disposed) {
+              await streamingController.dispose();
+              return;
+            }
+            controller.value = streamingController;
+            return;
+          } catch (_) {
+            if (streamingController != null) {
+              await streamingController.dispose();
+            }
+            // Fall through to the authenticated local-file path only when the
+            // streaming controller cannot initialize.
+          }
+        }
+
+        try {
+          final client = ref.read(mediaHttpClientProvider);
+          final requestAbort = Completer<void>();
+          downloadRequestAbort.value = requestAbort;
+          final request = http.AbortableStreamedRequest(
+            'GET',
+            uri,
+            abortTrigger: requestAbort.future,
+          )..headers.addAll(auth.headersFor(videoUrl));
+          late final http.StreamedResponse response;
+          try {
+            response = await client.send(request);
+          } finally {
+            if (downloadRequestAbort.value == requestAbort) {
+              downloadRequestAbort.value = null;
+            }
+          }
+          if (disposed) {
+            await _cancelVideoResponse(response);
+            return;
+          }
+          if (response.statusCode < 200 || response.statusCode >= 300) {
+            await response.stream.drain<void>();
+            throw HttpException(
+              'Video download failed (${response.statusCode})',
+              uri: uri,
+            );
+          }
+
+          final responseSubscription = response.stream.listen(null)..pause();
+          downloadSubscription.value = responseSubscription;
+          final directory = await getTemporaryDirectory();
+          if (disposed) {
+            await responseSubscription.cancel();
+            if (downloadSubscription.value == responseSubscription) {
+              downloadSubscription.value = null;
+            }
+            return;
+          }
+          final file = File(
+            '${directory.path}${Platform.pathSeparator}'
+            'buzz-video-${DateTime.now().microsecondsSinceEpoch}'
+            '${_videoFileExtension(uri)}',
+          );
+          videoFile.value = file;
+          final sink = file.openWrite();
+          downloadSink.value = sink;
+          final completed = Completer<void>();
+          responseSubscription
+            ..onData(sink.add)
+            ..onError((Object error, StackTrace stackTrace) async {
+              await sink.close();
+              if (!completed.isCompleted) {
+                completed.completeError(error, stackTrace);
+              }
+            })
+            ..onDone(() async {
+              await sink.close();
+              if (!completed.isCompleted) completed.complete();
+            })
+            ..resume();
+          await completed.future;
+          downloadSubscription.value = null;
+          downloadSink.value = null;
+          if (disposed) {
+            await deleteVideoFile();
+            return;
+          }
+
+          final localController = VideoPlayerController.file(file);
+          await localController.initialize();
+          await localController.play();
+          if (disposed) {
+            await localController.dispose();
+            await deleteVideoFile();
+            return;
+          }
+          controller.value = localController;
+        } catch (loadError) {
+          if (!disposed) error.value = loadError.toString();
+        }
+      }
+
+      initializeFuture.value = initializeVideo();
+      return () {
+        disposed = true;
+        final activeRequestAbort = downloadRequestAbort.value;
+        if (activeRequestAbort != null && !activeRequestAbort.isCompleted) {
+          activeRequestAbort.complete();
+        }
+        unawaited(downloadSubscription.value?.cancel() ?? Future.value());
+        unawaited(downloadSink.value?.close() ?? Future.value());
+        final activeController = controller.value;
+        if (activeController != null) unawaited(activeController.dispose());
+        unawaited(deleteVideoFile());
+      };
+    }, [videoUrl]);
+
+    void animateSnapBack() {
+      isDragging.value = false;
+      if (MediaQuery.disableAnimationsOf(context)) {
+        dragOffset.value = 0;
+        return;
+      }
+      final tween = Tween<double>(begin: dragOffset.value, end: 0);
+      void listener() => dragOffset.value = tween.evaluate(snapBackController);
+      snapBackController
+        ..stop()
+        ..reset()
+        ..addListener(listener);
+      snapBackController
+          .animateWith(
+            SpringSimulation(
+              SpringDescription.withDurationAndBounce(
+                duration: const Duration(milliseconds: 260),
+                bounce: 0.14,
+              ),
+              0,
+              1,
+              0,
+              snapToEnd: true,
+            ),
+          )
+          .whenCompleteOrCancel(
+            () => snapBackController.removeListener(listener),
+          );
+    }
+
+    Future<void> replyInThread() async {
+      final callback = onReply;
+      if (callback == null) return;
+      final route = ModalRoute.of(context);
+      controller.value?.pause();
+      await Navigator.of(context).maybePop();
+      await route?.completed;
+      callback();
+    }
+
+    final viewportHeight = MediaQuery.sizeOf(context).height;
+    final dragProgress = (dragOffset.value / viewportHeight).clamp(0.0, 1.0);
+    final videoScale = 1 - (dragProgress * 0.1);
+    final chromeOpacity = (1 - (dragOffset.value / 160)).clamp(0.0, 1.0);
+    return Scaffold(
+      key: const ValueKey('message-media-video-viewer'),
+      backgroundColor: Colors.black.withValues(
+        alpha: (1 - (dragOffset.value / _backgroundFadeDivisor)).clamp(
+          0.3,
+          1.0,
+        ),
+      ),
+      body: Stack(
+        children: [
+          Positioned.fill(
+            child: Transform.translate(
+              offset: Offset(0, dragOffset.value),
+              child: Transform.scale(
+                scale: videoScale,
+                child: GestureDetector(
+                  key: const ValueKey('message-media-video-viewer-gesture'),
+                  behavior: HitTestBehavior.opaque,
+                  onVerticalDragStart: (_) {
+                    snapBackController.stop();
+                    isDragging.value = true;
+                  },
+                  onVerticalDragUpdate: (details) {
+                    if (!isDragging.value) return;
+                    dragOffset.value = (dragOffset.value + details.delta.dy)
+                        .clamp(0.0, viewportHeight)
+                        .toDouble();
+                  },
+                  onVerticalDragEnd: (details) {
+                    isDragging.value = false;
+                    final velocity = details.primaryVelocity ?? 0;
+                    if (dragOffset.value > _dismissThreshold ||
+                        velocity > _dismissVelocity) {
+                      controller.value?.pause();
+                      Navigator.of(context).maybePop();
+                      return;
+                    }
+                    animateSnapBack();
+                  },
+                  onVerticalDragCancel: animateSnapBack,
+                  child: SafeArea(
+                    child: Center(
+                      child: FutureBuilder<void>(
+                        future: initializeFuture.value,
+                        builder: (context, snapshot) {
+                          if (error.value != null || snapshot.hasError) {
+                            return _MediaLoadFailure(
+                              message: context.l10n.failedLoadVideo,
+                              icon: LucideIcons.videoOff,
+                            );
+                          }
+
+                          final videoController = controller.value;
+                          if (videoController == null ||
+                              !videoController.value.isInitialized) {
+                            return _VideoLoadingPoster(posterUrl: posterUrl);
+                          }
+
+                          return AspectRatio(
+                            aspectRatio: videoController.value.aspectRatio,
+                            child: VideoPlayer(videoController),
+                          );
+                        },
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ),
+          ),
+          PositionedDirectional(
+            top: Grid.sm,
+            end: Grid.sm,
+            child: Opacity(
+              opacity: chromeOpacity,
+              child: SafeArea(
+                child: _MediaViewerCircleButton(
+                  key: const ValueKey('message-media-video-viewer-close'),
+                  icon: LucideIcons.x,
+                  tooltip: context.l10n.closeVideoViewer,
+                  onPressed: () => Navigator.of(context).maybePop(),
+                ),
+              ),
+            ),
+          ),
+          PositionedDirectional(
+            bottom: 0,
+            start: 0,
+            end: 0,
+            child: Opacity(
+              opacity: chromeOpacity,
+              child: SafeArea(
+                child: _VideoViewerBottomControls(
+                  controller: controller.value,
+                  onReply: onReply == null
+                      ? null
+                      : () => unawaited(replyInThread()),
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+Future<void> _cancelVideoResponse(http.StreamedResponse response) {
+  return response.stream.listen((_) {}).cancel();
+}
+
+String _videoFileExtension(Uri uri) {
+  final path = uri.path;
+  final extensionStart = path.lastIndexOf('.');
+  if (extensionStart < 0 || extensionStart == path.length - 1) return '.mp4';
+  final extension = path.substring(extensionStart);
+  return RegExp(r'^\.[A-Za-z0-9]{1,10}$').hasMatch(extension)
+      ? extension
+      : '.mp4';
+}
+
+class _VideoLoadingPoster extends StatelessWidget {
+  final String? posterUrl;
+
+  const _VideoLoadingPoster({required this.posterUrl});
+
+  @override
+  Widget build(BuildContext context) {
+    return AspectRatio(
+      aspectRatio: 16 / 9,
+      child: Stack(
+        fit: StackFit.expand,
+        children: [
+          if (posterUrl != null)
+            MediaImage(
+              url: posterUrl!,
+              fit: BoxFit.cover,
+              errorBuilder: (_, _, _) => _videoPlaceholder(context),
+            )
+          else
+            _videoPlaceholder(context),
+          const ColoredBox(color: Color.fromRGBO(0, 0, 0, 0.24)),
+          Center(
+            child: BuzzLoadingIndicator(
+              size: 44,
+              color: Colors.white,
+              semanticLabel: context.l10n.loadingVideo,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _videoPlaceholder(BuildContext context) {
+    return ColoredBox(
+      color: context.colors.surfaceContainerHighest,
+      child: Icon(
+        LucideIcons.video,
+        size: 40,
+        color: context.colors.onSurfaceVariant,
+      ),
+    );
+  }
+}