cafe-video-player 1.0.0

package/nonStaticVideoTag-RA4FM55H.mjs

@@ -0,0 +1,2 @@
+"use client";import{D as S,a as Q,b as U,c as $,d as z,e as w,f as R,g as D,h as b,i as T,j as W,k as I,l as q,m as j,n as J,o as K,p as X,q as F,r as C,s as Y,t as Z,u as ee,v as ne}from"./chunk-VA5NNH6I.mjs";import{M,O as n,R as E,_ as N,ba as l,ca as O,da as p,ka as L,la as B,pa as y,q as H}from"./chunk-5F7JQEMY.mjs";import{e as m}from"./chunk-TU7BZ2RY.mjs";m();import a from"hls.js";import{useEffect as Pe,useState as Ae,useRef as f,useLayoutEffect as Le}from"react";import{shallowEqual as se}from"react-redux";m();import{useEffect as te}from"react";import{shallowEqual as ce}from"react-redux";var he=()=>{let r=null,{isEnded:o}=p(({controller:{isEnded:c}})=>({isEnded:c}),ce);te(()=>(r=setInterval(()=>E(),M),()=>clearInterval(r)),[]),te(()=>{l("isEnded")&&clearInterval(r)},[o])},ae=he;m();import{useEffect as ie,useState as oe}from"react";import{shallowEqual as Ee}from"react-redux";var ye=r=>{let[o,c]=oe([]),[v,u]=oe(0),{qualityLevels:s}=p(({controller:{qualityLevels:t}})=>({qualityLevels:t}),Ee);ie(()=>{if(r){let t=[];switch(o.length){case 0:t=[r];break;case 1:t=[r,...o];break;case 2:t=[r,...o],y(L(`${t[0]}P`,`${t[1]}P`,s.indexOf(t[0])-s.indexOf(t[1])));break;default:t=[r,o[0],o[1]],t[1]!==t[2]&&y(L(`${t[1]}P`,`${t[2]}P`,s.indexOf(t[1])-s.indexOf(t[2])));break}c(t)}},[r]),ie(()=>{o.length===3&&o[0]===o[2]?(y(B(v,o)),c([]),u(0)):u(new Date().getTime())},[o])},re=ye;import we from"next/legacy/image";m();import{useEffect as ve}from"react";var ge=()=>{ve(()=>{let r=()=>{E()};return window.addEventListener("beforeunload",r),()=>window.removeEventListener("beforeunload",r)},[])},de=ge;var Re=()=>{let[r,o]=Ae(void 0),c=O(),{params:v,details:u,videoElementSizeInfo:s}=p(({videoData:{params:e,details:i,videoElementSizeInfo:d,isComplexPortrait:P,subtitles:A}})=>({params:e,details:i,videoElementSizeInfo:d,isComplexPortrait:P,subtitles:A}),se),{currentTime:t,duration:le}=p(({controller:{currentTime:e,duration:i,isEnded:d,firstPlay:P,showMiniPlayer:A}})=>({currentTime:e,duration:i,isEnded:d,firstPlay:P,showMiniPlayer:A}),se),g=f(null),me=f(0),h=f(0),_=f(0),x=f(0),G=f(0),fe=f(1),ue=f(n()?n().currentTime:0);return ae(),de(),Le(()=>{let e=new a(U());return N(G),_.current=Date.now(),a.isSupported()?(e.attachMedia(n()),e.on(a.Events.MEDIA_ATTACHED,()=>w(a,e)),e.on(a.Events.FRAG_BUFFERED,()=>R(e)),e.on(a.Events.FRAG_LOADING,()=>D(e)),e.on(a.Events.FRAG_CHANGED,(i,d)=>b(a,e,d,o)),e.on(a.Events.FRAG_PARSED,(i,d)=>T(e,d,o)),n().addEventListener("waiting",i=>I(i,h)),n().addEventListener("seeking",i=>q(i,h)),n().addEventListener("play",i=>j(i,g)),n().addEventListener("playing",()=>J(fe,G,_,x,g,me,h,ue)),n().addEventListener("pause",K),n().addEventListener("timeupdate",X),n().addEventListener("canplay",F),n().addEventListener("ended",C),document.addEventListener("visibilitychange",()=>S(e))):n().canPlayType("application/vnd.apple.mpegurl")&&(n().src=u.stream_link,n().addEventListener("waiting",i=>I(i,h)),n().addEventListener("play",i=>Y(i,g)),n().addEventListener("playing",Z),n().addEventListener("canplay",F),n().addEventListener("timeupdate",ee),n().addEventListener("ended",ne),n().addEventListener("ended",C),Q()),()=>{e.detachMedia(),e.off(a.Events.MEDIA_ATTACHED,()=>w(a,e)),e.off(a.Events.FRAG_BUFFERED,()=>R(e)),e.off(a.Events.FRAG_LOADING,()=>D(e)),e.off(a.Events.FRAG_CHANGED,(i,d)=>b(a,e,d,o)),e.off(a.Events.FRAG_PARSED,(i,d)=>T(e,d,o)),e.off(a.Events.ERROR,(i,d)=>W(a,d)),e.off(a.Events.MANIFEST_PARSED,(i,d)=>$(e,d)),e.off(a.Events.MANIFEST_LOADED,()=>z(e)),document.removeEventListener("visibilitychange",()=>S(e))}},[u.stream_link]),Pe(()=>{t<le&&l("isEnded")&&c(H(!1))},[t]),re(r),React.createElement(React.Fragment,null,l("showBanner")&&React.createElement(we,{src:u.banner,width:0,height:0,className:"pl-hidden",onLoad:()=>x.current=Date.now(),alt:u.title??v.id}),React.createElement("video",{preload:"metadata",crossOrigin:"anonymous",id:"player-tag",playsInline:!0,muted:l("isRaw"),className:`pl-items-center pl-flex-1 ${!l("hasQuizParams")&&(l("isComplexPortrait")?"pl-h-auto":"pl-h-full")}`,style:{width:"100%",opacity:l("isFirstPlay")?0:1,height:l("hasQuizParams")?"100vh":"100%",maxWidth:s.width?s.width:"100%",maxHeight:s.width?s.width<s.height?s.width*9/16:s.width*16/9:"100%"},autoPlay:l("hasAutoPlay")||l("isRaw")}))},rn=Re;export{rn as default};
+//# sourceMappingURL=nonStaticVideoTag-RA4FM55H.mjs.map

