From fb49d677bed5da1b8fb949dc1173418ace48b5cf Mon Sep 17 00:00:00 2001 From: "MD. MOHIBUR RAHMAN" <35300157+mrpmohiburrahman@users.noreply.github.com> Date: Sun, 23 Jun 2024 05:55:12 +0600 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20show=20full=20animation=20on=20full?= =?UTF-8?q?=20screen=20modal?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/gallery/Gallery.module.css | 50 ++++++++++ components/gallery/Gallery.tsx | 126 +++++++++++++++++--------- package.json | 1 + pnpm-lock.yaml | 36 ++++++++ 4 files changed, 172 insertions(+), 41 deletions(-) diff --git a/components/gallery/Gallery.module.css b/components/gallery/Gallery.module.css index 7ffb053..b1e06f7 100644 --- a/components/gallery/Gallery.module.css +++ b/components/gallery/Gallery.module.css @@ -42,6 +42,7 @@ flex-direction: column; height: 350px; transition: background 0.3s ease; + /* Removed cursor: pointer; */ } .videoContainer { @@ -51,6 +52,8 @@ padding-top: 56.25%; /* 16:9 Aspect Ratio */ overflow: hidden; + cursor: pointer; + /* Added cursor: pointer; */ } .cardContent { @@ -76,6 +79,8 @@ .icon { font-size: 1.2rem; color: var(--icon-color); + cursor: pointer; + /* Added cursor: pointer; */ } .source { @@ -90,8 +95,53 @@ border-radius: 4px; font-size: 0.9rem; transition: background 0.3s ease; + cursor: pointer; + /* Added cursor: pointer; */ } .sourceButton:hover { background: darken(var(--button-background), 10%); +} + +.modal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + height: 100vh; + width: auto; + max-width: 90%; + background: #000; + outline: none; + border: none; + border-radius: 8px; + overflow: hidden; + z-index: 1001; + display: flex; + justify-content: center; + align-items: center; +} + +.overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.8); + z-index: 1000; +} + +.modalContent { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.fullscreenVideo { + max-height: 100%; + width: auto; + max-width: 100%; } \ No newline at end of file diff --git a/components/gallery/Gallery.tsx b/components/gallery/Gallery.tsx index ca23cd9..5325d39 100644 --- a/components/gallery/Gallery.tsx +++ b/components/gallery/Gallery.tsx @@ -1,59 +1,103 @@ // src/components/gallery/Gallery.js -import React from "react"; +import React, { useState } from "react"; import styles from "./Gallery.module.css"; import Video from "../video/Video"; -import useBaseUrl from "@docusaurus/useBaseUrl"; import { FaTwitter, FaLinkedin, FaGlobe } from "react-icons/fa"; +import Modal from "react-modal"; +import useBaseUrl from "@docusaurus/useBaseUrl"; + +Modal.setAppElement("#__docusaurus"); const Gallery = ({ items }) => { + const [modalIsOpen, setModalIsOpen] = useState(false); + const [currentVideoUrl, setCurrentVideoUrl] = useState(""); + + const openModal = (url) => { + setCurrentVideoUrl(url); + setModalIsOpen(true); + }; + + const closeModal = () => { + setModalIsOpen(false); + setCurrentVideoUrl(""); + }; + return (
- {items.map((item, index) => ( -
-
-
-
-

{item.Author}

-
- {item.twitterId && ( - - - - )} - {item.linkedInId && ( - - - - )} - {item.personalSite && ( + {items.map((item, index) => { + const videoUrl = useBaseUrl(item.demo); + return ( +
+
openModal(videoUrl)}> +
+
+ ); + })} + + +
+
- ))} +
); }; diff --git a/package.json b/package.json index 4b50822..477c7ad 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "react": "^18.3.1", "react-dom": "^18.3.1", "react-icons": "^5.2.1", + "react-modal": "^3.16.1", "url-loader": "^4.1.1" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7c66eb7..f3c2445 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ importers: react-icons: specifier: ^5.2.1 version: 5.2.1(react@18.3.1) + react-modal: + specifier: ^3.16.1 + version: 3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) url-loader: specifier: ^4.1.1 version: 4.1.1(file-loader@6.2.0(webpack@5.91.0))(webpack@5.91.0) @@ -2180,6 +2183,9 @@ packages: resolution: {integrity: sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==} engines: {node: '>=10'} + exenv@1.2.2: + resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==} + express@4.19.2: resolution: {integrity: sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==} engines: {node: '>= 0.10.0'} @@ -3751,6 +3757,9 @@ packages: peerDependencies: react: ^16.13.1 || ^17.0.0 || ^18.0.0 + react-lifecycles-compat@3.0.4: + resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} + react-loadable-ssr-addon-v5-slorber@1.0.1: resolution: {integrity: sha512-lq3Lyw1lGku8zUEJPDxsNm1AfYHBrO9Y1+olAYwpUJ2IGFBskM0DMKok97A6LWUpHm+o7IvQBOWu9MLenp9Z+A==} engines: {node: '>=10.13.0'} @@ -3758,6 +3767,13 @@ packages: react-loadable: '*' webpack: '>=4.41.1 || 5.x' + react-modal@3.16.1: + resolution: {integrity: sha512-VStHgI3BVcGo7OXczvnJN7yT2TWHJPDXZWyI/a0ssFNhGZWsPmB8cF0z33ewDXq4VfYMO1vXgiv/g8Nj9NDyWg==} + engines: {node: '>=8'} + peerDependencies: + react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 + react-router-config@5.1.1: resolution: {integrity: sha512-DuanZjaD8mQp1ppHjgnnUnyOlqYXZVjnov/JzFhjLEwd3Z4dYjMSnqrEzzGThH47vpCOqPPwJM2FtthLeJ8Pbg==} peerDependencies: @@ -4387,6 +4403,9 @@ packages: vfile@6.0.1: resolution: {integrity: sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==} + warning@4.0.3: + resolution: {integrity: sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==} + watchpack@2.4.1: resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} engines: {node: '>=10.13.0'} @@ -7468,6 +7487,8 @@ snapshots: signal-exit: 3.0.7 strip-final-newline: 2.0.0 + exenv@1.2.2: {} + express@4.19.2: dependencies: accepts: 1.3.8 @@ -9381,12 +9402,23 @@ snapshots: dependencies: react: 18.3.1 + react-lifecycles-compat@3.0.4: {} + react-loadable-ssr-addon-v5-slorber@1.0.1(@docusaurus/react-loadable@6.0.0(react@18.3.1))(webpack@5.91.0): dependencies: '@babel/runtime': 7.24.5 react-loadable: '@docusaurus/react-loadable@6.0.0(react@18.3.1)' webpack: 5.91.0 + react-modal@3.16.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + exenv: 1.2.2 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-lifecycles-compat: 3.0.4 + warning: 4.0.3 + react-router-config@5.1.1(react-router@5.3.4(react@18.3.1))(react@18.3.1): dependencies: '@babel/runtime': 7.24.5 @@ -10116,6 +10148,10 @@ snapshots: unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 + warning@4.0.3: + dependencies: + loose-envify: 1.4.0 + watchpack@2.4.1: dependencies: glob-to-regexp: 0.4.1