feat: progress bar, more realiable reconnects

pkg/discord/jukebox.go

@@ -22,6 +22,7 @@ import (
 type JukeboxPlayer struct {
 	bot                 *Bot
 	currentSong         *subsonic.Song
+	currentSongStarted  time.Time
 	playlist            []subsonic.Song
 	playlistMutex       sync.Mutex
 	playingMutex        sync.Mutex
@@ -29,6 +30,7 @@ type JukeboxPlayer struct {
 	songHistory         []*subsonic.Song
 	historyMutex        sync.RWMutex
 	maxHistorySize      int
+	initialized         bool
 }
 
 // NewJukeboxPlayer creates a new jukebox player
@@ -38,6 +40,7 @@ func NewJukeboxPlayer(bot *Bot) *JukeboxPlayer {
 		playlist:       make([]subsonic.Song, 0),
 		songHistory:    make([]*subsonic.Song, 0),
 		maxHistorySize: 20, // Store the last 20 songs
+		initialized:    true,
 	}
 
 	// Register command handlers
@@ -236,6 +239,7 @@ func (j *JukeboxPlayer) startPlaying() {
 			// Clear current song when stopping
 			j.playingMutex.Lock()
 			j.currentSong = nil
+			j.currentSongStarted = time.Time{} // Reset time to zero value
 			j.playingMutex.Unlock()
 	
 			return
@@ -273,6 +277,7 @@ func (j *JukeboxPlayer) startPlaying() {
 
 		j.playingMutex.Lock()
 		j.currentSong = song
+		j.currentSongStarted = time.Now()
 		j.playingMutex.Unlock()
 		
 		// Add song to history when it starts playing
@@ -781,6 +786,13 @@ func (j *JukeboxPlayer) GetCurrentSong() *subsonic.Song {
 	return j.currentSong
 }
 
+// GetCurrentSongInfo returns the current song and its start time
+func (j *JukeboxPlayer) GetCurrentSongInfo() (*subsonic.Song, time.Time) {
+	j.playingMutex.Lock()
+	defer j.playingMutex.Unlock()
+	return j.currentSong, j.currentSongStarted
+}
+
 // addToHistory adds a song to the playback history
 func (j *JukeboxPlayer) addToHistory(song *subsonic.Song) {
 	if song == nil {
@@ -790,6 +802,12 @@ func (j *JukeboxPlayer) addToHistory(song *subsonic.Song) {
 	j.historyMutex.Lock()
 	defer j.historyMutex.Unlock()
 	
+	// Avoid duplicate entries at the beginning of history
+	if len(j.songHistory) > 0 && j.songHistory[0] != nil && 
+	   j.songHistory[0].ID == song.ID {
+		return
+	}
+	
 	// Add the song to the beginning of the history list
 	j.songHistory = append([]*subsonic.Song{song}, j.songHistory...)
 	
@@ -804,6 +822,11 @@ func (j *JukeboxPlayer) GetSongHistory() []*subsonic.Song {
 	j.historyMutex.RLock()
 	defer j.historyMutex.RUnlock()
 	
+	// Ensure we don't return a nil slice even if no history yet
+	if j.songHistory == nil {
+		return make([]*subsonic.Song, 0)
+	}
+	
 	// Create a copy of the history to return
 	history := make([]*subsonic.Song, len(j.songHistory))
 	copy(history, j.songHistory)

pkg/web/server.go

@@ -149,10 +149,11 @@ func (s *Server) handleStatic(w http.ResponseWriter, r *http.Request) {
 
 // StatusResponse contains the jukebox status
 type StatusResponse struct {
-	IsPlaying   bool             `json:"isPlaying"`
+	IsPlaying         bool             `json:"isPlaying"`
-	CurrentSong *subsonic.Song   `json:"currentSong"`
+	CurrentSong       *subsonic.Song   `json:"currentSong"`
-	SongHistory []*subsonic.Song `json:"songHistory"`
+	CurrentSongStarted string           `json:"currentSongStarted"`
-	UpdateTime  string           `json:"updateTime"`
+	SongHistory       []*subsonic.Song `json:"songHistory"`
+	UpdateTime        string           `json:"updateTime"`
 }
 
 // handleStatus returns the current jukebox status as JSON
@@ -165,15 +166,22 @@ func (s *Server) handleStatus(w http.ResponseWriter, r *http.Request) {
 
 // getStatus returns the current status
 func (s *Server) getStatus() StatusResponse {
-	currentSong := s.jukebox.GetCurrentSong()
+	currentSong, songStartTime := s.jukebox.GetCurrentSongInfo()
 	songHistory := s.jukebox.GetSongHistory()
 	isPlaying := s.bot.IsPlaying()
+	
+	// Format the start time if it's not zero
+	startTimeStr := ""
+	if !songStartTime.IsZero() {
+		startTimeStr = songStartTime.Format(time.RFC3339)
+	}
 
 	return StatusResponse{
-		IsPlaying:   isPlaying,
+		IsPlaying:         isPlaying,
-		CurrentSong: currentSong,
+		CurrentSong:       currentSong,
-		SongHistory: songHistory,
+		CurrentSongStarted: startTimeStr,
-		UpdateTime:  time.Now().Format(time.RFC3339),
+		SongHistory:       songHistory,
+		UpdateTime:        time.Now().Format(time.RFC3339),
 	}
 }
 
@@ -208,7 +216,8 @@ func (s *Server) handleEvents(w http.ResponseWriter, r *http.Request) {
 		notifyChan <- true
 	}()
 
-	// Send initial status update
+	// Send initial status update as soon as connection is established
+	// This ensures the client receives current data immediately without waiting for changes
 	status := s.getStatus()
 	data, err := json.Marshal(status)
 	if err == nil {
@@ -287,6 +296,7 @@ func (s *Server) broadcastUpdates() {
 	// Keep track of the previous status to only send updates when there are changes
 	var prevIsPlaying bool
 	var prevSongID string
+	var prevHistoryHash string
 
 	ticker := time.NewTicker(1 * time.Second)
 	defer ticker.Stop()
@@ -309,12 +319,23 @@ func (s *Server) broadcastUpdates() {
 				currentSongID = status.CurrentSong.ID
 			}
 			
-			hasChanged := (prevIsPlaying != status.IsPlaying) || (prevSongID != currentSongID)
+			// Create a simple hash of the history to detect changes
+			historyHash := ""
+			for _, song := range status.SongHistory {
+				if song != nil {
+					historyHash += song.ID + ":"
+				}
+			}
+			
+			hasChanged := (prevIsPlaying != status.IsPlaying) || 
+						 (prevSongID != currentSongID) || 
+						 (prevHistoryHash != historyHash)
 			
 			if hasChanged {
 				// Update previous state
 				prevIsPlaying = status.IsPlaying
 				prevSongID = currentSongID
+				prevHistoryHash = historyHash
 				
 				// Broadcast to all clients
 				data, err := json.Marshal(status)

pkg/web/static/index.html

@@ -8,6 +8,10 @@
     <meta http-equiv="refresh" content="900"> <!-- Refresh page every 15 minutes to prevent memory issues -->
 </head>
 <body>
+    <div id="loading-overlay">
+        <div class="spinner"></div>
+        <p>Loading jukebox data...</p>
+    </div>
     <div class="container">
         <header>
             <h1>Discord Jukebox</h1>
@@ -61,4 +65,4 @@
 
     <script src="/static/app.js"></script>
 </body>
-</html>
+</html>

pkg/web/static/styles.css

@@ -5,6 +5,42 @@
     box-sizing: border-box;
 }
 
+/* Loading overlay */
+#loading-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    transition: opacity 0.3s ease-out;
+}
+
+#loading-overlay.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.spinner {
+    width: 50px;
+    height: 50px;
+    border: 5px solid #f3f3f3;
+    border-top: 5px solid #5865F2;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 20px;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
 body {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
     line-height: 1.6;
@@ -115,6 +151,34 @@ h3 {
     margin-bottom: 8px;
 }
 
+.progress-container {
+    margin-top: 15px;
+    margin-bottom: 15px;
+}
+
+.progress-bar-wrapper {
+    height: 8px;
+    background-color: #eee;
+    border-radius: 4px;
+    overflow: hidden;
+    margin-bottom: 5px;
+}
+
+.progress-bar {
+    height: 100%;
+    background-color: #5865F2;
+    width: 0%;
+    transition: width 1s linear;
+    border-radius: 4px;
+}
+
+.progress-times {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.85em;
+    color: #666;
+}
+
 .additional-info {
     display: flex;
     flex-wrap: wrap;
@@ -188,7 +252,7 @@ h3 {
 }
 
 /* Not Playing Section */
-#not-playing {
+#not-playing, #connection-error {
     text-align: center;
     padding: 40px 20px;
     background-color: #f9f9f9;
@@ -197,6 +261,15 @@ h3 {
     flex-grow: 1;
 }
 
+/* Error message */
+.error-message {
+    border-left: 4px solid #f04747;
+    background-color: #fff;
+    padding: 15px;
+    border-radius: 4px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
 .message {
     max-width: 400px;
     margin: 0 auto;
@@ -250,6 +323,14 @@ footer {
         max-width: 150px;
     }
     
+    .progress-bar-wrapper {
+        height: 6px;
+    }
+    
+    .progress-times {
+        font-size: 0.8em;
+    }
+    
     .history-item {
         padding: 8px;
     }