@tradly/asset 1.0.0

package/src/components/MediaTab.jsx

@@ -0,0 +1,152 @@
+import React, { useState } from 'react'
+import { Tab } from '@headlessui/react'
+import ImagesGallery from './MediaGallery'
+import VideosGallery from './VideosGallery'
+
+function classNames(...classes) {
+  return classes.filter(Boolean).join(' ')
+}
+
+const MediaTab = ({
+  imagePopup,
+  current_data,
+  update_data,
+  closePopup,
+  options,
+  apiService,
+  onError,
+  // Styling props
+  className,
+  tabListClassName,
+  tabButtonClassName,
+  tabButtonActiveClassName,
+  tabButtonInactiveClassName,
+  tabPanelClassName,
+  // Pass-through styling props for gallery components
+  gridClassName,
+  imageItemClassName,
+  videoItemClassName,
+  paginationContainerClassName,
+}) => {
+  const [selectedIndex, setSelectedIndex] = useState(0)
+
+  // Default classes with customization support
+  const defaultTabGroupClass = 'h-[520px] overflow-y-auto scrollbar-none'
+  const defaultTabListClass = 'sticky top-0 z-30 bg-white w-full flex border-b-2 border-gray-200'
+  const defaultTabButtonBaseClass =
+    'rounded-lg py-2.5 px-8 text-base font-medium leading-5 flex flex-col md:flex-row items-center justify-center gap-3 ring-0 focus:outline-none'
+  const defaultTabButtonActiveClass =
+    'relative text-primary after:content-[""] after:h-1 after:w-full after:block after:absolute after:-bottom-0.5 after:bg-primary after:rounded-card'
+  const defaultTabButtonInactiveClass = 'text-[#4F4F4F]'
+  const defaultTabPanelClass = 'h-full py-4 relative'
+
+  return (
+    <Tab.Group
+      as="div"
+      key={selectedIndex}
+      className={className || defaultTabGroupClass}
+      onChange={setSelectedIndex}
+      selectedIndex={selectedIndex}
+    >
+      <Tab.List className={tabListClassName || defaultTabListClass}>
+        {options.includes('image') && (
+          <Tab
+            as="p"
+            id="image-tab-button"
+            className={({ selected }) =>
+              classNames(
+                tabButtonClassName || defaultTabButtonBaseClass,
+                selected
+                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
+                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
+              )
+            }
+          >
+            <span>Images</span>
+          </Tab>
+        )}
+        {options.includes('video') && (
+          <Tab
+            as="p"
+            id="video-tab-button"
+            className={({ selected }) =>
+              classNames(
+                tabButtonClassName || defaultTabButtonBaseClass,
+                selected
+                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
+                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
+              )
+            }
+          >
+            <span>Videos</span>
+          </Tab>
+        )}
+        {options.includes('file') && (
+          <Tab
+            as="p"
+            id="file-tab-button"
+            className={({ selected }) =>
+              classNames(
+                tabButtonClassName || defaultTabButtonBaseClass,
+                selected
+                  ? tabButtonActiveClassName || defaultTabButtonActiveClass
+                  : tabButtonInactiveClassName || defaultTabButtonInactiveClass
+              )
+            }
+          >
+            <span>Files</span>
+          </Tab>
+        )}
+      </Tab.List>
+      <Tab.Panels className="h-full" selectedIndex={selectedIndex}>
+        {options.includes('image') && (
+          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
+            <ImagesGallery
+              imagePopup={imagePopup}
+              update_data={update_data}
+              current_data={current_data}
+              closePopup={closePopup}
+              apiService={apiService}
+              onError={onError}
+              gridClassName={gridClassName}
+              imageItemClassName={imageItemClassName}
+              paginationContainerClassName={paginationContainerClassName}
+            />
+          </Tab.Panel>
+        )}
+        {options.includes('video') && (
+          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
+            <VideosGallery
+              imagePopup={imagePopup}
+              update_data={update_data}
+              current_data={current_data}
+              closePopup={closePopup}
+              apiService={apiService}
+              onError={onError}
+              gridClassName={gridClassName}
+              videoItemClassName={videoItemClassName}
+              paginationContainerClassName={paginationContainerClassName}
+            />
+          </Tab.Panel>
+        )}
+        {options.includes('file') && (
+          <Tab.Panel className={tabPanelClassName || defaultTabPanelClass}>
+            <ImagesGallery
+              imagePopup={imagePopup}
+              update_data={update_data}
+              current_data={current_data}
+              closePopup={closePopup}
+              apiService={apiService}
+              onError={onError}
+              gridClassName={gridClassName}
+              imageItemClassName={imageItemClassName}
+              paginationContainerClassName={paginationContainerClassName}
+            />
+          </Tab.Panel>
+        )}
+      </Tab.Panels>
+    </Tab.Group>
+  )
+}
+
+export default MediaTab