package/nonStaticVideoTag-RA4FM55H.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/videoPlayerLibrary/components/custom-components/videoTag/nonStaticVideoTag.tsx","../src/videoPlayerLibrary/helpers/hooks/useContinuousPlaybackInterval.tsx","../src/videoPlayerLibrary/helpers/hooks/usePingPong.tsx","../src/videoPlayerLibrary/helpers/hooks/useBeforeUnload.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport Hls from \"hls.js\";\r\nimport { useEffect, useState, useRef, useLayoutEffect } from \"react\";\r\nimport { shallowEqual } from \"react-redux\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../helpers/redux/hooks\";\r\nimport { videoTag } from \"../../../helpers/constants\";\r\nimport useContinuousPlaybackInterval from \"../../../helpers/hooks/useContinuousPlaybackInterval\";\r\nimport { handlePageLoadTime } from \"../../../helpers/helpers\";\r\nimport { appendQueryParamsToChunksIOS, handleFragBuffered, handleFragChanged, handleFragLoading, handleFragParsed, handleHlsConfig, handleHlsErrors, handleIosVideoEnded, handleIosVideoPlay, handleIosVideoPlaying, handleIosVideoTimeUpdate, handleManifestLoaded, handleManifestParsed, handleMediaAttached, handleVideoCanPlay, handleVideoEnded, handleVideoPause, handleVideoPlay, handleVideoPlaying, handleVideoSeeking, handleVideoTimeUpdate, handleVideoVisibilityChange, handleVideoWaiting } from \"../../../helpers/redux/actions/playerCore.actions\";\r\nimport { ConditionName } from \"../../../helpers/interfaces/enums\";\r\nimport { conditions } from \"../../../helpers/conditions/conditions\";\r\nimport { setIsEnded } from \"../../../helpers/redux/slices/controllerSlice\";\r\nimport usePingPong from \"../../../helpers/hooks/usePingPong\";\r\nimport Image from \"next/legacy/image\";\r\nimport useBeforeUnload from \"../../../helpers/hooks/useBeforeUnload\";\r\n\r\nconst NonStaticVideoTag = () => {\r\n    const [qualityLevel, setQualityLevel] = useState<number | undefined>(undefined);\r\n\r\n    const dispatch = useAppDispatch();\r\n    const { params, details, videoElementSizeInfo } = useAppSelector(\r\n        ({ videoData: { params, details, videoElementSizeInfo, isComplexPortrait, subtitles } }) => ({\r\n            params,\r\n            details,\r\n            videoElementSizeInfo,\r\n            isComplexPortrait,\r\n            subtitles\r\n        }),\r\n        shallowEqual\r\n    );\r\n    const { currentTime, duration } = useAppSelector(\r\n        ({ controller: { currentTime, duration, isEnded, firstPlay, showMiniPlayer } }) => ({\r\n            currentTime,\r\n            duration,\r\n            isEnded,\r\n            firstPlay,\r\n            showMiniPlayer\r\n        }),\r\n        shallowEqual\r\n    );\r\n    const timerRef = useRef<any>(null);\r\n    const waitingDurationRef = useRef<any>(0);\r\n    const waitingTimerRef = useRef<number>(0);\r\n    const initialWaitingDurationRef = useRef<any>(0);\r\n    const bannerLoadingDurationRef = useRef<any>(0);\r\n    const loadingDurationRef = useRef<any>(0);\r\n    const loadingCounterRef = useRef<any>(1);\r\n    const videoEntranceTimeRef = useRef<any>(videoTag() ? videoTag().currentTime : 0);\r\n\r\n    useContinuousPlaybackInterval();\r\n    useBeforeUnload();\r\n\r\n    useLayoutEffect(() => {\r\n        let hls = new Hls(handleHlsConfig());\r\n\r\n        // ---- Page Load Time ----\r\n        handlePageLoadTime(loadingDurationRef);\r\n\r\n        initialWaitingDurationRef.current = Date.now();\r\n\r\n        if (Hls.isSupported()) {\r\n            hls.attachMedia(videoTag() as HTMLMediaElement);\r\n            hls.on(Hls.Events.MEDIA_ATTACHED, () => handleMediaAttached(Hls, hls));\r\n            hls.on(Hls.Events.FRAG_BUFFERED, () => handleFragBuffered(hls));\r\n            hls.on(Hls.Events.FRAG_LOADING, () => handleFragLoading(hls));\r\n            hls.on(Hls.Events.FRAG_CHANGED, (event: any, data: any) => handleFragChanged(Hls, hls, data, setQualityLevel));\r\n            hls.on(Hls.Events.FRAG_PARSED, (event: any, data: any) => handleFragParsed(hls, data, setQualityLevel));\r\n            // hls.on(Hls.Events.ERROR, (event: any, data: any) => errorLogProvider(handleHlsErrors(Hls, data)));\r\n\r\n            videoTag().addEventListener(\"waiting\", (event: any) => handleVideoWaiting(event, waitingTimerRef));\r\n            videoTag().addEventListener(\"seeking\", (event: any) => handleVideoSeeking(event, waitingTimerRef));\r\n            videoTag().addEventListener(\"play\", (event: any) => handleVideoPlay(event, timerRef));\r\n            videoTag().addEventListener(\"playing\", () =>\r\n                handleVideoPlaying(\r\n                    loadingCounterRef,\r\n                    loadingDurationRef,\r\n                    initialWaitingDurationRef,\r\n                    bannerLoadingDurationRef,\r\n                    timerRef,\r\n                    waitingDurationRef,\r\n                    waitingTimerRef,\r\n                    videoEntranceTimeRef\r\n                )\r\n            );\r\n            videoTag().addEventListener(\"pause\", handleVideoPause);\r\n            videoTag().addEventListener(\"timeupdate\", handleVideoTimeUpdate);\r\n            videoTag().addEventListener(\"canplay\", handleVideoCanPlay);\r\n            videoTag().addEventListener(\"ended\", handleVideoEnded);\r\n            // videoTag().addEventListener(\"error\", handleVideoError);\r\n\r\n            document.addEventListener(\"visibilitychange\", () => handleVideoVisibilityChange(hls));\r\n        } else if (videoTag().canPlayType(\"application/vnd.apple.mpegurl\")) {\r\n            videoTag().src = details.stream_link;\r\n\r\n            videoTag().addEventListener(\"waiting\", (event: any) => handleVideoWaiting(event, waitingTimerRef));\r\n            videoTag().addEventListener(\"play\", (event: any) => handleIosVideoPlay(event, timerRef));\r\n            videoTag().addEventListener(\"playing\", handleIosVideoPlaying);\r\n            videoTag().addEventListener(\"canplay\", handleVideoCanPlay);\r\n            videoTag().addEventListener(\"timeupdate\", handleIosVideoTimeUpdate);\r\n            videoTag().addEventListener(\"ended\", handleIosVideoEnded);\r\n            videoTag().addEventListener(\"ended\", handleVideoEnded);\r\n            // videoTag().addEventListener(\"error\", handleVideoError);\r\n            // Append Query Parameter to .ts Chunks\r\n            appendQueryParamsToChunksIOS();\r\n        }\r\n\r\n        return () => {\r\n            hls.detachMedia();\r\n            hls.off(Hls.Events.MEDIA_ATTACHED, () => handleMediaAttached(Hls, hls));\r\n            hls.off(Hls.Events.FRAG_BUFFERED, () => handleFragBuffered(hls));\r\n            hls.off(Hls.Events.FRAG_LOADING, () => handleFragLoading(hls));\r\n            hls.off(Hls.Events.FRAG_CHANGED, (event: any, data: any) => handleFragChanged(Hls, hls, data, setQualityLevel));\r\n            hls.off(Hls.Events.FRAG_PARSED, (event: any, data: any) => handleFragParsed(hls, data, setQualityLevel));\r\n            hls.off(Hls.Events.ERROR, (event: any, data: any) => handleHlsErrors(Hls, data));\r\n            hls.off(Hls.Events.MANIFEST_PARSED, (event: any, data: any) => handleManifestParsed(hls, data));\r\n            hls.off(Hls.Events.MANIFEST_LOADED, () => handleManifestLoaded(hls));\r\n            document.removeEventListener(\"visibilitychange\", () => handleVideoVisibilityChange(hls));\r\n        };\r\n    }, [details.stream_link]);\r\n\r\n    useEffect(() => {\r\n        if (currentTime < duration && conditions(ConditionName.isEnded)) {\r\n            dispatch(setIsEnded(false));\r\n        }\r\n    }, [currentTime]);\r\n\r\n    usePingPong(qualityLevel);\r\n\r\n    return (\r\n        <>\r\n            {conditions(ConditionName.showBanner) && (\r\n                <Image\r\n                    src={details.banner}\r\n                    width={0}\r\n                    height={0}\r\n                    className=\"pl-hidden\"\r\n                    onLoad={() => (bannerLoadingDurationRef.current = Date.now())}\r\n                    alt={details.title ?? params.id!}\r\n                />\r\n            )}\r\n\r\n            <video\r\n                preload=\"metadata\"\r\n                crossOrigin=\"anonymous\"\r\n                id=\"player-tag\"\r\n                playsInline\r\n                muted={conditions(ConditionName.isRaw)}\r\n                className={`pl-items-center pl-flex-1 ${\r\n                    !conditions(ConditionName.hasQuizParams) && (conditions(ConditionName.isComplexPortrait) ? \"pl-h-auto\" : \"pl-h-full\")\r\n                }`}\r\n                style={{\r\n                    width: \"100%\",\r\n                    opacity: conditions(ConditionName.isFirstPlay) ? 0 : 1,\r\n                    height: conditions(ConditionName.hasQuizParams) ? \"100vh\" : \"100%\",\r\n                    maxWidth: videoElementSizeInfo.width ? videoElementSizeInfo.width : \"100%\",\r\n                    maxHeight: videoElementSizeInfo.width\r\n                        ? videoElementSizeInfo.width < videoElementSizeInfo.height\r\n                            ? (videoElementSizeInfo.width * 9) / 16\r\n                            : (videoElementSizeInfo.width * 16) / 9\r\n                        : \"100%\"\r\n                }}\r\n                autoPlay={conditions(ConditionName.hasAutoPlay) || conditions(ConditionName.isRaw)}\r\n            >\r\n            </video>\r\n        </>\r\n    );\r\n};\r\n\r\nexport default NonStaticVideoTag;\r\n","import { useEffect } from \"react\";\r\nimport { shallowEqual } from \"react-redux\";\r\nimport { useAppSelector } from \"../redux/hooks\";\r\nimport { continuousePlaybackIntervalTime } from \"../environment\";\r\nimport { ConditionName } from \"../interfaces/enums\";\r\nimport { conditions } from \"../conditions/conditions\";\r\nimport { handleContinuousPlayback } from \"../redux/actions/user.actions\";\r\n\r\nconst useContinuousPlaybackInterval = () => {\r\n    let interval: any = null;\r\n\r\n    const { isEnded } = useAppSelector(({ controller: { isEnded } }) => ({ isEnded }), shallowEqual);\r\n\r\n    useEffect(() => {\r\n        interval = setInterval(() => handleContinuousPlayback(), continuousePlaybackIntervalTime);\r\n        return () => clearInterval(interval);\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n        if (conditions(ConditionName.isEnded)) clearInterval(interval);\r\n    }, [isEnded]);\r\n};\r\n\r\nexport default useContinuousPlaybackInterval;\r\n","import { useEffect, useState } from \"react\";\r\nimport { shallowEqual } from \"react-redux\";\r\nimport { useAppSelector } from \"../redux/hooks\";\r\nimport { sendFluentLog } from \"../logs/fluentdLogger\";\r\nimport { autoQualityChangeLog, pingpongLog } from \"../logs/logs\";\r\n\r\nconst usePingPong = (qualityLevel?: number) => {\r\n    const [qualityHistory, setQualityHistory] = useState<number[]>([]);\r\n    const [startTimer, setStartTimer] = useState<number>(0);\r\n\r\n    const { qualityLevels } = useAppSelector(({ controller: { qualityLevels } }) => ({ qualityLevels }), shallowEqual);\r\n\r\n    useEffect(() => {\r\n        if (qualityLevel) {\r\n            let newQualityArray: number[] = [];\r\n            switch (qualityHistory.length) {\r\n                case 0:\r\n                    newQualityArray = [qualityLevel];\r\n                    break;\r\n                case 1:\r\n                    newQualityArray = [qualityLevel, ...qualityHistory];\r\n                    break;\r\n                case 2:\r\n                    newQualityArray = [qualityLevel, ...qualityHistory];\r\n                    sendFluentLog(\r\n                        autoQualityChangeLog(\r\n                            `${newQualityArray[0]}P`,\r\n                            `${newQualityArray[1]}P`,\r\n                            qualityLevels.indexOf(newQualityArray[0]) - qualityLevels.indexOf(newQualityArray[1])\r\n                        )\r\n                    );\r\n                    break;\r\n                default:\r\n                    newQualityArray = [qualityLevel, qualityHistory[0], qualityHistory[1]];\r\n                    if (newQualityArray[1] !== newQualityArray[2])\r\n                        sendFluentLog(\r\n                            autoQualityChangeLog(\r\n                                `${newQualityArray[1]}P`,\r\n                                `${newQualityArray[2]}P`,\r\n                                qualityLevels.indexOf(newQualityArray[1]) - qualityLevels.indexOf(newQualityArray[2])\r\n                            )\r\n                        );\r\n                    break;\r\n            }\r\n            setQualityHistory(newQualityArray);\r\n        }\r\n    }, [qualityLevel]);\r\n\r\n    useEffect(() => {\r\n        if (qualityHistory.length === 3 && qualityHistory[0] === qualityHistory[2]) {\r\n            sendFluentLog(pingpongLog(startTimer, qualityHistory));\r\n            setQualityHistory([]);\r\n            setStartTimer(0);\r\n        } else {\r\n            setStartTimer(new Date().getTime());\r\n        }\r\n    }, [qualityHistory]);\r\n};\r\nexport default usePingPong;\r\n","import { useEffect } from \"react\";\r\nimport { handleContinuousPlayback } from \"../redux/actions/user.actions\";\r\n\r\nconst useBeforeUnload = () => {\r\n    useEffect(() => {\r\n        const handleBeforeUnload = () => {\r\n            handleContinuousPlayback();\r\n        };\r\n\r\n        window.addEventListener(\"beforeunload\", handleBeforeUnload);\r\n        return () => window.removeEventListener(\"beforeunload\", handleBeforeUnload);\r\n    }, []);\r\n};\r\n\r\nexport default useBeforeUnload;\r\n"],"mappings":"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","names":["init_esm_shims","Hls","useEffect","useState","useRef","useLayoutEffect","shallowEqual","init_esm_shims","useEffect","shallowEqual","useContinuousPlaybackInterval","interval","isEnded","useAppSelector","shallowEqual","useEffect","handleContinuousPlayback","continuousePlaybackIntervalTime","conditions","useContinuousPlaybackInterval_default","init_esm_shims","useEffect","useState","shallowEqual","usePingPong","qualityLevel","qualityHistory","setQualityHistory","useState","startTimer","setStartTimer","qualityLevels","useAppSelector","shallowEqual","useEffect","newQualityArray","sendFluentLog","autoQualityChangeLog","pingpongLog","usePingPong_default","Image","init_esm_shims","useEffect","useBeforeUnload","useEffect","handleBeforeUnload","handleContinuousPlayback","useBeforeUnload_default","NonStaticVideoTag","qualityLevel","setQualityLevel","useState","dispatch","useAppDispatch","params","details","videoElementSizeInfo","useAppSelector","isComplexPortrait","subtitles","shallowEqual","currentTime","duration","isEnded","firstPlay","showMiniPlayer","timerRef","useRef","waitingDurationRef","waitingTimerRef","initialWaitingDurationRef","bannerLoadingDurationRef","loadingDurationRef","loadingCounterRef","videoEntranceTimeRef","videoTag","useContinuousPlaybackInterval_default","useBeforeUnload_default","useLayoutEffect","hls","Hls","handleHlsConfig","handlePageLoadTime","handleMediaAttached","handleFragBuffered","handleFragLoading","event","data","handleFragChanged","handleFragParsed","handleVideoWaiting","handleVideoSeeking","handleVideoPlay","handleVideoPlaying","handleVideoPause","handleVideoTimeUpdate","handleVideoCanPlay","handleVideoEnded","handleVideoVisibilityChange","handleIosVideoPlay","handleIosVideoPlaying","handleIosVideoTimeUpdate","handleIosVideoEnded","appendQueryParamsToChunksIOS","handleHlsErrors","handleManifestParsed","handleManifestLoaded","useEffect","conditions","setIsEnded","usePingPong_default","Image","nonStaticVideoTag_default"]}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "cafe-video-player",
+  "version": "1.0.0",
+  "private": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.cjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "tailwind-build": "npx tailwindcss -i ./src/app/globals.css -o ./dist/videoPlayerStyles.css",
+    "tsup-publish": "tsup && @powershell copy package.json ./dist && npm run tailwind-build"
+  },
+  "dependencies": {
+    "@reduxjs/toolkit": "^2.2.3",
+    "animate.css": "^4.1.1",
+    "axios": "^1.6.8",
+    "hls.js": "^1.5.8",
+    "js-cookie": "^3.0.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "next": "14.2.3",
+    "react-redux": "^9.1.1",
+    "use-double-tap": "^1.3.6"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "tsup": "^8.0.2"
+  }
+}

