Phase 3 completed: Flutter MVP with live streaming and auto-refresh

frontend/lib/main.dart

@@ -0,0 +1,39 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:fvp/fvp.dart' as fvp; // 使用 as fvp 别名
+import 'providers/auth_provider.dart';
+import 'providers/settings_provider.dart';
+import 'pages/home_page.dart';
+import 'pages/login_page.dart';
+
+void main() {
+  // 初始化播放器引擎
+  fvp.registerWith();
+  
+  runApp(
+    MultiProvider(
+      providers: [
+        ChangeNotifierProvider(create: (_) => SettingsProvider()),
+        ChangeNotifierProvider(create: (_) => AuthProvider()),
+      ],
+      child: HightubeApp(),
+    ),
+  );
+}
+
+class HightubeApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final auth = context.watch<AuthProvider>();
+
+    return MaterialApp(
+      title: 'Hightube',
+      theme: ThemeData(
+        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
+        useMaterial3: true,
+      ),
+      home: auth.isAuthenticated ? HomePage() : LoginPage(),
+      debugShowCheckedModeBanner: false,
+    );
+  }
+}

frontend/lib/pages/home_page.dart

@@ -0,0 +1,120 @@
+import 'dart:async';
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/auth_provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/api_service.dart';
+import 'settings_page.dart';
+import 'player_page.dart';
+
+class HomePage extends StatefulWidget {
+  @override
+  _HomePageState createState() => _HomePageState();
+}
+
+class _HomePageState extends State<HomePage> {
+  List<dynamic> _activeRooms = [];
+  bool _isLoading = false;
+  Timer? _refreshTimer;
+
+  @override
+  void initState() {
+    super.initState();
+    _refreshRooms();
+    // 启动自动刷新定时器 (每 10 秒自动更新列表)
+    _refreshTimer = Timer.periodic(Duration(seconds: 10), (timer) {
+      if (mounted) _refreshRooms(isAuto: true);
+    });
+  }
+
+  @override
+  void dispose() {
+    _refreshTimer?.cancel();
+    super.dispose();
+  }
+
+  Future<void> _refreshRooms({bool isAuto = false}) async {
+    if (!isAuto) setState(() => _isLoading = true);
+    
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    final api = ApiService(settings, auth.token);
+
+    try {
+      final response = await api.getActiveRooms();
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body);
+        if (mounted) {
+          setState(() => _activeRooms = data['active_rooms'] ?? []);
+        }
+      }
+    } catch (e) {
+      if (!isAuto && mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to load rooms")));
+      }
+    } finally {
+      if (!isAuto && mounted) setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final settings = context.watch<SettingsProvider>();
+
+    return Scaffold(
+      appBar: AppBar(
+        title: Text("Hightube Live"),
+        actions: [
+          IconButton(
+            icon: Icon(Icons.refresh),
+            tooltip: "Manual Refresh",
+            onPressed: () => _refreshRooms(),
+          ),
+          IconButton(
+            icon: Icon(Icons.settings),
+            tooltip: "Settings",
+            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => SettingsPage())),
+          ),
+          IconButton(
+            icon: Icon(Icons.logout),
+            tooltip: "Logout",
+            onPressed: () => context.read<AuthProvider>().logout(),
+          ),
+        ],
+      ),
+      body: RefreshIndicator(
+        onRefresh: _refreshRooms,
+        child: _isLoading && _activeRooms.isEmpty
+            ? Center(child: CircularProgressIndicator())
+            : _activeRooms.isEmpty
+                ? ListView(children: [Padding(padding: EdgeInsets.only(top: 50), child: Center(child: Text("No active rooms. Be the first!")))])
+                : ListView.builder(
+                    itemCount: _activeRooms.length,
+                    itemBuilder: (context, index) {
+                      final room = _activeRooms[index];
+                      return ListTile(
+                        leading: CircleAvatar(child: Icon(Icons.live_tv)),
+                        title: Text(room['title']),
+                        subtitle: Text("User ID: ${room['user_id']} (Streaming now)"),
+                        trailing: Icon(Icons.play_circle_filled, color: Colors.blue),
+                        onTap: () {
+                          // 动态构建播放链接：rtmp://{host}:1935/live/{room_id}
+                          final rtmpUrl = "${settings.rtmpUrl}/${room['room_id']}";
+                          Navigator.push(
+                            context,
+                            MaterialPageRoute(
+                              builder: (_) => PlayerPage(
+                                title: room['title'],
+                                rtmpUrl: rtmpUrl,
+                              ),
+                            ),
+                          );
+                        },
+                      );
+                    },
+                  ),
+      ),
+    );
+  }
+}