package/src/components/Pagination.jsx

@@ -0,0 +1,175 @@
+import React from 'react'
+
+const Pagination = ({
+  className,
+  nextPage,
+  current_page,
+  pageCount,
+  // Styling props
+  navClassName,
+  previousButtonClassName,
+  nextButtonClassName,
+  pageButtonClassName,
+  pageButtonActiveClassName,
+  ellipsisClassName,
+}) => {
+  const totalPages = Math.ceil(pageCount) || 1
+  const currentPage = current_page || 1
+
+  // Generate page numbers to display
+  const getPageNumbers = () => {
+    const pages = []
+    const maxVisible = 5
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2))
+    let endPage = Math.min(totalPages, startPage + maxVisible - 1)
+
+    if (endPage - startPage < maxVisible - 1) {
+      startPage = Math.max(1, endPage - maxVisible + 1)
+    }
+
+    // Add first page and ellipsis
+    if (startPage > 1) {
+      pages.push(1)
+      if (startPage > 2) {
+        pages.push('...')
+      }
+    }
+
+    // Add visible pages
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(i)
+    }
+
+    // Add ellipsis and last page
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pages.push('...')
+      }
+      pages.push(totalPages)
+    }
+
+    return pages
+  }
+
+  const handlePageClick = (page) => {
+    if (page !== currentPage && page >= 1 && page <= totalPages) {
+      nextPage(page)
+    }
+  }
+
+  const handlePrevious = () => {
+    if (currentPage > 1) {
+      nextPage(currentPage - 1)
+    }
+  }
+
+  const handleNext = () => {
+    if (currentPage < totalPages) {
+      nextPage(currentPage + 1)
+    }
+  }
+
+  if (totalPages <= 1) return null
+
+  const pageNumbers = getPageNumbers()
+
+  // Default classes with customization support
+  const defaultContainerClass = 'flex justify-center'
+  const defaultNavClass =
+    'relative z-0 inline-flex flex-wrap justify-center rounded-md shadow-sm -space-x-px'
+  const defaultPreviousButtonClass =
+    'relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
+  const defaultNextButtonClass =
+    'relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50'
+  const defaultPageButtonClass =
+    'relative inline-flex items-center px-4 py-2 border bg-white border-gray-300 text-gray-500 hover:bg-gray-50 text-sm font-medium'
+  const defaultPageButtonActiveClass =
+    'z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-md font-semibold'
+  const defaultEllipsisClass =
+    'relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700'
+
+  return (
+    <div className={className || defaultContainerClass}>
+      <nav className={navClassName || defaultNavClass}>
+        {/* Previous Button */}
+        <button
+          onClick={handlePrevious}
+          disabled={currentPage === 1}
+          className={`${previousButtonClassName || defaultPreviousButtonClass} ${
+            currentPage === 1 ? 'opacity-50 cursor-not-allowed' : ''
+          }`}
+          aria-label="Previous page"
+        >
+          <svg
+            className="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+
+        {/* Page Numbers */}
+        {pageNumbers.map((page, index) => {
+          if (page === '...') {
+            return (
+              <span key={`ellipsis-${index}`} className={ellipsisClassName || defaultEllipsisClass}>
+                ...
+              </span>
+            )
+          }
+
+          const isActive = page === currentPage
+
+          return (
+            <button
+              key={page}
+              onClick={() => handlePageClick(page)}
+              className={
+                isActive
+                  ? pageButtonActiveClassName || defaultPageButtonActiveClass
+                  : pageButtonClassName || defaultPageButtonClass
+              }
+              aria-label={`Page ${page}`}
+              aria-current={isActive ? 'page' : undefined}
+            >
+              {page}
+            </button>
+          )
+        })}
+
+        {/* Next Button */}
+        <button
+          onClick={handleNext}
+          disabled={currentPage === totalPages}
+          className={`${nextButtonClassName || defaultNextButtonClass} ${
+            currentPage === totalPages ? 'opacity-50 cursor-not-allowed' : ''
+          }`}
+          aria-label="Next page"
+        >
+          <svg
+            className="h-5 w-5"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fillRule="evenodd"
+              d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      </nav>
+    </div>
+  )
+}
+
+export default Pagination

