Refactor video progress tracking UI and logic

Improve progress UI, handle token expiration, and fix restore logic.

Co-authored-by: mathieumoran1 <[email protected]>

public/player.html

@@ -60,6 +60,44 @@
       text-overflow: ellipsis;
       white-space: nowrap;
     }
+
+    /* Progress indicator: icon-first, minimal text */
+    .progress-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: .4rem;
+      min-height: 1rem;
+    }
+    .progress-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 1rem;
+      height: 1rem;
+      color: rgba(0,0,0,.65);
+      flex: 0 0 1rem;
+    }
+    .progress-icon--spinner {
+      border: 2px solid rgba(0,0,0,.22);
+      border-top-color: rgba(0,0,0,.65);
+      border-radius: 50%;
+      animation: progressSpin .8s linear infinite;
+    }
+    .progress-icon svg {
+      width: 1rem;
+      height: 1rem;
+      display: block;
+    }
+    .progress-text {
+      opacity: .8;
+      white-space: nowrap;
+    }
+    .progress-text.is-hidden {
+      display: none;
+    }
+    @keyframes progressSpin {
+      to { transform: rotate(360deg); }
+    }
   </style>
 </head>
 <body class="bg-light">
@@ -118,7 +156,10 @@
 
     <div class="mt-2 d-flex flex-wrap gap-2 align-items-center">
       <span class="badge bg-secondary">Progress</span>
-      <span id="progress-status" class="text-muted small">—</span>
+      <span id="progress-status" class="text-muted small progress-indicator">
+        <span id="progress-status-icon" class="progress-icon" aria-hidden="true"></span>
+        <span id="progress-status-text" class="progress-text">—</span>
+      </span>
     </div>
   </div>