ba45157d55Demonstrates serving binary content (video) via MCP resources using the
base64 blob pattern:
1. Server fetches video from CDN
2. Returns as base64 blob via `videos://{id}` resource template
3. Widget fetches resource and plays in `<video>` element
Includes multiple video sizes for testing (1MB to 150MB).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
739 B
CSS
54 lines
739 B
CSS
.main {
|
|
width: 100%;
|
|
max-width: 640px;
|
|
}
|
|
|
|
.loading {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 2rem;
|
|
gap: 1rem;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.spinner {
|
|
width: 48px;
|
|
height: 48px;
|
|
border: 4px solid #e5e7eb;
|
|
border-top-color: #3b82f6;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.error {
|
|
padding: 1rem;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.error-title {
|
|
font-weight: 600;
|
|
margin: 0 0 0.5rem 0;
|
|
}
|
|
|
|
.error p {
|
|
margin: 0;
|
|
}
|
|
|
|
.player video {
|
|
width: 100%;
|
|
max-height: 480px;
|
|
border-radius: 8px;
|
|
background-color: #000;
|
|
}
|
|
|
|
.video-info {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.875rem;
|
|
color: #6b7280;
|
|
}
|