Replaces the starter template with Login Flow v2 auth, WebDAV-backed Files/Photos/Activity tabs, a swipeable media viewer with PDF/text/video preview, Material You dynamic theming, a frosted-glass floating nav bar, and a rebranded app icon/identity (com.example -> family.nasa). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
178 lines
5.8 KiB
Dart
178 lines
5.8 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:provider/provider.dart';
|
|
import '../models/nextcloud_item.dart';
|
|
import '../providers/server_provider.dart';
|
|
import '../widgets/profile_avatar_button.dart';
|
|
import 'file_viewer_screen.dart';
|
|
|
|
class PhotosView extends StatelessWidget {
|
|
final ScrollController scrollController;
|
|
|
|
const PhotosView({super.key, required this.scrollController});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
final colorScheme = theme.colorScheme;
|
|
final provider = context.watch<ServerProvider>();
|
|
final photos = provider.photoItems;
|
|
|
|
return CustomScrollView(
|
|
controller: scrollController,
|
|
physics: const BouncingScrollPhysics(),
|
|
slivers: [
|
|
SliverAppBar(
|
|
pinned: true,
|
|
expandedHeight: kToolbarHeight,
|
|
collapsedHeight: kToolbarHeight,
|
|
backgroundColor: colorScheme.surface,
|
|
surfaceTintColor: colorScheme.surface,
|
|
scrolledUnderElevation: 0,
|
|
actions: const [ProfileAvatarButton()],
|
|
),
|
|
const SliverToBoxAdapter(child: SizedBox(height: 8)),
|
|
|
|
if (photos.isEmpty)
|
|
SliverFillRemaining(
|
|
child: Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Icon(
|
|
Icons.photo_library_outlined,
|
|
size: 64,
|
|
color: colorScheme.outlineVariant,
|
|
),
|
|
const SizedBox(height: 12),
|
|
Text(
|
|
'No photos found in Nextcloud library',
|
|
style: theme.textTheme.titleMedium?.copyWith(
|
|
color: colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
)
|
|
else
|
|
SliverPadding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
sliver: SliverGrid(
|
|
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 3,
|
|
crossAxisSpacing: 8,
|
|
mainAxisSpacing: 8,
|
|
childAspectRatio: 1.0,
|
|
),
|
|
delegate: SliverChildBuilderDelegate((context, index) {
|
|
final photo = photos[index];
|
|
return _buildPhotoTile(context, photo, provider);
|
|
}, childCount: photos.length),
|
|
),
|
|
),
|
|
|
|
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildPhotoTile(
|
|
BuildContext context,
|
|
NextcloudItem photo,
|
|
ServerProvider provider,
|
|
) {
|
|
final theme = Theme.of(context);
|
|
final colorScheme = theme.colorScheme;
|
|
|
|
return GestureDetector(
|
|
onTap: () => _openLightbox(context, photo, provider),
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
color: colorScheme.surfaceContainerHigh,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
clipBehavior: Clip.antiAlias,
|
|
child: Stack(
|
|
fit: StackFit.expand,
|
|
children: [
|
|
photo.previewUrl != null
|
|
? LayoutBuilder(
|
|
builder: (context, constraints) {
|
|
// Decode at the tile's actual rendered size rather
|
|
// than the full 500x500 preview the server returns —
|
|
// cheaper to decode/cache while scrolling a grid.
|
|
final cachePixels =
|
|
(constraints.maxWidth *
|
|
MediaQuery.of(context).devicePixelRatio)
|
|
.round();
|
|
return Image.network(
|
|
photo.previewUrl!,
|
|
headers: provider.service?.authHeaders,
|
|
fit: BoxFit.cover,
|
|
cacheWidth: cachePixels,
|
|
cacheHeight: cachePixels,
|
|
filterQuality: FilterQuality.low,
|
|
gaplessPlayback: true,
|
|
errorBuilder: (ctx, err, stack) =>
|
|
_buildFallbackTile(context, photo),
|
|
);
|
|
},
|
|
)
|
|
: _buildFallbackTile(context, photo),
|
|
if (photo.type == NextcloudItemType.video)
|
|
Positioned(
|
|
bottom: 8,
|
|
right: 8,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(4),
|
|
decoration: BoxDecoration(
|
|
color: Colors.black.withValues(alpha: 0.6),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: const Icon(
|
|
Icons.play_arrow_rounded,
|
|
color: Colors.white,
|
|
size: 16,
|
|
),
|
|
),
|
|
),
|
|
if (photo.isFavorite)
|
|
const Positioned(
|
|
top: 8,
|
|
right: 8,
|
|
child: Icon(Icons.star_rounded, color: Colors.amber, size: 18),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildFallbackTile(BuildContext context, NextcloudItem photo) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
return Container(
|
|
color: colorScheme.secondaryContainer,
|
|
child: Center(
|
|
child: Icon(
|
|
photo.type == NextcloudItemType.video
|
|
? Icons.movie_rounded
|
|
: Icons.image_rounded,
|
|
color: colorScheme.onSecondaryContainer,
|
|
size: 32,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
void _openLightbox(
|
|
BuildContext context,
|
|
NextcloudItem photo,
|
|
ServerProvider provider,
|
|
) {
|
|
Navigator.push(
|
|
context,
|
|
FileViewerScreen.route(item: photo, siblings: provider.photoItems),
|
|
);
|
|
}
|
|
}
|