frontend/lib/pages/login_page.dart

@@ -0,0 +1,66 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/auth_provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/api_service.dart';
+import 'register_page.dart';
+
+class LoginPage extends StatefulWidget {
+  @override
+  _LoginPageState createState() => _LoginPageState();
+}
+
+class _LoginPageState extends State<LoginPage> {
+  final _usernameController = TextEditingController();
+  final _passwordController = TextEditingController();
+  bool _isLoading = false;
+
+  void _handleLogin() async {
+    setState(() => _isLoading = true);
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    final api = ApiService(settings, null);
+
+    try {
+      final response = await api.login(
+        _usernameController.text,
+        _passwordController.text,
+      );
+
+      if (response.statusCode == 200) {
+        final data = jsonDecode(response.body);
+        await auth.login(data['token']);
+      } else {
+        final error = jsonDecode(response.body)['error'] ?? "Login Failed";
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(error)));
+      }
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Network Error")));
+    } finally {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("Login")),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            TextField(controller: _usernameController, decoration: InputDecoration(labelText: "Username")),
+            TextField(controller: _passwordController, decoration: InputDecoration(labelText: "Password"), obscureText: true),
+            SizedBox(height: 20),
+            _isLoading ? CircularProgressIndicator() : ElevatedButton(onPressed: _handleLogin, child: Text("Login")),
+            TextButton(
+              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => RegisterPage())),
+              child: Text("Don't have an account? Register"),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/lib/pages/player_page.dart

@@ -0,0 +1,82 @@
+import 'package:flutter/material.dart';
+import 'package:video_player/video_player.dart';
+
+class PlayerPage extends StatefulWidget {
+  final String title;
+  final String rtmpUrl;
+
+  const PlayerPage({Key? key, required this.title, required this.rtmpUrl}) : super(key: key);
+
+  @override
+  _PlayerPageState createState() => _PlayerPageState();
+}
+
+class _PlayerPageState extends State<PlayerPage> {
+  late VideoPlayerController _controller;
+  bool _isError = false;
+  String? _errorMessage;
+
+  @override
+  void initState() {
+    super.initState();
+    _initializePlayer();
+  }
+
+  void _initializePlayer() async {
+    print("[INFO] Playing stream: ${widget.rtmpUrl}");
+    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.rtmpUrl));
+
+    try {
+      await _controller.initialize();
+      _controller.play();
+      setState(() {}); // 更新状态以渲染画面
+    } catch (e) {
+      print("[ERROR] Player initialization failed: $e");
+      setState(() {
+        _isError = true;
+        _errorMessage = e.toString();
+      });
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      appBar: AppBar(
+        title: Text(widget.title),
+        backgroundColor: Colors.transparent,
+        foregroundColor: Colors.white,
+      ),
+      body: Center(
+        child: _isError
+            ? Column(
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: [
+                  Icon(Icons.error_outline, color: Colors.red, size: 60),
+                  SizedBox(height: 16),
+                  Text(
+                    "Failed to load stream.",
+                    style: TextStyle(color: Colors.white, fontSize: 18),
+                  ),
+                  SizedBox(height: 8),
+                  Text(_errorMessage ?? "Unknown error", style: TextStyle(color: Colors.grey)),
+                  TextButton(onPressed: () => Navigator.pop(context), child: Text("Go Back")),
+                ],
+              )
+            : _controller.value.isInitialized
+                ? AspectRatio(
+                    aspectRatio: _controller.value.aspectRatio,
+                    child: VideoPlayer(_controller),
+                  )
+                : CircularProgressIndicator(color: Colors.white),
+      ),
+    );
+  }
+}

frontend/lib/pages/register_page.dart

