immich/mobile/lib/presentation/widgets/asset_viewer/asset_stack.widget.dart

import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/domain/models/asset/base_asset.model.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_stack.provider.dart';
import 'package:immich_mobile/presentation/widgets/asset_viewer/asset_viewer.state.dart';
import 'package:immich_mobile/presentation/widgets/images/image_provider.dart';
import 'package:immich_mobile/providers/infrastructure/asset_viewer/current_asset.provider.dart';

class AssetStackRow extends ConsumerWidget {
  const AssetStackRow({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    int opacity = ref.watch(assetViewerProvider.select((state) => state.backgroundOpacity));
    final showControls = ref.watch(assetViewerProvider.select((s) => s.showingControls));

    if (!showControls) {
      opacity = 0;
    }

    final asset = ref.watch(assetViewerProvider.select((s) => s.currentAsset));

    return IgnorePointer(
      ignoring: opacity < 255,
      child: AnimatedOpacity(
        opacity: opacity / 255,
        duration: Durations.short2,
        child: ref
            .watch(stackChildrenNotifier(asset))
            .when(
              data: (state) => SizedBox.square(dimension: 80, child: _StackList(stack: state)),
              error: (_, __) => const SizedBox.shrink(),
              loading: () => const SizedBox.shrink(),
            ),
      ),
    );
  }
}

class _StackList extends ConsumerWidget {
  final List<RemoteAsset> stack;

  const _StackList({required this.stack});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return ListView.builder(
      scrollDirection: Axis.horizontal,
      padding: const EdgeInsets.only(left: 5, right: 5, bottom: 30),
      itemCount: stack.length,
      itemBuilder: (ctx, index) {
        final asset = stack[index];
        return Padding(
          padding: const EdgeInsets.only(right: 5),
          child: GestureDetector(
            onTap: () {
              ref.read(assetViewerProvider.notifier).setStackIndex(index);
              ref.read(currentAssetNotifier.notifier).setAsset(asset);
            },
            child: Container(
              height: 60,
              width: 60,
              decoration: index == ref.watch(assetViewerProvider.select((s) => s.stackIndex))
                  ? const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(6)),
                      border: Border.fromBorderSide(BorderSide(color: Colors.white, width: 2)),
                    )
                  : const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.all(Radius.circular(6)),
                      border: null,
                    ),
              child: ClipRRect(
                borderRadius: const BorderRadius.all(Radius.circular(4)),
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    Image(
                      fit: BoxFit.cover,
                      image: getThumbnailImageProvider(remoteId: asset.id, size: const Size.square(60)),
                    ),
                    if (asset.isVideo)
                      const Icon(
                        Icons.play_circle_outline_rounded,
                        color: Colors.white,
                        size: 16,
                        shadows: [
                          Shadow(blurRadius: 5.0, color: Color.fromRGBO(0, 0, 0, 0.6), offset: Offset(0.0, 0.0)),
                        ],
                      ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}