npm - cafe-video-player - Versions diffs - 1.7.0 → 1.8.0 - Mend

cafe-video-player 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (209) hide show

package/.eslintrc.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

package/next.config.mjs ADDED Viewed

@@ -0,0 +1,12 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    images: {
+        remotePatterns: [
+            {
+                hostname: "**"
+            }
+        ]
+    }
+};
+export default nextConfig;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "cafe-video-player",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "main": "./dist/index.js",
   "module": "./dist/index.cjs",

package/postcss.config.mjs ADDED Viewed

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+export default config;

package/public/next.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/public/vercel.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/src/app/favicon.ico ADDED Viewed

Binary file

package/src/app/globals.css ADDED Viewed

@@ -0,0 +1,6 @@
+@import url(../videoPlayerLibrary/styles/styles.css);
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/app/layout.tsx ADDED Viewed

@@ -0,0 +1,24 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+const inter = Inter({ subsets: ["latin"] });
+export const metadata: Metadata = {
+  title: "Create Next App",
+};
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body id="alan" className={inter.className}>
+        {children}
+        <div id="dialog-react-root-videoPlayer"/>
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx ADDED Viewed

@@ -0,0 +1,58 @@
+import VideoPlayerLibrary from "../videoPlayerLibrary";
+import { IParams } from "../videoPlayerLibrary/helpers/interfaces/interfaces";
+export default function Home() {
+  const params: IParams = {
+    // type: "mp4",
+    // "e-url": "aHR0cHM6Ly9hYnJlaGFtcmFoaS5pci9vL3RXMHFONUQwWFB2R04wdGhJQUM1UUEv",
+    // "e-cover": "aHR0cHM6Ly9zdGF0aWMudmVjdGVlenkuY29tL3N5c3RlbS9yZXNvdXJjZXMvdGh1bWJuYWlscy8wMjUvMDY3Lzc2Mi9zbWFsbC80ay1iZWF1dGlmdWwtY29sb3JmdWwtYWJzdHJhY3Qtd2FsbHBhcGVyLXBob3RvLmpwZw==",
+    // bannerAlt: "aaa"
+    type: "vod",
+    id: "6623",
+    scrollElementId: "alan",
+  }
+  return (
+    <div>
+      <div className="pl-flex pl-flex-col desktop:pl-flex-row pl-gap-5 tablet:pl-mt-10">
+        <div className="pl-flex pl-flex-col pl-w-full desktop:pl-mr-10">
+          <VideoPlayerLibrary params={params} />
+          <div>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit sapiente aliquid ut repudiandae corrupti laudantium perspiciatis distinctio reprehenderit adipisci, nemo, obcaecati inventore voluptate natus cum minus, magnam aspernatur alias. Nulla.
+            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ipsam rem optio consequuntur soluta excepturi culpa minima minus, earum sequi nisi eius aliquid corporis! Labore, ex temporibus! Ducimus nisi eveniet tenetur?
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero exercitationem cum nesciunt voluptate at, dolorem doloremque maxime iste expedita ad accusantium animi perferendis odio amet. Quod, vero officia? Optio, laudantium?
+            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque ab delectus exercitationem modi, id distinctio! Nam libero itaque ipsam minima, animi illum nostrum dicta quisquam reprehenderit dolore eligendi neque soluta?
+          </div>
+        </div>
+        <aside className="pl-w-[800px]">
+          fweafwfwaef
+        </aside>
+      </div>
+    </div>
+  );
+}

package/src/videoPlayerLibrary/components/custom-components/backwardForward/backwardForward.tsx ADDED Viewed

