fluffychat/lib/pages/image_viewer/image_viewer_view.dart

import 'package:flutter/material.dart';

import 'package:flutter_gen/gen_l10n/l10n.dart';

import 'package:fluffychat/utils/platform_infos.dart';
import 'package:fluffychat/widgets/hover_builder.dart';
import 'package:fluffychat/widgets/mxc_image.dart';
import 'image_viewer.dart';

class ImageViewerView extends StatelessWidget {
  final ImageViewerController controller;

  const ImageViewerView(this.controller, {super.key});

  @override
  Widget build(BuildContext context) {
    final iconButtonStyle = IconButton.styleFrom(
      backgroundColor: Colors.black.withAlpha(200),
      foregroundColor: Colors.white,
    );
    return GestureDetector(
      onTap: () => Navigator.of(context).pop(),
      child: Scaffold(
        backgroundColor: Colors.black.withAlpha(128),
        extendBodyBehindAppBar: true,
        appBar: AppBar(
          elevation: 0,
          leading: IconButton(
            style: iconButtonStyle,
            icon: const Icon(Icons.close),
            onPressed: Navigator.of(context).pop,
            color: Colors.white,
            tooltip: L10n.of(context).close,
          ),
          backgroundColor: Colors.transparent,
          actions: [
            IconButton(
              style: iconButtonStyle,
              icon: const Icon(Icons.reply_outlined),
              onPressed: controller.forwardAction,
              color: Colors.white,
              tooltip: L10n.of(context).share,
            ),
            const SizedBox(width: 8),
            IconButton(
              style: iconButtonStyle,
              icon: const Icon(Icons.download_outlined),
              onPressed: () => controller.saveFileAction(context),
              color: Colors.white,
              tooltip: L10n.of(context).downloadFile,
            ),
            const SizedBox(width: 8),
            if (PlatformInfos.isMobile)
              // Use builder context to correctly position the share dialog on iPad
              Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: Builder(
                  builder: (context) => IconButton(
                    style: iconButtonStyle,
                    onPressed: () => controller.shareFileAction(context),
                    tooltip: L10n.of(context).share,
                    color: Colors.white,
                    icon: Icon(Icons.adaptive.share_outlined),
                  ),
                ),
              ),
          ],
        ),
        body: HoverBuilder(
          builder: (context, hovered) => Stack(
            children: [
              PageView.builder(
                controller: controller.pageController,
                itemCount: controller.allEvents.length,
                itemBuilder: (context, i) => InteractiveViewer(
                  minScale: 1.0,
                  maxScale: 10.0,
                  onInteractionEnd: controller.onInteractionEnds,
                  child: Center(
                    child: Hero(
                      tag: controller.allEvents[i].eventId,
                      child: GestureDetector(
                        // Ignore taps to not go back here:
                        onTap: () {},
                        child: MxcImage(
                          key: ValueKey(controller.allEvents[i].eventId),
                          event: controller.allEvents[i],
                          fit: BoxFit.contain,
                          isThumbnail: false,
                          animated: true,
                        ),
                      ),
                    ),
                  ),
                ),
              ),
              if (hovered && controller.canGoBack)
                Align(
                  alignment: Alignment.centerLeft,
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: IconButton(
                      style: iconButtonStyle,
                      tooltip: L10n.of(context).previous,
                      icon: const Icon(Icons.chevron_left_outlined),
                      onPressed: controller.prevImage,
                    ),
                  ),
                ),
              if (hovered && controller.canGoNext)
                Align(
                  alignment: Alignment.centerRight,
                  child: Padding(
                    padding: const EdgeInsets.all(12.0),
                    child: IconButton(
                      style: iconButtonStyle,
                      tooltip: L10n.of(context).next,
                      icon: const Icon(Icons.chevron_right_outlined),
                      onPressed: controller.nextImage,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ),
    );
  }
}