@@ -211,10 +225,50 @@
``;
});
- // 6e. Remaining plain https URLs (not already wrapped in a tag) → clickable link
+ // 6d.5 Same-site item page links → post preview card (resolved async)
+ // Only catches /digits paths — direct media file URLs are handled by 6a-6c & 6e.
+ const siteHostEsc = window.location.host.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const siteItemRx = new RegExp(
+ `https?:\/\/${siteHostEsc}\/(\\d+)(?=[\\s<"']|$)`,
+ 'gi'
+ );
+ html = html.replace(siteItemRx, (match, itemId) =>
+ ``
+ );
+
+ // 6e. Remaining https URLs → embed media if from allowed host, else plain link
html = html.replace(/(^|[\s>])(https?:\/\/[^\s<"]+)/g, (match, pre, url) => {
- // Don't double-wrap already-embedded URLs
- if (match.includes('
+ host === h || host.endsWith('.' + h)
+ );
+ if (isSameSite || isMediaHost || isAllowedHoster) {
+ if (/\.(mp4|webm|ogv|mov)(\?.*)?$/i.test(path))
+ return `${pre}`;
+ if (/\.(jpg|jpeg|png|gif|webp)(\?.*)?$/i.test(path))
+ return `${pre}
`;
+ if (/\.(mp3|ogg|wav|flac|aac|opus|m4a)(\?.*)?$/i.test(path))
+ return `${pre}`;
+ }
+ } catch (_) {}
+
return `${pre}${url}`;
});
@@ -277,6 +331,70 @@
if (authorEl) authorEl.textContent = meta.author_name || '';
}
+ // Resolve same-site item links → post preview card
+ const itemPreviewCache = new Map(); // id → { item, meta } | null
+ async function fetchItemPreview(wrapEl) {
+ const id = wrapEl.dataset.itemId;
+ if (!id) return;
+
+ let cached = itemPreviewCache.get(id);
+ if (cached === undefined) {
+ try {
+ const [itemRes, metaRes] = await Promise.all([
+ fetch(`/api/v2/item/${id}`),
+ fetch(`/api/v2/scroller/meta?ids=${id}`)
+ ]);
+ const itemData = await itemRes.json();
+ const metaData = await metaRes.json();
+ const item = (itemData.success && itemData.rows) ? itemData.rows : null;
+ const meta = metaData[id] || null;
+ cached = item ? { item, meta } : null;
+ } catch (_) {
+ cached = null;
+ }
+ itemPreviewCache.set(id, cached);
+ }
+
+ if (!cached) {
+ // Fallback: plain link
+ const link = document.createElement('a');
+ link.href = `/${id}`;
+ link.target = '_blank';
+ link.rel = 'noopener';
+ link.textContent = `#${id}`;
+ wrapEl.replaceWith(link);
+ return;
+ }
+
+ const { item, meta } = cached;
+ const commentCount = meta ? (meta.comment_count || 0) : 0;
+ const uploader = esc(item.username || 'unknown');
+ const mime = item.mime || '';
+ const thumbSrc = `/t/${id}.webp`;
+
+ // Media type badge
+ let typeBadge = '';
+ if (mime.startsWith('video/')) typeBadge = '';
+ else if (mime.startsWith('audio/')) typeBadge = '';
+ else if (mime.startsWith('image/')) typeBadge = '';
+
+ const card = document.createElement('a');
+ card.className = 'gchat-post-card';
+ card.href = `/${id}`;
+ card.innerHTML =
+ `` +
+ `})
` +
+ (typeBadge ? `${typeBadge}` : '') +
+ `` +
+ `` +
+ `#${id}` +
+ ` ${uploader}` +
+ ` ${commentCount}` +
+ ``;
+
+ wrapEl.replaceWith(card);
+ }
+
function appendMsg(msg, scrollForce = false) {
const container = document.getElementById('gchat-messages');
if (!container) return;
@@ -301,6 +419,8 @@
// Wire up YouTube oEmbed cards
node.querySelectorAll('.gchat-yt-card[data-yt-id]').forEach(fetchYtOembed);
+ // Wire up same-site item embeds
+ node.querySelectorAll('.gchat-item-embed[data-item-id]').forEach(fetchItemPreview);
scrollToBottom(scrollForce);
@@ -772,9 +892,9 @@
let _sseReady = false;
function setConnecting(connecting) {
- if (_inputArea) _inputArea.style.opacity = connecting ? '0.35' : '';
- if (_inputArea) _inputArea.style.pointerEvents = connecting ? 'none' : '';
- if (_messages) _messages.style.opacity = connecting ? '0.35' : '';
+ if (_inputArea) _inputArea.style.opacity = connecting ? '0.35' : '1';
+ if (_inputArea) _inputArea.style.pointerEvents = connecting ? 'none' : '';
+ if (_messages) _messages.style.opacity = connecting ? '0.35' : '1';
const sendBtn = document.getElementById('gchat-send-btn');
if (sendBtn) sendBtn.disabled = connecting;
}
@@ -783,12 +903,39 @@
const onSseReady = () => {
if (_sseReady) return;
_sseReady = true;
+ clearTimeout(_sseUnlockTimer);
+ clearInterval(_pollFallback);
setConnecting(false);
};
document.addEventListener('f0ck:sse_ready', onSseReady);
// Failsafe: if SSE already fired before this ran (e.g. fast reconnect), check flag
if (document.documentElement.dataset.sseReady === '1') onSseReady();
+ // Absolute fallback: if SSE hasn't connected within 10s, unlock anyway and poll
+ let _pollFallback = null;
+ const _sseUnlockTimer = setTimeout(() => {
+ if (_sseReady) return;
+ console.warn('[Chat] SSE not ready after 10s — unlocking in polling mode');
+ setConnecting(false);
+ // Poll /api/chat every 15s as fallback so messages still appear
+ _pollFallback = setInterval(async () => {
+ if (_sseReady) { clearInterval(_pollFallback); return; }
+ try {
+ const res = await fetch('/api/chat', { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
+ const data = await res.json();
+ if (!data.success) return;
+ const container = document.getElementById('gchat-messages');
+ if (!container) return;
+ const lastId = parseInt(container.dataset.lastPollId || '0', 10);
+ const newMsgs = (data.messages || []).filter(m => m.id > lastId);
+ if (newMsgs.length) {
+ newMsgs.forEach(m => appendMsg(m, false));
+ container.dataset.lastPollId = String(Math.max(...newMsgs.map(m => m.id)));
+ }
+ } catch (_) {}
+ }, 15000);
+ }, 10000);
+
const textarea = document.getElementById('gchat-input');
@@ -1193,6 +1340,34 @@
applyTopic(e.detail?.topic || null);
});
+ // ── Online users bar ─────────────────────────────────────────────────
+ function renderOnline(users) {
+ const el = document.getElementById('gchat-online');
+ if (!el) return;
+ if (!users || users.length === 0) {
+ el.innerHTML = '';
+ el.style.display = 'none';
+ return;
+ }
+ el.style.display = 'block';
+ // Show up to 8 avatars, then "+N more" pill
+ const MAX_SHOWN = 8;
+ const shown = users.slice(0, MAX_SHOWN);
+ const extra = users.length - shown.length;
+ const avatarHTML = shown.map(u => {
+ const name = esc(u.display_name || u.username || '?');
+ const src = avatarSrc(u);
+ const colorStyle = u.username_color ? `style="border-color:${esc(u.username_color)}"` : '';
+ return `
`;
+ }).join('');
+ const extraPill = extra > 0 ? `+${extra}` : '';
+ const countLabel = `${users.length} online`;
+ el.innerHTML = `})
`+
+ (typeBadge ? `${typeBadge}` : '') +
+ ``+
+ ``+
+ `#${id}`+
+ ` ${uploader}`+
+ ` ${commentCount}`+
+ ``;
+
+ placeholder.replaceWith(card);
+ }
+ }
+
let sendInFlight = false; // debounce guard against double-submit
function setupDmEmojiPicker() {
diff --git a/public/s/js/scroller.js b/public/s/js/scroller.js
index 72c4aac..a1332b8 100644
--- a/public/s/js/scroller.js
+++ b/public/s/js/scroller.js
@@ -56,10 +56,22 @@
const stHideUi = document.getElementById('st-hide-ui');
const stStartUnmuted = document.getElementById('st-start-unmuted');
const stCanvasBg = document.getElementById('st-canvas-bg');
+ const stLeftHand = document.getElementById('st-left-hand');
const stAutoNext = document.getElementById('st-auto-next');
const autoNextLoopsInp = document.getElementById('st-auto-next-loops');
const settingsSaveBtn = document.getElementById('settings-save-preset-btn');
const settingsPresetsList = document.getElementById('settings-presets-list');
+ const externalUrlInput = document.getElementById('external-url-input');
+ const externalUrlBtn = document.getElementById('external-url-btn');
+ const chanOpenBtn = document.getElementById('chan-open-btn');
+ const chanPanel = document.getElementById('chan-panel');
+ const chanBackdrop = document.getElementById('chan-backdrop');
+ const chanUrlInput = document.getElementById('chan-url-input');
+ const chanUrlLoadBtn = document.getElementById('chan-url-load-btn');
+ const chanGrid = document.getElementById('chan-catalog-grid');
+ const chanLoading = document.getElementById('chan-catalog-loading');
+ const chanGalleryBtn = document.getElementById('chan-gallery-btn');
+ const chanGallerySidebar = document.getElementById('chan-gallery-sidebar');
// ── State ────────────────────────────────────────────────────────────────
const defaultMode = window.scrollerMode ?? 0;
@@ -83,8 +95,9 @@
// autoNext: false by default
let autoNextEnabled = prefs.autoNext === true;
let autoNextLoops = Math.max(0, parseInt(prefs.autoNextLoops ?? 1, 10));
+ let leftHandEnabled = prefs.leftHand === true;
- let applied = { mode: defaultMode, mime: '', order: 'random', tags: [] };
+ let applied = { mode: defaultMode, mime: '', order: 'random', tags: [], externalUrl: null };
let pending = { ...applied, tags: [] };
// Volume / mute
@@ -125,35 +138,6 @@
let emojiResults = []; // current emoji suggestion list [[code, char], ...]
let acIndex = -1; // shared keyboard nav index
- // Emoji shortcode map (Discord-style :shortcode:)
- const EMOJI = {
- // Faces
- smile:'😊', grin:'😁', happy:'😄', joy:'😂', rofl:'🤣', lol:'😆', wink:'😉',
- sweat:'😅', cry:'😢', sob:'😭', angry:'😡', rage:'🤬', fear:'😨', scream:'😱',
- wow:'😮', huh:'😕', thinking:'🤔', nerd:'🤓', cool:'😎', tongue:'😛', kissing:'😘',
- heart_eyes:'😍', sunglasses:'😎', skull:'💀', dead:'😵', clown:'🤡', ghost:'👻',
- alien:'👽', robot:'🤖', devil:'😈', shrug:'🤷', facepalm:'🤦', monocle:'🧐',
- blush:'😊', sleepy:'😴', smirk:'😏', unamused:'😒', expressionless:'😑',
- // Hands / gestures
- thumbsup: '👍', thumbsdown:'👎', clap:'👏', ok:'👌', ok_hand:'👌', wave:'👋',
- muscle:'💪', point_up:'☝️', point_right:'👉', pray:'🙏', raised_hands:'🙌',
- fist:'✊', peace:'✌️', vulcan:'🖖',
- // Hearts / love
- heart:'❤️', hearts:'💕', orange_heart:'🧡', yellow_heart:'💛', green_heart:'💚',
- blue_heart:'💙', purple_heart:'💜', black_heart:'🖤', broken_heart:'💔',
- sparkling_heart:'💖', heartpulse:'💗', revolving_hearts:'💞',
- // Symbols / objects
- fire:'🔥', star:'⭐', sparkles:'✨', boom:'💥', zzz:'💤', 100:'💯',
- money:'💰', gem:'💎', trophy:'🏆', crown:'👑', rocket:'🚀', rainbow:'🌈',
- poop:'💩', tada:'🎉', party:'🥳', confetti:'🎊', eyes:'👀', evil_eye:'🧿',
- warning:'⚠️', check:'✅', x:'❌', no_entry:'⛔', question:'❓', exclamation:'❗',
- // Food / drink
- pizza:'🍕', beer:'🍺', coffee:'☕', cake:'🎂', taco:'🌮', sushi:'🍣',
- // Animals
- cat:'🐱', dog:'🐶', frog:'🐸', panda:'🐼', fox:'🦊', wolf:'🐺',
- // Nature
- sun:'☀️', moon:'🌙', cloud:'☁️', snow:'❄️', lightning:'⚡', ocean:'🌊',
- };
// Session cache helpers ──────────────────────────────────────────────
function readCache() {
@@ -194,6 +178,17 @@
// entirely so that fetchItems() runs with ?anchor= and the correct
// item is guaranteed to be included in the fresh batch.
const hid = hashId();
+
+ // If hash is board/postid (e.g. wsg/6132740), auto-load that 4chan thread
+ const chanHash = hid.match(/^([a-z0-9]+)\/\d+$/);
+ if (chanHash) {
+ const board = chanHash[1];
+ // We need to find the thread ID from the post. Use the board catalog or
+ // just load a search — but simplest: set externalUrl and skip cache restore.
+ // The thread ID is unknown from just the post ID, so we skip cache and
+ // let the init block below handle it.
+ return false;
+ }
if (hid && !cache.items.some(item => String(item.id) === hid)) return false;
if (cache.filters) {
@@ -216,24 +211,53 @@
}
function timeAgo(iso) {
const s = Math.floor((Date.now() - new Date(iso)) / 1000);
- if (s < 60) return 'just now';
- if (s < 3600) return Math.floor(s / 60) + 'm ago';
- if (s < 86400) return Math.floor(s / 3600) + 'h ago';
- return Math.floor(s / 86400) + 'd ago';
+ const i = window.f0ckI18n || {};
+ const fmt = (tpl, n) => (tpl || '{n}').replace('{n}', n);
+ const ago = (t) => (i.ta_ago || '{t} ago').replace('{t}', t);
+ if (s < 60) return i.ta_just_now || i.just_now || 'just now';
+ const m = Math.floor(s / 60);
+ if (m < 60) return ago(fmt(m === 1 ? i.ta_minute : i.ta_minutes, m));
+ const h = Math.floor(s / 3600);
+ if (h < 24) return ago(fmt(h === 1 ? i.ta_hour : i.ta_hours, h));
+ const d = Math.floor(s / 86400);
+ if (d < 7) return ago(fmt(d === 1 ? i.ta_day : i.ta_days, d));
+ const w = Math.floor(d / 7);
+ if (d < 30) return ago(fmt(w === 1 ? i.ta_week : i.ta_weeks, w));
+ const mo = Math.floor(d / 30);
+ if (d < 365) return ago(fmt(mo === 1 ? i.ta_month : i.ta_months, mo));
+ const y = Math.floor(d / 365);
+ return ago(fmt(y === 1 ? i.ta_year : i.ta_years, y));
}
function hashId() {
- // Strip the leading '#' and restrict to numeric IDs only — prevents CSS
- // selector injection when the value is interpolated into querySelector.
+ // Strip the leading '#' and allow numeric IDs or board/postid format
const raw = location.hash.replace(/^#/, '').trim();
- return /^\d+$/.test(raw) ? raw : '';
+ if (/^\d+$/.test(raw)) return raw;
+ if (/^[a-z0-9]+\/\d+$/.test(raw)) return raw;
+ return '';
}
+ let lastPushedHash = location.hash;
function pushHash(id) {
if (!id) return;
const newHash = '#' + id;
- if (location.hash !== newHash) history.replaceState({ scrollerId: id }, '', '/abyss' + newHash);
+ if (newHash === lastPushedHash) return;
+ lastPushedHash = newHash;
+ history.pushState({ scrollerId: id }, '', '/abyss' + newHash);
updateCacheActiveId(id);
}
+ // Handle back/forward within abyss — scroll to the target slide
+ window.addEventListener('popstate', (e) => {
+ if (!document.body.classList.contains('scroller-active')) return;
+ const id = e.state?.scrollerId || location.hash.replace('#', '');
+ if (!id) return;
+ lastPushedHash = '#' + id;
+ const slide = feed.querySelector(`.scroll-slide[data-id="${id}"], .scroll-slide[data-local-id="${id}"]`);
+ if (slide) {
+ slide.scrollIntoView({ behavior: 'smooth', block: 'start' });
+ }
+ });
+
+
// ── Volume / Mute ────────────────────────────────────────────────────────
function syncVolumeUI() {
const icon = muteBtn.querySelector('i');
@@ -388,6 +412,37 @@
applyStartUnmuted(prefs.startUnmuted === true);
applyCanvasBg(canvasBgEnabled);
+ // Left-hand mode
+ function applyLeftHand(val) {
+ leftHandEnabled = val;
+ document.body.classList.toggle('left-hand-mode', val);
+ if (stLeftHand) stLeftHand.classList.toggle('on', val);
+ // Inject / remove 4chan action buttons in every slide's scroll-actions
+ document.querySelectorAll('.scroll-actions .chan-action-btn').forEach(el => el.remove());
+ if (val) {
+ document.querySelectorAll('.scroll-actions').forEach(actions => {
+ // Only add if 4chan buttons are visible (a 4chan feed is active)
+ if (chanOpenBtn && chanOpenBtn.style.display !== 'none') {
+ const openBtn = document.createElement('button');
+ openBtn.className = 'chan-action-btn';
+ openBtn.title = chanOpenBtn.title;
+ openBtn.innerHTML = ``;
+ openBtn.addEventListener('click', () => chanOpenBtn.click());
+ actions.appendChild(openBtn);
+ }
+ if (chanGalleryBtn && chanGalleryBtn.style.display !== 'none') {
+ const galBtn = document.createElement('button');
+ galBtn.className = 'chan-action-btn';
+ galBtn.title = chanGalleryBtn.title;
+ galBtn.innerHTML = ``;
+ galBtn.addEventListener('click', () => chanGalleryBtn.click());
+ actions.appendChild(galBtn);
+ }
+ });
+ }
+ }
+ applyLeftHand(leftHandEnabled);
+
// Toggle clicks
if (stHideUi) stHideUi.addEventListener('click', () => {
const next = !hideUIEnabled;
@@ -408,6 +463,11 @@
prefs.canvasBg = next; savePrefs(prefs);
applyCanvasBg(next);
});
+ if (stLeftHand) stLeftHand.addEventListener('click', () => {
+ const next = !leftHandEnabled;
+ prefs.leftHand = next; savePrefs(prefs);
+ applyLeftHand(next);
+ });
// Auto-next toggle
function applyAutoNext(val) {
autoNextEnabled = val;
@@ -460,7 +520,7 @@
const list = getPresets();
settingsPresetsList.innerHTML = '';
if (!list.length) {
- settingsPresetsList.innerHTML = '
${countLabel}
`;
+ }
+ document.addEventListener('f0ck:global_chat_presence', (e) => {
+ renderOnline(e.detail?.users || []);
+ });
+
// Event delegation: reply + admin delete buttons inside #gchat-messages
const msgArea = document.getElementById('gchat-messages');
const csrf = () => window.f0ckSession?.csrf_token;
diff --git a/public/s/js/messages.js b/public/s/js/messages.js
index 9bda3a8..d126702 100644
--- a/public/s/js/messages.js
+++ b/public/s/js/messages.js
@@ -304,6 +304,7 @@ if (window.__dmLoaded) {
let threadHasMore = false;
const renderedIds = new Set();
let threadMessages = []; // Cache for re-rendering (e.g. emojis)
+ const dmPostPreviewCache = new Map(); // itemId → { item, meta } | null
// Title management — global across all pages
let _dmTitleCount = 0;
@@ -693,9 +694,99 @@ if (window.__dmLoaded) {
const time = timeAgo(m.created_at);
div.innerHTML = `${avatarHTML}${extraPill}
${content}
${escHtml(time)}`;
+
+ // Async: extract post IDs from raw plaintext and inject preview cards into the bubble
+ if (m.plaintext) resolvePostPreviews(div, m.plaintext);
+
return div;
}
+ // ── Post link preview cards ───────────────────────────────────────────────
+ // Extracts item IDs from the raw plaintext (immune to rendering pipeline
+ // variations: marked / commentSystem / plain-text fallback), then appends
+ // a preview card below the bubble content for each unique ID found.
+ async function resolvePostPreviews(msgDiv, plaintext) {
+ const bubble = msgDiv.querySelector('.dm-bubble');
+ if (!bubble) return;
+
+ // Match bare /12345 and full same-site URLs like https://site.com/12345
+ const siteOriginEsc = window.location.origin.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+ const itemRx = new RegExp(
+ `(?:${siteOriginEsc})?\\/(\\d+)(?=[\\s,!?\"'\\)\\]<]|$)`,
+ 'g'
+ );
+
+ const seen = new Set();
+ let match;
+ while ((match = itemRx.exec(plaintext)) !== null) {
+ const id = match[1];
+ if (!seen.has(id)) seen.add(id);
+ }
+ if (!seen.size) return;
+
+ for (const id of seen) {
+ // Insert loading placeholder card below the bubble text
+ const placeholder = document.createElement('span');
+ placeholder.className = 'dm-post-card dm-post-card--loading';
+ placeholder.innerHTML =
+ ``+
+ `#${id}`;
+ bubble.appendChild(placeholder);
+
+ // Fetch item info and meta (with cache)
+ let cached = dmPostPreviewCache.get(id);
+ if (cached === undefined) {
+ try {
+ const [itemRes, metaRes] = await Promise.all([
+ fetch(`/api/v2/item/${id}`),
+ fetch(`/api/v2/scroller/meta?ids=${id}`)
+ ]);
+ const itemData = await itemRes.json();
+ const metaData = await metaRes.json();
+ const item = (itemData.success && itemData.rows) ? itemData.rows : null;
+ const meta = metaData[id] || null;
+ cached = item ? { item, meta } : null;
+ } catch (_) {
+ cached = null;
+ }
+ dmPostPreviewCache.set(id, cached);
+ }
+
+ if (!cached) {
+ placeholder.remove(); // no item found — silently drop
+ continue;
+ }
+
+ const { item, meta } = cached;
+ const commentCount = meta ? (meta.comment_count || 0) : 0;
+ const uploader = escHtml(item.username || 'unknown');
+ const mime = item.mime || '';
+ const thumbSrc = `/t/${id}.webp`;
+
+ // Media type badge
+ let typeBadge = '';
+ if (mime.startsWith('video/')) typeBadge = '';
+ else if (mime.startsWith('audio/')) typeBadge = '';
+ else if (mime.startsWith('image/')) typeBadge = '';
+
+ const card = document.createElement('a');
+ card.className = 'dm-post-card';
+ card.href = `/${id}`;
+ card.innerHTML =
+ ``+
+ `No saved presets yet.
';
+ settingsPresetsList.innerHTML = `${(window.f0ckI18n && window.f0ckI18n.no_presets) || 'No saved presets yet.'}
`;
return;
}
const buildMeta = (p) => [
@@ -541,7 +601,7 @@
const tagInp = document.createElement('input');
tagInp.type = 'text'; tagInp.placeholder = 'Add tag\u2026'; tagInp.autocomplete = 'off'; tagInp.spellcheck = false;
const addBtnEl = document.createElement('button');
- addBtnEl.textContent = 'Add';
+ addBtnEl.textContent = (window.f0ckI18n && window.f0ckI18n.add) || 'Add';
addWrap.appendChild(tagInp); addWrap.appendChild(addBtnEl);
const doAdd = () => {
const v = tagInp.value.trim().toLowerCase().replace(/\s+/g, '_');
@@ -560,7 +620,7 @@
const overwriteBtn = document.createElement('button');
overwriteBtn.className = 'preset-editor-overwrite';
- overwriteBtn.innerHTML = 'Update & apply preset Save changes and reload feed now';
+ overwriteBtn.innerHTML = `${(window.f0ckI18n && window.f0ckI18n.update_preset) || 'Update & apply preset'} ${(window.f0ckI18n && window.f0ckI18n.update_preset_sub) || 'Save changes and reload feed now'}`;
overwriteBtn.addEventListener('click', ev => {
ev.stopPropagation();
const presets = getPresets();
@@ -641,8 +701,10 @@
if (!slide || slide === currentSlide) return;
if (currentSlide) deactivateSlide(currentSlide);
currentSlide = slide;
+ slide._deactivated = false;
slide.classList.add('active');
pushHash(slide.dataset.id);
+ updateGalleryActive(slide.dataset.id);
const video = slide.querySelector('video');
const audio = slide.querySelector('audio');
@@ -660,10 +722,16 @@
video.currentTime = 0;
}
video.muted = isMuted; video.volume = volume;
- // Re-register .ready listener on every activation
- video.addEventListener('playing', () => video.classList.add('ready'), { once: true });
+ video.classList.add('ready');
+ // Force load if video hasn't started loading (preload=none for external)
+ if (video.readyState === 0) {
+ video.preload = 'auto';
+ video.load();
+ } else {
+ video.currentTime = 0;
+ }
video.play().catch(err => {
- if (err && err.name === 'NotAllowedError') { video.muted = true; video.play().catch(() => {}); }
+ if (err && err.name === 'NotAllowedError') { video.muted = true; isMuted = true; syncVolumeUI(); video.play().catch(() => {}); }
});
wireProgress(slide, video, fill, thumb);
// Start live canvas background loop (only if pref enabled)
@@ -706,7 +774,7 @@
}
audio.muted = isMuted; audio.volume = volume;
audio.play().catch(err => {
- if (err && err.name === 'NotAllowedError') { audio.muted = true; audio.play().catch(() => {}); }
+ if (err && err.name === 'NotAllowedError') { audio.muted = true; isMuted = true; syncVolumeUI(); audio.play().catch(() => {}); }
});
if (cover) cover.classList.add('playing');
wireProgress(slide, audio, fill, thumb);
@@ -774,6 +842,14 @@
// Failsafe: some Ruffle versions reset volume after WASM init
setTimeout(() => { if (player.isConnected) player.volume = isMuted ? 0 : volume; }, 100);
ruffleEl._rufflePlayer = player;
+ // If slide was deactivated while we were loading, destroy immediately
+ if (slide._deactivated) {
+ try { player.pause(); player.remove(); } catch {}
+ ruffleEl._rufflePlayer = null;
+ const ph2 = ruffleEl.querySelector('.ruffle-placeholder');
+ if (ph2) ph2.style.display = 'block';
+ return true;
+ }
if (currentSlide === slide) currentMedia = player;
return true;
} catch (e) { console.warn('[Ruffle] init error', e); return false; }
@@ -952,9 +1028,11 @@
if (iframe) iframe.removeAttribute('src');
}
// Stop Ruffle player by removing it (destroys WASM instance)
+ slide._deactivated = true;
const ruffleEl = slide.querySelector('.ruffle-container');
if (ruffleEl && ruffleEl._rufflePlayer) {
try {
+ ruffleEl._rufflePlayer.pause();
ruffleEl._rufflePlayer.remove();
ruffleEl._rufflePlayer = null;
const ph = ruffleEl.querySelector('.ruffle-placeholder');
@@ -1031,7 +1109,9 @@
async function toggleFav(slide) {
if (!window.scrollerLoggedIn) return;
- const id = slide.dataset.id;
+ const id = slide.dataset.localId || slide.dataset.id;
+ // External items have non-numeric IDs (e.g. "gif/123") — can't fav until rehosted
+ if (!/^\d+$/.test(id)) { showShareToast('Can\u2019t fav external items'); return; }
const favBtn = slide.querySelector('.js-fav-btn');
// Optimistic: immediately flip the button state before the server responds
const wasFaved = favBtn ? favBtn.classList.contains('faved') : false;
@@ -1147,6 +1227,7 @@
const slide = document.createElement('div');
slide.className = 'scroll-slide';
slide.dataset.id = item.id;
+ if (item.local_id) slide.dataset.localId = item.local_id;
slide._thumbnail = item.thumbnail; // stored for canvas redraw + applyCanvasBg fallback
const bgCanvas = document.createElement('canvas');
@@ -1247,43 +1328,80 @@
${esc(item.display_name || item.username)}
- ${esc(item.timeago)}
+ ${esc(item.stamp ? timeAgo(item.stamp * 1000) : (item.timeago || ''))}