62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { getSigns, addSign } from '../services/signs';
|
|
import { Sign, SignVideo } from '../types/sign';
|
|
import SignComponent from './SignComponent';
|
|
import SignVideoThumbnail from './SignVideoThumbnail';
|
|
|
|
interface Props {
|
|
sign: Sign | null;
|
|
currentVideo: number | null;
|
|
setCurrentVideo: (sign_video: number | null) => void;
|
|
}
|
|
|
|
const SignVideoGrid: React.FC<Props> = ({ sign, setCurrentVideo, currentVideo }) => {
|
|
|
|
const [isHovered, setIsHovered] = React.useState(false);
|
|
|
|
const handleVideoClick = (sign_video: number) => {
|
|
setCurrentVideo(sign_video);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-5 mt-5" >
|
|
{sign != null &&
|
|
<div className={`rounded-lg w-60 h-32 ${isHovered ? 'bg-gray-300' : 'bg-gray-200'} flex items-center justify-center ${isHovered ? 'text-6xl' : 'text-4xl'}`} onMouseEnter={() => {
|
|
setIsHovered(true);
|
|
}}
|
|
onMouseLeave={() => {
|
|
setIsHovered(false);
|
|
}} onClick={
|
|
() => {
|
|
setCurrentVideo(null);
|
|
}
|
|
}>
|
|
<i className={`fas fa-camera ${isHovered ? 'text-6xl' : 'text-4xl'}`}></i>
|
|
</div>
|
|
}
|
|
{sign &&
|
|
// show videos sorted, the non accepted videos must be at the top
|
|
sign.sign_videos.sort((a, b) => {
|
|
if (a.approved && !b.approved) {
|
|
return 1;
|
|
} else if (!a.approved && b.approved) {
|
|
return -1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
}
|
|
).map((vid, i) => {
|
|
return (
|
|
<SignVideoThumbnail
|
|
key={i}
|
|
selected={currentVideo == i} sign_id={sign.id} sign_video={vid} handle_play={() => handleVideoClick(i)}
|
|
/>
|
|
);
|
|
})
|
|
}
|
|
</div >
|
|
);
|
|
};
|
|
|
|
export default SignVideoGrid;
|