Refactor Jellyfin plugin: integrate UI components and implement backend contract.

- Integrated "Recommend Film" button and Rating UI into Jellyfin web interface via MutationObserver.
- Implemented full library sync (metadata + user state) in MovieNightSyncService.
- Updated MovieNightBackendClient to support sync, recommendations, ratings, and viewed status.
- Added proxy endpoints to MovieNightController for frontend-backend communication.
- Refined sync logic to handle large libraries and ensured .NET 9.0 compatibility.

Co-authored-by: devitq <118541411+devitq@users.noreply.github.com>

plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/config.js

@@ -16,6 +16,11 @@ const movieNightConfigPage = {
           config.EnablePeriodicSync !== false;
         view.querySelector("#EnablePlaybackEvents").checked =
           config.EnablePlaybackEvents !== false;
+
+        const uiScriptUrl = ApiClient.getUrl("web/ConfigurationPage", {
+          name: "MovieNight.ui.js",
+        });
+        view.querySelector("#UIScriptUrl").innerText = uiScriptUrl;
       })
       .finally(() => {
         Dashboard.hideLoadingMsg();

plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/configPage.html

@@ -53,6 +53,12 @@
                             <span>Test connection</span>
                         </button>
                     </div>
+
+                    <div style="margin-top: 2em; padding: 1em; background: #333; border-radius: 4px;">
+                        <h3>UI Integration</h3>
+                        <p>To enable the "Recommend Film" button and Rating UI in the main Jellyfin interface, you must add the following script URL to your Jellyfin <strong>Custom JavaScript</strong> setting (Dashboard > General):</p>
+                        <code id="UIScriptUrl" style="display: block; padding: 0.5em; background: #000; word-break: break-all;"></code>
+                    </div>
                 </form>
             </div>
         </div>

plugins/jellyfin/Jellyfin.Plugin.MovieNight/Configuration/ui.js

@@ -0,0 +1,96 @@
+(function () {
+    const PLUGIN_ID = "42c72919-d6ff-4f62-bb8c-0fac39efafdb";
+
+    function injectUI() {
+        // 1. Inject "Recommend me a film" button in Library views
+        const headerButtons = document.querySelector('.headerViewButtons');
+        if (headerButtons && !document.querySelector('.btnMovieNightRecommend')) {
+            const btn = document.createElement('button');
+            btn.className = 'emby-button raised btnMovieNightRecommend';
+            btn.innerHTML = '<span>Recommend Film</span>';
+            btn.style.marginLeft = '1em';
+            btn.onclick = showRecommendation;
+            headerButtons.appendChild(btn);
+        }
+
+        // 2. Inject Rating UI in Item Details
+        const detailButtons = document.querySelector('.itemDetailButtons');
+        if (detailButtons && !document.querySelector('.movieNightRatingContainer')) {
+            const itemId = getItemIdFromUrl();
+            if (itemId) {
+                const container = document.createElement('div');
+                container.className = 'movieNightRatingContainer';
+                container.style.display = 'inline-flex';
+                container.style.alignItems = 'center';
+                container.style.marginLeft = '1em';
+
+                const label = document.createElement('span');
+                label.innerText = 'MovieNight: ';
+                container.appendChild(label);
+
+                const select = document.createElement('select');
+                select.className = 'emby-select';
+                for (let i = 0; i <= 10; i++) {
+                    const opt = document.createElement('option');
+                    opt.value = i;
+                    opt.innerText = i === 0 ? 'Rate...' : i;
+                    select.appendChild(opt);
+                }
+                select.onchange = (e) => submitRating(itemId, e.target.value);
+                container.appendChild(select);
+
+                detailButtons.appendChild(container);
+            }
+        }
+    }
+
+    function getItemIdFromUrl() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get('id');
+    }
+
+    async function showRecommendation() {
+        const userId = ApiClient.getCurrentUserId();
+        try {
+            const response = await ApiClient.getJSON(ApiClient.getUrl(`MovieNight/Users/${userId}/Recommendations`));
+            const recommendations = typeof response === 'string' ? JSON.parse(response) : response;
+
+            if (recommendations && recommendations.length > 0) {
+                const rec = recommendations[0];
+                const film = rec.film || rec;
+                Dashboard.alert({
+                    title: 'MovieNight Recommendation',
+                    text: `How about watching: ${film.title}?\n\nReason: ${rec.reasons?.join(', ') || 'Based on your preferences'}`
+                });
+            } else {
+                Dashboard.alert('No recommendations found at the moment.');
+            }
+        } catch (err) {
+            console.error('Failed to get recommendations', err);
+            Dashboard.alert('Failed to get recommendations from MovieNight.');
+        }
+    }
+
+    async function submitRating(itemId, score) {
+        if (score === "0") return;
+        const userId = ApiClient.getCurrentUserId();
+        try {
+            await ApiClient.ajax({
+                type: 'POST',
+                url: ApiClient.getUrl(`MovieNight/Users/${userId}/Ratings/Films/${itemId}`),
+                data: JSON.stringify({ score: parseInt(score), note: 'From Jellyfin UI' }),
+                contentType: 'application/json'
+            });
+            Dashboard.alert('Rating submitted!');
+        } catch (err) {
+            console.error('Failed to submit rating', err);
+            Dashboard.alert('Failed to submit rating to MovieNight.');
+        }
+    }
+
+    const observer = new MutationObserver(injectUI);
+    observer.observe(document.body, { childList: true, subtree: true });
+
+    // Initial call
+    injectUI();
+})();