static/links/main.js

@@ -7,12 +7,6 @@ const PER_PAGE = 8;
 let currentPage = 1;
 let linksData = [];
 
-function extractReelId(url) {
-  // Example: https://www.instagram.com/reel/ABC123xyz/
-  const match = url.match(/instagram\.com\/reel\/([a-zA-Z0-9_-]+)/);
-  return match ? match[1] : null;
-}
-
 function loadLinks() {
   const cacheKey = `links_cache_page_${currentPage}_per_${PER_PAGE}`;
   const cached = localStorage.getItem(cacheKey);
@@ -99,34 +93,16 @@ function createLinkElement(link, isWatched) {
   const wrapper = document.createElement('div');
   wrapper.className = 'mb-3';
 
-  const reelId = extractReelId(link.url);
-  if (!reelId) {
-    wrapper.innerText = 'Invalid Instagram Reel URL';
-    return wrapper;
-  }
-
-  // Clean iframe embed
-  const iframeWrapper = document.createElement('div');
-  iframeWrapper.style.width = '100%';
-  iframeWrapper.style.height = '400px';
-  iframeWrapper.style.overflow = 'hidden';
-  iframeWrapper.style.borderRadius = '10px';
-
-  const iframe = document.createElement('iframe');
-  iframe.src = `https://www.instagram.com/reel/${reelId}/embed`;
-  iframe.width = '100%';
-  iframe.height = '600'; // taller to allow for cropping
-  iframe.style.border = 'none';
-  iframe.allowFullscreen = true;
-  iframe.loading = 'lazy';
-  iframe.style.marginTop = '-100px'; // shift to crop comments/likes
-
-  iframeWrapper.appendChild(iframe);
-  wrapper.appendChild(iframeWrapper);
-
-  const btnGroup = document.createElement('div');
-  btnGroup.className = 'mt-2 d-flex gap-2';
+  // Instagram embed blockquote
+  const blockquote = document.createElement('blockquote');
+  blockquote.className = 'instagram-media';
+  blockquote.setAttribute('data-instgrm-permalink', link.url);
+  blockquote.style.background = '#FFF';
 
+  const p = document.createElement('p');
+  p.innerText = 'Loading Instagram...';
+  blockquote.appendChild(p);
+  wrapper.appendChild(blockquote);
 
   // Button to mark watched if it's not watched
   if (!isWatched) {
@@ -134,7 +110,7 @@ function createLinkElement(link, isWatched) {
     watchButton.className = 'btn btn-sm btn-secondary';
     watchButton.innerText = 'Mark Watched';
     watchButton.onclick = () => markLinkWatched(link.id);
-    btnGroup.appendChild(watchButton);
+    wrapper.appendChild(watchButton);
   }
 
   // Delete button
@@ -142,9 +118,7 @@ function createLinkElement(link, isWatched) {
   deleteButton.innerText = 'Delete';
   deleteButton.className = 'btn btn-sm btn-danger';
   deleteButton.onclick = () => deleteLink(link.id);
-  btnGroup.appendChild(deleteButton);
-
-  wrapper.appendChild(btnGroup);
+  wrapper.appendChild(deleteButton);
 
   return wrapper;
 }