Merge pull request #143 from cloudflare/sven/MOW-119-show-video

MOW-119: show video UI

frontend/src/components/Status/Media.tsx

@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik'
+import Image from './ImageGallery'
+import Video from './Video'
+import { MediaAttachment } from '~/types'
+
+type Props = {
+	mediaAttachment: MediaAttachment
+}
+
+export default component$<Props>(({ mediaAttachment }) => {
+	return (
+		<>
+			{mediaAttachment.type === 'image' ? <Image mediaAttachment={mediaAttachment} /> : ''}
+			{mediaAttachment.type === 'video' ? <Video mediaAttachment={mediaAttachment} /> : ''}
+		</>
+	)
+})

frontend/src/components/Status/Video.tsx

@@ -0,0 +1,16 @@
+import { component$ } from '@builder.io/qwik'
+import { MediaAttachment } from '~/types'
+
+type Props = {
+	mediaAttachment: MediaAttachment
+}
+
+export default component$<Props>(({ mediaAttachment }) => {
+	return (
+		<div class="h-60">
+			<video class="object-cover w-full h-full rounded">
+				<source src={mediaAttachment.preview_url || mediaAttachment.url} type="video/mp4" />
+			</video>
+		</div>
+	)
+})

frontend/src/components/Status/index.tsx

@@ -2,7 +2,7 @@ import { component$, $, useStyles$ } from '@builder.io/qwik'
 import { Link, useNavigate } from '@builder.io/qwik-city'
 import { formatTimeAgo } from '~/utils/dateTime'
 import { Avatar } from '../avatar'
-import Image from './ImageGallery'
+import Media from './Media'
 import type { Account, MastodonStatus } from '~/types'
 import styles from './index.scss?inline'
 
@@ -48,7 +48,9 @@ export default component$((props: Props) => {
 				<div class="leading-relaxed status-content" dangerouslySetInnerHTML={status.content} />
 			</div>
 
-			{status.media_attachments.length > 0 && <Image mediaAttachment={status.media_attachments[0]} />}
+			{status.media_attachments.map((attachment) => (
+				<Media mediaAttachment={attachment} />
+			))}
 
 			{status.card && status.media_attachments.length == 0 && (
 				<a class="no-underline" href={status.card.url}>