feat(video): ✨ added video player modal

Author: abhishekmg

src/icons/actionIcons/playIcon.tsx

@@ -1,14 +1,22 @@
+import { type PointerEvent } from "react";
+
 const PlayIcon = ({
 	className,
 	size = "40",
+	onClick,
+	onPointerDown,
 }: {
 	className: string;
+	onClick?: () => void;
+	onPointerDown?: (event: PointerEvent) => void;
 	size?: string;
 }) => (
 	<svg
 		className={className}
 		height={size}
 		id="play"
+		onClick={onClick}
+		onPointerDown={onPointerDown}
 		viewBox="0 0 256 256"
 		width={size}
 	>

src/pageComponents/dashboard/cardSection/index.tsx

@@ -27,6 +27,7 @@ import DefaultUserIcon from "../../../icons/user/defaultUserIcon";
 import {
 	useLoadersStore,
 	useMiscellaneousStore,
+	useModalStore,
 } from "../../../store/componentStore";
 import {
 	type BookmarkViewDataTypes,
@@ -59,6 +60,7 @@ import {
 import "node_modules/video-react/dist/video-react.css";
 
 import PlayIcon from "../../../icons/actionIcons/playIcon";
+import VideoModal from "../modals/videoModal";
 
 import ListBox from "./listBox";
 
@@ -120,6 +122,12 @@ const CardSection = ({
 	const toggleIsSearchLoading = useLoadersStore(
 		(state) => state.toggleIsSearchLoading,
 	);
+	const toggleShowVideoModal = useModalStore(
+		(state) => state.toggleShowVideoModal,
+	);
+	const setSelectedVideoId = useMiscellaneousStore(
+		(state) => state.setSelectedVideoId,
+	);
 
 	const categoryData = queryClient.getQueryData([CATEGORIES_KEY, userId]) as {
 		data: CategoriesData[];
@@ -436,6 +444,8 @@ const CardSection = ({
 		width: number,
 		type: string,
 	) => {
+		const isVideo = isBookmarkVideo(type);
+
 		const imgClassName = classNames({
 			"min-h-[48px] min-w-[80px] max-h-[48px] max-w-[80px] object-cover rounded":
 				cardTypeCondition === "list",
@@ -455,6 +465,7 @@ const CardSection = ({
 		});
 
 		const figureClassName = classNames({
+			relative: isVideo,
 			"mr-3": cardTypeCondition === "list",
 			"h-[48px] w-[80px] ": cardTypeCondition === "list",
 			"w-full h-[194px] ": cardTypeCondition === "card",
@@ -530,19 +541,27 @@ const CardSection = ({
 			return null;
 		};
 
-		const isVideo = isBookmarkVideo(type);
-
-		// const playSvgClassName = classNames({
-		// 	absolute: true,
-		// 	"top-[43%] left-[43%]":
-		// 		cardTypeCondition === "moodboard" || cardTypeCondition === "card",
-		// 	"top-[13%] left-[27%]": cardTypeCondition === "list",
-		// });
+		const playSvgClassName = classNames({
+			"hover:fill-slate-500 transition ease-in-out delay-50": true,
+			absolute: true,
+			"top-[43%] left-[43%]":
+				cardTypeCondition === "moodboard" || cardTypeCondition === "card",
+			"top-[13%] left-[27%]": cardTypeCondition === "list",
+		});
 
 		return (
 			!isNull(imgLogic()) && (
 				<figure className={figureClassName}>
-					{/* {isVideo ? <PlayIcon className={playSvgClassName} /> : null}{" "} */}
+					{isVideo && (
+						<PlayIcon
+							className={playSvgClassName}
+							onClick={() => {
+								toggleShowVideoModal();
+								setSelectedVideoId(id);
+							}}
+							onPointerDown={(event) => event.stopPropagation()}
+						/>
+					)}
 					{isVideo ? null : null} {imgLogic()}
 				</figure>
 			)
@@ -795,27 +814,30 @@ const CardSection = ({
 	});
 
 	return (
-		<div
-			className={listWrapperClass}
-			// style={{ height: "calc(100vh - 270px)"}}
-		>
-			<ListBox
-				aria-label="Categories"
-				bookmarksColumns={bookmarksColumns}
-				bookmarksList={bookmarksList}
-				cardTypeCondition={cardTypeCondition}
-				isPublicPage={isPublicPage}
-				onBulkBookmarkDelete={onBulkBookmarkDelete}
-				onCategoryChange={onCategoryChange}
-				selectionMode="multiple"
+		<>
+			<div
+				className={listWrapperClass}
+				// style={{ height: "calc(100vh - 270px)"}}
 			>
-				{renderSortByCondition()?.map((item) => (
-					<Item key={item?.id} textValue={item?.id?.toString()}>
-						{renderBookmarkCardTypes(item)}
-					</Item>
-				))}
-			</ListBox>
-		</div>
+				<ListBox
+					aria-label="Categories"
+					bookmarksColumns={bookmarksColumns}
+					bookmarksList={bookmarksList}
+					cardTypeCondition={cardTypeCondition}
+					isPublicPage={isPublicPage}
+					onBulkBookmarkDelete={onBulkBookmarkDelete}
+					onCategoryChange={onCategoryChange}
+					selectionMode="multiple"
+				>
+					{renderSortByCondition()?.map((item) => (
+						<Item key={item?.id} textValue={item?.id?.toString()}>
+							{renderBookmarkCardTypes(item)}
+						</Item>
+					))}
+				</ListBox>
+			</div>
+			<VideoModal listData={listData} />
+		</>
 	);
 };
 

src/pageComponents/dashboard/cardSection/option.tsx

@@ -93,12 +93,12 @@ const Option = ({
 				onClick={(event) => {
 					event.preventDefault();
 					// open on single click
-					if (isPublicPage || isVideo) {
+					if (isPublicPage) {
 						window.open(url, "_blank");
 					}
 
 					// open on double click
-					if (event.detail === 2 && !isPublicPage && !isTrashPage && !isVideo) {
+					if (event.detail === 2 && !isPublicPage && !isTrashPage) {
 						window.open(url, "_blank");
 					}
 				}}

src/pageComponents/dashboard/modals/videoModal.tsx

@@ -0,0 +1,50 @@
+import { useEffect } from "react";
+import find from "lodash/find";
+
+import Modal from "../../../components/modal";
+import {
+	useMiscellaneousStore,
+	useModalStore,
+} from "../../../store/componentStore";
+import { type SingleListData } from "../../../types/apiTypes";
+
+const VideoModal = ({ listData }: { listData: SingleListData[] }) => {
+	const showVideoModal = useModalStore((state) => state.showVideoModal);
+	const toggleShowVideoModal = useModalStore(
+		(state) => state.toggleShowVideoModal,
+	);
+	const selectedVideoId = useMiscellaneousStore(
+		(state) => state.selectedVideoId,
+	);
+	const setSelectedVideoId = useMiscellaneousStore(
+		(state) => state.setSelectedVideoId,
+	);
+
+	useEffect(() => {
+		if (!showVideoModal) {
+			setSelectedVideoId(null);
+		}
+	}, [setSelectedVideoId, showVideoModal]);
+
+	const selectedVideoData = find(
+		listData,
+		(item) => selectedVideoId === item?.id,
+	);
+
+	return (
+		<Modal
+			open={showVideoModal}
+			setOpen={() => toggleShowVideoModal()}
+			wrapperClassName="w-[65.4%] h-[82%] rounded-2xl outline-none"
+		>
+			{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+			<video
+				className="h-full w-full rounded-2xl"
+				controls
+				src={selectedVideoData?.url}
+			/>
+		</Modal>
+	);
+};
+
+export default VideoModal;

src/store/componentStore.ts

@@ -33,6 +33,11 @@ export const useModalStore = create<ModalStoreState>((set) => ({
 		set((state) => ({
 			showSettingsModal: !state.showSettingsModal,
 		})),
+	showVideoModal: false,
+	toggleShowVideoModal: () =>
+		set((state) => ({
+			showVideoModal: !state.showVideoModal,
+		})),
 }));
 
 export const useLoadersStore = create<LoadersStoreState>((set) => ({
@@ -74,4 +79,7 @@ export const useMiscellaneousStore = create<MiscellaneousStoreState>((set) => ({
 	setCurrentSettingsPage: (
 		value: MiscellaneousStoreState["currentSettingsPage"],
 	) => set(() => ({ currentSettingsPage: value })),
+	selectedVideoId: null,
+	setSelectedVideoId: (value: number | null) =>
+		set(() => ({ selectedVideoId: value })),
 }));

src/types/componentStoreTypes.ts

@@ -4,11 +4,13 @@ export type ModalStoreState = {
 	showDeleteBookmarkWarningModal: boolean;
 	showSettingsModal: boolean;
 	showShareCategoryModal: boolean;
+	showVideoModal: boolean;
 	toggleShareCategoryModal: () => void;
 	toggleShowAddBookmarkShortcutModal: () => void;
 	toggleShowClearTrashWarningModal: () => void;
 	toggleShowDeleteBookmarkWarningModal: () => void;
 	toggleShowSettingsModal: () => void;
+	toggleShowVideoModal: () => void;
 };
 
 export type LoadersStoreState = {
@@ -26,13 +28,15 @@ export type MiscellaneousStoreState = {
 	currentSettingsPage: "change-email" | "delete" | "main";
 	isCardDragging: boolean;
 	searchText: string;
+	selectedVideoId: number | null;
 	setAddScreenshotBookmarkId: (value: number | undefined) => void;
 	setCurrentBookmarkView: (value: BookmarksViewTypes) => void;
 	setCurrentSettingsPage: (
 		value: MiscellaneousStoreState["currentSettingsPage"],
 	) => void;
 	setIsCardDragging: (value: boolean) => void;
 	setSearchText: (value: string) => void;
+	setSelectedVideoId: (id: number | null) => void;
 	setShareCategoryId: (id: number | undefined) => void;
 	setShowSidePane: (value: boolean) => void;
 	shareCategoryId: number | undefined;