spotube/lib/modules/root/bottom_player.dart

import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:go_router/go_router.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:shadcn_flutter/shadcn_flutter_extension.dart';

import 'package:spotube/collections/assets.gen.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/models/database/database.dart';
import 'package:spotube/modules/player/player_actions.dart';
import 'package:spotube/modules/player/player_overlay.dart';
import 'package:spotube/modules/player/player_track_details.dart';
import 'package:spotube/modules/player/player_controls.dart';
import 'package:spotube/modules/player/volume_slider.dart';
import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/extensions/image.dart';
import 'package:spotube/provider/audio_player/audio_player.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';

import 'package:spotube/provider/volume_provider.dart';
import 'package:spotube/utils/platform.dart';
import 'package:window_manager/window_manager.dart';

class BottomPlayer extends HookConsumerWidget {
  const BottomPlayer({super.key});

  @override
  Widget build(BuildContext context, ref) {
    final playlist = ref.watch(audioPlayerProvider);
    final layoutMode =
        ref.watch(userPreferencesProvider.select((s) => s.layoutMode));

    final mediaQuery = MediaQuery.of(context);

    String albumArt = useMemoized(
      () => playlist.activeTrack?.album?.images?.isNotEmpty == true
          ? (playlist.activeTrack?.album?.images).asUrlString(
              index: (playlist.activeTrack?.album?.images?.length ?? 1) - 1,
              placeholder: ImagePlaceholder.albumArt,
            )
          : Assets.albumPlaceholder.path,
      [playlist.activeTrack?.album?.images],
    );

    // returning an empty non spacious Container as the overlay will take
    // place in the global overlay stack aka [_entries]
    if (layoutMode == LayoutMode.compact ||
        ((mediaQuery.mdAndDown) && layoutMode == LayoutMode.adaptive)) {
      return PlayerOverlay(albumArt: albumArt);
    }

    return SurfaceCard(
      borderRadius: BorderRadius.zero,
      surfaceBlur: context.theme.surfaceBlur,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: PlayerTrackDetails(track: playlist.activeTrack),
          ),
          // controls
          const Flexible(
            flex: 3,
            child: Padding(
              padding: EdgeInsets.only(top: 5),
              child: PlayerControls(),
            ),
          ),
          // add to saved tracks
          Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              PlayerActions(
                extraActions: [
                  Tooltip(
                    tooltip:
                        TooltipContainer(child: Text(context.l10n.mini_player)),
                    child: IconButton(
                      variance: ButtonVariance.ghost,
                      icon: const Icon(SpotubeIcons.miniPlayer),
                      onPressed: () async {
                        if (!kIsDesktop) return;

                        final prevSize = await windowManager.getSize();
                        await windowManager.setMinimumSize(
                          const Size(300, 300),
                        );
                        await windowManager.setAlwaysOnTop(true);
                        if (!kIsLinux) {
                          await windowManager.setHasShadow(false);
                        }
                        await windowManager.setAlignment(Alignment.topRight);
                        await windowManager.setSize(const Size(400, 500));
                        await Future.delayed(
                          const Duration(milliseconds: 100),
                          () async {
                            if (context.mounted) {
                              context.go(
                                '/mini-player',
                                extra: prevSize,
                              );
                            }
                          },
                        );
                      },
                    ),
                  ),
                ],
              ),
              Container(
                height: 40,
                constraints: const BoxConstraints(maxWidth: 250),
                padding: const EdgeInsets.only(right: 10),
                child: Consumer(builder: (context, ref, _) {
                  final volume = ref.watch(volumeProvider);
                  return VolumeSlider(
                    fullWidth: true,
                    value: volume,
                    onChanged: (value) {
                      ref.read(volumeProvider.notifier).setVolume(value);
                    },
                  );
                }),
              )
            ],
          ),
        ],
      ),
    );
  }
}