@rubixstudios/payload-media 1.0.1 → 1.1.1

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

@@ -184,7 +184,7 @@ export const SearchDrawer = (props)=>{
         defaultError,
         buildQuery
     ]);
-    const selectImage = async (url, download)=>{
+    const selectMedia = async (url, download)=>{
         onSelect(url);
         if (!download) return;
         try {
@@ -286,11 +286,12 @@ export const SearchDrawer = (props)=>{
             key: data.id
         }, mediaType === 'video' ? /*#__PURE__*/ React.createElement(VideoCard, {
             data: data,
-            baseClass: baseClass
+            baseClass: baseClass,
+            onSelect: selectMedia
         }) : /*#__PURE__*/ React.createElement(ImageCard, {
             data: data,
             baseClass: baseClass,
-            onSelect: selectImage
+            onSelect: selectMedia
         })))), currentPage && totalPages && totalPages > 1 && /*#__PURE__*/ React.createElement("div", {
         className: `${baseClass}__pagination`
     }, /*#__PURE__*/ React.createElement(Pagination, {

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

@@ -0,0 +1,3 @@
+import React, { type SVGProps } from 'react';
+export declare function PlusIcon(props: SVGProps<SVGSVGElement>): React.JSX.Element;
+//# sourceMappingURL=plus.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export function PlusIcon(props) {
+    return /*#__PURE__*/ React.createElement("svg", {
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: "0 0 24 24",
+        width: "20",
+        height: "20",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        ...props
+    }, /*#__PURE__*/ React.createElement("line", {
+        x1: "12",
+        y1: "5",
+        x2: "12",
+        y2: "19"
+    }), /*#__PURE__*/ React.createElement("line", {
+        x1: "5",
+        y1: "12",
+        x2: "19",
+        y2: "12"
+    }));
+}

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

@@ -3,7 +3,8 @@ import { type ProviderResult } from '../../../types.js';
 type VideoCardProps = {
     data: ProviderResult;
     baseClass: string;
+    onSelect: (url: string, download?: string) => void;
 };
-export declare const VideoCard: ({ data, baseClass }: VideoCardProps) => React.JSX.Element;
+export declare const VideoCard: ({ data, baseClass, onSelect }: VideoCardProps) => 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":"AACA,OAAO,KAAmB,MAAM,OAAO,CAAA;AAEvC,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAGvD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,cAAc,CAAA;IACpB,SAAS,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,qBAAqB,cAAc,sBAkE5D,CAAA"}
+{"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"}

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

@@ -1,7 +1,8 @@
 import { LinkIcon, Tooltip } from '@payloadcms/ui';
 import React, { useState } from 'react';
 import { HeartIcon } from './heart.js';
-export const VideoCard = ({ data, baseClass })=>{
+import { PlusIcon } from './plus.js';
+export const VideoCard = ({ data, baseClass, onSelect })=>{
     const [show, setShow] = useState(false);
     return /*#__PURE__*/ React.createElement("div", {
         key: data.id,
@@ -46,7 +47,11 @@ export const VideoCard = ({ data, baseClass })=>{
         position: "bottom",
         alignCaret: "center",
         show: show
-    }, data.likes, " likes")), /*#__PURE__*/ React.createElement("a", {
+    }, data.likes, " likes")), /*#__PURE__*/ React.createElement("button", {
+        type: "button",
+        className: `${baseClass}__add`,
+        onClick: ()=>onSelect?.(data.urls.original, data.urls.download)
+    }, /*#__PURE__*/ React.createElement(PlusIcon, null)), /*#__PURE__*/ React.createElement("a", {
         className: `${baseClass}__download`,
         href: data.urls.download,
         target: "_blank",

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__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}}
+.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}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rubixstudios/payload-media",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "description": "A Payload CMS plugin that integrates with stock image and video providers including Unsplash, Pexels and Pixabay.",
   "license": "MIT",
   "author": "Rubix Studios <hello@rubixstudios.com.au> (https://rubixstudios.com.au)",