Updated readme

fixed rending error on pod management page

Jellyfin.Plugin.Jellypod/Configuration/configPage.html

@@ -4,42 +4,64 @@
     <meta charset="utf-8">
     <title>Jellypod</title>
     <style>
-        .podcast-item {
+        .podcast-table {
-            display: flex;
+            width: 100%;
-            align-items: center;
+            border-collapse: collapse;
+        }
+        .podcast-table th {
+            text-align: left;
+            padding: 0.75em;
+            border-bottom: 2px solid rgba(255,255,255,0.2);
+            font-weight: 600;
+        }
+        .podcast-table td {
             padding: 0.75em;
             border-bottom: 1px solid rgba(255,255,255,0.1);
+            vertical-align: middle;
         }
-        .podcast-item:last-child {
+        .podcast-table tr:last-child td {
             border-bottom: none;
         }
-        .podcast-image {
+        .podcast-table tr:hover {
-            width: 50px;
+            background: rgba(255,255,255,0.05);
-            height: 50px;
-            max-width: 50px;
-            max-height: 50px;
-            min-width: 50px;
-            min-height: 50px;
-            object-fit: cover;
-            border-radius: 4px;
-            margin-right: 1em;
-            background: #333;
-            flex-shrink: 0;
         }
-        .podcast-info {
+        .podcast-image {
-            flex: 1;
+            width: 50px !important;
+            height: 50px !important;
+            max-width: 50px !important;
+            max-height: 50px !important;
+            min-width: 50px !important;
+            min-height: 50px !important;
+            object-fit: cover !important;
+            border-radius: 4px !important;
+            background: #333 !important;
+            display: block !important;
+        }
+        .col-image img {
+            width: 50px !important;
+            height: 50px !important;
+            max-width: 50px !important;
+            max-height: 50px !important;
         }
         .podcast-title {
             font-weight: bold;
-            margin-bottom: 0.25em;
         }
         .podcast-meta {
             font-size: 0.85em;
             opacity: 0.7;
+            margin-top: 0.25em;
         }
         .podcast-actions {
             display: flex;
             gap: 0.5em;
+            justify-content: flex-end;
+        }
+        .col-image {
+            width: 50px;
+        }
+        .col-actions {
+            width: 100px;
+            text-align: right;
         }
         .add-podcast-form {
             display: flex;
@@ -224,7 +246,7 @@
                     return;
                 }
 
-                var html = podcasts.map(function(podcast) {
+                var rows = podcasts.map(function(podcast) {
                     // Handle both PascalCase (C#) and camelCase (JSON) property names
                     var episodeCount = (podcast.Episodes || podcast.episodes || []).length;
                     var lastUpdated = podcast.LastUpdated || podcast.lastUpdated;
@@ -235,14 +257,15 @@
 
                     console.log('Jellypod: Rendering podcast:', podcastTitle, 'ID:', podcastId);
 
-                    return '<div class="podcast-item" data-id="' + podcastId + '">' +
+                    return '<tr data-id="' + podcastId + '">' +
-                        '<img class="podcast-image" src="' + podcastImage + '" alt="" onerror="this.style.display=\'none\'">' +
+                        '<td class="col-image">' +
-                        '<div class="podcast-info">' +
+                            '<img class="podcast-image" src="' + podcastImage + '" alt="" style="width:50px;height:50px;max-width:50px;max-height:50px;object-fit:cover;" onerror="this.style.display=\'none\'">' +
+                        '</td>' +
+                        '<td>' +
                             '<div class="podcast-title">' + escapeHtml(podcastTitle) + '</div>' +
-                            '<div class="podcast-meta">' +
+                            '<div class="podcast-meta">' + episodeCount + ' episodes | Updated: ' + lastUpdatedStr + '</div>' +
-                                episodeCount + ' episodes | Updated: ' + lastUpdatedStr +
+                        '</td>' +
-                            '</div>' +
+                        '<td class="col-actions">' +
-                        '</div>' +
                             '<div class="podcast-actions">' +
                                 '<button is="emby-button" type="button" class="emby-button" onclick="refreshPodcast(\'' + podcastId + '\')" title="Refresh Feed">' +
                                     '<span class="material-icons">refresh</span>' +
@@ -251,9 +274,19 @@
                                     '<span class="material-icons">delete</span>' +
                                 '</button>' +
                             '</div>' +
-                    '</div>';
+                        '</td>' +
+                    '</tr>';
                 }).join('');
 
+                var html = '<table class="podcast-table">' +
+                    '<thead><tr>' +
+                        '<th class="col-image"></th>' +
+                        '<th>Podcast</th>' +
+                        '<th class="col-actions">Actions</th>' +
+                    '</tr></thead>' +
+                    '<tbody>' + rows + '</tbody>' +
+                '</table>';
+
                 container.innerHTML = html;
                 console.log('Jellypod: Rendered HTML length:', html.length);
             }

README.md

@@ -8,6 +8,14 @@ A Jellyfin plugin that adds podcast support to your media server.
 - Automatic episode downloads
 - Integration with Jellyfin's library system
 
+## Screenshots
+
+### Podcast Library
+![Podcast Library](images/library.png)
+
+### Plugin Settings
+![Plugin Settings](images/settings.png)
+
 ## Installation
 
 ### Manual Installation