Update scripts/ui.js

scripts/ui.js

@@ -1,45 +1,46 @@
-// scripts/ui.js
+// in scripts/ui.js
 
-// --- Sample Data for Listings ---
-const streamingData = [{title:"The Grand Adventure",type:"Movie",genre:"Adventure, Comedy",platform:"Netflix",rating:"4.8",year:"2022",description:"A hilarious journey across continents with unexpected twists.",broadcastTime:"2023-12-10T19:30:00"},{title:"Dark Secrets",type:"TV Series",genre:"Drama, Thriller",platform:"HBO Max",rating:"4.7",year:"2021",description:"A small town's dark past resurfaces with shocking revelations.",broadcastTime:"2023-12-12T21:00:00"},{title:"Space Explorers",type:"Documentary",genre:"Science, Space",platform:"Disney+",rating:"4.9",year:"2023",description:"The latest discoveries from the frontiers of space exploration.",broadcastTime:"2023-12-14T18:00:00"}];
-const rssFeedData = [{title:"New Episode: The Grand Adventure",source:"Netflix",time:"5 hours ago",excerpt:"The comedy adventure movie is now the most-watched title on Netflix this week."}, {title:"Breaking: New streaming partnership",source:"Streaming News",time:"1 day ago",excerpt:"Major platforms announce new content sharing agreement."}];
-
-const getElement = (id) => document.getElementById(id);
-
-function showNotification(title, message) {
-    const container = getElement('notification');
+async function loadRecommendations() {
+    const container = document.getElementById('recommendations-container');
     if (!container) return;
-    container.className = 'notification show';
-    container.innerHTML = `<div class="flex items-center"><i class="fas fa-bell text-yellow-300 mr-3"></i><div><p class="font-semibold">${title}</p><p class="text-sm">${message}</p></div></div>`;
-    setTimeout(() => { container.classList.remove('show'); }, 3000);
-}
 
-function loadRSSFeed() {
-    const container = getElement('rss-feed');
-    if (!container) return;
-    container.innerHTML = '';
-    rssFeedData.forEach(item => {
-        const feedItem = document.createElement('div');
-        feedItem.className = 'rss-item bg-gray-50 p-3 rounded-lg';
-        feedItem.innerHTML = `<h4 class="font-medium text-sm mb-1">${item.title}</h4><div class="flex items-center text-xs text-gray-500 mb-2"><span>${item.source}</span><span class="mx-2">•</span><span>${item.time}</span></div><p class="text-xs text-gray-700">${item.excerpt}</p>`;
-        container.appendChild(feedItem);
-    });
-}
+    try {
+        const response = await fetch('https://YOUR-WORKER-URL/recommendations');
+        const listings = await response.json();
 
-function loadRecommendations() {
-    const container = getElement('recommendations-container');
-    if (!container) return;
-    container.innerHTML = '';
-    streamingData.forEach(item => {
-        const card = document.createElement('div');
-        card.className = 'stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 fade-in p-4';
-        card.innerHTML = `<div class="mb-3"><div class="flex justify-between items-start"><h3 class="font-bold text-base">${item.title}</h3><span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full flex items-center"><i class="fas fa-star text-yellow-500 mr-1 text-xs"></i> ${item.rating}</span></div><p class="text-gray-600 text-xs mb-1">${item.type} • ${item.genre} • ${item.year}</p><div class="text-xs text-indigo-600 mb-2">${item.platform}</div></div><p class="text-gray-700 text-sm mb-4">${item.description}</p><div class="flex justify-between items-center"><button class="save-btn text-indigo-600 hover:text-indigo-800 text-xs font-medium"><i class="far fa-bookmark mr-1"></i> Save</button><a href="#" target="_blank" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition"><i class="fas fa-play mr-1"></i> Watch</a></div>`;
-        card.querySelector('.save-btn').addEventListener('click', () => showNotification('Reminder Set!', `We'll notify you when "${item.title}" is about to broadcast.`));
-        container.appendChild(card);
-    });
+        container.innerHTML = ''; // Clear previous listings
+        listings.forEach(item => {
+            const card = document.createElement('div');
+            // Add a subtle border if the item is pinned
+            const pinnedClass = item.is_pinned ? 'border-2 border-indigo-400' : '';
+            
+            card.className = `stream-card bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300 p-4 relative ${pinnedClass}`;
+            
+            // The card's content, now including the source_name
+            card.innerHTML = `
+                ${item.is_pinned ? '<div class="absolute top-2 right-2 text-xs bg-indigo-500 text-white px-2 py-1 rounded-full animate-pulse"><i class="fas fa-thumbtack mr-1"></i> Pinned</div>' : ''}
+                <div class="mb-3">
+                    <h3 class="font-bold text-base">${item.title}</h3>
+                    <div class="text-xs text-gray-500 mb-2 mt-1">
+                        From: <span class="font-semibold text-indigo-600">${item.source_name}</span>
+                    </div>
+                </div>
+                <p class="text-gray-700 text-sm mb-4">${item.description}</p>
+                <div class="flex justify-between items-center">
+                    <span class="text-xs font-bold uppercase text-gray-400">${item.category.replace('_', ' ')}</span>
+                    <a href="${item.url}" target="_blank" rel="noopener noreferrer" class="bg-indigo-600 hover:bg-indigo-700 text-white px-3 py-1 rounded-full text-xs font-medium transition">
+                        Visit Site
+                    </a>
+                </div>
+            `;
+            container.appendChild(card);
+        });
+    } catch (error) {
+        container.innerHTML = `<p class="text-center text-red-500">Could not load recommendations.</p>`;
+    }
 }
 
 export function initUI() {
-    loadRSSFeed();
+    // This will run our function on page load
     loadRecommendations();
 }