mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
Implemented Video Upload and Player (#2)
* Implementing video upload features * setup image resize processor * Add video thumbnail with duration and icon * Fixed issue with video upload timeout and upper case file type on ios * Added video player page * Added video player page * Fixing video player not play on ios * Added partial file streaming for ios/android video request * Added nginx as proxy server for better file serving * update nginx and docker-compose file * Video player working correctly * Video player working correctly * Split duration to the second
This commit is contained in:
Alex
GitHub
parent
b6a7d40863
commit
97dc7660b4
32 changed files with 582 additions and 178 deletions
|
|
@ -1,23 +1,50 @@
|
|||
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';
|
||||
|
||||
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),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(BuildContext context, int index) {
|
||||
var assetType = assetGroup[index].type;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: () {},
|
||||
child: ThumbnailImage(asset: 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,
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
import 'package:auto_route/auto_route.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
||||
import 'package:immich_mobile/modules/home/providers/asset.provider.dart';
|
||||
|
|
@ -100,14 +99,6 @@ class ImmichSliverAppBar extends ConsumerWidget {
|
|||
],
|
||||
),
|
||||
],
|
||||
systemOverlayStyle: const SystemUiOverlayStyle(
|
||||
// Status bar color
|
||||
statusBarColor: Colors.indigo,
|
||||
|
||||
// Status bar brightness (optional)
|
||||
statusBarIconBrightness: Brightness.light, // For Android (dark icons)
|
||||
statusBarBrightness: Brightness.dark,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,39 +1,53 @@
|
|||
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';
|
||||
return GestureDetector(
|
||||
onTap: () {
|
||||
AutoRouter.of(context).push(
|
||||
ImageViewerRoute(
|
||||
imageUrl:
|
||||
'${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
|
||||
heroTag: asset.id,
|
||||
thumbnailUrl: thumbnailRequestUrl,
|
||||
),
|
||||
);
|
||||
if (asset.type == 'IMAGE') {
|
||||
AutoRouter.of(context).push(
|
||||
ImageViewerRoute(
|
||||
imageUrl:
|
||||
'${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}&isThumb=false',
|
||||
heroTag: asset.id,
|
||||
thumbnailUrl: thumbnailRequestUrl,
|
||||
),
|
||||
);
|
||||
} else {
|
||||
debugPrint("Navigate to video player");
|
||||
|
||||
AutoRouter.of(context).push(
|
||||
VideoViewerRoute(
|
||||
videoUrl: '${box.get(serverEndpointKey)}/asset/file?aid=${asset.deviceAssetId}&did=${asset.deviceId}',
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
onLongPress: () {},
|
||||
child: Hero(
|
||||
tag: asset.id,
|
||||
child: CachedNetworkImage(
|
||||
cacheKey: "${asset.id}-${cacheKey.value}",
|
||||
width: 300,
|
||||
height: 300,
|
||||
memCacheHeight: 250,
|
||||
memCacheHeight: asset.type == 'IMAGE' ? 250 : 400,
|
||||
fit: BoxFit.cover,
|
||||
imageUrl: thumbnailRequestUrl,
|
||||
httpHeaders: {"Authorization": "Bearer ${box.get(accessTokenKey)}"},
|
||||
|
|
@ -44,6 +58,7 @@ class ThumbnailImage extends StatelessWidget {
|
|||
),
|
||||
errorWidget: (context, url, error) {
|
||||
debugPrint("Error Loading Thumbnail Widget $error");
|
||||
cacheKey.value += 1;
|
||||
return const Icon(Icons.error);
|
||||
},
|
||||
),
|
||||
|
|
|
|||
|
|
@ -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 = [];
|
||||
final scrollLabelText = useState("");
|
||||
|
||||
_scrollControllerCallback() {
|
||||
var endOfPage = _scrollController.position.maxScrollExtent;
|
||||
|
|
@ -40,39 +40,10 @@ class HomePage extends HookConsumerWidget {
|
|||
_scrollController.addListener(_scrollControllerCallback);
|
||||
|
||||
return () {
|
||||
debugPrint("Remove scroll listener");
|
||||
_scrollController.removeListener(_scrollControllerCallback);
|
||||
};
|
||||
}, []);
|
||||
|
||||
SliverToBoxAdapter _buildDateGroupTitle(String dateTitle) {
|
||||
var currentYear = DateTime.now().year;
|
||||
var groupYear = DateTime.parse(dateTitle).year;
|
||||
var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
|
||||
var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(dateTitle));
|
||||
|
||||
return SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 24.0, bottom: 24.0, left: 3.0),
|
||||
child: Row(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 8.0, bottom: 5.0, top: 5.0),
|
||||
child: Text(
|
||||
dateText,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.black87,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody() {
|
||||
if (assetGroup.isNotEmpty) {
|
||||
String lastGroupDate = assetGroup[0].date;
|
||||
|
|
@ -86,44 +57,27 @@ class HomePage extends HookConsumerWidget {
|
|||
|
||||
// Add Monthly Title Group if started at the beginning of the month
|
||||
if ((currentMonth! - previousMonth!) != 0) {
|
||||
var monthTitleText = DateFormat('MMMM, y').format(DateTime.parse(dateTitle));
|
||||
|
||||
imageGridGroup.add(
|
||||
MonthlyTitleText(monthTitleText: monthTitleText),
|
||||
MonthlyTitleText(isoDate: dateTitle),
|
||||
);
|
||||
}
|
||||
|
||||
// Add Daily Title Group
|
||||
imageGridGroup.add(
|
||||
DailyTitleText(dateTitle: dateTitle),
|
||||
DailyTitleText(isoDate: dateTitle),
|
||||
);
|
||||
|
||||
// Add Image Group
|
||||
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 MonthlyTitleText) {
|
||||
// MonthlyTitleText item = imageGridGroup[currentItem] as MonthlyTitleText;
|
||||
|
||||
// scrollLabelText.value = item.monthTitleText;
|
||||
// }
|
||||
|
||||
// return Text(scrollLabelText.value);
|
||||
// },
|
||||
// labelConstraints: const BoxConstraints.tightFor(width: 200.0, height: 30.0),
|
||||
backgroundColor: Theme.of(context).primaryColor,
|
||||
controller: _scrollController,
|
||||
heightScrollThumb: 48.0,
|
||||
|
|
@ -148,13 +102,15 @@ class HomePage extends HookConsumerWidget {
|
|||
class MonthlyTitleText extends StatelessWidget {
|
||||
const MonthlyTitleText({
|
||||
Key? key,
|
||||
required this.monthTitleText,
|
||||
required this.isoDate,
|
||||
}) : super(key: key);
|
||||
|
||||
final String monthTitleText;
|
||||
final String isoDate;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var monthTitleText = DateFormat('MMMM, y').format(DateTime.parse(isoDate));
|
||||
|
||||
return SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(left: 10.0, top: 32),
|
||||
|
|
@ -174,17 +130,17 @@ class MonthlyTitleText extends StatelessWidget {
|
|||
class DailyTitleText extends StatelessWidget {
|
||||
const DailyTitleText({
|
||||
Key? key,
|
||||
required this.dateTitle,
|
||||
required this.isoDate,
|
||||
}) : super(key: key);
|
||||
|
||||
final String dateTitle;
|
||||
final String isoDate;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
var currentYear = DateTime.now().year;
|
||||
var groupYear = DateTime.parse(dateTitle).year;
|
||||
var groupYear = DateTime.parse(isoDate).year;
|
||||
var formatDateTemplate = currentYear == groupYear ? 'E, MMM dd' : 'E, MMM dd, yyyy';
|
||||
var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(dateTitle));
|
||||
var dateText = DateFormat(formatDateTemplate).format(DateTime.parse(isoDate));
|
||||
|
||||
return SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ class LoginForm extends HookConsumerWidget {
|
|||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final usernameController = useTextEditingController(text: 'testuser@email.com');
|
||||
final passwordController = useTextEditingController(text: 'password');
|
||||
final serverEndpointController = useTextEditingController(text: 'http://192.168.1.216:3000');
|
||||
final serverEndpointController = useTextEditingController(text: 'http://192.168.1.103:2283');
|
||||
|
||||
return Center(
|
||||
child: ConstrainedBox(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue