@tradly/asset 1.0.2 → 1.0.4

package/src/components/Pagination.jsx

@@ -1,175 +0,0 @@
-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

@@ -1,121 +0,0 @@
-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/services/apiService.js

@@ -1,270 +0,0 @@
-import axios from 'axios'
-
-/**
- * Get the API base URL based on environment
- * @returns {string} API base URL
- */
-const getApiBaseUrl = (environment) => {
-  // Check if environment includes 'dev' (case insensitive)
-  const isDev = environment && String(environment).toLowerCase().includes('dev')
-  return isDev ? 'https://api.dev.tradly.app' : 'https://api.tradly.app'
-}
-
-/**
- * API Service for Media Gallery
- * Handles all API calls with Tradly authentication
- * Includes full upload logic using direct API call to S3 signed URL endpoint
- */
-class MediaApiService {
-  constructor(config = {}) {
-    this.authKey = config.authKey || ''
-    // Auto-detect API base URL from environment, or use provided one
-    const environment =
-      config.environment || (typeof process !== 'undefined' && process.env?.ENVIRONMENT) || ''
-    this.apiBaseUrl = config.apiBaseUrl || getApiBaseUrl(environment)
-    this.bearerToken = config.bearerToken || '' // Bearer token for Authorization header
-    this.onError = config.onError || null
-  }
-
-  /**
-   * Set authentication key
-   */
-  setAuthKey(authKey) {
-    this.authKey = authKey
-  }
-
-  /**
-   * Set API base URL (used for all API calls)
-   */
-  setApiBaseUrl(apiBaseUrl) {
-    this.apiBaseUrl = apiBaseUrl
-  }
-
-  /**
-   * Set Bearer token for Authorization header
-   */
-  setBearerToken(bearerToken) {
-    this.bearerToken = bearerToken
-  }
-
-  /**
-   * Make API call with authentication to Tradly API
-   */
-  async apiCall({ method, path, data, params, setISLoading, isLoading }) {
-    if (setISLoading) setISLoading(true)
-
-    try {
-      const headers = {
-        'Content-Type': 'application/json',
-      }
-
-      // Add auth key to headers if provided (X-Auth-Key header)
-      if (this.authKey) {
-        headers['X-Auth-Key'] = this.authKey
-      }
-
-      // Add Bearer token if provided
-      if (this.bearerToken) {
-        headers['Authorization'] = `Bearer ${this.bearerToken}`
-      }
-
-      const response = await axios({
-        method,
-        url: `${this.apiBaseUrl}${path}`,
-        headers,
-        data,
-        params,
-      })
-
-      if (setISLoading) setISLoading(false)
-      return response.data
-    } catch (error) {
-      if (setISLoading) setISLoading(false)
-
-      if (this.onError) {
-        this.onError(error)
-      }
-
-      throw error
-    }
-  }
-
-  /**
-   * Fetch media items from Tradly API
-   * GET /v1/media?page=1&parent=0&mime_type=...
-   */
-  async fetchMedia({ mimeTypes, page = 1, parent = 0, setISLoading, isLoading }) {
-    const params = {
-      page,
-      parent,
-    }
-
-    // Add mime_type to params if provided
-    if (mimeTypes) {
-      const mimeTypeParam = Array.isArray(mimeTypes) ? mimeTypes.join(',') : mimeTypes
-      params.mime_type = mimeTypeParam
-    }
-
-    return this.apiCall({
-      method: 'GET',
-      path: '/v1/media',
-      params,
-      setISLoading,
-      isLoading,
-    })
-  }
-
-  /**
-   * Get S3 signed upload URLs from API
-   */
-  async getS3SignedUrls(files, authKey) {
-    const auth_key = authKey || this.authKey
-
-    if (!auth_key) {
-      throw new Error('Authentication key is required for upload')
-    }
-
-    if (!this.apiBaseUrl) {
-      throw new Error(
-        'API base URL is required. The package automatically detects it from ENVIRONMENT, or you can set apiBaseUrl in config: new MediaApiService({ apiBaseUrl: "https://api.tradly.app" })'
-      )
-    }
-
-    // Prepare file data
-    const fileData = files.map((file) => ({
-      name: file.name.replace(/\s/g, '-'),
-      type: file.type,
-    }))
-
-    // Prepare headers
-    const headers = {
-      'Content-Type': 'application/json',
-      'X-Auth-Key': auth_key, // Capital X for Tradly API
-    }
-
-    // Add Bearer token if provided
-    if (this.bearerToken) {
-      headers['Authorization'] = `Bearer ${this.bearerToken}`
-    }
-
-    try {
-      const response = await axios({
-        method: 'POST',
-        url: `${this.apiBaseUrl}/v1/utils/S3signedUploadURL`,
-        headers,
-        data: { files: fileData },
-      })
-
-      if (response.data.error) {
-        throw new Error(response.data.error)
-      }
-
-      return response.data.result || response.data.data?.result || response.data
-    } catch (error) {
-      console.error('Error getting S3 signed URLs:', error)
-      if (this.onError) {
-        this.onError(error)
-      }
-      throw error
-    }
-  }
-
-  /**
-   * Upload media files using direct API call
-   * This includes the full upload logic: get S3 signed URLs -> upload to S3 -> save to media API
-   */
-  async uploadMedia(files, authKey) {
-    const auth_key = authKey || this.authKey
-
-    if (!auth_key) {
-      throw new Error('Authentication key is required for upload')
-    }
-
-    let all_files_uri = []
-    let upload_files = []
-    let upload_full_files = []
-
-    // Process all files
-    for (let i = 0; i < files.length; i++) {
-      const element = files[i]
-
-      // Check if file already has a path (from previous upload)
-      if (element.full_file === null && element.path) {
-        all_files_uri.push(element.path)
-      } else {
-        // Prepare file data for upload
-        let file_data = {
-          name: element.name.replace(/\s/g, '-'),
-          type: element.type,
-        }
-
-        upload_files.push(file_data)
-        upload_full_files.push(element)
-      }
-
-      // Upload files when we've processed all files
-      if (files.length === i + 1 && upload_files.length > 0) {
-        try {
-          // Step 1: Get signed URLs from API
-          const responseFiles = await this.getS3SignedUrls(upload_full_files, auth_key)
-
-          // Step 2: Upload each file to S3
-          for (let index = 0; index < responseFiles.length; index++) {
-            const path = responseFiles[index].signedUrl
-            const fileURI = responseFiles[index].fileUri
-
-            try {
-              const res = await fetch(path, {
-                method: 'PUT',
-                headers: {
-                  ContentType: upload_files[index].type,
-                },
-                body: upload_full_files[index],
-              })
-
-              if (res.ok) {
-                all_files_uri.push(fileURI)
-              } else {
-                console.error(`Failed to upload file ${index + 1}`)
-              }
-            } catch (error) {
-              console.error(`Error uploading file ${index + 1}:`, error)
-            }
-          }
-
-          // Step 3: Save media metadata to Tradly API
-          if (all_files_uri.length > 0) {
-            const mediaData = all_files_uri.map((url, index) => {
-              const originalFile = upload_full_files[index]
-              return {
-                type: 1,
-                parent: 0,
-                url: url,
-                name: originalFile.name.replace(/\s/g, '-'),
-                mime_type: originalFile.type,
-              }
-            })
-
-            // Save to media API - POST /v1/media with { media: [...] }
-            await this.apiCall({
-              method: 'POST',
-              path: '/v1/media',
-              data: { media: mediaData },
-            })
-          }
-        } catch (error) {
-          console.error('Upload error:', error)
-          if (this.onError) {
-            this.onError(error)
-          }
-          throw error
-        }
-      }
-    }
-
-    // Return all uploaded file URIs
-    return all_files_uri
-  }
-}
-
-export default MediaApiService