helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add video thumbnail with duration and icon

Browse source
This commit is contained in:
Alex Tran 2022-02-05 15:22:10 -06:00
parent d546c35e3f
commit 69ed287974
11 changed files with 118 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

127
mobile/lib/modules/home/ui/image_grid.dart
View file

@ -1,16 +1,15 @@
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/ui/thumbnail_image.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
import 'package:video_player/video_player.dart';
class ImageGrid extends StatelessWidget {
class ImageGrid extends ConsumerWidget {
final List<ImmichAsset> assetGroup;
const ImageGrid({Key? key, required this.assetGroup}) : super(key: key);
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
return SliverGrid(
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3, crossAxisSpacing: 5.0, mainAxisSpacing: 5),
@ -19,11 +18,33 @@ class ImageGrid extends StatelessWidget {
var assetType = assetGroup[index].type;
return GestureDetector(
onTap: () {},
child: assetType == 'IMAGE'
? ThumbnailImage(asset: assetGroup[index])
: VideoThumbnailPlayer(key: Key(assetGroup[index].id), videoAsset: assetGroup[index]),
);
onTap: () {},
child: Stack(
children: [
ThumbnailImage(asset: assetGroup[index]),
assetType == 'IMAGE'
? Container()
: Positioned(
top: 5,
right: 5,
child: Row(
children: [
Text(
assetGroup[index].duration.toString().substring(0, 7),
style: const TextStyle(
color: Colors.white,
fontSize: 10,
),
),
const Icon(
Icons.play_circle_outline_rounded,
color: Colors.white,
),
],
),
)
],
));
},
childCount: assetGroup.length,
),
@ -31,55 +52,55 @@ class ImageGrid extends StatelessWidget {
}
}
class VideoThumbnailPlayer extends StatefulWidget {
ImmichAsset videoAsset;
// class VideoThumbnailPlayer extends StatefulWidget {
// ImmichAsset videoAsset;
VideoThumbnailPlayer({Key? key, required this.videoAsset}) : super(key: key);
// VideoThumbnailPlayer({Key? key, required this.videoAsset}) : super(key: key);
@override
State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
}
// @override
// State<VideoThumbnailPlayer> createState() => _VideoThumbnailPlayerState();
// }
class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
late VideoPlayerController videoPlayerController;
ChewieController? chewieController;
// class _VideoThumbnailPlayerState extends State<VideoThumbnailPlayer> {
// late VideoPlayerController videoPlayerController;
// ChewieController? chewieController;
@override
void initState() {
super.initState();
initializePlayer();
}
// @override
// void initState() {
// super.initState();
// initializePlayer();
// }
Future<void> initializePlayer() async {
videoPlayerController =
VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
// Future<void> initializePlayer() async {
// videoPlayerController =
// VideoPlayerController.network('https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4');
await Future.wait([
videoPlayerController.initialize(),
]);
_createChewieController();
setState(() {});
}
// await Future.wait([
// videoPlayerController.initialize(),
// ]);
// _createChewieController();
// setState(() {});
// }
_createChewieController() {
chewieController = ChewieController(
showControlsOnInitialize: false,
videoPlayerController: videoPlayerController,
autoPlay: true,
looping: true,
);
}
// _createChewieController() {
// chewieController = ChewieController(
// showControlsOnInitialize: false,
// videoPlayerController: videoPlayerController,
// autoPlay: true,
// looping: true,
// );
// }
@override
Widget build(BuildContext context) {
return chewieController != null && chewieController!.videoPlayerController.value.isInitialized
? SizedBox(
height: 300,
width: 300,
child: Chewie(
controller: chewieController!,
),
)
: const Text("Loading Video");
}
}
// @override
// Widget build(BuildContext context) {
// return chewieController != null && chewieController!.videoPlayerController.value.isInitialized
// ? SizedBox(
// height: 300,
// width: 300,
// child: Chewie(
// controller: chewieController!,
// ),
// )
// : const Text("Loading Video");
// }
// }

7
mobile/lib/modules/home/ui/thumbnail_image.dart
View file

@ -1,18 +1,21 @@
import 'package:auto_route/auto_route.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hive_flutter/hive_flutter.dart';
import 'package:immich_mobile/constants/hive_box.dart';
import 'package:immich_mobile/shared/models/immich_asset.model.dart';
import 'package:immich_mobile/routing/router.dart';
class ThumbnailImage extends StatelessWidget {
class ThumbnailImage extends HookWidget {
final ImmichAsset asset;
const ThumbnailImage({Key? key, required this.asset}) : super(key: key);
@override
Widget build(BuildContext context) {
final cacheKey = useState(1);
var box = Hive.box(userInfoBox);
var thumbnailRequestUrl =
'${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=true';
@ -31,6 +34,7 @@ class ThumbnailImage extends StatelessWidget {
child: Hero(
tag: asset.id,
child: CachedNetworkImage(
cacheKey: "${asset.id}-${cacheKey.value}",
width: 300,
height: 300,
memCacheHeight: 250,
@ -44,6 +48,7 @@ class ThumbnailImage extends StatelessWidget {
),
errorWidget: (context, url, error) {
debugPrint("Error Loading Thumbnail Widget $error");
cacheKey.value += 1;
return const Icon(Icons.error);
},
),

27
mobile/lib/modules/home/views/home_page.dart
View file

@ -2,10 +2,10 @@ import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:immich_mobile/modules/home/ui/draggable_scrollbar.dart';
import 'package:immich_mobile/modules/home/ui/image_grid.dart';
import 'package:immich_mobile/modules/home/ui/immich_sliver_appbar.dart';
import 'package:immich_mobile/modules/home/ui/profile_drawer.dart';
import 'package:immich_mobile/modules/home/models/get_all_asset_respose.model.dart';
import 'package:immich_mobile/modules/home/ui/image_grid.dart';
import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
import 'package:intl/intl.dart';
@ -16,9 +16,9 @@ class HomePage extends HookConsumerWidget {
Widget build(BuildContext context, WidgetRef ref) {
final ValueNotifier<bool> _showBackToTopBtn = useState(false);
ScrollController _scrollController = useScrollController();
List<ImmichAssetGroupByDate> assetGroup = ref.watch(assetProvider);
List<Widget> imageGridGroup = [];
String scrollBarText = "";
_scrollControllerCallback() {
var endOfPage = _scrollController.position.maxScrollExtent;
@ -40,7 +40,6 @@ class HomePage extends HookConsumerWidget {
_scrollController.addListener(_scrollControllerCallback);
return () {
debugPrint("Remove scroll listener");
_scrollController.removeListener(_scrollControllerCallback);
};
}, []);
@ -72,33 +71,13 @@ class HomePage extends HookConsumerWidget {
imageGridGroup.add(
ImageGrid(assetGroup: assetGroup),
);
//
lastGroupDate = dateTitle;
}
}
return SafeArea(
child: DraggableScrollbar.semicircle(
// labelTextBuilder: (offset) {
// final int currentItem = _scrollController.hasClients
// ? (_scrollController.offset / _scrollController.position.maxScrollExtent * imageGridGroup.length)
// .floor()
// : 0;
// if (imageGridGroup[currentItem] is DailyTitleText) {
// DailyTitleText item = imageGridGroup[currentItem] as DailyTitleText;
// debugPrint(item.isoDate);
// return const Text("");
// }
// if (imageGridGroup[currentItem] is MonthlyTitleText) {
// MonthlyTitleText item = imageGridGroup[currentItem] as MonthlyTitleText;
// debugPrint(item.isoDate);
// return const Text("scrollBarText");
// }
// return const Text("scrollBarText");
// },
// labelConstraints: const BoxConstraints.tightFor(width: 200.0, height: 30.0),
backgroundColor: Theme.of(context).primaryColor,
controller: _scrollController,
heightScrollThumb: 48.0,