Merge pull request #2 from scalefocus/feature/ACC-1069/be_support_for_video_files

Support for video files, ACC-1069. FE video files support in Upload box

Author: kolev-sf

src/components/ImageGallery.tsx

@@ -83,8 +83,8 @@ export const ImageGallery: React.FC = () => {
 						.flat()
 						.map((thumbnail: IThumbnail, index) => (
 							<Grid item xs={1} key={thumbnail.id}>
-								<Paper elevation={0} onClick={() => openPreview(index)}>
-									<ImageThumbnail id={thumbnail.id} />
+								<Paper elevation={0} onClick={() => openPreview(index)}>									
+								<ImageThumbnail id={thumbnail.id} mediaType={thumbnail.mediaType} />
 								</Paper>
 							</Grid>
 						))}
@@ -102,7 +102,7 @@ export const ImageGallery: React.FC = () => {
 					onClose={closePreview}
 					handleNext={handleNext}
 					handlePrev={handlePrev}
-					image={imageIds[currentImage]}
+					media={imageIds[currentImage]}
 					disablePrevButton={disablePrevButton}
 					disableNextButton={disableNextButton}
 				/>

src/components/ImageThumbnail.tsx

@@ -1,28 +1,45 @@
-import { Box, Skeleton } from '@mui/material';
+import PlayCircleIcon from '@mui/icons-material/PlayCircle';
+import { Box, IconButton, Skeleton } from '@mui/material';
 import { useQuery } from '@tanstack/react-query';
 import { getThumbnail } from 'api/api';
 
-const ImageThumbnail = ({ id }: { id: string }) => {
+const ImageThumbnail = ({ id, mediaType }: { id: string, mediaType?: string }) => {
 	const { data: url, isLoading } = useQuery({
 		queryKey: ['getThumbnail', id],
 		queryFn: () => getThumbnail(id),
 		refetchOnWindowFocus: false,
 	});
 
 	return (
-		<Box sx={{width: "100%", aspectRatio: '1/1'}}>
+		<Box sx={{width: "100%", aspectRatio: '1/1', position: 'relative'}}>
 			{isLoading ? (
 				<Skeleton variant="rectangular" width="100%" height="100%" />
 			) : (
-				<img
-					src={url}
-					alt="thumbnail"
-					style={{
-						width: '100%',
-						aspectRatio: '1/1',
-						objectFit: 'cover',
-					}}
-				/>
+				<>
+					<img
+						src={url}
+						alt="thumbnail"
+						style={{
+							width: '100%',
+							aspectRatio: '1/1',
+							objectFit: 'cover',
+						}}
+					/>
+					{ mediaType === "video" && (
+						<Box display="flex" alignItems="center">
+							<IconButton
+								sx={{
+									position: 'absolute',
+									top: 0,
+									right: 0,
+									color: 'white',
+								}}
+							>
+								<PlayCircleIcon />
+							</IconButton>
+						</Box>
+				)}
+				</>
 			)}
 		</Box>
 	);

src/components/Preview.tsx

@@ -12,15 +12,17 @@ import {
 	DialogContent,
 	Typography,
 } from '@mui/material';
+import CardMedia from '@mui/material/CardMedia';
 import { useQuery } from '@tanstack/react-query';
 import { getPhoto } from 'api/api';
 import { useEffect, useState } from 'react';
 
 interface PreviewProps {
 	isOpen: boolean;
-	image: {
+	media: {
 		id: string;
 		dateCreated: string;
+		mediaType?: string;
 	};
 	handlePrev: () => void;
 	handleNext: () => void;
@@ -31,19 +33,19 @@ interface PreviewProps {
 
 const Preview = ({
 	isOpen,
-	image,
+	media,
 	onClose,
 	handlePrev,
 	handleNext,
 	disablePrevButton,
 	disableNextButton,
 }: PreviewProps) => {
 	const { data: url, isLoading } = useQuery({
-		queryKey: ['getPhoto', image.id],
-		queryFn: () => getPhoto(image.id),
+		queryKey: ['getPhoto', media.id],
+		queryFn: () => getPhoto(media.id),
 	});
 
-	const date = new Date(image.dateCreated).toDateString();
+	const date = new Date(media.dateCreated).toDateString();
 
 	const [zoom, setZoom] = useState(false);
 
@@ -75,7 +77,7 @@ const Preview = ({
 			document.removeEventListener('keydown', handleKeyLeft);
 			document.removeEventListener('keydown', handleKeyRight);
 		};
-	}, [image]);
+	}, [media]);
 
 	return (
 		<>
@@ -102,7 +104,7 @@ const Preview = ({
 							backgroundColor: 'rgba(0, 0, 0)',
 						}}
 					>
-						<img src={url} alt="image" />
+						{ media.mediaType !== "video" && (<img src={url} alt="image" />)}
 					</Box>
 				</Container>
 			)}
@@ -199,7 +201,7 @@ const Preview = ({
 										position: 'relative',
 									}}
 								>
-									<img
+									{ media.mediaType !== "video" && (<img
 										src={url}
 										alt="image"
 										style={{
@@ -208,7 +210,18 @@ const Preview = ({
 											maxHeight: '100%',
 											cursor: 'zoom-in',
 										}}
-									/>
+									/>)}
+									{ media.mediaType === "video" && (<CardMedia
+										component='video'
+										src={url}
+										sx={{ 
+											display: 'flex', 
+											objectFit: 'contain',
+											maxWidth: '100%',
+											maxHeight: '100%'
+										}}
+										controls
+									/>)}
 								</Box>
 							)}
 						</Box>

src/components/UploadImage.tsx

@@ -113,7 +113,7 @@ const Upload: React.FC = () => {
 					{isPending ? 'Uploading' : 'Browse Files'}
 					<input
 						type="file"
-						accept="image/*"
+						accept="image/*, video/*"
 						onChange={(event) => {
 							const files = event.target.files;
 

src/types/types.ts

@@ -53,11 +53,12 @@ export enum UserRoles {
 	USER,
 }
 
-
 export interface IThumbnail {
 	id: string;
 	dateCreated: string;
+	mediaType?: string;
 }
+
 export interface IGetObjects {
 	lastId: string;
 	properties: IThumbnail[];