0.10.2-23 History

frontend/package-lock.json

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

frontend/package.json

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

frontend/src/components/JobDetailDialog.jsx

@@ -598,7 +598,7 @@ export default function JobDetailDialog({
             {job.poster_url && job.poster_url !== 'N/A' ? (
               <img src={job.poster_url} alt={job.title || 'Poster'} className="poster-large" />
             ) : (
-              <div className="poster-large poster-fallback">{isCd || isAudiobook ? 'Kein Cover' : 'Kein Poster'}</div>
+              <div className="poster-large-audio poster-fallback">{isCd || isAudiobook ? 'Kein Cover' : 'Kein Poster'}</div>
             )}
 
             <div className="job-film-info-grid">
@@ -866,25 +866,23 @@ export default function JobDetailDialog({
             </div>
           </section>
 
-          {!isCd && !isAudiobook && Array.isArray(job.encodePlan?.titles) && job.encodePlan.titles.length > 0 ? (
+          {!isCd && !isAudiobook && job.encodePlan ? (
             <section className="job-meta-block job-meta-block-full">
-              <h4>Titel</h4>
-              <div className="job-titles-list">
-                {job.encodePlan.titles.map((t) => {
-                  const isSelected = t.id === job.encodePlan.encodeInputTitleId || t.selectedForEncode;
-                  const sizeMb = t.sizeBytes > 0 ? `${(t.sizeBytes / 1024 / 1024).toFixed(0)} MB` : null;
-                  return (
-                    <div key={t.id} className={`job-title-row${isSelected ? ' job-title-row-selected' : ''}`}>
-                      <span className="job-title-id">#{t.id}</span>
-                      <span className="job-title-name">{t.fileName || '-'}</span>
-                      <span className="job-title-duration">{t.durationMinutes != null ? `${t.durationMinutes} Min.` : '-'}</span>
-                      {sizeMb ? <span className="job-title-size">{sizeMb}</span> : null}
-                      {t.playlistFile ? <span className="job-title-playlist">{t.playlistFile}</span> : null}
-                      {isSelected ? <span className="job-title-selected-badge">gewählt</span> : null}
-                    </div>
-                  );
-                })}
-              </div>
+              <h4>Titel &amp; Spurauswahl</h4>
+              <MediaInfoReviewPanel
+                review={job.encodePlan}
+                commandOutputPath={job.output_path || null}
+                selectedEncodeTitleId={reviewSelectedEncodeTitleId}
+                trackSelectionByTitle={reviewTrackSelectionByTitle}
+                availableScripts={configuredSelection.scriptCatalog}
+                availableChains={configuredSelection.chainCatalog}
+                preEncodeItems={reviewPreEncodeItems}
+                postEncodeItems={reviewPostEncodeItems}
+                userPresets={reviewUserPresets}
+                selectedUserPresetId={Number.isFinite(encodePlanUserPresetId) && encodePlanUserPresetId > 0
+                  ? Math.trunc(encodePlanUserPresetId)
+                  : null}
+              />
             </section>
           ) : null}
 

frontend/src/styles/app.css

@@ -2496,7 +2496,6 @@ body {
   display: grid;
   grid-template-columns: 11rem 1fr;
   gap: 1rem;
-  margin-bottom: 1rem;
 }
 
 .job-detail-meta-wrap {
@@ -2506,7 +2505,6 @@ body {
 
 .job-film-info-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 0.55rem;
 }
 
@@ -2816,6 +2814,14 @@ body {
   background: #f6ebd6;
 }
 
+.poster-large-audio {
+  width: 100%;
+  object-fit: cover;
+  border-radius: 0.5rem;
+  border: 1px solid #cba266;
+  background: #f6ebd6;
+}
+
 .poster-fallback {
   display: flex;
   align-items: center;