Skip to content

Commit 69daa02

Browse files
nilay49nilay49
authored
Merge pull request #85 from n49/v1.1.14
Add TikTok and Instagram embed support (v1.1.14)
2 parents 5b9468d + 9b39918 commit 69daa02

6 files changed

Lines changed: 178 additions & 38 deletions

‎assets/js/opio-slider-main.js‎

Lines changed: 127 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,22 @@ function randomColor() {
4444
return colors[randomIndex];
4545
}
4646

47+
// Update thumbnail selection state in lightbox
48+
function updateLbThumbnailSelection(revId, selectedId) {
49+
var container = document.querySelector('#media-thumbs-' + revId);
50+
if (!container) return;
51+
52+
var thumbs = container.querySelectorAll('.media-thumb');
53+
thumbs.forEach(function(thumb) {
54+
thumb.style.border = '2px solid transparent';
55+
});
56+
57+
var selected = container.querySelector('.media-thumb[data-media-id="' + selectedId + '"]');
58+
if (selected) {
59+
selected.style.border = '2px solid #1976d2';
60+
}
61+
}
62+
4763
function displayLargeImage(imageId, revId) {
4864
var photoContainer = document.querySelector(`#lb-photo-container`);
4965
if (!photoContainer) {
@@ -134,6 +150,38 @@ function displayEmbed(embed, revId) {
134150
iframeHtml = '<div style="width: 100%; height: ' + videoHeight + 'px; margin: 5px 0; position: relative; background: #000; border-radius: 4px; overflow: hidden;"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + videoId + '?autoplay=1&modestbranding=1&rel=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="position: absolute; top: 0; left: 0;"></iframe></div>';
135151
}
136152
elem.innerHTML = iframeHtml;
153+
} else if (platform === 'tiktok') {
154+
var tiktokVideoId = embed.videoId || '';
155+
if (!tiktokVideoId && embed.url) {
156+
var tiktokMatch = embed.url.match(/video\/(\d+)/);
157+
if (tiktokMatch) tiktokVideoId = tiktokMatch[1];
158+
}
159+
if (!tiktokVideoId) {
160+
if (embed.url) window.open(embed.url, '_blank');
161+
return;
162+
}
163+
var tiktokWidth = window.innerWidth < 768 ? Math.min(window.innerWidth * 0.985, 380) : 340;
164+
tiktokWidth = Math.max(tiktokWidth, 320);
165+
var tiktokHeight = window.innerWidth < 768 ? 700 : 740;
166+
var tiktokHtml = '<div style="display: inline-block; width: ' + tiktokWidth + 'px; height: ' + tiktokHeight + 'px; margin: 5px auto; position: relative; background: #000; border-radius: 4px; overflow: hidden; vertical-align: top;"><iframe width="100%" height="100%" src="https://www.tiktok.com/embed/v2/' + tiktokVideoId + '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen scrolling="no" style="position: absolute; top: 0; left: 0;"></iframe></div>';
167+
elem.innerHTML = tiktokHtml;
168+
} else if (platform === 'instagram') {
169+
var igPostId = embed.postId || '';
170+
if (!igPostId && embed.url) {
171+
var igMatch = embed.url.match(/instagram\.com\/(?:p|reel|tv)\/([A-Za-z0-9_-]+)/);
172+
if (igMatch) igPostId = igMatch[1];
173+
}
174+
if (!igPostId) {
175+
if (embed.url) window.open(embed.url, '_blank');
176+
return;
177+
}
178+
var isReel = (embed.url && embed.url.indexOf('/reel/') !== -1) || embed.embedType === 'reel';
179+
var igWidth = window.innerWidth < 768 ? Math.min(window.innerWidth * 0.985, 380) : 340;
180+
igWidth = Math.max(igWidth, 320);
181+
var igHeight = isReel ? (window.innerWidth < 768 ? 700 : 740) : (igWidth * 1.25 + 98);
182+
var igSrc = 'https://www.instagram.com/' + (isReel ? 'reel' : 'p') + '/' + igPostId + '/embed/?hidecaption=true';
183+
var igHtml = '<div style="display: inline-block; width: ' + igWidth + 'px; height: ' + igHeight + 'px; margin: 5px auto; position: relative; background: #fafafa; border-radius: 4px; overflow: hidden; vertical-align: top;"><iframe width="100%" height="100%" src="' + igSrc + '" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen scrolling="no" style="position: absolute; top: 0; left: 0;"></iframe></div>';
184+
elem.innerHTML = igHtml;
137185
} else if (embed.url && typeof embed.url === 'string' && embed.url.trim()) {
138186
window.open(embed.url.trim(), '_blank');
139187
}
@@ -400,67 +448,115 @@ async function openPhotoLightbox(reviewData) {
400448
var photoContainer = document.getElementById('lb-photo-container');
401449
photoContainer.innerHTML = '';
402450

403-
// Create large image display div
451+
// Track first media for auto-init
452+
var firstMedia = null;
453+
454+
// Create large image display div (visible for auto-init)
404455
var largerImageDiv = document.createElement("div");
405-
largerImageDiv.id = `largerevimg-${revId}`;
406-
largerImageDiv.style.display = "none";
456+
largerImageDiv.id = 'largerevimg-' + revId;
457+
largerImageDiv.style.marginBottom = '8px';
407458
photoContainer.appendChild(largerImageDiv);
408459

409460
// Create thumbnails container
410461
var thumbsContainer = document.createElement("div");
411-
thumbsContainer.style.cssText = 'display: flex; flex-wrap: wrap; gap: 5px;';
462+
thumbsContainer.id = 'media-thumbs-' + revId;
463+
thumbsContainer.style.cssText = 'margin-top: 8px; white-space: nowrap; overflow-x: auto; overflow-y: hidden;';
412464
photoContainer.appendChild(thumbsContainer);
413465

466+
// Add embed thumbnails FIRST (priority order: embeds, images, videos)
467+
if (reviewData.embeds && reviewData.embeds.length > 0) {
468+
reviewData.embeds.forEach(function(embed, idx) {
469+
var platform = (embed.platform || '').toLowerCase().trim();
470+
var thumbUrl = embed.thumbnailUrl || '';
471+
var mediaId = 'embed-' + (embed.videoId || embed.postId || idx);
472+
if (!thumbUrl && platform === 'youtube' && embed.videoId) {
473+
thumbUrl = 'https://img.youtube.com/vi/' + embed.videoId + '/hqdefault.jpg';
474+
}
475+
var embedDiv = document.createElement('div');
476+
embedDiv.className = 'media-thumb';
477+
embedDiv.setAttribute('data-media-id', mediaId);
478+
if (platform === 'tiktok') {
479+
embedDiv.style.cssText = 'display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 5px; cursor: pointer; border-radius: 4px; background-color: #000; border: 2px solid transparent; box-sizing: border-box; vertical-align: top;';
480+
embedDiv.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z"/></svg>';
481+
} else if (platform === 'instagram') {
482+
embedDiv.style.cssText = 'display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 5px; cursor: pointer; border-radius: 4px; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); border: 2px solid transparent; box-sizing: border-box; vertical-align: top;';
483+
embedDiv.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="white"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>';
484+
} else {
485+
embedDiv.style.cssText = 'display: inline-block; width: 72px; height: 72px; background-position: center center; background-size: cover; background-repeat: no-repeat; margin: 5px; cursor: pointer; position: relative; border-radius: 4px; background-color: #f0f0f0; border: 2px solid transparent; box-sizing: border-box; vertical-align: top;';
486+
embedDiv.style.backgroundImage = "url('" + thumbUrl + "')";
487+
embedDiv.innerHTML = '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: rgba(225,232,237,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="rgb(99,114,130)" style="margin-left: 2px;"><path d="M8 5v14l11-7z"/></svg></div>';
488+
}
489+
embedDiv.onclick = function() { displayEmbed(embed, revId); updateLbThumbnailSelection(revId, mediaId); };
490+
thumbsContainer.appendChild(embedDiv);
491+
492+
// Track first embed
493+
if (!firstMedia) {
494+
firstMedia = { type: 'embed', data: embed, mediaId: mediaId };
495+
}
496+
});
497+
}
498+
414499
// Add image thumbnails
415500
if (reviewData.images && reviewData.images.length > 0) {
416501
reviewData.images.forEach(function(img) {
417502
var imageId = img.imageId;
418-
var anchor = document.createElement("a");
419-
anchor.setAttribute("onclick", `displayLargeImage('${imageId}', '${revId}')`);
420-
anchor.style.cssText = 'cursor: pointer; text-decoration: none;';
421-
anchor.classList.add("photo-a-tag");
422-
503+
var mediaId = 'img-' + imageId;
423504
var imageDiv = document.createElement("div");
424-
imageDiv.classList.add("lb-small-img");
425-
imageDiv.style.backgroundImage = `url('https://images.files.ca/200x200/${imageId}.jpg?nocrop=1')`;
426-
427-
anchor.appendChild(imageDiv);
428-
thumbsContainer.appendChild(anchor);
505+
imageDiv.className = 'media-thumb lb-small-img';
506+
imageDiv.setAttribute('data-media-id', mediaId);
507+
imageDiv.style.cssText = 'display: inline-block; width: 72px; height: 72px; background-position: center center; background-size: cover; background-repeat: no-repeat; margin: 5px; cursor: pointer; border-radius: 4px; border: 2px solid transparent; box-sizing: border-box; vertical-align: top;';
508+
imageDiv.style.backgroundImage = 'url(https://images.files.ca/200x200/' + imageId + '.jpg?nocrop=1)';
509+
imageDiv.onclick = function() { displayLargeImage(imageId, revId); updateLbThumbnailSelection(revId, mediaId); };
510+
thumbsContainer.appendChild(imageDiv);
511+
512+
// Track first image if no embed
513+
if (!firstMedia) {
514+
firstMedia = { type: 'image', data: imageId, mediaId: mediaId };
515+
}
429516
});
430517
}
431518

432519
// Add video thumbnails
433520
if (reviewData.videos && reviewData.videos.length > 0) {
434521
reviewData.videos.forEach(function(video) {
522+
var mediaId = 'vid-' + video.videoId;
435523
var thumbUrl = video.thumbnailUrl || 'https://videocdn.n49.ca/thumb/' + video.videoId + '.jpg';
436524
var videoThumb = document.createElement("div");
437-
videoThumb.style.cssText = 'display: inline-block; width: 72px; height: 72px; background-color: #333; background-image: url(' + thumbUrl + '); background-size: cover; background-position: center; margin: 5px; cursor: pointer; position: relative; border-radius: 4px;';
525+
videoThumb.className = 'media-thumb';
526+
videoThumb.setAttribute('data-media-id', mediaId);
527+
videoThumb.style.cssText = 'display: inline-block; width: 72px; height: 72px; background-color: #333; background-image: url(' + thumbUrl + '); background-size: cover; background-position: center; margin: 5px; cursor: pointer; position: relative; border-radius: 4px; border: 2px solid transparent; box-sizing: border-box; vertical-align: top;';
438528
videoThumb.innerHTML = '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: rgba(225,232,237,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="rgb(99,114,130)" style="margin-left: 2px;"><path d="M8 5v14l11-7z"/></svg></div>';
439529
videoThumb.onclick = function() {
440-
var elem = document.querySelector(`#largerevimg-${revId}`);
530+
var elem = document.querySelector('#largerevimg-' + revId);
441531
if (elem) {
442-
elem.style.display = 'block';
443-
elem.innerHTML = `<div><video preload="auto" controls="" autoplay style="width: 100%; max-height: 400px;"><source src="https://videocdn.n49.ca/mp4sdpad480p/${video.videoId}.mp4#t=0.1" type="video/mp4"></video></div>`;
532+
elem.innerHTML = '<div><video preload="auto" controls autoplay style="width: 100%; max-height: 400px; border-radius: 4px;"><source src="https://videocdn.n49.ca/mp4sdpad480p/' + video.videoId + '.mp4#t=0.1" type="video/mp4"></video></div>';
444533
}
534+
updateLbThumbnailSelection(revId, mediaId);
445535
};
446536
thumbsContainer.appendChild(videoThumb);
537+
538+
// Track first video if no embed or image
539+
if (!firstMedia) {
540+
firstMedia = { type: 'video', data: video.videoId, mediaId: mediaId };
541+
}
447542
});
448543
}
449544

450-
// Add embed thumbnails
451-
if (reviewData.embeds && reviewData.embeds.length > 0) {
452-
reviewData.embeds.forEach(function(embed) {
453-
var thumbUrl = embed.thumbnailUrl || '';
454-
if (!thumbUrl && embed.platform === 'youtube' && embed.videoId) {
455-
thumbUrl = 'https://img.youtube.com/vi/' + embed.videoId + '/hqdefault.jpg';
545+
// Auto-init first media item
546+
if (firstMedia) {
547+
setTimeout(function() {
548+
if (firstMedia.type === 'embed') {
549+
displayEmbed(firstMedia.data, revId);
550+
} else if (firstMedia.type === 'image') {
551+
displayLargeImage(firstMedia.data, revId);
552+
} else if (firstMedia.type === 'video') {
553+
var elem = document.querySelector('#largerevimg-' + revId);
554+
if (elem) {
555+
elem.innerHTML = '<div><video preload="auto" controls style="width: 100%; max-height: 400px; border-radius: 4px;"><source src="https://videocdn.n49.ca/mp4sdpad480p/' + firstMedia.data + '.mp4#t=0.1" type="video/mp4"></video></div>';
556+
}
456557
}
457-
var embedDiv = document.createElement('div');
458-
embedDiv.style.cssText = 'display: inline-block; width: 72px; height: 72px; background-position: center center; background-size: cover; background-repeat: no-repeat; margin: 5px; cursor: pointer; position: relative; border-radius: 4px; background-color: #f0f0f0;';
459-
embedDiv.style.backgroundImage = "url('" + thumbUrl + "')";
460-
embedDiv.innerHTML = '<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; background: rgba(225,232,237,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;"><svg width="12" height="12" viewBox="0 0 24 24" fill="rgb(99,114,130)" style="margin-left: 2px;"><path d="M8 5v14l11-7z"/></svg></div>';
461-
embedDiv.onclick = function() { displayEmbed(embed, revId); };
462-
thumbsContainer.appendChild(embedDiv);
463-
});
558+
updateLbThumbnailSelection(revId, firstMedia.mediaId);
559+
}, 100);
464560
}
465561

466562
// Clear unused containers

‎includes/admin-reviews-slider-horizontal-carousel-template.php‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -329,16 +329,27 @@ function isMobileDevice() {
329329
<?php if(isset($review['embeds']) && is_array($review['embeds']) && count($review['embeds']) > 0) { ?>
330330
<?php foreach (array_slice($review['embeds'], 0, 3) as $embed) {
331331
$thumbUrl = isset($embed['thumbnailUrl']) ? $embed['thumbnailUrl'] : '';
332-
if(empty($thumbUrl) && isset($embed['platform']) && $embed['platform'] === 'youtube' && isset($embed['videoId'])) {
332+
$platform = isset($embed['platform']) ? strtolower(trim($embed['platform'])) : '';
333+
if(empty($thumbUrl) && $platform === 'youtube' && isset($embed['videoId'])) {
333334
$thumbUrl = 'https://img.youtube.com/vi/' . $embed['videoId'] . '/hqdefault.jpg';
334335
}
335336
?>
337+
<?php if($platform === 'tiktok') { ?>
338+
<div class="review-img" style="display: inline-flex; align-items: center; justify-content: center; background-color: #000;">
339+
<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M19.59 6.69a4.83 4.83 0 01-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 01-5.2 1.74 2.89 2.89 0 012.31-4.64 2.93 2.93 0 01.88.13V9.4a6.84 6.84 0 00-1-.05A6.33 6.33 0 005 20.1a6.34 6.34 0 0010.86-4.43v-7a8.16 8.16 0 004.77 1.52v-3.4a4.85 4.85 0 01-1-.1z"/></svg>
340+
</div>
341+
<?php } else if($platform === 'instagram') { ?>
342+
<div class="review-img" style="display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);">
343+
<svg width="16" height="16" viewBox="0 0 24 24" fill="white"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
344+
</div>
345+
<?php } else { ?>
336346
<div style="position: relative; display: inline-block;">
337347
<img class="review-img" src="<?php echo esc_attr($thumbUrl); ?>" style="background-color: #f0f0f0; object-fit: cover; object-position: center;">
338348
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; background: rgba(225,232,237,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
339349
<svg width="10" height="10" viewBox="0 0 24 24" fill="rgb(99,114,130)" style="margin-left: 2px;"><path d="M8 5v14l11-7z"/></svg>
340350
</div>
341351
</div>
352+
<?php } ?>
342353
<?php } ?>
343354
<?php } ?>
344355
</div>

0 commit comments

Comments
 (0)