react-youtube-playlist-grid 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface PlaylistConfig {
+    id: string;
+    showDescription: boolean;
+    title: string;
+}
+interface Video {
+    id: string;
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+interface Playlist {
+    id: string;
+    title: string;
+    description: string;
+    videos: Video[];
+    nextPageToken?: string;
+    config?: PlaylistConfig;
+}
+
+interface PlaylistsExplorerProps {
+    initialPlaylists: Playlist[];
+    apiKey?: string;
+    onLoadMore?: (playlistId: string, pageToken: string) => Promise<{
+        videos: Video[];
+        nextPageToken?: string;
+    }>;
+}
+declare const PlaylistsExplorer: React.FC<PlaylistsExplorerProps>;
+
+interface VideoCardProps {
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+declare const VideoCard: React.FC<VideoCardProps>;
+
+interface FetchVideosResult {
+    videos?: Video[];
+    nextPageToken?: string;
+    error?: string;
+}
+declare function fetchPlaylistVideos(playlistId: string, apiKey: string, pageToken?: string): Promise<FetchVideosResult>;
+declare function getPlaylist(playlistId: string, apiKey: string): Promise<Playlist | null>;
+
+export { type Playlist, type PlaylistConfig, PlaylistsExplorer, type Video, VideoCard, fetchPlaylistVideos, getPlaylist };

package/dist/index.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface PlaylistConfig {
+    id: string;
+    showDescription: boolean;
+    title: string;
+}
+interface Video {
+    id: string;
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+interface Playlist {
+    id: string;
+    title: string;
+    description: string;
+    videos: Video[];
+    nextPageToken?: string;
+    config?: PlaylistConfig;
+}
+
+interface PlaylistsExplorerProps {
+    initialPlaylists: Playlist[];
+    apiKey?: string;
+    onLoadMore?: (playlistId: string, pageToken: string) => Promise<{
+        videos: Video[];
+        nextPageToken?: string;
+    }>;
+}
+declare const PlaylistsExplorer: React.FC<PlaylistsExplorerProps>;
+
+interface VideoCardProps {
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+declare const VideoCard: React.FC<VideoCardProps>;
+
+interface FetchVideosResult {
+    videos?: Video[];
+    nextPageToken?: string;
+    error?: string;
+}
+declare function fetchPlaylistVideos(playlistId: string, apiKey: string, pageToken?: string): Promise<FetchVideosResult>;
+declare function getPlaylist(playlistId: string, apiKey: string): Promise<Playlist | null>;
+
+export { type Playlist, type PlaylistConfig, PlaylistsExplorer, type Video, VideoCard, fetchPlaylistVideos, getPlaylist };

package/dist/index.js

@@ -0,0 +1,3 @@
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');var y=({title:t,thumbnailUrl:n,videoUrl:l})=>jsxRuntime.jsxs("a",{href:l,target:"_blank",rel:"noopener noreferrer",className:"group block relative overflow-hidden rounded-lg bg-slate-800 ring-1 ring-white/10 hover:ring-brand-500/50 transition-all duration-300 hover:shadow-[0_0_20px_rgba(139,92,246,0.15)] transform hover:-translate-y-1",children:[jsxRuntime.jsxs("div",{className:"aspect-video w-full overflow-hidden relative",children:[jsxRuntime.jsx("img",{src:n,alt:t,className:"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",loading:"lazy"}),jsxRuntime.jsx("div",{className:"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",children:jsxRuntime.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"w-12 h-12 text-white drop-shadow-lg",children:jsxRuntime.jsx("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z",clipRule:"evenodd"})})})]}),jsxRuntime.jsx("div",{className:"p-4",children:jsxRuntime.jsx("h3",{className:"text-sm font-semibold text-white group-hover:text-brand-300 transition-colors line-clamp-2 leading-snug",children:t})})]});var b="https://www.googleapis.com/youtube/v3";async function f(t,n,l){if(!n)return {error:"API Key is missing"};try{let r=`${b}/playlistItems?part=snippet,contentDetails&playlistId=${t}&maxResults=10&key=${n}`;l&&(r+=`&pageToken=${l}`);let o=await(await fetch(r)).json();return o.items?{videos:o.items.map(a=>({id:a.snippet.resourceId.videoId,title:a.snippet.title,thumbnailUrl:a.snippet.thumbnails.medium?.url||a.snippet.thumbnails.default?.url,videoUrl:`https://www.youtube.com/watch?v=${a.snippet.resourceId.videoId}`})).filter(a=>a.title!=="Private video"&&a.title!=="Deleted video"),nextPageToken:o.nextPageToken}:(console.error(`Failed to fetch items for playlist: ${t}`,o),{error:`YouTube API Error: ${o.error?.message||JSON.stringify(o)}`})}catch(r){return console.error(`Error fetching playlist items ${t}:`,r),{error:`Fetch Exception: ${r}`}}}async function T(t,n){if(!n)return console.warn("API Key is not set."),null;try{let r=await(await fetch(`${b}/playlists?part=snippet&id=${t}&key=${n}`)).json();if(!r.items||r.items.length===0)return console.error(`Playlist not found: ${t}`),null;let p=r.items[0].snippet,o=await f(t,n);return !o||o.error||!o.videos?null:{id:t,title:p.title,description:p.description,videos:o.videos,nextPageToken:o.nextPageToken}}catch(l){return console.error(`Error fetching playlist ${t}:`,l),null}}var A=({initialPlaylists:t,apiKey:n,onLoadMore:l})=>{let[r,p]=react.useState(t[0]?.id||""),[o,h]=react.useState(t),[a,x]=react.useState(false),i=o.find(e=>e.id===r),P=async()=>{if(!(!i||!i.nextPageToken)){x(true);try{let e=[],u;if(l){let d=await l(i.id,i.nextPageToken);e=d.videos,u=d.nextPageToken;}else if(n){let d=await f(i.id,n,i.nextPageToken);d.videos&&(e=d.videos,u=d.nextPageToken);}else {console.error("No apiKey or onLoadMore handler provided");return}e.length>0&&h(d=>d.map(g=>g.id===i.id?{...g,videos:[...g.videos,...e],nextPageToken:u}:g));}catch(e){console.error("Failed to load more videos",e);}finally{x(false);}}};return i?jsxRuntime.jsxs("div",{children:[jsxRuntime.jsx("div",{className:"flex flex-col sm:flex-row justify-between items-center mb-8 gap-4",children:jsxRuntime.jsx("div",{className:"flex space-x-2 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto",children:o.map(e=>jsxRuntime.jsx("button",{onClick:()=>p(e.id),className:`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${r===e.id?"bg-brand-600 text-white shadow-lg shadow-brand-500/30":"bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700"}`,children:e.config?.title||e.title},e.id))})}),jsxRuntime.jsxs("div",{className:"animate-fade-in",children:[jsxRuntime.jsxs("div",{className:"mb-6",children:[jsxRuntime.jsx("h2",{className:"text-xl font-bold text-white mb-2",children:i.title}),i.config?.showDescription&&jsxRuntime.jsx("p",{className:"text-slate-400 max-w-3xl",children:i.description})]}),jsxRuntime.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",children:i.videos.map(e=>jsxRuntime.jsx(y,{title:e.title,thumbnailUrl:e.thumbnailUrl,videoUrl:e.videoUrl},e.id))}),i.nextPageToken&&jsxRuntime.jsx("div",{className:"mt-12 text-center",children:jsxRuntime.jsx("button",{onClick:P,disabled:a,className:"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-700 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:a?jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsxRuntime.jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsxRuntime.jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Loading..."]}):"Load More Videos"})})]})]}):jsxRuntime.jsx("div",{children:"No playlists available."})};
+exports.PlaylistsExplorer=A;exports.VideoCard=y;exports.fetchPlaylistVideos=f;exports.getPlaylist=T;//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VideoCard.tsx","../src/utils/youtube.ts","../src/components/PlaylistsExplorer.tsx"],"names":["VideoCard","title","thumbnailUrl","videoUrl","jsxs","jsx","YOUTUBE_API_BASE","fetchPlaylistVideos","playlistId","apiKey","pageToken","url","itemsData","item","v","error","getPlaylist","playlistData","playlistSnippet","videosData","PlaylistsExplorer","initialPlaylists","onLoadMore","activePlaylistId","setActivePlaylistId","useState","playlists","setPlaylists","loadingMore","setLoadingMore","activePlaylist","p","handleLoadMore","newVideos","newNextPageToken","result","prevPlaylists","playlist","video","Fragment"],"mappings":"gFAQO,IAAMA,EAAsC,CAAC,CAAE,KAAA,CAAAC,CAAAA,CAAO,aAAAC,CAAAA,CAAc,QAAA,CAAAC,CAAS,CAAA,GAE5EC,gBAAC,GAAA,CAAA,CACG,IAAA,CAAMD,CAAAA,CACN,MAAA,CAAO,SACP,GAAA,CAAI,qBAAA,CACJ,SAAA,CAAU,oNAAA,CAEV,UAAAC,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8CAAA,CACX,UAAAC,cAAAA,CAAC,KAAA,CAAA,CACG,GAAA,CAAKH,CAAAA,CACL,IAAKD,CAAAA,CACL,SAAA,CAAU,oFAAA,CACV,OAAA,CAAQ,OACZ,CAAA,CACAI,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,kIACX,QAAA,CAAAA,cAAAA,CAAC,KAAA,CAAA,CAAI,KAAA,CAAM,6BAA6B,OAAA,CAAQ,WAAA,CAAY,IAAA,CAAK,cAAA,CAAe,UAAU,qCAAA,CACtF,QAAA,CAAAA,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAS,SAAA,CAAU,CAAA,CAAE,yIAAA,CAA0I,QAAA,CAAS,UAAU,CAAA,CAC5L,CAAA,CACJ,GACJ,CAAA,CACAA,cAAAA,CAAC,OAAI,SAAA,CAAU,KAAA,CACX,QAAA,CAAAA,cAAAA,CAAC,MAAG,SAAA,CAAU,yGAAA,CACT,QAAA,CAAAJ,CAAAA,CACL,EACJ,CAAA,CAAA,CACJ,EChCR,IAAMK,CAAAA,CAAmB,wCAQzB,eAAsBC,CAAAA,CAAoBC,CAAAA,CAAoBC,CAAAA,CAAgBC,EAAgD,CAC1H,GAAI,CAACD,CAAAA,CAAQ,OAAO,CAAE,KAAA,CAAO,oBAAqB,CAAA,CAElD,GAAI,CACA,IAAIE,CAAAA,CAAM,CAAA,EAAGL,CAAgB,CAAA,sDAAA,EAAyDE,CAAU,sBAAsBC,CAAM,CAAA,CAAA,CACxHC,IACAC,CAAAA,EAAO,CAAA,WAAA,EAAcD,CAAS,CAAA,CAAA,CAAA,CAIlC,IAAME,CAAAA,CAAY,KAAA,CADI,MAAM,KAAA,CAAMD,CAAG,CAAA,EACC,IAAA,EAAK,CAE3C,OAAKC,EAAU,KAAA,CAYR,CACH,MAAA,CARoBA,CAAAA,CAAU,MAAM,GAAA,CAAKC,CAAAA,GAAe,CACxD,EAAA,CAAIA,EAAK,OAAA,CAAQ,UAAA,CAAW,OAAA,CAC5B,KAAA,CAAOA,EAAK,OAAA,CAAQ,KAAA,CACpB,YAAA,CAAcA,CAAAA,CAAK,QAAQ,UAAA,CAAW,MAAA,EAAQ,KAAOA,CAAAA,CAAK,OAAA,CAAQ,WAAW,OAAA,EAAS,GAAA,CACtF,QAAA,CAAU,CAAA,gCAAA,EAAmCA,EAAK,OAAA,CAAQ,UAAA,CAAW,OAAO,CAAA,CAChF,EAAE,CAAA,CAAE,MAAA,CAAQC,CAAAA,EAAaA,CAAAA,CAAE,QAAU,eAAA,EAAmBA,CAAAA,CAAE,KAAA,GAAU,eAAe,EAI/E,aAAA,CAAeF,CAAAA,CAAU,aAC7B,CAAA,EAdI,QAAQ,KAAA,CAAM,CAAA,oCAAA,EAAuCJ,CAAU,CAAA,CAAA,CAAII,CAAS,CAAA,CACrE,CAAE,KAAA,CAAO,CAAA,mBAAA,EAAsBA,EAAU,KAAA,EAAO,OAAA,EAAW,KAAK,SAAA,CAAUA,CAAS,CAAC,CAAA,CAAG,CAAA,CActG,CAAA,MAASG,CAAAA,CAAO,CACZ,OAAA,OAAA,CAAQ,KAAA,CAAM,CAAA,8BAAA,EAAiCP,CAAU,IAAKO,CAAK,CAAA,CAC5D,CAAE,KAAA,CAAO,oBAAoBA,CAAK,CAAA,CAAG,CAChD,CACJ,CAEA,eAAsBC,CAAAA,CAAYR,CAAAA,CAAoBC,CAAAA,CAA0C,CAC5F,GAAI,CAACA,CAAAA,CACD,OAAA,OAAA,CAAQ,KAAK,qBAAqB,CAAA,CAC3B,IAAA,CAGX,GAAI,CAKA,IAAMQ,CAAAA,CAAe,MAHI,MAAM,KAAA,CAC3B,GAAGX,CAAgB,CAAA,2BAAA,EAA8BE,CAAU,CAAA,KAAA,EAAQC,CAAM,CAAA,CAC7E,CAAA,EAC4C,IAAA,EAAK,CAEjD,GAAI,CAACQ,CAAAA,CAAa,KAAA,EAASA,CAAAA,CAAa,MAAM,MAAA,GAAW,CAAA,CACrD,OAAA,OAAA,CAAQ,KAAA,CAAM,uBAAuBT,CAAU,CAAA,CAAE,CAAA,CAC1C,IAAA,CAGX,IAAMU,CAAAA,CAAkBD,CAAAA,CAAa,KAAA,CAAM,CAAC,EAAE,OAAA,CAGxCE,CAAAA,CAAa,MAAMZ,CAAAA,CAAoBC,EAAYC,CAAM,CAAA,CAE/D,OAAI,CAACU,CAAAA,EAAcA,EAAW,KAAA,EAAS,CAACA,CAAAA,CAAW,MAAA,CAAe,KAE3D,CACH,EAAA,CAAIX,CAAAA,CACJ,KAAA,CAAOU,EAAgB,KAAA,CACvB,WAAA,CAAaA,CAAAA,CAAgB,WAAA,CAC7B,OAAQC,CAAAA,CAAW,MAAA,CACnB,aAAA,CAAeA,CAAAA,CAAW,aAC9B,CAEJ,CAAA,MAASJ,CAAAA,CAAO,CACZ,eAAQ,KAAA,CAAM,CAAA,wBAAA,EAA2BP,CAAU,CAAA,CAAA,CAAA,CAAKO,CAAK,CAAA,CACtD,IACX,CACJ,CCtEO,IAAMK,CAAAA,CAAsD,CAAC,CAAE,gBAAA,CAAAC,CAAAA,CAAkB,MAAA,CAAAZ,CAAAA,CAAQ,WAAAa,CAAW,CAAA,GAAM,CAC7G,GAAM,CAACC,CAAAA,CAAkBC,CAAmB,CAAA,CAAIC,cAAAA,CAAiBJ,EAAiB,CAAC,CAAA,EAAG,EAAA,EAAM,EAAE,EACxF,CAACK,CAAAA,CAAWC,CAAY,CAAA,CAAIF,eAAqBJ,CAAgB,CAAA,CACjE,CAACO,CAAAA,CAAaC,CAAc,CAAA,CAAIJ,cAAAA,CAAkB,KAAK,CAAA,CAEvDK,EAAiBJ,CAAAA,CAAU,IAAA,CAAKK,CAAAA,EAAKA,CAAAA,CAAE,KAAOR,CAAgB,CAAA,CAE9DS,CAAAA,CAAiB,SAAY,CAC/B,GAAI,EAAA,CAACF,CAAAA,EAAkB,CAACA,EAAe,aAAA,CAAA,CAEvC,CAAAD,CAAAA,CAAe,IAAI,EACnB,GAAI,CACA,IAAII,CAAAA,CAAqB,EAAC,CACtBC,CAAAA,CAEJ,GAAIZ,CAAAA,CAAY,CACZ,IAAMa,CAAAA,CAAS,MAAMb,CAAAA,CAAWQ,EAAe,EAAA,CAAIA,CAAAA,CAAe,aAAa,CAAA,CAC/EG,CAAAA,CAAYE,EAAO,MAAA,CACnBD,CAAAA,CAAmBC,CAAAA,CAAO,cAC9B,SAAW1B,CAAAA,CAAQ,CACf,IAAM0B,CAAAA,CAAS,MAAM5B,CAAAA,CAAoBuB,CAAAA,CAAe,EAAA,CAAIrB,CAAAA,CAAQqB,EAAe,aAAa,CAAA,CAC5FK,CAAAA,CAAO,MAAA,GACPF,EAAYE,CAAAA,CAAO,MAAA,CACnBD,CAAAA,CAAmBC,CAAAA,CAAO,eAElC,CAAA,KAAO,CACH,OAAA,CAAQ,KAAA,CAAM,0CAA0C,CAAA,CACxD,MACJ,CAEIF,CAAAA,CAAU,OAAS,CAAA,EACnBN,CAAAA,CAAaS,GAAiBA,CAAAA,CAAc,GAAA,CAAIL,GACxCA,CAAAA,CAAE,EAAA,GAAOD,CAAAA,CAAe,EAAA,CACjB,CACH,GAAGC,CAAAA,CACH,MAAA,CAAQ,CAAC,GAAGA,CAAAA,CAAE,MAAA,CAAQ,GAAGE,CAAS,EAClC,aAAA,CAAeC,CACnB,CAAA,CAEGH,CACV,CAAC,EAEV,CAAA,MAAShB,CAAAA,CAAO,CACZ,QAAQ,KAAA,CAAM,4BAAA,CAA8BA,CAAK,EACrD,QAAE,CACEc,CAAAA,CAAe,KAAK,EACxB,EACJ,CAAA,CAEA,OAAKC,EAGD1B,eAAAA,CAAC,KAAA,CAAA,CAEG,UAAAC,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,mEAAA,CACX,SAAAA,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,8DAAA,CACV,SAAAqB,CAAAA,CAAU,GAAA,CAAIW,CAAAA,EACXhC,cAAAA,CAAC,UAEG,OAAA,CAAS,IAAMmB,CAAAA,CAAoBa,CAAAA,CAAS,EAAE,CAAA,CAC9C,SAAA,CAAW,CAAA,+EAAA,EAAkFd,CAAAA,GAAqBc,EAAS,EAAA,CACrH,uDAAA,CACA,iEACF,CAAA,CAAA,CAEH,SAAAA,CAAAA,CAAS,MAAA,EAAQ,KAAA,EAASA,CAAAA,CAAS,OAP/BA,CAAAA,CAAS,EAQlB,CACH,CAAA,CACL,CAAA,CACJ,EAGAjC,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,iBAAA,CAEX,UAAAA,eAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,MAAA,CACX,UAAAC,cAAAA,CAAC,IAAA,CAAA,CAAG,SAAA,CAAU,mCAAA,CAAqC,SAAAyB,CAAAA,CAAe,KAAA,CAAM,CAAA,CACvEA,CAAAA,CAAe,QAAQ,eAAA,EACpBzB,cAAAA,CAAC,GAAA,CAAA,CAAE,SAAA,CAAU,2BAA4B,QAAA,CAAAyB,CAAAA,CAAe,WAAA,CAAY,CAAA,CAAA,CAE5E,EAEAzB,cAAAA,CAAC,KAAA,CAAA,CAAI,SAAA,CAAU,qEAAA,CACV,SAAAyB,CAAAA,CAAe,MAAA,CAAO,IAAKQ,CAAAA,EACxBjC,cAAAA,CAACL,EAAA,CAEG,KAAA,CAAOsC,CAAAA,CAAM,KAAA,CACb,aAAcA,CAAAA,CAAM,YAAA,CACpB,QAAA,CAAUA,CAAAA,CAAM,UAHXA,CAAAA,CAAM,EAIf,CACH,CAAA,CACL,EAGCR,CAAAA,CAAe,aAAA,EACZzB,cAAAA,CAAC,KAAA,CAAA,CAAI,UAAU,mBAAA,CACX,QAAA,CAAAA,cAAAA,CAAC,QAAA,CAAA,CACG,QAAS2B,CAAAA,CACT,QAAA,CAAUJ,CAAAA,CACV,SAAA,CAAU,gSAET,QAAA,CAAAA,CAAAA,CACGxB,eAAAA,CAAAmC,mBAAAA,CAAA,CACI,QAAA,CAAA,CAAAnC,eAAAA,CAAC,OAAI,SAAA,CAAU,4CAAA,CAA6C,MAAM,4BAAA,CAA6B,IAAA,CAAK,MAAA,CAAO,OAAA,CAAQ,YAC/G,QAAA,CAAA,CAAAC,cAAAA,CAAC,QAAA,CAAA,CAAO,SAAA,CAAU,aAAa,EAAA,CAAG,IAAA,CAAK,EAAA,CAAG,IAAA,CAAK,EAAE,IAAA,CAAK,MAAA,CAAO,cAAA,CAAe,WAAA,CAAY,IAAI,CAAA,CAC5FA,cAAAA,CAAC,MAAA,CAAA,CAAK,SAAA,CAAU,aAAa,IAAA,CAAK,cAAA,CAAe,CAAA,CAAE,iHAAA,CAAkH,GACzK,CAAA,CAAM,YAAA,CAAA,CAEV,CAAA,CAEA,kBAAA,CAER,EACJ,CAAA,CAAA,CAER,CAAA,CAAA,CACJ,EAlEwBA,cAAAA,CAAC,KAAA,CAAA,CAAI,mCAAuB,CAoE5D","file":"index.js","sourcesContent":["import React from 'react';\n\ninterface VideoCardProps {\n    title: string;\n    thumbnailUrl: string;\n    videoUrl: string;\n}\n\nexport const VideoCard: React.FC<VideoCardProps> = ({ title, thumbnailUrl, videoUrl }) => {\n    return (\n        <a\n            href={videoUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"group block relative overflow-hidden rounded-lg bg-slate-800 ring-1 ring-white/10 hover:ring-brand-500/50 transition-all duration-300 hover:shadow-[0_0_20px_rgba(139,92,246,0.15)] transform hover:-translate-y-1\"\n        >\n            <div className=\"aspect-video w-full overflow-hidden relative\">\n                <img\n                    src={thumbnailUrl}\n                    alt={title}\n                    className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\n                />\n                <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"w-12 h-12 text-white drop-shadow-lg\">\n                        <path fillRule=\"evenodd\" d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\" clipRule=\"evenodd\" />\n                    </svg>\n                </div>\n            </div>\n            <div className=\"p-4\">\n                <h3 className=\"text-sm font-semibold text-white group-hover:text-brand-300 transition-colors line-clamp-2 leading-snug\">\n                    {title}\n                </h3>\n            </div>\n        </a>\n    );\n};\n","import type { Playlist, Video } from \"../types\";\n\nconst YOUTUBE_API_BASE = \"https://www.googleapis.com/youtube/v3\";\n\ninterface FetchVideosResult {\n    videos?: Video[];\n    nextPageToken?: string;\n    error?: string;\n}\n\nexport async function fetchPlaylistVideos(playlistId: string, apiKey: string, pageToken?: string): Promise<FetchVideosResult> {\n    if (!apiKey) return { error: \"API Key is missing\" };\n\n    try {\n        let url = `${YOUTUBE_API_BASE}/playlistItems?part=snippet,contentDetails&playlistId=${playlistId}&maxResults=10&key=${apiKey}`;\n        if (pageToken) {\n            url += `&pageToken=${pageToken}`;\n        }\n\n        const itemsResponse = await fetch(url);\n        const itemsData = await itemsResponse.json();\n\n        if (!itemsData.items) {\n            console.error(`Failed to fetch items for playlist: ${playlistId}`, itemsData);\n            return { error: `YouTube API Error: ${itemsData.error?.message || JSON.stringify(itemsData)}` };\n        }\n\n        const videos: Video[] = itemsData.items.map((item: any) => ({\n            id: item.snippet.resourceId.videoId,\n            title: item.snippet.title,\n            thumbnailUrl: item.snippet.thumbnails.medium?.url || item.snippet.thumbnails.default?.url,\n            videoUrl: `https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}`,\n        })).filter((v: Video) => v.title !== \"Private video\" && v.title !== \"Deleted video\");\n\n        return {\n            videos,\n            nextPageToken: itemsData.nextPageToken\n        };\n    } catch (error) {\n        console.error(`Error fetching playlist items ${playlistId}:`, error);\n        return { error: `Fetch Exception: ${error}` };\n    }\n}\n\nexport async function getPlaylist(playlistId: string, apiKey: string): Promise<Playlist | null> {\n    if (!apiKey) {\n        console.warn(\"API Key is not set.\");\n        return null;\n    }\n\n    try {\n        // 1. Get Playlist Details\n        const playlistResponse = await fetch(\n            `${YOUTUBE_API_BASE}/playlists?part=snippet&id=${playlistId}&key=${apiKey}`\n        );\n        const playlistData = await playlistResponse.json();\n\n        if (!playlistData.items || playlistData.items.length === 0) {\n            console.error(`Playlist not found: ${playlistId}`);\n            return null;\n        }\n\n        const playlistSnippet = playlistData.items[0].snippet;\n\n        // 2. Get First Batch of Videos\n        const videosData = await fetchPlaylistVideos(playlistId, apiKey);\n\n        if (!videosData || videosData.error || !videosData.videos) return null;\n\n        return {\n            id: playlistId,\n            title: playlistSnippet.title,\n            description: playlistSnippet.description,\n            videos: videosData.videos,\n            nextPageToken: videosData.nextPageToken\n        };\n\n    } catch (error) {\n        console.error(`Error fetching playlist ${playlistId}:`, error);\n        return null;\n    }\n}\n","import React, { useState } from 'react';\nimport type { Playlist, Video } from '../types';\nimport { VideoCard } from './VideoCard';\nimport { fetchPlaylistVideos } from '../utils/youtube';\n\ninterface PlaylistsExplorerProps {\n    initialPlaylists: Playlist[];\n    apiKey?: string;\n    onLoadMore?: (playlistId: string, pageToken: string) => Promise<{ videos: Video[], nextPageToken?: string }>;\n}\n\nexport const PlaylistsExplorer: React.FC<PlaylistsExplorerProps> = ({ initialPlaylists, apiKey, onLoadMore }) => {\n    const [activePlaylistId, setActivePlaylistId] = useState<string>(initialPlaylists[0]?.id || \"\");\n    const [playlists, setPlaylists] = useState<Playlist[]>(initialPlaylists);\n    const [loadingMore, setLoadingMore] = useState<boolean>(false);\n\n    const activePlaylist = playlists.find(p => p.id === activePlaylistId);\n\n    const handleLoadMore = async () => {\n        if (!activePlaylist || !activePlaylist.nextPageToken) return;\n\n        setLoadingMore(true);\n        try {\n            let newVideos: Video[] = [];\n            let newNextPageToken: string | undefined;\n\n            if (onLoadMore) {\n                const result = await onLoadMore(activePlaylist.id, activePlaylist.nextPageToken);\n                newVideos = result.videos;\n                newNextPageToken = result.nextPageToken;\n            } else if (apiKey) {\n                const result = await fetchPlaylistVideos(activePlaylist.id, apiKey, activePlaylist.nextPageToken);\n                if (result.videos) {\n                    newVideos = result.videos;\n                    newNextPageToken = result.nextPageToken;\n                }\n            } else {\n                console.error(\"No apiKey or onLoadMore handler provided\");\n                return;\n            }\n\n            if (newVideos.length > 0) {\n                setPlaylists(prevPlaylists => prevPlaylists.map(p => {\n                    if (p.id === activePlaylist.id) {\n                        return {\n                            ...p,\n                            videos: [...p.videos, ...newVideos],\n                            nextPageToken: newNextPageToken\n                        };\n                    }\n                    return p;\n                }));\n            }\n        } catch (error) {\n            console.error(\"Failed to load more videos\", error);\n        } finally {\n            setLoadingMore(false);\n        }\n    };\n\n    if (!activePlaylist) return <div>No playlists available.</div>;\n\n    return (\n        <div>\n            {/* Navigation & Tabs */}\n            <div className=\"flex flex-col sm:flex-row justify-between items-center mb-8 gap-4\">\n                <div className=\"flex space-x-2 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto\">\n                    {playlists.map(playlist => (\n                        <button\n                            key={playlist.id}\n                            onClick={() => setActivePlaylistId(playlist.id)}\n                            className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${activePlaylistId === playlist.id\n                                ? 'bg-brand-600 text-white shadow-lg shadow-brand-500/30'\n                                : 'bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700'\n                                }`}\n                        >\n                            {playlist.config?.title || playlist.title}\n                        </button>\n                    ))}\n                </div>\n            </div>\n\n            {/* Playlist Content */}\n            <div className=\"animate-fade-in\">\n                {/* Always show title and description if enabled */}\n                <div className=\"mb-6\">\n                    <h2 className=\"text-xl font-bold text-white mb-2\">{activePlaylist.title}</h2>\n                    {activePlaylist.config?.showDescription && (\n                        <p className=\"text-slate-400 max-w-3xl\">{activePlaylist.description}</p>\n                    )}\n                </div>\n\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n                    {activePlaylist.videos.map((video) => (\n                        <VideoCard\n                            key={video.id}\n                            title={video.title}\n                            thumbnailUrl={video.thumbnailUrl}\n                            videoUrl={video.videoUrl}\n                        />\n                    ))}\n                </div>\n\n                {/* Load More */}\n                {activePlaylist.nextPageToken && (\n                    <div className=\"mt-12 text-center\">\n                        <button\n                            onClick={handleLoadMore}\n                            disabled={loadingMore}\n                            className=\"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-700 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n                        >\n                            {loadingMore ? (\n                                <>\n                                    <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                                        <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                                        <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                                    </svg>\n                                    Loading...\n                                </>\n                            ) : (\n                                'Load More Videos'\n                            )}\n                        </button>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/index.mjs

@@ -0,0 +1,3 @@
+import {useState}from'react';import {jsxs,jsx,Fragment}from'react/jsx-runtime';var y=({title:t,thumbnailUrl:n,videoUrl:l})=>jsxs("a",{href:l,target:"_blank",rel:"noopener noreferrer",className:"group block relative overflow-hidden rounded-lg bg-slate-800 ring-1 ring-white/10 hover:ring-brand-500/50 transition-all duration-300 hover:shadow-[0_0_20px_rgba(139,92,246,0.15)] transform hover:-translate-y-1",children:[jsxs("div",{className:"aspect-video w-full overflow-hidden relative",children:[jsx("img",{src:n,alt:t,className:"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105",loading:"lazy"}),jsx("div",{className:"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center",children:jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"currentColor",className:"w-12 h-12 text-white drop-shadow-lg",children:jsx("path",{fillRule:"evenodd",d:"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z",clipRule:"evenodd"})})})]}),jsx("div",{className:"p-4",children:jsx("h3",{className:"text-sm font-semibold text-white group-hover:text-brand-300 transition-colors line-clamp-2 leading-snug",children:t})})]});var b="https://www.googleapis.com/youtube/v3";async function f(t,n,l){if(!n)return {error:"API Key is missing"};try{let r=`${b}/playlistItems?part=snippet,contentDetails&playlistId=${t}&maxResults=10&key=${n}`;l&&(r+=`&pageToken=${l}`);let o=await(await fetch(r)).json();return o.items?{videos:o.items.map(a=>({id:a.snippet.resourceId.videoId,title:a.snippet.title,thumbnailUrl:a.snippet.thumbnails.medium?.url||a.snippet.thumbnails.default?.url,videoUrl:`https://www.youtube.com/watch?v=${a.snippet.resourceId.videoId}`})).filter(a=>a.title!=="Private video"&&a.title!=="Deleted video"),nextPageToken:o.nextPageToken}:(console.error(`Failed to fetch items for playlist: ${t}`,o),{error:`YouTube API Error: ${o.error?.message||JSON.stringify(o)}`})}catch(r){return console.error(`Error fetching playlist items ${t}:`,r),{error:`Fetch Exception: ${r}`}}}async function T(t,n){if(!n)return console.warn("API Key is not set."),null;try{let r=await(await fetch(`${b}/playlists?part=snippet&id=${t}&key=${n}`)).json();if(!r.items||r.items.length===0)return console.error(`Playlist not found: ${t}`),null;let p=r.items[0].snippet,o=await f(t,n);return !o||o.error||!o.videos?null:{id:t,title:p.title,description:p.description,videos:o.videos,nextPageToken:o.nextPageToken}}catch(l){return console.error(`Error fetching playlist ${t}:`,l),null}}var A=({initialPlaylists:t,apiKey:n,onLoadMore:l})=>{let[r,p]=useState(t[0]?.id||""),[o,h]=useState(t),[a,x]=useState(false),i=o.find(e=>e.id===r),P=async()=>{if(!(!i||!i.nextPageToken)){x(true);try{let e=[],u;if(l){let d=await l(i.id,i.nextPageToken);e=d.videos,u=d.nextPageToken;}else if(n){let d=await f(i.id,n,i.nextPageToken);d.videos&&(e=d.videos,u=d.nextPageToken);}else {console.error("No apiKey or onLoadMore handler provided");return}e.length>0&&h(d=>d.map(g=>g.id===i.id?{...g,videos:[...g.videos,...e],nextPageToken:u}:g));}catch(e){console.error("Failed to load more videos",e);}finally{x(false);}}};return i?jsxs("div",{children:[jsx("div",{className:"flex flex-col sm:flex-row justify-between items-center mb-8 gap-4",children:jsx("div",{className:"flex space-x-2 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto",children:o.map(e=>jsx("button",{onClick:()=>p(e.id),className:`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${r===e.id?"bg-brand-600 text-white shadow-lg shadow-brand-500/30":"bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700"}`,children:e.config?.title||e.title},e.id))})}),jsxs("div",{className:"animate-fade-in",children:[jsxs("div",{className:"mb-6",children:[jsx("h2",{className:"text-xl font-bold text-white mb-2",children:i.title}),i.config?.showDescription&&jsx("p",{className:"text-slate-400 max-w-3xl",children:i.description})]}),jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6",children:i.videos.map(e=>jsx(y,{title:e.title,thumbnailUrl:e.thumbnailUrl,videoUrl:e.videoUrl},e.id))}),i.nextPageToken&&jsx("div",{className:"mt-12 text-center",children:jsx("button",{onClick:P,disabled:a,className:"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-700 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors",children:a?jsxs(Fragment,{children:[jsxs("svg",{className:"animate-spin -ml-1 mr-3 h-5 w-5 text-white",xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",children:[jsx("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),jsx("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]}),"Loading..."]}):"Load More Videos"})})]})]}):jsx("div",{children:"No playlists available."})};
+export{A as PlaylistsExplorer,y as VideoCard,f as fetchPlaylistVideos,T as getPlaylist};//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VideoCard.tsx","../src/utils/youtube.ts","../src/components/PlaylistsExplorer.tsx"],"names":["VideoCard","title","thumbnailUrl","videoUrl","jsxs","jsx","YOUTUBE_API_BASE","fetchPlaylistVideos","playlistId","apiKey","pageToken","url","itemsData","item","v","error","getPlaylist","playlistData","playlistSnippet","videosData","PlaylistsExplorer","initialPlaylists","onLoadMore","activePlaylistId","setActivePlaylistId","useState","playlists","setPlaylists","loadingMore","setLoadingMore","activePlaylist","p","handleLoadMore","newVideos","newNextPageToken","result","prevPlaylists","playlist","video","Fragment"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from 'react';\n\ninterface VideoCardProps {\n    title: string;\n    thumbnailUrl: string;\n    videoUrl: string;\n}\n\nexport const VideoCard: React.FC<VideoCardProps> = ({ title, thumbnailUrl, videoUrl }) => {\n    return (\n        <a\n            href={videoUrl}\n            target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            className=\"group block relative overflow-hidden rounded-lg bg-slate-800 ring-1 ring-white/10 hover:ring-brand-500/50 transition-all duration-300 hover:shadow-[0_0_20px_rgba(139,92,246,0.15)] transform hover:-translate-y-1\"\n        >\n            <div className=\"aspect-video w-full overflow-hidden relative\">\n                <img\n                    src={thumbnailUrl}\n                    alt={title}\n                    className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\"\n                    loading=\"lazy\"\n                />\n                <div className=\"absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\" className=\"w-12 h-12 text-white drop-shadow-lg\">\n                        <path fillRule=\"evenodd\" d=\"M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z\" clipRule=\"evenodd\" />\n                    </svg>\n                </div>\n            </div>\n            <div className=\"p-4\">\n                <h3 className=\"text-sm font-semibold text-white group-hover:text-brand-300 transition-colors line-clamp-2 leading-snug\">\n                    {title}\n                </h3>\n            </div>\n        </a>\n    );\n};\n","import type { Playlist, Video } from \"../types\";\n\nconst YOUTUBE_API_BASE = \"https://www.googleapis.com/youtube/v3\";\n\ninterface FetchVideosResult {\n    videos?: Video[];\n    nextPageToken?: string;\n    error?: string;\n}\n\nexport async function fetchPlaylistVideos(playlistId: string, apiKey: string, pageToken?: string): Promise<FetchVideosResult> {\n    if (!apiKey) return { error: \"API Key is missing\" };\n\n    try {\n        let url = `${YOUTUBE_API_BASE}/playlistItems?part=snippet,contentDetails&playlistId=${playlistId}&maxResults=10&key=${apiKey}`;\n        if (pageToken) {\n            url += `&pageToken=${pageToken}`;\n        }\n\n        const itemsResponse = await fetch(url);\n        const itemsData = await itemsResponse.json();\n\n        if (!itemsData.items) {\n            console.error(`Failed to fetch items for playlist: ${playlistId}`, itemsData);\n            return { error: `YouTube API Error: ${itemsData.error?.message || JSON.stringify(itemsData)}` };\n        }\n\n        const videos: Video[] = itemsData.items.map((item: any) => ({\n            id: item.snippet.resourceId.videoId,\n            title: item.snippet.title,\n            thumbnailUrl: item.snippet.thumbnails.medium?.url || item.snippet.thumbnails.default?.url,\n            videoUrl: `https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}`,\n        })).filter((v: Video) => v.title !== \"Private video\" && v.title !== \"Deleted video\");\n\n        return {\n            videos,\n            nextPageToken: itemsData.nextPageToken\n        };\n    } catch (error) {\n        console.error(`Error fetching playlist items ${playlistId}:`, error);\n        return { error: `Fetch Exception: ${error}` };\n    }\n}\n\nexport async function getPlaylist(playlistId: string, apiKey: string): Promise<Playlist | null> {\n    if (!apiKey) {\n        console.warn(\"API Key is not set.\");\n        return null;\n    }\n\n    try {\n        // 1. Get Playlist Details\n        const playlistResponse = await fetch(\n            `${YOUTUBE_API_BASE}/playlists?part=snippet&id=${playlistId}&key=${apiKey}`\n        );\n        const playlistData = await playlistResponse.json();\n\n        if (!playlistData.items || playlistData.items.length === 0) {\n            console.error(`Playlist not found: ${playlistId}`);\n            return null;\n        }\n\n        const playlistSnippet = playlistData.items[0].snippet;\n\n        // 2. Get First Batch of Videos\n        const videosData = await fetchPlaylistVideos(playlistId, apiKey);\n\n        if (!videosData || videosData.error || !videosData.videos) return null;\n\n        return {\n            id: playlistId,\n            title: playlistSnippet.title,\n            description: playlistSnippet.description,\n            videos: videosData.videos,\n            nextPageToken: videosData.nextPageToken\n        };\n\n    } catch (error) {\n        console.error(`Error fetching playlist ${playlistId}:`, error);\n        return null;\n    }\n}\n","import React, { useState } from 'react';\nimport type { Playlist, Video } from '../types';\nimport { VideoCard } from './VideoCard';\nimport { fetchPlaylistVideos } from '../utils/youtube';\n\ninterface PlaylistsExplorerProps {\n    initialPlaylists: Playlist[];\n    apiKey?: string;\n    onLoadMore?: (playlistId: string, pageToken: string) => Promise<{ videos: Video[], nextPageToken?: string }>;\n}\n\nexport const PlaylistsExplorer: React.FC<PlaylistsExplorerProps> = ({ initialPlaylists, apiKey, onLoadMore }) => {\n    const [activePlaylistId, setActivePlaylistId] = useState<string>(initialPlaylists[0]?.id || \"\");\n    const [playlists, setPlaylists] = useState<Playlist[]>(initialPlaylists);\n    const [loadingMore, setLoadingMore] = useState<boolean>(false);\n\n    const activePlaylist = playlists.find(p => p.id === activePlaylistId);\n\n    const handleLoadMore = async () => {\n        if (!activePlaylist || !activePlaylist.nextPageToken) return;\n\n        setLoadingMore(true);\n        try {\n            let newVideos: Video[] = [];\n            let newNextPageToken: string | undefined;\n\n            if (onLoadMore) {\n                const result = await onLoadMore(activePlaylist.id, activePlaylist.nextPageToken);\n                newVideos = result.videos;\n                newNextPageToken = result.nextPageToken;\n            } else if (apiKey) {\n                const result = await fetchPlaylistVideos(activePlaylist.id, apiKey, activePlaylist.nextPageToken);\n                if (result.videos) {\n                    newVideos = result.videos;\n                    newNextPageToken = result.nextPageToken;\n                }\n            } else {\n                console.error(\"No apiKey or onLoadMore handler provided\");\n                return;\n            }\n\n            if (newVideos.length > 0) {\n                setPlaylists(prevPlaylists => prevPlaylists.map(p => {\n                    if (p.id === activePlaylist.id) {\n                        return {\n                            ...p,\n                            videos: [...p.videos, ...newVideos],\n                            nextPageToken: newNextPageToken\n                        };\n                    }\n                    return p;\n                }));\n            }\n        } catch (error) {\n            console.error(\"Failed to load more videos\", error);\n        } finally {\n            setLoadingMore(false);\n        }\n    };\n\n    if (!activePlaylist) return <div>No playlists available.</div>;\n\n    return (\n        <div>\n            {/* Navigation & Tabs */}\n            <div className=\"flex flex-col sm:flex-row justify-between items-center mb-8 gap-4\">\n                <div className=\"flex space-x-2 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto\">\n                    {playlists.map(playlist => (\n                        <button\n                            key={playlist.id}\n                            onClick={() => setActivePlaylistId(playlist.id)}\n                            className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${activePlaylistId === playlist.id\n                                ? 'bg-brand-600 text-white shadow-lg shadow-brand-500/30'\n                                : 'bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700'\n                                }`}\n                        >\n                            {playlist.config?.title || playlist.title}\n                        </button>\n                    ))}\n                </div>\n            </div>\n\n            {/* Playlist Content */}\n            <div className=\"animate-fade-in\">\n                {/* Always show title and description if enabled */}\n                <div className=\"mb-6\">\n                    <h2 className=\"text-xl font-bold text-white mb-2\">{activePlaylist.title}</h2>\n                    {activePlaylist.config?.showDescription && (\n                        <p className=\"text-slate-400 max-w-3xl\">{activePlaylist.description}</p>\n                    )}\n                </div>\n\n                <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6\">\n                    {activePlaylist.videos.map((video) => (\n                        <VideoCard\n                            key={video.id}\n                            title={video.title}\n                            thumbnailUrl={video.thumbnailUrl}\n                            videoUrl={video.videoUrl}\n                        />\n                    ))}\n                </div>\n\n                {/* Load More */}\n                {activePlaylist.nextPageToken && (\n                    <div className=\"mt-12 text-center\">\n                        <button\n                            onClick={handleLoadMore}\n                            disabled={loadingMore}\n                            className=\"inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-700 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors\"\n                        >\n                            {loadingMore ? (\n                                <>\n                                    <svg className=\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n                                        <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\"></circle>\n                                        <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"></path>\n                                    </svg>\n                                    Loading...\n                                </>\n                            ) : (\n                                'Load More Videos'\n                            )}\n                        </button>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n};\n"]}

