diff --git a/frontend/app/components/videos/Card.module.css b/frontend/app/components/videos/Card.module.css
index 9482e508..0b905f2a 100644
--- a/frontend/app/components/videos/Card.module.css
+++ b/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;
diff --git a/frontend/app/components/videos/Card.tsx b/frontend/app/components/videos/Card.tsx
index fb95de10..f7619d67 100644
--- a/frontend/app/components/videos/Card.tsx
+++ b/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 =
-
{video.processing && (
{t('processingOverlayText')}
@@ -208,6 +219,17 @@ const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel =
{video.type.toUpperCase()}
+ {selectable && (
+
+ onSelectionChange(event.currentTarget.checked)}
+ aria-label={t('selectVideoCheckboxLabel')}
+ size="sm"
+ />
+
+ )}
+
{(showMenu && hasPermission(UserRole.Archiver)) && (
)}
@@ -218,4 +240,4 @@ const VideoCard = ({ video, showProgress = true, showMenu = true, showChannel =
);
}
-export default VideoCard;
\ No newline at end of file
+export default VideoCard;
diff --git a/frontend/app/components/videos/ChannelVideos.tsx b/frontend/app/components/videos/ChannelVideos.tsx
index f37b75a7..a89165c0 100644
--- a/frontend/app/components/videos/ChannelVideos.tsx
+++ b/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;
\ No newline at end of file
+export default ChannelVideos;
diff --git a/frontend/app/components/videos/Grid.tsx b/frontend/app/components/videos/Grid.tsx
index fd69ca1b..6dd17465 100644
--- a/frontend/app/components/videos/Grid.tsx
+++ b/frontend/app/components/videos/Grid.tsx
@@ -1,11 +1,20 @@
-import { Box, Center, Group, Pagination, SimpleGrid, ActionIcon, NumberInput, MultiSelect, Text, Select, Flex } from "@mantine/core";
-import { IconMinus, IconPlus } from "@tabler/icons-react";
-import { useRef, useState, useEffect } from "react";
+import { Box, Button, Center, Checkbox, Group, Menu, Modal, Pagination, SimpleGrid, ActionIcon, NumberInput, MultiSelect, Text, Select, Flex } from "@mantine/core";
+import { IconHourglassEmpty, IconHourglassHigh, IconLock, IconLockOpen, IconMinus, IconMovie, IconPhoto, IconPlaylistAdd, IconPlus, IconTrash } from "@tabler/icons-react";
+import { useRef, useState, useEffect, useMemo } from "react";
import type { NumberInputHandlers } from "@mantine/core";
import VideoCard from "./Card";
-import { Video, VideoOrder, VideoSortBy, VideoType } from "@/app/hooks/useVideos";
+import { useGenerateSpriteThumbnails, useGenerateStaticThumbnail, useLockVideo, Video, VideoOrder, VideoSortBy, VideoType } from "@/app/hooks/useVideos";
import GanymedeLoadingText from "../utils/GanymedeLoadingText";
import { useTranslations } from "next-intl";
+import { useAxiosPrivate } from "@/app/hooks/useAxios";
+import { useDeletePlayback, useMarkVideoAsWatched } from "@/app/hooks/usePlayback";
+import { showNotification } from "@mantine/notifications";
+import { useDisclosure } from "@mantine/hooks";
+import PlaylistBulkAddModalContent from "../playlist/BulkAddModalContent";
+import MultiDeleteVideoModalContent from "../admin/video/MultiDeleteModalContent";
+import useAuthStore from "@/app/store/useAuthStore";
+import { UserRole } from "@/app/hooks/useAuthentication";
+import { useQueryClient } from "@tanstack/react-query";
export type VideoGridProps = {
videos: T[];
@@ -22,6 +31,7 @@ export type VideoGridProps = {
showChannel?: boolean;
showMenu?: boolean;
showProgress?: boolean;
+ enableSelection?: boolean;
};
const VideoGrid = ({
@@ -39,14 +49,37 @@ const VideoGrid = ({
showChannel = false,
showMenu = true,
showProgress = true,
+ enableSelection = true,
}: VideoGridProps) => {
const t = useTranslations("VideoComponents");
+ const axiosPrivate = useAxiosPrivate();
+ const queryClient = useQueryClient();
+ const { hasPermission } = useAuthStore();
+ const canBulkManage = hasPermission(UserRole.Archiver);
+ const canBulkDelete = hasPermission(UserRole.Admin);
+ const selectionEnabled = enableSelection && canBulkManage;
const handlersRef = useRef(null);
// Local state to handle the input value while typing
const [localLimit, setLocalLimit] = useState(videoLimit);
const [videoTypes, setVideoTypes] = useState([]);
const [sortBy, setSortBy] = useState(VideoSortBy.Date);
const [order, setOrder] = useState(VideoOrder.Desc);
+ const [selectedVideos, setSelectedVideos] = useState>({});
+ const [bulkActionLoading, setBulkActionLoading] = useState(false);
+ const [bulkMenuOpened, setBulkMenuOpened] = useState(false);
+ const [playlistModalOpened, { open: openPlaylistModal, close: closePlaylistModal }] = useDisclosure(false);
+ const [multiDeleteModalOpened, { open: openMultiDeleteModal, close: closeMultiDeleteModal }] = useDisclosure(false);
+ const selectedVideoList = useMemo(() => Object.values(selectedVideos), [selectedVideos]);
+ const selectedVideoIdSet = useMemo(
+ () => new Set(selectedVideoList.map((video) => video.id)),
+ [selectedVideoList]
+ );
+
+ const markAsWatchedMutate = useMarkVideoAsWatched();
+ const deletePlaybackMutate = useDeletePlayback();
+ const lockVideoMutate = useLockVideo();
+ const generateStaticThumbnailMutate = useGenerateStaticThumbnail();
+ const generateSpriteThumbnailsMutate = useGenerateSpriteThumbnails();
useEffect(() => {
setLocalLimit(videoLimit);
@@ -118,10 +151,192 @@ const VideoGrid = ({
onVideoLimitChange(newValue);
};
+ const handleVideoSelectionChange = (video: T, selected: boolean) => {
+ setSelectedVideos((current) => {
+ const next = { ...current };
+ if (selected) {
+ next[video.id] = video;
+ } else {
+ delete next[video.id];
+ }
+ return next;
+ });
+ };
+
+ const handleSelectAllOnPage = (selected: boolean) => {
+ setSelectedVideos((current) => {
+ const next = { ...current };
+ videos.forEach((video) => {
+ if (selected) {
+ next[video.id] = video;
+ } else {
+ delete next[video.id];
+ }
+ });
+ return next;
+ });
+ };
+
+ const runBulkOperation = async (
+ operation: (video: T) => Promise,
+ successMessage: string,
+ onSuccess?: () => Promise | void
+ ) => {
+ if (selectedVideoList.length === 0) return;
+ try {
+ setBulkActionLoading(true);
+ const results = await Promise.allSettled(
+ selectedVideoList.map((video) => Promise.resolve().then(() => operation(video)))
+ );
+ const successCount = results.filter((result) => result.status === "fulfilled").length;
+ const failedResults = results.filter((result) => result.status === "rejected");
+ const failureCount = failedResults.length;
+
+ if (onSuccess && successCount > 0) {
+ await onSuccess();
+ }
+
+ failedResults.forEach((result) => {
+ console.error(result.reason);
+ });
+
+ showNotification({
+ title:
+ failureCount === 0
+ ? successMessage
+ : failureCount === results.length
+ ? t("error")
+ : successMessage,
+ message:
+ failureCount === 0
+ ? `${successMessage} (${successCount}/${results.length})`
+ : `${successMessage} (${successCount}/${results.length}) • ${failureCount} failed`,
+ color:
+ failureCount === 0
+ ? undefined
+ : failureCount === results.length
+ ? "red"
+ : "yellow",
+ });
+ } catch (error) {
+ showNotification({
+ title: t("error"),
+ message: error instanceof Error ? error.message : String(error),
+ color: "red",
+ });
+ console.error(error);
+ } finally {
+ setBulkActionLoading(false);
+ }
+ };
+
+ const handleMarkVideosAsWatched = async () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ await runBulkOperation(
+ (video) =>
+ markAsWatchedMutate.mutateAsync({
+ axiosPrivate,
+ videoId: video.id,
+ invalidatePlaybackQuery: false,
+ }),
+ t("markedVideosAsWatchedNotification"),
+ async () => {
+ await queryClient.invalidateQueries({ queryKey: ["playback-data"] });
+ }
+ );
+ };
+
+ const handleMarkVideosAsUnwatched = async () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ await runBulkOperation(
+ (video) =>
+ deletePlaybackMutate.mutateAsync({
+ axiosPrivate,
+ videoId: video.id,
+ invalidatePlaybackQuery: false,
+ }),
+ t("markedVideosAsUnwatchedNotification"),
+ async () => {
+ await queryClient.invalidateQueries({ queryKey: ["playback-data"] });
+ }
+ );
+ };
+
+ const handleLockVideos = async (locked: boolean) => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ await runBulkOperation(
+ (video) =>
+ lockVideoMutate.mutateAsync({
+ axiosPrivate,
+ videoId: video.id,
+ locked,
+ invalidateVideoQueries: false,
+ }),
+ t("videosLockedNotification", { status: locked ? t("locked") : t("unlocked") }),
+ async () => {
+ await Promise.all([
+ queryClient.invalidateQueries({ queryKey: ["videos"] }),
+ queryClient.invalidateQueries({ queryKey: ["channel_videos"] }),
+ queryClient.invalidateQueries({ queryKey: ["playlist_videos"] }),
+ queryClient.invalidateQueries({ queryKey: ["search"] }),
+ ]);
+ }
+ );
+ };
+
+ const handleGenerateStaticThumbnails = async () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ await runBulkOperation(
+ (video) =>
+ generateStaticThumbnailMutate.mutateAsync({
+ axiosPrivate,
+ videoId: video.id,
+ }),
+ t("bulkGenerateStaticThumbnailsNotification")
+ );
+ };
+
+ const handleGenerateSpriteThumbnails = async () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ await runBulkOperation(
+ (video) =>
+ generateSpriteThumbnailsMutate.mutateAsync({
+ axiosPrivate,
+ videoId: video.id,
+ }),
+ t("bulkGenerateSpriteThumbnailsNotification")
+ );
+ };
+
+ const handleCloseMultiDeleteModal = () => {
+ closeMultiDeleteModal();
+ setSelectedVideos({});
+ };
+
+ const handleOpenPlaylistModal = () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ openPlaylistModal();
+ };
+
+ const handleOpenMultiDeleteModal = () => {
+ if (bulkActionLoading) return;
+ setBulkMenuOpened(false);
+ openMultiDeleteModal();
+ };
+
if (isPending) {
return ;
}
+ const allVisibleSelected = videos.length > 0 && videos.every((video) => selectedVideoIdSet.has(video.id));
+ const someVisibleSelected = videos.some((video) => selectedVideoIdSet.has(video.id)) && !allVisibleSelected;
+
return (
@@ -156,6 +371,101 @@ const VideoGrid = ({