Allow Shuffling Videos

front/src/api/api.ts

@@ -740,6 +740,7 @@ export default class API {
 			artist?: Identifier;
 			album?: Identifier;
 			song?: Identifier;
+			random?: number;
 		},
 		sort?: SortingParameters<typeof SongSortingKeys>,
 		include?: I[],

front/src/components/infinite/infinite-resource-view/infinite-video-view.tsx

@@ -25,15 +25,90 @@ import InfiniteView from "../infinite-view";
 import InfiniteResourceViewProps from "./infinite-resource-view-props";
 import VideoTile from "../../tile/video-tile";
 import { PaginationParameters } from "../../../models/pagination";
+import { PlayIcon, ShuffleIcon } from "../../icons";
+import { PlayerActions, usePlayerContext } from "../../../contexts/player";
+import {
+	InfiniteQuery,
+	QueryClient,
+	prepareMeeloInfiniteQuery,
+	useQueryClient,
+} from "../../../api/use-query";
 
-const InfiniteVideoView = <T extends VideoWithRelations<"artist">>(
-	props: InfiniteResourceViewProps<T, typeof SongSortingKeys> &
+const playVideosAction = (
+	emptyPlaylist: PlayerActions["emptyPlaylist"],
+	playTrack: PlayerActions["playTrack"],
+	playAfter: PlayerActions["playAfter"],
+	queryClient: QueryClient,
+	query: () => InfiniteQuery<VideoWithRelations<"artist" | "featuring">>,
+) => {
+	emptyPlaylist();
+	queryClient.client
+		.fetchInfiniteQuery(prepareMeeloInfiniteQuery(query))
+		.then(async (res) => {
+			const videos = res.pages.flatMap(({ items }) => items);
+			let i = 0;
+			for (const video of videos) {
+				if (i == 0) {
+					playTrack(video);
+				} else {
+					playAfter(video);
+				}
+				i++;
+			}
+		});
+};
+
+const InfiniteVideoView = <
+	T extends VideoWithRelations<"artist" | "featuring">,
+>(
+	props: InfiniteResourceViewProps<
+		T,
+		typeof SongSortingKeys,
+		{ random?: number }
+	> &
 		Omit<ComponentProps<typeof VideoTile>, "video">,
 ) => {
 	const router = useRouter();
+	const queryClient = useQueryClient();
 	const [options, setOptions] =
 		useState<OptionState<typeof SongSortingKeys>>();
-
+	const query = {
+		sortBy: options?.sortBy ?? props.initialSortingField ?? "name",
+		order: options?.order ?? props.initialSortingOrder ?? "asc",
+		view: "grid",
+		library: options?.library ?? null,
+	} as const;
+	const { emptyPlaylist, playAfter, playTrack } = usePlayerContext();
+	const playAction = {
+		label: "playAll",
+		icon: <PlayIcon />,
+		onClick: () => {
+			playVideosAction(
+				emptyPlaylist,
+				playTrack,
+				playAfter,
+				queryClient,
+				() => props.query(query),
+			);
+		},
+	} as const;
+	const shuffleAction = {
+		label: "shuffle",
+		icon: <ShuffleIcon />,
+		onClick: () => {
+			playVideosAction(
+				emptyPlaylist,
+				playTrack,
+				playAfter,
+				queryClient,
+				() =>
+					props.query({
+						...query,
+						random: Math.floor(Math.random() * 10000),
+					}),
+			);
+		},
+	} as const;
 	return (
 		<>
 			<Controls
@@ -44,6 +119,7 @@ const InfiniteVideoView = <T extends VideoWithRelations<"artist">>(
 				router={props.light == true ? undefined : router}
 				defaultLayout={"grid"}
 				disableLayoutToggle
+				actions={[playAction, shuffleAction]}
 			/>
 			<InfiniteView
 				view={options?.view ?? "grid"}

front/src/pages/artists/[slugOrId]/videos.tsx

@@ -73,10 +73,11 @@ const ArtistSongPage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({
 			<InfiniteVideoView
 				initialSortingField={props?.sortBy}
 				initialSortingOrder={props?.order}
-				query={({ sortBy, order, library }) =>
+				query={({ sortBy, order, library, random }) =>
 					API.getVideos(
 						{
 							artist: artistIdentifier,
+							random,
 							library: library ?? undefined,
 						},
 						{ sortBy, order },

front/src/pages/videos/index.tsx

@@ -51,9 +51,9 @@ const LibraryVideosPage: Page<GetPropsTypesFrom<typeof prepareSSR>> = ({
 			<InfiniteVideoView
 				initialSortingField={props?.sortBy}
 				initialSortingOrder={props?.order}
-				query={({ library, sortBy, order }) =>
+				query={({ library, sortBy, order, random }) =>
 					API.getVideos(
-						{ library: library ?? undefined },
+						{ library: library ?? undefined, random },
 						{ sortBy, order },
 						["artist", "featuring"],
 					)

server/src/video/video.controller.ts

@@ -47,11 +47,11 @@ export class VideoController {
 		@RelationIncludeQuery(SongQueryParameters.AvailableAtomicIncludes)
 		include: SongQueryParameters.RelationInclude,
 	) {
-		return this.videoService.getVideos(
+		return this.videoService.getMany(
 			selector,
 			paginationParameters,
 			include,
-			sort,
+			selector.random ?? sort,
 		);
 	}
 }

server/src/video/video.service.spec.ts

@@ -59,7 +59,7 @@ describe("Video Service", () => {
 
 	describe("Get Songs With Videos", () => {
 		it("should return the songs With video", async () => {
-			const videoSongs = await videoService.getVideos({});
+			const videoSongs = await videoService.getMany({});
 			expect(videoSongs.length).toBe(1);
 			expect(videoSongs[0]).toStrictEqual({
 				...dummyRepository.songA1,
@@ -70,11 +70,11 @@ describe("Video Service", () => {
 			});
 		});
 		it("should return an empty list (pagination)", async () => {
-			const videoSongs = await videoService.getVideos({}, { skip: 1 });
+			const videoSongs = await videoService.getMany({}, { skip: 1 });
 			expect(videoSongs.length).toBe(0);
 		});
 		it("should return songs with their artist", async () => {
-			const videoSongs = await videoService.getVideos(
+			const videoSongs = await videoService.getMany(
 				{},
 				{},
 				{ artist: true },

server/src/video/video.service.ts

@@ -19,9 +19,14 @@
 import { Injectable } from "@nestjs/common";
 import { PaginationParameters } from "src/pagination/models/pagination-parameters";
 import PrismaService from "src/prisma/prisma.service";
-import { formatPaginationParameters } from "src/repository/repository.utils";
+import {
+	formatPaginationParameters,
+	sortItemsUsingOrderedIdList,
+} from "src/repository/repository.utils";
 import SongQueryParameters from "src/song/models/song.query-params";
 import SongService from "src/song/song.service";
+import { Prisma, Song, Track } from "@prisma/client";
+import { shuffle } from "src/utils/shuffle";
 
 @Injectable()
 export default class VideoService {
@@ -30,21 +35,78 @@ export default class VideoService {
 		private songService: SongService,
 	) {}
 
+	static formatManyWhereInput(
+		where: SongQueryParameters.ManyWhereInput,
+	): Prisma.SongWhereInput {
+		return {
+			OR: [
+				SongService.formatManyWhereInput(where),
+				{
+					group: {
+						versions: {
+							some: SongService.formatManyWhereInput(where),
+						},
+					},
+				},
+			],
+			AND: {
+				tracks: {
+					some: {
+						type: "Video",
+					},
+				},
+			},
+		};
+	}
+
+	private async getManyRandomIds(
+		where: SongQueryParameters.ManyWhereInput,
+		shuffleSeed: number,
+		pagination?: PaginationParameters,
+	) {
+		const ids = await this.prismaService.song
+			.findMany({
+				where: VideoService.formatManyWhereInput(where),
+				select: { id: true },
+				orderBy: { id: "asc" },
+				cursor: pagination?.afterId
+					? { id: pagination.afterId }
+					: undefined,
+			})
+			.then((items) => items.map(({ id }) => id));
+		return shuffle(shuffleSeed, ids).slice(
+			pagination?.skip ?? 0,
+			pagination?.take,
+		);
+	}
+
 	/**
 	 * Get songs with at least one video track
 	 * The songs are returned with its first video track
 	 * @param where the query parameters to find the songs
 	 * @param pagination the pagination parameters
 	 * @param include the relations to include with the returned songs
 	 */
-	async getVideos<
+	async getMany<
 		I extends Omit<SongQueryParameters.RelationInclude, "tracks">,
 	>(
 		where: SongQueryParameters.ManyWhereInput,
 		pagination?: PaginationParameters,
 		include?: I,
-		sort?: SongQueryParameters.SortingParameter,
-	) {
+		sort?: SongQueryParameters.SortingParameter | number,
+	): Promise<(Song & { track: Track })[]> {
+		if (typeof sort == "number") {
+			const randomIds = await this.getManyRandomIds(
+				where,
+				sort,
+				pagination,
+			);
+			return this.getMany(
+				{ ...where, id: { in: randomIds } },
+				undefined,
+				include,
+			).then((items) => sortItemsUsingOrderedIdList(randomIds, items));
+		}
 		return this.prismaService.song
 			.findMany({
 				orderBy: sort?.sortBy
@@ -81,27 +143,7 @@ export default class VideoService {
 					},
 				},
 				...formatPaginationParameters(pagination),
-				where: {
-					OR: [
-						SongService.formatManyWhereInput(where),
-						{
-							group: {
-								versions: {
-									some: SongService.formatManyWhereInput(
-										where,
-									),
-								},
-							},
-						},
-					],
-					AND: {
-						tracks: {
-							some: {
-								type: "Video",
-							},
-						},
-					},
-				},
+				where: VideoService.formatManyWhereInput(where),
 			})
 			.then((songs) =>
 				songs.map(({ tracks, ...song }) => ({