@@ -0,0 +1,59 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/api_service.dart';
+
+class RegisterPage extends StatefulWidget {
+  @override
+  _RegisterPageState createState() => _RegisterPageState();
+}
+
+class _RegisterPageState extends State<RegisterPage> {
+  final _usernameController = TextEditingController();
+  final _passwordController = TextEditingController();
+  bool _isLoading = false;
+
+  void _handleRegister() async {
+    setState(() => _isLoading = true);
+    final settings = context.read<SettingsProvider>();
+    final api = ApiService(settings, null);
+
+    try {
+      final response = await api.register(
+        _usernameController.text,
+        _passwordController.text,
+      );
+
+      if (response.statusCode == 201) {
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Registered! Please login.")));
+        Navigator.pop(context);
+      } else {
+        final error = jsonDecode(response.body)['error'] ?? "Registration Failed";
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(error)));
+      }
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Network Error")));
+    } finally {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("Register")),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            TextField(controller: _usernameController, decoration: InputDecoration(labelText: "Username")),
+            TextField(controller: _passwordController, decoration: InputDecoration(labelText: "Password"), obscureText: true),
+            SizedBox(height: 20),
+            _isLoading ? CircularProgressIndicator() : ElevatedButton(onPressed: _handleRegister, child: Text("Register")),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/lib/pages/settings_page.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import '../providers/settings_provider.dart';
+
+class SettingsPage extends StatefulWidget {
+  @override
+  _SettingsPageState createState() => _SettingsPageState();
+}
+
+class _SettingsPageState extends State<SettingsPage> {
+  final _urlController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    _urlController.text = context.read<SettingsProvider>().baseUrl;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: Text("Server Settings")),
+      body: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            TextField(
+              controller: _urlController,
+              decoration: InputDecoration(
+                labelText: "Backend URL (e.g., http://127.0.0.1:8080)",
+              ),
+            ),
+            SizedBox(height: 20),
+            ElevatedButton(
+              onPressed: () {
+                context.read<SettingsProvider>().setBaseUrl(_urlController.text);
+                ScaffoldMessenger.of(context).showSnackBar(
+                  SnackBar(content: Text("Server URL Updated")),
+                );
+              },
+              child: Text("Save Settings"),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

frontend/lib/providers/auth_provider.dart

@@ -0,0 +1,37 @@
+import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+
+class AuthProvider with ChangeNotifier {
+  String? _token;
+  bool _isAuthenticated = false;
+
+  bool get isAuthenticated => _isAuthenticated;
+  String? get token => _token;
+
+  AuthProvider() {
+    _loadToken();
+  }
+
+  void _loadToken() async {
+    final prefs = await SharedPreferences.getInstance();
+    _token = prefs.getString('token');
+    _isAuthenticated = _token != null;
+    notifyListeners();
+  }
+
+  Future<void> login(String token) async {
+    _token = token;
+    _isAuthenticated = true;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString('token', token);
+    notifyListeners();
+  }
+
+  Future<void> logout() async {
+    _token = null;
+    _isAuthenticated = false;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.remove('token');
+    notifyListeners();
+  }
+}

frontend/lib/providers/settings_provider.dart

@@ -0,0 +1,33 @@
+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";
+  
+  String get baseUrl => _baseUrl;
+
+  SettingsProvider() {
+    _loadSettings();
+  }
+
+  void _loadSettings() async {
+    final prefs = await SharedPreferences.getInstance();
+    _baseUrl = prefs.getString('baseUrl') ?? _baseUrl;
+    notifyListeners();
+  }
+
+  void setBaseUrl(String url) async {
+    _baseUrl = url;
+    final prefs = await SharedPreferences.getInstance();
+    await prefs.setString('baseUrl', url);
+    notifyListeners();
+  }
+  
+  // Also provide the RTMP URL based on the same hostname
+  String get rtmpUrl {
+    final uri = Uri.parse(_baseUrl);
+    return "rtmp://${uri.host}:1935/live";
+  }
+}

frontend/lib/services/api_service.dart

@@ -0,0 +1,45 @@
+import 'dart:convert';
+import 'package:http/http.dart' as http;
+import '../providers/settings_provider.dart';
+
+class ApiService {
+  final SettingsProvider settings;
+  final String? token;
+
+  ApiService(this.settings, this.token);
+
+  Map<String, String> get _headers => {
+    'Content-Type': 'application/json',
+    if (token != null) 'Authorization': 'Bearer $token',
+  };
+
+  Future<http.Response> register(String username, String password) async {
+    return await http.post(
+      Uri.parse("${settings.baseUrl}/api/register"),
+      headers: _headers,
+      body: jsonEncode({"username": username, "password": password}),
+    );
+  }
+
+  Future<http.Response> login(String username, String password) async {
+    return await http.post(
+      Uri.parse("${settings.baseUrl}/api/login"),
+      headers: _headers,
+      body: jsonEncode({"username": username, "password": password}),
+    );
+  }
+
+  Future<http.Response> getMyRoom() async {
+    return await http.get(
+      Uri.parse("${settings.baseUrl}/api/room/my"),
+      headers: _headers,
+    );
+  }
+
+  Future<http.Response> getActiveRooms() async {
+    return await http.get(
+      Uri.parse("${settings.baseUrl}/api/rooms/active"),
+      headers: _headers,
+    );
+  }
+}