568 lines
21 KiB
Dart
568 lines
21 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_hooks/flutter_hooks.dart';
|
|
import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
import 'package:island/models/upload_task.dart';
|
|
import 'package:island/pods/upload_tasks.dart';
|
|
import 'package:material_symbols_icons/material_symbols_icons.dart';
|
|
import 'package:easy_localization/easy_localization.dart';
|
|
|
|
class UploadOverlay extends HookConsumerWidget {
|
|
const UploadOverlay({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final uploadTasks = ref.watch(uploadTasksProvider);
|
|
final activeTasks =
|
|
uploadTasks
|
|
.where(
|
|
(task) =>
|
|
task.status == UploadTaskStatus.pending ||
|
|
task.status == UploadTaskStatus.inProgress ||
|
|
task.status == UploadTaskStatus.paused ||
|
|
task.status == UploadTaskStatus.completed,
|
|
)
|
|
.toList();
|
|
// if (activeTasks.isEmpty) {
|
|
// return const SizedBox.shrink();
|
|
// }
|
|
|
|
return _UploadOverlayContent(activeTasks: activeTasks);
|
|
}
|
|
}
|
|
|
|
class _UploadOverlayContent extends HookConsumerWidget {
|
|
final List<UploadTask> activeTasks;
|
|
|
|
const _UploadOverlayContent({required this.activeTasks});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final isExpanded = useState(false);
|
|
final animationController = useAnimationController(
|
|
duration: const Duration(milliseconds: 200),
|
|
initialValue: 0.0,
|
|
);
|
|
final heightAnimation = useAnimation(
|
|
Tween<double>(begin: 60, end: 400).animate(
|
|
CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
|
|
),
|
|
);
|
|
final opacityAnimation = useAnimation(
|
|
CurvedAnimation(parent: animationController, curve: Curves.easeInOut),
|
|
);
|
|
|
|
useEffect(() {
|
|
if (isExpanded.value) {
|
|
animationController.forward();
|
|
} else {
|
|
animationController.reverse();
|
|
}
|
|
return null;
|
|
}, [isExpanded.value]);
|
|
|
|
final isMobile = MediaQuery.of(context).size.width < 600;
|
|
|
|
return Positioned(
|
|
bottom: isMobile ? 16 : 24,
|
|
left: isMobile ? 16 : null,
|
|
right: isMobile ? 16 : 24,
|
|
child: GestureDetector(
|
|
onTap: () => isExpanded.value = !isExpanded.value,
|
|
child: AnimatedBuilder(
|
|
animation: animationController,
|
|
builder: (context, child) {
|
|
return Material(
|
|
elevation: 8 + (opacityAnimation * 4),
|
|
borderRadius: BorderRadius.circular(12),
|
|
color: Theme.of(context).colorScheme.surfaceContainer,
|
|
child: AnimatedContainer(
|
|
duration: const Duration(milliseconds: 200),
|
|
curve: Curves.easeInOut,
|
|
width: isMobile ? MediaQuery.of(context).size.width - 32 : 320,
|
|
height: heightAnimation,
|
|
child: ClipRRect(
|
|
borderRadius: BorderRadius.circular(12),
|
|
child: Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
// Collapsed Header
|
|
Container(
|
|
height: 60,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16),
|
|
child: Row(
|
|
children: [
|
|
// Upload icon with animation
|
|
AnimatedSwitcher(
|
|
duration: const Duration(milliseconds: 150),
|
|
transitionBuilder: (child, animation) {
|
|
return FadeTransition(
|
|
opacity: animation,
|
|
child: child,
|
|
);
|
|
},
|
|
child: Icon(
|
|
key: ValueKey(isExpanded.value),
|
|
isExpanded.value
|
|
? Symbols.expand_more
|
|
: Symbols.upload,
|
|
size: 24,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
|
|
// Title and count
|
|
Expanded(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
isExpanded.value
|
|
? 'uploadTasks'.tr()
|
|
: '${activeTasks.length} ${'uploading'.tr()}',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.titleSmall
|
|
?.copyWith(fontWeight: FontWeight.w600),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
if (!isExpanded.value &&
|
|
activeTasks.isNotEmpty)
|
|
Text(
|
|
_getOverallProgressText(activeTasks),
|
|
style: Theme.of(
|
|
context,
|
|
).textTheme.bodySmall?.copyWith(
|
|
color:
|
|
Theme.of(
|
|
context,
|
|
).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Progress indicator (collapsed)
|
|
if (!isExpanded.value)
|
|
SizedBox(
|
|
width: 32,
|
|
height: 32,
|
|
child: CircularProgressIndicator(
|
|
value: _getOverallProgress(activeTasks),
|
|
strokeWidth: 3,
|
|
backgroundColor:
|
|
Theme.of(
|
|
context,
|
|
).colorScheme.surfaceContainerHighest,
|
|
),
|
|
),
|
|
|
|
// Expand/collapse button
|
|
IconButton(
|
|
icon: AnimatedRotation(
|
|
turns: opacityAnimation * 0.5,
|
|
duration: const Duration(milliseconds: 200),
|
|
child: Icon(
|
|
isExpanded.value
|
|
? Symbols.expand_more
|
|
: Symbols.chevron_right,
|
|
size: 20,
|
|
),
|
|
),
|
|
onPressed:
|
|
() => isExpanded.value = !isExpanded.value,
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Expanded content
|
|
if (isExpanded.value)
|
|
Expanded(
|
|
child: Container(
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: Theme.of(context).dividerColor,
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// Clear completed tasks button
|
|
if (_hasCompletedTasks(activeTasks))
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(
|
|
horizontal: 16,
|
|
vertical: 8,
|
|
),
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
bottom: BorderSide(
|
|
color: Theme.of(context).dividerColor,
|
|
width: 1,
|
|
),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton.icon(
|
|
onPressed: () {
|
|
ref
|
|
.read(
|
|
uploadTasksProvider.notifier,
|
|
)
|
|
.clearCompletedTasks();
|
|
},
|
|
icon: Icon(
|
|
Symbols.clear_all,
|
|
size: 18,
|
|
),
|
|
label: const Text('Clear Completed'),
|
|
style: TextButton.styleFrom(
|
|
foregroundColor:
|
|
Theme.of(
|
|
context,
|
|
).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Task list
|
|
Expanded(
|
|
child: AnimatedOpacity(
|
|
opacity: opacityAnimation,
|
|
duration: const Duration(milliseconds: 150),
|
|
child: ListView.builder(
|
|
shrinkWrap: true,
|
|
padding: EdgeInsets.zero,
|
|
itemCount: activeTasks.length,
|
|
itemBuilder: (context, index) {
|
|
final task = activeTasks[index];
|
|
return UploadTaskTile(task: task);
|
|
},
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
double _getOverallProgress(List<UploadTask> tasks) {
|
|
if (tasks.isEmpty) return 0.0;
|
|
final totalProgress = tasks.fold<double>(
|
|
0.0,
|
|
(sum, task) => sum + task.progress,
|
|
);
|
|
return totalProgress / tasks.length;
|
|
}
|
|
|
|
String _getOverallProgressText(List<UploadTask> tasks) {
|
|
final overallProgress = _getOverallProgress(tasks);
|
|
return '${(overallProgress * 100).toStringAsFixed(0)}%';
|
|
}
|
|
|
|
bool _hasCompletedTasks(List<UploadTask> tasks) {
|
|
return tasks.any(
|
|
(task) =>
|
|
task.status == UploadTaskStatus.completed ||
|
|
task.status == UploadTaskStatus.failed ||
|
|
task.status == UploadTaskStatus.cancelled ||
|
|
task.status == UploadTaskStatus.expired,
|
|
);
|
|
}
|
|
}
|
|
|
|
class UploadTaskTile extends HookConsumerWidget {
|
|
final UploadTask task;
|
|
|
|
const UploadTaskTile({super.key, required this.task});
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final isExpanded = useState(false);
|
|
|
|
return InkWell(
|
|
onTap: () => isExpanded.value = !isExpanded.value,
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
// Status icon
|
|
_buildStatusIcon(context),
|
|
const SizedBox(width: 8),
|
|
|
|
// File info
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
task.fileName,
|
|
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
maxLines: 1,
|
|
overflow: TextOverflow.ellipsis,
|
|
),
|
|
const SizedBox(height: 2),
|
|
Text(
|
|
_formatFileSize(task.fileSize),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Progress indicator
|
|
const SizedBox(width: 8),
|
|
SizedBox(
|
|
width: 40,
|
|
height: 40,
|
|
child: CircularProgressIndicator(
|
|
value: task.progress,
|
|
strokeWidth: 3,
|
|
backgroundColor:
|
|
Theme.of(context).colorScheme.surfaceContainerHighest,
|
|
),
|
|
),
|
|
|
|
// Expand/collapse button
|
|
IconButton(
|
|
icon: Icon(
|
|
isExpanded.value
|
|
? Symbols.expand_less
|
|
: Symbols.expand_more,
|
|
size: 16,
|
|
),
|
|
onPressed: () => isExpanded.value = !isExpanded.value,
|
|
padding: EdgeInsets.zero,
|
|
constraints: const BoxConstraints(),
|
|
),
|
|
],
|
|
),
|
|
|
|
// Expanded details
|
|
if (isExpanded.value) ...[
|
|
const SizedBox(height: 8),
|
|
_buildExpandedDetails(context),
|
|
],
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatusIcon(BuildContext context) {
|
|
IconData icon;
|
|
Color color;
|
|
|
|
switch (task.status) {
|
|
case UploadTaskStatus.pending:
|
|
icon = Symbols.schedule;
|
|
color = Theme.of(context).colorScheme.secondary;
|
|
break;
|
|
case UploadTaskStatus.inProgress:
|
|
icon = Symbols.upload;
|
|
color = Theme.of(context).colorScheme.primary;
|
|
break;
|
|
case UploadTaskStatus.paused:
|
|
icon = Symbols.pause_circle;
|
|
color = Theme.of(context).colorScheme.tertiary;
|
|
break;
|
|
case UploadTaskStatus.completed:
|
|
icon = Symbols.check_circle;
|
|
color = Colors.green;
|
|
break;
|
|
case UploadTaskStatus.failed:
|
|
icon = Symbols.error;
|
|
color = Theme.of(context).colorScheme.error;
|
|
break;
|
|
case UploadTaskStatus.cancelled:
|
|
icon = Symbols.cancel;
|
|
color = Theme.of(context).colorScheme.error;
|
|
break;
|
|
case UploadTaskStatus.expired:
|
|
icon = Symbols.timer_off;
|
|
color = Theme.of(context).colorScheme.error;
|
|
break;
|
|
}
|
|
|
|
return Icon(icon, size: 16, color: color);
|
|
}
|
|
|
|
Widget _buildExpandedDetails(BuildContext context) {
|
|
final transmissionProgress = task.transmissionProgress ?? 0.0;
|
|
|
|
return Container(
|
|
padding: const EdgeInsets.all(8),
|
|
decoration: BoxDecoration(
|
|
color: Theme.of(context).colorScheme.surfaceContainerHighest,
|
|
borderRadius: BorderRadius.circular(6),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// Server Processing Progress
|
|
Text(
|
|
'Server Processing',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.primary,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'${(task.progress * 100).toStringAsFixed(1)}%',
|
|
style: Theme.of(
|
|
context,
|
|
).textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w600),
|
|
),
|
|
Text(
|
|
'${task.uploadedChunks}/${task.totalChunks} chunks',
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 4),
|
|
LinearProgressIndicator(
|
|
value: task.progress,
|
|
backgroundColor: Theme.of(context).colorScheme.surface,
|
|
valueColor: AlwaysStoppedAnimation<Color>(
|
|
Theme.of(context).colorScheme.primary,
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 8),
|
|
|
|
// File Transmission Progress
|
|
Text(
|
|
'File Transmission',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
fontWeight: FontWeight.w600,
|
|
color: Theme.of(context).colorScheme.secondary,
|
|
),
|
|
),
|
|
const SizedBox(height: 2),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
'${(transmissionProgress * 100).toStringAsFixed(1)}%',
|
|
style: Theme.of(
|
|
context,
|
|
).textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w600),
|
|
),
|
|
Text(
|
|
'${_formatFileSize((transmissionProgress * task.fileSize).toInt())} / ${_formatFileSize(task.fileSize)}',
|
|
style: Theme.of(context).textTheme.bodySmall,
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 4),
|
|
LinearProgressIndicator(
|
|
value: transmissionProgress,
|
|
backgroundColor: Theme.of(context).colorScheme.surface,
|
|
valueColor: AlwaysStoppedAnimation<Color>(
|
|
Theme.of(context).colorScheme.secondary,
|
|
),
|
|
),
|
|
|
|
const SizedBox(height: 4),
|
|
|
|
// Speed and ETA
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
_formatBytesPerSecond(task),
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
if (task.status == UploadTaskStatus.inProgress)
|
|
Text(
|
|
'ETA: ${_formatDuration(task.estimatedTimeRemaining)}',
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
|
|
// Error message if failed
|
|
if (task.errorMessage != null) ...[
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
task.errorMessage!,
|
|
style: Theme.of(context).textTheme.bodySmall?.copyWith(
|
|
color: Theme.of(context).colorScheme.error,
|
|
),
|
|
),
|
|
],
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
String _formatFileSize(int bytes) {
|
|
if (bytes >= 1073741824) {
|
|
return '${(bytes / 1073741824).toStringAsFixed(1)} GB';
|
|
} else if (bytes >= 1048576) {
|
|
return '${(bytes / 1048576).toStringAsFixed(1)} MB';
|
|
} else if (bytes >= 1024) {
|
|
return '${(bytes / 1024).toStringAsFixed(1)} KB';
|
|
} else {
|
|
return '$bytes bytes';
|
|
}
|
|
}
|
|
|
|
String _formatBytesPerSecond(UploadTask task) {
|
|
if (task.uploadedBytes == 0) return '0 B/s';
|
|
|
|
final elapsedSeconds = DateTime.now().difference(task.createdAt).inSeconds;
|
|
if (elapsedSeconds == 0) return '0 B/s';
|
|
|
|
final bytesPerSecond = task.uploadedBytes / elapsedSeconds;
|
|
return '${_formatFileSize(bytesPerSecond.toInt())}/s';
|
|
}
|
|
|
|
String _formatDuration(Duration duration) {
|
|
if (duration.inHours > 0) {
|
|
return '${duration.inHours}h ${duration.inMinutes.remainder(60)}m';
|
|
} else if (duration.inMinutes > 0) {
|
|
return '${duration.inMinutes}m ${duration.inSeconds.remainder(60)}s';
|
|
} else {
|
|
return '${duration.inSeconds}s';
|
|
}
|
|
}
|
|
}
|