zarebin-player-library 1.1.2 → 1.1.3

package/dist/zarebin-player-library.js

@@ -20532,7 +20532,7 @@ var RangeControl = class extends Component {
 * @group ControlBar
 * @since 4.0.0
 */
-var ProgressBar$2 = class extends ControlBarItem {
+var ProgressBar$1 = class extends ControlBarItem {
 	get element() {
 		return this._rangeControl.rootEl;
 	}
@@ -21686,7 +21686,7 @@ var ControlBar = class ControlBar {
 	}
 	_createDefaultItems() {
 		const items = [];
-		if (this.progressBar) items.push(new ProgressBar$2(getObjectOption(this.progressBar)));
+		if (this.progressBar) items.push(new ProgressBar$1(getObjectOption(this.progressBar)));
 		if (this.playButton) items.push(new PlayButton(getObjectOption(this.playButton)));
 		if (this.volumeButton) items.push(new VolumeControl(getObjectOption(this.volumeButton)));
 		if (this.gyroButton) items.push(new GyroButton(getObjectOption(this.gyroButton)));
@@ -65338,7 +65338,7 @@ var ViewersChart = () => {
 var viewersChart_default = memo(ViewersChart);
 //#endregion
 //#region src/videoPlayerLibrary/shared/ui/src/components/mainComponent/footer/progressbar/progressbar.tsx
-var ProgressBar$1 = () => {
+var ProgressBar = () => {
 	const [isPointerDown, setIsPointerDown] = useState(false);
 	useEffect(() => {
 		hideProgressTooltip(document.querySelector(".progressTooltip"));
@@ -68268,7 +68268,7 @@ var Footer = () => {
 					paddingLeft: footerPadding(),
 					paddingRight: footerPadding()
 				},
-				children: [conditions(ConditionName.showProgressbar) && conditions(ConditionName.hasTimeMachine) && /* @__PURE__ */ jsx(ProgressBar$1, {}), /* @__PURE__ */ jsx(controllbar_default, {})]
+				children: [conditions(ConditionName.showProgressbar) && conditions(ConditionName.hasTimeMachine) && /* @__PURE__ */ jsx(ProgressBar, {}), /* @__PURE__ */ jsx(controllbar_default, {})]
 			}), conditions(ConditionName.showInstagramEmoji) && /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(InstagramEmoji, {}) })] })
 		]
 	});
@@ -68889,309 +68889,6 @@ var ContinuousPlayback = () => {
 	});
 };
 //#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/hooks/useControlsVisibility.ts
