@devix-technologies/react-gjirafa-vp-player 1.0.20 → 1.0.21

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

@@ -1425,16 +1425,11 @@ const Er = me.div`
   pointer-events: auto;
 `, _r = me.div`
   position: relative;
-  width: min(360px, 100%);
-  max-width: 360px;
+  max-width: 100vw;
   aspect-ratio: 9 / 16;
   height: auto;
   z-index: 1001;
-
-  @media (max-width: 420px) {
-    width: 100%;
-    max-width: 100%;
-  }
+  max-height: 100vh;
 `, Sr = (e, t) => `https://vp-api.gjirafa.tech/api/v2/projects/${e}/videos?search=${t}`, ot = (e, t) => `https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}/videos`, Tr = (e, t) => `https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}`, Rr = (e) => `https://host.vpplayer.tech/player/${e}/vpplayer.js`, qe = (e, t) => `vp-player-${e || "default"}-${t || ""}`, Ve = /* @__PURE__ */ new Map(), Cr = (e, t) => {
   const [r, n] = ne(!1), [a, i] = ne(null);
   return we(() => {

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

@@ -73,14 +73,9 @@ React keys must be passed directly to JSX without using spread:
   pointer-events: auto;
 `,yt=me.div`
   position: relative;
-  width: min(360px, 100%);
-  max-width: 360px;
+  max-width: 100vw;
   aspect-ratio: 9 / 16;
   height: auto;
   z-index: 1001;
-
-  @media (max-width: 420px) {
-    width: 100%;
-    max-width: 100%;
-  }
+  max-height: 100vh;
 `,Sr=(e,t)=>`https://vp-api.gjirafa.tech/api/v2/projects/${e}/videos?search=${t}`,gt=(e,t)=>`https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}/videos`,Tr=(e,t)=>`https://vp-api.gjirafa.tech/api/projects/${e}/playlists/${t}`,Cr=e=>`https://host.vpplayer.tech/player/${e}/vpplayer.js`,We=(e,t)=>`vp-player-${e||"default"}-${t||""}`,Ye=new Map,vt=(e,t)=>{const[r,n]=P.useState(!1),[a,i]=P.useState(null);return P.useEffect(()=>{let o=null,l,u=0;const m=3;let c;try{c=t||Cr(e||"latest")}catch(k){const v=k instanceof Error?k.message:String(k);i(`Failed to resolve script URL: ${v}`),n(!1);return}if(Ye.get(c)){n(!0),i(null);return}if(document.querySelector(`script[src="${c}"]`)){Ye.set(c,!0),n(!0),i(null);return}const x=()=>{o=document.createElement("script"),o.src=c,o.async=!0,l=window.setTimeout(()=>{n(!1),i(`Loading script timed out: ${c}`)},1e4),o.onload=()=>{clearTimeout(l),Ye.set(c,!0),n(!0),i(null)},o.onerror=()=>{clearTimeout(l),u++,u<m?setTimeout(x,1e3*u):(n(!1),i(`Failed to load VP Player script after ${m} attempts: ${c}`))},document.body.appendChild(o)};return x(),()=>{clearTimeout(l),o&&document.body.contains(o)&&document.body.removeChild(o)}},[e,t]),{isLoaded:r,error:a}},Ar={},Ee=new Map,Ir=3e4,Ge=5,bt=({projectId:e,videoId:t,playlistId:r,videoUrl:n,apiKey:a})=>{const[i,o]=P.useState(null),[l,u]=P.useState(null),[m,c]=P.useState(!1),[p,x]=P.useState(null),k=a||(typeof Ar<"u"?"1CFC4B619E9342B6BAC4879BA8C30CF216C4BA9D3F084B11825F4AB2D5CF845E":void 0);return P.useEffect(()=>{const v=t?`video:${t}`:r?`playlist:${r}`:null;if(!e||n||!t&&!r){o(n||null),u(null),c(!1),x(null);return}if(!k){c(!1),x("No API key provided");return}if(v&&Ee.has(v)){const C=Ee.get(v);o(C.url),u(C.playlist),c(!1),x(null);return}let d=!0;const y=new AbortController,g=y.signal,j=setTimeout(async()=>{var V,$,f,X;if(!d)return;c(!0),x(null);let C=0;for(;C<Ge&&d;)try{const _=t&&!r?Sr(e,t):gt(e,r),N=setTimeout(()=>y.abort(),Ir),G=await fetch(_,{method:"GET",headers:{"api-key":k,Accept:"application/json","Cache-Control":"no-cache"},signal:g});if(clearTimeout(N),!G.ok)throw new Error(`Fetch failed with status ${G.status}`);const M=await G.json();if(!d)return;if(t&&!r){const Z=($=(V=M.result)==null?void 0:V.items)==null?void 0:$.find(D=>D.mediaId===t);if(!(Z!=null&&Z.playbackUrl))throw new Error("Invalid video data");o(Z.playbackUrl),u(null),v&&Ee.set(v,{url:Z.playbackUrl,playlist:null})}else{if(!Array.isArray(M.result))throw new Error("Invalid playlist format");const Z=Tr(e,r),D=await fetch(Z,{method:"GET",headers:{"api-key":k,Accept:"application/json","Cache-Control":"no-cache"},signal:g});if(D.ok){const W=await D.json();let te=[...M.result];if((f=W.result)!=null&&f.playlistBackupState&&((X=W.result)!=null&&X.playlistBackupId)){const K=gt(e,W.result.playlistBackupId),ne=await fetch(K,{method:"GET",headers:{"api-key":k,Accept:"application/json","Cache-Control":"no-cache"},signal:g});if(ne.ok){const ae=await ne.json();if(Array.isArray(ae.result)){const s=ae.result.map(w=>({...w,isBackupPlaylist:!0}));te=[...te,...s]}}}u(te),o(null),v&&Ee.set(v,{url:null,playlist:te})}else u(M.result),o(null),v&&Ee.set(v,{url:null,playlist:M.result})}break}catch(_){if(g.aborted){d&&x("Request timed out");break}if(C++,C>=Ge){const N=_ instanceof Error?_.message:String(_);d&&x(`Failed after ${Ge} attempts: ${N}`)}else await new Promise(N=>setTimeout(N,2e3))}d&&c(!1)},100);return()=>{d=!1,clearTimeout(j),y.abort()}},[k,e,t,r,n]),{fetchedPlaybackUrl:i,fetchedPlaylist:l,isLoading:m,error:p}},Rr={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}}},wt=({videoUrl:e,fetchedPlaybackUrl:t,fetchedPlaylist:r,projectId:n,config:a={},isVerticalPlayer:i})=>{var c,p,x,k,v,d,y,g,E,j,C,V,$;const o={...Rr,...a},l={...o.config,...a.config};if(e)return{...o,video:{...o.video,file:e,playlist:void 0},config:l};if(t)return{...o,video:{...o.video,file:t,playlist:void 0},config:l};if(r&&r.length>0){const f=((p=(c=a==null?void 0:a.video)==null?void 0:c.playlist)==null?void 0:p.playlistVideoIndex)??((x=a==null?void 0:a.config)==null?void 0:x.playlistVideoIndex)??0;return i?{...o,projectId:n||"vp-player-projectId",video:{...o.video,file:(k=r[0])==null?void 0:k.hlsUrl,title:(v=r[0])==null?void 0:v.title,playlist:{state:!0,playlistId:"",playlistVideoIndex:Number(f),videos:r.slice(1).map((_,N)=>({videoId:String(N+1),title:_.title,file:_.hlsUrl,thumbnailUrl:_.thumbnailUrl,duration:_.duration}))}},config:l}:{...o,projectId:n||"vp-player-projectId",video:{...o.video,file:((d=r[Number(f)])==null?void 0:d.hlsUrl)||((y=r[0])==null?void 0:y.hlsUrl)||"",title:((g=r[Number(f)])==null?void 0:g.title)||((E=r[0])==null?void 0:E.title),thumbnail:((j=r[Number(f)])==null?void 0:j.thumbnailUrl)||((C=r[0])==null?void 0:C.thumbnailUrl),playlist:{state:!0,playlistVideoIndex:Number(f),videos:r.map((_,N)=>({videoId:String(N),title:_.title,file:_.hlsUrl,thumbnailUrl:_.thumbnailUrl,duration:_.duration}))}},config:l}}const u=((V=a==null?void 0:a.video)==null?void 0:V.playlist)||o.video.playlist,m=($=a==null?void 0:a.video)==null?void 0:$.file;if(m)return{...o,video:{...o.video,file:m,playlist:void 0},config:l};if(u!=null&&u.videos&&u.videos.length>0){const f=u.videos[Number(u.playlistVideoIndex)||0];return{...o,video:{...o.video,file:(f==null?void 0:f.file)||"",playlist:{...u,state:u.state??!0,playlistVideoIndex:Number(u.playlistVideoIndex||0),videos:u.videos}},config:{...o.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.")},xt=e=>{if(!e)return;const t=/https:\/\/host\.vpplayer\.tech\/player\/([^/]+)\/([^/]+)(?:\/[^/]+)?\.js/,r=e.match(t);return r?r[2]:void 0},Pt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:o,config:l={},apiKey:u,isReels:m=!1,onPlaylistData:c,onVideoStarted:p})=>{const x=P.useRef(null),k=P.useRef(null),v=P.useRef(!1),d=P.useRef(""),y=P.useRef([]),g=P.useRef([]),E=P.useRef(null),{isLoaded:j,error:C}=vt(r,o),V=t||xt(o),[$,f]=P.useState(null),{fetchedPlaybackUrl:X,fetchedPlaylist:_,isLoading:N,error:G}=bt({projectId:a,videoId:V,playlistId:i,videoUrl:n,apiKey:u}),M=We(e,V);P.useEffect(()=>{_&&c&&c(_)},[_,c]);const Z=P.useMemo(()=>{const D=l.config||{},W=m&&!D.size?{sizeType:"RESPONSIVE",aspectRatio:"9:16"}:D.size||{sizeType:"FIXED",width:"100%"};return{...l,config:{...D,size:W}}},[l,m]);return P.useEffect(()=>{if(C){f(C);return}if(!j||N&&!n)return;let D=!0;const te=setTimeout(async()=>{try{y.current.forEach(F=>clearInterval(F)),y.current=[],g.current.forEach(F=>clearTimeout(F)),g.current=[],E.current=null;const K=(_==null?void 0:_.length)??0,ne=JSON.stringify({playerId:M,videoId:t||V,playlistId:i,videoUrl:n,fetchedPlaybackUrl:X,scriptUrl:o,isReels:m,projectId:a,playlistLength:K});if(v.current&&k.current&&d.current===ne)return;d.current!==ne&&(v.current=!1,d.current=ne);const ae=o==null?void 0:o.includes("vertical-player");if(document.querySelectorAll('[id*="player"]').forEach(F=>{var le,h;const re=F.id;if(re!==M)try{const b=ae?(le=window.vpVerticalPlayer)==null?void 0:le.call(window,re):(h=window.vpPlayer)==null?void 0:h.call(window,re);b!=null&&b.destroy&&b.destroy()}catch(b){console.warn(`Failed to destroy existing player ${re}:`,b)}}),await new Promise(F=>setTimeout(F,100)),!D||!x.current)return;if(!document.getElementById(M)){f("DOM element not found after cleanup.");return}if(!window.vpPlayer&&!window.vpVerticalPlayer){f("VP Player script not loaded.");return}const L=ae?window.vpVerticalPlayer:window.vpPlayer;if(!L){f(`VP ${ae?"Vertical ":""}Player script not loaded.`);return}const U=wt({videoUrl:n,fetchedPlaybackUrl:X??void 0,fetchedPlaylist:_??void 0,projectId:a,config:Z,isVerticalPlayer:ae}),R=L(M);if(!R){f(`Failed to create VP ${ae?"Vertical ":""}Player instance.`);return}if(D&&x.current&&(R.setup(U),k.current=R,v.current=!0,f(null),p&&R.on)){const F=()=>{var b;const h={};if(_&&_.length>0){const A=R.videoIndex??((b=R.playlist)==null?void 0:b.playlistVideoIndex)??0,I=_[A];I&&(h.title=I.title,h.hlsUrl=I.hlsUrl,h.file=I.hlsUrl,h.thumbnailUrl=I.thumbnailUrl,h.duration=I.duration,h.videoIndex=A,h.playlistVideoIndex=A,h.isBackupPlaylist=I.isBackupPlaylist,h.mediaId=I.mediaId,h.videoId=I.mediaId||I.videoId)}else U.video&&(h.title=U.video.title,h.file=U.video.file,h.hlsUrl=U.video.file,h.thumbnailUrl=U.video.thumbnail,h.videoId=t||V,h.videoIndex=0,h.playlistVideoIndex=0,R.getDuration&&(h.duration=R.getDuration()));return h};let re=null;const le=async()=>{var h;try{re&&clearTimeout(re),await new Promise(I=>setTimeout(I,100));let b=F();const A=b.videoId||b.mediaId;if(A&&A===E.current)return;if(re=window.setTimeout(()=>{E.current=null},500),m&&A)try{const ue=`https://host.vpplayer.tech/player/ptkzurnx/${A}.json`,de=await fetch(ue);if(de.ok){const q=await de.json();q&&q.video&&(b={...b,title:q.video.title||b.title,description:q.video.description,publishDate:q.video.publishDate,projectId:q.projectId||b.projectId,premium:((h=q.video.videoLocking)==null?void 0:h.isEnabled)||!1,author:q.video.author,tags:q.video.tags||[]})}}catch{}E.current=A||null,p(b)}catch(b){console.warn("Error in video-started handler:",b)}};if(m){let h=!1,b=-1;const A=()=>{if(!h){h=!0;try{R.on&&R.on("vp-video-started",le),setTimeout(()=>{le(),b=R.videoIndex??0},500)}catch(q){console.error("Error setting up event listeners:",q)}}};let I=0;const ue=15,de=setInterval(()=>{try{const q=R.videoIndex!==void 0||R.playlist;if(!h)I++,(q||I>=ue)&&A();else{const ye=R.videoIndex??0;ye!==b&&b!==-1&&(b=ye,le())}}catch{}},200);y.current.push(de);try{R.on&&R.on("vp-listen-ready",A)}catch{}}else{const h=async b=>{var A,I;try{const ue=o==null?void 0:o.match(/player\/([^/.]+)/),de=ue==null?void 0:ue[1];if(!de||!b)return F();const q=`https://host.vpplayer.tech/player/${de}/${b}.json`,ye=await fetch(q);if(!ye.ok)return console.warn("Failed to fetch full video config:",ye.status),F();const ee=await ye.json();return!ee||!ee.video?F():{videoId:b,title:ee.video.title,description:ee.video.description,file:ee.video.file,hlsUrl:ee.video.file,thumbnailUrl:ee.video.thumbnail,duration:ee.video.duration,publishDate:ee.video.publishDate,projectId:ee.projectId,premium:((A=ee.video.videoLocking)==null?void 0:A.isEnabled)||!1,author:ee.video.author,tags:ee.video.tags||[],videoIndex:R.videoIndex??0,playlistVideoIndex:((I=R.playlist)==null?void 0:I.playlistVideoIndex)??0}}catch(ue){return console.warn("Error fetching full video data:",ue),F()}};R.on("ready",async b=>{try{const A=(b==null?void 0:b.id)||t||V;if(A){const I=await h(A);p(I)}else{const I=F();(I.title||I.file)&&p(I)}}catch(A){console.warn("Error in ready handler:",A)}}),R.on("playlistItem",async b=>{try{const A=b==null?void 0:b.id;if(A){const I=await h(A);p(I)}}catch(A){console.warn("Error in playlistItem handler:",A)}})}}}catch(K){if(D){const ne=K instanceof Error?K.message:String(K);f(ne),console.error("VP Player initialization error:",K)}}},150);return()=>{D=!1,clearTimeout(te),y.current.forEach(K=>clearInterval(K)),y.current=[],g.current.forEach(K=>clearTimeout(K)),g.current=[],v.current=!1}},[j,N,M,C,o]),P.useEffect(()=>()=>{if(k.current){try{k.current.destroy&&k.current.destroy()}catch(W){console.warn(`Failed to destroy player ${M}:`,W)}k.current=null}v.current=!1;const D=document.getElementById(M);D&&(D.innerHTML="")},[M]),{playerRef:x,playerInstanceRef:k,isScriptLoaded:j,isLoading:N,error:G||$||C}},kt=({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:o,config:l={},apiKey:u,isReels:m=!1,hiddenClasses:c=[],onClose:p,className:x,onPlaylistData:k,onVideoStarted:v})=>{var G,M,Z,D;const{playerRef:d,playerInstanceRef:y,isScriptLoaded:g,isLoading:E,error:j}=Pt({playerId:e,videoId:t,version:r,videoUrl:n,projectId:a,playlistId:i,scriptUrl:o,config:l,apiKey:u,isReels:m,onPlaylistData:k,onVideoStarted:v}),[C,V]=P.useState(!0),$=()=>m&&V(!0),f=()=>{var W,te;V(!1),(te=(W=y.current)==null?void 0:W.play)==null||te.call(W),p==null||p()},X=(M=(G=l==null?void 0:l.config)==null?void 0:G.size)!=null&&M.width?typeof l.config.size.width=="number"?`${l.config.size.width}px`:l.config.size.width:void 0,_=(D=(Z=l==null?void 0:l.config)==null?void 0:Z.size)!=null&&D.height?typeof l.config.size.height=="number"?`${l.config.size.height}px`:l.config.size.height:void 0,N=We(e,t);return j?z.jsxs(Me,{type:"error",children:["An error occurred: ",j]}):E||!g?z.jsx(Me,{type:"loading",children:"Loading..."}):z.jsxs(z.Fragment,{children:[m&&!C?z.jsx("div",{onClick:$}):null,!m&&z.jsx("div",{children:z.jsx(ze,{id:N,ref:d,width:X||"100%",height:_||"auto",$hiddenClasses:c,className:x})},N),m&&C&&z.jsx(mt,{onClick:f,className:x,children:z.jsx(yt,{className:x,onClick:W=>W.stopPropagation(),children:z.jsx("div",{children:z.jsx(ze,{id:N,ref:d,width:"100%",height:"auto",$hiddenClasses:c,className:x})},N)})})]})},Et=P.createContext(void 0),Or=({children:e})=>{const[t,r]=P.useState(!1),[n,a]=P.useState(null),[i,o]=P.useState(null),l=P.useCallback(c=>{try{const p=We(c.playerId,c.videoId);a({...c,playerId:p}),r(!0),o(null)}catch{o("Failed to show player.")}},[]),u=P.useCallback(()=>{r(!1),a(null),o(null)},[]),m=P.useMemo(()=>({showPlayer:l,hidePlayer:u,isPlayerVisible:t,playerParams:n}),[l,u,t,n]);return z.jsxs(Et.Provider,{value:m,children:[e,i&&z.jsx(Me,{type:"error",children:i}),t&&(n==null?void 0:n.playerId)&&z.jsx(kt,{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:u,hiddenClasses:n.hiddenClasses||[],apiKey:n.apiKey,className:n.className})]})},jr=()=>{const e=P.useContext(Et);if(!e)throw new Error("useVPPlayer must be used within a VPPlayerProvider");return e},Vr={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}}},$r={config:{autostartOnLoad:{state:!0,onMobile:!0,onData:!0},muted:!0}},Lr={config:{autoplay:!0,muted:!0}},Ve={video:{advertising:!0,ads:{skipAd:{state:!0,skipFrom:5}}},config:{adAnnouncement:{state:!0,timeBeforeAd:5},adsRequireInteraction:!1}},Nr=(e,t,r="time",n=0)=>{var a;return{...Ve,video:{...Ve.video,ads:{...(a=Ve.video)==null?void 0:a.ads,adBreaks:[{adTagUrl:t,breakType:e,breakTimingType:r,breakTimingValue:n}]}}}},Fr="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",Dr="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",Ur="https://videos.pexels.com/video-files/4678261/4678261-hd_1080_1920_25fps.mp4",Br="https://images.pexels.com/videos/4678261/pexels-photo-4678261.jpeg?auto=compress&cs=tinysrgb&w=600",Mr="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=",zr="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=";O.AD_TAG_LINEAR_URL=Mr,O.AD_TAG_SKIPPABLE_LINEAR_URL=zr,O.BIG_BUCK_BUNNY_URL=Fr,O.ELEPHANTS_DREAM_URL=Dr,O.Overlay=mt,O.PEXELS_THUMBNAIL_URL=Br,O.PEXELS_VERTICAL_VIDEO_URL=Ur,O.PlayerContainer=ze,O.PlayerWrapper=yt,O.VPPlayer=kt,O.VPPlayerProvider=Or,O.baseConfig=$r,O.baseConfigWithAds=Ve,O.baseConfigWithAutoplay=Lr,O.buildVPPlayerConfig=wt,O.defaultVPPlayerConfig=Vr,O.extractVideoId=xt,O.getAdConfig=Nr,O.useVPPlayer=jr,O.useVPPlayerLogic=Pt,O.useVPPlayerScript=vt,O.useVideoData=bt,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});

package/package.json

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