Rebuild UI on the Noo design system
Replaces the Material 3 screens with the Noo design system: warm neutrals, one violet accent, pill controls, Schibsted Grotesk/ Instrument Sans, Lucide icons, no gradients/shadows. - New lib/widgets/noo/ component kit (core, lists, files, media, nav, overlays) plus lib/theme/design_tokens.dart for the color/type/space/ radius/motion tokens. - Rebuilt the app shell (top/bottom bars, drawer, desktop sidebar and toolbar), every tab (Files/Offline, Photos, Favorites, Recent, Activity, Trash, Shares), Settings, the lock and login screens, the media viewer, search, the details/share sheets, and the share-upload and move/copy destination pickers. - Added a design canvas (linked from DESIGN_SYSTEM.md) covering the screens the spec didn't already describe, with matching Android and iOS chrome; wrote up the approved recipes into DESIGN_SYSTEM.md §4. - Removed now-dead legacy widgets (media_grid_tile, swipeable_item, sync_status_badge, selectable_thumbnail) and updated architecture.md/styling.md/standards.md to describe the new structure and component/testing conventions. - Added widget tests for the noo/ component kit. This is a UI-only rework: no provider/model/service behavior changed. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -0,0 +1,98 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../frosted_glass_container.dart';
|
||||
import 'viewer_icon_button.dart';
|
||||
|
||||
/// The floating action bar (share/favorite/open/download/delete/details)
|
||||
/// overlaid on the media viewer - kept on `FrostedGlassContainer`'s blurred
|
||||
/// chrome as a deliberate exception to the design system's flat product UI
|
||||
/// (see `file_viewer_screen.dart`'s build() comment for why), unlike the
|
||||
/// now-flat bottom nav bar (`bottom_nav_bar.dart`) this screen sits above.
|
||||
class MediaActionBar extends StatelessWidget {
|
||||
final bool isFavorite;
|
||||
final bool isBusy;
|
||||
final bool showServerActions;
|
||||
final VoidCallback onShare;
|
||||
final VoidCallback onFavorite;
|
||||
final VoidCallback onDelete;
|
||||
final VoidCallback onOpenExternally;
|
||||
final VoidCallback onDownload;
|
||||
final VoidCallback onDetails;
|
||||
|
||||
const MediaActionBar({
|
||||
super.key,
|
||||
required this.isFavorite,
|
||||
required this.isBusy,
|
||||
required this.showServerActions,
|
||||
required this.onShare,
|
||||
required this.onFavorite,
|
||||
required this.onDelete,
|
||||
required this.onOpenExternally,
|
||||
required this.onDownload,
|
||||
required this.onDetails,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 480),
|
||||
child: FrostedGlassContainer(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
children: [
|
||||
ViewerIconButton(
|
||||
icon: LucideIcons.share2,
|
||||
tooltip: 'Share',
|
||||
onTap: isBusy ? null : onShare,
|
||||
),
|
||||
if (showServerActions)
|
||||
ViewerIconButton(
|
||||
// Matches the star/star-off convention Files' own
|
||||
// selection toolbar uses for favorite/unfavorite
|
||||
// (see `files_view.dart`) rather than a filled heart.
|
||||
icon: isFavorite ? LucideIcons.starOff : LucideIcons.star,
|
||||
tooltip: isFavorite
|
||||
? 'Remove from favorites'
|
||||
: 'Favorite',
|
||||
onTap: onFavorite,
|
||||
),
|
||||
ViewerIconButton(
|
||||
icon: LucideIcons.externalLink,
|
||||
tooltip: 'Open externally',
|
||||
onTap: isBusy ? null : onOpenExternally,
|
||||
),
|
||||
if (showServerActions)
|
||||
ViewerIconButton(
|
||||
icon: LucideIcons.download,
|
||||
tooltip: 'Download',
|
||||
onTap: isBusy ? null : onDownload,
|
||||
),
|
||||
if (showServerActions)
|
||||
ViewerIconButton(
|
||||
icon: LucideIcons.trash2,
|
||||
tooltip: 'Delete',
|
||||
color: colors.danger,
|
||||
onTap: isBusy ? null : onDelete,
|
||||
),
|
||||
ViewerIconButton(
|
||||
icon: LucideIcons.info,
|
||||
tooltip: 'Details',
|
||||
onTap: onDetails,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
import 'dart:io';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
|
||||
/// Pinch-zoom/pan/double-tap-to-zoom image page for [FileViewerScreen]'s
|
||||
/// swipeable `PageView` - one instance per image, from either a server URL
|
||||
/// or an on-disk path (offline mode).
|
||||
class MediaImagePreview extends StatefulWidget {
|
||||
final String? url;
|
||||
final Map<String, String> headers;
|
||||
|
||||
/// When set, read the image from this on-disk path instead of [url] -
|
||||
/// already-resolved by the caller (see
|
||||
/// `FileViewerScreen.localPathResolver`'s doc comment).
|
||||
final String? localPath;
|
||||
|
||||
const MediaImagePreview({
|
||||
super.key,
|
||||
required this.url,
|
||||
required this.headers,
|
||||
this.localPath,
|
||||
});
|
||||
|
||||
@override
|
||||
State<MediaImagePreview> createState() => _MediaImagePreviewState();
|
||||
}
|
||||
|
||||
class _MediaImagePreviewState extends State<MediaImagePreview>
|
||||
with SingleTickerProviderStateMixin {
|
||||
static const _doubleTapScale = 3.0;
|
||||
|
||||
final TransformationController _transformController =
|
||||
TransformationController();
|
||||
late final AnimationController _animController;
|
||||
Animation<Matrix4>? _animation;
|
||||
Offset _doubleTapPosition = Offset.zero;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_animController =
|
||||
AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 220),
|
||||
)..addListener(() {
|
||||
if (_animation != null) {
|
||||
_transformController.value = _animation!.value;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_animController.dispose();
|
||||
_transformController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _onDoubleTapDown(TapDownDetails details) {
|
||||
_doubleTapPosition = details.localPosition;
|
||||
}
|
||||
|
||||
void _onDoubleTap() {
|
||||
final isZoomedIn = _transformController.value.getMaxScaleOnAxis() > 1.01;
|
||||
final Matrix4 endMatrix;
|
||||
if (isZoomedIn) {
|
||||
endMatrix = Matrix4.identity();
|
||||
} else {
|
||||
final p = _doubleTapPosition;
|
||||
endMatrix = Matrix4.identity()
|
||||
..translateByDouble(
|
||||
-p.dx * (_doubleTapScale - 1),
|
||||
-p.dy * (_doubleTapScale - 1),
|
||||
0,
|
||||
1,
|
||||
)
|
||||
..scaleByDouble(_doubleTapScale, _doubleTapScale, _doubleTapScale, 1);
|
||||
}
|
||||
_animation = Matrix4Tween(
|
||||
begin: _transformController.value,
|
||||
end: endMatrix,
|
||||
).animate(CurveTween(curve: Curves.easeOut).animate(_animController));
|
||||
_animController.forward(from: 0);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return SizedBox.expand(
|
||||
child: GestureDetector(
|
||||
onDoubleTapDown: _onDoubleTapDown,
|
||||
onDoubleTap: _onDoubleTap,
|
||||
child: InteractiveViewer(
|
||||
transformationController: _transformController,
|
||||
minScale: 0.8,
|
||||
maxScale: 5.0,
|
||||
child: Center(
|
||||
child: widget.localPath != null
|
||||
? Image.file(
|
||||
File(widget.localPath!),
|
||||
fit: BoxFit.contain,
|
||||
errorBuilder: (context, error, stack) => Center(
|
||||
child: Icon(
|
||||
LucideIcons.imageOff,
|
||||
color: colors.fg3,
|
||||
size: 64,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Image.network(
|
||||
widget.url!,
|
||||
headers: widget.headers,
|
||||
fit: BoxFit.contain,
|
||||
loadingBuilder: (context, child, progress) {
|
||||
if (progress == null) return child;
|
||||
return Center(
|
||||
child: CircularProgressIndicator(color: colors.accent),
|
||||
);
|
||||
},
|
||||
errorBuilder: (context, error, stack) => Center(
|
||||
child: Icon(
|
||||
LucideIcons.imageOff,
|
||||
color: colors.fg3,
|
||||
size: 64,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import 'dart:io';
|
||||
import 'dart:typed_data';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:pdfx/pdfx.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../providers/session_controller.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
|
||||
/// Pinch-zoomable PDF page viewer for [FileViewerScreen]'s static (non-
|
||||
/// swipeable) preview path.
|
||||
class MediaPdfPreview extends StatefulWidget {
|
||||
final NextcloudItem item;
|
||||
final SessionController session;
|
||||
|
||||
/// When set, read bytes from the local path it resolves to instead of
|
||||
/// fetching from the server - see
|
||||
/// `FileViewerScreen.localPathResolver`'s doc comment.
|
||||
final Future<String?> Function(NextcloudItem item)? localPathResolver;
|
||||
|
||||
const MediaPdfPreview({
|
||||
super.key,
|
||||
required this.item,
|
||||
required this.session,
|
||||
this.localPathResolver,
|
||||
});
|
||||
|
||||
@override
|
||||
State<MediaPdfPreview> createState() => _MediaPdfPreviewState();
|
||||
}
|
||||
|
||||
class _MediaPdfPreviewState extends State<MediaPdfPreview> {
|
||||
PdfControllerPinch? _controller;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_load();
|
||||
}
|
||||
|
||||
Future<void> _load() async {
|
||||
try {
|
||||
final Uint8List bytes;
|
||||
if (widget.localPathResolver != null) {
|
||||
final localPath = await widget.localPathResolver!(widget.item);
|
||||
if (localPath == null) {
|
||||
if (mounted) {
|
||||
setState(() => _error = 'No longer available offline');
|
||||
}
|
||||
return;
|
||||
}
|
||||
bytes = await File(localPath).readAsBytes();
|
||||
} else {
|
||||
bytes = Uint8List.fromList(
|
||||
await widget.session.service!.fetchBytes(widget.item.path),
|
||||
);
|
||||
}
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_controller = PdfControllerPinch(
|
||||
document: PdfDocument.openData(bytes),
|
||||
);
|
||||
});
|
||||
} catch (e) {
|
||||
if (mounted) setState(() => _error = e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
if (_error != null) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'Could not load PDF: $_error',
|
||||
style: TextStyle(color: colors.fg2),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (_controller == null) {
|
||||
return Center(child: CircularProgressIndicator(color: colors.accent));
|
||||
}
|
||||
// pdfx's own default minScale (1.0 = the page's true/100% size) is
|
||||
// often *larger* than the fit-to-width size a wide page first renders
|
||||
// at, since that initial render is just normal box layout, not the
|
||||
// InteractiveViewer transform pinching engages on first touch - so the
|
||||
// moment you touch the page it snaps up to 1.0 and, with the default
|
||||
// floor, can never pinch back down past it. A low floor here lets you
|
||||
// zoom back out past that to the fit-width view you started at.
|
||||
return PdfViewPinch(controller: _controller!, minScale: 0.3);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,88 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:io';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../providers/session_controller.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
|
||||
/// Plain monospace text-file preview for [FileViewerScreen]'s static (non-
|
||||
/// swipeable) preview path (`_textPreviewExtensions`).
|
||||
class MediaTextPreview extends StatefulWidget {
|
||||
final NextcloudItem item;
|
||||
final SessionController session;
|
||||
|
||||
/// When set, read bytes from the local path it resolves to instead of
|
||||
/// fetching from the server - see
|
||||
/// `FileViewerScreen.localPathResolver`'s doc comment.
|
||||
final Future<String?> Function(NextcloudItem item)? localPathResolver;
|
||||
|
||||
const MediaTextPreview({
|
||||
super.key,
|
||||
required this.item,
|
||||
required this.session,
|
||||
this.localPathResolver,
|
||||
});
|
||||
|
||||
@override
|
||||
State<MediaTextPreview> createState() => _MediaTextPreviewState();
|
||||
}
|
||||
|
||||
class _MediaTextPreviewState extends State<MediaTextPreview> {
|
||||
String? _content;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_load();
|
||||
}
|
||||
|
||||
Future<void> _load() async {
|
||||
try {
|
||||
final List<int> bytes;
|
||||
if (widget.localPathResolver != null) {
|
||||
final localPath = await widget.localPathResolver!(widget.item);
|
||||
if (localPath == null) {
|
||||
if (mounted) {
|
||||
setState(() => _error = 'No longer available offline');
|
||||
}
|
||||
return;
|
||||
}
|
||||
bytes = await File(localPath).readAsBytes();
|
||||
} else {
|
||||
bytes = await widget.session.service!.fetchBytes(widget.item.path);
|
||||
}
|
||||
if (mounted) {
|
||||
setState(() => _content = utf8.decode(bytes, allowMalformed: true));
|
||||
}
|
||||
} catch (e) {
|
||||
if (mounted) setState(() => _error = e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
if (_error != null) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'Could not load file: $_error',
|
||||
style: TextStyle(color: colors.fg2),
|
||||
),
|
||||
);
|
||||
}
|
||||
if (_content == null) {
|
||||
return Center(child: CircularProgressIndicator(color: colors.accent));
|
||||
}
|
||||
return Container(
|
||||
color: colors.surface,
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: SingleChildScrollView(
|
||||
child: SelectableText(
|
||||
_content!,
|
||||
style: NooText.mono.copyWith(color: colors.fg1, height: 1.5),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../noo/core/noo_button.dart';
|
||||
|
||||
/// Fallback for [FileViewerScreen]'s static preview path when the file type
|
||||
/// has no inline preview at all (not an image/video/pdf/text file) - just
|
||||
/// name, a generic file icon, and the "open with"/"details" escape hatches.
|
||||
class MediaUnsupportedPreview extends StatelessWidget {
|
||||
final NextcloudItem item;
|
||||
final bool isBusy;
|
||||
final VoidCallback onOpenExternally;
|
||||
final VoidCallback onOpenDetails;
|
||||
|
||||
const MediaUnsupportedPreview({
|
||||
super.key,
|
||||
required this.item,
|
||||
required this.isBusy,
|
||||
required this.onOpenExternally,
|
||||
required this.onOpenDetails,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(LucideIcons.file, color: colors.fg3, size: 72),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
item.name,
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.cardTitle.copyWith(
|
||||
fontSize: 16,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'No inline preview for this file type.',
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
NooButton(
|
||||
size: NooButtonSize.card,
|
||||
icon: LucideIcons.externalLink,
|
||||
disabled: isBusy,
|
||||
onTap: onOpenExternally,
|
||||
child: const Text('Open with...'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.outline,
|
||||
size: NooButtonSize.card,
|
||||
icon: LucideIcons.info,
|
||||
onTap: onOpenDetails,
|
||||
child: const Text('Details'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,310 @@
|
||||
import 'dart:io';
|
||||
import 'dart:math' as math;
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:video_player/video_player.dart';
|
||||
import '../../providers/settings_controller.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../frosted_glass_container.dart';
|
||||
import '../seek_bar_painter.dart';
|
||||
import 'viewer_icon_button.dart';
|
||||
|
||||
/// Playing video page for [FileViewerScreen]'s swipeable `PageView`, plus
|
||||
/// its floating transport controls (play/pause, position, mute, seek bar).
|
||||
class MediaVideoPreview extends StatefulWidget {
|
||||
final String? url;
|
||||
final Map<String, String> headers;
|
||||
final bool isActive;
|
||||
|
||||
/// When set, read the video from this on-disk path instead of [url] -
|
||||
/// already-resolved by the caller (see
|
||||
/// `FileViewerScreen.localPathResolver`'s doc comment).
|
||||
final String? localPath;
|
||||
|
||||
/// Distance from the bottom of the screen the transport controls should
|
||||
/// sit at. Passed in by the parent so the controls can track the floating
|
||||
/// action bar: resting just above it when visible, sliding down to hug
|
||||
/// the screen edge when the bar (and rest of the chrome) is hidden.
|
||||
final double controlsBottomOffset;
|
||||
|
||||
const MediaVideoPreview({
|
||||
super.key,
|
||||
required this.url,
|
||||
required this.headers,
|
||||
this.localPath,
|
||||
this.isActive = true,
|
||||
this.controlsBottomOffset = 24,
|
||||
});
|
||||
|
||||
@override
|
||||
State<MediaVideoPreview> createState() => _MediaVideoPreviewState();
|
||||
}
|
||||
|
||||
class _MediaVideoPreviewState extends State<MediaVideoPreview> {
|
||||
VideoPlayerController? _controller;
|
||||
String? _error;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_init();
|
||||
}
|
||||
|
||||
Future<void> _init() async {
|
||||
try {
|
||||
final controller = widget.localPath != null
|
||||
? VideoPlayerController.file(File(widget.localPath!))
|
||||
: VideoPlayerController.networkUrl(
|
||||
Uri.parse(widget.url!),
|
||||
httpHeaders: widget.headers,
|
||||
);
|
||||
await controller.initialize();
|
||||
if (!mounted) {
|
||||
controller.dispose();
|
||||
return;
|
||||
}
|
||||
setState(() => _controller = controller);
|
||||
if (widget.isActive) controller.play();
|
||||
} catch (e) {
|
||||
if (mounted) setState(() => _error = e.toString());
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void didUpdateWidget(covariant MediaVideoPreview oldWidget) {
|
||||
super.didUpdateWidget(oldWidget);
|
||||
if (oldWidget.isActive != widget.isActive) {
|
||||
if (widget.isActive) {
|
||||
_controller?.play();
|
||||
} else {
|
||||
_controller?.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_controller?.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
String _formatDuration(Duration d) {
|
||||
final minutes = d.inMinutes.remainder(60);
|
||||
final seconds = d.inSeconds.remainder(60).toString().padLeft(2, '0');
|
||||
return '$minutes:$seconds';
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final progressBarStyle = context
|
||||
.watch<SettingsController>()
|
||||
.mediaProgressBarStyle;
|
||||
if (_error != null) {
|
||||
return Center(
|
||||
child: Text(
|
||||
'Could not play video: $_error',
|
||||
style: TextStyle(color: colors.fg2),
|
||||
),
|
||||
);
|
||||
}
|
||||
final controller = _controller;
|
||||
if (controller == null || !controller.value.isInitialized) {
|
||||
return Center(child: CircularProgressIndicator(color: colors.accent));
|
||||
}
|
||||
|
||||
return SizedBox.expand(
|
||||
child: Stack(
|
||||
alignment: Alignment.center,
|
||||
children: [
|
||||
Center(
|
||||
child: AspectRatio(
|
||||
aspectRatio: controller.value.aspectRatio,
|
||||
child: VideoPlayer(controller),
|
||||
),
|
||||
),
|
||||
AnimatedPositioned(
|
||||
duration: const Duration(milliseconds: 220),
|
||||
curve: Curves.easeInOutCubic,
|
||||
left: 16,
|
||||
right: 16,
|
||||
bottom: widget.controlsBottomOffset,
|
||||
child: AnimatedBuilder(
|
||||
animation: controller,
|
||||
builder: (context, _) {
|
||||
final fg = colors.fg1;
|
||||
// Same frosted-glass treatment (and user opacity/blur
|
||||
// settings) as the back button and media action bar, so the
|
||||
// transport controls match the rest of the app's chrome.
|
||||
return FrostedGlassContainer(
|
||||
borderRadius: 24,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 4,
|
||||
vertical: 4,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
ViewerIconButton(
|
||||
icon: controller.value.isPlaying
|
||||
? LucideIcons.pause
|
||||
: LucideIcons.play,
|
||||
tooltip: controller.value.isPlaying
|
||||
? 'Pause'
|
||||
: 'Play',
|
||||
onTap: () => controller.value.isPlaying
|
||||
? controller.pause()
|
||||
: controller.play(),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'${_formatDuration(controller.value.position)} / ${_formatDuration(controller.value.duration)}',
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.meta.copyWith(color: fg),
|
||||
),
|
||||
),
|
||||
ViewerIconButton(
|
||||
icon: controller.value.volume == 0
|
||||
? LucideIcons.volumeX
|
||||
: LucideIcons.volume2,
|
||||
tooltip: controller.value.volume == 0
|
||||
? 'Unmute'
|
||||
: 'Mute',
|
||||
onTap: () => controller.setVolume(
|
||||
controller.value.volume == 0 ? 1 : 0,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 0, 12, 8),
|
||||
child: WavySeekBar(
|
||||
controller: controller,
|
||||
playedColor: fg,
|
||||
trackColor: fg.withValues(alpha: 0.3),
|
||||
style: progressBarStyle,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A Material You "expressive" wavy seek bar: the played portion of the
|
||||
/// track animates as a travelling sine wave while playing and settles flat
|
||||
/// when paused, matching the Android 16+ media player style. Drag or tap
|
||||
/// anywhere on it to seek. Still driven by [SeekBarPainter] (shared with the
|
||||
/// Settings style picker's preview) - only [playedColor]/[trackColor] come
|
||||
/// from [NooColors] now instead of `ColorScheme`.
|
||||
class WavySeekBar extends StatefulWidget {
|
||||
final VideoPlayerController controller;
|
||||
final Color playedColor;
|
||||
final Color trackColor;
|
||||
final MediaProgressBarStyle style;
|
||||
|
||||
const WavySeekBar({
|
||||
super.key,
|
||||
required this.controller,
|
||||
required this.playedColor,
|
||||
required this.trackColor,
|
||||
required this.style,
|
||||
});
|
||||
|
||||
@override
|
||||
State<WavySeekBar> createState() => _WavySeekBarState();
|
||||
}
|
||||
|
||||
class _WavySeekBarState extends State<WavySeekBar>
|
||||
with SingleTickerProviderStateMixin {
|
||||
late final AnimationController _waveController = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 900),
|
||||
);
|
||||
double? _dragRatio;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_waveController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _seekToRatio(double ratio) {
|
||||
final duration = widget.controller.value.duration;
|
||||
widget.controller.seekTo(duration * ratio.clamp(0.0, 1.0));
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final value = widget.controller.value;
|
||||
final animatesWave =
|
||||
widget.style == MediaProgressBarStyle.wavy ||
|
||||
widget.style == MediaProgressBarStyle.squiggly;
|
||||
final isPlaying = animatesWave && value.isPlaying && _dragRatio == null;
|
||||
if (isPlaying && !_waveController.isAnimating) {
|
||||
_waveController.repeat();
|
||||
} else if (!isPlaying && _waveController.isAnimating) {
|
||||
_waveController.stop();
|
||||
}
|
||||
|
||||
final durationMs = value.duration.inMilliseconds;
|
||||
final baseRatio = durationMs > 0
|
||||
? value.position.inMilliseconds / durationMs
|
||||
: 0.0;
|
||||
final ratio = (_dragRatio ?? baseRatio).clamp(0.0, 1.0);
|
||||
|
||||
return SizedBox(
|
||||
height: 28,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
void updateFromDx(double dx) {
|
||||
setState(
|
||||
() => _dragRatio = (dx / constraints.maxWidth).clamp(0.0, 1.0),
|
||||
);
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onHorizontalDragStart: (details) =>
|
||||
updateFromDx(details.localPosition.dx),
|
||||
onHorizontalDragUpdate: (details) =>
|
||||
updateFromDx(details.localPosition.dx),
|
||||
onHorizontalDragEnd: (_) {
|
||||
if (_dragRatio != null) _seekToRatio(_dragRatio!);
|
||||
setState(() => _dragRatio = null);
|
||||
},
|
||||
onTapUp: (details) =>
|
||||
_seekToRatio(details.localPosition.dx / constraints.maxWidth),
|
||||
child: AnimatedBuilder(
|
||||
animation: _waveController,
|
||||
builder: (context, _) {
|
||||
return CustomPaint(
|
||||
size: Size(constraints.maxWidth, 28),
|
||||
painter: SeekBarPainter(
|
||||
style: widget.style,
|
||||
progress: ratio,
|
||||
phase: _waveController.value * 2 * math.pi,
|
||||
animate: isPlaying,
|
||||
playedColor: widget.playedColor,
|
||||
trackColor: widget.trackColor,
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
|
||||
/// Icon-only action button for the media viewer's floating chrome (top bar,
|
||||
/// bottom action bar, video transport controls) - a fixed 22px icon in a
|
||||
/// round hit box, colored from [NooColors] rather than Material's
|
||||
/// [ColorScheme]. Kept as one small widget (matching the pre-rework
|
||||
/// `_ActionIconButton` it replaces - see `styling.md`) so every floating
|
||||
/// control in this screen looks the same instead of drifting apart across
|
||||
/// the three call sites that need one.
|
||||
class ViewerIconButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String tooltip;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
/// Overrides the default `fg-1` (e.g. `danger` for delete). Ignored while
|
||||
/// [onTap] is null - a disabled button always dims to the same faded fg-1
|
||||
/// regardless of its normal color.
|
||||
final Color? color;
|
||||
|
||||
const ViewerIconButton({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.tooltip,
|
||||
required this.onTap,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final fg = onTap == null
|
||||
? colors.fg1.withValues(alpha: 0.4)
|
||||
: (color ?? colors.fg1);
|
||||
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
customBorder: const CircleBorder(),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
|
||||
child: Icon(icon, color: fg, size: 22),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user