✨ show full animation on full screen modal

mrpmohiburrahman · Jun 22, 2024 · fb49d67 · fb49d67
1 parent 1481555
commit fb49d67
Show file tree

Hide file tree

Showing 4 changed files with 172 additions and 41 deletions.
diff --git 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%;
 }
diff --git 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 (
     <div className={styles.grid}>
-      {items.map((item, index) => (
-        <div key={index} className={styles.card}>
-          <div className={styles.videoContainer}>
-            <Video title={item.Author} url={useBaseUrl(item.demo)} />
-          </div>
-          <div className={styles.cardContent}>
-            <h3 className={styles.author}>{item.Author}</h3>
-            <div className={styles.icons}>
-              {item.twitterId && (
-                <a
-                  href={`https://twitter.com/${item.twitterId}`}
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  <FaTwitter className={styles.icon} />
-                </a>
-              )}
-              {item.linkedInId && (
-                <a
-                  href={`https://linkedin.com/in/${item.linkedInId}`}
-                  target="_blank"
-                  rel="noopener noreferrer">
-                  <FaLinkedin className={styles.icon} />
-                </a>
-              )}
-              {item.personalSite && (
+      {items.map((item, index) => {
+        const videoUrl = useBaseUrl(item.demo);
+        return (
+          <div key={index} className={styles.card}>
+            <div
+              className={styles.videoContainer}
+              onClick={() => openModal(videoUrl)}>
+              <Video title={item.Author} url={videoUrl} />
+            </div>
+            <div className={styles.cardContent}>
+              <h3 className={styles.author}>{item.Author}</h3>
+              <div className={styles.icons}>
+                {item.twitterId && (
+                  <a
+                    href={`https://twitter.com/${item.twitterId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    // onClick={(e) => e.stopPropagation()}
+                  >
+                    <FaTwitter className={styles.icon} />
+                  </a>
+                )}
+                {item.linkedInId && (
+                  <a
+                    href={`https://linkedin.com/in/${item.linkedInId}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    // onClick={(e) => e.stopPropagation()}
+                  >
+                    <FaLinkedin className={styles.icon} />
+                  </a>
+                )}
+                {item.personalSite && (
+                  <a
+                    href={item.personalSite}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    // onClick={(e) => e.stopPropagation()}
+                  >
+                    <FaGlobe className={styles.icon} />
+                  </a>
+                )}
+              </div>
+              <div className={styles.source}>
                 <a
-                  href={item.personalSite}
+                  href={item.source}
                   target="_blank"
-                  rel="noopener noreferrer">
-                  <FaGlobe className={styles.icon} />
+                  rel="noopener noreferrer"
+                  className={styles.sourceButton}
+                  // onClick={(e) => e.stopPropagation()}
+                >
+                  Get Source
                 </a>
-              )}
-            </div>
-            <div className={styles.source}>
-              <a
-                href={item.source}
-                target="_blank"
-                rel="noopener noreferrer"
-                className={styles.sourceButton}>
-                Get Source
-              </a>
+              </div>
             </div>
           </div>
+        );
+      })}
+
+      <Modal
+        isOpen={modalIsOpen}
+        onRequestClose={closeModal}
+        className={styles.modal}
+        overlayClassName={styles.overlay}>
+        <div className={styles.modalContent}>
+          <video
+            src={currentVideoUrl}
+            controls
+            autoPlay
+            className={styles.fullscreenVideo}
+          />
         </div>
-      ))}
+      </Modal>
     </div>
   );
 };

diff --git 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