From dd073f0f34d418c396dab2854b35678febf8da18 Mon Sep 17 00:00:00 2001
From: "oleg.vodyanov91@gmail.com" <o.vodianov@hh.ru>
Date: Wed, 23 Apr 2025 13:31:09 +0400
Subject: [PATCH] use_iframe

---
 static/links/main.js | 42 +++++++++++++++++++++++++++++++-----------
 1 file changed, 31 insertions(+), 11 deletions(-)

diff --git a/static/links/main.js b/static/links/main.js
index 289348b..e29d7e4 100644
--- a/static/links/main.js
+++ b/static/links/main.js
@@ -93,16 +93,34 @@ function createLinkElement(link, isWatched) {
   const wrapper = document.createElement('div');
   wrapper.className = 'mb-3';
 
-  // Instagram embed blockquote
-  const blockquote = document.createElement('blockquote');
-  blockquote.className = 'instagram-media';
-  blockquote.setAttribute('data-instgrm-permalink', link.url);
-  blockquote.style.background = '#FFF';
+  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';
 
-  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) {
@@ -110,7 +128,7 @@ function createLinkElement(link, isWatched) {
     watchButton.className = 'btn btn-sm btn-secondary';
     watchButton.innerText = 'Mark Watched';
     watchButton.onclick = () => markLinkWatched(link.id);
-    wrapper.appendChild(watchButton);
+    btnGroup.appendChild(watchButton);
   }
 
   // Delete button
@@ -118,7 +136,9 @@ function createLinkElement(link, isWatched) {
   deleteButton.innerText = 'Delete';
   deleteButton.className = 'btn btn-sm btn-danger';
   deleteButton.onclick = () => deleteLink(link.id);
-  wrapper.appendChild(deleteButton);
+  btnGroup.appendChild(deleteButton);
+
+  wrapper.appendChild(btnGroup);
 
   return wrapper;
 }