feat: implement chat history, theme customization, and password management

- Added chat history persistence for active rooms with auto-cleanup on stream end. - Overhauled Settings page with user profile, theme color picker, and password change. - Added backend API for user password updates. - Integrated flutter_launcher_icons and updated app icon to 'H' logo. - Fixed 'Duplicate keys' bug in danmaku by using UniqueKey and filtering historical messages. - Updated version to 1.0.0-beta3.5 and author info.
2026-03-25 11:48:39 +08:00
parent b2a27f7801
commit a0c5e7590d
21 changed files with 446 additions and 54 deletions
--- a/frontend/lib/main.dart
+++ b/frontend/lib/main.dart
@@ -24,21 +24,21 @@ class HightubeApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final auth = context.watch<AuthProvider>();
+    final settings = context.watch<SettingsProvider>();

    return MaterialApp(
      title: 'Hightube',
-      // 设置深色主题为主，更符合视频类应用的审美
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
-          seedColor: Colors.deepPurple,
+          seedColor: settings.themeColor,
          brightness: Brightness.light,
        ),
      ),
      darkTheme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
-          seedColor: Colors.deepPurple,
+          seedColor: settings.themeColor,
          brightness: Brightness.dark,
        ),
      ),
--- a/frontend/lib/pages/player_page.dart
+++ b/frontend/lib/pages/player_page.dart
@@ -62,7 +62,7 @@ class _PlayerPageState extends State<PlayerPage> {
      if (mounted) {
        setState(() {
          _messages.insert(0, msg);
-          if (msg.type == "chat" || msg.type == "danmaku") {
+          if (!msg.isHistory && (msg.type == "chat" || msg.type == "danmaku")) {
            _addDanmaku(msg.content);
          }
        });
@@ -71,15 +71,15 @@ class _PlayerPageState extends State<PlayerPage> {
  }

  void _addDanmaku(String text) {
-    final id = DateTime.now().millisecondsSinceEpoch;
-    final top = 20.0 + (id % 6) * 30.0; 
+    final key = UniqueKey();
+    final top = 20.0 + (DateTime.now().millisecondsSinceEpoch % 6) * 30.0; 
    
    final danmaku = _DanmakuItem(
-      key: ValueKey(id),
+      key: key,
      text: text,
      top: top,
      onFinished: () {
-        if (mounted) setState(() => _danmakus.removeWhere((w) => w.key == ValueKey(id)));
+        if (mounted) setState(() => _danmakus.removeWhere((w) => w.key == key));
      },
    );

--- a/frontend/lib/pages/settings_page.dart
+++ b/frontend/lib/pages/settings_page.dart
@@ -1,6 +1,9 @@
+import 'dart:convert';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../providers/settings_provider.dart';
+import '../providers/auth_provider.dart';
+import '../services/api_service.dart';

 class SettingsPage extends StatefulWidget {
  @override
@@ -9,6 +12,18 @@ class SettingsPage extends StatefulWidget {

 class _SettingsPageState extends State<SettingsPage> {
  late TextEditingController _urlController;
+  final TextEditingController _oldPasswordController = TextEditingController();
+  final TextEditingController _newPasswordController = TextEditingController();
+
+  final List<Color> _availableColors = [
+    Colors.blue,
+    Colors.deepPurple,
+    Colors.red,
+    Colors.green,
+    Colors.orange,
+    Colors.teal,
+    Colors.pink,
+  ];

  @override
  void initState() {
@@ -16,22 +31,60 @@ class _SettingsPageState extends State<SettingsPage> {
    _urlController = TextEditingController(text: context.read<SettingsProvider>().baseUrl);
  }

+  @override
+  void dispose() {
+    _urlController.dispose();
+    _oldPasswordController.dispose();
+    _newPasswordController.dispose();
+    super.dispose();
+  }
+
+  void _handleChangePassword() async {
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    final api = ApiService(settings, auth.token);
+
+    if (_oldPasswordController.text.isEmpty || _newPasswordController.text.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Please fill in both password fields")));
+      return;
+    }
+
+    try {
+      final resp = await api.changePassword(_oldPasswordController.text, _newPasswordController.text);
+      final data = jsonDecode(resp.body);
+      if (resp.statusCode == 200) {
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Password updated successfully")));
+        _oldPasswordController.clear();
+        _newPasswordController.clear();
+      } else {
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Error: ${data['error']}")));
+      }
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to connect to server")));
+    }
+  }
+
  @override
  Widget build(BuildContext context) {
+    final auth = context.watch<AuthProvider>();
+    final settings = context.watch<SettingsProvider>();
+
    return Scaffold(
-      appBar: AppBar(title: Text("Settings", style: TextStyle(fontWeight: FontWeight.bold))),
+      appBar: AppBar(
+        title: Text("Settings", style: TextStyle(fontWeight: FontWeight.bold)),
+        centerTitle: true,
+      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(24.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
-            Text(
-              "Network Configuration",
-              style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                color: Theme.of(context).colorScheme.primary,
-                fontWeight: FontWeight.bold,
-              ),
-            ),
+            // User Profile Section
+            _buildProfileSection(auth),
+            SizedBox(height: 32),
+            
+            // Network Configuration
+            _buildSectionTitle("Network Configuration"),
            SizedBox(height: 16),
            TextField(
              controller: _urlController,
@@ -40,43 +93,172 @@ class _SettingsPageState extends State<SettingsPage> {
                hintText: "http://127.0.0.1:8080",
                prefixIcon: Icon(Icons.lan),
                border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
-                helperText: "Restarting stream may be required after change",
              ),
            ),
-            SizedBox(height: 24),
+            SizedBox(height: 12),
            SizedBox(
              width: double.infinity,
-              height: 50,
              child: ElevatedButton.icon(
                onPressed: () {
                  context.read<SettingsProvider>().setBaseUrl(_urlController.text);
-                  ScaffoldMessenger.of(context).showSnackBar(
-                    SnackBar(
-                      content: Text("Server URL Updated"),
-                      behavior: SnackBarBehavior.floating,
-                    ),
-                  );
+                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Server URL Updated"), behavior: SnackBarBehavior.floating));
                },
                icon: Icon(Icons.save),
-                label: Text("Save Configuration"),
+                label: Text("Save Network Settings"),
                style: ElevatedButton.styleFrom(
+                  backgroundColor: Theme.of(context).colorScheme.primaryContainer,
+                  foregroundColor: Theme.of(context).colorScheme.onPrimaryContainer,
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                ),
+              ),
+            ),
+            SizedBox(height: 32),
+
+            // Theme Color Section
+            _buildSectionTitle("Theme Customization"),
+            SizedBox(height: 16),
+            Wrap(
+              spacing: 12,
+              runSpacing: 12,
+              children: _availableColors.map((color) {
+                bool isSelected = settings.themeColor.value == color.value;
+                return GestureDetector(
+                  onTap: () => settings.setThemeColor(color),
+                  child: Container(
+                    width: 44,
+                    height: 44,
+                    decoration: BoxDecoration(
+                      color: color,
+                      shape: BoxShape.circle,
+                      border: isSelected ? Border.all(color: Theme.of(context).colorScheme.onSurface, width: 3) : null,
+                      boxShadow: [
+                        BoxShadow(color: Colors.black26, blurRadius: 4, offset: Offset(0, 2)),
+                      ],
+                    ),
+                    child: isSelected ? Icon(Icons.check, color: Colors.white) : null,
+                  ),
+                );
+              }).toList(),
+            ),
+            SizedBox(height: 32),
+
+            // Security Section
+            _buildSectionTitle("Security"),
+            SizedBox(height: 16),
+            TextField(
+              controller: _oldPasswordController,
+              obscureText: true,
+              decoration: InputDecoration(
+                labelText: "Old Password",
+                prefixIcon: Icon(Icons.lock_outline),
+                border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+              ),
+            ),
+            SizedBox(height: 12),
+            TextField(
+              controller: _newPasswordController,
+              obscureText: true,
+              decoration: InputDecoration(
+                labelText: "New Password",
+                prefixIcon: Icon(Icons.lock_reset),
+                border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+              ),
+            ),
+            SizedBox(height: 12),
+            SizedBox(
+              width: double.infinity,
+              child: OutlinedButton.icon(
+                onPressed: _handleChangePassword,
+                icon: Icon(Icons.update),
+                label: Text("Change Password"),
+                style: OutlinedButton.styleFrom(
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
                ),
              ),
            ),
            SizedBox(height: 40),
+
+            // About Section
            Divider(),
            SizedBox(height: 20),
-            Text(
-              "About Hightube",
-              style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
+            Center(
+              child: Column(
+                children: [
+                  Container(
+                    width: 60,
+                    height: 60,
+                    decoration: BoxDecoration(
+                      color: settings.themeColor,
+                      borderRadius: BorderRadius.circular(12),
+                    ),
+                    child: Center(child: Text("H", style: TextStyle(color: Colors.white, fontSize: 32, fontWeight: FontWeight.bold))),
+                  ),
+                  SizedBox(height: 12),
+                  Text("Hightube", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
+                  Text("Version: 1.0.0-beta3.5", style: TextStyle(color: Colors.grey)),
+                  Text("Author: Highground-Soft & Minimax", style: TextStyle(color: Colors.grey)),
+                  SizedBox(height: 20),
+                  Text("© 2026 Hightube Project", style: TextStyle(fontSize: 12, color: Colors.grey)),
+                ],
+              ),
            ),
-            SizedBox(height: 10),
-            Text("Version: 1.0.0-MVP"),
-            Text("Status: Phase 3.5 (UI Refinement)"),
+            SizedBox(height: 40),
          ],
        ),
      ),
    );
  }
+
+  Widget _buildSectionTitle(String title) {
+    return Text(
+      title,
+      style: Theme.of(context).textTheme.titleMedium?.copyWith(
+        color: Theme.of(context).colorScheme.primary,
+        fontWeight: FontWeight.bold,
+      ),
+    );
+  }
+
+  Widget _buildProfileSection(AuthProvider auth) {
+    return Container(
+      padding: EdgeInsets.all(20),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surfaceVariant,
+        borderRadius: BorderRadius.circular(20),
+      ),
+      child: Row(
+        children: [
+          CircleAvatar(
+            radius: 35,
+            backgroundColor: Theme.of(context).colorScheme.primary,
+            child: Text(
+              (auth.username ?? "U")[0].toUpperCase(),
+              style: TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
+            ),
+          ),
+          SizedBox(width: 20),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  auth.username ?? "Unknown User",
+                  style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
+                ),
+                Text(
+                  "Self-hosted Streamer",
+                  style: TextStyle(color: Theme.of(context).colorScheme.outline),
+                ),
+              ],
+            ),
+          ),
+          IconButton(
+            onPressed: () => auth.logout(),
+            icon: Icon(Icons.logout, color: Colors.redAccent),
+            tooltip: "Logout",
+          ),
+        ],
+      ),
+    );
+  }
 }
--- a/frontend/lib/providers/settings_provider.dart
+++ b/frontend/lib/providers/settings_provider.dart
@@ -1,12 +1,13 @@
 import 'package:flutter/material.dart';
 import 'package:shared_preferences/shared_preferences.dart';
-
 class SettingsProvider with ChangeNotifier {
  // Default server address for local development.
  // Using 10.0.2.2 for Android emulator or localhost for Desktop.
  String _baseUrl = "http://localhost:8080";
-  
+  Color _themeColor = Colors.blue;
+
  String get baseUrl => _baseUrl;
+  Color get themeColor => _themeColor;

  SettingsProvider() {
    _loadSettings();
@@ -15,6 +16,10 @@ class SettingsProvider with ChangeNotifier {
  void _loadSettings() async {
    final prefs = await SharedPreferences.getInstance();
    _baseUrl = prefs.getString('baseUrl') ?? _baseUrl;
+    final colorValue = prefs.getInt('themeColor');
+    if (colorValue != null) {
+      _themeColor = Color(colorValue);
+    }
    notifyListeners();
  }

@@ -24,7 +29,14 @@ class SettingsProvider with ChangeNotifier {
    await prefs.setString('baseUrl', url);
    notifyListeners();
  }
-  
+
+  void setThemeColor(Color color) async {
+    _themeColor = color;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setInt('themeColor', color.value);
+    notifyListeners();
+  }
+
  // Also provide the RTMP URL based on the same hostname
  String get rtmpUrl {
    final uri = Uri.parse(_baseUrl);
--- a/frontend/lib/services/api_service.dart
+++ b/frontend/lib/services/api_service.dart
@@ -42,4 +42,12 @@ class ApiService {
      headers: _headers,
    );
  }
+
+  Future<http.Response> changePassword(String oldPassword, String newPassword) async {
+    return await http.post(
+      Uri.parse("${settings.baseUrl}/api/user/change-password"),
+      headers: _headers,
+      body: jsonEncode({"old_password": oldPassword, "new_password": newPassword}),
+    );
+  }
 }
--- a/frontend/lib/services/chat_service.dart
+++ b/frontend/lib/services/chat_service.dart
@@ -7,8 +7,15 @@ class ChatMessage {
  final String username;
  final String content;
  final String roomId;
+  final bool isHistory;

-  ChatMessage({required this.type, required this.username, required this.content, required this.roomId});
+  ChatMessage({
+    required this.type,
+    required this.username,
+    required this.content,
+    required this.roomId,
+    this.isHistory = false,
+  });

  factory ChatMessage.fromJson(Map<String, dynamic> json) {
    return ChatMessage(
@@ -16,6 +23,7 @@ class ChatMessage {
      username: json['username'] ?? 'Anonymous',
      content: json['content'] ?? '',
      roomId: json['room_id'] ?? '',
+      isHistory: json['is_history'] ?? false,
    );
  }

@@ -24,6 +32,7 @@ class ChatMessage {
    'username': username,
    'content': content,
    'room_id': roomId,
+    'is_history': isHistory,
  };
 }