package/src/components/VideosGallery.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from 'react'
+import FileUpload from './FileUpload'
+import ImagesSkeleton from './ImagesSkeleton'
+import Pagination from './Pagination'
+
+const VIDEO_MIME_TYPES = [
+  'video/mp4',
+  'video/quicktime',
+  'video/x-ms-wmv',
+  'video/h265',
+  'video/hevc',
+  'video/webm',
+]
+
+const VideosGallery = ({
+  update_data,
+  closePopup,
+  apiService,
+  onError,
+  // Styling props
+  className,
+  gridClassName,
+  videoItemClassName,
+  paginationContainerClassName,
+}) => {
+  const [videos, setVideos] = useState([])
+  const [total_count, setTotalCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [isLoading, setISLoading] = useState(false)
+
+  // Fetch videos
+  useEffect(() => {
+    loadMedia()
+  }, [])
+
+  const loadMedia = async (page_number = 1) => {
+    try {
+      const response = await apiService.fetchMedia({
+        mimeTypes: VIDEO_MIME_TYPES,
+        page: page_number,
+        setISLoading,
+        isLoading,
+      })
+
+      // Handle different response formats
+      // Response might be: { media: [...], count: ... } or { data: { media: [...], count: ... } } or directly [...]
+      const mediaData = response?.media || response?.data?.media || response?.data || response || []
+      const count = response?.count || response?.data?.count || response?.total || 0
+
+      setVideos(Array.isArray(mediaData) ? mediaData : [])
+      setTotalCount(count)
+      setCurrentPage(page_number)
+    } catch (error) {
+      console.error('Error loading videos:', error)
+      if (onError) {
+        onError(error)
+      }
+    }
+  }
+
+  const handleVideoClick = (video) => {
+    if (update_data) {
+      update_data(video.url || video)
+    }
+    if (closePopup) {
+      closePopup()
+    }
+  }
+
+  // Default classes with customization support
+  const defaultContainerClass = 'h-full flex flex-col justify-between'
+  const defaultGridClass = 'grid grid-cols-[repeat(auto-fill,minmax(calc(180px),1fr))] gap-5'
+  const defaultVideoItemClass =
+    'cursor-pointer w-full h-40 object-contain overflow-hidden bg-white rounded-md shadow-md hover:shadow-lg transition-shadow'
+  const defaultPaginationContainerClass = 'mb-4 bg-gray-100/90 p-4 sticky bottom-0'
+
+  return (
+    <div className={className || defaultContainerClass}>
+      <div className={gridClassName || defaultGridClass}>
+        <FileUpload
+          loadMedia={loadMedia}
+          accept="video/*"
+          title="Add Video"
+          apiService={apiService}
+          onUploadError={onError}
+        />
+
+        {isLoading ? (
+          <ImagesSkeleton />
+        ) : (
+          videos?.map((video, index) => {
+            const videoUrl = typeof video === 'string' ? video : video.url
+            const videoKey = video.id || video.url || index
+
+            return (
+              <video
+                key={videoKey}
+                onClick={() => handleVideoClick(video)}
+                className={videoItemClassName || defaultVideoItemClass}
+                controls
+                src={videoUrl}
+              />
+            )
+          })
+        )}
+      </div>
+
+      <div className={paginationContainerClassName || defaultPaginationContainerClass}>
+        {total_count > 0 && (
+          <Pagination
+            nextPage={(value) => loadMedia(value)}
+            pageCount={Math.ceil(total_count / 30)}
+            current_page={currentPage}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default VideosGallery

package/src/index.js

@@ -0,0 +1,25 @@
+/**
+ * @tradly/media-gallery
+ *
+ * A reusable media gallery component for uploading and selecting
+ * images, videos, and files with Tradly authentication
+ */
+
+import MediaPopup from './components/MediaPopup'
+import MediaTab from './components/MediaTab'
+import ImagesGallery from './components/MediaGallery'
+import VideosGallery from './components/VideosGallery'
+import FileUpload from './components/FileUpload'
+import MediaApiService from './services/apiService'
+
+// Export main component
+export { MediaPopup }
+
+// Export sub-components for advanced usage
+export { MediaTab, ImagesGallery, VideosGallery, FileUpload }
+
+// Export API service
+export { MediaApiService }
+
+// Export default as MediaPopup for convenience
+export default MediaPopup