-var useControlsVisibility = (isPaused) => {
-	const [showControls, setShowControls] = useState(true);
-	const timeoutRef = useRef(null);
-	return {
-		showControls,
-		resetTimer: useCallback((delay = activeElementsTime) => {
-			if (isPaused) return setShowControls(true);
-			setShowControls(true);
-			if (timeoutRef.current) clearTimeout(timeoutRef.current);
-			timeoutRef.current = setTimeout(() => setShowControls(false), delay);
-		}, [isPaused])
-	};
-};
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/hooks/useVideoControls.ts
-var useVideoControls = (ad, params) => {
-	const dispatch = useAppDispatch();
-	const [progress, setProgress] = useState(0);
-	const [buffered, setBuffered] = useState(0);
-	const [currentTime, setCurrentTime] = useState(0);
-	const [duration, setDuration] = useState(0);
-	const [isPaused, setIsPaused] = useState(false);
-	const [firstPlay, setFirstPlay] = useState(true);
-	const firstPlayRef = useRef(firstPlay);
-	useEffect(() => {
-		firstPlayRef.current = firstPlay;
-	}, [firstPlay]);
-	const hasSkip = Boolean(ad?.mandatory_play_time && ad.mandatory_play_time > 0);
-	const [skipCounter, setSkipCounter] = useState(hasSkip ? ad.mandatory_play_time : null);
-	const [isCounting, setIsCounting] = useState(false);
-	useEffect(() => {
-		if (!hasSkip || !isCounting) return;
-		const interval = setInterval(() => {
-			setSkipCounter((prev) => prev && prev > 1 ? prev - 1 : 0);
-		}, 1e3);
-		return () => clearInterval(interval);
-	}, [hasSkip, isCounting]);
-	useEffect(() => {
-		const video = videoTag();
-		if (!video) return;
-		const handlePlay = () => {
-			setIsCounting(true);
-			setIsPaused(false);
-			if (firstPlayRef.current) {
-				params.ad.onAdView(ad);
-				setFirstPlay(false);
-			}
-		};
-		const handlePlaying = () => {
-			setIsCounting(true);
-			setIsPaused(false);
-		};
-		const handlePause = () => {
-			setIsCounting(false);
-			setIsPaused(true);
-			if (firstPlay) handleChangeSoundVolume(100);
-			setFirstPlay(false);
-		};
-		const handleEnded = () => {
-			dispatch(setAdData(void 0));
-		};
-		const handleError = () => {
-			setIsCounting(false);
-		};
-		const handleLoadedMetadata = () => setDuration(video.duration);
-		video.addEventListener("play", handlePlay);
-		video.addEventListener("playing", handlePlaying);
-		video.addEventListener("pause", handlePause);
-		video.addEventListener("ended", handleEnded);
-		video.addEventListener("error", handleError);
-		video.addEventListener("waiting", () => setIsCounting(false));
-		video.addEventListener("loadedmetadata", handleLoadedMetadata);
-		video.addEventListener("progress", handleProgress);
-		video.addEventListener("timeupdate", handleTimeUpdate);
-		(async () => {
-			if (!conditions(ConditionName.hasAd)) await handleFullScreen();
-			await handleLockOrientation();
-			const playPromise = video.play();
-			dispatch(setPlay(true));
-			if (playPromise !== void 0) playPromise.then(() => {
-				handleChangeSoundVolume(100);
-				dispatch(setFirstMute(false));
-			}).catch(() => {
-				handleChangeSoundVolume(0);
-				dispatch(setFirstMute(true));
-			});
-		})();
-		return () => {
-			video.removeEventListener("play", handlePlay);
-			video.removeEventListener("playing", handlePlaying);
-			video.removeEventListener("pause", handlePause);
-			video.removeEventListener("ended", handleEnded);
-			video.removeEventListener("error", handleError);
-			video.removeEventListener("waiting", () => setIsCounting(false));
-			video.removeEventListener("loadedmetadata", handleLoadedMetadata);
-			video.removeEventListener("progress", handleProgress);
-			video.removeEventListener("timeupdate", handleTimeUpdate);
-			dispatch(setPlay(false));
-		};
-	}, [ad?.url]);
-	const handleTimeUpdate = () => {
-		const video = videoTag();
-		if (video?.duration) {
-			setProgress(video.currentTime / video.duration * 100);
-			setCurrentTime(video.currentTime);
-		}
-	};
-	const handleProgress = () => {
-		const video = videoTag();
-		if (video?.duration && video.buffered.length > 0) setBuffered(video.buffered.end(video.buffered.length - 1) / video.duration * 100);
-	};
-	return {
-		progress,
-		buffered,
-		currentTime,
-		duration,
-		firstPlay,
-		setFirstPlay,
-		isPaused,
-		skipCounter,
-		hasSkip
-	};
-};
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/MoreInfoButton.tsx
-var MoreInfoButton = ({ link }) => link ? /* @__PURE__ */ jsx("a", {
-	href: link,
-	target: "_blank",
-	className: `pl-absolute pl-z-[3] pl-flex pl-cursor-pointer pl-items-center pl-gap-2 pl-rounded-lg pl-bg-gray-500 pl-font-medium pl-text-gray-100 ${conditions(ConditionName.isTouchScreen) ? "pl-bottom-[56px] pl-left-2 pl-px-[10px] pl-py-[6px] pl-text-xs lg:pl-bottom-[78px] lg:pl-h-11 lg:pl-text-[14px]" : "pl-bottom-[66px] pl-left-6 pl-h-12 pl-px-5 pl-py-2 pl-text-[16px] lg:pl-bottom-[88px]"}`,
-	children: "اطلاعات بیشتر"
-}) : null;
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/SkipButton.tsx
-var SkipButton = ({ skipCounter }) => {
-	const { adData } = useAppSelector(({ videoData: { adData } }) => ({ adData }), shallowEqual);
-	const dispatch = useAppDispatch();
-	return /* @__PURE__ */ jsxs("button", {
-		onClick: (event) => {
-			event.stopPropagation();
-			event.preventDefault();
-			dispatch(setAdData(void 0));
-		},
-		disabled: !!skipCounter && skipCounter > 0,
-		className: `pl-absolute pl-z-[3] pl-flex pl-size-max pl-items-center pl-rounded-lg pl-bg-gray-500 pl-p-0.5 pl-pl-4 ${conditions(ConditionName.isTouchScreen) ? "pl-bottom-[56px] pl-right-2 lg:pl-bottom-[78px]" : "pl-bottom-[66px] pl-right-6 lg:pl-bottom-[88px]"}`,
-		children: [adData?.banner && /* @__PURE__ */ jsx("img", {
-			src: adData.banner,
-			height: conditions(ConditionName.isTouchScreen) ? 40 : 44,
-			alt: "video-banner",
-			className: `pl-w-auto pl-rounded-md ${conditions(ConditionName.isTouchScreen) ? "pl-h-7 lg:pl-h-10" : "pl-h-7 lg:pl-h-11"}`
-		}), /* @__PURE__ */ jsx("span", {
-			className: `pl-mr-3 pl-font-bold pl-text-gray-100 ${conditions(ConditionName.isTouchScreen) ? "pl-text-xs lg:pl-text-[14px]" : "pl-text-[16px]"}`,
-			children: skipCounter && skipCounter > 0 ? `${skipCounter} ثانیه` : "رد کردن"
-		})]
-	});
-};
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/UnMuteVideo.tsx
-var UnMuteVideo = ({ advertisement }) => /* @__PURE__ */ jsxs("div", {
-	className: `pl-flex pl-cursor-pointer pl-items-center pl-rounded-lg pl-bg-gray-500 ${!advertisement ? "pl-absolute -pl-left-2 pl-top-[60px]" : ""} ${conditions(ConditionName.isTouchScreen) ? "pl-gap-1 pl-px-2 pl-py-[10px]" : "!pl-left-8 pl-gap-2 pl-p-3"} ${conditions(ConditionName.isTouchScreen) && "pl-mx-4"}`,
-	children: [/* @__PURE__ */ jsx("img", {
-		src: IMAGES.mute,
-		alt: "mute icon",
-		className: `pl-shrink-0 ${conditions(ConditionName.isTouchScreen) ? "pl-size-4" : "pl-size-6"}`
-	}), /* @__PURE__ */ jsx("p", {
-		className: `pl-text-[14px] ${!advertisement ? "pl-whitespace-nowrap" : ""} pl-font-medium dark:pl-text-secondary-100`,
-		children: "برای پخش صدا روی ویدیو ضربه بزنید."
-	})]
-});
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/ProgressBar.tsx
-var ProgressBar = ({ progress, buffered }) => /* @__PURE__ */ jsxs("div", {
-	className: "pl-relative pl-h-1 pl-w-full pl-rounded-[4px] pl-bg-z-secondary-100/[0.4]",
-	children: [/* @__PURE__ */ jsx("div", {
-		className: "pl-absolute pl-left-0 pl-top-0 pl-h-full pl-rounded-[4px] pl-bg-z-secondary-50/[0.4]",
-		style: { width: `${buffered}%` }
-	}), /* @__PURE__ */ jsx("div", {
-		className: "pl-absolute pl-left-0 pl-top-0 pl-h-full pl-rounded-[4px] pl-bg-primary-500 pl-transition-all pl-duration-150 pl-ease-linear",
-		style: { width: `${progress}%` }
-	})]
-});
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/VideoControls.tsx
-var formatTime = (time) => {
-	return `${Math.floor(time / 60).toString().padStart(2, "0")}:${Math.floor(time % 60).toString().padStart(2, "0")}`;
-};
-var VideoControls = ({ progress, buffered, duration, currentTime, showControls }) => /* @__PURE__ */ jsxs("div", {
-	className: `pl-relative pl-z-[3] pl-flex pl-w-full pl-flex-col pl-transition-opacity pl-duration-500 pl-ease-in-out ${showControls ? "pl-opacity-100" : "pl-pointer-events-none pl-opacity-0"} ${conditions(ConditionName.isTouchScreen) ? "pl-gap-2 pl-px-2" : "pl-gap-4 pl-px-5"}`,
-	children: [/* @__PURE__ */ jsx(ProgressBar, {
-		progress,
-		buffered
-	}), /* @__PURE__ */ jsxs("div", {
-		className: `pl-flex pl-items-center pl-justify-between pl-px-1`,
-		children: [/* @__PURE__ */ jsx(FullScreen, {}), /* @__PURE__ */ jsxs("div", {
-			className: "pl-flex pl-items-center pl-gap-4",
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: `pl-flex pl-items-center pl-gap-1 ${conditions(ConditionName.isTouchScreen) ? "pl-text-[14px]" : "pl-text-[16px]"} pl-font-medium`,
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "pl-text-secondary",
-						children: formatTime(duration)
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "pl-text-secondary",
-						children: "/"
-					}),
-					/* @__PURE__ */ jsx("span", {
-						className: "pl-text-gray-100",
-						children: formatTime(currentTime)
-					})
-				]
-			}), /* @__PURE__ */ jsx(SoundVolume, {})]
-		})]
-	})]
-});
-//#endregion
-//#region src/videoPlayerLibrary/shared/ui/src/components/advertisement/Advertisement.tsx
-var Advertisement = () => {
-	const { params, firstMute, adData } = useAppSelector(({ videoData: { params, adData }, controller: { firstMute } }) => ({
-		params,
-		firstMute,
-		adData
-	}), shallowEqual);
-	const dispatch = useAppDispatch();
-	const { progress, buffered, currentTime, duration, isPaused, skipCounter, hasSkip } = useVideoControls(adData, params);
-	const containerRef = useRef(null);
-	const { showControls, resetTimer } = useControlsVisibility(isPaused);
-	useEffect(() => {
-		const container = containerRef.current;
-		if (!container) return;
-		const handleInteraction = () => resetTimer();
-		container.addEventListener("mousemove", handleInteraction);
-		container.addEventListener("touchstart", handleInteraction);
-		resetTimer();
-		return () => {
-			container.removeEventListener("mousemove", handleInteraction);
-			container.removeEventListener("touchstart", handleInteraction);
-		};
-	}, [resetTimer]);
-	const handleClick = () => {
-		if (firstMute) {
-			handleChangeSoundVolume(50);
-			dispatch(setFirstMute(false));
-		}
-		if (!conditions(ConditionName.isTouchScreen)) return;
-		resetTimer();
-	};
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		onClick: handleClick,
-		onDoubleClick: async () => {
-			await handleFullScreen();
-			await handleLockOrientation();
-		},
-		className: `pl-flex pl-h-full pl-w-full pl-flex-col pl-justify-end pl-bg-dark-1 ${conditions(ConditionName.isFullScreen) && "!pl-fixed !pl-right-0 !pl-top-0 !pl-h-screen !pl-w-screen"}`,
-		style: { zIndex: 1e5 },
-		children: [
-			/* @__PURE__ */ jsx("video", {
-				id: "player-tag",
-				src: adData?.url + `?uuid=${getUUID()}`,
-				autoPlay: true,
-				playsInline: true,
-				className: "pl-absolute pl-top-0 pl-size-full"
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: `pl-relative pl-flex pl-h-full pl-w-full pl-flex-col pl-justify-between ${conditions(ConditionName.isTouchScreen) ? "pl-pb-3 pl-pt-4 lg:pl-pb-4" : "pl-pb-5 pl-pt-[30px]"}`,
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: `pl-relative pl-z-[4] pl-flex pl-items-center pl-gap-5 pl-self-end pl-px-3 ${conditions(ConditionName.isTouchScreenPortrait) && "!pl-h-max !pl-flex-col-reverse !pl-items-start !pl-gap-0 !pl-self-start"} ${conditions(ConditionName.isTouchScreenLandscape) && "!pl-flex-row-reverse !pl-justify-between !pl-self-stretch"}`,
-						children: firstMute && /* @__PURE__ */ jsx(UnMuteVideo, { advertisement: true })
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: `pl-absolute pl-inset-0 pl-z-[2] pl-flex pl-items-center pl-justify-center pl-transition-opacity pl-duration-500 pl-ease-in-out ${showControls ? "pl-opacity-100" : "pl-pointer-events-none pl-opacity-0"}`,
-						onClick: () => {
-							if (firstMute) {
-								handleChangeSoundVolume(50);
-								dispatch(setFirstMute(false));
-							}
-						},
-						children: /* @__PURE__ */ jsx(PlayPause, {})
-					}),
-					/* @__PURE__ */ jsx(VideoControls, {
-						buffered,
-						currentTime,
-						duration,
-						progress,
-						showControls
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx(MoreInfoButton, {
-				link: adData?.ad_link,
-				currentTime
-			}),
-			hasSkip && /* @__PURE__ */ jsx(SkipButton, {
-				skipCounter,
-				currentTime
-			}),
-			/* @__PURE__ */ jsx(VideoAreaShadow, {})
-		]
-	});
-};
-//#endregion
 //#region src/videoPlayerLibrary/shared/ui/src/components/modules/video-player-library/players/liveAndVodPlayer/videoArea.tsx
 var VideoArea = () => {
 	const [isRightDoubleTouched, setIsRightDoubleTouched] = useState(false);
@@ -69267,7 +68964,7 @@ var VideoArea = () => {
 		onClick: (event) => conditions(ConditionName.playByClickPoster) && handlePlayPause(event),
 		onDoubleClick: (event) => handleDoubleClick(event),
 		className: `pl-flex pl-aspect-video pl-h-full pl-max-h-screen pl-items-center pl-bg-black !pl-bg-contain !pl-bg-center !pl-bg-no-repeat ${conditions(ConditionName.isFullScreen) && "dvh !pl-fixed !pl-w-screen"} ${conditions(ConditionName.showMiniPlayer) ? "!pl-fixed !pl-bottom-[10px] !pl-right-[10px] !pl-h-[225px] !pl-w-[400px]" : "pl-relative !pl-w-full"} ${!conditions(ConditionName.isComplexPortrait) && "pl-overflow-hidden"} ${!conditions(ConditionName.isActiveElements) && "pl-cursor-none"}`,
-		children: hasAd && !!adData ? /* @__PURE__ */ jsx(Suspense, { children: /* @__PURE__ */ jsx(Advertisement, {}) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+		children: hasAd && !!adData ? /* @__PURE__ */ jsx(Suspense, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
 			conditions(ConditionName.showBanner) && /* @__PURE__ */ jsx("div", {
 				className: "pl-absolute pl-flex pl-h-full pl-w-full pl-justify-center",
 				children: /* @__PURE__ */ jsx("img", {