@rubixstudios/payload-media 1.2.3 → 2.0.0

package/dist/components/search-drawer/index.js

@@ -1,6 +1,6 @@
 'use client';
-import React, { useCallback, useEffect, useState } from 'react';
-import { Pagination, SearchFilter, Select, toast } from '@payloadcms/ui';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import { ListSearchFilter, Pagination, Select, toast } from '@payloadcms/ui';
 import { MediaOptions } from '../../types.js';
 import { fetchCache } from '../../utils/fetchCache.js';
 import { PexelsFilters } from './filters/pexels.js';
@@ -12,16 +12,17 @@ import './style.css';
 const baseClass = 'search-media';
 export const SearchDrawer = (props)=>{
     const { serverURL, api, onSelect } = props;
-    const [selectedProvider, setSelectedProvider] = useState(null);
+    const [provider, setProvider] = useState(null);
     const [options, setOptions] = useState([]);
-    const [mediaType, setMediaType] = useState('image');
     const [media, setMedia] = useState(null);
+    const [mediaType, setMediaType] = useState('image');
     const [filters, setFilters] = useState(null);
     const [currentPage, setCurrentPage] = useState(null);
     const [totalPages, setTotalPages] = useState(null);
     const [loading, setLoading] = useState(true);
     const [value, setValue] = useState('');
-    const defaultError = useCallback(()=>{
+    const mediaOptions = MediaOptions.filter((option)=>filters?.provider === 'unsplash' ? option.value === 'image' : true);
+    const error = useCallback(()=>{
         toast.error('Something went wrong.');
     }, []);
     const resetMedia = useCallback(()=>{
@@ -51,17 +52,17 @@ export const SearchDrawer = (props)=>{
                 provider: initial.value,
                 options: {}
             });
-            setSelectedProvider(initial);
+            setProvider(initial);
         } catch  {
             setLoading(false);
-            defaultError();
+            error();
         }
     }, [
         serverURL,
         api,
-        defaultError
+        error
     ]);
-    const buildFeatured = useCallback(()=>{
+    const buildFeatures = useCallback(()=>{
         if (!filters || !mediaType) return '';
         const params = new URLSearchParams();
         switch(filters.provider){
@@ -99,11 +100,11 @@ export const SearchDrawer = (props)=>{
         filters,
         mediaType
     ]);
-    const getFeatured = useCallback(async ()=>{
-        if (!selectedProvider || !filters || !mediaType) return;
+    const getFeatures = useCallback(async ()=>{
+        if (!provider || !filters || !mediaType) return;
         try {
             setLoading(true);
-            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider.value}/featured${buildFeatured()}`);
+            const json = await fetchCache(`${serverURL}${api}/providers/${provider.value}/featured${buildFeatures()}`);
             if (!json) return;
             if (json.error) {
                 toast.error(json.error);
@@ -111,18 +112,18 @@ export const SearchDrawer = (props)=>{
             }
             setMedia(json.data.images);
         } catch  {
-            defaultError();
+            error();
         } finally{
             setLoading(false);
         }
     }, [
         serverURL,
         api,
-        selectedProvider,
+        provider,
         filters,
-        buildFeatured,
+        buildFeatures,
         mediaType,
-        defaultError
+        error
     ]);
     const buildQuery = useCallback((page = 1)=>{
         if (!filters || !mediaType) return '';
@@ -167,38 +168,39 @@ export const SearchDrawer = (props)=>{
     const getMedia = useCallback(async (page = 1)=>{
         try {
             setLoading(true);
-            const json = await fetchCache(`${serverURL}${api}/providers/${selectedProvider?.value}/search?${buildQuery(page)}`);
+            const json = await fetchCache(`${serverURL}${api}/providers/${provider?.value}/search?${buildQuery(page)}`);
             if (json.error) return toast.error(json.error);
             setMedia(json.data.images);
             setTotalPages(json.data.totalPages);
             setCurrentPage(page);
         } catch  {
-            defaultError();
+            error();
         } finally{
             setLoading(false);
         }
     }, [
         serverURL,
         api,
-        selectedProvider?.value,
-        defaultError,
+        provider?.value,
+        error,
         buildQuery
     ]);
     const selectMedia = async (url, download)=>{
         onSelect(url);
         if (!download) return;
         try {
-            await fetch(`${serverURL}${api}/providers/${selectedProvider?.value}/track-download?url=${encodeURIComponent(download)}`);
+            await fetch(`${serverURL}${api}/providers/${provider?.value}/track-download?url=${encodeURIComponent(download)}`);
         } catch  {
             return null;
         }
     };
-    const selectFilter = useCallback((select)=>{
+    const selectFilter = useCallback((value)=>{
+        const select = value;
         setFilters({
             provider: select.value,
             options: {}
         });
-        setSelectedProvider(select);
+        setProvider(select);
         if (select.value === 'unsplash') {
             setMediaType('image');
         }
@@ -206,50 +208,64 @@ export const SearchDrawer = (props)=>{
     }, [
         resetMedia
     ]);
+    const selectType = useCallback((option)=>{
+        const value = option?.value;
+        setMediaType(value);
+        resetMedia();
+    }, [
+        resetMedia
+    ]);
     const changeFilters = useCallback((search)=>{
         setValue(search);
         resetMedia();
     }, [
         resetMedia
     ]);
+    const renderMedia = (data)=>/*#__PURE__*/ React.createElement(Fragment, {
+            key: data.id
+        }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
+            baseClass: baseClass,
+            data: data,
+            onSelect: selectMedia
+        }) : /*#__PURE__*/ React.createElement(ImageCard, {
+            baseClass: baseClass,
+            data: data,
+            onSelect: selectMedia
+        }));
     useEffect(()=>{
         void getOptions();
     }, [
         getOptions
     ]);
     useEffect(()=>{
-        if (!selectedProvider?.value || !filters || !mediaType) return;
+        if (!provider?.value || !filters || !mediaType) return;
         if (value.trim().length > 0) {
             void getMedia(1);
         } else {
-            void getFeatured();
+            void getFeatures();
         }
     }, [
-        selectedProvider?.value,
+        provider?.value,
         filters,
         value,
         mediaType,
         getMedia,
-        getFeatured
+        getFeatures
     ]);
     return /*#__PURE__*/ React.createElement("div", {
         className: baseClass
     }, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__fields`
-    }, /*#__PURE__*/ React.createElement(SearchFilter, {
-        handleChange: changeFilters,
-        label: ""
+    }, /*#__PURE__*/ React.createElement(ListSearchFilter, {
+        label: "Search media",
+        onSearchChange: changeFilters
     }), /*#__PURE__*/ React.createElement(Select, {
         className: `${baseClass}__mediaToggle`,
         isClearable: false,
         isCreatable: false,
         isSearchable: false,
-        onChange: (opt)=>{
-            const val = opt?.value;
-            setMediaType(val);
-            resetMedia();
-        },
-        options: MediaOptions.filter((option)=>filters?.provider === 'unsplash' ? option.value === 'image' : true),
+        onChange: selectType,
+        options: mediaOptions,
         value: {
             label: mediaType === 'image' ? 'Images' : 'Videos',
             value: mediaType
@@ -259,9 +275,9 @@ export const SearchDrawer = (props)=>{
         isClearable: false,
         isCreatable: false,
         isSearchable: false,
-        onChange: (value)=>selectFilter(value),
+        onChange: selectFilter,
         options: options,
-        value: selectedProvider
+        value: provider
     })), filters?.provider === 'pexels' && /*#__PURE__*/ React.createElement(PexelsFilters, {
         baseClass: baseClass,
         filters: filters,
@@ -282,24 +298,14 @@ export const SearchDrawer = (props)=>{
         className: `${baseClass}__noResults`
     }, "No media found"), !loading && media && media?.length > 0 && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__results`
-    }, media.map((data)=>/*#__PURE__*/ React.createElement(React.Fragment, {
-            key: data.id
-        }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
-            baseClass: baseClass,
-            data: data,
-            onSelect: selectMedia
-        }) : /*#__PURE__*/ React.createElement(ImageCard, {
-            baseClass: baseClass,
-            data: data,
-            onSelect: selectMedia
-        })))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
+    }, media.map(renderMedia)), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__pagination`
     }, /*#__PURE__*/ React.createElement(Pagination, {
         hasNextPage: currentPage < totalPages,
         hasPrevPage: currentPage > 1,
         nextPage: currentPage < totalPages ? currentPage + 1 : undefined,
         numberOfNeighbors: 3,
-        onChange: (page)=>getMedia(page),
+        onChange: getMedia,
         page: currentPage,
         prevPage: currentPage > 1 ? currentPage - 1 : undefined,
         totalPages: totalPages

package/dist/components/search-drawer/media/image.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type ProviderResult } from '../../../types.js';
-type ImageCardProps = {
+type Props = {
     data: ProviderResult;
     baseClass: string;
     onSelect: (url: string, download?: string) => void;
 };
-export declare const ImageCard: ({ data, baseClass, onSelect }: ImageCardProps) => React.JSX.Element;
+export declare const ImageCard: ({ data, baseClass, onSelect }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=image.d.ts.map

package/dist/components/search-drawer/media/image.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA+DtE,CAAA"}
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,KAAK,sBAqE7D,CAAA"}

package/dist/components/search-drawer/media/image.js

@@ -4,8 +4,7 @@ import { HeartIcon } from './heart.js';
 export const ImageCard = ({ data, baseClass, onSelect })=>{
     const [show, setShow] = useState(false);
     return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__card`,
-        key: data.id
+        className: `${baseClass}__card`
     }, /*#__PURE__*/ React.createElement("button", {
         className: `${baseClass}__button`,
         onClick: ()=>onSelect(data.urls.original, data.urls?.downloadLocation),
@@ -21,6 +20,7 @@ export const ImageCard = ({ data, baseClass, onSelect })=>{
     })), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__topOverlay`
     }, data.likes !== undefined && /*#__PURE__*/ React.createElement("button", {
+        "aria-label": `${data.likes} likes`,
         className: `${baseClass}__likes`,
         onBlur: ()=>setShow(false),
         onFocus: ()=>setShow(true),

package/dist/components/search-drawer/media/video.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import { type ProviderResult } from '../../../types.js';
-type VideoCardProps = {
+type Props = {
     data: ProviderResult;
     baseClass: string;
     onSelect: (url: string, download?: string) => void;
 };
-export declare const VideoCard: ({ data, baseClass, onSelect }: VideoCardProps) => React.JSX.Element;
+export declare const VideoCard: ({ data, baseClass, onSelect }: Props) => React.JSX.Element;
 export {};
 //# sourceMappingURL=video.d.ts.map

package/dist/components/search-drawer/media/video.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,cAAc,sBA0EtE,CAAA"}
+{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAGvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAIvD,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CACnD,CAAA;AAED,eAAO,MAAM,SAAS,kCAAmC,KAAK,sBAkF7D,CAAA"}

package/dist/components/search-drawer/media/video.js

@@ -5,8 +5,7 @@ import { PlusIcon } from './plus.js';
 export const VideoCard = ({ data, baseClass, onSelect })=>{
     const [show, setShow] = useState(false);
     return /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__video`,
-        key: data.id
+        className: `${baseClass}__video`
     }, /*#__PURE__*/ React.createElement("video", {
         controls: true,
         poster: data.urls.view,
@@ -37,6 +36,7 @@ export const VideoCard = ({ data, baseClass, onSelect })=>{
     }), data.attribution.name), /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__actions`
     }, data.likes !== undefined && /*#__PURE__*/ React.createElement("button", {
+        "aria-label": `${data.likes} likes`,
         className: `${baseClass}__likes`,
         onBlur: ()=>setShow(false),
         onFocus: ()=>setShow(true),
@@ -48,10 +48,12 @@ export const VideoCard = ({ data, baseClass, onSelect })=>{
         position: "bottom",
         show: show
     }, data.likes, " likes")), /*#__PURE__*/ React.createElement("button", {
+        "aria-label": "Select video",
         className: `${baseClass}__add`,
-        onClick: ()=>onSelect?.(data.urls.original, data.urls.download),
+        onClick: ()=>onSelect(data.urls.original, data.urls.download),
         type: "button"
     }, /*#__PURE__*/ React.createElement(PlusIcon, null)), /*#__PURE__*/ React.createElement("a", {
+        "aria-label": "Open video download",
         className: `${baseClass}__download`,
         href: data.urls.download,
         rel: "noopener noreferrer",

package/dist/components/search-drawer/style.css

@@ -1 +1 @@
-.drawer__content-children{display:flex;flex-flow:column nowrap}.search-media{width:100%;display:flex;flex-flow:column nowrap;flex:1;padding:2rem 0}.search-media__fields{display:flex;gap:1.5rem}.search-media__fields .search-filter{flex:1}.search-media__fields .search-filter__input{height:100%;padding:0 1rem}.search-media__fields .rs__indicators{margin-left:.5rem}.search-media__filters{display:flex;margin-top:15px;gap:16px}.search-media__filters .react-select{min-width:130px}.search-media__results{margin-top:3rem;column-gap:16px;column-count:5}.search-media__card{break-inside:avoid;margin-bottom:16px}.search-media__video{break-inside:avoid;margin-bottom:16px}.search-media__results>div{width:100%}.search-media__results img{max-width:100%;width:100%}.search-media__pagination{margin-top:auto;padding-top:2rem;display:flex;justify-content:center}.search-media__loading,.search-media__noResults{display:flex;justify-content:center;align-items:center;flex:1}.search-media__card{position:relative;display:block;overflow:hidden}.search-media__video{position:relative;display:block;overflow:hidden}.search-media__card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease;pointer-events:none}.search-media__card:hover::after{opacity:1}.search-media__button{appearance:none;border:none;background-color:transparent;display:block;margin:0;padding:0;cursor:pointer;width:100%}.search-media__button img{display:block;width:100%;height:auto}.search-media__button svg{color:#fff}.search-media__bottomOverlay,.search-media__topOverlay{position:absolute;z-index:1;display:flex;opacity:0;transition:opacity .4s ease;max-width:calc(100% - 20px - 1rem)}.search-media__card .search-media__topOverlay{right:1rem;top:.8rem}.search-media__card .search-media__bottomOverlay{left:1rem;bottom:.8rem}.search-media__card:hover .search-media__bottomOverlay,.search-media__card:hover .search-media__topOverlay{opacity:1;pointer-events:auto}.search-media__video .search-media__topOverlay{top:.8rem;left:1rem;right:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.search-media__video:hover .search-media__bottomOverlay,.search-media__video:hover .search-media__topOverlay{opacity:1;pointer-events:auto}.search-media__actions{display:flex;align-items:stretch;position:relative}.search-media__likes{cursor:pointer;background:#fff;border-radius:6px;border:0;margin-right:10px;padding:7px;font-size:1em;line-height:1}.search-media__likes svg{width:14px}.search-media__likes:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}.search-media__likes .tooltip{left:14px}.search-media__add{cursor:pointer;background:#fff;border-radius:6px;border:0;width:28px;margin-right:10px;padding:2px;font-size:1em;line-height:1}.search-media__add svg{pointer-events:none}.search-media__add:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}.search-media__download{background:#fff;border-radius:6px;padding:4px;font-size:1em;line-height:1;width:28px;text-align:center}.search-media__download svg{pointer-events:none}a.search-media__download:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}.search-media__add,.search-media__download,.search-media__likes{display:flex;align-items:center;justify-content:center}img.search-media__avatar{max-width:24px;max-height:24px;margin-right:10px;border-radius:100%}.search-media__avatarFallback{width:24px;height:24px;margin-right:10px;border-radius:100%;background:rgba(255 255 255 / 25%)}.search-media__attribution{display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:1rem;font-weight:600;line-height:1;text-decoration:none;overflow:hidden}.search-media__attribution:hover{text-decoration:underline}.search-media__image{border-radius:4px;object-fit:cover;width:100%}.search-media__options{min-width:140px}.search-media__provider{display:flex;justify-content:center;padding-top:3rem;margin-top:auto;margin-bottom:30px}@media (max-width:1600px){.search-media__results{column-count:5}}@media (max-width:1400px){.search-media__results{column-count:4}}@media (max-width:1200px){.search-media__results{column-count:3}}@media (max-width:900px){.search-media__results{column-count:2}.search-media__filters{display:grid}}@media (max-width:600px){.search-media__results{column-count:1}.search-media__filters{display:grid}}
+.drawer__content-children{display:flex;flex-flow:column nowrap}.search-media{display:flex;flex-flow:column nowrap;flex:1;width:100%;padding:2rem}.search-media__fields{display:flex;width:100%;align-items:stretch;gap:1.5rem}.search-media__fields .search-filter{flex:1 1 0;min-width:0}.search-media__fields .search-filter__input{width:100%;height:100%;box-sizing:border-box;padding:0 1rem}.search-media__options{min-width:140px}.search-media__fields .search-media__mediaToggle,.search-media__fields .search-media__options{flex:0 0 160px;min-width:0}.search-media__fields .rs__indicators{margin-left:.5rem}.search-media__filters{display:flex;margin-top:15px;gap:16px}.search-media__filters .react-select{min-width:130px}.search-media__results{margin-top:3rem;column-gap:16px;column-count:3}.search-media__results>div{width:100%}.search-media__results img{max-width:100%;width:100%}.search-media__card,.search-media__video{position:relative;display:block;overflow:hidden;break-inside:avoid;margin-bottom:16px}.search-media__image{width:100%;border-radius:4px;object-fit:cover}.search-media__card::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);opacity:0;transition:opacity .2s ease;pointer-events:none}.search-media__card:hover::after{opacity:1}.search-media__bottomOverlay,.search-media__topOverlay{position:absolute;z-index:1;display:flex;opacity:0;transition:opacity .4s ease;max-width:calc(100% - 20px - 1rem)}.search-media__card .search-media__topOverlay{right:1rem;top:.8rem}.search-media__card .search-media__bottomOverlay{left:1rem;bottom:.8rem}.search-media__video .search-media__topOverlay{top:.8rem;left:1rem;right:1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.search-media__card:hover .search-media__bottomOverlay,.search-media__card:hover .search-media__topOverlay,.search-media__video:hover .search-media__bottomOverlay,.search-media__video:hover .search-media__topOverlay{opacity:1;pointer-events:auto}.search-media__button{appearance:none;display:block;width:100%;margin:0;padding:0;border:none;background-color:transparent;cursor:pointer}.search-media__button img{display:block;width:100%;height:auto}.search-media__button svg{color:#fff}.search-media__actions{display:flex;align-items:stretch;position:relative}.search-media__add,.search-media__download,.search-media__likes{display:flex;flex:0 0 28px;align-items:center;justify-content:center;width:28px;height:28px;box-sizing:border-box;background:#fff;border-radius:6px;font-size:1em;line-height:1}.search-media__add,.search-media__likes{cursor:pointer;border:0;margin-right:10px}.search-media__likes{padding:7px}.search-media__likes svg{width:14px;height:14px}.search-media__likes .tooltip{left:14px}.search-media__add{padding:2px}.search-media__download{padding:4px;text-align:center}.search-media__add svg,.search-media__download svg{pointer-events:none}.search-media__add:hover,.search-media__likes:hover,a.search-media__download:hover{background:rgb(255 255 255 / 80%);transition:background-color .4s ease}img.search-media__avatar{max-width:24px;max-height:24px;margin-right:10px;border-radius:100%}.search-media__avatarFallback{width:24px;height:24px;margin-right:10px;border-radius:100%;background:rgba(255 255 255 / 25%)}.search-media__attribution{display:flex;align-items:center;white-space:nowrap;text-overflow:ellipsis;color:#fff;font-size:1rem;font-weight:600;line-height:1;text-decoration:none;overflow:hidden}.search-media__attribution:hover{text-decoration:underline}.search-media__pagination{display:flex;justify-content:center;margin-top:auto;padding-top:2rem}.search-media__loading,.search-media__noResults{display:flex;justify-content:center;align-items:center;flex:1}.search-media__provider{display:flex;justify-content:center;padding-top:3rem;margin-top:auto;margin-bottom:30px}@media (max-width:1200px){.search-media__results{column-count:2}}@media (max-width:900px){.search-media__results{column-count:1}.search-media__filters{display:grid}}@media (max-width:767px){.search-media__fields{flex-direction:column;gap:1rem}.search-media__fields .search-input{padding:.5rem 0}.search-media__fields .search-filter,.search-media__fields .search-media__mediaToggle,.search-media__fields .search-media__options{flex:none;width:100%}}

package/dist/endpoints/handler/Pexels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pexels.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pexels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAEhB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEvD,qBAAa,MAAO,SAAQ,QAAQ;IAClC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAsBpE;IAEc,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAyC/F;IAED,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAuBxD;IAEQ,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAiB7D;CACF"}
+{"version":3,"file":"Pexels.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pexels.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,EACjB,KAAK,WAAW,EAEhB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEvD,qBAAa,MAAO,SAAQ,QAAQ;IAClC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAsBpE;IAEc,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,CAyB/F;IAED,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE,CAuBxD;IAEQ,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAiB7D;CACF"}

package/dist/endpoints/handler/Pexels.js

@@ -8,7 +8,7 @@ export class Pexels extends Provider {
     }
     getFetchHeaders() {
         return {
-            Authorization: `${this.getApiKey()}`
+            Authorization: this.getApiKey()
         };
     }
     async getFeatured(filters) {
@@ -31,41 +31,27 @@ export class Pexels extends Provider {
         };
     }
     async getSearch(query, page, filters) {
-        if (filters?.media === 'video') {
-            const params = new URLSearchParams({
-                query: query || 'featured',
-                page: String(page),
-                per_page: String(this.getFetchLimit())
-            });
-            if (filters?.size) params.set('size', filters.size);
-            if (filters?.orientation) params.set('orientation', filters.orientation);
-            const data = await this.fetch('GET', `/videos/search?${params.toString()}`);
-            const totalResults = data.total_results;
-            return {
-                images: this.formatVideoResults(data.videos),
-                totalImages: totalResults,
-                totalPages: Math.min(Math.ceil(totalResults / this.getFetchLimit()), 100)
-            };
-        }
+        const isVideo = filters?.media === 'video';
         const params = new URLSearchParams({
             query: query || 'featured',
             page: String(page),
             per_page: String(this.getFetchLimit())
         });
-        if (filters?.color) params.set('color', filters.color);
+        if (!isVideo && filters?.color) params.set('color', filters.color);
         if (filters?.size) params.set('size', filters.size);
         if (filters?.orientation) params.set('orientation', filters.orientation);
-        const data = await this.fetch('GET', `/v1/search?${params.toString()}`);
+        const endpoint = isVideo ? '/videos/search' : '/v1/search';
+        const data = await this.fetch('GET', `${endpoint}?${params.toString()}`);
         const totalResults = data.total_results;
         return {
-            images: this.formatResults(data.photos),
+            images: isVideo ? this.formatVideoResults(data.videos) : this.formatResults(data.photos),
             totalImages: totalResults,
             totalPages: Math.min(Math.ceil(totalResults / this.getFetchLimit()), 100)
         };
     }
     formatVideoResults(data) {
         return data.map((video)=>{
-            const file = video.video_files.find((f)=>f.quality === 'hd' && f.file_type === 'video/mp4') ?? video.video_files.find((f)=>f.file_type === 'video/mp4');
+            const file = video.video_files.find((file)=>file.quality === 'hd' && file.file_type === 'video/mp4') ?? video.video_files.find((file)=>file.file_type === 'video/mp4');
             return {
                 id: String(video.id),
                 alt: video.url || '',

package/dist/endpoints/handler/Pixabay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pixabay.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pixabay.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEvD,qBAAa,OAAQ,SAAQ,QAAQ;IACnC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CAkCrE;IAEc,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,OAAO,CAAC,CA6ClB;IAED,kBAAkB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAwBzD;IAEQ,aAAa,CAAC,IAAI,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAmB9D;CACF"}
+{"version":3,"file":"Pixabay.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Pixabay.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,aAAa,EAClB,KAAK,YAAY,EAEjB,KAAK,cAAc,EACpB,MAAM,gBAAgB,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEvD,qBAAa,OAAQ,SAAQ,QAAQ;IACnC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC,CAkCrE;IAEc,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,OAAO,CAAC,CA+BlB;IAED,kBAAkB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE,CAwBzD;IAEQ,aAAa,CAAC,IAAI,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE,CAmB9D;CACF"}

package/dist/endpoints/handler/Pixabay.js

@@ -29,23 +29,7 @@ export class Pixabay extends Provider {
         };
     }
     async getSearch(query, page, filters) {
-        if (filters?.media === 'video') {
-            const params = new URLSearchParams({
-                key: this.getApiKey(),
-                q: query || '',
-                page: String(page),
-                per_page: String(this.getFetchLimit())
-            });
-            if (filters?.category) params.set('category', filters.category);
-            if (filters?.order) params.set('order', filters.order);
-            const data = await this.fetch('GET', `/api/videos?${params.toString()}`);
-            const totalHits = data.totalHits;
-            return {
-                images: this.formatVideoResults(data.hits),
-                totalImages: totalHits,
-                totalPages: Math.min(Math.ceil(totalHits / this.getFetchLimit()), 100)
-            };
-        }
+        const isVideo = filters?.media === 'video';
         const params = new URLSearchParams({
             key: this.getApiKey(),
             q: query || '',
@@ -53,14 +37,17 @@ export class Pixabay extends Provider {
             per_page: String(this.getFetchLimit())
         });
         if (filters?.category) params.set('category', filters.category);
-        if (filters?.image_type) params.set('image_type', filters.image_type);
-        if (filters?.colors) params.set('colors', filters.colors);
-        if (filters?.orientation) params.set('orientation', filters.orientation);
         if (filters?.order) params.set('order', filters.order);
-        const data = await this.fetch('GET', `/api?${params.toString()}`);
+        if (!isVideo) {
+            if (filters?.image_type) params.set('image_type', filters.image_type);
+            if (filters?.colors) params.set('colors', filters.colors);
+            if (filters?.orientation) params.set('orientation', filters.orientation);
+        }
+        const endpoint = isVideo ? '/api/videos' : '/api';
+        const data = await this.fetch('GET', `${endpoint}?${params.toString()}`);
         const totalHits = data.totalHits;
         return {
-            images: this.formatResults(data.hits),
+            images: isVideo ? this.formatVideoResults(data.hits) : this.formatResults(data.hits),
             totalImages: totalHits,
             totalPages: Math.min(Math.ceil(totalHits / this.getFetchLimit()), 100)
         };

package/dist/endpoints/handler/Provider.d.ts

@@ -1,14 +1,14 @@
 import { type ProviderResult } from '../../types.js';
 export type Resolver = () => string | undefined;
 export declare class Provider {
-    protected apiKey?: Resolver;
+    protected apiKey?: Resolver | undefined;
     key: string;
     name: string;
     url: string;
-    constructor(key: string, name: string, url: string, apiKey?: Resolver);
-    fetch(method: string, urlPath: string, data?: object): Promise<unknown>;
+    constructor(key: string, name: string, url: string, apiKey?: Resolver | undefined);
     get isConfigured(): boolean;
     protected getApiKey(): string;
+    fetch(method: string, urlPath: string, data?: object): Promise<unknown>;
     getFetchBaseUrl(): string;
     getFetchHeaders(): Record<string, string>;
     getFetchLimit(): number;

package/dist/endpoints/handler/Provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,GAAG,SAAS,CAAA;AAE/C,qBAAa,QAAQ;IACnB,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ,CAAA;IAC3B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IAEX,YAAY,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ,EAKpE;IAEK,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAQ5E;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,SAAS,CAAC,SAAS,IAAI,MAAM,CAQ5B;IAED,eAAe,IAAI,MAAM,CAExB;IAED,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExC;IAED,aAAa,IAAI,MAAM,CAEtB;IAED,WAAW,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAEhE;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEzD;IAED,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,CAE7C;CACF"}
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Provider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAEpD,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,GAAG,SAAS,CAAA;AAE/C,qBAAa,QAAQ;IASjB,SAAS,CAAC,MAAM,CAAC,EAAE,QAAQ;IAR7B,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,EAAE,MAAM,CAAA;IAEX,YACE,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACD,MAAM,CAAC,EAAE,QAAQ,YAAA,EAK5B;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,SAAS,CAAC,SAAS,IAAI,MAAM,CAQ5B;IAEK,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAQ5E;IAED,eAAe,IAAI,MAAM,CAExB;IAED,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAExC;IAED,aAAa,IAAI,MAAM,CAEtB;IAED,WAAW,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC,CAEhE;IAED,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC,CAEzD;IAED,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAEhC;IAED,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE,CAE7C;CACF"}

package/dist/endpoints/handler/Provider.js

@@ -4,20 +4,10 @@ export class Provider {
     name;
     url;
     constructor(key, name, url, apiKey){
+        this.apiKey = apiKey;
         this.key = key;
         this.name = name;
         this.url = url;
-        this.apiKey = apiKey;
-    }
-    async fetch(method, urlPath, data) {
-        const response = await fetch(new URL(urlPath, this.getFetchBaseUrl()), {
-            method,
-            headers: this.getFetchHeaders(),
-            ...data && {
-                body: JSON.stringify(data)
-            }
-        });
-        return response.json();
     }
     get isConfigured() {
         return Boolean(this.apiKey?.());
@@ -29,6 +19,16 @@ export class Provider {
         }
         return key;
     }
+    async fetch(method, urlPath, data) {
+        const response = await fetch(new URL(urlPath, this.getFetchBaseUrl()), {
+            method,
+            headers: this.getFetchHeaders(),
+            ...data && {
+                body: JSON.stringify(data)
+            }
+        });
+        return response.json();
+    }
     getFetchBaseUrl() {
         return '';
     }

package/dist/endpoints/handler/Unsplash.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Unsplash.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Unsplash.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/F,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,qBAAa,QAAS,SAAQ,QAAQ;IACpC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC,CAkCtE;IAEc,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,eAAe,GACxB,OAAO,CAAC,OAAO,CAAC,CAiBlB;IAEQ,aAAa,CAAC,GAAG,EAAE,MAAM,QAIjC;IAEQ,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAoB/D;CACF"}
+{"version":3,"file":"Unsplash.d.ts","sourceRoot":"","sources":["../../../src/endpoints/handler/Unsplash.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/F,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,eAAe,CAAA;AAIvD,qBAAa,QAAS,SAAQ,QAAQ;IACpC,YAAY,MAAM,EAAE,QAAQ,EAE3B;IAEQ,eAAe,IAAI,MAAM,CAEjC;IAEQ,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAEjD;IAEc,WAAW,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC,CA6BtE;IAEc,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,eAAe,GACxB,OAAO,CAAC,OAAO,CAAC,CAqBlB;IAEQ,aAAa,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAMxC;IAEQ,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,CAoB/D;CACF"}

package/dist/endpoints/handler/Unsplash.js

@@ -18,12 +18,8 @@ export class Unsplash extends Provider {
                 per_page: String(this.getFetchLimit()),
                 query: 'featured'
             });
-            if (filters.color) {
-                params.set('color', filters.color);
-            }
-            if (filters.orientation) {
-                params.set('orientation', filters.orientation);
-            }
+            if (filters?.color) params.set('color', filters.color);
+            if (filters?.orientation) params.set('orientation', filters.orientation);
             const data = await this.fetch('GET', `/search/photos?${params.toString()}`);
             return {
                 images: this.formatResults(data.results),

package/dist/endpoints/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/endpoints/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAOvC,eAAO,MAAM,SAAS,EAAE,QAAQ,EA6I/B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/endpoints/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAkCvC,eAAO,MAAM,SAAS,EAAE,QAAQ,EAkE/B,CAAA"}