@@ -0,0 +1,155 @@
+import { useEffect, useRef, useState } from "react";
+import { shallowEqual } from "react-redux";
+import { useDoubleTap } from "use-double-tap";
+import { useAppDispatch, useAppSelector } from "../../../helpers/redux/hooks";
+import { IBackwardForwardProps } from "../../../helpers/interfaces/interfaces";
+import { setActiveElements } from "../../../helpers/redux/slices/controllerSlice";
+import { videoTag } from "../../../helpers/constants";
+import { handleBackwardForward } from "../../../helpers/redux/actions/controller.actions";
+import { ConditionName } from "../../../helpers/interfaces/enums";
+import { conditions } from "../../../helpers/conditions/conditions";
+import { handleRippleCircle } from "../../../helpers/helpers";
+import IMAGES from "../../../images/importImages";
+import Image from "next/legacy/image";
+const hideTime = 1000;
+const BackwardForward = ({
+    type,
+    isRightDoubleTouched,
+    isLeftDoubleTouched,
+    setIsRightDoubleTouched,
+    setIsLeftDoubleTouched
+}: IBackwardForwardProps) => {
+    const [backwardForwardCount, setBackwardForwardCount] = useState<number>(15);
+    const [hide, setHide] = useState<boolean>(false);
+    const backwardForwardCountRef = useRef<number>(backwardForwardCount);
+    const dispatch = useAppDispatch();
+    const { duration } = useAppSelector(({ controller: { currentTime, duration, showMiniPlayer } }) => ({ currentTime, duration, showMiniPlayer }), shallowEqual);
+    const { videoElementSizeInfo } = useAppSelector(
+        ({ videoData: { videoElementSizeInfo, params } }) => ({ videoElementSizeInfo, params }),
+        shallowEqual
+    );
+    const timeoutRef = useRef<any>(null);
+    useEffect(() => {
+        backwardForwardCountRef.current = backwardForwardCount;
+    }, [backwardForwardCount]);
+    let doubleTouch: any = undefined;
+    doubleTouch = useDoubleTap((event) => {
+        if (["touchBackward", "touchForward"].includes(type)) {
+            event.stopPropagation();
+            if (type === "touchBackward" && setIsLeftDoubleTouched) setIsLeftDoubleTouched(true);
+            else if (type === "touchForward" && setIsRightDoubleTouched) setIsRightDoubleTouched(true);
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = setTimeout(() => setHide(true), hideTime);
+        }
+    }, 200);
+    useEffect(() => {
+        if (hide) {
+            setHide(false);
+            dispatch(setActiveElements(false));
+            if (isRightDoubleTouched && setIsRightDoubleTouched) {
+                setIsRightDoubleTouched(false);
+                if (videoTag().duration - videoTag().currentTime <= backwardForwardCountRef.current) handleBackwardForward(type, videoTag().duration);
+                else handleBackwardForward(type, backwardForwardCountRef.current);
+                setBackwardForwardCount(15);
+            } else if (isLeftDoubleTouched && setIsLeftDoubleTouched) {
+                setIsLeftDoubleTouched(false);
+                if (videoTag().currentTime <= backwardForwardCountRef.current) handleBackwardForward(type, 0);
+                else handleBackwardForward(type, backwardForwardCountRef.current);
+                setBackwardForwardCount(15);
+            }
+        }
+    }, [hide]);
+    const handleTouchStart = (event: any) => {
+        setBackwardForwardCount((prev) => prev + 15);
+        if (conditions(ConditionName.isTouchScreenLandscape)) handleRippleCircle(event, type);
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setHide(true), hideTime);
+    };
+    let component;
+    if (["backward", "forward"].includes(type)) {
+        component = (
+            <div
+                className={`${
+                    !conditions(ConditionName.isTouchScreen) && "hover:pl-scale-125"
+                } pl-transition-transform pl-ease-in-out pl-cursor-pointer ${
+                    type === "backward" && (videoTag().currentTime >= 15 ? "pl-opacity-100" : "pl-opacity-30 pl-cursor-default hover:pl-scale-100")
+                } ${
+                    type === "forward" &&
+                    (duration - videoTag().currentTime >= 15 ? "pl-opacity-100" : "pl-opacity-30 pl-cursor-default hover:pl-scale-100")
+                }}`}
+                onContextMenu={(event) => event.preventDefault()}
+            >
+                <Image
+                    alt={type === "backward" ? "backward-icon" : "forward-icon"}
+                    src={type === "backward" ? IMAGES.backward15 : IMAGES.forward15}
+                    width={24}
+                    height={24}
+                    onClick={() => handleBackwardForward(type, backwardForwardCount)}
+                    onDoubleClick={(event: any) => event.stopPropagation()}
+                />
+            </div>
+        );
+    } else if (["touchBackward", "touchForward"].includes(type)) {
+        component = (
+            <div
+                id={type}
+                className={`pl-relative pl-flex pl-flex-col pl-justify-center pl-items-center pl-gap-2 pl-overflow-hidden ${
+                    type === "touchBackward" ? "pl-rounded-r-full" : "pl-rounded-l-full"
+                }`}
+                style={{ width: videoElementSizeInfo.width, height: videoElementSizeInfo.width }}
+                {...doubleTouch}
+            >
+                {(isRightDoubleTouched || isLeftDoubleTouched) && (
+                    <div
+                        className={`pl-w-full pl-h-full pl-flex pl-flex-col pl-justify-center pl-items-center pl-gap-2 pl-p-5 pl-bg-secondary-100/[0.3]`}
+                        onTouchStart={handleTouchStart}
+                    >
+                        <div
+                            className={`${
+                                type === "touchBackward" ? "pl-arrow-left" : "pl-arrow-right pl-gap-2"
+                            } pl-flex pl-justify-center pl-items-center`}
+                        >
+                            <Image
+                                alt="arrow-left-icon"
+                                src={IMAGES.arrowLeft}
+                                className={`${type === "touchForward" && "pl-rotate-180"}`}
+                                width={24}
+                                height={24}
+                            />
+                            <Image
+                                alt="arrow-left-icon"
+                                src={IMAGES.arrowLeft}
+                                className={`${type === "touchForward" && "pl-rotate-180"}`}
+                                width={24}
+                                height={24}
+                            />
+                            <Image
+                                alt="arrow-left-icon"
+                                src={IMAGES.arrowLeft}
+                                className={`${type === "touchForward" && "pl-rotate-180"}`}
+                                width={24}
+                                height={24}
+                            />
+                        </div>
+                        <p className="pl-text-center pl-text-[14px] pl-font-normal pl-text-white">{backwardForwardCount} ثانیه</p>
+                    </div>
+                )}
+            </div>
+        );
+    }
+    return <>{component}</>;
+};
+export default BackwardForward;

package/src/videoPlayerLibrary/components/custom-components/elapsedTime/elapsedTime.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import { shallowEqual } from "react-redux";
+import { useAppSelector } from "../../../helpers/redux/hooks";
+import { secondsToHMS } from "../../../helpers/helpers";
+import { ConditionName } from "../../../helpers/interfaces/enums";
+import { conditions } from "../../../helpers/conditions/conditions";
+const ElapsedTime = () => {
+    const { duration, currentTime } = useAppSelector(
+        ({ controller: { duration, currentTime } }) => ({ duration, currentTime }),
+        shallowEqual
+    );
+    useAppSelector(
+        ({ videoData: { videoElementSizeInfo, params } }) => ({ videoElementSizeInfo, params }),
+        shallowEqual
+    );
+    return (
+        <>
+            <div
+                className={`pl-mr-auto !pl-text-white pl-w-full pl-max-w-max pl-text-[12px] pl-font-bold ${conditions(ConditionName.isFullScreen) ? "pl-ml-8" : "pl-ml-4"} ${conditions(ConditionName.isTouchScreenPortrait) && "!pl-ml-0"}`}
+            >
+                <span>{secondsToHMS(duration)}</span>
+                <span> / </span>
+                <span>{secondsToHMS(currentTime)}</span>
+            </div>
+        </>
+    );
+};
+export default ElapsedTime;

package/src/videoPlayerLibrary/components/custom-components/footer/controllbar/controllbar.tsx ADDED Viewed

@@ -0,0 +1,53 @@
+import { memo } from "react";
+import { shallowEqual } from "react-redux";
+import FullScreen from "../../fullScreen/fullScreen";
+import PictureInPicture from "../../pictureInPicture/pictureInPicture";
+import SoundVolume from "../../soundVolume/soundVolume";
+import Settings from "../../settings/settings";
+import { useAppSelector } from "../../../../helpers/redux/hooks";
+import { ConditionName } from "../../../../helpers/interfaces/enums";
+import { conditions } from "../../../../helpers/conditions/conditions";
+import Speed from "../../speed/speed";
+import QualityLevels from "../../qualityLevels/qualityLevels";
+import ElapsedTime from "../../elapsedTime/elapsedTime";
+import Unlock from "../../lockUnlock/unlock";
+import SubtitleIcon from "../../subtitles/subtitleIcon";
+const Controlbar = () => {
+    useAppSelector(({ controller: { isFullScreen, showMiniPlayer } }) => ({ isFullScreen, showMiniPlayer }), shallowEqual);
+    useAppSelector(
+        ({ videoData: { videoElementSizeInfo, params } }) => ({ videoElementSizeInfo, params }),
+        shallowEqual
+    );
+    let styles = "";
+    if (conditions(ConditionName.isTouchScreen)) {
+        if (conditions(ConditionName.isFullScreen)) styles = "pl-mx-6"
+        else styles = "pl-mx-4"
+    } else {
+        if (conditions(ConditionName.isFullScreen)) styles = "pl-mx-8"
+        else styles = "pl-mx-4"
+    }
+    return (
+        <div id="player-controllbar" className={`pl-flex pl-justify-between pl-items-center ${styles}`}>
+            <div
+                className={`pl-flex pl-items-center pl-gap-5`}
+            >
+                {!conditions(ConditionName.showMiniPlayer) && <FullScreen />}
+                {conditions(ConditionName.isTouchScreenLandscape) && <Unlock />}
+                {conditions(ConditionName.showPictureInPicture) && <PictureInPicture />}
+                {conditions(ConditionName.showSettingIcon) && <Settings />}
+                {conditions(ConditionName.isFullScreen) && !conditions(ConditionName.isStaticFormat) && <QualityLevels showQualityLevelsIcon={true} />}
+                {(conditions(ConditionName.isFullScreen) || conditions(ConditionName.isStaticFormat)) && <Speed showSpeedIcon={true} />}
+                {conditions(ConditionName.hasSubtitles) && !conditions(ConditionName.isTouchScreenPortrait) && <SubtitleIcon />}
+            </div>
+            <div className={`pl-flex pl-items-center pl-gap-5`}>
+                {conditions(ConditionName.isTouchScreenPortrait) && <ElapsedTime />}
+                {!conditions(ConditionName.isIOS) && <SoundVolume />}
+            </div>
+        </div>
+    );
+};
+export default memo(Controlbar);

package/src/videoPlayerLibrary/components/custom-components/footer/controllbar/controllbarTooltip.tsx ADDED Viewed

@@ -0,0 +1,13 @@
+import { conditions } from "../../../../helpers/conditions/conditions";
+import { ConditionName } from "../../../../helpers/interfaces/enums";
+import { IControllbarTooltipProps } from "../../../../helpers/interfaces/interfaces";
+const ControllbarTooltip = ({ title, className }: IControllbarTooltipProps) => (
+    <span
+        className={`pl-absolute pl-w-max pl-bg-paper pl-text-white/[0.9] ${conditions(ConditionName.isFullScreen) ? "pl-bottom-[300%]" : "pl-bottom-[270%]"} pl-rounded-[8px] pl-px-4 pl-py-3 pl-text-[14px] pl-font-bold ${className}`}
+    >
+        {title}
+    </span>
+);
+export default ControllbarTooltip;

package/src/videoPlayerLibrary/components/custom-components/footer/footer.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { shallowEqual } from "react-redux";
+import ProgressBar from "./progressbar/progressbar";
+import Controllbar from "./controllbar/controllbar";
+import ElapsedTime from "../elapsedTime/elapsedTime";
+import { useAppSelector } from "../../../helpers/redux/hooks";
+import { conditions } from "../../../helpers/conditions/conditions";
+import { ConditionName, zIndex } from "../../../helpers/interfaces/enums";
+import DisplaySubtitle from "../subtitles/displaySubtitle";
+const Footer = () => {
+    useAppSelector(({ controller: { lock, isFullScreen, isLoading, activeElements, showMiniPlayer } }) => ({ lock, isFullScreen, isLoading, activeElements, showMiniPlayer }), shallowEqual);
+    useAppSelector(({ videoData: { subtitles, selectedSubtitle } }) => ({ subtitles, selectedSubtitle }), shallowEqual);
+    let styles = "";
+    if(conditions(ConditionName.isTouchScreen)) {
+        if(conditions(ConditionName.isFullScreen)) styles = "pl-gap-6 pl-mb-6"
+        else styles = "pl-gap-6 pl-mb-0"
+    } else {
+        if (conditions(ConditionName.isFullScreen)) styles = "pl-gap-6 pl-mb-8"
+        else styles = "pl-gap-4 pl-mb-3"
+    }
+    return (
+        <div id="footer" className="pl-relative" style={{ zIndex: zIndex.footer }}>
+            <>
+                {conditions(ConditionName.showSubtitle) && <DisplaySubtitle />}
+                {!conditions(ConditionName.isLock) && (
+                    <>
+                        <div
+                            className={`pl-flex pl-flex-col pl-w-full pl-mx-auto animate__animated animate__faster ${styles} ${conditions(ConditionName.isActiveElements) && !conditions(ConditionName.isLoading)
+                                ? "animate__fadeIn pl-pointer-events-auto"
+                                : "animate__fadeOut pl-pointer-events-none"
+                                }`}
+                        >
+                            {!conditions(ConditionName.isTouchScreenPortrait) && <ElapsedTime />}
+                            {conditions(ConditionName.showProgressbar) && <ProgressBar />}
+                            <Controllbar />
+                        </div>
+                    </>
+                )}
+            </>
+        </div>
+    );
+};
+export default Footer;

package/src/videoPlayerLibrary/components/custom-components/footer/progressbar/progressbar.tsx ADDED Viewed

@@ -0,0 +1,76 @@
+import { useEffect, useState } from "react";
+import { shallowEqual } from "react-redux";
+import Tooltip from "../../tooltip/tooltip";
+import { handleCatchUpLoadingLog, handleMouseMove, handleMouseOut, handlePointerDown, handlePointerMove, handlePointerUp, hideProgressTooltip } from "../../../../helpers/redux/actions/progressbar.actions";
+import { useAppSelector } from "../../../../helpers/redux/hooks";
+import { progressBarWidth } from "../../../../helpers/constants";
+import { ConditionName } from "../../../../helpers/interfaces/enums";
+import { conditions } from "../../../../helpers/conditions/conditions";
+const ProgressBar = () => {
+    const [isPointerDown, setIsPointerDown] = useState<boolean>(false);
+    useEffect(() => {
+        hideProgressTooltip(document.querySelector(".progressTooltip"));
+    }, []);
+    const { duration, currentTime, bufferedTimeWidth } = useAppSelector(
+        ({ controller: { duration, currentTime, bufferedTimeWidth, showMiniPlayer } }) => ({
+            duration,
+            currentTime,
+            bufferedTimeWidth,
+            showMiniPlayer
+        }),
+        shallowEqual
+    );
+    useAppSelector(
+        ({ videoData: { params, videoElementSizeInfo } }) => ({
+            params,
+            videoElementSizeInfo,
+        }),
+        shallowEqual
+    );
+    const [timeoutIds, setTimeoutIds] = useState<any[]>([]);
+    return (
+        <div className={`${conditions(ConditionName.isTouchScreenPortrait) ? "pl-order-1" : "pl-order-none"} pl-relative`}>
+            <div className="pl-relative">
+                <Tooltip />
+            </div>
+            <div
+                className={`pl-w-full pl-flex pl-items-end`}
+                onPointerDown={(event: any) => handlePointerDown(event, timeoutIds, setIsPointerDown)}
+                onPointerMove={handlePointerMove}
+                onPointerUp={(event: any) => handlePointerUp(event, setTimeoutIds, timeoutIds, setIsPointerDown)}
+                onMouseMove={handleMouseMove}
+                onMouseOut={handleMouseOut}
+                onClick={handleCatchUpLoadingLog}
+                onDoubleClick={(event: any) => event.stopPropagation()}
+            >
+                <div id="progress-area" className="pl-w-full pl-absolute">
+                    <div className="pl-w-full pl-h-[40px]"/>
+                    <div
+                        id="time-progress-area"
+                        className={`!pl-w-full !pl-h-[5px] pl-transition-transform pl-duration-300 pl-m-auto pl-cursor-pointer !pl-bg-gray-highLight pl-rounded`}
+                        style={{ transform: isPointerDown ? "scaleY(1.8)" : "unset" }}
+                    >
+                        <div
+                            id="time-progress-buffer"
+                            className={`pl-absolute pl-h-[5px] pl-bg-z-gray-400/[0.7] pl-rounded`}
+                            style={{ width: `${bufferedTimeWidth}%` }}
+                        />
+                        <div
+                            id="time-progress-bar"
+                            className={`pl-h-[5px] pl-rounded pl-relative pl-cursor-pointer pl-bg-primary before:pl-bg-primary before:pl-inline-block before:pl-w-4 before:pl-h-4 ${
+                                isPointerDown && "before:pl-w-7 before:pl-h-3"
+                            }`}
+                            style={{ width: `${(currentTime / duration) * progressBarWidth()}px` }}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default ProgressBar;

package/src/videoPlayerLibrary/components/custom-components/fullScreen/fullScreen.tsx ADDED Viewed

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { shallowEqual } from "react-redux";
+import ControllbarTooltip from "../footer/controllbar/controllbarTooltip";
+import { useAppDispatch, useAppSelector } from "../../../helpers/redux/hooks";
+import { ConditionName } from "../../../helpers/interfaces/enums";
+import { conditions } from "../../../helpers/conditions/conditions";
+import { setActiveElements } from "../../../helpers/redux/slices/controllerSlice";
+import { handleFullScreen, handleLockOrientation } from "../../../helpers/redux/actions/controller.actions";
+import Image from "next/legacy/image";
+import IMAGES from "../../../images/importImages";
+const FullScreen = () => {
+    const { isFullScreen } = useAppSelector(({ controller: { firstPlay, isFullScreen } }) => ({ firstPlay, isFullScreen }), shallowEqual);
+    const [showTooltip, setShowTooltip] = useState<boolean>(false);
+    const dispatch = useAppDispatch();
+    useEffect(() => {
+        if (!conditions(ConditionName.isFirstPlay)) dispatch(setActiveElements(false));
+    }, [isFullScreen]);
+    return (
+        <div className="pl-relative pl-flex pl-items-center">
+            <Image
+                src={conditions(ConditionName.isFullScreen) ? IMAGES.nonFullScreen : IMAGES.fullScreen}
+                alt="fullScreen-icon"
+                className={`pl-cursor-pointer`}
+                width={20}
+                height={20}
+                onMouseOver={() => !conditions(ConditionName.isTouchScreen) && setShowTooltip(true)}
+                onMouseLeave={() => !conditions(ConditionName.isTouchScreen) && setShowTooltip(false)}
+                onClick={() => {
+                    handleFullScreen();
+                    handleLockOrientation();
+                }}
+            />
+            {showTooltip && (
+                <ControllbarTooltip
+                    title={`${conditions(ConditionName.isFullScreen) ? "خروج از" : ""} تمام صفحه`}
+                />
+            )}
+        </div>
+    );
+};
+export default FullScreen;

package/src/videoPlayerLibrary/components/custom-components/header/header.tsx ADDED Viewed

@@ -0,0 +1,19 @@
+import { shallowEqual } from "react-redux";
+import Title from "../title/title";
+import { useAppSelector } from "../../../helpers/redux/hooks";
+import { conditions } from "../../../helpers/conditions/conditions";
+import { ConditionName } from "../../../helpers/interfaces/enums";
+import Lock from "../lockUnlock/lock";
+const Header = () => {
+    useAppSelector(({ controller: { lock, activeElements } }) => ({ lock, activeElements }), shallowEqual);
+    return (
+        <div className={`pl-flex pl-items-start pl-justify-end pl-mx-4 pl-mt-5 ${conditions(ConditionName.isTouchScreenPortrait) ? "pl-h-[16px]" : "pl-h-[60px]"}`}>
+            {conditions(ConditionName.showTitle) && <Title />}
+            {conditions(ConditionName.isLock) && <Lock />}
+        </div>
+    );
+};
+export default Header;

package/src/videoPlayerLibrary/components/custom-components/loader/loader.tsx ADDED Viewed

@@ -0,0 +1,20 @@
+const Loader = () => {
+    return (
+        <div className={`loader-spinner pl-absolute pl-top-[50%] pl-left-[50%] pl-mt-[-50px] pl-ml-[-42px] pl-w-screen pl-h-full pl-overflow-hidden`}>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+            <div className="pl-bg-white"></div>
+        </div>
+    );
+};
+export default Loader;

package/src/videoPlayerLibrary/components/custom-components/lockUnlock/lock.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import Image from "next/legacy/image";
+import IMAGES from "../../../images/importImages";
+import { handleLock } from "../../../helpers/redux/actions/controller.actions";
+import { conditions } from "../../../helpers/conditions/conditions";
+import { ConditionName } from "../../../helpers/interfaces/enums";
+const Lock = () => {
+  return (
+    <div className={`pl-relative pl-z-[1000000] animate__animated animate__faster ${conditions(ConditionName.isActiveElements) ? "animate__fadeIn pl-pointer-events-auto" : "animate__fadeOut pl-pointer-events-none"}`}>
+        <Image
+          src={IMAGES.lock}
+          alt="lock-icon"
+          width={20}
+          height={20}
+          onClick={() => handleLock("unlock")}
+        />
+      {!localStorage.getItem("unlock-click") && <p className="pl-text-[10px] pl-text-black/[0.87] pl-bg-[#F7F7F7] pl-absolute pl-left-0 pl-px-4 pl-py-3 pl-rounded-[8px] pl-w-max">برای باز کردن قفل، کلیک کنید</p>}
+    </div>
+  );
+};
+export default Lock;