freezer/lib/ui/player_bar.dart

import 'dart:async';

import 'package:audio_service/audio_service.dart';
import 'package:flutter/material.dart';
import 'package:freezer/settings.dart';
import 'package:freezer/translations.i18n.dart';
import 'package:rxdart/rxdart.dart';

import '../api/player.dart';
import 'cached_image.dart';

class FancyScaffold extends StatefulWidget {
  final Widget bottomPanel;
  final double bottomPanelHeight;
  final Widget expandedPanel;
  final Widget? bottomNavigationBar;
  final Widget? drawer;
  final Widget? bodyDrawer;
  final Widget body;
  final void Function(AnimationStatus)? onAnimationStatusChange;

  const FancyScaffold({
    required this.bottomPanel,
    required this.bottomPanelHeight,
    required this.expandedPanel,
    required this.body,
    this.onAnimationStatusChange,
    this.bottomNavigationBar,
    this.bodyDrawer,
    this.drawer,
    super.key,
  });

  static FancyScaffoldState? of(BuildContext context) =>
      context.findAncestorStateOfType<FancyScaffoldState>();

  @override
  FancyScaffoldState createState() => FancyScaffoldState();
}

class FancyScaffoldState extends State<FancyScaffold>
    with TickerProviderStateMixin {
  // goes from 0 to 1 (double)
  // 0 = preview, 1 = expanded
  late final AnimationController dragController;
  final statusNotifier =
      ValueNotifier<AnimationStatus>(AnimationStatus.dismissed);

  @override
  void initState() {
    dragController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 500));
    dragController.addStatusListener((status) => statusNotifier.value = status);
    statusNotifier.addListener(
        () => widget.onAnimationStatusChange?.call(statusNotifier.value));
    super.initState();
  }

  @override
  void dispose() {
    dragController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final systemPadding = MediaQuery.of(context).viewPadding;
    final defaultBottomPadding =
        (widget.bottomNavigationBar == null ? 0 : 80.0) + systemPadding.bottom;
    final screenHeight = MediaQuery.of(context).size.height;
    final sizeAnimation = Tween<double>(
      begin: widget.bottomPanelHeight / MediaQuery.of(context).size.height,
      end: 1.0,
    ).animate(dragController);
    return WillPopScope(
      onWillPop: () {
        if (statusNotifier.value == AnimationStatus.completed ||
            statusNotifier.value == AnimationStatus.reverse) {
          dragController.fling(velocity: -1.0);
          return Future.value(false);
        }

        return Future.value(true);
      },
      child: Stack(
        children: [
          Positioned.fill(
            child: Scaffold(
              body: widget.bodyDrawer != null
                  ? Row(children: [
                      widget.bodyDrawer!,
                      Expanded(child: widget.body)
                    ])
                  : widget.body,
              drawer: widget.drawer,
              bottomNavigationBar: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  SizedBox(height: widget.bottomPanelHeight),
                  if (widget.bottomNavigationBar != null)
                    SizeTransition(
                      axisAlignment: -1.0,
                      sizeFactor:
                          Tween(begin: 1.0, end: 0.0).animate(sizeAnimation),
                      child: widget.bottomNavigationBar,
                    ),
                ],
              ),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: AnimatedBuilder(
              animation: sizeAnimation,
              builder: (context, child) {
                final x = 1.0 - sizeAnimation.value;
                return Padding(
                  padding: EdgeInsets.only(
                    bottom: (defaultBottomPadding /*+ 8.0*/) * x,
                    //right: 8.0 * x,
                    //left: 8.0 * x,
                  ),
                  child: child,
                );
              },
              child: ValueListenableBuilder(
                valueListenable: statusNotifier,
                builder: (context, state, child) {
                  return GestureDetector(
                    onVerticalDragEnd: _onVerticalDragEnd,
                    onVerticalDragUpdate: _onVerticalDragUpdate,
                    child: child,
                  );
                },
                child: SizeTransition(
                    sizeFactor: sizeAnimation,
                    axisAlignment: -1.0,
                    axis: Axis.vertical,
                    child: SizedBox(
                      height: screenHeight,
                      width: MediaQuery.of(context).size.width,
                      child: ValueListenableBuilder(
                        valueListenable: statusNotifier,
                        builder: (context, state, _) => Stack(
                          children: [
                            if (state != AnimationStatus.dismissed)
                              Positioned.fill(
                                key: const Key('player_screen'),
                                child: widget.expandedPanel,
                              ),
                            if (state != AnimationStatus.completed)
                              Positioned(
                                top: 0,
                                right: 0,
                                left: 0,
                                key: const Key('player_bar'),
                                child: FadeTransition(
                                  opacity: Tween(begin: 1.0, end: 0.0)
                                      .animate(dragController),
                                  child: SizedBox(
                                      height: widget.bottomPanelHeight,
                                      child: widget.bottomPanel),
                                ),
                              ),
                          ],
                        ),
                      ),
                    )),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _onVerticalDragUpdate(DragUpdateDetails details) {
    dragController.value -=
        details.delta.dy / MediaQuery.of(context).size.height;
  }

  void _onVerticalDragEnd(DragEndDetails details) {
    // snap widget to size
    // this should be also handled by drag velocity and not only with bare size.

    const double minFlingVelocity = 365.0;

    if (details.velocity.pixelsPerSecond.dy.abs() > minFlingVelocity) {
      dragController.fling(
          velocity: -details.velocity.pixelsPerSecond.dy /
              MediaQuery.of(context).size.height);
      return;
    }

    dragController.fling(velocity: dragController.value > 0.5 ? 1.0 : -1.0);
  }
}

class PlayerBar extends StatefulWidget {
  final VoidCallback? onTap;
  final bool shouldHaveHero;
  final Color? backgroundColor;
  final FocusNode? focusNode;
  const PlayerBar({
    Key? key,
    this.onTap,
    this.shouldHaveHero = true,
    this.backgroundColor,
    this.focusNode,
  }) : super(key: key);

  @override
  State<PlayerBar> createState() => _PlayerBarState();
}

class _PlayerBarState extends State<PlayerBar> {
  final double iconSize = 28;
  late StreamSubscription mediaItemSub;
  late bool _isNothingPlaying = audioHandler.mediaItem.value == null;

  double parsePosition(Duration position) {
    if (audioHandler.mediaItem.value == null) return 0.0;
    if (audioHandler.mediaItem.value!.duration!.inSeconds == 0) {
      return 0.0; //Division by 0
    }
    return position.inSeconds /
        audioHandler.mediaItem.value!.duration!.inSeconds;
  }

  @override
  void initState() {
    mediaItemSub = audioHandler.mediaItem.listen((playingItem) {
      if ((playingItem == null && !_isNothingPlaying) ||
          (playingItem != null && _isNothingPlaying)) {
        setState(() => _isNothingPlaying = playingItem == null);
      }
    });
    super.initState();
  }

  Color get backgroundColor =>
      widget.backgroundColor ??
      Theme.of(context).navigationBarTheme.backgroundColor ??
      Theme.of(context).colorScheme.surface;

  @override
  void dispose() {
    mediaItemSub.cancel();
    super.dispose();
  }

  bool _gestureRegistered = false;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 68.0,
      child: _isNothingPlaying
          ? null
          : GestureDetector(
              onHorizontalDragUpdate: (details) async {
                if (_gestureRegistered) return;
                const double sensitivity = 12.69;
                //Right swipe
                _gestureRegistered = true;
                if (details.delta.dx > sensitivity) {
                  await audioHandler.skipToPrevious();
                }
                //Left
                if (details.delta.dx < -sensitivity) {
                  await audioHandler.skipToNext();
                }
                _gestureRegistered = false;
                return;
              },
              child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                Expanded(
                  child: StreamBuilder<MediaItem?>(
                      stream: audioHandler.mediaItem,
                      initialData: audioHandler.mediaItem.valueOrNull,
                      builder: (context, snapshot) {
                        if (!snapshot.hasData) return const SizedBox();
                        final currentMediaItem = snapshot.data!;
                        final image = CachedImage(
                          width: 50,
                          height: 50,
                          url: currentMediaItem.extras!['thumb'] ??
                              currentMediaItem.artUri.toString(),
                        );
                        final leadingWidget = widget.shouldHaveHero
                            ? Hero(tag: currentMediaItem.id, child: image)
                            : image;
                        return Material(
                            child: ListTile(
                                dense: true,
                                focusNode: widget.focusNode,
                                contentPadding:
                                    const EdgeInsets.symmetric(horizontal: 8.0),
                                onTap: widget.onTap,
                                leading: AnimatedSwitcher(
                                    duration: const Duration(milliseconds: 250),
                                    child: leadingWidget),
                                title: Text(
                                  currentMediaItem.displayTitle!,
                                  overflow: TextOverflow.clip,
                                  maxLines: 1,
                                ),
                                subtitle: Text(
                                  currentMediaItem.displaySubtitle ?? '',
                                  overflow: TextOverflow.clip,
                                  maxLines: 1,
                                ),
                                trailing: IconTheme(
                                  data: IconThemeData(
                                      color: settings.isDark
                                          ? Colors.white
                                          : Colors.grey[600]),
                                  child: Row(
                                    mainAxisSize: MainAxisSize.min,
                                    children: <Widget>[
                                      PrevNextButton(
                                        iconSize,
                                        prev: true,
                                      ),
                                      PlayPauseButton(iconSize),
                                      PrevNextButton(iconSize)
                                    ],
                                  ),
                                )));
                      }),
                ),
                SizedBox(
                  height: 3.0,
                  child: StreamBuilder<Duration>(
                      stream: AudioService.position,
                      builder: (context, snapshot) {
                        return LinearProgressIndicator(
                          value: parsePosition(snapshot.data ?? Duration.zero),
                        );
                      }),
                ),
              ]),
            ),
    );
  }
}

class PrevNextButton extends StatelessWidget {
  final double size;
  final bool prev;
  final bool hidePrev;
  const PrevNextButton(this.size,
      {super.key, this.prev = false, this.hidePrev = false});

  @override
  Widget build(BuildContext context) {
    // Listens to both mediaItem updates (a.k.a. when the song changes)
    // and queue updates (so for example, in SmartTrackLists, when the songs are fetched, it's updated with the new items)
    return StreamBuilder<bool>(
      stream: Rx.combineLatest2<MediaItem?, List<MediaItem>, bool>(
          audioHandler.mediaItem,
          audioHandler.queue,
          (_, queue) => playerHelper.queueIndex < queue.length - 1),
      builder: (context, snapshot) {
        if (!prev) {
          return IconButton(
            splashRadius: size * 2.0,
            icon: Icon(
              Icons.skip_next,
              semanticLabel: "Play next".i18n,
            ),
            iconSize: size,
            onPressed:
                snapshot.data == true ? () => audioHandler.skipToNext() : null,
          );
        }
        final canGoPrev = playerHelper.queueIndex > 0;

        if (!canGoPrev && hidePrev) return const SizedBox.shrink();

        return IconButton(
          splashRadius: size * 2.0,
          icon: Icon(
            Icons.skip_previous,
            semanticLabel: "Play previous".i18n,
          ),
          iconSize: size,
          onPressed: canGoPrev ? () => audioHandler.skipToPrevious() : null,
        );
      },
    );
  }
}

class PlayPauseButton extends StatefulWidget {
  final double size;
  final bool filled;
  final Color? iconColor;

  /// The color of the card if [filled] is true
  final Color? color;
  const PlayPauseButton(
    this.size, {
    Key? key,
    this.filled = false,
    this.color,
    this.iconColor,
  }) : super(key: key);

  @override
  State<PlayPauseButton> createState() => _PlayPauseButtonState();
}

class _PlayPauseButtonState extends State<PlayPauseButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _controller;
  late final Animation<double> _animation;
  late StreamSubscription _subscription;
  late bool _canPlay = audioHandler.playbackState.value.processingState ==
          AudioProcessingState.ready ||
      audioHandler.playbackState.value.processingState ==
          AudioProcessingState.idle;

  @override
  void initState() {
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 200));
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);

    _subscription = audioHandler.playbackState.listen((playbackState) {
      if (playbackState.processingState == AudioProcessingState.ready ||
          audioHandler.playbackState.value.processingState ==
              AudioProcessingState.idle) {
        if (playbackState.playing) {
          _controller.forward();
        } else {
          _controller.reverse();
        }
        if (!_canPlay) setState(() => _canPlay = true);
        return;
      }
      setState(() => _canPlay = false);
    });
    super.initState();
  }

  @override
  void dispose() {
    _subscription.cancel();
    _controller.dispose();
    super.dispose();
  }

  void _playPause() {
    if (audioHandler.playbackState.value.playing) {
      audioHandler.pause();
    } else {
      audioHandler.play();
    }
  }

  @override
  Widget build(BuildContext context) {
    final Widget? child;
    if (_canPlay) {
      final icon = AnimatedIcon(
        icon: AnimatedIcons.play_pause,
        progress: _animation,
        semanticLabel: audioHandler.playbackState.value.playing
            ? 'Pause'.i18n
            : 'Play'.i18n,
      );
      if (!widget.filled) {
        return IconButton(
            color: widget.iconColor,
            icon: icon,
            iconSize: widget.size,
            onPressed: _playPause);
      } else {
        child = Material(
          type: MaterialType.transparency,
          child: InkWell(
              customBorder: const CircleBorder(),
              onTap: _playPause,
              child: IconTheme.merge(
                  child: Center(child: icon),
                  data: IconThemeData(
                      size: widget.size / 2, color: widget.iconColor))),
        );
      }
    } else {
      switch (audioHandler.playbackState.value.processingState) {
        //Stopped/Error
        case AudioProcessingState.error:
          child = null;
          break;
        //Loading, connecting, rewinding...
        default:
          child = const Center(child: CircularProgressIndicator());
          break;
      }
    }
    if (widget.filled) {
      return SizedBox.square(
          dimension: widget.size,
          child: AnimatedContainer(
              duration: const Duration(seconds: 1),
              decoration:
                  BoxDecoration(shape: BoxShape.circle, color: widget.color),
              child: child));
    } else {
      return SizedBox.square(dimension: widget.size, child: child);
    }
  }
}