Phase 4.5: Completed responsive player layout and real username integration

backend/cmd/server/main.go

@@ -4,16 +4,20 @@ import (
 	"log"
 
 	"hightube/internal/api"
+	"hightube/internal/chat"
 	"hightube/internal/db"
 	"hightube/internal/stream"
 )
 
 func main() {
-	log.Println("Starting Hightube Server Version-1.0.2 ...")
+	log.Println("Starting Hightube Server (Phase 4)...")
 
 	// Initialize Database and run auto-migrations
 	db.InitDB()
 
+	// Initialize Chat WebSocket Hub
+	chat.InitChat()
+
 	// Start the API server in a goroutine so it doesn't block the RTMP server
 	go func() {
 		r := api.SetupRouter()

backend/go.mod

@@ -2,7 +2,14 @@ module hightube
 
 go 1.26.1
 
-require github.com/nareix/joy4 v0.0.0-20200507095837-05a4ffbb5369
+require (
+	github.com/gin-gonic/gin v1.12.0
+	github.com/golang-jwt/jwt/v5 v5.3.1
+	github.com/nareix/joy4 v0.0.0-20200507095837-05a4ffbb5369
+	golang.org/x/crypto v0.48.0
+	gorm.io/driver/sqlite v1.6.0
+	gorm.io/gorm v1.30.0
+)
 
 require (
 	github.com/bytedance/gopkg v0.1.3 // indirect
@@ -11,13 +18,12 @@ require (
 	github.com/cloudwego/base64x v0.1.6 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.12 // indirect
 	github.com/gin-contrib/sse v1.1.0 // indirect
-	github.com/gin-gonic/gin v1.12.0 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
 	github.com/go-playground/validator/v10 v10.30.1 // indirect
 	github.com/goccy/go-json v0.10.5 // indirect
 	github.com/goccy/go-yaml v1.19.2 // indirect
-	github.com/golang-jwt/jwt/v5 v5.3.1 // indirect
+	github.com/gorilla/websocket v1.5.3 // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
@@ -34,11 +40,8 @@ require (
 	github.com/ugorji/go/codec v1.3.1 // indirect
 	go.mongodb.org/mongo-driver/v2 v2.5.0 // indirect
 	golang.org/x/arch v0.22.0 // indirect
-	golang.org/x/crypto v0.48.0 // indirect
 	golang.org/x/net v0.51.0 // indirect
 	golang.org/x/sys v0.41.0 // indirect
 	golang.org/x/text v0.34.0 // indirect
 	google.golang.org/protobuf v1.36.10 // indirect
-	gorm.io/driver/sqlite v1.6.0 // indirect
-	gorm.io/gorm v1.30.0 // indirect
 )

backend/go.sum

@@ -7,6 +7,7 @@ github.com/bytedance/sonic/loader v0.5.0/go.mod h1:AR4NYCk5DdzZizZ5djGqQ92eEhCCc
 github.com/cloudwego/base64x v0.1.6 h1:t11wG9AECkCDk5fMSoxmufanudBtJ+/HemLstXDLI2M=
 github.com/cloudwego/base64x v0.1.6/go.mod h1:OFcloc187FXDaYHvrNIjxSe8ncn0OOM8gEHfghB2IPU=
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/gabriel-vasile/mimetype v1.4.12 h1:e9hWvmLYvtp846tLHam2o++qitpguFiYCKbn0w9jyqw=
 github.com/gabriel-vasile/mimetype v1.4.12/go.mod h1:d+9Oxyo1wTzWdyVUPMmXFvp4F9tea18J8ufA774AB3s=
@@ -14,6 +15,8 @@ github.com/gin-contrib/sse v1.1.0 h1:n0w2GMuUpWDVp7qSpvze6fAu9iRxJY4Hmj6AmBOU05w
 github.com/gin-contrib/sse v1.1.0/go.mod h1:hxRZ5gVpWMT7Z0B0gSNYqqsSCNIJMjzvm6fqCz9vjwM=
 github.com/gin-gonic/gin v1.12.0 h1:b3YAbrZtnf8N//yjKeU2+MQsh2mY5htkZidOM7O0wG8=
 github.com/gin-gonic/gin v1.12.0/go.mod h1:VxccKfsSllpKshkBWgVgRniFFAzFb9csfngsqANjnLc=
+github.com/go-playground/assert/v2 v2.2.0 h1:JvknZsQTYeFEAhQwI4qEt9cyV5ONwRHC+lYKSsYSR8s=
+github.com/go-playground/assert/v2 v2.2.0/go.mod h1:VDjEfimB/XKnb+ZQfWdccd7VUvScMdVu0Titje2rxJ4=
 github.com/go-playground/locales v0.14.1 h1:EWaQ/wswjilfKLTECiXz7Rh+3BjFhfDFKv/oXslEjJA=
 github.com/go-playground/locales v0.14.1/go.mod h1:hxrqLVvrK65+Rwrd5Fc6F2O76J/NuW9t0sjnWqG1slY=
 github.com/go-playground/universal-translator v0.18.1 h1:Bcnm0ZwsGyWbCzImXv+pAJnYK9S473LQFuzCbDbfSFY=
@@ -26,7 +29,11 @@ github.com/goccy/go-yaml v1.19.2 h1:PmFC1S6h8ljIz6gMRBopkjP1TVT7xuwrButHID66PoM=
 github.com/goccy/go-yaml v1.19.2/go.mod h1:XBurs7gK8ATbW4ZPGKgcbrY1Br56PdM69F7LkFRi1kA=
 github.com/golang-jwt/jwt/v5 v5.3.1 h1:kYf81DTWFe7t+1VvL7eS+jKFVWaUnK9cB1qbwn63YCY=
 github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
+github.com/google/go-cmp v0.7.0 h1:wk8382ETsv4JYUZwIsn6YpYiWiBsYLSJiTsyBybVuN8=
+github.com/google/go-cmp v0.7.0/go.mod h1:pXiqmnSA92OHEEa9HXL2W4E7lf9JzCmGVUdgjX3N/iU=
 github.com/google/gofuzz v1.0.0/go.mod h1:dBl0BpW6vV/+mYPU4Po3pmUjxk6FQPldtuIdl/M65Eg=
+github.com/gorilla/websocket v1.5.3 h1:saDtZ6Pbx/0u+bgYQ3q96pZgCzfhKXGPqt7kZ72aNNg=
+github.com/gorilla/websocket v1.5.3/go.mod h1:YR8l580nyteQvAITg2hZ9XVh4b55+EU/adAjf1fMHhE=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.5 h1:/o9tlHleP7gOFmsnYNz3RGnqzefHA47wQpKrrdTIwXQ=
@@ -50,6 +57,7 @@ github.com/nareix/joy4 v0.0.0-20200507095837-05a4ffbb5369 h1:Yp0zFEufLz0H7jzffb4
 github.com/nareix/joy4 v0.0.0-20200507095837-05a4ffbb5369/go.mod h1:aFJ1ZwLjvHN4yEzE5Bkz8rD8/d8Vlj3UIuvz2yfET7I=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
 github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
+github.com/pmezard/go-difflib v1.0.0 h1:4DBwDE0NGyQoBHbLQYPwSUPoCMWR5BEzIk/f1lZbAQM=
 github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZNVY4sRDYZ/4=
 github.com/quic-go/qpack v0.6.0 h1:g7W+BMYynC1LbYLSqRt8PBg5Tgwxn214ZZR34VIOjz8=
 github.com/quic-go/qpack v0.6.0/go.mod h1:lUpLKChi8njB4ty2bFLX2x4gzDqXwUpaO1DP9qMDZII=
@@ -64,12 +72,16 @@ github.com/stretchr/testify v1.7.1/go.mod h1:6Fq8oRcR53rry900zMqJjRRixrwX3KX962/
 github.com/stretchr/testify v1.8.0/go.mod h1:yNjHg4UonilssWZ8iaSj1OCr/vHnekPRkoO+kdMU+MU=
 github.com/stretchr/testify v1.8.4/go.mod h1:sz/lmYIOXD/1dqDmKjjqLyZ2RngseejIcXlSw2iwfAo=
 github.com/stretchr/testify v1.10.0/go.mod h1:r2ic/lqez/lEtzL7wO/rwa5dbSLXVDPFyf8C91i36aY=
+github.com/stretchr/testify v1.11.1 h1:7s2iGBzp5EwR7/aIZr8ao5+dra3wiQyKjjFuvgVKu7U=
+github.com/stretchr/testify v1.11.1/go.mod h1:wZwfW3scLgRK+23gO65QZefKpKQRnfz6sD981Nm4B6U=
 github.com/twitchyliquid64/golang-asm v0.15.1 h1:SU5vSMR7hnwNxj24w34ZyCi/FmDZTkS4MhqMhdFk5YI=
 github.com/twitchyliquid64/golang-asm v0.15.1/go.mod h1:a1lVb/DtPvCB8fslRZhAngC2+aY1QWCk3Cedj/Gdt08=
 github.com/ugorji/go/codec v1.3.1 h1:waO7eEiFDwidsBN6agj1vJQ4AG7lh2yqXyOXqhgQuyY=
 github.com/ugorji/go/codec v1.3.1/go.mod h1:pRBVtBSKl77K30Bv8R2P+cLSGaTtex6fsA2Wjqmfxj4=
 go.mongodb.org/mongo-driver/v2 v2.5.0 h1:yXUhImUjjAInNcpTcAlPHiT7bIXhshCTL3jVBkF3xaE=
 go.mongodb.org/mongo-driver/v2 v2.5.0/go.mod h1:yOI9kBsufol30iFsl1slpdq1I0eHPzybRWdyYUs8K/0=
+go.uber.org/mock v0.6.0 h1:hyF9dfmbgIX5EfOdasqLsWD6xqpNZlXblLB/Dbnwv3Y=
+go.uber.org/mock v0.6.0/go.mod h1:KiVJ4BqZJaMj4svdfmHM0AUx4NJYO8ZNpPnZn1Z+BBU=
 golang.org/x/arch v0.22.0 h1:c/Zle32i5ttqRXjdLyyHZESLD/bB90DCU1g9l/0YBDI=
 golang.org/x/arch v0.22.0/go.mod h1:dNHoOeKiyja7GTvF9NJS1l3Z2yntpQNzgrjh1cU103A=
 golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=
@@ -85,6 +97,7 @@ google.golang.org/protobuf v1.36.10 h1:AYd7cD/uASjIL6Q9LiTjz8JLcrh/88q5UObnmY3aO
 google.golang.org/protobuf v1.36.10/go.mod h1:HTf+CrKn2C3g5S8VImy6tdcUvCska2kB7j23XfzDpco=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
+gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=
 gopkg.in/yaml.v3 v3.0.1/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gorm.io/driver/sqlite v1.6.0 h1:WHRRrIiulaPiPFmDcod6prc4l2VGVWHz80KspNsxSfQ=
 gorm.io/driver/sqlite v1.6.0/go.mod h1:AO9V1qIQddBESngQUKWL9yoH93HIeA1X6V633rBwyT8=

backend/internal/api/auth.go

@@ -91,6 +91,7 @@ func Login(c *gin.Context) {
 	}
 
 	c.JSON(http.StatusOK, gin.H{
-		"token": token,
+		"token":    token,
+		"username": user.Username,
 	})
 }

backend/internal/api/chat_handler.go

@@ -0,0 +1,51 @@
+package api
+
+import (
+	"fmt"
+	"net/http"
+
+	"github.com/gin-gonic/gin"
+	"github.com/gorilla/websocket"
+
+	"hightube/internal/chat"
+)
+
+var upgrader = websocket.Upgrader{
+	CheckOrigin: func(r *http.Request) bool {
+		return true // Allow all connections
+	},
+}
+
+// WSHandler handles websocket requests from clients
+func WSHandler(c *gin.Context) {
+	roomID := c.Param("room_id")
+	username := c.DefaultQuery("username", "Anonymous")
+
+	conn, err := upgrader.Upgrade(c.Writer, c.Request, nil)
+	if err != nil {
+		fmt.Printf("[WS ERROR] Failed to upgrade: %v\n", err)
+		return
+	}
+
+	client := &chat.Client{
+		Hub:      chat.MainHub,
+		Conn:     conn,
+		Send:     make(chan []byte, 256),
+		RoomID:   roomID,
+		Username: username,
+	}
+
+	client.Hub.RegisterClient(client)
+
+	// Start reading and writing loops in goroutines
+	go client.WritePump()
+	go client.ReadPump()
+
+	// Optionally broadcast a system message: User Joined
+	chat.MainHub.BroadcastToRoom(chat.Message{
+		Type:     "system",
+		Username: "System",
+		Content:  fmt.Sprintf("%s joined the room", username),
+		RoomID:   roomID,
+	})
+}

backend/internal/api/router.go

@@ -18,6 +18,9 @@ func SetupRouter() *gin.Engine {
 	r.POST("/api/register", Register)
 	r.POST("/api/login", Login)
 	r.GET("/api/rooms/active", GetActiveRooms)
+	
+	// WebSocket endpoint for live chat
+	r.GET("/api/ws/room/:room_id", WSHandler)
 
 	// Protected routes (require JWT)
 	authGroup := r.Group("/api")

backend/internal/chat/hub.go

@@ -0,0 +1,160 @@
+package chat
+
+import (
+	"encoding/json"
+	"sync"
+	"time"
+
+	"github.com/gorilla/websocket"
+)
+
+const (
+	writeWait      = 10 * time.Second
+	pongWait       = 60 * time.Second
+	pingPeriod     = (pongWait * 9) / 10
+	maxMessageSize = 512
+)
+
+type Message struct {
+	Type     string `json:"type"` // "chat", "system", "danmaku"
+	Username string `json:"username"`
+	Content  string `json:"content"`
+	RoomID   string `json:"room_id"`
+}
+
+type Client struct {
+	Hub      *Hub
+	Conn     *websocket.Conn
+	Send     chan []byte
+	RoomID   string
+	Username string
+}
+
+type Hub struct {
+	rooms      map[string]map[*Client]bool
+	broadcast  chan Message
+	register   chan *Client
+	unregister chan *Client
+	mutex      sync.RWMutex
+}
+
+func NewHub() *Hub {
+	return &Hub{
+		broadcast:  make(chan Message),
+		register:   make(chan *Client),
+		unregister: make(chan *Client),
+		rooms:      make(map[string]map[*Client]bool),
+	}
+}
+
+func (h *Hub) Run() {
+	for {
+		select {
+		case client := <-h.register:
+			h.mutex.Lock()
+			if h.rooms[client.RoomID] == nil {
+				h.rooms[client.RoomID] = make(map[*Client]bool)
+			}
+			h.rooms[client.RoomID][client] = true
+			h.mutex.Unlock()
+
+		case client := <-h.unregister:
+			h.mutex.Lock()
+			if rooms, ok := h.rooms[client.RoomID]; ok {
+				if _, ok := rooms[client]; ok {
+					delete(rooms, client)
+					close(client.Send)
+					if len(rooms) == 0 {
+						delete(h.rooms, client.RoomID)
+					}
+				}
+			}
+			h.mutex.Unlock()
+
+		case message := <-h.broadcast:
+			h.mutex.RLock()
+			clients := h.rooms[message.RoomID]
+			if clients != nil {
+				msgBytes, _ := json.Marshal(message)
+				for client := range clients {
+					select {
+					case client.Send <- msgBytes:
+					default:
+						close(client.Send)
+						delete(clients, client)
+					}
+				}
+			}
+			h.mutex.RUnlock()
+		}
+	}
+}
+
+func (h *Hub) RegisterClient(c *Client) {
+	h.register <- c
+}
+
+// BroadcastToRoom sends a message to the broadcast channel
+func (h *Hub) BroadcastToRoom(msg Message) {
+	h.broadcast <- msg
+}
+
+func (c *Client) ReadPump() {
+	defer func() {
+		c.Hub.unregister <- c
+		c.Conn.Close()
+	}()
+	c.Conn.SetReadLimit(maxMessageSize)
+	c.Conn.SetReadDeadline(time.Now().Add(pongWait))
+	c.Conn.SetPongHandler(func(string) error { c.Conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })
+	for {
+		_, message, err := c.Conn.ReadMessage()
+		if err != nil {
+			break
+		}
+		var msg Message
+		if err := json.Unmarshal(message, &msg); err == nil {
+			msg.RoomID = c.RoomID
+			msg.Username = c.Username
+			c.Hub.broadcast <- msg
+		}
+	}
+}
+
+func (c *Client) WritePump() {
+	ticker := time.NewTicker(pingPeriod)
+	defer func() {
+		ticker.Stop()
+		c.Conn.Close()
+	}()
+	for {
+		select {
+		case message, ok := <-c.Send:
+			c.Conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if !ok {
+				c.Conn.WriteMessage(websocket.CloseMessage, []byte{})
+				return
+			}
+			w, err := c.Conn.NextWriter(websocket.TextMessage)
+			if err != nil {
+				return
+			}
+			w.Write(message)
+			if err := w.Close(); err != nil {
+				return
+			}
+		case <-ticker.C:
+			c.Conn.SetWriteDeadline(time.Now().Add(writeWait))
+			if err := c.Conn.WriteMessage(websocket.PingMessage, nil); err != nil {
+				return
+			}
+		}
+	}
+}
+
+var MainHub *Hub
+
+func InitChat() {
+	MainHub = NewHub()
+	go MainHub.Run()
+}

backend/internal/db/db.go

@@ -41,5 +41,8 @@ func InitDB() {
 		log.Fatalf("Failed to migrate database: %v", err)
 	}
 
+	// Phase 3.5 Fix: Reset all rooms to inactive on startup using explicit map to ensure false is updated
+	DB.Model(&model.Room{}).Where("1 = 1").Updates(map[string]interface{}{"is_active": false})
+
 	log.Println("Database initialized successfully.")
 }

backend/internal/stream/server.go

@@ -72,8 +72,8 @@ func NewRTMPServer() *RTMPServer {
 		s.channels[roomLivePath] = q
 		s.mutex.Unlock()
 
-		// Mark room as active in DB
+		// Mark room as active in DB (using map to ensure true/false is correctly updated)
-		db.DB.Model(&room).Update("is_active", true)
+		db.DB.Model(&room).Updates(map[string]interface{}{"is_active": true})
 
 		// 3. Cleanup on end
 		defer func() {
@@ -81,7 +81,8 @@ func NewRTMPServer() *RTMPServer {
 			delete(s.channels, roomLivePath)
 			s.mutex.Unlock()
 			q.Close()
-			db.DB.Model(&room).Update("is_active", false) // Mark room as inactive
+			// Explicitly set is_active to false using map
+			db.DB.Model(&room).Updates(map[string]interface{}{"is_active": false})
 			fmt.Printf("[INFO] Publishing ended for Room ID: %d\n", room.ID)
 		}()
 

frontend/lib/main.dart

@@ -1,13 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
-import 'package:fvp/fvp.dart' as fvp; // 使用 as fvp 别名
+import 'package:fvp/fvp.dart' 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(
@@ -28,10 +27,22 @@ class HightubeApp extends StatelessWidget {
 
     return MaterialApp(
       title: 'Hightube',
+      // 设置深色主题为主，更符合视频类应用的审美
       theme: ThemeData(
-        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
         useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(
+          seedColor: Colors.deepPurple,
+          brightness: Brightness.light,
+        ),
       ),
+      darkTheme: ThemeData(
+        useMaterial3: true,
+        colorScheme: ColorScheme.fromSeed(
+          seedColor: Colors.deepPurple,
+          brightness: Brightness.dark,
+        ),
+      ),
+      themeMode: ThemeMode.system, // 跟随系统切换深浅色
       home: auth.isAuthenticated ? HomePage() : LoginPage(),
       debugShowCheckedModeBanner: false,
     );

frontend/lib/pages/home_page.dart

@@ -7,6 +7,7 @@ import '../providers/settings_provider.dart';
 import '../services/api_service.dart';
 import 'settings_page.dart';
 import 'player_page.dart';
+import 'my_stream_page.dart';
 
 class HomePage extends StatefulWidget {
   @override
@@ -14,6 +15,59 @@ class HomePage extends StatefulWidget {
 }
 
 class _HomePageState extends State<HomePage> {
+  int _selectedIndex = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    bool isWide = MediaQuery.of(context).size.width > 600;
+
+    final List<Widget> _pages = [
+      _ExploreView(onGoLive: () => setState(() => _selectedIndex = 1)),
+      MyStreamPage(),
+      SettingsPage(),
+    ];
+
+    return Scaffold(
+      body: Row(
+        children: [
+          if (isWide)
+            NavigationRail(
+              selectedIndex: _selectedIndex,
+              onDestinationSelected: (int index) => setState(() => _selectedIndex = index),
+              labelType: NavigationRailLabelType.all,
+              destinations: const [
+                NavigationRailDestination(icon: Icon(Icons.explore), label: Text('Explore')),
+                NavigationRailDestination(icon: Icon(Icons.videocam), label: Text('Console')),
+                NavigationRailDestination(icon: Icon(Icons.settings), label: Text('Settings')),
+              ],
+            ),
+          Expanded(child: _pages[_selectedIndex]),
+        ],
+      ),
+      bottomNavigationBar: !isWide
+          ? NavigationBar(
+              selectedIndex: _selectedIndex,
+              onDestinationSelected: (int index) => setState(() => _selectedIndex = index),
+              destinations: const [
+                NavigationDestination(icon: Icon(Icons.explore), label: 'Explore'),
+                NavigationDestination(icon: Icon(Icons.videocam), label: 'Console'),
+                NavigationDestination(icon: Icon(Icons.settings), label: 'Settings'),
+              ],
+            )
+          : null,
+    );
+  }
+}
+
+class _ExploreView extends StatefulWidget {
+  final VoidCallback onGoLive;
+  const _ExploreView({required this.onGoLive});
+
+  @override
+  _ExploreViewState createState() => _ExploreViewState();
+}
+
+class _ExploreViewState extends State<_ExploreView> {
   List<dynamic> _activeRooms = [];
   bool _isLoading = false;
   Timer? _refreshTimer;
@@ -22,7 +76,6 @@ class _HomePageState extends State<HomePage> {
   void initState() {
     super.initState();
     _refreshRooms();
-    // 启动自动刷新定时器 (每 10 秒自动更新列表)
     _refreshTimer = Timer.periodic(Duration(seconds: 10), (timer) {
       if (mounted) _refreshRooms(isAuto: true);
     });
@@ -35,8 +88,7 @@ class _HomePageState extends State<HomePage> {
   }
 
   Future<void> _refreshRooms({bool isAuto = false}) async {
-    if (!isAuto) setState(() => _isLoading = true);
+    if (!isAuto && mounted) setState(() => _isLoading = true);
-    
     final settings = context.read<SettingsProvider>();
     final auth = context.read<AuthProvider>();
     final api = ApiService(settings, auth.token);
@@ -45,14 +97,10 @@ class _HomePageState extends State<HomePage> {
       final response = await api.getActiveRooms();
       if (response.statusCode == 200) {
         final data = jsonDecode(response.body);
-        if (mounted) {
+        if (mounted) setState(() => _activeRooms = data['active_rooms'] ?? []);
-          setState(() => _activeRooms = data['active_rooms'] ?? []);
-        }
       }
     } catch (e) {
-      if (!isAuto && mounted) {
+      if (!isAuto && mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to load rooms")));
-        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to load rooms")));
-      }
     } finally {
       if (!isAuto && mounted) setState(() => _isLoading = false);
     }
@@ -64,57 +112,124 @@ class _HomePageState extends State<HomePage> {
 
     return Scaffold(
       appBar: AppBar(
-        title: Text("Hightube Live"),
+        title: Text("Explore", style: TextStyle(fontWeight: FontWeight.bold)),
         actions: [
-          IconButton(
+          IconButton(icon: Icon(Icons.refresh), onPressed: () => _refreshRooms()),
-            icon: Icon(Icons.refresh),
+          IconButton(icon: Icon(Icons.logout), onPressed: () => context.read<AuthProvider>().logout()),
-            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(),
-          ),
         ],
       ),
+      floatingActionButton: FloatingActionButton.extended(
+        onPressed: widget.onGoLive,
+        label: Text("Go Live"),
+        icon: Icon(Icons.videocam),
+      ),
       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(children: [
-                : ListView.builder(
+                    Padding(
+                      padding: EdgeInsets.only(top: 100),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        children: [
+                          Icon(Icons.live_tv_outlined, size: 80, color: Colors.grey),
+                          SizedBox(height: 16),
+                          Text("No active rooms. Be the first!", style: TextStyle(color: Colors.grey, fontSize: 16)),
+                        ],
+                      ),
+                    )
+                  ])
+                : GridView.builder(
+                    padding: EdgeInsets.all(12),
+                    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                      maxCrossAxisExtent: 400,
+                      childAspectRatio: 1.2,
+                      crossAxisSpacing: 12,
+                      mainAxisSpacing: 12,
+                    ),
                     itemCount: _activeRooms.length,
                     itemBuilder: (context, index) {
                       final room = _activeRooms[index];
-                      return ListTile(
+                      return _buildRoomCard(room, settings);
-                        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,
-                              ),
-                            ),
-                          );
-                        },
-                      );
                     },
                   ),
       ),
     );
   }
+
+  Widget _buildRoomCard(dynamic room, SettingsProvider settings) {
+    return Card(
+      elevation: 4,
+      clipBehavior: Clip.antiAlias,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      child: InkWell(
+        onTap: () {
+          final rtmpUrl = "${settings.rtmpUrl}/${room['room_id']}";
+          Navigator.push(
+            context,
+            MaterialPageRoute(
+              builder: (_) => PlayerPage(
+                title: room['title'],
+                rtmpUrl: rtmpUrl,
+                roomId: room['room_id'].toString(),
+              ),
+            ),
+          );
+        },
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            Expanded(
+              flex: 3,
+              child: Stack(
+                fit: StackFit.expand,
+                children: [
+                  Container(
+                    color: Theme.of(context).colorScheme.primaryContainer,
+                    child: Center(child: Icon(Icons.live_tv, size: 50, color: Theme.of(context).colorScheme.primary)),
+                  ),
+                  Positioned(
+                    top: 8, left: 8,
+                    child: Container(
+                      padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
+                      decoration: BoxDecoration(color: Colors.red, borderRadius: BorderRadius.circular(4)),
+                      child: Row(children: [
+                        Icon(Icons.circle, size: 8, color: Colors.white),
+                        SizedBox(width: 4),
+                        Text("LIVE", style: TextStyle(color: Colors.white, fontSize: 10, fontWeight: FontWeight.bold)),
+                      ]),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Expanded(
+              flex: 1,
+              child: Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+                child: Row(
+                  children: [
+                    CircleAvatar(radius: 16, child: Text(room['user_id'].toString().substring(0, 1))),
+                    SizedBox(width: 12),
+                    Expanded(
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(room['title'], maxLines: 1, overflow: TextOverflow.ellipsis, style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14)),
+                          Text("Host ID: ${room['user_id']}", style: TextStyle(fontSize: 12, color: Colors.grey)),
+                        ],
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
 }

frontend/lib/pages/login_page.dart

@@ -5,6 +5,7 @@ import '../providers/auth_provider.dart';
 import '../providers/settings_provider.dart';
 import '../services/api_service.dart';
 import 'register_page.dart';
+import 'settings_page.dart';
 
 class LoginPage extends StatefulWidget {
   @override
@@ -17,48 +18,109 @@ class _LoginPageState extends State<LoginPage> {
   bool _isLoading = false;
 
   void _handleLogin() async {
+    if (_usernameController.text.isEmpty || _passwordController.text.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Please fill in all fields")));
+      return;
+    }
+
     setState(() => _isLoading = true);
     final settings = context.read<SettingsProvider>();
     final auth = context.read<AuthProvider>();
     final api = ApiService(settings, null);
 
     try {
-      final response = await api.login(
+      final response = await api.login(_usernameController.text, _passwordController.text);
-        _usernameController.text,
-        _passwordController.text,
-      );
-
       if (response.statusCode == 200) {
         final data = jsonDecode(response.body);
-        await auth.login(data['token']);
+        await auth.login(data['token'], data['username']);
       } 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")));
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Network Error: Could not connect to server")));
     } finally {
-      setState(() => _isLoading = false);
+      if (mounted) setState(() => _isLoading = false);
     }
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text("Login")),
+      appBar: AppBar(
-      body: Padding(
+        actions: [
-        padding: const EdgeInsets.all(16.0),
+          IconButton(
-        child: Column(
+            icon: Icon(Icons.settings),
-          children: [
+            onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => SettingsPage())),
-            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")),
+      body: Center(
-            TextButton(
+        child: SingleChildScrollView(
-              onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => RegisterPage())),
+          padding: const EdgeInsets.symmetric(horizontal: 32.0),
-              child: Text("Don't have an account? Register"),
+          child: ConstrainedBox(
+            constraints: BoxConstraints(maxWidth: 400),
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                // Logo & Name
+                Icon(Icons.flutter_dash, size: 80, color: Theme.of(context).colorScheme.primary),
+                SizedBox(height: 16),
+                Text(
+                  "HIGHTUBE",
+                  style: TextStyle(
+                    fontSize: 32,
+                    fontWeight: FontWeight.bold,
+                    letterSpacing: 4,
+                    color: Theme.of(context).colorScheme.primary,
+                  ),
+                ),
+                Text("Open Source Live Platform", style: TextStyle(color: Colors.grey)),
+                SizedBox(height: 48),
+                
+                // Fields
+                TextField(
+                  controller: _usernameController,
+                  decoration: InputDecoration(
+                    labelText: "Username",
+                    prefixIcon: Icon(Icons.person),
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+                  ),
+                ),
+                SizedBox(height: 16),
+                TextField(
+                  controller: _passwordController,
+                  obscureText: true,
+                  decoration: InputDecoration(
+                    labelText: "Password",
+                    prefixIcon: Icon(Icons.lock),
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+                  ),
+                ),
+                SizedBox(height: 32),
+                
+                // Login Button
+                SizedBox(
+                  width: double.infinity,
+                  height: 50,
+                  child: ElevatedButton(
+                    onPressed: _isLoading ? null : _handleLogin,
+                    style: ElevatedButton.styleFrom(
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                    ),
+                    child: _isLoading ? CircularProgressIndicator() : Text("LOGIN", style: TextStyle(fontWeight: FontWeight.bold)),
+                  ),
+                ),
+                SizedBox(height: 16),
+                
+                // Register Link
+                TextButton(
+                  onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => RegisterPage())),
+                  child: Text("Don't have an account? Create one"),
+                ),
+              ],
             ),
-          ],
+          ),
         ),
       ),
     );

frontend/lib/pages/my_stream_page.dart

@@ -0,0 +1,125 @@
+import 'dart:convert';
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter/services.dart';
+import '../providers/auth_provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/api_service.dart';
+
+class MyStreamPage extends StatefulWidget {
+  @override
+  _MyStreamPageState createState() => _MyStreamPageState();
+}
+
+class _MyStreamPageState extends State<MyStreamPage> {
+  Map<String, dynamic>? _roomInfo;
+  bool _isLoading = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _fetchMyRoom();
+  }
+
+  Future<void> _fetchMyRoom() async {
+    setState(() => _isLoading = true);
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    final api = ApiService(settings, auth.token);
+
+    try {
+      final response = await api.getMyRoom();
+      if (response.statusCode == 200) {
+        setState(() => _roomInfo = jsonDecode(response.body));
+      }
+    } catch (e) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Failed to fetch room info")));
+    } finally {
+      setState(() => _isLoading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final settings = context.watch<SettingsProvider>();
+
+    return Scaffold(
+      appBar: AppBar(title: Text("My Stream Console")),
+      body: _isLoading
+          ? Center(child: CircularProgressIndicator())
+          : _roomInfo == null
+              ? Center(child: Text("No room info found."))
+              : SingleChildScrollView(
+                  padding: EdgeInsets.all(20),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      _buildInfoCard(
+                        title: "Room Title",
+                        value: _roomInfo!['title'],
+                        icon: Icons.edit,
+                        onTap: () {
+                          // TODO: Implement title update API later
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Title editing coming soon!")));
+                        },
+                      ),
+                      SizedBox(height: 20),
+                      _buildInfoCard(
+                        title: "RTMP Server URL",
+                        value: settings.rtmpUrl,
+                        icon: Icons.copy,
+                        onTap: () {
+                          Clipboard.setData(ClipboardData(text: settings.rtmpUrl));
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Server URL copied to clipboard")));
+                        },
+                      ),
+                      SizedBox(height: 20),
+                      _buildInfoCard(
+                        title: "Stream Key (Keep Secret!)",
+                        value: _roomInfo!['stream_key'],
+                        icon: Icons.copy,
+                        isSecret: true,
+                        onTap: () {
+                          Clipboard.setData(ClipboardData(text: _roomInfo!['stream_key']));
+                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Stream Key copied to clipboard")));
+                        },
+                      ),
+                      SizedBox(height: 30),
+                      Center(
+                        child: Column(
+                          children: [
+                            Icon(Icons.info_outline, color: Colors.grey),
+                            SizedBox(height: 8),
+                            Text(
+                              "Use OBS or other tools to stream to this address.",
+                              textAlign: TextAlign.center,
+                              style: TextStyle(color: Colors.grey, fontSize: 12),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+    );
+  }
+
+  Widget _buildInfoCard({
+    required String title,
+    required String value,
+    required IconData icon,
+    bool isSecret = false,
+    VoidCallback? onTap,
+  }) {
+    return Card(
+      child: ListTile(
+        title: Text(title, style: TextStyle(fontSize: 12, color: Colors.grey)),
+        subtitle: Text(
+          isSecret ? "••••••••••••••••" : value,
+          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
+        ),
+        trailing: IconButton(icon: Icon(icon), onPressed: onTap),
+      ),
+    );
+  }
+}

frontend/lib/pages/player_page.dart

@@ -1,11 +1,22 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:video_player/video_player.dart';
+import '../providers/auth_provider.dart';
+import '../providers/settings_provider.dart';
+import '../services/chat_service.dart';
 
 class PlayerPage extends StatefulWidget {
   final String title;
   final String rtmpUrl;
+  final String roomId;
 
-  const PlayerPage({Key? key, required this.title, required this.rtmpUrl}) : super(key: key);
+  const PlayerPage({
+    Key? key,
+    required this.title,
+    required this.rtmpUrl,
+    required this.roomId,
+  }) : super(key: key);
 
   @override
   _PlayerPageState createState() => _PlayerPageState();
@@ -13,6 +24,11 @@ class PlayerPage extends StatefulWidget {
 
 class _PlayerPageState extends State<PlayerPage> {
   late VideoPlayerController _controller;
+  final ChatService _chatService = ChatService();
+  final TextEditingController _msgController = TextEditingController();
+  final List<ChatMessage> _messages = [];
+  final List<Widget> _danmakus = [];
+  
   bool _isError = false;
   String? _errorMessage;
 
@@ -20,63 +36,263 @@ class _PlayerPageState extends State<PlayerPage> {
   void initState() {
     super.initState();
     _initializePlayer();
+    _initializeChat();
   }
 
   void _initializePlayer() async {
-    print("[INFO] Playing stream: ${widget.rtmpUrl}");
     _controller = VideoPlayerController.networkUrl(Uri.parse(widget.rtmpUrl));
-
     try {
       await _controller.initialize();
       _controller.play();
-      setState(() {}); // 更新状态以渲染画面
+      if (mounted) setState(() {});
     } catch (e) {
-      print("[ERROR] Player initialization failed: $e");
+      if (mounted) setState(() { _isError = true; _errorMessage = e.toString(); });
-      setState(() {
+    }
-        _isError = true;
+  }
-        _errorMessage = e.toString();
+
-      });
+  void _initializeChat() {
+    final settings = context.read<SettingsProvider>();
+    final auth = context.read<AuthProvider>();
+    
+    // 使用真实用户名建立连接
+    final currentUsername = auth.username ?? "Guest_${widget.roomId}";
+    _chatService.connect(settings.baseUrl, widget.roomId, currentUsername);
+
+    _chatService.messages.listen((msg) {
+      if (mounted) {
+        setState(() {
+          _messages.insert(0, msg);
+          if (msg.type == "chat" || msg.type == "danmaku") {
+            _addDanmaku(msg.content);
+          }
+        });
+      }
+    });
+  }
+
+  void _addDanmaku(String text) {
+    final id = DateTime.now().millisecondsSinceEpoch;
+    final top = 20.0 + (id % 6) * 30.0; 
+    
+    final danmaku = _DanmakuItem(
+      key: ValueKey(id),
+      text: text,
+      top: top,
+      onFinished: () {
+        if (mounted) setState(() => _danmakus.removeWhere((w) => w.key == ValueKey(id)));
+      },
+    );
+
+    setState(() => _danmakus.add(danmaku));
+  }
+
+  void _sendMsg() {
+    if (_msgController.text.isNotEmpty) {
+      final auth = context.read<AuthProvider>();
+      _chatService.sendMessage(_msgController.text, auth.username ?? "Anonymous", widget.roomId);
+      _msgController.clear();
     }
   }
 
   @override
   void dispose() {
     _controller.dispose();
+    _chatService.dispose();
+    _msgController.dispose();
     super.dispose();
   }
 
   @override
   Widget build(BuildContext context) {
+    bool isWide = MediaQuery.of(context).size.width > 900;
+
     return Scaffold(
-      backgroundColor: Colors.black,
+      appBar: AppBar(title: Text(widget.title)),
-      appBar: AppBar(
+      body: isWide ? _buildWideLayout() : _buildMobileLayout(),
-        title: Text(widget.title),
+    );
-        backgroundColor: Colors.transparent,
+  }
-        foregroundColor: Colors.white,
+
-      ),
+  // 宽屏布局：左右分栏
-      body: Center(
+  Widget _buildWideLayout() {
-        child: _isError
+    return Row(
-            ? Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
-                mainAxisAlignment: MainAxisAlignment.center,
+      children: [
-                children: [
+        // 左侧视频区 (占比 75%)
-                  Icon(Icons.error_outline, color: Colors.red, size: 60),
+        Expanded(
-                  SizedBox(height: 16),
+          flex: 3,
-                  Text(
+          child: Container(
-                    "Failed to load stream.",
+            color: Colors.black,
-                    style: TextStyle(color: Colors.white, fontSize: 18),
+            child: _buildVideoWithDanmaku(),
+          ),
+        ),
+        // 右侧聊天区 (占比 25%)
+        Container(
+          width: 350,
+          decoration: BoxDecoration(
+            border: Border(left: BorderSide(color: Theme.of(context).dividerColor)),
+          ),
+          child: _buildChatSection(),
+        ),
+      ],
+    );
+  }
+
+  // 移动端布局：上下堆叠
+  Widget _buildMobileLayout() {
+    return Column(
+      children: [
+        // 上方视频区
+        Container(
+          color: Colors.black,
+          width: double.infinity,
+          height: 250,
+          child: _buildVideoWithDanmaku(),
+        ),
+        // 下方聊天区
+        Expanded(child: _buildChatSection()),
+      ],
+    );
+  }
+
+  // 抽离视频播放器与弹幕组件
+  Widget _buildVideoWithDanmaku() {
+    return Stack(
+      children: [
+        Center(
+          child: _isError
+              ? Text("Error: $_errorMessage", style: TextStyle(color: Colors.white))
+              : _controller.value.isInitialized
+                  ? AspectRatio(
+                      aspectRatio: _controller.value.aspectRatio,
+                      child: VideoPlayer(_controller),
+                    )
+                  : CircularProgressIndicator(),
+        ),
+        // 弹幕层使用 ClipRect 裁剪，防止飘出视频区域
+        ClipRect(
+          child: Stack(children: _danmakus),
+        ),
+      ],
+    );
+  }
+
+  // 抽离聊天区域组件
+  Widget _buildChatSection() {
+    return Column(
+      children: [
+        Container(
+          padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+          color: Theme.of(context).colorScheme.surfaceVariant,
+          child: Row(
+            children: [
+              Icon(Icons.chat_bubble_outline, size: 16),
+              SizedBox(width: 8),
+              Text("Live Chat", style: TextStyle(fontWeight: FontWeight.bold)),
+            ],
+          ),
+        ),
+        Expanded(
+          child: ListView.builder(
+            reverse: true,
+            padding: EdgeInsets.all(8),
+            itemCount: _messages.length,
+            itemBuilder: (context, index) {
+              final m = _messages[index];
+              return Padding(
+                padding: const EdgeInsets.symmetric(vertical: 4.0),
+                child: RichText(
+                  text: TextSpan(
+                    style: TextStyle(color: Theme.of(context).textTheme.bodyMedium?.color),
+                    children: [
+                      TextSpan(
+                        text: "${m.username}: ",
+                        style: TextStyle(fontWeight: FontWeight.bold, color: m.type == "system" ? Colors.blue : Theme.of(context).colorScheme.primary),
+                      ),
+                      TextSpan(text: m.content),
+                    ],
                   ),
-                  SizedBox(height: 8),
+                ),
-                  Text(_errorMessage ?? "Unknown error", style: TextStyle(color: Colors.grey)),
+              );
-                  TextButton(onPressed: () => Navigator.pop(context), child: Text("Go Back")),
+            },
-                ],
+          ),
-              )
+        ),
-            : _controller.value.isInitialized
+        Divider(height: 1),
-                ? AspectRatio(
+        Padding(
-                    aspectRatio: _controller.value.aspectRatio,
+          padding: const EdgeInsets.all(8.0),
-                    child: VideoPlayer(_controller),
+          child: Row(
-                  )
+            children: [
-                : CircularProgressIndicator(color: Colors.white),
+              Expanded(
-      ),
+                child: TextField(
+                  controller: _msgController,
+                  decoration: InputDecoration(
+                    hintText: "Send a message...",
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(20)),
+                    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+                  ),
+                  onSubmitted: (_) => _sendMsg(),
+                ),
+              ),
+              IconButton(icon: Icon(Icons.send, color: Theme.of(context).colorScheme.primary), onPressed: _sendMsg),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _DanmakuItem extends StatefulWidget {
+  final String text;
+  final double top;
+  final VoidCallback onFinished;
+
+  const _DanmakuItem({Key? key, required this.text, required this.top, required this.onFinished}) : super(key: key);
+
+  @override
+  __DanmakuItemState createState() => __DanmakuItemState();
+}
+
+class __DanmakuItemState extends State<_DanmakuItem> with SingleTickerProviderStateMixin {
+  late AnimationController _animationController;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(duration: const Duration(seconds: 10), vsync: this);
+    
+    // 使用相对位置：从右向左
+    _animation = Tween<double>(begin: 1.0, end: -0.5).animate(_animationController);
+    
+    _animationController.forward().then((_) => widget.onFinished());
+  }
+
+  @override
+  void dispose() {
+    _animationController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (context, child) {
+        return Positioned(
+          top: widget.top,
+          // left 使用 MediaQuery 获取屏幕宽度进行动态计算
+          left: MediaQuery.of(context).size.width * _animation.value,
+          child: Text(
+            widget.text,
+            style: TextStyle(
+              color: Colors.white,
+              fontWeight: FontWeight.bold,
+              fontSize: 18,
+              shadows: [Shadow(blurRadius: 4, color: Colors.black, offset: Offset(1, 1))],
+            ),
+          ),
+        );
+      },
     );
   }
 }

frontend/lib/pages/register_page.dart

@@ -15,18 +15,19 @@ class _RegisterPageState extends State<RegisterPage> {
   bool _isLoading = false;
 
   void _handleRegister() async {
+    if (_usernameController.text.isEmpty || _passwordController.text.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Please fill in all fields")));
+      return;
+    }
+
     setState(() => _isLoading = true);
     final settings = context.read<SettingsProvider>();
     final api = ApiService(settings, null);
 
     try {
-      final response = await api.register(
+      final response = await api.register(_usernameController.text, _passwordController.text);
-        _usernameController.text,
-        _passwordController.text,
-      );
-
       if (response.statusCode == 201) {
-        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Registered! Please login.")));
+        ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Account created! Please login.")));
         Navigator.pop(context);
       } else {
         final error = jsonDecode(response.body)['error'] ?? "Registration Failed";
@@ -35,23 +36,67 @@ class _RegisterPageState extends State<RegisterPage> {
     } catch (e) {
       ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Network Error")));
     } finally {
-      setState(() => _isLoading = false);
+      if (mounted) setState(() => _isLoading = false);
     }
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text("Register")),
+      appBar: AppBar(title: Text("Create Account")),
-      body: Padding(
+      body: Center(
-        padding: const EdgeInsets.all(16.0),
+        child: SingleChildScrollView(
-        child: Column(
+          padding: const EdgeInsets.symmetric(horizontal: 32.0),
-          children: [
+          child: ConstrainedBox(
-            TextField(controller: _usernameController, decoration: InputDecoration(labelText: "Username")),
+            constraints: BoxConstraints(maxWidth: 400),
-            TextField(controller: _passwordController, decoration: InputDecoration(labelText: "Password"), obscureText: true),
+            child: Column(
-            SizedBox(height: 20),
+              mainAxisAlignment: MainAxisAlignment.center,
-            _isLoading ? CircularProgressIndicator() : ElevatedButton(onPressed: _handleRegister, child: Text("Register")),
+              children: [
-          ],
+                Icon(Icons.person_add_outlined, size: 64, color: Theme.of(context).colorScheme.primary),
+                SizedBox(height: 24),
+                Text(
+                  "Join Hightube",
+                  style: Theme.of(context).textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.bold),
+                ),
+                SizedBox(height: 48),
+                TextField(
+                  controller: _usernameController,
+                  decoration: InputDecoration(
+                    labelText: "Desired Username",
+                    prefixIcon: Icon(Icons.person),
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+                  ),
+                ),
+                SizedBox(height: 16),
+                TextField(
+                  controller: _passwordController,
+                  obscureText: true,
+                  decoration: InputDecoration(
+                    labelText: "Password",
+                    prefixIcon: Icon(Icons.lock),
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)),
+                  ),
+                ),
+                SizedBox(height: 32),
+                SizedBox(
+                  width: double.infinity,
+                  height: 50,
+                  child: ElevatedButton(
+                    onPressed: _isLoading ? null : _handleRegister,
+                    style: ElevatedButton.styleFrom(
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                    ),
+                    child: _isLoading ? CircularProgressIndicator() : Text("REGISTER", style: TextStyle(fontWeight: FontWeight.bold)),
+                  ),
+                ),
+                SizedBox(height: 16),
+                TextButton(
+                  onPressed: () => Navigator.pop(context),
+                  child: Text("Already have an account? Login here"),
+                ),
+              ],
+            ),
+          ),
         ),
       ),
     );

frontend/lib/pages/settings_page.dart

@@ -8,38 +8,72 @@ class SettingsPage extends StatefulWidget {
 }
 
 class _SettingsPageState extends State<SettingsPage> {
-  final _urlController = TextEditingController();
+  late TextEditingController _urlController;
 
   @override
   void initState() {
     super.initState();
-    _urlController.text = context.read<SettingsProvider>().baseUrl;
+    _urlController = TextEditingController(text: context.read<SettingsProvider>().baseUrl);
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text("Server Settings")),
+      appBar: AppBar(title: Text("Settings", style: TextStyle(fontWeight: FontWeight.bold))),
-      body: Padding(
+      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(16.0),
+        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,
+              ),
+            ),
+            SizedBox(height: 16),
             TextField(
               controller: _urlController,
               decoration: InputDecoration(
-                labelText: "Backend URL (e.g., http://127.0.0.1:8080)",
+                labelText: "Backend Server URL",
+                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: 20),
+            SizedBox(height: 24),
-            ElevatedButton(
+            SizedBox(
-              onPressed: () {
+              width: double.infinity,
-                context.read<SettingsProvider>().setBaseUrl(_urlController.text);
+              height: 50,
-                ScaffoldMessenger.of(context).showSnackBar(
+              child: ElevatedButton.icon(
-                  SnackBar(content: Text("Server URL Updated")),
+                onPressed: () {
-                );
+                  context.read<SettingsProvider>().setBaseUrl(_urlController.text);
-              },
+                  ScaffoldMessenger.of(context).showSnackBar(
-              child: Text("Save Settings"),
+                    SnackBar(
+                      content: Text("Server URL Updated"),
+                      behavior: SnackBarBehavior.floating,
+                    ),
+                  );
+                },
+                icon: Icon(Icons.save),
+                label: Text("Save Configuration"),
+                style: ElevatedButton.styleFrom(
+                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+                ),
+              ),
             ),
+            SizedBox(height: 40),
+            Divider(),
+            SizedBox(height: 20),
+            Text(
+              "About Hightube",
+              style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey),
+            ),
+            SizedBox(height: 10),
+            Text("Version: 1.0.0-MVP"),
+            Text("Status: Phase 3.5 (UI Refinement)"),
           ],
         ),
       ),

frontend/lib/providers/auth_provider.dart

@@ -3,35 +3,42 @@ import 'package:shared_preferences/shared_preferences.dart';
 
 class AuthProvider with ChangeNotifier {
   String? _token;
+  String? _username; // 新增用户名状态
   bool _isAuthenticated = false;
 
   bool get isAuthenticated => _isAuthenticated;
   String? get token => _token;
+  String? get username => _username;
 
   AuthProvider() {
-    _loadToken();
+    _loadAuth();
   }
 
-  void _loadToken() async {
+  void _loadAuth() async {
     final prefs = await SharedPreferences.getInstance();
     _token = prefs.getString('token');
+    _username = prefs.getString('username');
     _isAuthenticated = _token != null;
     notifyListeners();
   }
 
-  Future<void> login(String token) async {
+  Future<void> login(String token, String username) async {
     _token = token;
+    _username = username;
     _isAuthenticated = true;
     final prefs = await SharedPreferences.getInstance();
     await prefs.setString('token', token);
+    await prefs.setString('username', username);
     notifyListeners();
   }
 
   Future<void> logout() async {
     _token = null;
+    _username = null;
     _isAuthenticated = false;
     final prefs = await SharedPreferences.getInstance();
     await prefs.remove('token');
+    await prefs.remove('username');
     notifyListeners();
   }
 }

frontend/lib/services/chat_service.dart

@@ -0,0 +1,61 @@
+import 'dart:async';
+import 'dart:convert';
+import 'package:web_socket_channel/web_socket_channel.dart';
+
+class ChatMessage {
+  final String type;
+  final String username;
+  final String content;
+  final String roomId;
+
+  ChatMessage({required this.type, required this.username, required this.content, required this.roomId});
+
+  factory ChatMessage.fromJson(Map<String, dynamic> json) {
+    return ChatMessage(
+      type: json['type'] ?? 'chat',
+      username: json['username'] ?? 'Anonymous',
+      content: json['content'] ?? '',
+      roomId: json['room_id'] ?? '',
+    );
+  }
+
+  Map<String, dynamic> toJson() => {
+    'type': type,
+    'username': username,
+    'content': content,
+    'room_id': roomId,
+  };
+}
+
+class ChatService {
+  WebSocketChannel? _channel;
+  final StreamController<ChatMessage> _messageController = StreamController<ChatMessage>.broadcast();
+
+  Stream<ChatMessage> get messages => _messageController.stream;
+
+  void connect(String baseUrl, String roomId, String username) {
+    final wsUri = Uri.parse(baseUrl).replace(scheme: 'ws', path: '/api/ws/room/$roomId', queryParameters: {'username': username});
+    _channel = WebSocketChannel.connect(wsUri);
+
+    _channel!.stream.listen((data) {
+      final json = jsonDecode(data);
+      _messageController.add(ChatMessage.fromJson(json));
+    }, onError: (err) {
+      print("[WS ERROR] $err");
+    }, onDone: () {
+      print("[WS DONE] Connection closed");
+    });
+  }
+
+  void sendMessage(String content, String username, String roomId, {String type = 'chat'}) {
+    if (_channel != null) {
+      final msg = ChatMessage(type: type, username: username, content: content, roomId: roomId);
+      _channel!.sink.add(jsonEncode(msg.toJson()));
+    }
+  }
+
+  void dispose() {
+    _channel?.sink.close();
+    _messageController.close();
+  }
+}

frontend/pubspec.lock

@@ -525,6 +525,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  web_socket:
+    dependency: transitive
+    description:
+      name: web_socket
+      sha256: "34d64019aa8e36bf9842ac014bb5d2f5586ca73df5e4d9bf5c936975cae6982c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1"
+  web_socket_channel:
+    dependency: "direct main"
+    description:
+      name: web_socket_channel
+      sha256: d645757fb0f4773d602444000a8131ff5d48c9e47adfe9772652dd1a4f2d45c8
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.3"
   xdg_directories:
     dependency: transitive
     description:

frontend/pubspec.yaml

@@ -39,6 +39,7 @@ dependencies:
   shared_preferences: ^2.5.4
   video_player: ^2.11.1
   fvp: ^0.35.2
+  web_socket_channel: ^3.0.3
 
 dev_dependencies:
   flutter_test: