funuicss 2.0.25 → 2.5.0

package/ui/video/FunPlayer.tsx

@@ -1,221 +1,221 @@
-import React, { useState, useRef, useEffect } from 'react';
-import { PiCornersOut, PiDownload, PiFastForward, PiFileAudio, PiPause, PiPlay, PiRewind, PiSpeakerHifi, PiSpeakerLow } from 'react-icons/pi';
-import ToolTip from "../tooltip/ToolTip"
-import RowFlex from '../specials/RowFlex';
-import Button from '../button/Button'
-import Text from '../text/Text'
-import Tip from '../tooltip/Tip'
-
-interface VideoProps {
-  src: string;
-  autoPlay: boolean;
-  onDuration?: (duration: number) => void;
-}
-
-export default function Video({ src, autoPlay, onDuration }: VideoProps) {
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [isPlaying, setIsPlaying] = useState<boolean>(autoPlay);
-  const [currentTime, setCurrentTime] = useState<number>(0);
-  const [duration, setDuration] = useState<number>(0);
-  const [volume, setVolume] = useState<number>(1);
-  const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
-  const [showVolume, setShowVolume] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (!videoRef.current) return;
-
-    const handleTimeUpdate = () => {
-      setCurrentTime(videoRef.current.currentTime);
-    };
-
-    const handleDurationChange = () => {
-      const newDuration = videoRef.current.duration;
-      setDuration(newDuration);
-      onDuration && onDuration(newDuration);
-    };
-
-    videoRef.current.addEventListener('timeupdate', handleTimeUpdate);
-    videoRef.current.addEventListener('durationchange', handleDurationChange);
-
-    return () => {
-      videoRef.current?.removeEventListener('timeupdate', handleTimeUpdate);
-      videoRef.current?.removeEventListener('durationchange', handleDurationChange);
-    };
-  }, [onDuration]);
-
-  const formatTime = (time: number) => {
-    const minutes = Math.floor(time / 60);
-    const seconds = Math.floor(time % 60);
-    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-  };
-
-  const handlePlay = () => {
-    videoRef.current?.play();
-    setIsPlaying(true);
-  };
-
-  const handlePause = () => {
-    videoRef.current?.pause();
-    setIsPlaying(false);
-  };
-
-  const handleStop = () => {
-    videoRef.current?.pause();
-    videoRef.current.currentTime = 0;
-    setIsPlaying(false);
-  };
-
-  const handleRewind = () => {
-    if (videoRef.current) videoRef.current.currentTime -= 10; // Rewind 10 seconds
-  };
-
-  const handleForward = () => {
-    if (videoRef.current) videoRef.current.currentTime += 10; // Forward 10 seconds
-  };
-
-  const handleToggleFullScreen = () => {
-    if (videoRef.current) {
-      if (videoRef.current.requestFullscreen) {
-        videoRef.current.requestFullscreen();
-      } else if (videoRef.current.mozRequestFullScreen) {
-        videoRef.current.mozRequestFullScreen();
-      } else if (videoRef.current.webkitRequestFullscreen) {
-        videoRef.current.webkitRequestFullscreen();
-      } else if (videoRef.current.msRequestFullscreen) {
-        videoRef.current.msRequestFullscreen();
-      }
-      setIsFullScreen(true);
-    }
-  };
-
-//   const handleExitFullScreen = () => {
-//     if (document.exitFullscreen) {
-//       document.exitFullscreen();
-//     } else if (document.mozCancelFullScreen) {
-//       document.mozCancelFullScreen();
-//     } else if (document.webkitExitFullscreen) {
-//       document.webkitExitFullscreen();
-//     } else if (document.msExitFullscreen) {
-//       document.msExitFullscreen();
+// import React, { useState, useRef, useEffect } from 'react';
+// import { PiCornersOut, PiDownload, PiFastForward, PiFileAudio, PiPause, PiPlay, PiRewind, PiSpeakerHifi, PiSpeakerLow } from 'react-icons/pi';
+// import ToolTip from "../tooltip/ToolTip"
+// import RowFlex from '../specials/RowFlex';
+// import Button from '../button/Button'
+// import Text from '../text/Text'
+// import Tip from '../tooltip/Tip'
+
+// interface VideoProps {
+//   src: string;
+//   autoPlay: boolean;
+//   onDuration?: (duration: number) => void;
+// }
+
+// export default function Video({ src, autoPlay, onDuration }: VideoProps) {
+//   const videoRef = useRef<HTMLVideoElement>(null);
+//   const [isPlaying, setIsPlaying] = useState<boolean>(autoPlay);
+//   const [currentTime, setCurrentTime] = useState<number>(0);
+//   const [duration, setDuration] = useState<number>(0);
+//   const [volume, setVolume] = useState<number>(1);
+//   const [isFullScreen, setIsFullScreen] = useState<boolean>(false);
+//   const [showVolume, setShowVolume] = useState<boolean>(false);
+
+//   useEffect(() => {
+//     if (!videoRef.current) return;
+
+//     const handleTimeUpdate = () => {
+//       setCurrentTime(videoRef.current.currentTime);
+//     };
+
+//     const handleDurationChange = () => {
+//       const newDuration = videoRef.current.duration;
+//       setDuration(newDuration);
+//       onDuration && onDuration(newDuration);
+//     };
+
+//     videoRef.current.addEventListener('timeupdate', handleTimeUpdate);
+//     videoRef.current.addEventListener('durationchange', handleDurationChange);
+
+//     return () => {
+//       videoRef.current?.removeEventListener('timeupdate', handleTimeUpdate);
+//       videoRef.current?.removeEventListener('durationchange', handleDurationChange);
+//     };
+//   }, [onDuration]);
+
+//   const formatTime = (time: number) => {
+//     const minutes = Math.floor(time / 60);
+//     const seconds = Math.floor(time % 60);
+//     return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
+//   };
+
+//   const handlePlay = () => {
+//     videoRef.current?.play();
+//     setIsPlaying(true);
+//   };
+
+//   const handlePause = () => {
+//     videoRef.current?.pause();
+//     setIsPlaying(false);
+//   };
+
+//   const handleStop = () => {
+//     videoRef.current?.pause();
+//     videoRef.current.currentTime = 0;
+//     setIsPlaying(false);
+//   };
+
+//   const handleRewind = () => {
+//     if (videoRef.current) videoRef.current.currentTime -= 10; // Rewind 10 seconds
+//   };
+
+//   const handleForward = () => {
+//     if (videoRef.current) videoRef.current.currentTime += 10; // Forward 10 seconds
+//   };
+
+//   const handleToggleFullScreen = () => {
+//     if (videoRef.current) {
+//       if (videoRef.current.requestFullscreen) {
+//         videoRef.current.requestFullscreen();
+//       } else if (videoRef.current.mozRequestFullScreen) {
+//         videoRef.current.mozRequestFullScreen();
+//       } else if (videoRef.current.webkitRequestFullscreen) {
+//         videoRef.current.webkitRequestFullscreen();
+//       } else if (videoRef.current.msRequestFullscreen) {
+//         videoRef.current.msRequestFullscreen();
+//       }
+//       setIsFullScreen(true);
 //     }
