Introduce FrostyColors ThemeExtension with 7 semantic color fields (highlightedMessage, emoteOnly, followersOnly, slowMode, subOnly, uniqueMode, overlayOnSurface) and brightness-aware light/dark variants. Replace hardcoded colors across 15 files: - Links use colorScheme.primary instead of Colors.blue - Mentions use colorScheme.error instead of Colors.red - First-time chatters share highlightedMessage (Twitch purple) - Chat mode indicators use frostyColors fields - Overlay text uses frostyColors.overlayOnSurface Remove Provider<FrostyThemes> pattern from main.dart, channel.dart, video_overlay.dart, and frosty_photo_view_dialog.dart. Replace manual onSurface.withValues(alpha: 0.6) with M3's built-in onSurfaceVariant for secondary text in section headers, chat modes, alerts, loading indicators, and input hints. Fix double-muted onSurfaceVariant.withValues(alpha: 0.6) in navigation icons and notification dismiss button. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
183 lines
5.3 KiB
Dart
183 lines
5.3 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_mobx/flutter_mobx.dart';
|
|
import 'package:frosty/models/irc.dart';
|
|
import 'package:frosty/utils/context_extensions.dart';
|
|
|
|
class ChatModes extends StatelessWidget {
|
|
final ROOMSTATE roomState;
|
|
|
|
const ChatModes({super.key, required this.roomState});
|
|
|
|
String pluralize(String str, String count) => count == '1' ? str : '${str}s';
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Observer(
|
|
builder: (context) {
|
|
final activeModes = <MapEntry<String, Widget>>[];
|
|
|
|
// Collect active modes with their labels for sorting
|
|
if (roomState.emoteOnly != '0') {
|
|
activeModes.add(
|
|
MapEntry(
|
|
'Emote only',
|
|
_buildModeChip(
|
|
context: context,
|
|
icon: Icons.emoji_emotions_outlined,
|
|
activeIcon: Icons.emoji_emotions_rounded,
|
|
label: 'Emote only',
|
|
activeLabel: 'Emote only',
|
|
isActive: true,
|
|
activeColor: context.frostyColors.emoteOnly,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (roomState.followersOnly != '-1') {
|
|
activeModes.add(
|
|
MapEntry(
|
|
'Follower only',
|
|
_buildModeChip(
|
|
context: context,
|
|
icon: Icons.favorite_outline_rounded,
|
|
activeIcon: Icons.favorite_rounded,
|
|
label: 'Follower only',
|
|
activeLabel: 'Follower only',
|
|
isActive: true,
|
|
activeColor: context.frostyColors.followersOnly,
|
|
duration: _getFollowersDuration(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (roomState.slowMode != '0') {
|
|
activeModes.add(
|
|
MapEntry(
|
|
'Slow mode',
|
|
_buildModeChip(
|
|
context: context,
|
|
icon: Icons.hourglass_empty_rounded,
|
|
activeIcon: Icons.hourglass_top_rounded,
|
|
label: 'Slow mode',
|
|
activeLabel: 'Slow mode',
|
|
isActive: true,
|
|
activeColor: context.frostyColors.slowMode,
|
|
duration: _getSlowModeDuration(),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (roomState.subMode != '0') {
|
|
activeModes.add(
|
|
MapEntry(
|
|
'Sub only',
|
|
_buildModeChip(
|
|
context: context,
|
|
icon: Icons.monetization_on_outlined,
|
|
activeIcon: Icons.monetization_on_rounded,
|
|
label: 'Sub only',
|
|
activeLabel: 'Sub only',
|
|
isActive: true,
|
|
activeColor: context.frostyColors.subOnly,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
if (roomState.r9k != '0') {
|
|
activeModes.add(
|
|
MapEntry(
|
|
'Unique mode',
|
|
_buildModeChip(
|
|
context: context,
|
|
icon: Icons.quiz_outlined,
|
|
activeIcon: Icons.quiz_rounded,
|
|
label: 'Unique mode',
|
|
activeLabel: 'Unique mode',
|
|
isActive: true,
|
|
activeColor: context.frostyColors.uniqueMode,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
// Sort alphabetically by label
|
|
activeModes.sort((a, b) => a.key.compareTo(b.key));
|
|
final activeChips = activeModes.map((entry) => entry.value).toList();
|
|
|
|
return Wrap(spacing: 8, runSpacing: -4, children: activeChips);
|
|
},
|
|
);
|
|
}
|
|
|
|
String? _getFollowersDuration() {
|
|
if (roomState.followersOnly == '0') {
|
|
return null; // No duration for immediate followers
|
|
}
|
|
final minutes = int.parse(roomState.followersOnly);
|
|
if (minutes >= 60) {
|
|
final hours = minutes ~/ 60;
|
|
final remainingMinutes = minutes % 60;
|
|
if (remainingMinutes == 0) {
|
|
return '${hours}h';
|
|
} else {
|
|
return '${hours}h ${remainingMinutes}m';
|
|
}
|
|
}
|
|
return '${minutes}m';
|
|
}
|
|
|
|
String _getSlowModeDuration() {
|
|
final seconds = int.parse(roomState.slowMode);
|
|
if (seconds >= 60) {
|
|
final minutes = seconds ~/ 60;
|
|
final remainingSeconds = seconds % 60;
|
|
if (remainingSeconds == 0) {
|
|
return '${minutes}m';
|
|
} else {
|
|
return '${minutes}m ${remainingSeconds}s';
|
|
}
|
|
}
|
|
return '${seconds}s';
|
|
}
|
|
|
|
Widget _buildModeChip({
|
|
required BuildContext context,
|
|
required IconData icon,
|
|
required IconData activeIcon,
|
|
required String label,
|
|
required String activeLabel,
|
|
required bool isActive,
|
|
required Color activeColor,
|
|
String? duration,
|
|
}) {
|
|
return Chip(
|
|
avatar: Icon(
|
|
isActive ? activeIcon : icon,
|
|
size: 16,
|
|
color: isActive ? activeColor : null,
|
|
),
|
|
label: duration != null
|
|
? Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Text(isActive ? activeLabel : label),
|
|
const SizedBox(width: 4),
|
|
Text(
|
|
duration,
|
|
style: TextStyle(
|
|
color: Theme.of(
|
|
context,
|
|
).colorScheme.onSurfaceVariant,
|
|
),
|
|
),
|
|
],
|
|
)
|
|
: Text(isActive ? activeLabel : label),
|
|
side: BorderSide.none,
|
|
);
|
|
}
|
|
}
|