import live www.sillylaird.ca webrootHEADmain

1 files changed, 48 insertions, 0 deletions

diff --git a/assets/js/pages/vibe-admin.js b/assets/js/pages/vibe-admin.js
new file mode 100644
index 0000000..576111c
--- /dev/null
+++ b/assets/js/pages/vibe-admin.js
@@ -0,0 +1,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);
+  });
+});