change video

src/components/VideoAds/VideoAds.jsx

@@ -1,9 +1,19 @@
-import React from 'react';
-import { Box } from '@mui/material';
+import React, { useRef, useState } from 'react';
+import { Box, Button } from '@mui/material';
 import PropTypes from 'prop-types';
-import videoAds from "../../assets/video/amberads.mp4"
+import videoAds from "../../assets/video/amberads.mp4";
 
 const VideoAds = ({ video_url, height, width }) => {
+  const videoRef = useRef(null);
+  const [isMuted, setIsMuted] = useState(true);
+
+  const toggleMute = () => {
+    if (videoRef.current) {
+      videoRef.current.muted = !isMuted;
+      setIsMuted(!isMuted);
+    }
+  };
+
   return (
     <Box
       sx={{
@@ -11,19 +21,20 @@ const VideoAds = ({ video_url, height, width }) => {
         overflow: 'hidden',
         width: '100%',
         height: {
-          xs:230,
-          sm:330,
-          md:520,
-          lg:675,
-          xl:850
+          xs: 230,
+          sm: 330,
+          md: 520,
+          lg: 675,
+          xl: 850,
         },
       }}
     >
       <video
-        src={videoAds}
+        ref={videoRef}
+        src={video_url || videoAds}
         autoPlay
         loop
-        muted
+        muted={isMuted}
         playsInline
         style={{
           position: 'absolute',
@@ -33,6 +44,23 @@ const VideoAds = ({ video_url, height, width }) => {
           height: 'auto',
         }}
       />
+      <Button
+        onClick={toggleMute}
+        variant="contained"
+        sx={{
+          position: 'absolute',
+          bottom: 16,
+          right: 16,
+          zIndex: 1,
+          backgroundColor: 'rgba(0, 0, 0, 0.5)',
+          color: 'white',
+          '&:hover': {
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+          },
+        }}
+      >
+        {isMuted ? 'Unmute' : 'Mute'}
+      </Button>
     </Box>
   );
 };
@@ -44,7 +72,7 @@ VideoAds.propTypes = {
 };
 
 VideoAds.defaultProps = {
-  video_url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+  video_url: videoAds,
   height: '300px',
   width: '100%',
 };

src/index.js

@@ -32,8 +32,8 @@ import Maintainance from './pages/Maintainance';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Provider store={store}>
-    {/* <App /> */}
-    <Maintainance/>
+    <App />
+    {/* <Maintainance/> */}
   </Provider>
 );