44 lines
1.5 KiB
React
44 lines
1.5 KiB
React
|
import React from 'react'
|
||
|
|
import { resolveExerciseMediaFileUrl } from '../utils/exerciseMediaUrl'
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Ein ausgeliefertes exercise_media für Übungslisten (Liste + Inline gleiche Darstellung).
|
||
|
|
* @param {{ media: object, exerciseId: number }} props
|
||
|
|
*/
|
||
|
|
export default function ExerciseMediaEmbed({ exerciseId, media }) {
|
||
|
|
if (!media || exerciseId == null) return null
|
||
|
|
if (media.embed_url) {
|
||
|
|
return (
|
||
|
|
<div style={{ marginTop: '0.5rem' }}>
|
||
|
|
<a href={media.embed_url} target="_blank" rel="noreferrer">
|
||
|
|
{media.embed_url}
|
||
|
|
</a>
|
||
|
|
{media.embed_platform && (
|
||
|
|
<span style={{ color: 'var(--text2)', marginLeft: '0.5rem', fontSize: '0.8rem' }}>
|
||
|
|
({media.embed_platform})
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
const src = resolveExerciseMediaFileUrl(exerciseId, media)
|
||
|
|
if (!src) return null
|
||
|
|
if (media.media_type === 'image' || (media.mime_type && media.mime_type.startsWith('image/'))) {
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt={media.title || media.original_filename || ''}
|
||
|
|
style={{ maxWidth: '100%', borderRadius: '8px', marginTop: '0.5rem' }}
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
if (media.media_type === 'video' || (media.mime_type && media.mime_type.startsWith('video/'))) {
|
||
|
|
return <video src={src} controls style={{ width: '100%', marginTop: '0.5rem', borderRadius: '8px' }} />
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<a href={src} target="_blank" rel="noreferrer" style={{ display: 'inline-block', marginTop: '0.5rem' }}>
|
||
|
|
{media.title || media.original_filename || 'Datei öffnen'}
|
||
|
|
</a>
|
||
|
|
)
|
||
|
|
}
|