package/staticVideoTag-KJ27S5UW.mjs

@@ -0,0 +1,2 @@
+import{A as g,B as S,C as v,w as u,x as y,y as h,z as P}from"./chunk-VA5NNH6I.mjs";import{O as m,_ as p,ba as t,ca as f,da as o,z as c}from"./chunk-5F7JQEMY.mjs";import{e as s}from"./chunk-TU7BZ2RY.mjs";s();import{useEffect as V,useRef as a}from"react";import{shallowEqual as w}from"react-redux";var R=()=>{let D=f(),{params:E}=o(({videoData:{params:e}})=>({params:e}),w);o(({controller:{firstPlay:e}})=>({firstPlay:e}),w);let i=a(0),n=a(0),l=a(null),r=a(null);return V(()=>{p(i),n.current=Date.now()},[]),V(()=>{let e=()=>{let d=m()?.getBoundingClientRect();d&&D(c(d))};return t("isFirstPlay")&&e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearInterval(r.current)}},[]),React.createElement("video",{autoPlay:t("hasAutoPlay"),id:"player-tag",className:`pl-w-full pl-h-full pl-items-center pl-flex-1 ${t("isFirstPlay")&&"pl-opacity-0"}`,onPause:u,onPlay:e=>y(e,l),onPlaying:()=>h(i,n,l),onTimeUpdate:P,onCanPlay:g,onLoadedData:e=>S(e,r),onEnded:v,playsInline:!0},React.createElement("source",{src:E.src}))},W=R;export{W as default};
+//# sourceMappingURL=staticVideoTag-KJ27S5UW.mjs.map

