0.11.0-1 queue fix

frontend/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ripster-frontend",
-  "version": "0.11.0",
+  "version": "0.11.0-1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "ripster-frontend",
-      "version": "0.11.0",
+      "version": "0.11.0-1",
       "dependencies": {
         "primeicons": "^7.0.0",
         "primereact": "^10.9.2",

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ripster-frontend",
-  "version": "0.11.0",
+  "version": "0.11.0-1",
   "private": true,
   "type": "module",
   "scripts": {

frontend/src/components/DynamicSettingsForm.jsx

@@ -92,7 +92,18 @@ function DriveDevicesEditor({ value, onChange, settingKey }) {
   const parseDevices = (val) => {
     try {
       const parsed = JSON.parse(val || '[]');
-      return Array.isArray(parsed) ? parsed.map(String) : [];
+      if (!Array.isArray(parsed)) return [];
+      return parsed.map((e) => {
+        if (typeof e === 'string') {
+          const p = e.trim();
+          const m = p.match(/sr(\d+)$/);
+          return { path: p, makemkvIndex: m ? Number(m[1]) : 0 };
+        }
+        if (e && typeof e === 'object') {
+          return { path: String(e.path || '').trim(), makemkvIndex: Number.isFinite(Number(e.makemkvIndex)) ? Number(e.makemkvIndex) : 0 };
+        }
+        return { path: '', makemkvIndex: 0 };
+      });
     } catch (_e) {
       return [];
     }
@@ -109,18 +120,35 @@ function DriveDevicesEditor({ value, onChange, settingKey }) {
       {devices.length === 0 && (
         <p className="drive-devices-empty">Keine expliziten Laufwerke konfiguriert.</p>
       )}
-      {devices.map((path, idx) => (
+      {devices.map((dev, idx) => (
         <div key={idx} className="drive-device-row">
           <InputText
-            value={path}
+            value={dev.path}
             placeholder="/dev/sr0"
             onChange={(e) => {
               const next = [...devices];
-              next[idx] = e.target.value;
+              const p = e.target.value;
+              const m = p.match(/sr(\d+)$/);
+              next[idx] = { ...next[idx], path: p, makemkvIndex: m ? Number(m[1]) : next[idx].makemkvIndex };
               updateDevices(next);
             }}
             className="drive-device-input"
           />
+          <InputNumber
+            value={dev.makemkvIndex}
+            min={0}
+            max={9}
+            showButtons={false}
+            placeholder="Idx"
+            title="MakeMKV disc index (disc:N)"
+            style={{ width: '4rem' }}
+            inputStyle={{ textAlign: 'center' }}
+            onChange={(e) => {
+              const next = [...devices];
+              next[idx] = { ...next[idx], makemkvIndex: e.value ?? 0 };
+              updateDevices(next);
+            }}
+          />
           <Button
             icon="pi pi-trash"
             severity="danger"
@@ -139,7 +167,10 @@ function DriveDevicesEditor({ value, onChange, settingKey }) {
         severity="secondary"
         text
         size="small"
-        onClick={() => updateDevices([...devices, ''])}
+        onClick={() => {
+          const nextIdx = devices.length;
+          updateDevices([...devices, { path: '', makemkvIndex: nextIdx }]);
+        }}
         type="button"
       />
     </div>

frontend/src/pages/DashboardPage.jsx

@@ -2266,18 +2266,26 @@ export default function DashboardPage({
                 : driveState === 'ERROR' || driveState === 'CANCELLED' ? 'danger'
                 : ['CD_RIPPING', 'CD_ENCODING'].includes(driveState) ? 'warning'
                 : 'info';
+              const driveProgress = Number(drive?.progress ?? 0);
+              const driveStatusText = drive?.statusText || null;
+              const isActiveRip = ['CD_RIPPING', 'CD_ENCODING', 'CD_ANALYZING'].includes(driveState);
               return (
                 <div key={drivePath} className="cd-drive-item">
                   <div className="cd-drive-header">
-                    <strong>{driveDevice.model || 'CD-Laufwerk'}</strong>
                     <code className="cd-drive-path">{drivePath}</code>
                     <Tag value={driveState} severity={cdStateSeverity} />
                   </div>
-                  {driveDevice.discLabel && (
+                  {(driveDevice.discLabel || driveDevice.model) && (
                     <div className="cd-drive-disc-label">
-                      <strong>Disc:</strong> {driveDevice.discLabel}
+                      {driveDevice.discLabel || driveDevice.model}
                     </div>
                   )}
+                  {isActiveRip && (
+                    <ProgressBar value={driveProgress} style={{ height: '6px', margin: '0.2rem 0' }} showValue={false} />
+                  )}
+                  {isActiveRip && driveStatusText && (
+                    <div className="cd-drive-status-text">{driveStatusText}</div>
+                  )}
                   <div className="cd-drive-actions">
                     {driveState === 'DISC_DETECTED' && (
                       <Button

frontend/src/styles/app.css

@@ -1789,6 +1789,14 @@ body {
   flex-wrap: wrap;
 }
 
+.cd-drive-status-text {
+  font-size: 0.75rem;
+  color: var(--rip-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .notification-toggle-box {
   display: flex;
   flex-direction: column;