[FEAT]: Add new component VideoPreview to prform video preview on full screen

Author: JinSSJ3

src/components/video-preview/VideoPreview.scss

@@ -0,0 +1,49 @@
+.video-container {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.734);
+  transform: translate(100%);
+  transition: transform 0.2s ease-in-out;
+  &.show {
+    transform: translate(0);
+  }
+  z-index: 4;
+}
+.vid-rel-container {
+  position: relative;
+  height: 80%;
+  //width: 60%;
+  max-width: 95%;
+  @media (max-width: 600px) {
+    width: 80%;
+    height: auto;
+  }
+  @media (max-width: 960px) {
+    width: 90%;
+    height: auto;
+  }
+}
+.video-full-screen {
+  //width: 100%;
+  // height: 100%;
+  //max-height: 80%;
+  //max-width: 80%;
+  position: relative;
+  transform: scale(0);
+  border-radius: 10px;
+  transition: transform 0.3s 0.2s;
+  &.show-video {
+    transform: scale(1);
+  }
+}
+.button-full-screen {
+  //top: 0;
+  //right: 0;
+  position: absolute;
+}

src/components/video-preview/VideoPreview.tsx

@@ -0,0 +1,84 @@
+import React, { FC, Fragment } from "react";
+import { useEffect } from "react";
+import { useState } from "react";
+import { useRef } from "react";
+import { Cancel } from "../icons";
+import { VideoPreviewProps } from "./VideoPreviewProps";
+import "./VideoPreview.scss";
+const VideoPreview: FC<VideoPreviewProps> = (props: VideoPreviewProps) => {
+  const { videoSrc, openVideo, onClose, autoplay, controls , style} = props;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [source, setSource] = useState<string | undefined>(undefined);
+
+  useEffect(() => {
+    if (!videoSrc) {
+      return;
+    }
+    if (typeof videoSrc === "string") {
+      setSource(videoSrc);
+    } else {
+      const newVideoSrc = URL.createObjectURL(videoSrc);
+      setSource(newVideoSrc);
+    }
+  }, [videoSrc]);
+  useEffect(() => {
+    if (source && videoRef.current) {
+      videoRef.current.load();
+    }
+  }, [source]);
+
+ 
+
+  function handleClose<T extends HTMLDivElement>(
+    e: React.MouseEvent<T, MouseEvent>
+  ): void {
+    e.stopPropagation();
+    onClose?.();
+  }
+  if (videoSrc) {
+    return (
+      <div
+        className={openVideo ? "video-container show" : "video-container"}
+        onClick={handleClose}
+      >
+        {videoSrc && openVideo && (
+          <div
+            className="vid-rel-container"
+            onClick={(evt) => {
+              evt.preventDefault();
+            }}
+          >
+            <video
+              onClick={(evt) => {
+                evt.preventDefault();
+              }}
+              //onLoadedMetadata={handleLoaded}
+              id="dropzone-ui-video"
+              controls={controls}
+              ref={videoRef}
+              className={"video-full-screen show-video"}
+              autoPlay={autoplay}
+              src={source}
+              width={"100%"}
+              height={"100%"}
+              style={style}
+            >
+              <source type="video/webm" />
+              <source type="video/ogg" />
+              <source type="video/mp4" />
+            </video>
+            <Cancel
+              color="rgba(255,255,255,0.8)"
+              onClick={handleClose}
+              colorFill="black"
+              className="button-full-screen"
+            />
+          </div>
+        )}
+      </div>
+    );
+  } else {
+    return <Fragment></Fragment>;
+  }
+};
+export default VideoPreview;

src/components/video-preview/VideoPreviewProps.ts

@@ -0,0 +1,25 @@
+import { OverridableProps } from "@unlimited-react-components/kernel";
+
+export interface VideoPreviewProps extends OverridableProps {
+    /**
+     * video source in string format or File object
+     * FileItemComponent returns this value in onWatch handler
+     */
+    videoSrc: File | string;
+    /**
+     * boolean value. Whether to open the preview or not
+     */
+    openVideo?: boolean;
+    /**
+     * handler for on Close operation
+     */
+    onClose?: Function;
+    /**
+     * boolean value. Whether to play automatically the video or not.
+     */
+    autoplay?: boolean;
+    /**
+     * boolean value. Whether to display the controls in the video player or not.
+     */
+    controls?: boolean;
+}

src/index.ts

@@ -31,6 +31,9 @@ export * from "./components/file-item/components/FileItemContainer/FileItemConta
 export { default as FullScreenPreview } from "./components/image-preview/FullScreenPreview";
 export * from "./components/image-preview/FullScreenPreview";
 
+export { default as VideoPreview } from "./components/video-preview/VideoPreview";
+export * from "./components/video-preview/VideoPreview";
+
 export { default as InputButton } from "./components/input-button/InputButton";
 export * from "./components/input-button/InputButton";