package/staticVideoTag-KJ27S5UW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/videoPlayerLibrary/components/custom-components/videoTag/staticVideoTag.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport { shallowEqual } from \"react-redux\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../helpers/redux/hooks\";\r\nimport { handlePageLoadTime } from \"../../../helpers/helpers\";\r\nimport { videoTag } from \"../../../helpers/constants\";\r\nimport { setVideoElementSizeInfo } from \"../../../helpers/redux/slices/videoDataSlice\";\r\nimport { ConditionName } from \"../../../helpers/interfaces/enums\";\r\nimport { conditions } from \"../../../helpers/conditions/conditions\";\r\nimport { handleStaticVideoCanPlay, handleStaticVideoEnded, handleStaticVideoLoadedData, handleStaticVideoPause, handleStaticVideoPlay, handleStaticVideoPlaying, handleStaticVideoTimeUpdate } from \"../../../helpers/redux/actions/playerCore.actions\";\r\n\r\nconst StaticVideoTag = () => {\r\n    const dispatch = useAppDispatch();\r\n    const { params } = useAppSelector(({ videoData: { params } }) => ({ params }), shallowEqual);\r\n    useAppSelector(({ controller: { firstPlay } }) => ({ firstPlay }), shallowEqual);\r\n    const loadingDurationRef = useRef<any>(0);\r\n    const initialWaitingDurationRef = useRef<any>(0);\r\n    const timerRef = useRef<any>(null);\r\n    const intervalRef = useRef<any>(null);\r\n\r\n    useEffect(() => {\r\n        handlePageLoadTime(loadingDurationRef);\r\n        initialWaitingDurationRef.current = Date.now();\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n        const handleResize = () => {\r\n            const element: any = videoTag()?.getBoundingClientRect();\r\n            if (element) dispatch(setVideoElementSizeInfo(element));\r\n        };\r\n        if (conditions(ConditionName.isFirstPlay)) handleResize();\r\n        window.addEventListener(\"resize\", handleResize);\r\n\r\n        return () => {\r\n            window.removeEventListener(\"resize\", handleResize);\r\n            clearInterval(intervalRef.current);\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <video\r\n            autoPlay={conditions(ConditionName.hasAutoPlay)}\r\n            id=\"player-tag\"\r\n            className={`pl-w-full pl-h-full pl-items-center pl-flex-1 ${conditions(ConditionName.isFirstPlay) && \"pl-opacity-0\"}`}\r\n            onPause={handleStaticVideoPause}\r\n            onPlay={(event) => handleStaticVideoPlay(event, timerRef)}\r\n            onPlaying={() => handleStaticVideoPlaying(loadingDurationRef, initialWaitingDurationRef, timerRef)}\r\n            onTimeUpdate={handleStaticVideoTimeUpdate}\r\n            onCanPlay={handleStaticVideoCanPlay}\r\n            onLoadedData={(event) => handleStaticVideoLoadedData(event, intervalRef)}\r\n            onEnded={handleStaticVideoEnded}\r\n            playsInline\r\n        >\r\n            <source src={params.src} />\r\n        </video>\r\n    );\r\n};\r\n\r\nexport default StaticVideoTag;\r\n"],"mappings":"2MAAAA,IAAA,OAAS,aAAAC,EAAW,UAAAC,MAAc,QAClC,OAAS,gBAAAC,MAAoB,cAS7B,IAAMC,EAAiB,IAAM,CACzB,IAAMC,EAAWC,EAAe,EAC1B,CAAE,OAAAC,CAAO,EAAIC,EAAe,CAAC,CAAE,UAAW,CAAE,OAAAD,CAAO,CAAE,KAAO,CAAE,OAAAA,CAAO,GAAIE,CAAY,EAC3FD,EAAe,CAAC,CAAE,WAAY,CAAE,UAAAE,CAAU,CAAE,KAAO,CAAE,UAAAA,CAAU,GAAID,CAAY,EAC/E,IAAME,EAAqBC,EAAY,CAAC,EAClCC,EAA4BD,EAAY,CAAC,EACzCE,EAAWF,EAAY,IAAI,EAC3BG,EAAcH,EAAY,IAAI,EAEpC,OAAAI,EAAU,IAAM,CACZC,EAAmBN,CAAkB,EACrCE,EAA0B,QAAU,KAAK,IAAI,CACjD,EAAG,CAAC,CAAC,EAELG,EAAU,IAAM,CACZ,IAAME,EAAe,IAAM,CACvB,IAAMC,EAAeC,EAAS,GAAG,sBAAsB,EACnDD,GAASd,EAASgB,EAAwBF,CAAO,CAAC,CAC1D,EACA,OAAIG,eAAoC,GAAGJ,EAAa,EACxD,OAAO,iBAAiB,SAAUA,CAAY,EAEvC,IAAM,CACT,OAAO,oBAAoB,SAAUA,CAAY,EACjD,cAAcH,EAAY,OAAO,CACrC,CACJ,EAAG,CAAC,CAAC,EAGD,oBAAC,SACG,SAAUO,eAAoC,EAC9C,GAAG,aACH,UAAW,iDAAiDA,eAAoC,GAAK,cAAc,GACnH,QAASC,EACT,OAASC,GAAUC,EAAsBD,EAAOV,CAAQ,EACxD,UAAW,IAAMY,EAAyBf,EAAoBE,EAA2BC,CAAQ,EACjG,aAAca,EACd,UAAWC,EACX,aAAeJ,GAAUK,EAA4BL,EAAOT,CAAW,EACvE,QAASe,EACT,YAAW,IAEX,oBAAC,UAAO,IAAKvB,EAAO,IAAK,CAC7B,CAER,EAEOwB,EAAQ3B","names":["init_esm_shims","useEffect","useRef","shallowEqual","StaticVideoTag","dispatch","useAppDispatch","params","useAppSelector","shallowEqual","firstPlay","loadingDurationRef","useRef","initialWaitingDurationRef","timerRef","intervalRef","useEffect","handlePageLoadTime","handleResize","element","videoTag","setVideoElementSizeInfo","conditions","handleStaticVideoPause","event","handleStaticVideoPlay","handleStaticVideoPlaying","handleStaticVideoTimeUpdate","handleStaticVideoCanPlay","handleStaticVideoLoadedData","handleStaticVideoEnded","staticVideoTag_default"]}

