DarkSingularity/ds-chat
Private
Public Access
3
0 Fork 0
Code Releases 9 Activity

Play video attachments inline, with an expand option (#65)

Browse Source 
A video file previously rendered as a generic downloadable file card,
same as any other attachment. The file-serve endpoint forces
Content-Disposition: attachment for every upload as an XSS mitigation
(a same-origin-served .html/.svg executing script), which also meant a
<video> tag pointed at it couldn't play -- the browser would just try
to download it.

Carve out a strict, server-side allowlist (video/mp4, video/webm,
video/ogg -- deliberately not "every video/* type") that skips the
forced download, the same reasoning MessageImage's own endpoint
already relies on: these are content types a browser only ever
interprets as media, never as something that could execute script.
Anything else, including other video formats like .mov, still forces
a download exactly as before.

On the frontend, a video attachment with one of those content types
renders as an inline <video controls> instead of the generic file
card, with a hover-revealed expand button that calls the browser's
native Fullscreen API on the video element directly rather than
building a second lightbox component.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ksmithandClaude Sonnet 5 committed 2026-08-28 19:08:25 -06:00
1 parent 89d609f584
commit 5ec79e652f
5 files changed
+150 -2
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/MessageList.css
+38
View File
@@ -62,6 +62,44 @@
margin-bottom: 4px;
}
.message-video-wrap {
position: relative;
display: inline-block;
max-width: min(320px, 100%);
margin-bottom: 4px;
}
.message-video {
display: block;
width: 100%;
max-height: 240px;
border-radius: var(--radius);
border: 1px solid var(--ds-border);
background: var(--ds-void);
}
.message-video-expand {
position: absolute;
top: 6px;
right: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 5px;
background: rgba(0, 0, 0, 0.6);
border: none;
border-radius: 6px;
color: white;
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease;
}
.message-video-wrap:hover .message-video-expand,
.message-video-expand:focus-visible {
opacity: 1;
}
.message-file-attachment {
display: inline-flex;
align-items: center;