1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
function detectType(url) {
if (!url) return 'none';
try { new URL(url); } catch(e) { return 'none'; }
const path = (new URL(url)).pathname.toLowerCase();
const ext = path.split('.').pop();
if (['jpg','jpeg','png','gif','webp','bmp','svg','avif'].includes(ext)) return 'image';
if (['mp4','webm','ogv','mov'].includes(ext)) return 'video';
if (['mp3','flac','wav','ogg','aac','opus','m4a'].includes(ext)) return 'audio';
if (/(?:youtube\.com\/watch\?.*v=|youtu\.be\/)([A-Za-z0-9_-]{11})/.test(url)) return 'youtube';
if (/vimeo\.com\/(\d+)/.test(url)) return 'vimeo';
return 'link';
}
function ytId(url) { const m = url.match(/(?:v=|youtu\.be\/)([A-Za-z0-9_-]{11})/); return m ? m[1] : null; }
function vimeoId(url) { const m = url.match(/vimeo\.com\/(\d+)/); return m ? m[1] : null; }
function updatePreview(url) {
const el = document.getElementById('preview-body');
const badge = document.getElementById('type-badge');
if (!url) { el.innerHTML = '<p class="preview-empty">// no url set</p>'; badge.textContent = 'none'; badge.className = 'badge t-none'; return; }
const type = detectType(url);
badge.textContent = type;
badge.className = 'badge t-' + type.replace(/:.*/, '');
const s = url.replace(/"/g, '%22');
let h = '<div class="preview-url"><a href="' + s + '" target="_blank" rel="noopener noreferrer">' + url + '</a></div>';
if (type === 'image') h += '<img src="' + s + '" alt="preview" loading="lazy">';
else if (type === 'video') h += '<video controls preload="none"><source src="' + s + '"></video>';
else if (type === 'audio') h += '<audio controls preload="none" class="vibe-audio-full"><source src="' + s + '"></audio>';
else if (type === 'youtube') { const id = ytId(url); if (id) h += '<div class="ratio-wrap"><iframe src="https://www.youtube.com/embed/' + id + '" allowfullscreen loading="lazy"></iframe></div>'; }
else if (type === 'vimeo') { const id = vimeoId(url); if (id) h += '<div class="ratio-wrap"><iframe src="https://player.vimeo.com/video/' + id + '" allowfullscreen loading="lazy"></iframe></div>'; }
else h += '<a href="' + s + '" target="_blank" rel="noopener noreferrer" class="vibe-preview-link">' + url + '</a>';
el.innerHTML = h;
}
const urlInput = document.getElementById('url');
let debounce;
urlInput.addEventListener('input', () => {
clearTimeout(debounce);
debounce = setTimeout(() => updatePreview(urlInput.value.trim()), 350);
});
document.querySelectorAll('.preset').forEach(btn => {
btn.addEventListener('click', () => {
urlInput.value = btn.dataset.url;
if (btn.dataset.desc) document.getElementById('description').value = btn.dataset.desc;
updatePreview(btn.dataset.url);
});
});
|