package/staticVideoTag-SHIMRS2E.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _chunkRCU5ZGMIjs = require('./chunk-RCU5ZGMI.js');var _chunk3Q5F32UVjs = require('./chunk-3Q5F32UV.js');var _chunkA3BCKK27js = require('./chunk-A3BCKK27.js');_chunkA3BCKK27js.e.call(void 0, );var _react = require('react');var _reactredux = require('react-redux');var R=()=>{let D=_chunk3Q5F32UVjs.ca.call(void 0, ),{params:E}=_chunk3Q5F32UVjs.da.call(void 0, ({videoData:{params:e}})=>({params:e}),_reactredux.shallowEqual);_chunk3Q5F32UVjs.da.call(void 0, ({controller:{firstPlay:e}})=>({firstPlay:e}),_reactredux.shallowEqual);let i=_react.useRef.call(void 0, 0),n=_react.useRef.call(void 0, 0),l=_react.useRef.call(void 0, null),r=_react.useRef.call(void 0, null);return _react.useEffect.call(void 0, ()=>{_chunk3Q5F32UVjs._.call(void 0, i),n.current=Date.now()},[]),_react.useEffect.call(void 0, ()=>{let e=()=>{let d=_optionalChain([_chunk3Q5F32UVjs.O.call(void 0, ), 'optionalAccess', _2 => _2.getBoundingClientRect, 'call', _3 => _3()]);d&&D(_chunk3Q5F32UVjs.z.call(void 0, d))};return _chunk3Q5F32UVjs.ba.call(void 0, "isFirstPlay")&&e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e),clearInterval(r.current)}},[]),React.createElement("video",{autoPlay:_chunk3Q5F32UVjs.ba.call(void 0, "hasAutoPlay"),id:"player-tag",className:`pl-w-full pl-h-full pl-items-center pl-flex-1 ${_chunk3Q5F32UVjs.ba.call(void 0, "isFirstPlay")&&"pl-opacity-0"}`,onPause:_chunkRCU5ZGMIjs.w,onPlay:e=>_chunkRCU5ZGMIjs.x.call(void 0, e,l),onPlaying:()=>_chunkRCU5ZGMIjs.y.call(void 0, i,n,l),onTimeUpdate:_chunkRCU5ZGMIjs.z,onCanPlay:_chunkRCU5ZGMIjs.A,onLoadedData:e=>_chunkRCU5ZGMIjs.B.call(void 0, e,r),onEnded:_chunkRCU5ZGMIjs.C,playsInline:!0},React.createElement("source",{src:E.src}))},B= exports.default =R;exports.default = B;
+//# sourceMappingURL=staticVideoTag-SHIMRS2E.js.map

