From d5f8c1a26ccc9b478bddc99326eb314d758b4a96 Mon Sep 17 00:00:00 2001
From: mboehmlaender <mboehmlaender@gmx.net>
Date: Tue, 17 Mar 2026 14:47:57 +0000
Subject: [PATCH] 0.10.2-23 Fix

---
 frontend/src/components/JobDetailDialog.jsx   | 80 ++++++++++++-------
 .../src/components/PipelineStatusCard.jsx     |  4 +-
 frontend/src/styles/app.css                   |  1 +
 3 files changed, 52 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/JobDetailDialog.jsx b/frontend/src/components/JobDetailDialog.jsx
index b22e5c1..e9b2380 100644
--- a/frontend/src/components/JobDetailDialog.jsx
+++ b/frontend/src/components/JobDetailDialog.jsx
@@ -596,9 +596,9 @@ export default function JobDetailDialog({
 
           <div className="job-head-row">
             {job.poster_url && job.poster_url !== 'N/A' ? (
-              <img src={job.poster_url} alt={job.title || 'Poster'} className="poster-large" />
+              <img src={job.poster_url} alt={job.title || 'Poster'} className={isCd || isAudiobook ? 'poster-large-audio' : 'poster-large'} />
             ) : (
-              <div className="poster-large-audio poster-fallback">{isCd || isAudiobook ? 'Kein Cover' : 'Kein Poster'}</div>
+              <div className={`${isCd || isAudiobook ? 'poster-large-audio' : 'poster-large'} poster-fallback`}>{isCd || isAudiobook ? 'Kein Cover' : 'Kein Poster'}</div>
             )}
 
             <div className="job-film-info-grid">
@@ -814,42 +814,60 @@ export default function JobDetailDialog({
             </div>
           </section>
 
-          {!isCd && (hasConfiguredSelection || encodePlanUserPreset || job.encodePlan?.minLengthMinutes != null || job.encodePlan?.playlistRecommendation || job.handbrakeInfo?.preEncodeScripts?.configured > 0 || job.handbrakeInfo?.postEncodeScripts?.configured > 0) ? (
+          {!isCd && !isAudiobook && (hasConfiguredSelection || encodePlanUserPreset || job.encodePlan?.minLengthMinutes != null || Array.isArray(job.encodePlan?.titles)) ? (
             <section className="job-meta-block job-meta-block-full">
               <h4>Encode-Konfiguration</h4>
+              {/* Zeile 1: Preset + Mindestlaufzeit */}
               <div className="job-meta-grid job-meta-grid-compact">
-                {job.encodePlan?.minLengthMinutes != null && !isAudiobook ? (
+                {encodePlanUserPreset ? (
+                  <div>
+                    <strong>Preset:</strong> {encodePlanUserPreset.name || '-'}
+                  </div>
+                ) : null}
+                {job.encodePlan?.minLengthMinutes != null ? (
                   <div>
                     <strong>Mindestlaufzeit:</strong> {job.encodePlan.minLengthMinutes} Min.
                   </div>
                 ) : null}
-                {job.encodePlan?.playlistRecommendation && !isAudiobook ? (
-                  <div>
-                    <strong>Playlist-Auswahl:</strong>{' '}
-                    {job.encodePlan.playlistRecommendation.playlistFile || '-'}
-                    {job.encodePlan.playlistRecommendation.reason ? ` — ${job.encodePlan.playlistRecommendation.reason}` : ''}
-                  </div>
-                ) : null}
-                {(hasConfiguredSelection || encodePlanUserPreset) && !isAudiobook ? (
-                  <>
-                    <div>
-                      <strong>Pre-Skripte:</strong> {configuredSelection.preScripts.length > 0 ? configuredSelection.preScripts.join(', ') : (configuredSelection.preChains.length > 0 ? configuredSelection.preChains.join(', ') : '-')}
-                    </div>
-                    <div>
-                      <strong>Post-Skripte:</strong> {configuredSelection.postScripts.length > 0 ? configuredSelection.postScripts.join(', ') : (configuredSelection.postChains.length > 0 ? configuredSelection.postChains.join(', ') : '-')}
-                    </div>
-                    {encodePlanUserPreset ? (
-                      <div className="job-meta-col-span-2">
-                        <strong>Preset:</strong> {encodePlanUserPreset.name || '-'}{encodePlanUserPreset.handbrakePreset ? ` · ${encodePlanUserPreset.handbrakePreset}` : ''}{encodePlanUserPreset.extraArgs ? ` · ${encodePlanUserPreset.extraArgs}` : ''}
-                      </div>
-                    ) : null}
-                  </>
-                ) : null}
               </div>
-              {!isAudiobook && (job.handbrakeInfo?.preEncodeScripts?.configured > 0 || job.handbrakeInfo?.postEncodeScripts?.configured > 0) ? (
-                <div className="script-results-grid">
-                  <ScriptSummarySection title="Pre-Encode" summary={job.handbrakeInfo?.preEncodeScripts} />
-                  <ScriptSummarySection title="Post-Encode" summary={job.handbrakeInfo?.postEncodeScripts} />
+              {/* Zeile 2: Skripte */}
+              {hasConfiguredSelection ? (
+                <div className="job-meta-grid job-meta-grid-compact">
+                  <div>
+                    <strong>Pre-Skripte:</strong>{' '}
+                    {configuredSelection.preScripts.length > 0
+                      ? configuredSelection.preScripts.join(', ')
+                      : configuredSelection.preChains.length > 0
+                        ? configuredSelection.preChains.join(', ')
+                        : '-'}
+                  </div>
+                  <div>
+                    <strong>Post-Skripte:</strong>{' '}
+                    {configuredSelection.postScripts.length > 0
+                      ? configuredSelection.postScripts.join(', ')
+                      : configuredSelection.postChains.length > 0
+                        ? configuredSelection.postChains.join(', ')
+                        : '-'}
+                  </div>
+                </div>
+              ) : null}
+              {/* Titel-Liste */}
+              {Array.isArray(job.encodePlan?.titles) && job.encodePlan.titles.length > 0 ? (
+                <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>
               ) : null}
             </section>
@@ -868,7 +886,7 @@ export default function JobDetailDialog({
 
           {!isCd && !isAudiobook && job.encodePlan ? (
             <section className="job-meta-block job-meta-block-full">
-              <h4>Titel &amp; Spurauswahl</h4>
+              <h4>Spurauswahl</h4>
               <MediaInfoReviewPanel
                 review={job.encodePlan}
                 commandOutputPath={job.output_path || null}
diff --git a/frontend/src/components/PipelineStatusCard.jsx b/frontend/src/components/PipelineStatusCard.jsx
index 385b130..1d1e213 100644
--- a/frontend/src/components/PipelineStatusCard.jsx
+++ b/frontend/src/components/PipelineStatusCard.jsx
@@ -945,10 +945,10 @@ export default function PipelineStatusCard({
             <img
               src={selectedMetadata.poster}
               alt={selectedMetadata.title || 'Poster'}
-              className="poster-large"
+              className={jobMediaProfile === 'cd' || jobMediaProfile === 'audiobook' ? 'poster-large-audio' : 'poster-large'}
             />
           ) : (
-            <div className="poster-large poster-fallback">Kein Poster</div>
+            <div className={`${jobMediaProfile === 'cd' || jobMediaProfile === 'audiobook' ? 'poster-large-audio' : 'poster-large'} poster-fallback`}>Kein {jobMediaProfile === 'cd' || jobMediaProfile === 'audiobook' ? 'Cover' : 'Poster'}</div>
           )}
           <div className="device-meta">
             <div>
diff --git a/frontend/src/styles/app.css b/frontend/src/styles/app.css
index 675d2f0..8920ac1 100644
--- a/frontend/src/styles/app.css
+++ b/frontend/src/styles/app.css
@@ -2816,6 +2816,7 @@ body {
 
 .poster-large-audio {
   width: 100%;
+  aspect-ratio: 1;
   object-fit: cover;
   border-radius: 0.5rem;
   border: 1px solid #cba266;