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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
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();
const imgs = ['jpg','jpeg','png','gif','webp','bmp','svg','avif'];
const vids = ['mp4','webm','ogv','mov'];
const auds = ['mp3','flac','wav','ogg','aac','opus','m4a'];
if (imgs.includes(ext)) return 'image';
if (vids.includes(ext)) return 'video';
if (auds.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 getYTId(url) {
const m = url.match(/(?:v=|youtu\.be\/)([A-Za-z0-9_-]{11})/);
return m ? m[1] : null;
}
function getVimeoId(url) {
const m = url.match(/vimeo\.com\/(\d+)/);
return m ? m[1] : null;
}
function updateBadge(type) {
const b = document.getElementById('type-badge');
b.textContent = type;
}
function updatePreview(url) {
const body = document.getElementById('preview-body');
if (!url) { body.innerHTML = '<p class="preview-empty">// no url set</p>'; return; }
const type = detectType(url);
const safeUrl = url.replace(/"/g, '%22');
let html = `<div class="preview-url"><a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${url}</a></div>`;
if (type === 'image') {
html += `<img src="${safeUrl}" alt="vibe preview" loading="lazy" class="vibe-preview-media">`;
} else if (type === 'video') {
html += `<video controls preload="none" class="vibe-preview-media"><source src="${safeUrl}"></video>`;
} else if (type === 'audio') {
html += `<audio controls preload="none" class="vibe-preview-audio"><source src="${safeUrl}"></audio>`;
} else if (type === 'youtube') {
const id = getYTId(url);
if (id) html += `<div class="ratio-wrap"><iframe src="https://www.youtube.com/embed/${id}" allowfullscreen loading="lazy"></iframe></div>`;
} else if (type === 'vimeo') {
const id = getVimeoId(url);
if (id) html += `<div class="ratio-wrap"><iframe src="https://player.vimeo.com/video/${id}" allowfullscreen loading="lazy"></iframe></div>`;
} else {
html += `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer" class="vibe-preview-link">${url}</a>`;
}
body.innerHTML = html;
updateBadge(type);
}
const urlInput = document.getElementById('url');
let debounce;
urlInput.addEventListener('input', () => {
clearTimeout(debounce);
debounce = setTimeout(() => updatePreview(urlInput.value.trim()), 400);
});
document.querySelectorAll('.preset-btn').forEach(btn => {
btn.addEventListener('click', () => {
const url = btn.dataset.url;
const desc = btn.dataset.desc;
urlInput.value = url;
if (desc) document.getElementById('description').value = desc;
updatePreview(url);
});
});
|
