@ludo.ninja/components 2.2.57 → 2.2.58

package/build/api/server-search/queries/useFetchLudoNftsTonPage/index.d.ts

@@ -0,0 +1,15 @@
+import { TCreation } from '../../../../entities/creation/types';
+import { searchSchema as schema } from "@ludo.ninja/api";
+declare const useFetchLudoNftsTonPage: ({ userId, scrollTab, }: {
+    scrollTab: string | undefined;
+    userId: schema.IQueryFetchLudoNftsTonPageArgs["userId"];
+}) => {
+    isLoading: boolean;
+    error: import("@apollo/client").ApolloError | undefined;
+    totalResults: number;
+    creations: TCreation[];
+    refetchQuery: () => Promise<void>;
+    loadMore: () => Promise<void>;
+    isNextLoading: boolean;
+};
+export default useFetchLudoNftsTonPage;

package/build/api/server-search/queries/useFetchLudoNftsTonPage/index.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const builder_1 = require("../../../../entities/creation/builder");
+const getPageSizeAssets_1 = require("../../../../utils/getPageSizeAssets");
+const api_1 = require("@ludo.ninja/api");
+const react_1 = require("react");
+const limit = 20;
+const useFetchLudoNftsTonPage = ({ userId, scrollTab, }) => {
+    const [creations, setCreations] = (0, react_1.useState)([]);
+    const nextPageToken = (0, react_1.useRef)(null);
+    const [results, setResults] = (0, react_1.useState)(0);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(true);
+    const [isNextLoading, setIsNextLoading] = (0, react_1.useState)(false);
+    const isHaveNextPage = creations.length < results;
+    const mapLudoNftToCreation = (ludoNftTon) => {
+        const isVideoMediaAvailable = ludoNftTon.originalUrls.length === 2;
+        return {
+            ...ludoNftTon,
+            creationId: ludoNftTon.id,
+            itemId: ludoNftTon.id,
+            itemType: "asset",
+            blockchain: "ton",
+            ...(isVideoMediaAvailable ? { originalUrls: [ludoNftTon.originalUrls[1]], mimeType: "video/mp4" } : {}),
+        };
+    };
+    const [fetchLudoCreations, { error, refetch, fetchMore }] = api_1.searchSchema.useFetchLudoNftsTonPageLazyQuery({
+        context: {
+            uri: api_1.hosts.searchHost,
+        },
+        fetchPolicy: "no-cache",
+        onCompleted: ({ fetchLudoNftsTonPage: { ludoNftsTon, ...nextPage } }) => {
+            setCreations(ludoNftsTon.map((ludoNft) => (0, builder_1.buildCreation)(mapLudoNftToCreation(ludoNft))));
+            setResults(nextPage.nextPage?.elements || 0);
+            setIsLoading(false);
+            nextPageToken.current = nextPage.nextPage?.token || null;
+        },
+        onError: () => {
+            setCreations([]);
+            setIsLoading(false);
+            nextPageToken.current = null;
+        },
+    });
+    (0, react_1.useEffect)(() => {
+        setIsLoading(true);
+        fetchLudoCreations({
+            variables: {
+                userId,
+                page: {
+                    size: (0, getPageSizeAssets_1.getPageSize)({
+                        scrollTab,
+                        limit,
+                    }),
+                    token: null,
+                    num: 1,
+                },
+            },
+        });
+    }, [userId]);
+    async function refetchQuery() {
+        await refetch();
+    }
+    async function loadMore() {
+        if (!nextPageToken.current || !isHaveNextPage)
+            return;
+        setIsNextLoading(true);
+        try {
+            const { data } = await fetchMore({
+                variables: {
+                    userId,
+                    page: {
+                        token: nextPageToken.current,
+                        size: limit,
+                    },
+                },
+                updateQuery: (previousQueryResult) => {
+                    return previousQueryResult;
+                },
+            });
+            const { ludoNftsTon: nextCreations, ...nextPage } = data.fetchLudoNftsTonPage;
+            setCreations((prevCreations) => [
+                ...prevCreations,
+                ...nextCreations.map((ludoNft) => (0, builder_1.buildCreation)(mapLudoNftToCreation(ludoNft))),
+            ]);
+            setResults(nextPage.nextPage?.elements || 0);
+            nextPageToken.current = nextPage.nextPage?.token || null;
+        }
+        catch (error) {
+            //todo uncomment next line
+            // throw new Error(error as string);
+        }
+        finally {
+            setIsNextLoading(false);
+        }
+    }
+    return {
+        isLoading,
+        error,
+        totalResults: results,
+        creations,
+        refetchQuery,
+        loadMore,
+        isNextLoading,
+    };
+};
+exports.default = useFetchLudoNftsTonPage;