package/staticVideoTag-SHIMRS2E.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/videoPlayerLibrary/components/custom-components/videoTag/staticVideoTag.tsx"],"names":["init_cjs_shims","useEffect","useRef","shallowEqual","StaticVideoTag","dispatch","useAppDispatch","params","useAppSelector","firstPlay","loadingDurationRef","initialWaitingDurationRef","timerRef","intervalRef","handlePageLoadTime","handleResize","element","videoTag","setVideoElementSizeInfo","conditions","handleStaticVideoPause","event","handleStaticVideoPlay","handleStaticVideoPlaying","handleStaticVideoTimeUpdate","handleStaticVideoCanPlay","handleStaticVideoLoadedData","handleStaticVideoEnded","staticVideoTag_default"],"mappings":"wMAAAA,IAAA,OAAS,aAAAC,EAAW,UAAAC,MAAc,QAClC,OAAS,gBAAAC,MAAoB,cAS7B,IAAMC,EAAiB,IAAM,CACzB,IAAMC,EAAWC,EAAe,EAC1B,CAAE,OAAAC,CAAO,EAAIC,EAAe,CAAC,CAAE,UAAW,CAAE,OAAAD,CAAO,CAAE,KAAO,CAAE,OAAAA,CAAO,GAAIJ,CAAY,EAC3FK,EAAe,CAAC,CAAE,WAAY,CAAE,UAAAC,CAAU,CAAE,KAAO,CAAE,UAAAA,CAAU,GAAIN,CAAY,EAC/E,IAAMO,EAAqBR,EAAY,CAAC,EAClCS,EAA4BT,EAAY,CAAC,EACzCU,EAAWV,EAAY,IAAI,EAC3BW,EAAcX,EAAY,IAAI,EAEpC,OAAAD,EAAU,IAAM,CACZa,EAAmBJ,CAAkB,EACrCC,EAA0B,QAAU,KAAK,IAAI,CACjD,EAAG,CAAC,CAAC,EAELV,EAAU,IAAM,CACZ,IAAMc,EAAe,IAAM,CACvB,IAAMC,EAAeC,EAAS,GAAG,sBAAsB,EACnDD,GAASX,EAASa,EAAwBF,CAAO,CAAC,CAC1D,EACA,OAAIG,eAAoC,GAAGJ,EAAa,EACxD,OAAO,iBAAiB,SAAUA,CAAY,EAEvC,IAAM,CACT,OAAO,oBAAoB,SAAUA,CAAY,EACjD,cAAcF,EAAY,OAAO,CACrC,CACJ,EAAG,CAAC,CAAC,EAGD,oBAAC,SACG,SAAUM,eAAoC,EAC9C,GAAG,aACH,UAAW,iDAAiDA,eAAoC,GAAK,cAAc,GACnH,QAASC,EACT,OAASC,GAAUC,EAAsBD,EAAOT,CAAQ,EACxD,UAAW,IAAMW,EAAyBb,EAAoBC,EAA2BC,CAAQ,EACjG,aAAcY,EACd,UAAWC,EACX,aAAeJ,GAAUK,EAA4BL,EAAOR,CAAW,EACvE,QAASc,EACT,YAAW,IAEX,oBAAC,UAAO,IAAKpB,EAAO,IAAK,CAC7B,CAER,EAEOqB,EAAQxB","sourcesContent":["import { useEffect, useRef } from \"react\";\r\nimport { shallowEqual } from \"react-redux\";\r\nimport { useAppDispatch, useAppSelector } from \"../../../helpers/redux/hooks\";\r\nimport { handlePageLoadTime } from \"../../../helpers/helpers\";\r\nimport { videoTag } from \"../../../helpers/constants\";\r\nimport { setVideoElementSizeInfo } from \"../../../helpers/redux/slices/videoDataSlice\";\r\nimport { ConditionName } from \"../../../helpers/interfaces/enums\";\r\nimport { conditions } from \"../../../helpers/conditions/conditions\";\r\nimport { handleStaticVideoCanPlay, handleStaticVideoEnded, handleStaticVideoLoadedData, handleStaticVideoPause, handleStaticVideoPlay, handleStaticVideoPlaying, handleStaticVideoTimeUpdate } from \"../../../helpers/redux/actions/playerCore.actions\";\r\n\r\nconst StaticVideoTag = () => {\r\n    const dispatch = useAppDispatch();\r\n    const { params } = useAppSelector(({ videoData: { params } }) => ({ params }), shallowEqual);\r\n    useAppSelector(({ controller: { firstPlay } }) => ({ firstPlay }), shallowEqual);\r\n    const loadingDurationRef = useRef<any>(0);\r\n    const initialWaitingDurationRef = useRef<any>(0);\r\n    const timerRef = useRef<any>(null);\r\n    const intervalRef = useRef<any>(null);\r\n\r\n    useEffect(() => {\r\n        handlePageLoadTime(loadingDurationRef);\r\n        initialWaitingDurationRef.current = Date.now();\r\n    }, []);\r\n\r\n    useEffect(() => {\r\n        const handleResize = () => {\r\n            const element: any = videoTag()?.getBoundingClientRect();\r\n            if (element) dispatch(setVideoElementSizeInfo(element));\r\n        };\r\n        if (conditions(ConditionName.isFirstPlay)) handleResize();\r\n        window.addEventListener(\"resize\", handleResize);\r\n\r\n        return () => {\r\n            window.removeEventListener(\"resize\", handleResize);\r\n            clearInterval(intervalRef.current);\r\n        };\r\n    }, []);\r\n\r\n    return (\r\n        <video\r\n            autoPlay={conditions(ConditionName.hasAutoPlay)}\r\n            id=\"player-tag\"\r\n            className={`pl-w-full pl-h-full pl-items-center pl-flex-1 ${conditions(ConditionName.isFirstPlay) && \"pl-opacity-0\"}`}\r\n            onPause={handleStaticVideoPause}\r\n            onPlay={(event) => handleStaticVideoPlay(event, timerRef)}\r\n            onPlaying={() => handleStaticVideoPlaying(loadingDurationRef, initialWaitingDurationRef, timerRef)}\r\n            onTimeUpdate={handleStaticVideoTimeUpdate}\r\n            onCanPlay={handleStaticVideoCanPlay}\r\n            onLoadedData={(event) => handleStaticVideoLoadedData(event, intervalRef)}\r\n            onEnded={handleStaticVideoEnded}\r\n            playsInline\r\n        >\r\n            <source src={params.src} />\r\n        </video>\r\n    );\r\n};\r\n\r\nexport default StaticVideoTag;\r\n"]}