with image and controls

mobile/lib/presentation/widgets/asset_viewer/asset_details.widget.dart

@@ -225,81 +225,85 @@ class AssetDetails extends ConsumerWidget {
     return Container(
       constraints: BoxConstraints(minHeight: minHeight),
       decoration: BoxDecoration(color: context.isDarkTheme ? context.colorScheme.surface : Colors.white),
-      child: Column(
+      child: Stack(
         children: [
           const _DragHandle(),
-          // Asset Date and Time
+          Column(
-          SheetTile(
+            children: [
-            title: _getDateTime(context, asset, exifInfo),
+              // Asset Date and Time
-            titleStyle: context.textTheme.labelLarge,
+              SheetTile(
-            trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
+                title: _getDateTime(context, asset, exifInfo),
-            onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
+                titleStyle: context.textTheme.labelLarge,
-          ),
+                trailing: asset.hasRemote && isOwner ? const Icon(Icons.edit, size: 18) : null,
-          if (exifInfo != null) _SheetAssetDescription(exif: exifInfo, isEditable: isOwner),
+                onTap: asset.hasRemote && isOwner ? () async => await _editDateTime(context, ref) : null,
-          const SheetPeopleDetails(),
-          const SheetLocationDetails(),
-          // Details header
-          SheetTile(
-            title: 'details'.t(context: context),
-            titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
-          ),
-          // File info
-          buildFileInfoTile(),
-          // Camera info
-          if (cameraTitle != null) ...[
-            const SizedBox(height: 16),
-            SheetTile(
-              title: cameraTitle,
-              titleStyle: context.textTheme.labelLarge,
-              leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
-              subtitle: _getCameraInfoSubtitle(exifInfo),
-              subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
-            ),
-          ],
-          // Lens info
-          if (lensTitle != null) ...[
-            const SizedBox(height: 16),
-            SheetTile(
-              title: lensTitle,
-              titleStyle: context.textTheme.labelLarge,
-              leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
-              subtitle: _getLensInfoSubtitle(exifInfo),
-              subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
-            ),
-          ],
-          // Rating bar
-          if (isRatingEnabled) ...[
-            Padding(
-              padding: const EdgeInsets.only(left: 16.0, top: 16.0),
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                crossAxisAlignment: CrossAxisAlignment.start,
-                spacing: 8,
-                children: [
-                  Text(
-                    'rating'.t(context: context),
-                    style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
-                  ),
-                  RatingBar(
-                    initialRating: exifInfo?.rating?.toDouble() ?? 0,
-                    filledColor: context.themeData.colorScheme.primary,
-                    unfilledColor: context.themeData.colorScheme.onSurface.withAlpha(100),
-                    itemSize: 40,
-                    onRatingUpdate: (rating) async {
-                      await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, rating.round());
-                    },
-                    onClearRating: () async {
-                      await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, 0);
-                    },
-                  ),
-                ],
               ),
-            ),
+              if (exifInfo != null) _SheetAssetDescription(exif: exifInfo, isEditable: isOwner),
-          ],
+              const SheetPeopleDetails(),
-          // Appears in (Albums)
+              const SheetLocationDetails(),
-          Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
+              // Details header
-          // padding at the bottom to avoid cut-off
+              SheetTile(
-          const SizedBox(height: 60),
+                title: 'details'.t(context: context),
+                titleStyle: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+              ),
+              // File info
+              buildFileInfoTile(),
+              // Camera info
+              if (cameraTitle != null) ...[
+                const SizedBox(height: 16),
+                SheetTile(
+                  title: cameraTitle,
+                  titleStyle: context.textTheme.labelLarge,
+                  leading: Icon(Icons.camera_alt_outlined, size: 24, color: context.textTheme.labelLarge?.color),
+                  subtitle: _getCameraInfoSubtitle(exifInfo),
+                  subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                ),
+              ],
+              // Lens info
+              if (lensTitle != null) ...[
+                const SizedBox(height: 16),
+                SheetTile(
+                  title: lensTitle,
+                  titleStyle: context.textTheme.labelLarge,
+                  leading: Icon(Icons.camera_outlined, size: 24, color: context.textTheme.labelLarge?.color),
+                  subtitle: _getLensInfoSubtitle(exifInfo),
+                  subtitleStyle: context.textTheme.bodyMedium?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                ),
+              ],
+              // Rating bar
+              if (isRatingEnabled) ...[
+                Padding(
+                  padding: const EdgeInsets.only(left: 16.0, top: 16.0),
+                  child: Column(
+                    mainAxisSize: MainAxisSize.min,
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    spacing: 8,
+                    children: [
+                      Text(
+                        'rating'.t(context: context),
+                        style: context.textTheme.labelLarge?.copyWith(color: context.colorScheme.onSurfaceSecondary),
+                      ),
+                      RatingBar(
+                        initialRating: exifInfo?.rating?.toDouble() ?? 0,
+                        filledColor: context.themeData.colorScheme.primary,
+                        unfilledColor: context.themeData.colorScheme.onSurface.withAlpha(100),
+                        itemSize: 40,
+                        onRatingUpdate: (rating) async {
+                          await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, rating.round());
+                        },
+                        onClearRating: () async {
+                          await ref.read(actionProvider.notifier).updateRating(ActionSource.viewer, 0);
+                        },
+                      ),
+                    ],
+                  ),
+                ),
+              ],
+              // Appears in (Albums)
+              Padding(padding: const EdgeInsets.only(top: 16.0), child: _buildAppearsInList(ref, context)),
+              // padding at the bottom to avoid cut-off
+              const SizedBox(height: 60),
+            ],
+          ),
         ],
       ),
     );
