@devix-technologies/react-gjirafa-vp-player 1.0.10 → 1.0.11

package/dist/react-gjirafa-vp-player.es.js

@@ -1630,7 +1630,7 @@ const gr = ne.div`
         projectId: n || "vp-player-projectId",
         video: {
           ...s.video,
-          // Set target video file and metadata (not always first video)
+          // Set target video file and metadata
           file: u == null ? void 0 : u.hlsUrl,
           title: u == null ? void 0 : u.title,
           // Don't set thumbnail - let VP Player manage thumbnails during scrolling
@@ -1641,10 +1641,13 @@ const gr = ne.div`
             // Will be set by API
             // Use original playlistVideoIndex - VP Player will navigate to it
             playlistVideoIndex: Number(x),
-            // Remove first video from playlist to avoid duplication (already in file)
-            videos: r.slice(1).map(($, R) => ({
-              videoId: String(R + 1),
-              // Keep original IDs
+            //   // Remove first video from playlist to avoid duplication (already in file)
+            //   videos: fetchedPlaylist.slice(1).map((video, index) => ({
+            //   videoId: String(index + 1), // Keep original IDs
+            // Keep all videos in playlist (don't remove first video)
+            videos: r.map(($, R) => ({
+              videoId: String(R),
+              // Use 0-based indexing
               title: $.title,
               file: $.hlsUrl,
               thumbnailUrl: $.thumbnailUrl,

package/dist/react-gjirafa-vp-player.umd.js

@@ -81,4 +81,4 @@ React keys must be passed directly to JSX without using spread:
  @media (min-width: 768px) {
    width: min(70vw, 960px); /* Responsive width for desktop, capped at 960px */
  }
-`,vr=(e,t)=>`https://vp-api.gjirafa.tech/api/v2/projects/${e}/videos?search=${t}`,wr=(e,t)=>`https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}/videos`,xr=e=>`https://host.vpplayer.tech/player/${e}/vpplayer.js`,Ne=(e,t)=>`vp-player-${e||"default"}-${t||""}`,$e=new Map,dt=(e,t)=>{const[r,n]=k.useState(!1),[a,i]=k.useState(null);return k.useEffect(()=>{let s=null,c,d=0;const m=3;let l;try{l=t||xr(e||"latest")}catch(P){const b=P instanceof Error?P.message:String(P);i(`Failed to resolve script URL: ${b}`),n(!1);return}if($e.get(l)){n(!0),i(null);return}if(document.querySelector(`script[src="${l}"]`)){$e.set(l,!0),n(!0),i(null);return}const g=()=>{s=document.createElement("script"),s.src=l,s.async=!0,c=window.setTimeout(()=>{n(!1),i(`Loading script timed out: ${l}`)},1e4),s.onload=()=>{clearTimeout(c),$e.set(l,!0),n(!0),i(null)},s.onerror=()=>{clearTimeout(c),d++,d<m?setTimeout(g,1e3*d):(n(!1),i(`Failed to load VP Player script after ${m} attempts: ${l}`))},document.body.appendChild(s)};return g(),()=>{clearTimeout(c),s&&document.body.contains(s)&&document.body.removeChild(s)}},[e,t]),{isLoaded:r,error:a}},Pr={},Ee=new Map,kr=3e4,Ve=5,ft=({projectId:e,videoId:t,playlistId:r,videoUrl:n,apiKey:a})=>{const[i,s]=k.useState(null),[c,d]=k.useState(null),[m,l]=k.useState(!1),[p,g]=k.useState(null),P=a||(typeof Pr<"u"?"1CFC4B619E9342B6BAC4879BA8C30CF216C4BA9D3F084B11825F4AB2D5CF845E":void 0);return k.useEffect(()=>{const b=t?`video:${t}`:r?`playlist:${r}`:null;if(!e||n||!t&&!r){s(n||null),d(null),l(!1),g(null);return}if(!P){l(!1),g("No API key provided");return}if(b&&Ee.has(b)){const R=Ee.get(b);s(R.url),d(R.playlist),l(!1),g(null);return}let f=!0;const h=new AbortController,y=h.signal,A=setTimeout(async()=>{var w,C;if(!f)return;l(!0),g(null);let R=0;for(;R<Ve&&f;)try{const u=t&&!r?vr(e,t):wr(e,r),I=setTimeout(()=>h.abort(),kr),V=await fetch(u,{method:"GET",headers:{"api-key":P,Accept:"application/json","Cache-Control":"no-cache"},signal:y});if(clearTimeout(I),!V.ok)throw new Error(`Fetch failed with status ${V.status}`);const T=await V.json();if(!f)return;if(t&&!r){const L=(C=(w=T.result)==null?void 0:w.items)==null?void 0:C.find(X=>X.mediaId===t);if(!(L!=null&&L.playbackUrl))throw new Error("Invalid video data");s(L.playbackUrl),d(null),b&&Ee.set(b,{url:L.playbackUrl,playlist:null})}else{if(!Array.isArray(T.result))throw new Error("Invalid playlist format");d(T.result),s(null),b&&Ee.set(b,{url:null,playlist:T.result})}break}catch(u){if(y.aborted){f&&g("Request timed out");break}if(R++,R>=Ve){const I=u instanceof Error?u.message:String(u);f&&g(`Failed after ${Ve} attempts: ${I}`)}else await new Promise(I=>setTimeout(I,2e3))}f&&l(!1)},100);return()=>{f=!1,clearTimeout(A),h.abort()}},[P,e,t,r,n]),{fetchedPlaybackUrl:i,fetchedPlaylist:c,isLoading:m,error:p}},Er={projectId:"vp-player-projectId",video:{file:"",playlist:{state:!0,playlistVideoIndex:0,videos:[]}},config:{autoplay:!0,muted:!0,loop:!1,size:{width:"100%",height:"30vh"},controls:{settingsButton:!0,chromecastButton:!1,nextButton:!0,fullscreenButton:!0,airplayButton:!1,bigPlayButton:!1,autopausePlayButton:!0,pictureInPictureButton:!1,relatedButton:!1,volumeButton:!0,shareButton:!0}}},pt=({videoUrl:e,fetchedPlaybackUrl:t,fetchedPlaylist:r,projectId:n,config:a={},isVerticalPlayer:i})=>{var l,p,g,P,b,f,h,y,x,A,R;const s={...Er,...a},c={...s.config,...a.config};if(e)return{...s,video:{...s.video,file:e,playlist:void 0},config:c};if(t)return{...s,video:{...s.video,file:t,playlist:void 0},config:c};if(r&&r.length>0){const w=((p=(l=a==null?void 0:a.video)==null?void 0:l.playlist)==null?void 0:p.playlistVideoIndex)??((g=a==null?void 0:a.config)==null?void 0:g.playlistVideoIndex)??0;if(i){const C=Number(w),u=r[C]||r[0];return{...s,projectId:n||"vp-player-projectId",video:{...s.video,file:u==null?void 0:u.hlsUrl,title:u==null?void 0:u.title,playlist:{state:!0,playlistId:"",playlistVideoIndex:Number(w),videos:r.slice(1).map((V,T)=>({videoId:String(T+1),title:V.title,file:V.hlsUrl,thumbnailUrl:V.thumbnailUrl,duration:V.duration}))}},config:c}}else return{...s,projectId:n||"vp-player-projectId",video:{...s.video,file:((P=r[Number(w)])==null?void 0:P.hlsUrl)||((b=r[0])==null?void 0:b.hlsUrl)||"",title:((f=r[Number(w)])==null?void 0:f.title)||((h=r[0])==null?void 0:h.title),thumbnail:((y=r[Number(w)])==null?void 0:y.thumbnailUrl)||((x=r[0])==null?void 0:x.thumbnailUrl),playlist:{state:!0,playlistVideoIndex:Number(w),videos:r.map((u,I)=>({videoId:String(I),title:u.title,file:u.hlsUrl,thumbnailUrl:u.thumbnailUrl,duration:u.duration}))}},config:c}}const d=((A=a==null?void 0:a.video)==null?void 0:A.playlist)||s.video.playlist,m=(R=a==null?void 0:a.video)==null?void 0:R.file;if(m)return{...s,video:{...s.video,file:m,playlist:void 0},config:c};if(d!=null&&d.videos&&d.videos.length>0){const w=d.videos[Number(d.playlistVideoIndex)||0];return{...s,video:{...s.video,file:(w==null?void 0:w.file)||"",playlist:{...d,state:d.state??!0,playlistVideoIndex:Number(d.playlistVideoIndex||0),videos:d.videos}},config:{...s.config,...a==null?void 0:a.config}}}throw new Error("No valid video source found. Provide videoUrl, videoId, playlistId, or config with video.file or playlist.")},ht=e=>{if(!e)return;const t=/https:\/\/host\.vpplayer\.tech\/player\/([^/]+)\/([^/]+)(?:\/[^/]+)?\.js/,r=e.match(t);return r?r[2]:void 0},mt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c={},apiKey:d,isReels:m=!1})=>{const l=k.useRef(null),p=k.useRef(null),{isLoaded:g,error:P}=dt(r,s),b=t||ht(s),[f,h]=k.useState(null),{fetchedPlaybackUrl:y,fetchedPlaylist:x,isLoading:A,error:R}=ft({projectId:a,videoId:b,playlistId:i,videoUrl:n,apiKey:d}),w=Ne(e,b),C=k.useMemo(()=>{const u=c.config||{},I=m&&!u.size?{sizeType:"RESPONSIVE",aspectRatio:"9:16"}:u.size||{sizeType:"FIXED",width:"100%"};return{...c,config:{...u,size:I}}},[c,m]);return k.useEffect(()=>{if(P){h(P);return}if(!g||A&&!n)return;let u=!0;const V=setTimeout(async()=>{try{const T=s==null?void 0:s.includes("vertical-player");if(document.querySelectorAll('[id*="player"]').forEach(ae=>{var pe,he;const Z=ae.id;if(Z!==w)try{const o=T?(pe=window.vpVerticalPlayer)==null?void 0:pe.call(window,Z):(he=window.vpPlayer)==null?void 0:he.call(window,Z);o!=null&&o.destroy&&o.destroy()}catch(o){console.warn(`Failed to destroy existing player ${Z}:`,o)}}),await new Promise(ae=>setTimeout(ae,100)),!u||!l.current)return;if(!document.getElementById(w)){h("DOM element not found after cleanup.");return}if(!window.vpPlayer&&!window.vpVerticalPlayer){h("VP Player script not loaded.");return}const z=T?window.vpVerticalPlayer:window.vpPlayer;if(!z){h(`VP ${T?"Vertical ":""}Player script not loaded.`);return}const K=pt({videoUrl:n,fetchedPlaybackUrl:y??void 0,fetchedPlaylist:x??void 0,projectId:a,config:C,isVerticalPlayer:T}),ne=z(w);if(!ne){h(`Failed to create VP ${T?"Vertical ":""}Player instance.`);return}u&&l.current&&(ne.setup(K),p.current=ne,h(null))}catch(T){if(u){const L=T instanceof Error?T.message:String(T);h(L),console.error("VP Player initialization error:",T)}}},150);return()=>{u=!1,clearTimeout(V)}},[g,A,n,y,x,a,C,w,P,s]),k.useEffect(()=>()=>{if(p.current){try{p.current.destroy&&p.current.destroy()}catch(I){console.warn(`Failed to destroy player ${w}:`,I)}p.current=null}const u=document.getElementById(w);u&&(u.innerHTML="")},[w]),{playerRef:l,playerInstanceRef:p,isScriptLoaded:g,isLoading:A,error:R||f||P}},yt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c={},apiKey:d,isReels:m=!1,hiddenClasses:l=[],onClose:p,className:g})=>{var V,T,L,X;const{playerRef:P,playerInstanceRef:b,isScriptLoaded:f,isLoading:h,error:y}=mt({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c,apiKey:d,isReels:m}),[x,A]=k.useState(!0),R=()=>m&&A(!0),w=()=>{var z,K;A(!1),(K=(z=b.current)==null?void 0:z.play)==null||K.call(z),p==null||p()},C=(T=(V=c==null?void 0:c.config)==null?void 0:V.size)!=null&&T.width?typeof c.config.size.width=="number"?`${c.config.size.width}px`:c.config.size.width:void 0,u=(X=(L=c==null?void 0:c.config)==null?void 0:L.size)!=null&&X.height?typeof c.config.size.height=="number"?`${c.config.size.height}px`:c.config.size.height:void 0,I=Ne(e,t);return y?N.jsxs(je,{type:"error",children:["An error occurred: ",y]}):h||!f?N.jsx(je,{type:"loading",children:"Loading..."}):N.jsxs(N.Fragment,{children:[m&&!x?N.jsx("div",{onClick:R}):null,!m&&N.jsx("div",{children:N.jsx(Le,{id:I,ref:P,width:C||"100%",height:u||"auto",$hiddenClasses:l,className:g})},I),m&&x&&N.jsx(lt,{onClick:w,className:g,children:N.jsx(ut,{className:g,onClick:z=>z.stopPropagation(),children:N.jsx("div",{children:N.jsx(Le,{id:I,ref:P,width:"100%",height:"auto",$hiddenClasses:l,className:g})},I)})})]})},gt=k.createContext(void 0),_r=({children:e})=>{const[t,r]=k.useState(!1),[n,a]=k.useState(null),[i,s]=k.useState(null),c=k.useCallback(l=>{try{const p=Ne(l.playerId,l.videoId);a({...l,playerId:p}),r(!0),s(null)}catch{s("Failed to show player.")}},[]),d=k.useCallback(()=>{r(!1),a(null),s(null)},[]),m=k.useMemo(()=>({showPlayer:c,hidePlayer:d,isPlayerVisible:t,playerParams:n}),[c,d,t,n]);return N.jsxs(gt.Provider,{value:m,children:[e,i&&N.jsx(je,{type:"error",children:i}),t&&(n==null?void 0:n.playerId)&&N.jsx(yt,{playerId:n.playerId,videoId:n.videoId,projectId:n.projectId,videoUrl:n.videoUrl,version:n.version,playlistId:n.playlistId,scriptUrl:n.scriptUrl,config:n.config,isReels:n.isReels,thumbnailUrl:n.thumbnailUrl,onClose:d,hiddenClasses:n.hiddenClasses||[],apiKey:n.apiKey,className:n.className})]})},Sr=()=>{const e=k.useContext(gt);if(!e)throw new Error("useVPPlayer must be used within a VPPlayerProvider");return e},Ar={projectId:"vp-player-projectId",video:{file:"",playlist:{state:!0,playlistVideoIndex:0,videos:[]}},config:{autoplay:!0,pauseOtherVideos:!0,focusOnAutostart:!1,muted:!0,loop:!1,size:{width:"100%"},controls:{settingsButton:!0,chromecastButton:!1,nextButton:!1,fullscreenButton:!0,airplayButton:!1,bigPlayButton:!1,autopausePlayButton:!0,pictureInPictureButton:!1,relatedButton:!1,volumeButton:!0,shareButton:!0}}},Cr={config:{autostartOnLoad:{state:!0,onMobile:!0,onData:!0},muted:!0}},Tr={config:{autoplay:!0,muted:!0}},_e={video:{advertising:!0,ads:{skipAd:{state:!0,skipFrom:5}}},config:{adAnnouncement:{state:!0,timeBeforeAd:5},adsRequireInteraction:!1}},Rr=(e,t,r="time",n=0)=>{var a;return{..._e,video:{..._e.video,ads:{...(a=_e.video)==null?void 0:a.ads,adBreaks:[{adTagUrl:t,breakType:e,breakTimingType:r,breakTimingValue:n}]}}}},Ir="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",Or="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",jr="https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4",Lr="https://images.pexels.com/videos/4678261/pexels-photo-4678261.jpeg?auto=compress&cs=tinysrgb&w=600",Nr="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=",$r="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";S.AD_TAG_LINEAR_URL=Nr,S.AD_TAG_SKIPPABLE_LINEAR_URL=$r,S.BIG_BUCK_BUNNY_URL=Ir,S.ELEPHANTS_DREAM_URL=Or,S.Overlay=lt,S.PEXELS_THUMBNAIL_URL=Lr,S.PEXELS_VERTICAL_VIDEO_URL=jr,S.PlayerContainer=Le,S.PlayerWrapper=ut,S.VPPlayer=yt,S.VPPlayerProvider=_r,S.baseConfig=Cr,S.baseConfigWithAds=_e,S.baseConfigWithAutoplay=Tr,S.buildVPPlayerConfig=pt,S.defaultVPPlayerConfig=Ar,S.extractVideoId=ht,S.getAdConfig=Rr,S.useVPPlayer=Sr,S.useVPPlayerLogic=mt,S.useVPPlayerScript=dt,S.useVideoData=ft,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});
+`,vr=(e,t)=>`https://vp-api.gjirafa.tech/api/v2/projects/${e}/videos?search=${t}`,wr=(e,t)=>`https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}/videos`,xr=e=>`https://host.vpplayer.tech/player/${e}/vpplayer.js`,Ne=(e,t)=>`vp-player-${e||"default"}-${t||""}`,$e=new Map,dt=(e,t)=>{const[r,n]=k.useState(!1),[a,i]=k.useState(null);return k.useEffect(()=>{let s=null,c,d=0;const m=3;let l;try{l=t||xr(e||"latest")}catch(P){const b=P instanceof Error?P.message:String(P);i(`Failed to resolve script URL: ${b}`),n(!1);return}if($e.get(l)){n(!0),i(null);return}if(document.querySelector(`script[src="${l}"]`)){$e.set(l,!0),n(!0),i(null);return}const g=()=>{s=document.createElement("script"),s.src=l,s.async=!0,c=window.setTimeout(()=>{n(!1),i(`Loading script timed out: ${l}`)},1e4),s.onload=()=>{clearTimeout(c),$e.set(l,!0),n(!0),i(null)},s.onerror=()=>{clearTimeout(c),d++,d<m?setTimeout(g,1e3*d):(n(!1),i(`Failed to load VP Player script after ${m} attempts: ${l}`))},document.body.appendChild(s)};return g(),()=>{clearTimeout(c),s&&document.body.contains(s)&&document.body.removeChild(s)}},[e,t]),{isLoaded:r,error:a}},Pr={},Ee=new Map,kr=3e4,Ve=5,ft=({projectId:e,videoId:t,playlistId:r,videoUrl:n,apiKey:a})=>{const[i,s]=k.useState(null),[c,d]=k.useState(null),[m,l]=k.useState(!1),[p,g]=k.useState(null),P=a||(typeof Pr<"u"?"1CFC4B619E9342B6BAC4879BA8C30CF216C4BA9D3F084B11825F4AB2D5CF845E":void 0);return k.useEffect(()=>{const b=t?`video:${t}`:r?`playlist:${r}`:null;if(!e||n||!t&&!r){s(n||null),d(null),l(!1),g(null);return}if(!P){l(!1),g("No API key provided");return}if(b&&Ee.has(b)){const R=Ee.get(b);s(R.url),d(R.playlist),l(!1),g(null);return}let f=!0;const h=new AbortController,y=h.signal,A=setTimeout(async()=>{var w,C;if(!f)return;l(!0),g(null);let R=0;for(;R<Ve&&f;)try{const u=t&&!r?vr(e,t):wr(e,r),I=setTimeout(()=>h.abort(),kr),V=await fetch(u,{method:"GET",headers:{"api-key":P,Accept:"application/json","Cache-Control":"no-cache"},signal:y});if(clearTimeout(I),!V.ok)throw new Error(`Fetch failed with status ${V.status}`);const T=await V.json();if(!f)return;if(t&&!r){const L=(C=(w=T.result)==null?void 0:w.items)==null?void 0:C.find(X=>X.mediaId===t);if(!(L!=null&&L.playbackUrl))throw new Error("Invalid video data");s(L.playbackUrl),d(null),b&&Ee.set(b,{url:L.playbackUrl,playlist:null})}else{if(!Array.isArray(T.result))throw new Error("Invalid playlist format");d(T.result),s(null),b&&Ee.set(b,{url:null,playlist:T.result})}break}catch(u){if(y.aborted){f&&g("Request timed out");break}if(R++,R>=Ve){const I=u instanceof Error?u.message:String(u);f&&g(`Failed after ${Ve} attempts: ${I}`)}else await new Promise(I=>setTimeout(I,2e3))}f&&l(!1)},100);return()=>{f=!1,clearTimeout(A),h.abort()}},[P,e,t,r,n]),{fetchedPlaybackUrl:i,fetchedPlaylist:c,isLoading:m,error:p}},Er={projectId:"vp-player-projectId",video:{file:"",playlist:{state:!0,playlistVideoIndex:0,videos:[]}},config:{autoplay:!0,muted:!0,loop:!1,size:{width:"100%",height:"30vh"},controls:{settingsButton:!0,chromecastButton:!1,nextButton:!0,fullscreenButton:!0,airplayButton:!1,bigPlayButton:!1,autopausePlayButton:!0,pictureInPictureButton:!1,relatedButton:!1,volumeButton:!0,shareButton:!0}}},pt=({videoUrl:e,fetchedPlaybackUrl:t,fetchedPlaylist:r,projectId:n,config:a={},isVerticalPlayer:i})=>{var l,p,g,P,b,f,h,y,x,A,R;const s={...Er,...a},c={...s.config,...a.config};if(e)return{...s,video:{...s.video,file:e,playlist:void 0},config:c};if(t)return{...s,video:{...s.video,file:t,playlist:void 0},config:c};if(r&&r.length>0){const w=((p=(l=a==null?void 0:a.video)==null?void 0:l.playlist)==null?void 0:p.playlistVideoIndex)??((g=a==null?void 0:a.config)==null?void 0:g.playlistVideoIndex)??0;if(i){const C=Number(w),u=r[C]||r[0];return{...s,projectId:n||"vp-player-projectId",video:{...s.video,file:u==null?void 0:u.hlsUrl,title:u==null?void 0:u.title,playlist:{state:!0,playlistId:"",playlistVideoIndex:Number(w),videos:r.map((V,T)=>({videoId:String(T),title:V.title,file:V.hlsUrl,thumbnailUrl:V.thumbnailUrl,duration:V.duration}))}},config:c}}else return{...s,projectId:n||"vp-player-projectId",video:{...s.video,file:((P=r[Number(w)])==null?void 0:P.hlsUrl)||((b=r[0])==null?void 0:b.hlsUrl)||"",title:((f=r[Number(w)])==null?void 0:f.title)||((h=r[0])==null?void 0:h.title),thumbnail:((y=r[Number(w)])==null?void 0:y.thumbnailUrl)||((x=r[0])==null?void 0:x.thumbnailUrl),playlist:{state:!0,playlistVideoIndex:Number(w),videos:r.map((u,I)=>({videoId:String(I),title:u.title,file:u.hlsUrl,thumbnailUrl:u.thumbnailUrl,duration:u.duration}))}},config:c}}const d=((A=a==null?void 0:a.video)==null?void 0:A.playlist)||s.video.playlist,m=(R=a==null?void 0:a.video)==null?void 0:R.file;if(m)return{...s,video:{...s.video,file:m,playlist:void 0},config:c};if(d!=null&&d.videos&&d.videos.length>0){const w=d.videos[Number(d.playlistVideoIndex)||0];return{...s,video:{...s.video,file:(w==null?void 0:w.file)||"",playlist:{...d,state:d.state??!0,playlistVideoIndex:Number(d.playlistVideoIndex||0),videos:d.videos}},config:{...s.config,...a==null?void 0:a.config}}}throw new Error("No valid video source found. Provide videoUrl, videoId, playlistId, or config with video.file or playlist.")},ht=e=>{if(!e)return;const t=/https:\/\/host\.vpplayer\.tech\/player\/([^/]+)\/([^/]+)(?:\/[^/]+)?\.js/,r=e.match(t);return r?r[2]:void 0},mt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c={},apiKey:d,isReels:m=!1})=>{const l=k.useRef(null),p=k.useRef(null),{isLoaded:g,error:P}=dt(r,s),b=t||ht(s),[f,h]=k.useState(null),{fetchedPlaybackUrl:y,fetchedPlaylist:x,isLoading:A,error:R}=ft({projectId:a,videoId:b,playlistId:i,videoUrl:n,apiKey:d}),w=Ne(e,b),C=k.useMemo(()=>{const u=c.config||{},I=m&&!u.size?{sizeType:"RESPONSIVE",aspectRatio:"9:16"}:u.size||{sizeType:"FIXED",width:"100%"};return{...c,config:{...u,size:I}}},[c,m]);return k.useEffect(()=>{if(P){h(P);return}if(!g||A&&!n)return;let u=!0;const V=setTimeout(async()=>{try{const T=s==null?void 0:s.includes("vertical-player");if(document.querySelectorAll('[id*="player"]').forEach(ae=>{var pe,he;const Z=ae.id;if(Z!==w)try{const o=T?(pe=window.vpVerticalPlayer)==null?void 0:pe.call(window,Z):(he=window.vpPlayer)==null?void 0:he.call(window,Z);o!=null&&o.destroy&&o.destroy()}catch(o){console.warn(`Failed to destroy existing player ${Z}:`,o)}}),await new Promise(ae=>setTimeout(ae,100)),!u||!l.current)return;if(!document.getElementById(w)){h("DOM element not found after cleanup.");return}if(!window.vpPlayer&&!window.vpVerticalPlayer){h("VP Player script not loaded.");return}const z=T?window.vpVerticalPlayer:window.vpPlayer;if(!z){h(`VP ${T?"Vertical ":""}Player script not loaded.`);return}const K=pt({videoUrl:n,fetchedPlaybackUrl:y??void 0,fetchedPlaylist:x??void 0,projectId:a,config:C,isVerticalPlayer:T}),ne=z(w);if(!ne){h(`Failed to create VP ${T?"Vertical ":""}Player instance.`);return}u&&l.current&&(ne.setup(K),p.current=ne,h(null))}catch(T){if(u){const L=T instanceof Error?T.message:String(T);h(L),console.error("VP Player initialization error:",T)}}},150);return()=>{u=!1,clearTimeout(V)}},[g,A,n,y,x,a,C,w,P,s]),k.useEffect(()=>()=>{if(p.current){try{p.current.destroy&&p.current.destroy()}catch(I){console.warn(`Failed to destroy player ${w}:`,I)}p.current=null}const u=document.getElementById(w);u&&(u.innerHTML="")},[w]),{playerRef:l,playerInstanceRef:p,isScriptLoaded:g,isLoading:A,error:R||f||P}},yt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c={},apiKey:d,isReels:m=!1,hiddenClasses:l=[],onClose:p,className:g})=>{var V,T,L,X;const{playerRef:P,playerInstanceRef:b,isScriptLoaded:f,isLoading:h,error:y}=mt({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:s,config:c,apiKey:d,isReels:m}),[x,A]=k.useState(!0),R=()=>m&&A(!0),w=()=>{var z,K;A(!1),(K=(z=b.current)==null?void 0:z.play)==null||K.call(z),p==null||p()},C=(T=(V=c==null?void 0:c.config)==null?void 0:V.size)!=null&&T.width?typeof c.config.size.width=="number"?`${c.config.size.width}px`:c.config.size.width:void 0,u=(X=(L=c==null?void 0:c.config)==null?void 0:L.size)!=null&&X.height?typeof c.config.size.height=="number"?`${c.config.size.height}px`:c.config.size.height:void 0,I=Ne(e,t);return y?N.jsxs(je,{type:"error",children:["An error occurred: ",y]}):h||!f?N.jsx(je,{type:"loading",children:"Loading..."}):N.jsxs(N.Fragment,{children:[m&&!x?N.jsx("div",{onClick:R}):null,!m&&N.jsx("div",{children:N.jsx(Le,{id:I,ref:P,width:C||"100%",height:u||"auto",$hiddenClasses:l,className:g})},I),m&&x&&N.jsx(lt,{onClick:w,className:g,children:N.jsx(ut,{className:g,onClick:z=>z.stopPropagation(),children:N.jsx("div",{children:N.jsx(Le,{id:I,ref:P,width:"100%",height:"auto",$hiddenClasses:l,className:g})},I)})})]})},gt=k.createContext(void 0),_r=({children:e})=>{const[t,r]=k.useState(!1),[n,a]=k.useState(null),[i,s]=k.useState(null),c=k.useCallback(l=>{try{const p=Ne(l.playerId,l.videoId);a({...l,playerId:p}),r(!0),s(null)}catch{s("Failed to show player.")}},[]),d=k.useCallback(()=>{r(!1),a(null),s(null)},[]),m=k.useMemo(()=>({showPlayer:c,hidePlayer:d,isPlayerVisible:t,playerParams:n}),[c,d,t,n]);return N.jsxs(gt.Provider,{value:m,children:[e,i&&N.jsx(je,{type:"error",children:i}),t&&(n==null?void 0:n.playerId)&&N.jsx(yt,{playerId:n.playerId,videoId:n.videoId,projectId:n.projectId,videoUrl:n.videoUrl,version:n.version,playlistId:n.playlistId,scriptUrl:n.scriptUrl,config:n.config,isReels:n.isReels,thumbnailUrl:n.thumbnailUrl,onClose:d,hiddenClasses:n.hiddenClasses||[],apiKey:n.apiKey,className:n.className})]})},Sr=()=>{const e=k.useContext(gt);if(!e)throw new Error("useVPPlayer must be used within a VPPlayerProvider");return e},Ar={projectId:"vp-player-projectId",video:{file:"",playlist:{state:!0,playlistVideoIndex:0,videos:[]}},config:{autoplay:!0,pauseOtherVideos:!0,focusOnAutostart:!1,muted:!0,loop:!1,size:{width:"100%"},controls:{settingsButton:!0,chromecastButton:!1,nextButton:!1,fullscreenButton:!0,airplayButton:!1,bigPlayButton:!1,autopausePlayButton:!0,pictureInPictureButton:!1,relatedButton:!1,volumeButton:!0,shareButton:!0}}},Cr={config:{autostartOnLoad:{state:!0,onMobile:!0,onData:!0},muted:!0}},Tr={config:{autoplay:!0,muted:!0}},_e={video:{advertising:!0,ads:{skipAd:{state:!0,skipFrom:5}}},config:{adAnnouncement:{state:!0,timeBeforeAd:5},adsRequireInteraction:!1}},Rr=(e,t,r="time",n=0)=>{var a;return{..._e,video:{..._e.video,ads:{...(a=_e.video)==null?void 0:a.ads,adBreaks:[{adTagUrl:t,breakType:e,breakTimingType:r,breakTimingValue:n}]}}}},Ir="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",Or="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",jr="https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4",Lr="https://images.pexels.com/videos/4678261/pexels-photo-4678261.jpeg?auto=compress&cs=tinysrgb&w=600",Nr="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=",$r="https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";S.AD_TAG_LINEAR_URL=Nr,S.AD_TAG_SKIPPABLE_LINEAR_URL=$r,S.BIG_BUCK_BUNNY_URL=Ir,S.ELEPHANTS_DREAM_URL=Or,S.Overlay=lt,S.PEXELS_THUMBNAIL_URL=Lr,S.PEXELS_VERTICAL_VIDEO_URL=jr,S.PlayerContainer=Le,S.PlayerWrapper=ut,S.VPPlayer=yt,S.VPPlayerProvider=_r,S.baseConfig=Cr,S.baseConfigWithAds=_e,S.baseConfigWithAutoplay=Tr,S.buildVPPlayerConfig=pt,S.defaultVPPlayerConfig=Ar,S.extractVideoId=ht,S.getAdConfig=Rr,S.useVPPlayer=Sr,S.useVPPlayerLogic=mt,S.useVPPlayerScript=dt,S.useVideoData=ft,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devix-technologies/react-gjirafa-vp-player",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "main": "./dist/react-gjirafa-vp-player.umd.js",
   "module": "./dist/react-gjirafa-vp-player.es.js",

package/dist/App.d.ts

@@ -1,2 +0,0 @@
-declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;

package/dist/components/Feedback.d.ts

@@ -1,25 +0,0 @@
-import { ReactNode } from "react";
-/**
- * Props for the FeedbackMessage component.
- */
-interface FeedbackMessageProps {
-    type: "error" | "loading" | "success" | "warning";
-    children: ReactNode;
-    className?: string;
-    icon?: ReactNode;
-    action?: ReactNode;
-}
-/**
- * FeedbackMessage component for displaying various types of messages (error, loading, success, warning).
- * Can be customized with an icon, action button, and additional styles.
- *
- * @param {FeedbackMessageProps} props - The properties for the feedback message.
- * @param {"error" | "loading" | "success" | "warning"} props.type - The type of message to display.
- * @param {ReactNode} props.children - The content of the message.
- * @param {string} [props.className] - Custom class for additional styling.
- * @param {ReactNode} [props.icon] - Optional icon to display before the message.
- * @param {ReactNode} [props.action] - Optional action button (e.g., "Retry").
- * @returns {JSX.Element} The rendered feedback message component.
- */
-export declare const FeedbackMessage: ({ type, children, className, icon, action }: FeedbackMessageProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/VPPlayer/index.d.ts

@@ -1,2 +0,0 @@
-export { default as VPPlayer } from '../../features/VPPlayer';
-export * from "./ui";

package/dist/components/VPPlayer/ui/index.d.ts

@@ -1 +0,0 @@
-export * from "./styled";

package/dist/components/VPPlayer/ui/styled.d.ts

@@ -1,42 +0,0 @@
-/**
- * Styled component for the video player container.
- *
- * @component
- * @param {string} [width] - The width of the player (default: "100%").
- * @param {string} [height] - The height of the player (default: "100%").
- * @param {string[]} [$hiddenClasses] - CSS class names to hide elements inside the player.
- * @param {string} [className] - CSS class name for additional styling.
- */
-export declare const PlayerContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    width?: string;
-    height?: string;
-    $hiddenClasses?: string[];
-    className?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Styled component for the full-screen overlay when the player is active.
- *
- * @component
- * @param {string} [className] - CSS class name for additional styling.
- */
-export declare const Overlay: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    className?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-/**
- * Styled wrapper for the player, adjusting its size based on viewport width.
- *
- * @component
- * @param {string} [className] - CSS class name for additional styling.
- */
-export declare const PlayerWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    className?: string;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/config/index.d.ts

@@ -1 +0,0 @@
-export * from "./vpPlayerConfig";

package/dist/config/vpPlayerConfig.d.ts

@@ -1,9 +0,0 @@
-import { VPPlayerConfig } from '@/interfaces';
-/**
- * Default configuration for the VP Player.
- *
- * @constant
- * @type {VPPlayerConfig}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
- */
-export declare const defaultVPPlayerConfig: VPPlayerConfig;

package/dist/constants/configs.d.ts

@@ -1,22 +0,0 @@
-import { VPPlayerConfig } from "@/interfaces/config";
-/**
- * Base configuration for VP Player with common settings.
- */
-export declare const baseConfig: Partial<VPPlayerConfig>;
-/**
- * Base configuration with autoplay enabled.
- */
-export declare const baseConfigWithAutoplay: Partial<VPPlayerConfig>;
-/**
- * Base configuration for ads with common ad settings.
- */
-export declare const baseConfigWithAds: Partial<VPPlayerConfig>;
-/**
- * Generates an ad configuration for VP Player based on provided parameters.
- * @param breakType - The type of ad break (e.g., "preroll", "postroll", "midroll").
- * @param adTagUrls - Array of ad tag URLs to use for the ad break.
- * @param breakTimingType - The timing type for the ad break (e.g., "time", "percentage", "playlist").
- * @param breakTimingValue - The timing value for the ad break (e.g., 0 for immediate, 2 for playlist index).
- * @returns A partial VPPlayerConfig with the ad configuration.
- */
-export declare const getAdConfig: (breakType: "preroll" | "postroll" | "midroll", adTagUrls: string[], breakTimingType?: "time" | "percentage" | "playlist", breakTimingValue?: number) => Partial<VPPlayerConfig>;

package/dist/constants/index.d.ts

@@ -1 +0,0 @@
-export * from "./vpPlayer";

package/dist/constants/storybook.d.ts

@@ -1,11 +0,0 @@
-import { ArgTypes } from "@storybook/react";
-/**
- * Common Storybook argTypes used across stories.
- */
-export declare const COMMON_ARGTYPES: Partial<ArgTypes<Record<string, unknown>>>;
-/**
- * Default API key and project ID for Storybook.
- */
-export declare const DEFAULT_API_KEY: string;
-export declare const DEFAULT_PLAYLIST_ID = "lzxikggu";
-export declare const DEFAULT_PROJECT_ID = "agmipnxc";

package/dist/constants/styles.d.ts

@@ -1,11 +0,0 @@
-/**
- * Common styles for Storybook stories.
- */
-/** Style for vertical playback containers (e.g., VerticalPlayback, VerticalPlaylistPlayback). */
-export declare const VERTICAL_PLAYBACK_STYLE: React.CSSProperties;
-/** Base style for multiple players containers (e.g., MultiplePlayersSideBySide, MultiplePlayersStacked). */
-export declare const MULTIPLE_PLAYERS_BASE_STYLE: React.CSSProperties;
-/** Style for side-by-side multiple players (e.g., MultiplePlayersSideBySide). */
-export declare const MULTIPLE_PLAYERS_SIDE_BY_SIDE_STYLE: React.CSSProperties;
-/** Style for stacked multiple players (e.g., MultiplePlayersStacked). */
-export declare const MULTIPLE_PLAYERS_STACKED_STYLE: React.CSSProperties;

package/dist/constants/urls.d.ts

@@ -1,18 +0,0 @@
-/**
- * Constants for video URLs used across the application and Storybook stories.
- */
-/** URL for the Big Buck Bunny video */
-export declare const BIG_BUCK_BUNNY_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4";
-/** URL for the Elephants Dream video */
-export declare const ELEPHANTS_DREAM_URL = "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4";
-/** URL for the Pexels vertical video */
-export declare const PEXELS_VERTICAL_VIDEO_URL = "https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4";
-/** URL for the Pexels thumbnail */
-export declare const PEXELS_THUMBNAIL_URL = "https://images.pexels.com/videos/4678261/pexels-photo-4678261.jpeg?auto=compress&cs=tinysrgb&w=600";
-/**
- * Constants for ad tag URLs used in Storybook stories.
- */
-/** Ad tag URL for linear ads */
-export declare const AD_TAG_LINEAR_URL = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=";
-/** Ad tag URL for skippable linear ads */
-export declare const AD_TAG_SKIPPABLE_LINEAR_URL = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";

package/dist/constants/vpPlayer.d.ts

@@ -1,29 +0,0 @@
-/**
- * Generates the URL for fetching a single video by projectId and videoId.
- * @param {string} projectId - The project ID.
- * @param {string} videoId - The video ID.
- * @returns {string} - The complete API URL for single video fetch.
- */
-export declare const getSingleVideoUrl: (projectId: string, videoId: string) => string;
-/**
-* Generates the URL for fetching a playlist by projectId and playlistId.
-* @param {string} projectId - The project ID.
-* @param {string} playlistId - The playlist ID.
-* @returns {string} - The complete API URL for playlist fetch.
-*/
-export declare const getPlaylistUrl: (projectId: string, playlistId: string) => string;
-/**
-* Generates the URL for loading the VP Player script by version.
-* @param {string} playerVersion - The version of the VP Player script (e.g., 'latest', 'v2.1.1').
-* @returns {string} - The complete URL for the player script.
-*/
-export declare const getPlayerScriptUrl: (playerVersion: string) => string;
-/**
- * Generates a full player DOM element ID based on provided playerId and videoId.
- * Falls back to "default" if playerId is not provided.
- *
- * @param playerId - Base identifier for the player.
- * @param videoId - Optional video identifier.
- * @returns Full DOM element ID string.
- */
-export declare const generatePlayerId: (playerId?: string, videoId?: string) => string;

package/dist/contexts/VPPlayerContext.d.ts

@@ -1,53 +0,0 @@
-import React from "react";
-import { VPPlayerProps } from "@/interfaces";
-/**
- * Interface defining the parameters for initializing the VPPlayer.
- *
- * @interface PlayerParams
- */
-interface PlayerParams {
-    playerId?: string;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: VPPlayerProps["config"];
-    thumbnailUrl?: string;
-    isReels?: boolean;
-    hiddenClasses?: string[];
-    apiKey?: string;
-    className?: string;
-}
-/**
- * Interface defining the context for VPPlayer.
- *
- * @interface VPPlayerContextType
- */
-interface VPPlayerContextType {
-    showPlayer: (params: PlayerParams) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams | null;
-}
-/**
- * VPPlayerProvider component provides context for managing the VPPlayer state.
- *
- * @function
- * @param {Object} props - The component props.
- * @param {React.ReactNode} props.children - The child components.
- * @returns {JSX.Element} The provider component for VPPlayer.
- */
-export declare const VPPlayerProvider: React.FC<{
-    children: React.ReactNode;
-}>;
-/**
- * Hook for accessing the VPPlayer context.
- *
- * @function
- * @throws {Error} If used outside of the VPPlayerProvider.
- * @returns {VPPlayerContextType} The VPPlayer context.
- */
-export declare const useVPPlayer: () => VPPlayerContextType;
-export {};

package/dist/contexts/index.d.ts

@@ -1 +0,0 @@
-export * from "./VPPlayerContext";

package/dist/features/VPPlayer.d.ts

@@ -1,27 +0,0 @@
-import { VPPlayerProps } from "@/interfaces";
-/**
- * Video Player Component for rendering a video player with overlay and responsive behavior.
- * Handles initialization of the player and displays loading/error states.
- *
- * @function
- * @param {VPPlayerProps} props - The properties for configuring the video player.
- * @param {string} props.playerId - Unique identifier for the player instance.
- * @param {string} [props.videoId] - ID of the video to be played.
- * @param {string} [props.version] - Version of the player.
- * @param {string} [props.videoUrl] - Direct video URL (bypasses API calls).
- * @param {string} [props.projectId] - Project ID associated with the video.
- * @param {string} [props.playlistId] - Playlist ID if playing a collection of videos.
- * @param {string} [props.scriptUrl] - URL of the video player script.
- * @param {object} [props.config={}] - Configuration settings for the player.
- * @param {string} [props.apiKey] - API key for authentication (if required).
- * @param {boolean} [props.isReels=false] - Determines if the player should behave as a short-video reel.
- * @param {string[]} [props.hiddenClasses=[]] - CSS classes to hide player elements.
- * @param {function} [props.onClose] - Callback triggered when the player is closed.
- * @param {boolean} [props.isPlayerVisible=false] - Controls the initial visibility of the player.
- * @param {string} [props.className] - CSS class name for additional styling.
- * @returns {JSX.Element} The rendered video player component.
- */
-declare const VPPlayer: ({ playerId, videoId, version, videoUrl, projectId, playlistId, scriptUrl, config, apiKey, isReels, hiddenClasses, onClose, className, }: VPPlayerProps & {
-    className?: string;
-}) => import("react/jsx-runtime").JSX.Element;
-export default VPPlayer;

package/dist/features/stories/ads/Ads.stories.d.ts

@@ -1,20 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VPPlayer } from "@/components/VPPlayer";
-import { VPPlayerInstance } from "@/interfaces";
-declare global {
-    interface Window {
-        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
-    }
-}
-declare const meta: Meta<typeof VPPlayer>;
-export default meta;
-type Story = StoryObj<typeof VPPlayer>;
-export declare const SingleVideoOnePrerollAd: Story;
-export declare const SingleVideoOnePostrollAd: Story;
-export declare const SingleVideoMultiplePrerollAds: Story;
-export declare const PlaylistOnePrerollEveryAd: Story;
-export declare const PlaylistOneMidrollAd: Story;
-export declare const PlaylistOnePostrollAddEveryVideo: Story;
-export declare const PlaylistMultiplePrerollAdsEveryVideo: Story;
-export declare const PlaylistMultipleMidrollAds: Story;
-export declare const PictureInPictureDemoWithAds: () => import("react/jsx-runtime").JSX.Element;

package/dist/features/stories/context/Context.stories.d.ts

@@ -1,10 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VPPlayer } from "@/components/VPPlayer";
-declare const meta: Meta<typeof VPPlayer>;
-export default meta;
-type Story = StoryObj<typeof VPPlayer>;
-export declare const NoControlsSingleVideo: Story;
-export declare const IsReelsWithContextPlaylistHiddenElements: Story;
-export declare const IsReelsWithContextModalCentered: Story;
-export declare const ContextWrapperModal: Story;
-export declare const ContextCustomizedPortalPlayer: Story;

package/dist/features/stories/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./playback/Playback.stories";
-export * from "./ads/Ads.stories";
-export * from "./context/Context.stories";

package/dist/features/stories/playback/Playback.stories.d.ts

@@ -1,33 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { VPPlayer } from "@/components/VPPlayer";
-import { VPPlayerInstance } from "@/interfaces";
-declare global {
-    interface Window {
-        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
-        vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
-    }
-}
-declare const meta: Meta<typeof VPPlayer>;
-export default meta;
-type Story = StoryObj<typeof VPPlayer>;
-export declare const SingleVideoProvidedFile: Story;
-export declare const SingleVideoAPI: Story;
-export declare const PlaylistProvided: Story;
-export declare const PlaylistAPI: Story;
-export declare const HorizontalPlayback: Story;
-export declare const VerticalPlayback: Story;
-export declare const VerticalPlaylistPlayback: Story;
-export declare const FloatingVideo: Story;
-export declare const MultiplePlayersSideBySide: Story;
-export declare const MultiplePlayersStacked: Story;
-export declare const VerticalPlaylistTest: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlaylistTestSingleFile: () => import("react/jsx-runtime").JSX.Element;
-export declare const testPlayerControls: () => import("react/jsx-runtime").JSX.Element;
-export declare const ptkzurta: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlaylistFastestWithPlaylistCheckOK: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlaylistOfficialConfig: () => import("react/jsx-runtime").JSX.Element;
-export declare const PictureInPictureDemo: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlaylistStartFromIndexTestZimak: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
-export declare const NormalPlayerWithSubtitles: () => import("react/jsx-runtime").JSX.Element;
-export declare const VerticalPlaylistTestMainAndBackUp: () => import("react/jsx-runtime").JSX.Element;

package/dist/fixtures/index.d.ts

@@ -1 +0,0 @@
-export * from "./playlist";

package/dist/fixtures/playlist.d.ts

@@ -1,11 +0,0 @@
-export declare const playlist: {
-    state: boolean;
-    playlistVideoIndex: number;
-    videos: {
-        videoId: string;
-        title: string;
-        file: string;
-        thumbnailUrl: string;
-        duration: number;
-    }[];
-};

package/dist/hooks/index.d.ts

@@ -1,3 +0,0 @@
-export { useVPPlayerScript } from './useVPPlayerScript';
-export { useVideoData } from './useVideoData';
-export { useVPPlayerLogic } from './useVPPlayerLogic';

package/dist/hooks/useVPPlayerLogic.d.ts

@@ -1,22 +0,0 @@
-import { VPPlayerInstance, VPPlayerProps } from "@/interfaces";
-declare global {
-    interface Window {
-        vpPlayer?: (playerId: string) => VPPlayerInstance | undefined;
-        vpVerticalPlayer?: (playerId: string) => VPPlayerInstance | undefined;
-    }
-}
-/**
- * Custom hook to manage VP Player logic, including fetching video data,
- * initializing the player, and handling lifecycle events.
- *
- * @function
- * @param {VPPlayerProps} props - The properties required to configure the VP Player.
- * @returns {Object} An object containing player references, script loading status, loading state, and errors.
- */
-export declare const useVPPlayerLogic: ({ playerId, videoId: propVideoId, version, videoUrl, projectId, playlistId, scriptUrl, config, apiKey, isReels, }: VPPlayerProps) => {
-    playerRef: import("react").RefObject<HTMLDivElement | null>;
-    playerInstanceRef: import("react").RefObject<VPPlayerInstance | null>;
-    isScriptLoaded: boolean;
-    isLoading: boolean;
-    error: string | null;
-};

package/dist/hooks/useVPPlayerScript.d.ts

@@ -1,13 +0,0 @@
-/**
- * Custom hook to dynamically load the VP Player script into the document.
- * It ensures that the script is only loaded once and provides a loading state.
- *
- * @function
- * @param {string | null} [version] - The version of the VP Player script to load (defaults to "latest").
- * @param {string} [scriptUrl] - Custom script URL (if provided, it overrides the version-based URL).
- * @returns {{ isLoaded: boolean; error: string | null }} Indicates load success and any error message.
- */
-export declare const useVPPlayerScript: (version?: string | null, scriptUrl?: string) => {
-    isLoaded: boolean;
-    error: string | null;
-};

package/dist/hooks/useVideoData.d.ts

@@ -1,21 +0,0 @@
-import { VideoDataResult } from "@/types";
-/**
- * Custom hook for fetching video data, including playback URLs and playlists.
- * Supports retry logic, timeout, error handling, and in-memory caching.
- *
- * @function
- * @param {Object} params - The parameters for fetching video data.
- * @param {string} [params.projectId] - The project ID required for API calls.
- * @param {string} [params.videoId] - The video ID to fetch a single video's playback URL.
- * @param {string} [params.playlistId] - The playlist ID to fetch a list of videos.
- * @param {string} [params.videoUrl] - The direct video URL (skips API call if provided).
- * @param {string} [params.apiKey] - The API key for authentication (optional, defaults to environment variable).
- * @returns {VideoDataResult} - Result object with URL, playlist, loading and error states
- */
-export declare const useVideoData: ({ projectId, videoId, playlistId, videoUrl, apiKey, }: {
-    projectId?: string;
-    videoId?: string;
-    playlistId?: string;
-    videoUrl?: string;
-    apiKey?: string;
-}) => VideoDataResult;

package/dist/index.d.ts

@@ -1,9 +0,0 @@
-export { default as VPPlayer } from './features/VPPlayer';
-export * from './components/VPPlayer/ui';
-export { VPPlayerProvider, useVPPlayer } from './contexts/VPPlayerContext';
-export * from './hooks';
-export * from './interfaces';
-export * from './types';
-export * from './utils';
-export * from './constants/configs';
-export * from './constants/urls';

package/dist/interfaces/config.d.ts

@@ -1,311 +0,0 @@
-/**
- * Interface describing the advertising configuration options for the VP Player.
- *
- * @interface
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
- */
-export interface VPPlayerAdsConfig {
-    skipAd?: {
-        state: boolean;
-        skipFrom: number;
-    };
-    vmap?: string;
-    VPAIDmode?: string;
-    enableProgrammability?: boolean;
-    functions?: Array<{
-        isDynamicKey: boolean;
-        isDynamicValue: boolean;
-        key: string;
-        order: number;
-        value: string;
-    }>;
-    bidding?: boolean;
-    afterMidrollBacktrack?: {
-        state: boolean;
-        seconds: number;
-    };
-    adBreaks?: Array<{
-        adTagUrl: string[];
-        breakType?: 'preroll' | 'midroll' | 'postroll';
-        breakTimingType?: 'time' | 'percentage' | 'playlist';
-        breakTimingValue?: number;
-        schedule?: {
-            type?: 'CUSTOM' | 'RECURRING';
-            ranges?: Array<{
-                startTime?: number;
-                endTime?: number;
-                count?: number;
-                breaks?: number[];
-            }>;
-            algorithm?: 'PASSIVE' | 'AGGRESSIVE' | 'SIMILAR_DISTANCE' | 'CUSTOM';
-            protectFirst?: number;
-            protectLast?: number;
-            occurEvery?: number;
-            liveCount?: number;
-        };
-    }>;
-    bidders?: Array<{
-        name: string;
-        params?: Array<{
-            paramName?: string;
-            paramType?: string;
-            paramValue?: string;
-        }>;
-    }>;
-    adsRequireInteraction?: boolean;
-}
-/**
- * Interface defining the configuration options for the VP Player.
- *
- * @interface
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/playing}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/advertising}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/styling}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/localization}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/full-configuration}
- */
-export interface VPPlayerConfig {
-    projectId?: string;
-    video: {
-        ads?: VPPlayerAdsConfig;
-        advertising?: boolean;
-        file?: string;
-        title?: string;
-        description?: string;
-        publishDate?: string;
-        duration?: number;
-        thumbnail?: string;
-        filmstrip?: string;
-        author?: string;
-        source?: string;
-        tags?: string[];
-        tracks?: Array<{
-            file: string;
-            label: string;
-            kind: string;
-            default?: boolean;
-        }>;
-        playlist?: {
-            state: boolean;
-            playlistVideoIndex: number;
-            videos: Array<{
-                videoId: string;
-                title: string;
-                thumbnailUrl?: string;
-                duration?: number;
-                file?: string;
-            }>;
-        };
-    };
-    config: {
-        adAnnouncement?: {
-            state?: boolean;
-            timeBeforeAd?: number;
-        };
-        autostartOnLoad?: {
-            state?: boolean;
-            onMobile?: boolean;
-            onData?: boolean;
-        };
-        adsRequireInteraction?: boolean;
-        autoplay?: boolean;
-        pauseOtherVideos?: boolean;
-        focusOnAutostart?: boolean;
-        muted?: boolean;
-        loop?: boolean;
-        size?: {
-            sizeType?: string;
-            aspectRatio?: string;
-            width?: number | string;
-            height?: number | string;
-        };
-        showRelatedOnPause?: {
-            state?: boolean;
-            onMobile?: boolean;
-            from?: number;
-        };
-        float?: {
-            state: boolean;
-            onMobile: boolean;
-            position: string;
-            dismissible: boolean;
-            requiresInteraction: boolean;
-            toVideoThreshold: number;
-            toFloatThreshold: number;
-            style: {
-                width: number;
-                border: string;
-            };
-        };
-        controls?: {
-            theaterButton?: boolean;
-            settingsButton?: boolean;
-            chromecastButton?: boolean;
-            nextButton?: boolean;
-            fullscreenButton?: boolean;
-            airplayButton?: boolean;
-            bigPlayButton?: boolean;
-            autopausePlayButton?: boolean;
-            pictureInPictureButton?: boolean;
-            relatedButton?: boolean;
-            volumeButton?: boolean;
-            shareButton?: boolean;
-            subtitlesButton?: boolean;
-            showCaptions?: boolean;
-        };
-        logo?: {
-            state?: boolean;
-            file?: string;
-            position?: string;
-            defaultOpacity?: number;
-            inactiveOpacity?: number;
-            onClickURL?: string;
-        };
-        skin?: {
-            controlBar?: {
-                background?: string;
-                spread?: "solid" | "gradient";
-                gradientMidPoint?: number;
-                text?: string;
-                icons?: {
-                    default?: string;
-                    hover?: string;
-                };
-                timeslider?: {
-                    progress?: string;
-                    rail?: string;
-                    buffer?: string;
-                    dragger?: string;
-                };
-                timesliderOnAd?: {
-                    progress?: string;
-                    rail?: string;
-                    buffer?: string;
-                    dragger?: string;
-                };
-                volume?: {
-                    dragger?: string;
-                    progress?: string;
-                    rail?: string;
-                    notifier?: string;
-                };
-            };
-            menus?: {
-                background?: {
-                    default?: string;
-                    hover?: string;
-                };
-                links?: {
-                    default?: string;
-                    hover?: string;
-                };
-                autoplay?: {
-                    autoplayOn?: string;
-                    autoplayOff?: string;
-                };
-            };
-            nextVideo?: {
-                background?: string;
-                text?: string;
-                timeslider?: {
-                    rail?: string;
-                    progress?: string;
-                };
-                icons?: {
-                    play?: {
-                        default?: string;
-                        hover?: string;
-                    };
-                    close?: string;
-                };
-            };
-            playlist?: {
-                background?: string;
-                text?: string;
-                icons?: {
-                    arrows?: {
-                        active?: string;
-                        inactive?: string;
-                    };
-                    close?: string;
-                };
-                card?: {
-                    background?: string;
-                    title?: string;
-                    duration?: {
-                        text?: string;
-                        background?: string;
-                    };
-                    icons?: {
-                        play?: {
-                            default?: string;
-                            hover?: string;
-                        };
-                    };
-                };
-            };
-        };
-        lang?: {
-            locale?: string;
-            controls?: {
-                play?: string;
-                pause?: string;
-                next?: string;
-                replay?: string;
-                volume?: string;
-                mute?: string;
-                unmute?: string;
-                settings?: string;
-                theater?: string;
-                fullscreen?: string;
-                chromecast?: string;
-                airplay?: string;
-                pictureInPicture?: string;
-                related?: string;
-                skipIntro?: string;
-                skipAd?: string;
-                playlistTitle?: string;
-                upNext?: string;
-                live?: string;
-                continueAfterPause?: string;
-            };
-            settings?: {
-                quality?: string;
-                subtitles?: string;
-                autoplay?: string;
-                playbackRate?: string;
-                auto?: string;
-                off?: string;
-                normal?: string;
-                share?: string;
-            };
-            ads?: {
-                ad?: string;
-                skip?: string;
-                skipIn?: string;
-                visit?: string;
-                info?: string;
-                simultaneousAds?: string;
-                adAnnouncement?: string;
-            };
-            messages?: {
-                playbackErrorTitle?: string;
-                playbackErrorDescription?: string;
-                geoBlockedTitle?: string;
-                geoBlockedDescription?: string;
-                streamInterruptedTitle?: string;
-                streamInterruptedDescription?: string;
-            };
-        };
-        ads?: VPPlayerAdsConfig;
-    };
-}
-/**
- * Default configuration object for the VP Player.
- *
- * @constant
- * @type {VPPlayerConfig}
- * @see {@link https://vp.gjirafa.tech/documentation/docs/web-player/setup-the-player/configuration}
- */
-export declare const defaultVPPlayerConfig: VPPlayerConfig;

package/dist/interfaces/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./props";
-export * from "./instance";
-export * from "./config";

package/dist/interfaces/instance.d.ts

@@ -1,73 +0,0 @@
-import { VPPlayerConfig } from "./config";
-/**
- * Interface representing an instance of the VP Player.
- * Based on VP Player API Reference: https://vp.gjirafa.tech/documentation/docs/web-player/api-reference
- * And VP Vertical Player API Reference: https://vp.gjirafa.tech/documentation/docs/vertical-player/api-reference
- *
- * @interface
- */
-export interface VPPlayerInstance {
-    setup: (config: VPPlayerConfig) => void;
-    destroy?: () => void;
-    play?: () => void;
-    pause?: () => void;
-    forward?: () => void;
-    rewind?: () => void;
-    replay?: () => void;
-    seek?: (position: number) => void;
-    mute?: () => void;
-    unmute?: () => void;
-    enterFullScreen?: () => void;
-    exitFullScreen?: () => void;
-    enterFullscreen?: () => void;
-    exitFullscreen?: () => void;
-    enterPictureInPicture?: () => void;
-    exitPictureInPicture?: () => void;
-    floating?: () => void;
-    isFloating?: () => boolean;
-    getFloatStyle?: () => unknown;
-    setFloatingHlsLevels?: (levels: unknown) => void;
-    floatingStateCounter?: number;
-    nextVideo?: () => void;
-    previousVideo?: () => void;
-    switchToIndex?: (index: number) => void;
-    switch?: (video: unknown) => void;
-    playNewVideo?: (video: unknown) => void;
-    togglePlay?: () => void;
-    toggleMute?: () => void;
-    isMuted?: () => boolean;
-    isPlaying?: () => boolean;
-    isPaused?: () => boolean;
-    isFullscreen?: () => boolean;
-    isEnded?: () => boolean;
-    isFocused?: () => boolean;
-    getPosition?: () => number;
-    getBuffered?: () => number;
-    getVolume?: () => number;
-    getContainer?: () => HTMLElement;
-    getDuration?: () => number;
-    getQualityLevels?: () => unknown[];
-    getCurrentQuality?: () => number;
-    checkViewability?: () => boolean;
-    setConfig?: (config: unknown) => void;
-    setVideo?: (video: unknown) => void;
-    setPlaylist?: (playlist: unknown) => void;
-    setVolume?: (volume: number) => void;
-    setCurrentQuality?: (index: number) => void;
-    setLevelToAuto?: () => void;
-    setCuePoint?: (cue: number, callback: () => void) => void;
-    on?: (event: string, callback: (data?: unknown) => void) => void;
-    off?: (event: string, callback?: (data?: unknown) => void) => void;
-    videoIndex?: number;
-    playlist?: {
-        state: boolean;
-        playlistId: string;
-        playlistVideoIndex: number;
-        videos: unknown[];
-    };
-    multipleVideos?: Map<number, unknown>;
-    firstInList?: boolean;
-    lastInList?: boolean;
-    setupComplete?: boolean;
-    initialized?: boolean;
-}

package/dist/interfaces/props.d.ts

@@ -1,54 +0,0 @@
-import { VPPlayerConfig } from "./config";
-/**
- * Interface defining the parameters for configuring the VP Player instance.
- *
- * @interface
- */
-export interface PlayerParams {
-    playerId?: string;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: Partial<VPPlayerConfig>;
-    thumbnailUrl?: string;
-    isReels?: boolean;
-    hiddenClasses?: string[];
-    apiKey?: string;
-    className?: string;
-}
-/**
- * Interface for the VP Player context, providing methods and state for controlling the player.
- *
- * @interface
- */
-export interface VPPlayerContextType {
-    showPlayer: (params: PlayerParams) => void;
-    hidePlayer: () => void;
-    isPlayerVisible: boolean;
-    playerParams: PlayerParams | null;
-}
-/**
- * Interface defining the properties for the VP Player component.
- *
- * @interface
- */
-export interface VPPlayerProps {
-    playerId: string;
-    videoId?: string;
-    projectId?: string;
-    videoUrl?: string;
-    playlistId?: string;
-    scriptUrl?: string;
-    version?: string | null;
-    config?: Partial<VPPlayerConfig>;
-    isReels?: boolean;
-    thumbnailUrl?: string;
-    onClose?: () => void;
-    hiddenClasses?: string[];
-    apiKey?: string;
-    isPlayerVisible?: boolean;
-    className?: string;
-}

package/dist/main.d.ts

@@ -1 +0,0 @@
-import "./index.css";

package/dist/types/api.types.d.ts

@@ -1,50 +0,0 @@
-/**
- * API response types for VP Player.
- *
- * @interface VideoApiItem
- * Represents an individual video item in the API response.
- */
-export interface VideoApiItem {
-    mediaId: string;
-    playbackUrl: string;
-}
-/**
- * API response structure for fetching video data.
- *
- * @interface VideoApiResponse
- */
-export interface VideoApiResponse {
-    result: {
-        items: VideoApiItem[];
-    };
-}
-/**
- * Represents an item in a video playlist.
- *
- * @interface PlaylistItem
- */
-export interface PlaylistItem {
-    title: string;
-    hlsUrl: string;
-    thumbnailUrl: string;
-    duration: number;
-}
-/**
- * API response structure for fetching playlist data.
- *
- * @interface PlaylistApiResponse
- */
-export interface PlaylistApiResponse {
-    result: PlaylistItem[];
-}
-/**
- * Result structure returned by the video data fetching logic.
- *
- * @interface VideoDataResult
- */
-export interface VideoDataResult {
-    fetchedPlaybackUrl: string | null;
-    fetchedPlaylist: PlaylistItem[] | null;
-    isLoading: boolean;
-    error: string | null;
-}

package/dist/types/index.d.ts

@@ -1 +0,0 @@
-export * from "./api.types";

package/dist/utils/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./vpPlayerConfigBuilder";
-export * from "./vpPlayerUtils";

package/dist/utils/vpPlayerConfigBuilder.d.ts

@@ -1,30 +0,0 @@
-import { VPPlayerConfig } from "@/interfaces";
-import { PlaylistItem } from "@/types";
-/**
- * Interface for options used in building the VP Player configuration.
- *
- * @interface ConfigBuilderOptions
- */
-interface ConfigBuilderOptions {
-    videoUrl?: string;
-    fetchedPlaybackUrl?: string;
-    fetchedPlaylist?: PlaylistItem[];
-    projectId?: string;
-    config?: Partial<VPPlayerConfig>;
-    isVerticalPlayer?: boolean;
-}
-/**
- * Builds the final VP Player configuration based on available data.
- * Handles different data sources in priority order:
- * 1. Direct video URL
- * 2. Single video from API
- * 3. Playlist from API
- * 4. Playlist from config
- *
- * @function
- * @param {ConfigBuilderOptions} options - Options for building the configuration
- * @returns {VPPlayerConfig} - The final configuration object for the player
- * @throws {Error} - Throws error if no valid video source is found
- */
-export declare const buildVPPlayerConfig: ({ videoUrl, fetchedPlaybackUrl, fetchedPlaylist, projectId, config, isVerticalPlayer, }: ConfigBuilderOptions) => VPPlayerConfig;
-export {};

package/dist/utils/vpPlayerUtils.d.ts

@@ -1,8 +0,0 @@
-/**
- * Extracts the video ID from a given VP Player script URL.
- *
- * @function
- * @param {string} [scriptUrl] - The script URL containing the video ID.
- * @returns {string | undefined} The extracted video ID, or `undefined` if not found.
- */
-export declare const extractVideoId: (scriptUrl?: string) => string | undefined;