use media player to display video

src/components/media-player.jsx

@@ -0,0 +1,24 @@
+import { Image } from '@mantine/core';
+
+const MediaPlayer = ({ file, fileId, shouldContain }) => {
+    const isImage = () => file.type.split('/')[0] === 'image';
+    return isImage() ? (
+        <Image
+            src={'/api/files/' + (fileId ?? file.id)}
+            alt={file?.name ?? ''}
+            width={shouldContain ? undefined : 150}
+            fit={shouldContain ? 'contain' : 'cover'}
+            radius="md"
+            withPlaceholder
+        />
+    ) : (
+        <>
+            <video controls width={150}>
+                <source src={'/api/files/' + (fileId ?? file.id)} type={file.type} />
+                Sorry, your browser doesn't support videos.
+            </video>
+        </>
+    );
+};
+
+export default MediaPlayer;

src/components/select-item.jsx

@@ -1,5 +1,6 @@
-import { Card, Grid, Text, Image, Button, Center } from '@mantine/core';
+import { Card, Grid, Text, Button, Center } from '@mantine/core';
 import { useState } from 'react';
+import MediaPlayer from './media-player';
 
 const SelectorItem = ({ file, clickHandler }) => {
     const [selected, setSelected] = useState(false);
@@ -12,14 +13,7 @@ const SelectorItem = ({ file, clickHandler }) => {
         <Grid.Col span={1} key={file.id}>
             <Card shadow="sm">
                 <Card.Section>
-                    <Image
+                    <MediaPlayer file={file} />
-                        src={"/api/files/"+file.id}
-                        alt={file.name}
-                        height={100}
-                        fit="cover"
-                        radius="md"
-                        withPlaceholder
-                    />
                 </Card.Section>
                 <Center>
                     <Text order={4} mt="md">

src/pages/files/file-view.jsx

@@ -1,4 +1,5 @@
-import { Card, Text, Image, Button, Group } from '@mantine/core';
+import { Card, Text, Image, Button, Group, Center } from '@mantine/core';
+import MediaPlayer from '../../components/media-player';
 
 const FileView = ({ file, onSelect, onDelete, ...props }) => {
     // const deleteHandler = async () => {
@@ -13,7 +14,9 @@ const FileView = ({ file, onSelect, onDelete, ...props }) => {
     return (
         <Card shadow="sm" padding="md" withBorder>
             <Card.Section>
-                <Image src={'/api/files/' + file?.id ?? ''} alt={file?.name ?? ''} withPlaceholder fit="contain" />
+                <Center>
+                    <MediaPlayer file={file} shouldContain={true} />
+                </Center>
             </Card.Section>
             <Text>{file?.name ?? 'File Name'}</Text>
             <Group position="center" grow>

src/pages/playlist/content.jsx

@@ -11,6 +11,7 @@ import setNotification from '../errors/error-notification';
 import { Perm, checkPerm } from '../../tools/grant-access';
 import { useAuth } from '../../tools/auth-provider';
 import { parseTime } from '../../tools/timeUtil';
+import MediaPlayer from '../../components/media-player';
 
 const Content = ({ form, playlistId, playlist }) => {
     const [fileSelector, setFileSelector] = useState(false);
@@ -150,7 +151,7 @@ const Content = ({ form, playlistId, playlist }) => {
                         <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
                             <Flex direction="row" align="center" gap="lg" justify="flex-end">
                                 <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
-                                <Image width={150} src={'/api/files/' + form.getInputProps(`files.${index}.id`).value} />
+                                <MediaPlayer file={form.getInputProps(`files.${index}`).value} />
                                 <NumberInput
                                     required
                                     hideControls
@@ -177,7 +178,7 @@ const Content = ({ form, playlistId, playlist }) => {
                 <Paper p="xs" radius="sm" shadow="sm" withBorder spacing="xs" style={{ width: '90%' }}>
                     <Flex direction="row" align="center" gap="lg" justify="flex-end">
                         <Text>{form.getInputProps(`files.${index}.name`).value}</Text>
-                        <Image width={150} src={'/api/files/' + form.getInputProps(`files.${index}.id`).value} />
+                        <MediaPlayer file={form.getInputProps(`files.${index}`).value} />
                         <Text>Display time: {parseTime(form.getInputProps(`files.${index}.seconds`).value)}</Text>
                     </Flex>
                 </Paper>

src/pages/playlists/playlist-view-editor.jsx

@@ -2,7 +2,7 @@ import { Button, TextInput, Group, Stack } from '@mantine/core';
 import { useForm, isNotEmpty } from '@mantine/form';
 import { useEffect, useState } from 'react';
 import setNotification from '../errors/error-notification';
-import RoleSelector from './role-selector';
+import RoleSelector from '../roles/role-selector';
 
 const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
     const handleClose = (playlist) => {
@@ -72,7 +72,7 @@ const PlaylistViewEditor = ({ item, handler, buttonText, APICall }) => {
                 />
             </Stack>
             <Group position="right" mt="md">
-                <Button variant="light" color="red" onClick={handleClose}>
+                <Button variant="light" color="red" onClick={() => handleClose()}>
                     Cancel
                 </Button>
                 <Button type="submit" variant="light" color="green" loading={isLoading}>