package/package.json

@@ -0,0 +1,32 @@
+{
+    "name": "react-youtube-playlist-grid",
+    "version": "1.0.0",
+    "description": "A React component for displaying YouTube playlists in a grid with load more functionality.",
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "scripts": {
+        "build": "tsup",
+        "dev": "tsup --watch"
+    },
+    "keywords": [
+        "react",
+        "youtube",
+        "playlist",
+        "grid"
+    ],
+    "author": "",
+    "license": "MIT",
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^19.0.0",
+        "@types/react-dom": "^19.0.0",
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0",
+        "typescript": "^5.0.0",
+        "tsup": "^8.0.0"
+    }
+}

package/src/components/PlaylistsExplorer.tsx

@@ -0,0 +1,129 @@
+import React, { useState } from 'react';
+import type { Playlist, Video } from '../types';
+import { VideoCard } from './VideoCard';
+import { fetchPlaylistVideos } from '../utils/youtube';
+
+interface PlaylistsExplorerProps {
+    initialPlaylists: Playlist[];
+    apiKey?: string;
+    onLoadMore?: (playlistId: string, pageToken: string) => Promise<{ videos: Video[], nextPageToken?: string }>;
+}
+
+export const PlaylistsExplorer: React.FC<PlaylistsExplorerProps> = ({ initialPlaylists, apiKey, onLoadMore }) => {
+    const [activePlaylistId, setActivePlaylistId] = useState<string>(initialPlaylists[0]?.id || "");
+    const [playlists, setPlaylists] = useState<Playlist[]>(initialPlaylists);
+    const [loadingMore, setLoadingMore] = useState<boolean>(false);
+
+    const activePlaylist = playlists.find(p => p.id === activePlaylistId);
+
+    const handleLoadMore = async () => {
+        if (!activePlaylist || !activePlaylist.nextPageToken) return;
+
+        setLoadingMore(true);
+        try {
+            let newVideos: Video[] = [];
+            let newNextPageToken: string | undefined;
+
+            if (onLoadMore) {
+                const result = await onLoadMore(activePlaylist.id, activePlaylist.nextPageToken);
+                newVideos = result.videos;
+                newNextPageToken = result.nextPageToken;
+            } else if (apiKey) {
+                const result = await fetchPlaylistVideos(activePlaylist.id, apiKey, activePlaylist.nextPageToken);
+                if (result.videos) {
+                    newVideos = result.videos;
+                    newNextPageToken = result.nextPageToken;
+                }
+            } else {
+                console.error("No apiKey or onLoadMore handler provided");
+                return;
+            }
+
+            if (newVideos.length > 0) {
+                setPlaylists(prevPlaylists => prevPlaylists.map(p => {
+                    if (p.id === activePlaylist.id) {
+                        return {
+                            ...p,
+                            videos: [...p.videos, ...newVideos],
+                            nextPageToken: newNextPageToken
+                        };
+                    }
+                    return p;
+                }));
+            }
+        } catch (error) {
+            console.error("Failed to load more videos", error);
+        } finally {
+            setLoadingMore(false);
+        }
+    };
+
+    if (!activePlaylist) return <div>No playlists available.</div>;
+
+    return (
+        <div>
+            {/* Navigation & Tabs */}
+            <div className="flex flex-col sm:flex-row justify-between items-center mb-8 gap-4">
+                <div className="flex space-x-2 overflow-x-auto pb-2 sm:pb-0 w-full sm:w-auto">
+                    {playlists.map(playlist => (
+                        <button
+                            key={playlist.id}
+                            onClick={() => setActivePlaylistId(playlist.id)}
+                            className={`px-4 py-2 rounded-full text-sm font-medium whitespace-nowrap transition-colors ${activePlaylistId === playlist.id
+                                ? 'bg-brand-600 text-white shadow-lg shadow-brand-500/30'
+                                : 'bg-slate-800 text-slate-400 hover:text-white hover:bg-slate-700'
+                                }`}
+                        >
+                            {playlist.config?.title || playlist.title}
+                        </button>
+                    ))}
+                </div>
+            </div>
+
+            {/* Playlist Content */}
+            <div className="animate-fade-in">
+                {/* Always show title and description if enabled */}
+                <div className="mb-6">
+                    <h2 className="text-xl font-bold text-white mb-2">{activePlaylist.title}</h2>
+                    {activePlaylist.config?.showDescription && (
+                        <p className="text-slate-400 max-w-3xl">{activePlaylist.description}</p>
+                    )}
+                </div>
+
+                <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
+                    {activePlaylist.videos.map((video) => (
+                        <VideoCard
+                            key={video.id}
+                            title={video.title}
+                            thumbnailUrl={video.thumbnailUrl}
+                            videoUrl={video.videoUrl}
+                        />
+                    ))}
+                </div>
+
+                {/* Load More */}
+                {activePlaylist.nextPageToken && (
+                    <div className="mt-12 text-center">
+                        <button
+                            onClick={handleLoadMore}
+                            disabled={loadingMore}
+                            className="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-slate-700 hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                        >
+                            {loadingMore ? (
+                                <>
+                                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                                        <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                                        <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                                    </svg>
+                                    Loading...
+                                </>
+                            ) : (
+                                'Load More Videos'
+                            )}
+                        </button>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};

package/src/components/VideoCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+interface VideoCardProps {
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+
+export const VideoCard: React.FC<VideoCardProps> = ({ title, thumbnailUrl, videoUrl }) => {
+    return (
+        <a
+            href={videoUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="group block relative overflow-hidden rounded-lg bg-slate-800 ring-1 ring-white/10 hover:ring-brand-500/50 transition-all duration-300 hover:shadow-[0_0_20px_rgba(139,92,246,0.15)] transform hover:-translate-y-1"
+        >
+            <div className="aspect-video w-full overflow-hidden relative">
+                <img
+                    src={thumbnailUrl}
+                    alt={title}
+                    className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
+                    loading="lazy"
+                />
+                <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-12 h-12 text-white drop-shadow-lg">
+                        <path fillRule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clipRule="evenodd" />
+                    </svg>
+                </div>
+            </div>
+            <div className="p-4">
+                <h3 className="text-sm font-semibold text-white group-hover:text-brand-300 transition-colors line-clamp-2 leading-snug">
+                    {title}
+                </h3>
+            </div>
+        </a>
+    );
+};

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/PlaylistsExplorer';
+export * from './components/VideoCard';
+export * from './types';
+export * from './utils/youtube';

package/src/types/index.ts

@@ -0,0 +1,23 @@
+export interface PlaylistConfig {
+    id: string;
+    showDescription: boolean;
+    title: string;
+}
+
+
+
+export interface Video {
+    id: string;
+    title: string;
+    thumbnailUrl: string;
+    videoUrl: string;
+}
+
+export interface Playlist {
+    id: string;
+    title: string;
+    description: string;
+    videos: Video[];
+    nextPageToken?: string;
+    config?: PlaylistConfig;
+}

package/src/utils/youtube.ts

@@ -0,0 +1,82 @@
+import type { Playlist, Video } from "../types";
+
+const YOUTUBE_API_BASE = "https://www.googleapis.com/youtube/v3";
+
+interface FetchVideosResult {
+    videos?: Video[];
+    nextPageToken?: string;
+    error?: string;
+}
+
+export async function fetchPlaylistVideos(playlistId: string, apiKey: string, pageToken?: string): Promise<FetchVideosResult> {
+    if (!apiKey) return { error: "API Key is missing" };
+
+    try {
+        let url = `${YOUTUBE_API_BASE}/playlistItems?part=snippet,contentDetails&playlistId=${playlistId}&maxResults=10&key=${apiKey}`;
+        if (pageToken) {
+            url += `&pageToken=${pageToken}`;
+        }
+
+        const itemsResponse = await fetch(url);
+        const itemsData = await itemsResponse.json();
+
+        if (!itemsData.items) {
+            console.error(`Failed to fetch items for playlist: ${playlistId}`, itemsData);
+            return { error: `YouTube API Error: ${itemsData.error?.message || JSON.stringify(itemsData)}` };
+        }
+
+        const videos: Video[] = itemsData.items.map((item: any) => ({
+            id: item.snippet.resourceId.videoId,
+            title: item.snippet.title,
+            thumbnailUrl: item.snippet.thumbnails.medium?.url || item.snippet.thumbnails.default?.url,
+            videoUrl: `https://www.youtube.com/watch?v=${item.snippet.resourceId.videoId}`,
+        })).filter((v: Video) => v.title !== "Private video" && v.title !== "Deleted video");
+
+        return {
+            videos,
+            nextPageToken: itemsData.nextPageToken
+        };
+    } catch (error) {
+        console.error(`Error fetching playlist items ${playlistId}:`, error);
+        return { error: `Fetch Exception: ${error}` };
+    }
+}
+
+export async function getPlaylist(playlistId: string, apiKey: string): Promise<Playlist | null> {
+    if (!apiKey) {
+        console.warn("API Key is not set.");
+        return null;
+    }
+
+    try {
+        // 1. Get Playlist Details
+        const playlistResponse = await fetch(
+            `${YOUTUBE_API_BASE}/playlists?part=snippet&id=${playlistId}&key=${apiKey}`
+        );
+        const playlistData = await playlistResponse.json();
+
+        if (!playlistData.items || playlistData.items.length === 0) {
+            console.error(`Playlist not found: ${playlistId}`);
+            return null;
+        }
+
+        const playlistSnippet = playlistData.items[0].snippet;
+
+        // 2. Get First Batch of Videos
+        const videosData = await fetchPlaylistVideos(playlistId, apiKey);
+
+        if (!videosData || videosData.error || !videosData.videos) return null;
+
+        return {
+            id: playlistId,
+            title: playlistSnippet.title,
+            description: playlistSnippet.description,
+            videos: videosData.videos,
+            nextPageToken: videosData.nextPageToken
+        };
+
+    } catch (error) {
+        console.error(`Error fetching playlist ${playlistId}:`, error);
+        return null;
+    }
+}

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "ES2020",
+        "useDefineForClassFields": true,
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ],
+        "module": "ESNext",
+        "skipLibCheck": true,
+        "moduleResolution": "bundler",
+        "allowImportingTsExtensions": true,
+        "resolveJsonModule": true,
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true
+    },
+    "include": [
+        "src"
+    ]
+}

package/tsup.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig({
+    entry: ['src/index.ts'],
+    format: ['cjs', 'esm'],
+    dts: true,
+    splitting: false,
+    sourcemap: true,
+    clean: true,
+    treeshake: true,
+    minify: true,
+    external: ['react', 'react-dom'],
+})