feat: bulk video actions

frontend/app/components/videos/Card.module.css

@@ -21,6 +21,17 @@
   position: relative;
 }
 
+.selectionCheckboxInline {
+  display: flex;
+  align-items: center;
+  margin-left: var(--mantine-spacing-xs);
+  opacity: 0.75;
+}
+
+.selectionCheckboxInline:hover {
+  opacity: 1;
+}
+
 .videoImage {
   pointer-events: none;
   cursor: default;

frontend/app/components/videos/Card.tsx

@@ -1,5 +1,5 @@
 import { Video } from "@/app/hooks/useVideos";
-import { Badge, Card, Image, Progress, Tooltip, Text, Title, Group, Center, Avatar, Flex, ThemeIcon, LoadingOverlay, Loader, Box } from "@mantine/core";
+import { Badge, Card, Image, Progress, Tooltip, Text, Title, Group, Center, Avatar, Flex, ThemeIcon, LoadingOverlay, Loader, Box, Checkbox } from "@mantine/core";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import dayjs from "dayjs";
@@ -26,9 +26,21 @@ type Props = {
   showMenu: boolean;
   showChannel: boolean;
   showViewCount?: boolean;
+  selectable?: boolean;
+  selected?: boolean;
+  onSelectionChange?: (selected: boolean) => void;
 }
 
-const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel = true, showViewCount = true }: Props) => {
+const VideoCard = ({
+  video,
+  showProgress = true,
+  showMenu = true,
+  showChannel = true,
+  showViewCount = true,
+  selectable = false,
+  selected = false,
+  onSelectionChange = () => { },
+}: Props) => {
   const t = useTranslations('VideoComponents')
   const { isLoggedIn, hasPermission } = useAuthStore()
   const [thumbnailError, setThumbnailError] = useState(false);
@@ -62,7 +74,6 @@ const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel =
       <Link href={`/videos/${video.id}`}>
         <Card.Section>
           <div className={classes.videoImageWrapper}>
-
             {video.processing && (
               <LoadingOverlay visible zIndex={5} overlayProps={{ radius: "sm", blur: 1 }} loaderProps={{
                 children: <div><Text size="xl">{t('processingOverlayText')}</Text>
@@ -208,6 +219,17 @@ const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel =
             {video.type.toUpperCase()}
           </Badge>
 
+          {selectable && (
+            <Box pr={4} className={classes.selectionCheckboxInline}>
+              <Checkbox
+                checked={selected}
+                onChange={(event) => onSelectionChange(event.currentTarget.checked)}
+                aria-label={t('selectVideoCheckboxLabel')}
+                size="sm"
+              />
+            </Box>
+          )}
+
           {(showMenu && hasPermission(UserRole.Archiver)) && (
             <VideoMenu video={video} />
           )}
@@ -218,4 +240,4 @@ const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel =
   );
 }
 
-export default VideoCard;
+export default VideoCard;

frontend/app/components/videos/ChannelVideos.tsx

@@ -1,7 +1,12 @@
 // ChannelVideos.tsx
 import { useState } from "react";
 import { Channel } from "@/app/hooks/useChannels";
-import { useFetchVideosFilter, VideoOrder, VideoSortBy, VideoType } from "@/app/hooks/useVideos";
+import {
+  useFetchVideosFilter,
+  VideoOrder,
+  VideoSortBy,
+  VideoType,
+} from "@/app/hooks/useVideos";
 import useSettingsStore from "@/app/store/useSettingsStore";
 import VideoGrid from "./Grid";
 import GanymedeLoadingText from "../utils/GanymedeLoadingText";
@@ -58,4 +63,4 @@ const ChannelVideos = ({ channel }: Props) => {
   );
 };
 
-export default ChannelVideos;
+export default ChannelVideos;