package/build/entities/creation/CreationMediaView.d.ts

@@ -1,4 +1,6 @@
 import { IMedia } from '../media/types';
-export declare const CreationMediaView: ({ media }: {
+export declare const CreationMediaView: ({ media, isNeedScaleTransform, playVideoOnHover }: {
     media: IMedia;
+    isNeedScaleTransform?: boolean;
+    playVideoOnHover?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/build/entities/creation/CreationMediaView.js

@@ -1,4 +1,27 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,17 +36,29 @@ const CardAudio_1 = __importDefault(require("../../system/Cards/CardMedia/CardAu
 const CardImage_1 = __importDefault(require("../../system/Cards/CardMedia/CardImage"));
 const CardVideo_1 = __importDefault(require("../../system/Cards/CardMedia/CardVideo"));
 const constants_1 = require("@ludo.ninja/core/build/constants");
-const CreationMediaView = ({ media }) => {
+const styled_components_1 = __importStar(require("styled-components"));
+const StyledCardImage = (0, styled_components_1.default)(CardImage_1.default) `
+    ${(props) => props.isNeedScaleTransform ?
+    (0, styled_components_1.css) `
+                transition: transform 0.4s;
+
+                :hover {
+                    transform: scale(1.12);
+                }
+            `
+    : ''}
+`;
+const CreationMediaView = ({ media, isNeedScaleTransform, playVideoOnHover }) => {
     const mediaVariant = (0, getMediaVariant_1.getMediaVariant)({ media });
     switch (mediaVariant) {
         case types_1.EMediaVariants.other:
         case types_1.EMediaVariants.screenshot:
         case types_1.EMediaVariants.image:
-            return (0, jsx_runtime_1.jsx)(ImageMediaView, { media: media });
+            return (0, jsx_runtime_1.jsx)(ImageMediaView, { media: media, isNeedScaleTransform: isNeedScaleTransform });
         case types_1.EMediaVariants.audio:
             return (0, jsx_runtime_1.jsx)(AudioMediaView, { media: media });
         case types_1.EMediaVariants.video:
-            return (0, jsx_runtime_1.jsx)(VideoMediaView, { media: media });
+            return (0, jsx_runtime_1.jsx)(VideoMediaView, { media: media, playVideoOnHover: playVideoOnHover });
         case types_1.EMediaVariants.object3d:
             //todo: add previewUrl 3d
             return ((0, jsx_runtime_1.jsx)(CardImage_1.default, { alt: media.alt, imgSrc: `${constants_1.staticLink}/public/noContent/noContentObject.svg`, errorImg: `${constants_1.staticLink}/public/noContent/noContentObject.svg` }));
@@ -32,15 +67,15 @@ const CreationMediaView = ({ media }) => {
     }
 };
 exports.CreationMediaView = CreationMediaView;
-const ImageMediaView = ({ media }) => {
+const ImageMediaView = ({ media, isNeedScaleTransform }) => {
     const NEXT_PUBLIC_STATIC_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_STATIC_DOMAIN);
-    return ((0, jsx_runtime_1.jsx)(CardImage_1.default, { alt: media.alt, imgSrc: (0, urls_1.isExternalMediaImage)(media.media, urls_1.mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN), errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg` }));
+    return ((0, jsx_runtime_1.jsx)(StyledCardImage, { alt: media.alt, imgSrc: (0, urls_1.isExternalMediaImage)(media.media, urls_1.mediaSizes.small, NEXT_PUBLIC_STATIC_DOMAIN), errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg`, isNeedScaleTransform: isNeedScaleTransform }));
 };
 const AudioMediaView = ({ media }) => {
     const getAudioENVDomain = (0, env_1.useEnvStore)((state) => state.getAudioDomain);
     return ((0, jsx_runtime_1.jsx)(CardAudio_1.default, { alt: media.alt, audioSrc: (0, urls_1.isExternalMediaAudio)(media.media, getAudioENVDomain), imgSrc: `${constants_1.staticLink}/public/noContent/noContentAudio.svg`, errorImg: `${constants_1.staticLink}/public/noContent/noContentAudio.svg` }));
 };
-const VideoMediaView = ({ media }) => {
+const VideoMediaView = ({ media, playVideoOnHover }) => {
     const getVideoENVDomain = (0, env_1.useEnvStore)((state) => state.getVideoDomain);
-    return ((0, jsx_runtime_1.jsx)(CardVideo_1.default, { alt: media.alt, videoSrc: (0, urls_1.isExternalMediaVideo)(media.media, getVideoENVDomain), errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg` }));
+    return ((0, jsx_runtime_1.jsx)(CardVideo_1.default, { alt: media.alt, videoSrc: (0, urls_1.isExternalMediaVideo)(media.media, getVideoENVDomain), errorImg: `${constants_1.staticLink}/public/noContent/noContent.svg`, playOnHover: playVideoOnHover }));
 };

package/build/system/Cards/CardMedia/CardImage/index.d.ts

@@ -1,6 +1,9 @@
-declare const CardImage: ({ imgSrc, errorImg, alt }: {
+import { CSSProperties } from "react";
+declare const CardImage: ({ imgSrc, errorImg, alt, className, style }: {
     imgSrc: string;
     errorImg: string;
     alt: string;
+    className?: string;
+    style?: CSSProperties;
 }) => import("react/jsx-runtime").JSX.Element;
 export default CardImage;

package/build/system/Cards/CardMedia/CardImage/index.js

@@ -9,7 +9,7 @@ const Image_1 = __importDefault(require("../../Styles/Image"));
 const react_1 = require("react");
 const react_loading_skeleton_1 = __importDefault(require("react-loading-skeleton"));
 // Component
-const CardImage = ({ imgSrc, errorImg, alt }) => {
+const CardImage = ({ imgSrc, errorImg, alt, className, style }) => {
     const isFirstLoading = !creation_1.urlsActive[imgSrc];
     const [loading, setLoading] = (0, react_1.useState)(isFirstLoading);
     if (isFirstLoading) {
@@ -18,7 +18,7 @@ const CardImage = ({ imgSrc, errorImg, alt }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [loading && ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { height: "100%", width: "100%", style: {
                     lineHeight: "normal",
                     visibility: `${loading ? "hidden" : "visible"}`,
-                } })), (0, jsx_runtime_1.jsx)(Image_1.default, { isLoading: loading, src: imgSrc, alt: alt, onError: (e) => (e.target.src = errorImg), onLoad: () => setLoading(false) })] }));
+                } })), (0, jsx_runtime_1.jsx)(Image_1.default, { className: className, style: style, isLoading: loading, src: imgSrc, alt: alt, onError: (e) => (e.target.src = errorImg), onLoad: () => setLoading(false) })] }));
 };
 // Export
 exports.default = CardImage;

package/build/system/Cards/CardMedia/CardVideo/index.d.ts

@@ -1,6 +1,7 @@
-declare const CardVideo: ({ videoSrc, errorImg, alt, }: {
+declare const CardVideo: ({ videoSrc, errorImg, alt, playOnHover }: {
     videoSrc: string;
     errorImg: string;
     alt: string;
+    playOnHover?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export default CardVideo;

package/build/system/Cards/CardMedia/CardVideo/index.js

@@ -11,7 +11,7 @@ const Video_1 = __importDefault(require("../../Styles/Video"));
 const pause_svg_1 = __importDefault(require("../../../../public/video/pause"));
 const play_svg_1 = __importDefault(require("../../../../public/video/play"));
 // Component
-const CardVideo = ({ videoSrc, errorImg, alt, }) => {
+const CardVideo = ({ videoSrc, errorImg, alt, playOnHover }) => {
     const [lVideoSrc, setLVideoSrc] = (0, react_1.useState)(null);
     const [isPlayIcon, setPlayIcon] = (0, react_1.useState)(false);
     const video = (0, react_1.useRef)();
@@ -39,7 +39,10 @@ const CardVideo = ({ videoSrc, errorImg, alt, }) => {
     const renderImage = () => ((0, jsx_runtime_1.jsx)(Image_1.default, { isLoading: false, src: errorImg, alt: alt }));
     if (!videoSrc)
         return renderImage();
-    return lVideoSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Video_1.default, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false', children: [(0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: lVideoSrc }), (0, jsx_runtime_1.jsx)("p", { children: alt })] }), lVideoSrc.length &&
+    return lVideoSrc ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(Video_1.default, { ref: video, muted: true, loop: true, playsInline: true, preload: 'false', ...(playOnHover ? {
+                    onMouseOver: event => event.target.play(),
+                    onMouseOut: event => event.target.pause()
+                } : {}), children: [(0, jsx_runtime_1.jsx)("source", { type: "video/mp4", src: lVideoSrc }), (0, jsx_runtime_1.jsx)("p", { children: alt })] }), lVideoSrc.length && !playOnHover &&
                 (isPlayIcon ? ((0, jsx_runtime_1.jsx)(play_svg_1.default, { className: 'playIcon', onClick: (e) => {
                         e.preventDefault();
                         e.stopPropagation();

package/build/system/Cards/CreationCard/index.d.ts

@@ -14,6 +14,7 @@ export interface ICreationCard {
     creationName?: string;
     creation: TCreation;
     isNeedHeight: boolean;
+    isNeedScaleTransform?: boolean;
     likesDynamicInfo?: schema.IDynamicAssetData | schema.IDynamicCollectionData;
     toolsForRemove?: RemoveToolsType | undefined;
     isMobile: boolean;
@@ -21,6 +22,8 @@ export interface ICreationCard {
     isNeedShowMoreButton?: boolean;
     isUserProfile?: boolean;
     isRegularCard?: boolean;
+    isNeedBounceTransform?: boolean;
     currentMyGalleryId?: false | string;
+    playVideoOnHover?: boolean;
 }
-export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, checkboxSlot, currentMyGalleryId, }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;
+export declare const CreationCard: ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard, isShowCheckbox, checkboxSlot, currentMyGalleryId, isNeedScaleTransform, isNeedBounceTransform, playVideoOnHover }: ICreationCard & ICheckboxState) => import("react/jsx-runtime").JSX.Element;

package/build/system/Cards/CreationCard/index.js

@@ -55,8 +55,7 @@ const StyledRegularCard = styled_components_1.default.div `
   background-color: ${colors_1.WhiteColor};
   border-radius: 6px;
   ${boxShadow_1.default};
-  ${boxTransform_1.default};
-  // ${(props) => (props.isNeedTransform ? null : boxTransform_1.default)}
+  ${(props) => (props.isNeedBounceTransform ? boxTransform_1.default : null)}
 
   min-height: ${(props) => (props.isNeedHeight ? "346px" : "")};
 
@@ -96,7 +95,7 @@ const StyledRegularCard = styled_components_1.default.div `
   }
 `;
 // Component
-const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, checkboxSlot, currentMyGalleryId, }) => {
+const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo, toolsForRemove, isMobile, isLoadingLikes, isNeedShowMoreButton, isUserProfile, isRegularCard = true, isShowCheckbox, checkboxSlot, currentMyGalleryId, isNeedScaleTransform, isNeedBounceTransform = true, playVideoOnHover }) => {
     const isProd = (0, env_1.useEnvStore)((state) => state.isProd);
     const NEXT_PUBLIC_ENV_VALUE = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_ENV_VALUE);
     const { likes, addLike, deleteLike } = (0, likes_1.default)({
@@ -124,7 +123,7 @@ const CreationCard = ({ creationName, creation, isNeedHeight, likesDynamicInfo,
     //                 } else {
     //                   window.open(`${domain}/rewards/${userId}`,'_self');
     //                 }
-    return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, children: [isShowCheckbox && checkboxSlot, (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: getLink(creation.creationLink), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [(0, jsx_runtime_1.jsx)(CreationMediaView_1.CreationMediaView, { media: creation.media }), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.creatorAddress, secondName: creation.name, cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.itemId, isNeedShowMoreButton: isHideProd ? false : !!isNeedShowMoreButton, href: getLink(creation.creationLink), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.label }), !isHideProd &&
+    return ((0, jsx_runtime_1.jsxs)(StyledRegularCard, { isNeedHeight: isNeedHeight, isNeedTransform: isNeedShowMoreButton, isShowCheckbox: isShowCheckbox, isNeedBounceTransform: isNeedBounceTransform, children: [isShowCheckbox && checkboxSlot, (0, jsx_runtime_1.jsxs)(HideLink, { className: "linkRegularCard", href: getLink(creation.creationLink), children: [(0, jsx_runtime_1.jsxs)(Head_1.default, { children: [(0, jsx_runtime_1.jsx)(CreationMediaView_1.CreationMediaView, { media: creation.media, isNeedScaleTransform: isNeedScaleTransform, playVideoOnHover: playVideoOnHover }), (0, jsx_runtime_1.jsx)(CardHead_1.CardHead, { isRegularCard: !!isRegularCard, isIconLiked: likes.isLiked, creation: creation, addLikeToCard: addLike, deleteLikeFromCard: deleteLike, isUserProfile: isUserProfile || false, isDisabled: !!isLoadingLikes, isShowCheckbox: isShowCheckbox, currentMyGalleryId: currentMyGalleryId })] }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { creationName: creationName, firstName: creation.creatorAddress, secondName: creation.name, cuttedSecondName: creation.getCuttedSecondName(!isMobile), itemId: creation.itemId, isNeedShowMoreButton: isHideProd ? false : !!isNeedShowMoreButton, href: getLink(creation.creationLink), children: (0, jsx_runtime_1.jsxs)(index_1.Flex, { alignItems: "end", justifyContent: "space-between", children: [(0, jsx_runtime_1.jsx)(CardCategory_1.default, { label: creation.label }), !isHideProd &&
                                     (isLoadingLikes ? ((0, jsx_runtime_1.jsx)(react_loading_skeleton_1.default, { style: { borderRadius: "3px" }, height: "100%", width: "30px" })) : ((0, jsx_runtime_1.jsx)(CardLikes_1.default, { isLiked: likes.isLiked, likes: likes.likesCount })))] }) })] })] }));
 };
 exports.CreationCard = CreationCard;

package/build/system/Cards/Styles/Head.js

@@ -12,6 +12,7 @@ const StyledCardHead = styled_components_1.default.div `
   height: 252px;
   width: 252px;
   margin: 0 auto;
+  overflow: hidden;
 
   .playIcon,
   .pauseIcon {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ludo.ninja/components",
-  "version": "2.2.57",
+  "version": "2.2.58",
   "private": false,
   "main": "build/index.js",
   "types": "build/index.d.ts",