Merge pull request Sunbird-ALL#198 from Sunbird-ALL/all-1.3-tn-dev

All 1.3 tn dev
Bhashabyasa · Nov 4, 2024 · 14cd731 · 14cd731
2 parents 7246a92 + 9c8c29b
commit 14cd731
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 15 deletions.
diff --git a/src/components/Practice/Mechanics3.jsx b/src/components/Practice/Mechanics3.jsx
@@ -15,6 +15,9 @@ import correctSound from "../../assets/audio/correct.wav";
 import wrongSound from "../../assets/audio/wrong.wav";
 import removeSound from "../../assets/audio/remove.wav";
 import VoiceAnalyser from "../../utils/VoiceAnalyser";
+import { Modal } from "@mui/material";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import CloseIcon from "@mui/icons-material/Close";
 
 const Mechanics2 = ({
   page,
@@ -54,7 +57,7 @@ const Mechanics2 = ({
 }) => {
   const [words, setWords] = useState([]);
   const [sentences, setSentences] = useState([]);
-
+  const [zoomOpen, setZoomOpen] = useState(false);
   const [selectedWord, setSelectedWord] = useState("");
   // const [loading, setLoading] = useState(false);
   const [shake, setShake] = useState(false);
@@ -255,17 +258,105 @@ const Mechanics2 = ({
                 },
               }}
             >
-              {image && (
-                <img
-                  src={image}
-                  style={{
-                    borderRadius: "20px",
-                    maxWidth: "100%",
-                    height: "clamp(150px, 20vw, 220px)",
+              <Box sx={{ position: "relative", cursor: "zoom-in" }}>
+                {image && (
+                  <img
+                    src={image}
+                    style={{
+                      borderRadius: "20px",
+                      maxWidth: "100%",
+                      height: "clamp(150px, 20vw, 220px)",
+                    }}
+                    alt=""
+                  />
+                )}
+
+                {/* Subtle gradient overlay across the top */}
+                <Box
+                  sx={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    height: "40px", // Height of the gradient overlay
+                    background:
+                      "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                    borderTopLeftRadius: "20px",
+                    borderTopRightRadius: "20px",
+                    display: "flex",
+                    alignItems: "center",
+                    paddingLeft: "8px",
                   }}
-                  alt=""
-                />
-              )}
+                >
+                  {/* Zoom icon positioned in the top-left corner */}
+                  <ZoomInIcon
+                    onClick={() => setZoomOpen(true)}
+                    sx={{ color: "white", fontSize: "22px", cursor: "pointer" }}
+                  />
+                </Box>
+              </Box>
+              <Modal
+                open={zoomOpen}
+                onClose={() => setZoomOpen(false)}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                }}
+              >
+                <Box
+                  sx={{
+                    position: "relative",
+                    outline: "none",
+                    height: "500px",
+                    width: "500px",
+                  }}
+                >
+                  {/* Subtle gradient overlay at the top of the zoomed image */}
+                  <Box
+                    sx={{
+                      position: "absolute",
+                      top: 0,
+                      left: 0,
+                      right: 0,
+                      height: "40px", // Adjust height as needed
+                      background:
+                        "linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent)",
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "flex-end",
+                      paddingRight: "8px",
+                      borderTopLeftRadius: "8px",
+                      borderTopRightRadius: "8px",
+                    }}
+                  >
+                    {/* Close icon positioned within the gradient overlay */}
+                    <CloseIcon
+                      onClick={() => setZoomOpen(false)}
+                      sx={{
+                        color: "white",
+                        fontSize: "24px",
+                        cursor: "pointer",
+                        backgroundColor: "rgba(0, 0, 0, 0.5)",
+                        borderRadius: "50%",
+                        padding: "4px",
+                      }}
+                    />
+                  </Box>
+
+                  <img
+                    src={image}
+                    alt="Zoomed content"
+                    style={{
+                      // maxWidth: "90vw",
+                      // maxHeight: "90vh",
+                      // height:"500px",
+                      width: "100%",
+                      borderRadius: "8px",
+                    }}
+                  />
+                </Box>
+              </Modal>
             </Grid>
 
             <Box

diff --git a/src/views/Practice/Practice.jsx b/src/views/Practice/Practice.jsx
@@ -716,11 +716,11 @@ const Practice = () => {
           questions[currentQuestion]?.contentSourceData || [];
         const stringLengths = contentSourceData.map((item) => item.text.length);
         const length =
-          (questions[currentQuestion]?.mechanics_data &&
+          questions[currentQuestion]?.mechanics_data &&
+          (questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
+            "mechanic_2" ||
             questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-              "mechanic_2") ||
-          questions[currentQuestion]?.mechanics_data[0]?.mechanics_id ===
-            "mechanic_1"
+              "mechanic_1")
             ? 500
             : stringLengths[0];
         window.parent.postMessage({ type: "stringLengths", length }, "*");