@@ -404,9 +408,14 @@ class _DragHandle extends StatelessWidget {
       label: MaterialLocalizations.of(context).modalBarrierDismissLabel,
       container: true,
       button: true,
-      child: SizedBox(
+      child: Container(
-        width: math.max(handleSize.width, kMinInteractiveDimension),
+        decoration: BoxDecoration(
+          color: context.isDarkTheme ? context.colorScheme.surface : Colors.white,
+          borderRadius: const BorderRadius.vertical(top: Radius.circular(20)),
+        ),
+        width: double.infinity,
         height: math.max(handleSize.height, kMinInteractiveDimension),
+        transform: Matrix4.translationValues(0, -kMinInteractiveDimension, 0),
         child: Center(
           child: Container(
             height: handleSize.height,

mobile/lib/presentation/widgets/asset_viewer/asset_viewer.page.dart

@@ -165,7 +165,14 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
 
   void _onScroll() {
     setState(() {
-      _assetDetailsOpacity = (_scrollController.offset / 50).clamp(0.0, 1.0);
+      // _assetDetailsOpacity = (_scrollController.offset / 50).clamp(0.0, 1.0);
+      _assetDetailsOpacity = _scrollController.offset > 10 ? 1 : 0;
+
+      if (_assetDetailsOpacity == 0) {
+        ref.read(assetViewerProvider.notifier).setControls(true);
+      } else {
+        ref.read(assetViewerProvider.notifier).setControls(false);
+      }
     });
   }
 
@@ -706,12 +713,26 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
         ),
         body: LayoutBuilder(
           builder: (context, constraints) {
-            final imageHeight = 200.0; // Your image's height
+            final viewportWidth = constraints.maxWidth;
             final viewportHeight = constraints.maxHeight;
 
+            // Calculate image display height from asset dimensions
+            final asset = ref.read(currentAssetNotifier);
+            final assetWidth = asset?.width;
+            final assetHeight = asset?.height;
+
+            // should probably get this value from the actual size of the image
+            // rather than calculating it. It could lead to very slight
+            // misalignments.
+            double imageHeight = viewportHeight;
+            if (assetWidth != null && assetHeight != null && assetWidth > 0 && assetHeight > 0) {
+              final aspectRatio = assetWidth / assetHeight;
+              imageHeight = math.min(viewportWidth / aspectRatio, viewportHeight);
+            }
+
             // Calculate padding to center the image in the viewport
-            final topPadding = (viewportHeight - imageHeight) / 2;
+            final topPadding = math.max((viewportHeight - imageHeight) / 2, 0.0);
-            final snapOffset = math.min(topPadding + (imageHeight / 2), viewportHeight / 3);
+            final snapOffset = math.min(topPadding + (imageHeight / 2), (viewportHeight / 3) * 2);
 
             return SingleChildScrollView(
               controller: _scrollController,
@@ -719,62 +740,62 @@ class _AssetViewerState extends ConsumerState<AssetViewer> {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.stretch,
                 children: [
-                  SizedBox(height: topPadding),
-                  // Center(child: Image.asset('assets/immich-logo.png', height: imageHeight)),
                   SizedBox(
-                    height: viewportHeight,
+                    height: imageHeight + topPadding,
-                    child: PhotoViewGallery.builder(
+                    child: Stack(
-                      gaplessPlayback: true,
+                      clipBehavior: Clip.none,
-                      loadingBuilder: _placeholderBuilder,
+                      children: [
-                      pageController: pageController,
+                        Column(
-                      scrollPhysics: CurrentPlatform.isIOS
+                          children: [
-                          ? const FastScrollPhysics() // Use bouncing physics for iOS
+                            SizedBox(height: topPadding),
-                          : const FastClampingScrollPhysics(), // Use heavy physics for Android
+                            SizedBox(
-                      itemCount: totalAssets,
+                              height: imageHeight,
-                      onPageChanged: _onPageChanged,
+                              child: PhotoViewGallery.builder(
-                      onPageBuild: _onPageBuild,
+                                gaplessPlayback: true,
-                      scaleStateChangedCallback: _onScaleStateChanged,
+                                loadingBuilder: _placeholderBuilder,
-                      builder: _assetBuilder,
+                                pageController: pageController,
-                      backgroundDecoration: BoxDecoration(color: backgroundColor),
+                                scrollPhysics: CurrentPlatform.isIOS
-                      enablePanAlways: true,
+                                    ? const FastScrollPhysics() // Use bouncing physics for iOS
+                                    : const FastClampingScrollPhysics(), // Use heavy physics for Android
+                                itemCount: totalAssets,
+                                onPageChanged: _onPageChanged,
+                                onPageBuild: _onPageBuild,
+                                scaleStateChangedCallback: _onScaleStateChanged,
+                                builder: _assetBuilder,
+                                backgroundDecoration: BoxDecoration(color: backgroundColor),
+                                enablePanAlways: true,
+                              ),
+                            ),
+                          ],
+                        ),
+                        Positioned(
+                          height: viewportHeight,
+                          top: 0,
+                          left: 0,
+                          right: 0,
+                          child: const IgnorePointer(
+                            // TODO: Sync with whether it's visible?
+                            // TODO: Hide on scroll
+                            ignoring: true,
+                            child: Align(
+                              alignment: Alignment.bottomCenter,
+                              child: Column(
+                                mainAxisSize: MainAxisSize.min,
+                                mainAxisAlignment: MainAxisAlignment.end,
+                                crossAxisAlignment: CrossAxisAlignment.stretch,
+                                children: [AssetStackRow(), ViewerBottomBar()],
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
                     ),
                   ),
-                  Opacity(
+                  AnimatedOpacity(
                     opacity: _assetDetailsOpacity,
+                    duration: kThemeAnimationDuration,
                     child: AssetDetails(minHeight: viewportHeight / 3 * 2),
                   ),
-
-                  // Stack(
-                  //   children: [
-                  //     PhotoViewGallery.builder(
-                  //       gaplessPlayback: true,
-                  //       loadingBuilder: _placeholderBuilder,
-                  //       pageController: pageController,
-                  //       scrollPhysics: CurrentPlatform.isIOS
-                  //           ? const FastScrollPhysics() // Use bouncing physics for iOS
-                  //           : const FastClampingScrollPhysics(), // Use heavy physics for Android
-                  //       itemCount: totalAssets,
-                  //       onPageChanged: _onPageChanged,
-                  //       onPageBuild: _onPageBuild,
-                  //       scaleStateChangedCallback: _onScaleStateChanged,
-                  //       builder: _assetBuilder,
-                  //       backgroundDecoration: BoxDecoration(color: backgroundColor),
-                  //       enablePanAlways: true,
-                  //     ),
-                  //     if (!showingBottomSheet)
-                  //       const Positioned(
-                  //         bottom: 0,
-                  //         left: 0,
-                  //         right: 0,
-                  //         child: Column(
-                  //           mainAxisSize: MainAxisSize.min,
-                  //           mainAxisAlignment: MainAxisAlignment.end,
-                  //           crossAxisAlignment: CrossAxisAlignment.stretch,
-                  //           children: [AssetStackRow(), ViewerBottomBar()],
-                  //         ),
-                  //       ),
-                  //   ],
-                  // ),
                 ],
               ),
             );