import 'dart:async'; import 'package:aves/image_providers/uri_picture_provider.dart'; import 'package:aves/model/image_entry.dart'; import 'package:aves/model/settings/entry_background.dart'; import 'package:aves/model/settings/settings.dart'; import 'package:aves/theme/icons.dart'; import 'package:aves/widgets/collection/empty.dart'; import 'package:aves/widgets/common/fx/checkered_decoration.dart'; import 'package:aves/widgets/common/magnifier/controller/controller.dart'; import 'package:aves/widgets/common/magnifier/controller/state.dart'; import 'package:aves/widgets/common/magnifier/magnifier.dart'; import 'package:aves/widgets/common/magnifier/scale/scale_boundaries.dart'; import 'package:aves/widgets/common/magnifier/scale/scale_level.dart'; import 'package:aves/widgets/common/magnifier/scale/state.dart'; import 'package:aves/widgets/fullscreen/tiled_view.dart'; import 'package:aves/widgets/fullscreen/video_view.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter_ijkplayer/flutter_ijkplayer.dart'; import 'package:flutter_svg/flutter_svg.dart'; import 'package:tuple/tuple.dart'; class ImageView extends StatefulWidget { final ImageEntry entry; final Object heroTag; final MagnifierTapCallback onTap; final List> videoControllers; final VoidCallback onDisposed; static const decorationCheckSize = 20.0; const ImageView({ Key key, @required this.entry, this.heroTag, @required this.onTap, @required this.videoControllers, this.onDisposed, }) : super(key: key); @override _ImageViewState createState() => _ImageViewState(); } class _ImageViewState extends State { final MagnifierController _magnifierController = MagnifierController(); final ValueNotifier _viewStateNotifier = ValueNotifier(ViewState.zero); final List _subscriptions = []; static const initialScale = ScaleLevel(ref: ScaleReference.contained); static const minScale = ScaleLevel(ref: ScaleReference.contained); static const maxScale = ScaleLevel(factor: 2.0); ImageEntry get entry => widget.entry; MagnifierTapCallback get onTap => widget.onTap; @override void initState() { super.initState(); _subscriptions.add(_magnifierController.stateStream.listen(_onViewStateChanged)); _subscriptions.add(_magnifierController.scaleBoundariesStream.listen(_onViewScaleBoundariesChanged)); } @override void dispose() { _subscriptions ..forEach((sub) => sub.cancel()) ..clear(); widget.onDisposed?.call(); super.dispose(); } @override Widget build(BuildContext context) { Widget child; if (entry.isVideo) { if (entry.width > 0 && entry.height > 0) { child = _buildVideoView(); } } else if (entry.isSvg) { child = _buildSvgView(); } else if (entry.canDecode) { child = _buildRasterView(); } child ??= ErrorChild(onTap: () => onTap?.call(null)); // no hero for videos, as a typical video first frame is different from its thumbnail return widget.heroTag != null && !entry.isVideo ? Hero( tag: widget.heroTag, transitionOnUserGestures: true, child: child, ) : child; } Widget _buildRasterView() { return Magnifier( // key includes size and orientation to refresh when the image is rotated key: ValueKey('${entry.rotationDegrees}_${entry.isFlipped}_${entry.width}_${entry.height}_${entry.path}'), child: TiledImageView( entry: entry, viewStateNotifier: _viewStateNotifier, errorBuilder: (context, error, stackTrace) => ErrorChild(onTap: () => onTap?.call(null)), ), childSize: entry.displaySize, controller: _magnifierController, maxScale: maxScale, minScale: minScale, initialScale: initialScale, onTap: (c, d, s, childPosition) => onTap?.call(childPosition), applyScale: false, ); } Widget _buildSvgView() { final background = settings.vectorBackground; final colorFilter = background.isColor ? ColorFilter.mode(background.color, BlendMode.dstOver) : null; Widget child = Magnifier( child: SvgPicture( UriPicture( uri: entry.uri, mimeType: entry.mimeType, colorFilter: colorFilter, ), ), childSize: entry.displaySize, controller: _magnifierController, minScale: minScale, initialScale: initialScale, scaleStateCycle: _vectorScaleStateCycle, onTap: (c, d, s, childPosition) => onTap?.call(childPosition), ); if (background == EntryBackground.checkered) { child = ValueListenableBuilder( valueListenable: _viewStateNotifier, builder: (context, viewState, child) { final viewportSize = viewState.viewportSize; if (viewportSize == null) return child; final side = viewportSize.shortestSide; final checkSize = side / ((side / ImageView.decorationCheckSize).round()); final viewSize = entry.displaySize * viewState.scale; final decorationSize = applyBoxFit(BoxFit.none, viewSize, viewportSize).source; final offset = ((decorationSize - viewportSize) as Offset) / 2; return Stack( alignment: Alignment.center, children: [ Positioned( width: decorationSize.width, height: decorationSize.height, child: DecoratedBox( decoration: CheckeredDecoration( checkSize: checkSize, offset: offset, ), ), ), child, ], ); }, child: child, ); } return child; } Widget _buildVideoView() { final videoController = widget.videoControllers.firstWhere((kv) => kv.item1 == entry.uri, orElse: () => null)?.item2; return Magnifier( child: videoController != null ? AvesVideo( entry: entry, controller: videoController, ) : SizedBox(), childSize: entry.displaySize, controller: _magnifierController, maxScale: maxScale, minScale: minScale, initialScale: initialScale, onTap: (c, d, s, childPosition) => onTap?.call(childPosition), ); } void _onViewStateChanged(MagnifierState v) { final current = _viewStateNotifier.value; final viewState = ViewState(v.position, v.scale, current.viewportSize); _viewStateNotifier.value = viewState; ViewStateNotification(entry.uri, viewState).dispatch(context); } void _onViewScaleBoundariesChanged(ScaleBoundaries v) { final current = _viewStateNotifier.value; final viewState = ViewState(current.position, current.scale, v.viewportSize); _viewStateNotifier.value = viewState; ViewStateNotification(entry.uri, viewState).dispatch(context); } static ScaleState _vectorScaleStateCycle(ScaleState actual) { switch (actual) { case ScaleState.initial: return ScaleState.covering; default: return ScaleState.initial; } } } class ViewState { final Offset position; final double scale; final Size viewportSize; static const ViewState zero = ViewState(Offset.zero, 0, null); const ViewState(this.position, this.scale, this.viewportSize); @override String toString() => '$runtimeType#${shortHash(this)}{position=$position, scale=$scale, viewportSize=$viewportSize}'; } class ViewStateNotification extends Notification { final String uri; final ViewState viewState; const ViewStateNotification(this.uri, this.viewState); @override String toString() => '$runtimeType#${shortHash(this)}{uri=$uri, viewState=$viewState}'; } class ErrorChild extends StatelessWidget { final VoidCallback onTap; const ErrorChild({@required this.onTap}); @override Widget build(BuildContext context) { return GestureDetector( onTap: () => onTap?.call(), // use a `Container` with a dummy color to make it expand // so that we can also detect taps around the title `Text` child: Container( color: Colors.transparent, child: EmptyContent( icon: AIcons.error, text: 'Oops!', alignment: Alignment.center, ), ), ); } } typedef MagnifierTapCallback = void Function(Offset childPosition);