o.vodianov/instalinks
1
0
Fork 0
mirror of https://github.com/olegvodyanov/instalinks.git synced 2025-12-20 05:47:03 +03:00
Code Issues Packages Projects Releases Wiki Activity

use_iframe
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
oleg.vodyanov91@gmail.com 2025-04-23 13:31:09 +04:00
parent 174668e85f
commit dd073f0f34
1 changed files with 31 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
static/links/main.js
View File

@ -93,16 +93,34 @@ function createLinkElement(link, isWatched) {
const wrapper = document.createElement('div'); const wrapper = document.createElement('div');
wrapper.className = 'mb-3'; wrapper.className = 'mb-3';
// Instagram embed blockquote const reelId = extractReelId(link.url);
const blockquote = document.createElement('blockquote'); if (!reelId) {
blockquote.className = 'instagram-media'; wrapper.innerText = 'Invalid Instagram Reel URL';
blockquote.setAttribute('data-instgrm-permalink', link.url); return wrapper;
blockquote.style.background = '#FFF'; }
// 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 // Button to mark watched if it's not watched
if (!isWatched) { if (!isWatched) {
@ -110,7 +128,7 @@ function createLinkElement(link, isWatched) {
watchButton.className = 'btn btn-sm btn-secondary'; watchButton.className = 'btn btn-sm btn-secondary';
watchButton.innerText = 'Mark Watched'; watchButton.innerText = 'Mark Watched';
watchButton.onclick = () => markLinkWatched(link.id); watchButton.onclick = () => markLinkWatched(link.id);
wrapper.appendChild(watchButton); btnGroup.appendChild(watchButton);
} }
// Delete button // Delete button
@ -118,7 +136,9 @@ function createLinkElement(link, isWatched) {
deleteButton.innerText = 'Delete'; deleteButton.innerText = 'Delete';
deleteButton.className = 'btn btn-sm btn-danger'; deleteButton.className = 'btn btn-sm btn-danger';
deleteButton.onclick = () => deleteLink(link.id); deleteButton.onclick = () => deleteLink(link.id);
wrapper.appendChild(deleteButton); btnGroup.appendChild(deleteButton);
wrapper.appendChild(btnGroup);
return wrapper; return wrapper;
} }