-//     setIsFullScreen(false);
 //   };
 
-  const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTime = parseFloat(e.target.value);
-    setCurrentTime(newTime);
-    if (videoRef.current) videoRef.current.currentTime = newTime;
-  };
-
-  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newVolume = parseFloat(e.target.value);
-    setVolume(newVolume);
-    if (videoRef.current) videoRef.current.volume = newVolume;
-  };
-
-  const timePlayed = formatTime(currentTime);
-  const timeLeft = formatTime(duration - currentTime);
-
-  return (
-    <div className="vide_container">
-      <video
-        ref={videoRef}
-        autoPlay={autoPlay}
-        src={src}
-        className="fit"
-      ></video>
-      <div className="video_controls" onDoubleClick={isPlaying ? handlePause : handlePlay}>
-        <RowFlex gap={0.3} funcss="padding-5">
-          <div>
-            <Text
-              text={timePlayed}
-              size="small"
-              bold
-            />
-          </div>
-          <div className="col width-100-p">
-            <input
-              type="range"
-              min={0}
-              max={duration}
-              value={currentTime}
-              className="width-100-p"
-              style={{ height: "3px" }}
-              onChange={handleProgressBarChange}
-            />
-          </div>
-          <div>
-            <Text
-              text={timeLeft}
-              size="small"
-              bold
-            />
-          </div>
-        </RowFlex>
-        <div className="margin-top-5"></div>
-        <RowFlex gap={1} justify="space-between">
-          <div>
-            <RowFlex gap={0.5}>
-              <ToolTip>
-                <div className="width-30 height-30 pointer padding-5" onClick={isPlaying ? handlePause : handlePlay}>
-                  {isPlaying ? <PiPause /> : <PiPlay />}
-                </div>
-                <Tip tip="top" animation="ScaleUp" duration={0.5} content={isPlaying ? "Pause" : "Play"} />
-              </ToolTip>
-              <ToolTip>
-                <div className="width-30 height-30 pointer padding-5" onClick={handleRewind}>
-                  <PiRewind />
-                </div>
-                <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Back"} />
-              </ToolTip>
-              <ToolTip>
-                <div className="width-30 height-30 pointer padding-5" onClick={handleForward}>
-                  <PiFastForward />
-                </div>
-                <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Forward"} />
-              </ToolTip>
-              <div onMouseEnter={() => setShowVolume(true)} onMouseLeave={() => setShowVolume(false)}>
-                <RowFlex >
-                  <ToolTip>
-                    <div className="width-30 height-30 pointer padding-5">
-                      <PiSpeakerLow />
-                    </div>
-                    <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Volume"} />
-                  </ToolTip>
-                  {showVolume &&
-                    <input
-                      type="range"
-                      min={0}
-                      max={1}
-                      step={0.01}
-                      value={volume}
-                      className="width-100"
-                      style={{ height: "3px" }}
-                      onChange={handleVolumeChange}
-                    />
-                  }
-                </RowFlex>
-              </div>
-            </RowFlex>
-          </div>
-          <div>
-            <RowFlex gap={0.3}>
-              <ToolTip>
-                <div className="width-30 height-30 pointer padding-5" onClick={handleToggleFullScreen}>
-                  <PiCornersOut />
-                </div>
-                <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Expand"} />
-              </ToolTip>
-              <ToolTip>
-                <div className="width-30 height-30 pointer padding-5" onClick={() => { window.open(src || "", '_blank'); }}>
-                  <PiDownload />
-                </div>
-                <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Download"} />
-              </ToolTip>
-            </RowFlex>
-          </div>
-        </RowFlex>
-      </div>
-    </div>
-  );
-}
+// //   const handleExitFullScreen = () => {
+// //     if (document.exitFullscreen) {
+// //       document.exitFullscreen();
+// //     } else if (document.mozCancelFullScreen) {
+// //       document.mozCancelFullScreen();
+// //     } else if (document.webkitExitFullscreen) {
+// //       document.webkitExitFullscreen();
+// //     } else if (document.msExitFullscreen) {
+// //       document.msExitFullscreen();
+// //     }
+// //     setIsFullScreen(false);
+// //   };
+
+//   const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     const newTime = parseFloat(e.target.value);
+//     setCurrentTime(newTime);
+//     if (videoRef.current) videoRef.current.currentTime = newTime;
+//   };
+
+//   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+//     const newVolume = parseFloat(e.target.value);
+//     setVolume(newVolume);
+//     if (videoRef.current) videoRef.current.volume = newVolume;
+//   };
+
+//   const timePlayed = formatTime(currentTime);
+//   const timeLeft = formatTime(duration - currentTime);
+
+//   return (
+//     <div className="vide_container">
+//       <video
+//         ref={videoRef}
+//         autoPlay={autoPlay}
+//         src={src}
+//         className="fit"
+//       ></video>
+//       <div className="video_controls" onDoubleClick={isPlaying ? handlePause : handlePlay}>
+//         <RowFlex gap={0.3} funcss="padding-5">
+//           <div>
+//             <Text
+//               text={timePlayed}
+//               size="small"
+//               bold
+//             />
+//           </div>
+//           <div className="col width-100-p">
+//             <input
+//               type="range"
+//               min={0}
+//               max={duration}
+//               value={currentTime}
+//               className="width-100-p"
+//               style={{ height: "3px" }}
+//               onChange={handleProgressBarChange}
+//             />
+//           </div>
+//           <div>
+//             <Text
+//               text={timeLeft}
+//               size="small"
+//               bold
+//             />
+//           </div>
+//         </RowFlex>
+//         <div className="margin-top-5"></div>
+//         <RowFlex gap={1} justify="space-between">
+//           <div>
+//             <RowFlex gap={0.5}>
+//               <ToolTip>
+//                 <div className="width-30 height-30 pointer padding-5" onClick={isPlaying ? handlePause : handlePlay}>
+//                   {isPlaying ? <PiPause /> : <PiPlay />}
+//                 </div>
+//                 <Tip tip="top" animation="ScaleUp" duration={0.5} content={isPlaying ? "Pause" : "Play"} />
+//               </ToolTip>
+//               <ToolTip>
+//                 <div className="width-30 height-30 pointer padding-5" onClick={handleRewind}>
+//                   <PiRewind />
+//                 </div>
+//                 <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Back"} />
+//               </ToolTip>
+//               <ToolTip>
+//                 <div className="width-30 height-30 pointer padding-5" onClick={handleForward}>
+//                   <PiFastForward />
+//                 </div>
+//                 <Tip tip="top" animation="ScaleUp" duration={0.5} content={"10 sec Forward"} />
+//               </ToolTip>
+//               <div onMouseEnter={() => setShowVolume(true)} onMouseLeave={() => setShowVolume(false)}>
+//                 <RowFlex >
+//                   <ToolTip>
+//                     <div className="width-30 height-30 pointer padding-5">
+//                       <PiSpeakerLow />
+//                     </div>
+//                     <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Volume"} />
+//                   </ToolTip>
+//                   {showVolume &&
+//                     <input
+//                       type="range"
+//                       min={0}
+//                       max={1}
+//                       step={0.01}
+//                       value={volume}
+//                       className="width-100"
+//                       style={{ height: "3px" }}
+//                       onChange={handleVolumeChange}
+//                     />
+//                   }
+//                 </RowFlex>
+//               </div>
+//             </RowFlex>
+//           </div>
+//           <div>
+//             <RowFlex gap={0.3}>
+//               <ToolTip>
+//                 <div className="width-30 height-30 pointer padding-5" onClick={handleToggleFullScreen}>
+//                   <PiCornersOut />
+//                 </div>
+//                 <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Expand"} />
+//               </ToolTip>
+//               <ToolTip>
+//                 <div className="width-30 height-30 pointer padding-5" onClick={() => { window.open(src || "", '_blank'); }}>
+//                   <PiDownload />
+//                 </div>
+//                 <Tip tip="top" animation="ScaleUp" duration={0.5} content={"Download"} />
+//               </ToolTip>
+//             </RowFlex>
+//           </div>
+//         </RowFlex>
+//       </div>
+//     </div>
+//   );
+// }