Refactor AudioPlayer component: streamline state management, add lyric display, and improve stream handling

src/assets/styles/player.css

@@ -20,7 +20,7 @@ body {
 .music-container {
   width: 800px;          /* fixed desktop width */
   max-width: 90vw;       /* prevent overflow on smaller screens */
-  height: 290px;
+  height: auto !important;
   margin: 0 auto 120px auto; /* increased bottom margin */
   overflow-x: visible;    /* allow horizontal overflow if needed */
   overflow-y: hidden;
@@ -57,7 +57,7 @@ body {
   flex: 1 1 70%;           /* Take remaining ~70% */
   max-width: 70%;
   width: auto;
-  height: 100%;            /* Match container height */
+  height: auto !important;            /* Match container height */
   padding: 1em;
   text-align: center;
   display: flex;
@@ -174,6 +174,9 @@ body {
   width: 3em;
   height: 3em;
   margin: 0 1em;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-bottom: 5px;
 }
 
 .music-control__backward,
@@ -219,4 +222,77 @@ body {
     min-width: 0 !important;
     flex-shrink: 0 !important;
   }
-}
+}
+.progress-bar-container {
+  position: relative;
+  margin: 0.5rem 0;
+  height: 0.5rem; /* Ensure visible height */
+  background-color: #e5e7eb; /* fallback light gray */
+  border-radius: 9999px;
+  overflow: hidden;
+}
+
+.progress-bar-fill {
+  height: 100%;
+  transition: width 0.2s linear;
+  border-radius: 9999px;
+}
+
+.lrc-text {
+  max-height: 125px;           /* limit block height */
+  max-width: 100%;
+  overflow-y: auto;            /* scroll if lyrics exceed height */
+  margin-top: 1rem;
+  padding: 0 1rem;
+  text-align: center;
+  font-family: "Mukta", sans-serif;
+  font-size: 0.85rem;
+  line-height: 1.4;
+  color: #ccc;                 /* subtle default color */
+  user-select: none;           /* prevent accidental text selection */
+  background-color: rgba(0, 0, 0, 0.05); /* very light highlight behind text */
+  border-radius: 0.375rem;     /* rounded corners */
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.8);
+  box-sizing: border-box;
+  scrollbar-width: thin;       /* Firefox thinner scrollbar */
+  scrollbar-color: #999 transparent;
+}
+
+.lrc-text::-webkit-scrollbar {
+  width: 6px;
+}
+
+.lrc-text::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.lrc-text::-webkit-scrollbar-thumb {
+  background-color: #999;
+  border-radius: 3px;
+}
+
+/* Each lyric line */
+.lrc-line {
+  margin: 0.1rem 0;
+  white-space: normal;
+  word-wrap: break-word;
+  line-height: 1.4;
+  transition: color 0.3s ease, font-weight 0.3s ease;
+  color: inherit;
+  cursor: default;
+  font-size: 0.85rem;
+}
+
+/* Highlight the active lyric line */
+.lrc-line.active {
+  color: #ffffff;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-shadow: 0 0 4px rgba(212, 175, 55, 0.6);
+}
+
+
+.lrc-line:hover {
+  color: #4fa2ff;
+  text-decoration: dotted underline;
+}