@rubixstudios/payload-media 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +22 -22
- package/README.md +73 -73
- package/dist/components/search-drawer/index.js +4 -3
- package/dist/components/search-drawer/media/plus.d.ts +3 -0
- package/dist/components/search-drawer/media/plus.d.ts.map +1 -0
- package/dist/components/search-drawer/media/plus.js +26 -0
- package/dist/components/search-drawer/media/video.d.ts +2 -1
- package/dist/components/search-drawer/media/video.d.ts.map +1 -1
- package/dist/components/search-drawer/media/video.js +7 -2
- package/dist/components/search-drawer/style.css +1 -1
- package/dist/endpoints/handler/{pexels.d.ts → Pexels.d.ts} +2 -2
- package/dist/endpoints/handler/{pexels.d.ts.map → Pexels.d.ts.map} +1 -1
- package/dist/endpoints/handler/{pexels.js → Pexels.js} +1 -1
- package/dist/endpoints/handler/{pixabay.d.ts → Pixabay.d.ts} +2 -2
- package/dist/endpoints/handler/{pixabay.d.ts.map → Pixabay.d.ts.map} +1 -1
- package/dist/endpoints/handler/{pixabay.js → Pixabay.js} +1 -1
- package/dist/endpoints/handler/{provider.d.ts → Provider.d.ts} +1 -1
- package/dist/endpoints/handler/{provider.d.ts.map → Provider.d.ts.map} +1 -1
- package/dist/endpoints/handler/{unsplash.d.ts → Unsplash.d.ts} +2 -2
- package/dist/endpoints/handler/{unsplash.d.ts.map → Unsplash.d.ts.map} +1 -1
- package/dist/endpoints/handler/{unsplash.js → Unsplash.js} +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +2 -2
- package/dist/utils/getProvider.d.ts +3 -3
- package/dist/utils/getProvider.js +3 -3
- package/dist/utils/getProviders.d.ts +3 -3
- package/dist/utils/getProviders.js +3 -3
- package/dist/utils/resolveProvider.d.ts +3 -3
- package/package.json +4 -2
- /package/dist/endpoints/handler/{provider.js → Provider.js} +0 -0
package/LICENSE
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 rilrom / Riley Langbein
|
|
4
|
-
Copyright (c) 2025-2026 Rubix Studios Pty. Ltd. <https://rubixstudios.com.au>
|
|
5
|
-
|
|
6
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
-
in the Software without restriction, including without limitation the rights
|
|
9
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
-
furnished to do so, subject to the following conditions:
|
|
12
|
-
|
|
13
|
-
The above copyright notice and this permission notice shall be included in all
|
|
14
|
-
copies or substantial portions of the Software.
|
|
15
|
-
|
|
16
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 rilrom / Riley Langbein
|
|
4
|
+
Copyright (c) 2025-2026 Rubix Studios Pty. Ltd. <https://rubixstudios.com.au>
|
|
5
|
+
|
|
6
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
7
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
8
|
+
in the Software without restriction, including without limitation the rights
|
|
9
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
10
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
11
|
+
furnished to do so, subject to the following conditions:
|
|
12
|
+
|
|
13
|
+
The above copyright notice and this permission notice shall be included in all
|
|
14
|
+
copies or substantial portions of the Software.
|
|
15
|
+
|
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
17
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
18
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
19
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
20
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
21
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,73 +1,73 @@
|
|
|
1
|
-
# PayloadCMS Media Search Plugin
|
|
2
|
-
|
|
3
|
-
PayloadCMS plugin for stock image and video search across Unsplash, Pexels, and Pixabay, with filterable results and instant import.
|
|
4
|
-
|
|
5
|
-
<img width="1899" height="907" alt="image" src="https://github.com/user-attachments/assets/1c19f977-d075-4dfc-9f52-8d9426bc1500" />
|
|
6
|
-
|
|
7
|
-
This project is an independent implementation derived [PayloadBites' Image Search](https://github.com/rilrom/payload-bites/tree/main/packages/image-search) extended with provider-specific image filtering and improved Windows OS compatibility.
|
|
8
|
-
|
|
9
|
-
## Installation
|
|
10
|
-
|
|
11
|
-
```sh
|
|
12
|
-
pnpm add @rubixstudios/payload-media
|
|
13
|
-
```
|
|
14
|
-
|
|
15
|
-
```typescript
|
|
16
|
-
// payload.config.ts
|
|
17
|
-
import { buildConfig } from 'payload/config'
|
|
18
|
-
import { mediaPlugin } from '@rubixstudios/payload-media'
|
|
19
|
-
|
|
20
|
-
export default buildConfig({
|
|
21
|
-
plugins: [
|
|
22
|
-
mediaPlugin({
|
|
23
|
-
disabled: false, // Optional, defaults to false
|
|
24
|
-
access: ({ req: { user } }) => Boolean(user), // Media search access control
|
|
25
|
-
pexels: process.env.API_KEY_PEXELS!,
|
|
26
|
-
pixabay: process.env.API_KEY_PIXABAY!,
|
|
27
|
-
unsplash: process.env.API_KEY_UNSPLASH!,
|
|
28
|
-
}),
|
|
29
|
-
],
|
|
30
|
-
})
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
## Notes
|
|
34
|
-
|
|
35
|
-
API key can be obtained from the respective provider's website.
|
|
36
|
-
|
|
37
|
-
- [Unsplash](https://unsplash.com/developers)
|
|
38
|
-
- [Pexels](https://www.pexels.com/api/)
|
|
39
|
-
- [Pixabay](https://pixabay.com/api/docs/)
|
|
40
|
-
|
|
41
|
-
When using Unplash, utilise your Access Key for the API Token.
|
|
42
|
-
|
|
43
|
-
## Features
|
|
44
|
-
|
|
45
|
-
- Stock image and video search inside Payload Admin
|
|
46
|
-
- Providers: Unsplash, Pexels, Pixabay
|
|
47
|
-
- Provider-specific filters (color, orientation, size, type)
|
|
48
|
-
- Featured and keyword search modes
|
|
49
|
-
- One-click image import
|
|
50
|
-
- Permission-based access control
|
|
51
|
-
|
|
52
|
-
## Liability
|
|
53
|
-
|
|
54
|
-
Rubix Studios, its developers, and contributors bear no responsibility for how images are used.
|
|
55
|
-
Before using any provider, ensure you have reviewed and agreed to their terms and usage policies.
|
|
56
|
-
|
|
57
|
-
## Support
|
|
58
|
-
|
|
59
|
-
For support or inquiries:
|
|
60
|
-
|
|
61
|
-
- LinkedIn: [rubixvi](https://www.linkedin.com/in/rubixvi/)
|
|
62
|
-
- Website: [Rubix Studios](https://rubixstudios.com.au)
|
|
63
|
-
|
|
64
|
-
## Author
|
|
65
|
-
|
|
66
|
-
Rubix Studios Pty. Ltd.
|
|
67
|
-
[https://rubixstudios.com.au](https://rubixstudios.com.au)
|
|
68
|
-
|
|
69
|
-
## Acknowledgments
|
|
70
|
-
|
|
71
|
-
This project is based on the Image Search by Riley Langbein:
|
|
72
|
-
|
|
73
|
-
- [Riley Langbein](https://github.com/rilrom)
|
|
1
|
+
# PayloadCMS Media Search Plugin
|
|
2
|
+
|
|
3
|
+
PayloadCMS plugin for stock image and video search across Unsplash, Pexels, and Pixabay, with filterable results and instant import.
|
|
4
|
+
|
|
5
|
+
<img width="1899" height="907" alt="image" src="https://github.com/user-attachments/assets/1c19f977-d075-4dfc-9f52-8d9426bc1500" />
|
|
6
|
+
|
|
7
|
+
This project is an independent implementation derived [PayloadBites' Image Search](https://github.com/rilrom/payload-bites/tree/main/packages/image-search) extended with provider-specific image filtering and improved Windows OS compatibility.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
pnpm add @rubixstudios/payload-media
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```typescript
|
|
16
|
+
// payload.config.ts
|
|
17
|
+
import { buildConfig } from 'payload/config'
|
|
18
|
+
import { mediaPlugin } from '@rubixstudios/payload-media'
|
|
19
|
+
|
|
20
|
+
export default buildConfig({
|
|
21
|
+
plugins: [
|
|
22
|
+
mediaPlugin({
|
|
23
|
+
disabled: false, // Optional, defaults to false
|
|
24
|
+
access: ({ req: { user } }) => Boolean(user), // Media search access control
|
|
25
|
+
pexels: process.env.API_KEY_PEXELS!,
|
|
26
|
+
pixabay: process.env.API_KEY_PIXABAY!,
|
|
27
|
+
unsplash: process.env.API_KEY_UNSPLASH!,
|
|
28
|
+
}),
|
|
29
|
+
],
|
|
30
|
+
})
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Notes
|
|
34
|
+
|
|
35
|
+
API key can be obtained from the respective provider's website.
|
|
36
|
+
|
|
37
|
+
- [Unsplash](https://unsplash.com/developers)
|
|
38
|
+
- [Pexels](https://www.pexels.com/api/)
|
|
39
|
+
- [Pixabay](https://pixabay.com/api/docs/)
|
|
40
|
+
|
|
41
|
+
When using Unplash, utilise your Access Key for the API Token.
|
|
42
|
+
|
|
43
|
+
## Features
|
|
44
|
+
|
|
45
|
+
- Stock image and video search inside Payload Admin
|
|
46
|
+
- Providers: Unsplash, Pexels, Pixabay
|
|
47
|
+
- Provider-specific filters (color, orientation, size, type)
|
|
48
|
+
- Featured and keyword search modes
|
|
49
|
+
- One-click image import
|
|
50
|
+
- Permission-based access control
|
|
51
|
+
|
|
52
|
+
## Liability
|
|
53
|
+
|
|
54
|
+
Rubix Studios, its developers, and contributors bear no responsibility for how images are used.
|
|
55
|
+
Before using any provider, ensure you have reviewed and agreed to their terms and usage policies.
|
|
56
|
+
|
|
57
|
+
## Support
|
|
58
|
+
|
|
59
|
+
For support or inquiries:
|
|
60
|
+
|
|
61
|
+
- LinkedIn: [rubixvi](https://www.linkedin.com/in/rubixvi/)
|
|
62
|
+
- Website: [Rubix Studios](https://rubixstudios.com.au)
|
|
63
|
+
|
|
64
|
+
## Author
|
|
65
|
+
|
|
66
|
+
Rubix Studios Pty. Ltd.
|
|
67
|
+
[https://rubixstudios.com.au](https://rubixstudios.com.au)
|
|
68
|
+
|
|
69
|
+
## Acknowledgments
|
|
70
|
+
|
|
71
|
+
This project is based on the Image Search by Riley Langbein:
|
|
72
|
+
|
|
73
|
+
- [Riley Langbein](https://github.com/rilrom)
|
|
@@ -184,7 +184,7 @@ export const SearchDrawer = (props)=>{
|
|
|
184
184
|
defaultError,
|
|
185
185
|
buildQuery
|
|
186
186
|
]);
|
|
187
|
-
const
|
|
187
|
+
const selectMedia = async (url, download)=>{
|
|
188
188
|
onSelect(url);
|
|
189
189
|
if (!download) return;
|
|
190
190
|
try {
|
|
@@ -286,11 +286,12 @@ export const SearchDrawer = (props)=>{
|
|
|
286
286
|
key: data.id
|
|
287
287
|
}, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
|
|
288
288
|
data: data,
|
|
289
|
-
baseClass: baseClass
|
|
289
|
+
baseClass: baseClass,
|
|
290
|
+
onSelect: selectMedia
|
|
290
291
|
}) : /*#__PURE__*/ React.createElement(ImageCard, {
|
|
291
292
|
data: data,
|
|
292
293
|
baseClass: baseClass,
|
|
293
|
-
onSelect:
|
|
294
|
+
onSelect: selectMedia
|
|
294
295
|
})))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
|
|
295
296
|
className: `${baseClass}__pagination`
|
|
296
297
|
}, /*#__PURE__*/ React.createElement(Pagination, {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"plus.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/plus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAE5C,wBAAgB,QAAQ,CAAC,KAAK,EAAE,QAAQ,CAAC,aAAa,CAAC,qBAmBtD"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export function PlusIcon(props) {
|
|
3
|
+
return /*#__PURE__*/ React.createElement("svg", {
|
|
4
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
5
|
+
viewBox: "0 0 24 24",
|
|
6
|
+
width: "20",
|
|
7
|
+
height: "20",
|
|
8
|
+
fill: "none",
|
|
9
|
+
stroke: "currentColor",
|
|
10
|
+
strokeWidth: "1",
|
|
11
|
+
strokeLinecap: "round",
|
|
12
|
+
strokeLinejoin: "round",
|
|
13
|
+
"aria-hidden": "true",
|
|
14
|
+
...props
|
|
15
|
+
}, /*#__PURE__*/ React.createElement("line", {
|
|
16
|
+
x1: "12",
|
|
17
|
+
y1: "5",
|
|
18
|
+
x2: "12",
|
|
19
|
+
y2: "19"
|
|
20
|
+
}), /*#__PURE__*/ React.createElement("line", {
|
|
21
|
+
x1: "5",
|
|
22
|
+
y1: "12",
|
|
23
|
+
x2: "19",
|
|
24
|
+
y2: "12"
|
|
25
|
+
}));
|
|
26
|
+
}
|
|
@@ -3,7 +3,8 @@ import { type ProviderResult } from '../../../types.js';
|
|
|
3
3
|
type VideoCardProps = {
|
|
4
4
|
data: ProviderResult;
|
|
5
5
|
baseClass: string;
|
|
6
|
+
onSelect: (url: string, download?: string) => void;
|
|
6
7
|
};
|
|
7
|
-
export declare const VideoCard: ({ data, baseClass }: VideoCardProps) => React.JSX.Element;
|
|
8
|
+
export declare const VideoCard: ({ data, baseClass, onSelect }: VideoCardProps) => React.JSX.Element;
|
|
8
9
|
export {};
|
|
9
10
|
//# sourceMappingURL=video.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;
|
|
1
|
+
{"version":3,"file":"video.d.ts","sourceRoot":"","sources":["../../../../src/components/search-drawer/media/video.tsx"],"names":[],"mappings":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,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,GAAI,+BAA+B,cAAc,sBA0EtE,CAAA"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { LinkIcon, Tooltip } from '@payloadcms/ui';
|
|
2
2
|
import React, { useState } from 'react';
|
|
3
3
|
import { HeartIcon } from './heart.js';
|
|
4
|
-
|
|
4
|
+
import { PlusIcon } from './plus.js';
|
|
5
|
+
export const VideoCard = ({ data, baseClass, onSelect })=>{
|
|
5
6
|
const [show, setShow] = useState(false);
|
|
6
7
|
return /*#__PURE__*/ React.createElement("div", {
|
|
7
8
|
key: data.id,
|
|
@@ -46,7 +47,11 @@ export const VideoCard = ({ data, baseClass })=>{
|
|
|
46
47
|
position: "bottom",
|
|
47
48
|
alignCaret: "center",
|
|
48
49
|
show: show
|
|
49
|
-
}, data.likes, " likes")), /*#__PURE__*/ React.createElement("
|
|
50
|
+
}, data.likes, " likes")), /*#__PURE__*/ React.createElement("button", {
|
|
51
|
+
type: "button",
|
|
52
|
+
className: `${baseClass}__add`,
|
|
53
|
+
onClick: ()=>onSelect?.(data.urls.original, data.urls?.downloadLocation)
|
|
54
|
+
}, /*#__PURE__*/ React.createElement(PlusIcon, null)), /*#__PURE__*/ React.createElement("a", {
|
|
50
55
|
className: `${baseClass}__download`,
|
|
51
56
|
href: data.urls.download,
|
|
52
57
|
target: "_blank",
|
|
@@ -1 +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__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__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}}
|
|
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}}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PexelsFilters, type PexelsResult, type PexelsVideo, type ProviderResult } from '../../types.js';
|
|
2
|
-
import { Provider, type Resolver } from './
|
|
2
|
+
import { Provider, type Resolver } from './Provider.js';
|
|
3
3
|
export declare class Pexels extends Provider {
|
|
4
4
|
constructor(apiKey: Resolver);
|
|
5
5
|
getFetchBaseUrl(): string;
|
|
@@ -9,4 +9,4 @@ export declare class Pexels extends Provider {
|
|
|
9
9
|
formatVideoResults(data: PexelsVideo[]): ProviderResult[];
|
|
10
10
|
formatResults(data: PexelsResult[]): ProviderResult[];
|
|
11
11
|
}
|
|
12
|
-
//# sourceMappingURL=
|
|
12
|
+
//# sourceMappingURL=Pexels.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;gBACtB,MAAM,EAAE,QAAQ;IAInB,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,WAAW,CAAC,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IAwBtD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC;IA2ChG,kBAAkB,CAAC,IAAI,EAAE,WAAW,EAAE,GAAG,cAAc,EAAE;IAyBhD,aAAa,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE;CAkB/D"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type PixabayFilters, type PixabayResult, type PixabayVideo, type ProviderResult } from '../../types.js';
|
|
2
|
-
import { Provider, type Resolver } from './
|
|
2
|
+
import { Provider, type Resolver } from './Provider.js';
|
|
3
3
|
export declare class Pixabay extends Provider {
|
|
4
4
|
constructor(apiKey: Resolver);
|
|
5
5
|
getFetchBaseUrl(): string;
|
|
@@ -9,4 +9,4 @@ export declare class Pixabay extends Provider {
|
|
|
9
9
|
formatVideoResults(data: PixabayVideo[]): ProviderResult[];
|
|
10
10
|
formatResults(data: PixabayResult[]): ProviderResult[];
|
|
11
11
|
}
|
|
12
|
-
//# sourceMappingURL=
|
|
12
|
+
//# sourceMappingURL=Pixabay.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;gBACvB,MAAM,EAAE,QAAQ;IAInB,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,WAAW,CAAC,OAAO,CAAC,EAAE,cAAc,GAAG,OAAO,CAAC,OAAO,CAAC;IAoCvD,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,cAAc,GACvB,OAAO,CAAC,OAAO,CAAC;IA+CnB,kBAAkB,CAAC,IAAI,EAAE,YAAY,EAAE,GAAG,cAAc,EAAE;IA0BjD,aAAa,CAAC,IAAI,EAAE,aAAa,EAAE,GAAG,cAAc,EAAE;CAoBhE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;gBAEC,GAAG,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,QAAQ;IAO/D,KAAK,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAU7E,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,SAAS,CAAC,SAAS,IAAI,MAAM;IAU7B,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAIzC,aAAa,IAAI,MAAM;IAIvB,WAAW,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;IAIjE,SAAS,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,OAAO,CAAC;IAI1D,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IAIjC,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,cAAc,EAAE;CAG/C"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type ProviderResult, type UnsplashFilters, type UnsplashResult } from '../../types.js';
|
|
2
|
-
import { Provider, type Resolver } from './
|
|
2
|
+
import { Provider, type Resolver } from './Provider.js';
|
|
3
3
|
export declare class Unsplash extends Provider {
|
|
4
4
|
constructor(apiKey: Resolver);
|
|
5
5
|
getFetchBaseUrl(): string;
|
|
@@ -9,4 +9,4 @@ export declare class Unsplash extends Provider {
|
|
|
9
9
|
trackDownload(url: string): null;
|
|
10
10
|
formatResults(data: UnsplashResult[]): ProviderResult[];
|
|
11
11
|
}
|
|
12
|
-
//# sourceMappingURL=
|
|
12
|
+
//# sourceMappingURL=Unsplash.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"
|
|
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;gBACxB,MAAM,EAAE,QAAQ;IAInB,eAAe,IAAI,MAAM;IAIzB,eAAe,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAInC,WAAW,CAAC,OAAO,CAAC,EAAE,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;IAoCxD,SAAS,CACtB,KAAK,EAAE,MAAM,EACb,IAAI,EAAE,MAAM,EACZ,OAAO,CAAC,EAAE,eAAe,GACxB,OAAO,CAAC,OAAO,CAAC;IAmBV,aAAa,CAAC,GAAG,EAAE,MAAM;IAMzB,aAAa,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE;CAqBjE"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { type Config } from 'payload';
|
|
2
2
|
import { type ProviderConfig } from './types.js';
|
|
3
|
-
export declare const
|
|
3
|
+
export declare const mediaPlugin: (pluginConfig?: ProviderConfig) => (incomingConfig: Config) => Config;
|
|
4
4
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defaultPluginOptions } from './defaults.js';
|
|
2
2
|
import { providers } from './endpoints/index.js';
|
|
3
|
-
export const
|
|
3
|
+
export const mediaPlugin = (pluginConfig = {})=>(incomingConfig)=>{
|
|
4
4
|
if (pluginConfig.disabled) return incomingConfig;
|
|
5
5
|
const mergedOptions = {
|
|
6
6
|
...defaultPluginOptions,
|
|
@@ -32,7 +32,7 @@ export const imagePlugin = (pluginConfig = {})=>(incomingConfig)=>{
|
|
|
32
32
|
...uploadObj?.admin?.components || {},
|
|
33
33
|
controls: [
|
|
34
34
|
...uploadObj?.admin?.components?.controls || [],
|
|
35
|
-
'@rubixstudios/payload-
|
|
35
|
+
'@rubixstudios/payload-media/client#MediaSearch'
|
|
36
36
|
]
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Pexels } from '../endpoints/handler/
|
|
2
|
-
import { Pixabay } from '../endpoints/handler/
|
|
3
|
-
import { Unsplash } from '../endpoints/handler/
|
|
1
|
+
import { Pexels } from '../endpoints/handler/Pexels.js';
|
|
2
|
+
import { Pixabay } from '../endpoints/handler/Pixabay.js';
|
|
3
|
+
import { Unsplash } from '../endpoints/handler/Unsplash.js';
|
|
4
4
|
import { type ProviderKeys } from '../types.js';
|
|
5
5
|
export declare const getProvider: (providerKey: string | undefined, providerKeys?: ProviderKeys) => Pexels | Pixabay | Unsplash | null;
|
|
6
6
|
//# sourceMappingURL=getProvider.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Pexels } from '../endpoints/handler/
|
|
2
|
-
import { Pixabay } from '../endpoints/handler/
|
|
3
|
-
import { Unsplash } from '../endpoints/handler/
|
|
1
|
+
import { Pexels } from '../endpoints/handler/Pexels.js';
|
|
2
|
+
import { Pixabay } from '../endpoints/handler/Pixabay.js';
|
|
3
|
+
import { Unsplash } from '../endpoints/handler/Unsplash.js';
|
|
4
4
|
export const getProvider = (providerKey, providerKeys)=>{
|
|
5
5
|
if (!providerKey) return null;
|
|
6
6
|
switch(providerKey.toLowerCase()){
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Pexels } from '../endpoints/handler/
|
|
2
|
-
import { Pixabay } from '../endpoints/handler/
|
|
3
|
-
import { Unsplash } from '../endpoints/handler/
|
|
1
|
+
import { Pexels } from '../endpoints/handler/Pexels.js';
|
|
2
|
+
import { Pixabay } from '../endpoints/handler/Pixabay.js';
|
|
3
|
+
import { Unsplash } from '../endpoints/handler/Unsplash.js';
|
|
4
4
|
import { type ProviderKeys } from '../types.js';
|
|
5
5
|
export declare function getProviders(providerKey?: ProviderKeys): Array<Pexels | Unsplash | Pixabay>;
|
|
6
6
|
//# sourceMappingURL=getProviders.d.ts.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Pexels } from '../endpoints/handler/
|
|
2
|
-
import { Pixabay } from '../endpoints/handler/
|
|
3
|
-
import { Unsplash } from '../endpoints/handler/
|
|
1
|
+
import { Pexels } from '../endpoints/handler/Pexels.js';
|
|
2
|
+
import { Pixabay } from '../endpoints/handler/Pixabay.js';
|
|
3
|
+
import { Unsplash } from '../endpoints/handler/Unsplash.js';
|
|
4
4
|
export function getProviders(providerKey) {
|
|
5
5
|
return [
|
|
6
6
|
new Unsplash(()=>providerKey?.unsplash),
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type PayloadRequest } from 'payload';
|
|
2
|
-
import { type Pexels } from '../endpoints/handler/
|
|
3
|
-
import { type Pixabay } from '../endpoints/handler/
|
|
4
|
-
import { type Unsplash } from '../endpoints/handler/
|
|
2
|
+
import { type Pexels } from '../endpoints/handler/Pexels.js';
|
|
3
|
+
import { type Pixabay } from '../endpoints/handler/Pixabay.js';
|
|
4
|
+
import { type Unsplash } from '../endpoints/handler/Unsplash.js';
|
|
5
5
|
export declare const resolveProvider: (req: PayloadRequest) => Unsplash | Pexels | Pixabay | null;
|
|
6
6
|
//# sourceMappingURL=resolveProvider.d.ts.map
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rubixstudios/payload-media",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "A Payload CMS plugin that integrates with stock image and video providers including Unsplash, Pexels and Pixabay.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Rubix Studios <hello@rubixstudios.com.au> (https://rubixstudios.com.au)",
|
|
@@ -47,7 +47,9 @@
|
|
|
47
47
|
},
|
|
48
48
|
"main": "./dist/index.js",
|
|
49
49
|
"types": "./dist/index.d.ts",
|
|
50
|
-
"files": [
|
|
50
|
+
"files": [
|
|
51
|
+
"dist"
|
|
52
|
+
],
|
|
51
53
|
"scripts": {
|
|
52
54
|
"build": "pnpm build:types && pnpm build:swc && pnpm build:assets",
|
|
53
55
|
"build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
|
|
File without changes
|