mirror of
https://github.com/thegeneralist01/archivr
synced 2026-07-22 11:15:41 +02:00
feat: entry previews (#24)
* feat: entry previews (video, tweet, article, iframe, image, audio bar)
- Add PreviewPanel dispatch hub routing by entity_kind + artifact extension
- VideoPreview: HTML5 <video> for YouTube/Instagram/TikTok/Reddit/X posts
- TweetPreview: tweet card, thread, and X article renderer (ported from x-article-renderer)
- IframePreview: sandboxed iframe for SingleFile web pages and PDFs
- ImagePreview: image viewer with click-to-open-fullsize
- AudioBar: persistent fixed-bottom player (Spotify-style) that survives entry navigation
- Lift entryDetail to App.jsx, shared between PreviewPanel and ContextRail
- 3-column layout (workspace | 300px preview | 340px rail) when preview active
- Stale-guard fixes: seq incremented before early returns in all async effects
- handleRearchive: capture startSeq/entryUid at call time, guard every async resume
- TweetPreview: reset loading/error/tweets before early-return branches
* feat: entry previews — tweet/thread/article/video/audio/image/iframe/pdf
- PreviewModal: modal overlay with new-tab link (↗) and keyboard close
- PreviewPanel: routes by entity_kind + primary_media extension to the
correct viewer (tweet/video/audio/pdf/html/image/fallback)
- TweetPreview: full X-style tweet, thread, and article renderer with
local artifact map for archived media (CDN fallback)
- AudioBar: persistent fixed bottom player, triggered via ContextRail
Play button; body.has-audio-bar pads content above it
- VideoPreview, IframePreview, ImagePreview: inline viewers
- PreviewPage: standalone /preview/:archiveId/:entryUid route
- ContextRail: Play/Preview buttons; isAudio/isPreviewable detection
- App.jsx: preview modal state, currentAudio state, preview route guard,
has-audio-bar body class effect
- routes.rs: CSP updated (media-src self blob https; frame-ancestors self;
Google Fonts + external images/scripts whitelisted)
- styles.css: preview modal, tweet-wrap scroll (min-height:0), audio bar
body padding, newtab button, preview panel flex layout
* style: tighten article/tweet preview spacing
- aMeta padding: 14px → 10px
- article title marginBottom: 10px → 8px
- aAuthorRow marginBottom: 10px → 8px
- bH1 top margin: 20px → 16px
- bH2 top margin: 18px → 14px
- bHr margin: 20px → 14px
- .preview-tweet-wrap padding: 20px → 12px (already committed)
More content visible above the fold in both modal and standalone views.
* feat: tweet/article preview quality pass
HTML entities: decode > < & etc. on sliced segments only
(entity offsets index the stored string; decoding before slicing shifts them)
Image lightbox: click any tweet/thread/article image to open full-screen
viewer; cmd+click follows <a> to open in new tab; arrow-key + ‹ › nav;
Escape closes; 1/N counter; ↗ open-in-new-tab link
Multi-image grid: 2 photos → side-by-side (180px rows); 3 → left spans
both rows; 4 → 2×2 (140px rows); single image unchanged
Empty media grid ghost: build photos/videoItems arrays first, render
.mediaGrid div only when at least one item resolved (advisory: never gate
on raw media.length when map items can all return null)
QT indicator: ↻ QT badge on tweet.is_quote_status === true entries
Modal shrinks for short content: height: 88vh → max-height: 88vh;
.preview-modal-body gets max-height: calc(88vh - 52px) so long threads
still scroll (advisory: don't rely on flex:1 once parent has no fixed height)
Video scrollbar leak: .preview-modal-body overflow: auto → hidden; each
child (tweet-wrap, video-wrap, iframe) manages its own scroll surface
Styled thin scrollbar on .preview-tweet-wrap (matches workspace rail)
ArticleRenderer: cover image and body images are lightbox-clickable;
opts thread through renderBlocksJSX → renderBlockJSX → renderAtomicJSX
* fix: move artifact fetch to api.js; stop Escape propagation from lightbox
- Export fetchEntryArtifacts(archiveId, entryUid, indices) from api.js
using Promise.all + getJson (follows project convention: all /api calls
go through api.js, never inline fetch in components)
- TweetPreview: import fetchEntryArtifacts, replace inline Promise.all
- MediaLightbox keydown handler: stopPropagation + preventDefault for
Escape/ArrowLeft/ArrowRight so the parent PreviewModal window listener
does not also fire and close the modal behind the lightbox
* fix: iframe/page preview height chain and toolbar UX
Problem: changing .preview-modal from height to max-height broke iframe
previews - <iframe style='flex:1'> needs a concrete ancestor height, which
max-height alone doesn't supply when content is shorter than the cap.
Fix - CSS:
.preview-modal--full { height: 88vh } applied to non-tweet modals
.preview-modal--full .preview-modal-body { max-height: none }
.preview-iframe-toolbar span: remove text-transform/letter-spacing
(was uppercasing the URL/title in shouty caps)
Fix - PreviewModal: className adds --full when entity_kind is not
tweet/tweet_thread; tweet previews keep shrink-to-fit behavior.
Fix - PreviewPanel: pass title + original_url from summary to IframePreview
for both HTML and PDF; wrappers use flex:1/minHeight:0 not height:100%.
Fix - IframePreview:
- Accept title + originalUrl props; show originalUrl in toolbar (falls
back to artifact src only when original_url absent); show title above
URL when available
- flex:1 + minHeight:0 instead of height:100% on the wrap div
- Single unified layout for page + pdf (both just show the iframe)
* feat: expand t.co links; linkify bare URLs in tweet and article text
Frontend:
- resolveEntityBounds: try multiple candidate strings in order (u.url
first, since that's the t.co short URL that appears in full_text)
- normalizeUrlAnn: multi-candidate search; href = expanded > url,
display = display_url > expanded > url
- linkifyText(): regex linkifier for entity-less bare URLs; trims
trailing punctuation [.,;:!?)] before linking; used in both
renderTweetTextJSX and renderInlineJSX including their early-return
paths (anns.length === 0) that previously bypassed linkification
- renderInlineJSX: fix mention href mention.name → screen_name;
replace t.co segment text with url.display when entity covers it
Scraper (vendor/twitter/scrape_user_tweet_contents.py):
- extract_tweet_data: when note_tweet text is used, pull urls/mentions/
hashtags/symbols from note_result.entity_set (correct indices for the
note text); keep media from legacy.entities (no note media downloads)
* feat: server-side t.co resolver + frontend augmentation
Server (routes.rs):
POST /api/util/resolve-tco — unauthenticated, accepts JSON array of
https://t.co/<alphanumeric> URLs only (strict regex validation, no SSRF
via input), capped at 50 per batch, 3 s timeout, redirect(Policy::none)
so the server only ever touches t.co itself. HEAD first, GET fallback if
HEAD returns no Location. Location sanitized to http/https only —
javascript:/data:/etc. fall back to the original t.co.
api.js:
resolveTcoUrls(urls) — project-convention wrapper for the new endpoint.
Returns {} on failure (callers degrade gracefully to bare t.co links).
TweetPreview.jsx:
After tweet data loads, per-tweet range-based coverage detection:
builds covered [start,end) from existing entity fromIndex/toIndex or
indices fallback, then finds regex matches whose span is NOT covered.
Resolves unique uncovered t.co URLs via resolveTcoUrls(), synthesises
one entity per occurrence (with exact fromIndex/toIndex so normalizeUrlAnn
gets correct bounds even for duplicate t.co URLs in the same tweet).
Augments entities.urls before setTweets() so all rendering paths
see expanded URLs.
* feat: suppress rendered media attachment URLs from tweet text
renderTweetTextJSX now accepts skipSpans=[] as third param.
Skip-span boundaries are added to the pts split set so a trailing
media t.co inside a plain segment still gets isolated and suppressed—
not re-linked by linkifyText. Early return only when both anns and
skipSpans are empty.
TweetCard computes mediaSkipSpans after building photos/videoItems:
for each rawMedia item whose src resolved (photo src match; any video),
resolveEntityBounds(m, ft, m.url) gives the precise [s,e] span using
indices/fromIndex first, indexOf fallback—then the span is passed to
renderTweetTextJSX so the t.co attachment URL is silently dropped.
This commit is contained in:
GitHub
parent
2779afee2d
commit
d610d37793
21 changed files with 2792 additions and 92 deletions
218
frontend/src/components/AudioBar.jsx
Normal file
218
frontend/src/components/AudioBar.jsx
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
import { useEffect, useRef, useState } from 'react';
|
||||
import { sourceIconSvg } from '../utils';
|
||||
|
||||
function formatTime(secs) {
|
||||
if (!isFinite(secs) || isNaN(secs)) return '--:--';
|
||||
const m = Math.floor(secs / 60);
|
||||
const s = Math.floor(secs % 60);
|
||||
return `${m}:${String(s).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
export default function AudioBar({ entry, src, archiveId, onClose }) {
|
||||
const audioRef = useRef(null);
|
||||
const [isPlaying, setIsPlaying] = useState(false);
|
||||
const [currentTime, setCurrentTime] = useState(0);
|
||||
const [duration, setDuration] = useState(NaN);
|
||||
const [volume, setVolume] = useState(1.0);
|
||||
|
||||
// Load and reset state whenever src changes — play only on explicit user action
|
||||
useEffect(() => {
|
||||
if (!audioRef.current || !src) return;
|
||||
audioRef.current.load();
|
||||
setCurrentTime(0);
|
||||
setDuration(NaN);
|
||||
setIsPlaying(false);
|
||||
}, [src]);
|
||||
|
||||
// Sync volume to audio element
|
||||
useEffect(() => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.volume = volume;
|
||||
}
|
||||
}, [volume]);
|
||||
|
||||
function handlePlayPause() {
|
||||
const audio = audioRef.current;
|
||||
if (!audio) return;
|
||||
if (isPlaying) {
|
||||
audio.pause();
|
||||
} else {
|
||||
audio.play().catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
function handleSeek(e) {
|
||||
const audio = audioRef.current;
|
||||
if (!audio || !isFinite(duration)) return;
|
||||
const t = Number(e.target.value);
|
||||
audio.currentTime = t;
|
||||
setCurrentTime(t);
|
||||
}
|
||||
|
||||
function handleVolumeChange(e) {
|
||||
setVolume(Number(e.target.value));
|
||||
}
|
||||
|
||||
const title = entry?.title || entry?.entry_uid || 'Unknown';
|
||||
const kind = entry?.source_kind || 'other';
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Hidden audio element */}
|
||||
<audio
|
||||
ref={audioRef}
|
||||
src={src || undefined}
|
||||
preload="auto"
|
||||
onPlay={() => setIsPlaying(true)}
|
||||
onPause={() => setIsPlaying(false)}
|
||||
onEnded={() => setIsPlaying(false)}
|
||||
onTimeUpdate={() => setCurrentTime(audioRef.current?.currentTime ?? 0)}
|
||||
onLoadedMetadata={() => setDuration(audioRef.current?.duration ?? NaN)}
|
||||
onDurationChange={() => setDuration(audioRef.current?.duration ?? NaN)}
|
||||
style={{ display: 'none' }}
|
||||
/>
|
||||
|
||||
{/* Fixed bottom bar */}
|
||||
<div
|
||||
className="audio-bar"
|
||||
style={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 100,
|
||||
background: 'var(--paper-3)',
|
||||
borderTop: '1px solid var(--line)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '16px',
|
||||
padding: '0 16px',
|
||||
height: '56px',
|
||||
fontFamily: 'var(--sans)',
|
||||
}}
|
||||
>
|
||||
{/* Left: icon + title */}
|
||||
<div
|
||||
className="audio-bar-info"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
minWidth: 0,
|
||||
flex: '0 1 220px',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
className="source-icon"
|
||||
style={{ flexShrink: 0, width: '18px', height: '18px', display: 'flex', alignItems: 'center' }}
|
||||
dangerouslySetInnerHTML={{ __html: sourceIconSvg(kind) }}
|
||||
/>
|
||||
<span
|
||||
style={{
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '0.85rem',
|
||||
color: 'var(--ink)',
|
||||
}}
|
||||
title={title}
|
||||
>
|
||||
{title}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Center: play/pause + seek + time */}
|
||||
<div
|
||||
className="audio-bar-controls"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
flex: '1 1 0',
|
||||
minWidth: 0,
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={handlePlayPause}
|
||||
aria-label={isPlaying ? 'Pause' : 'Play'}
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px',
|
||||
color: 'var(--ink)',
|
||||
flexShrink: 0,
|
||||
fontSize: '1.2rem',
|
||||
lineHeight: 1,
|
||||
}}
|
||||
>
|
||||
{isPlaying ? '⏸' : '▶'}
|
||||
</button>
|
||||
|
||||
<span
|
||||
style={{ fontSize: '0.75rem', color: 'var(--muted)', whiteSpace: 'nowrap', flexShrink: 0 }}
|
||||
>
|
||||
{formatTime(currentTime)}
|
||||
</span>
|
||||
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={isFinite(duration) ? duration : 0}
|
||||
step={0.1}
|
||||
value={isFinite(currentTime) ? currentTime : 0}
|
||||
onChange={handleSeek}
|
||||
aria-label="Seek"
|
||||
style={{ flex: 1, minWidth: 0, accentColor: 'var(--accent)' }}
|
||||
/>
|
||||
|
||||
<span
|
||||
style={{ fontSize: '0.75rem', color: 'var(--muted)', whiteSpace: 'nowrap', flexShrink: 0 }}
|
||||
>
|
||||
{formatTime(duration)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Right: volume + close */}
|
||||
<div
|
||||
className="audio-bar-right"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
flex: '0 1 160px',
|
||||
}}
|
||||
>
|
||||
<span style={{ fontSize: '0.85rem', color: 'var(--muted)', flexShrink: 0 }}>🔊</span>
|
||||
<input
|
||||
type="range"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={volume}
|
||||
onChange={handleVolumeChange}
|
||||
aria-label="Volume"
|
||||
style={{ width: '80px', accentColor: 'var(--accent)' }}
|
||||
/>
|
||||
<button
|
||||
onClick={onClose}
|
||||
aria-label="Close audio player"
|
||||
style={{
|
||||
background: 'none',
|
||||
border: 'none',
|
||||
cursor: 'pointer',
|
||||
padding: '4px',
|
||||
color: 'var(--muted)',
|
||||
fontSize: '1rem',
|
||||
lineHeight: 1,
|
||||
marginLeft: '4px',
|
||||
}}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import { useState, useEffect, useRef } from 'react'
|
||||
import { fetchEntryDetail, fetchEntryTags, assignTag, removeTag, listEntryCollections, updateEntryTitle, deleteEntry, rearchiveEntry, pollCaptureJob } from '../api'
|
||||
import { fetchEntryTags, assignTag, removeTag, listEntryCollections, updateEntryTitle, deleteEntry, rearchiveEntry, pollCaptureJob } from '../api'
|
||||
import { formatTimestamp, formatBytes, valueText, sourceIconSvg, displayPath } from '../utils'
|
||||
|
||||
const VIS_LABEL = { 0: 'Private', 1: 'Public', 2: 'Users only', 3: 'Public' }
|
||||
|
|
@ -11,8 +11,7 @@ const ExternalIcon = () => (
|
|||
</svg>
|
||||
)
|
||||
|
||||
export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet, tagNodes, onTagsRefresh, onEntryTitleChange, onEntryDeleted, humanizeTags }) {
|
||||
const [detail, setDetail] = useState(null)
|
||||
export default function ContextRail({ archiveId, selectedEntry, detail, onTagFilterSet, tagNodes, onTagsRefresh, onEntryTitleChange, onEntryDeleted, humanizeTags, onDetailRefresh, onOpenPreview, onPlay }) {
|
||||
const [tags, setTags] = useState([])
|
||||
const [assignInput, setAssignInput] = useState('')
|
||||
const [entryCollections, setEntryCollections] = useState([])
|
||||
|
|
@ -26,11 +25,11 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
const rearchivePollRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const seq = ++selectSeqRef.current
|
||||
if (rearchivePollRef.current) { clearInterval(rearchivePollRef.current); rearchivePollRef.current = null }
|
||||
setRearchiveState('idle')
|
||||
setRearchiveError('')
|
||||
if (!selectedEntry || !archiveId) {
|
||||
setDetail(null)
|
||||
setTags([])
|
||||
setEntryCollections([])
|
||||
return
|
||||
|
|
@ -38,16 +37,12 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
setEditingTitle(false)
|
||||
setTitleDraft('')
|
||||
titleCancelRef.current = false
|
||||
const seq = ++selectSeqRef.current
|
||||
setDetail(null)
|
||||
setTags([])
|
||||
Promise.all([
|
||||
fetchEntryDetail(archiveId, selectedEntry.entry_uid),
|
||||
fetchEntryTags(archiveId, selectedEntry.entry_uid),
|
||||
listEntryCollections(archiveId, selectedEntry.entry_uid),
|
||||
]).then(([det, tgs, ecs]) => {
|
||||
]).then(([tgs, ecs]) => {
|
||||
if (seq !== selectSeqRef.current) return
|
||||
setDetail(det)
|
||||
setTags(tgs)
|
||||
setEntryCollections(ecs)
|
||||
}).catch(() => {})
|
||||
|
|
@ -63,7 +58,6 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
const newTitle = titleDraft.trim() || null
|
||||
try {
|
||||
await updateEntryTitle(archiveId, selectedEntry.entry_uid, newTitle)
|
||||
setDetail(prev => prev ? { ...prev, summary: { ...prev.summary, title: newTitle } } : prev)
|
||||
onEntryTitleChange?.(selectedEntry.entry_uid, newTitle)
|
||||
} catch {
|
||||
// silently revert
|
||||
|
|
@ -111,39 +105,44 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
|
||||
async function handleRearchive() {
|
||||
if (!selectedEntry || !archiveId || rearchiveState === 'running') return
|
||||
// Capture identity at start so closure comparisons are stable
|
||||
const startSeq = selectSeqRef.current
|
||||
const entryUid = selectedEntry.entry_uid
|
||||
setRearchiveState('running')
|
||||
setRearchiveError('')
|
||||
try {
|
||||
const { job_uid } = await rearchiveEntry(archiveId, selectedEntry.entry_uid)
|
||||
// Poll for job completion at 500ms — same interval as CaptureDialog
|
||||
const { job_uid } = await rearchiveEntry(archiveId, entryUid)
|
||||
// If selection changed while waiting for the kick-off response, bail.
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
rearchivePollRef.current = setInterval(async () => {
|
||||
try {
|
||||
const job = await pollCaptureJob(archiveId, job_uid)
|
||||
if (job.status === 'completed') {
|
||||
clearInterval(rearchivePollRef.current)
|
||||
rearchivePollRef.current = null
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
setRearchiveState('done')
|
||||
// Refresh entry detail so artifact list updates
|
||||
const [det, tgs] = await Promise.all([
|
||||
fetchEntryDetail(archiveId, selectedEntry.entry_uid),
|
||||
fetchEntryTags(archiveId, selectedEntry.entry_uid),
|
||||
])
|
||||
setDetail(det)
|
||||
setTags(tgs)
|
||||
const updated = await fetchEntryTags(archiveId, entryUid)
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
setTags(updated)
|
||||
onDetailRefresh?.()
|
||||
} else if (job.status === 'failed') {
|
||||
clearInterval(rearchivePollRef.current)
|
||||
rearchivePollRef.current = null
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
setRearchiveState('error')
|
||||
setRearchiveError(job.error_text || 'Re-archive failed.')
|
||||
}
|
||||
} catch {
|
||||
clearInterval(rearchivePollRef.current)
|
||||
rearchivePollRef.current = null
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
setRearchiveState('error')
|
||||
setRearchiveError('Network error while polling.')
|
||||
}
|
||||
}, 500)
|
||||
} catch (e) {
|
||||
if (selectSeqRef.current !== startSeq) return
|
||||
setRearchiveState('error')
|
||||
setRearchiveError(e.message || 'Failed to start re-archive.')
|
||||
}
|
||||
|
|
@ -157,6 +156,20 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
['Root', detail.structured_root_relpath],
|
||||
] : []
|
||||
|
||||
const AUDIO_EXTS = new Set(['mp3','ogg','m4a','opus','wav','flac','aac'])
|
||||
const PREVIEW_EXTS = new Set(['mp4','webm','mov','mkv','avi','m4v','ogv','pdf','html','htm','jpg','jpeg','png','gif','webp','avif','svg','bmp'])
|
||||
const primaryMediaIdx = detail ? detail.artifacts.findIndex(a => a.artifact_role === 'primary_media') : -1
|
||||
const primaryMedia = primaryMediaIdx >= 0 ? detail.artifacts[primaryMediaIdx] : null
|
||||
const pmExt = primaryMedia ? primaryMedia.relpath.split('.').pop().toLowerCase() : ''
|
||||
const isAudio = primaryMedia && AUDIO_EXTS.has(pmExt)
|
||||
const primaryMediaUrl = (primaryMediaIdx >= 0 && selectedEntry)
|
||||
? `/api/archives/${archiveId}/entries/${selectedEntry.entry_uid}/artifacts/${primaryMediaIdx}`
|
||||
: null
|
||||
const isPreviewable = detail && !isAudio && (
|
||||
(detail.summary.entity_kind === 'tweet' || detail.summary.entity_kind === 'tweet_thread') ||
|
||||
(primaryMedia && PREVIEW_EXTS.has(pmExt))
|
||||
)
|
||||
|
||||
return (
|
||||
<aside className="context-rail">
|
||||
<div className="rail-eyebrow">Context</div>
|
||||
|
|
@ -208,6 +221,17 @@ export default function ContextRail({ archiveId, selectedEntry, onTagFilterSet,
|
|||
</a>
|
||||
)}
|
||||
|
||||
{isAudio && onPlay && (
|
||||
<button className="rail-preview-btn" onClick={() => onPlay(primaryMediaUrl, selectedEntry)}>
|
||||
▶ Play
|
||||
</button>
|
||||
)}
|
||||
{isPreviewable && onOpenPreview && (
|
||||
<button className="rail-preview-btn" onClick={onOpenPreview}>
|
||||
Preview
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="meta-list">
|
||||
{metaRows.filter(([, v]) => v != null && v !== '').map(([label, value]) => (
|
||||
<div key={label} className="meta-item">
|
||||
|
|
|
|||
74
frontend/src/components/IframePreview.jsx
Normal file
74
frontend/src/components/IframePreview.jsx
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
export default function IframePreview({ src, type, title, originalUrl }) {
|
||||
const displayUrl = originalUrl || src;
|
||||
const displayTitle = title || null;
|
||||
|
||||
return (
|
||||
<div
|
||||
className="preview-iframe-wrap"
|
||||
style={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}
|
||||
>
|
||||
<div
|
||||
className="preview-iframe-toolbar"
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
gap: '2px',
|
||||
padding: '6px 12px',
|
||||
borderBottom: '1px solid var(--line-soft)',
|
||||
background: 'var(--paper-2)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{displayTitle && (
|
||||
<span style={{
|
||||
fontSize: '0.85rem',
|
||||
fontWeight: 600,
|
||||
color: 'var(--ink)',
|
||||
fontFamily: 'var(--sans)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>
|
||||
{displayTitle}
|
||||
</span>
|
||||
)}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||
<span style={{
|
||||
flex: 1,
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
fontSize: '0.78rem',
|
||||
color: 'var(--muted)',
|
||||
fontFamily: 'var(--sans)',
|
||||
}}>
|
||||
{displayUrl}
|
||||
</span>
|
||||
<a
|
||||
href={src}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
style={{
|
||||
fontSize: '0.78rem',
|
||||
color: 'var(--accent)',
|
||||
textDecoration: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
fontFamily: 'var(--sans)',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
{type === 'pdf' ? 'Open PDF ↗' : 'Open in new tab ↗'}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<iframe
|
||||
src={src}
|
||||
sandbox="allow-same-origin allow-popups"
|
||||
allow="autoplay 'none'"
|
||||
referrerPolicy="no-referrer"
|
||||
style={{ flex: 1, border: 'none', width: '100%', minHeight: 0 }}
|
||||
title={displayTitle || (type === 'pdf' ? 'PDF preview' : 'Page preview')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
30
frontend/src/components/ImagePreview.jsx
Normal file
30
frontend/src/components/ImagePreview.jsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export default function ImagePreview({ src, alt }) {
|
||||
return (
|
||||
<div
|
||||
className="preview-image-wrap"
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
background: 'var(--paper-2)',
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<a href={src} target="_blank" rel="noreferrer noopener" style={{ display: 'contents' }}>
|
||||
<img
|
||||
src={src}
|
||||
alt={alt || ''}
|
||||
style={{
|
||||
objectFit: 'contain',
|
||||
maxHeight: '100%',
|
||||
maxWidth: '100%',
|
||||
display: 'block',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
40
frontend/src/components/PreviewModal.jsx
Normal file
40
frontend/src/components/PreviewModal.jsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import { useEffect } from 'react'
|
||||
import PreviewPanel from './PreviewPanel'
|
||||
|
||||
export default function PreviewModal({ archiveId, entry, detail, onClose }) {
|
||||
// Close on Escape key
|
||||
useEffect(() => {
|
||||
const handler = (e) => { if (e.key === 'Escape') onClose() }
|
||||
window.addEventListener('keydown', handler)
|
||||
return () => window.removeEventListener('keydown', handler)
|
||||
}, [onClose])
|
||||
|
||||
return (
|
||||
<div className="preview-modal-backdrop" onClick={onClose}>
|
||||
<div
|
||||
className={`preview-modal${
|
||||
detail?.summary?.entity_kind === 'tweet' ||
|
||||
detail?.summary?.entity_kind === 'tweet_thread'
|
||||
? ''
|
||||
: ' preview-modal--full'
|
||||
}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="preview-modal-header">
|
||||
<span className="preview-modal-title">{entry?.title || entry?.entry_uid || 'Preview'}</span>
|
||||
<a
|
||||
className="preview-modal-newtab"
|
||||
href={`/preview/${archiveId}/${entry?.entry_uid}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
title="Open in new tab"
|
||||
>↗</a>
|
||||
<button className="preview-modal-close" onClick={onClose} aria-label="Close preview">×</button>
|
||||
</div>
|
||||
<div className="preview-modal-body">
|
||||
<PreviewPanel archiveId={archiveId} entry={entry} detail={detail} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
85
frontend/src/components/PreviewPage.jsx
Normal file
85
frontend/src/components/PreviewPage.jsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { fetchEntryDetail } from '../api'
|
||||
import PreviewPanel from './PreviewPanel'
|
||||
|
||||
// Standalone full-page preview — rendered when the URL is /preview/:archiveId/:entryUid.
|
||||
// Auth uses the existing session cookie; no login flow needed here since the
|
||||
// main app will have set one.
|
||||
export default function PreviewPage({ archiveId, entryUid }) {
|
||||
const [detail, setDetail] = useState(null)
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [error, setError] = useState(null)
|
||||
|
||||
useEffect(() => {
|
||||
fetchEntryDetail(archiveId, entryUid)
|
||||
.then(d => { setDetail(d); setLoading(false) })
|
||||
.catch(e => { setError(e?.message || 'Failed to load entry'); setLoading(false) })
|
||||
}, [archiveId, entryUid])
|
||||
|
||||
const title = detail?.summary?.title || entryUid
|
||||
const originalUrl = detail?.summary?.original_url
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
minHeight: '100vh',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
background: 'var(--paper)',
|
||||
fontFamily: 'var(--sans)',
|
||||
}}>
|
||||
{/* Minimal topbar */}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '10px',
|
||||
padding: '10px 16px',
|
||||
borderBottom: '1px solid var(--line)',
|
||||
flexShrink: 0,
|
||||
background: 'var(--paper-2)',
|
||||
}}>
|
||||
<a
|
||||
href="/"
|
||||
style={{ color: 'var(--accent)', textDecoration: 'none', fontSize: '13px', flexShrink: 0 }}
|
||||
>← Archive</a>
|
||||
<span style={{
|
||||
flex: 1,
|
||||
fontSize: '14px',
|
||||
fontWeight: 600,
|
||||
color: 'var(--ink)',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
whiteSpace: 'nowrap',
|
||||
}}>{title}</span>
|
||||
{originalUrl && (
|
||||
<a
|
||||
href={originalUrl}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
style={{ color: 'var(--muted)', textDecoration: 'none', fontSize: '13px', flexShrink: 0 }}
|
||||
>Original ↗</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={{ flex: 1, minHeight: 0, overflow: 'auto', display: 'flex', flexDirection: 'column' }}>
|
||||
{loading && (
|
||||
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--muted)', fontSize: '14px' }}>
|
||||
Loading…
|
||||
</div>
|
||||
)}
|
||||
{error && (
|
||||
<div style={{ padding: '48px', textAlign: 'center', color: 'var(--alert)', fontSize: '14px' }}>
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{detail && (
|
||||
<PreviewPanel
|
||||
archiveId={archiveId}
|
||||
entry={detail.summary}
|
||||
detail={detail}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
153
frontend/src/components/PreviewPanel.jsx
Normal file
153
frontend/src/components/PreviewPanel.jsx
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
import VideoPreview from './VideoPreview';
|
||||
import IframePreview from './IframePreview';
|
||||
import ImagePreview from './ImagePreview';
|
||||
import TweetPreview from './TweetPreview';
|
||||
|
||||
const VIDEO_EXTS = new Set(['mp4', 'webm', 'mov', 'mkv', 'avi', 'm4v', 'ogv']);
|
||||
const AUDIO_EXTS = new Set(['mp3', 'ogg', 'm4a', 'opus', 'wav', 'flac', 'aac']);
|
||||
const IMAGE_EXTS = new Set(['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp']);
|
||||
|
||||
export default function PreviewPanel({ archiveId, entry, detail }) {
|
||||
|
||||
if (!entry) {
|
||||
return (
|
||||
<div className="preview-panel preview-panel--empty">
|
||||
<span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
||||
Select an entry to preview
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!detail) {
|
||||
return (
|
||||
<div className="preview-panel preview-panel--loading">
|
||||
<span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
||||
Loading…
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { summary, artifacts } = detail;
|
||||
const entryUid = summary.entry_uid;
|
||||
const entityKind = summary.entity_kind;
|
||||
|
||||
// 1. Tweet / tweet thread
|
||||
if (entityKind === 'tweet' || entityKind === 'tweet_thread') {
|
||||
return (
|
||||
<div className="preview-tweet-wrap">
|
||||
<TweetPreview
|
||||
archiveId={archiveId}
|
||||
entryUid={entryUid}
|
||||
artifacts={artifacts}
|
||||
entityKind={entityKind}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 2. Find primary_media artifact
|
||||
const primaryMediaIndex = artifacts.findIndex(a => a.artifact_role === 'primary_media');
|
||||
if (primaryMediaIndex === -1) {
|
||||
return (
|
||||
<div className="preview-panel preview-panel--no-preview">
|
||||
<span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
||||
No preview available
|
||||
</span>
|
||||
{artifacts.length > 0 && (
|
||||
<ul
|
||||
style={{
|
||||
marginTop: '12px',
|
||||
paddingLeft: '20px',
|
||||
fontSize: '0.8rem',
|
||||
color: 'var(--muted-2)',
|
||||
fontFamily: 'var(--sans)',
|
||||
}}
|
||||
>
|
||||
{artifacts.map((a, i) => (
|
||||
<li key={i}>{a.artifact_role}: {a.relpath}</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const primaryArtifact = artifacts[primaryMediaIndex];
|
||||
const primaryMediaUrl = `/api/archives/${archiveId}/entries/${entryUid}/artifacts/${primaryMediaIndex}`;
|
||||
const ext = primaryArtifact.relpath.split('.').pop().toLowerCase();
|
||||
|
||||
// 3. Video
|
||||
if (VIDEO_EXTS.has(ext)) {
|
||||
return (
|
||||
<div className="preview-panel">
|
||||
<VideoPreview src={primaryMediaUrl} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 4. Audio — inline player (AudioBar handles persistent playback via rail Play button)
|
||||
if (AUDIO_EXTS.has(ext)) {
|
||||
return (
|
||||
<div className="preview-panel preview-panel--audio" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '12px', padding: '24px', fontFamily: 'var(--sans)' }}>
|
||||
<span style={{ fontSize: '2rem' }}>🎵</span>
|
||||
<span style={{ color: 'var(--ink)', fontSize: '0.95rem', fontWeight: 600 }}>
|
||||
{summary.title || entryUid}
|
||||
</span>
|
||||
<audio src={primaryMediaUrl} controls style={{ marginTop: '8px', width: '100%', maxWidth: '400px' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 5. PDF
|
||||
if (ext === 'pdf') {
|
||||
return (
|
||||
<div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
|
||||
<IframePreview src={primaryMediaUrl} type="pdf"
|
||||
title={summary.title} originalUrl={summary.original_url} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 6. HTML page
|
||||
if (ext === 'html' || ext === 'htm') {
|
||||
return (
|
||||
<div className="preview-panel" style={{ flex: 1, minHeight: 0 }}>
|
||||
<IframePreview src={primaryMediaUrl} type="page"
|
||||
title={summary.title} originalUrl={summary.original_url} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 7. Image
|
||||
if (IMAGE_EXTS.has(ext)) {
|
||||
return (
|
||||
<div className="preview-panel" style={{ height: '100%' }}>
|
||||
<ImagePreview src={primaryMediaUrl} alt={summary.title || 'Image'} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// 8. Fallback
|
||||
return (
|
||||
<div className="preview-panel preview-panel--no-preview">
|
||||
<span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
||||
No preview available
|
||||
</span>
|
||||
<ul
|
||||
style={{
|
||||
marginTop: '12px',
|
||||
paddingLeft: '20px',
|
||||
fontSize: '0.8rem',
|
||||
color: 'var(--muted-2)',
|
||||
fontFamily: 'var(--sans)',
|
||||
}}
|
||||
>
|
||||
{artifacts.map((a, i) => (
|
||||
<li key={i}>{a.artifact_role}: {a.relpath}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
1269
frontend/src/components/TweetPreview.jsx
Normal file
1269
frontend/src/components/TweetPreview.jsx
Normal file
File diff suppressed because it is too large
Load diff
42
frontend/src/components/VideoPreview.jsx
Normal file
42
frontend/src/components/VideoPreview.jsx
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
|
||||
export default function VideoPreview({ src }) {
|
||||
const videoRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (videoRef.current) {
|
||||
videoRef.current.load();
|
||||
}
|
||||
}, [src]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="preview-video-wrap"
|
||||
style={{
|
||||
background: '#111',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
minHeight: '240px',
|
||||
}}
|
||||
>
|
||||
{src ? (
|
||||
<video
|
||||
ref={videoRef}
|
||||
controls
|
||||
autoPlay={false}
|
||||
style={{ width: '100%', maxHeight: '100%', display: 'block' }}
|
||||
>
|
||||
<source src={src} />
|
||||
Your browser does not support the video element.
|
||||
</video>
|
||||
) : (
|
||||
<span style={{ color: 'var(--muted)', fontFamily: 'var(--sans)', fontSize: '0.9rem' }}>
|
||||
No video available
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue