@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/system/Cards/CardHeadIcons/index.jsx

@@ -1,305 +1,136 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 import React from 'react';
-
 import { useRouter } from 'next/router';
-
 import { useUserStore } from '@/modules/user/store';
-
 import { useUiStore } from '@/store/ui';
-
 import { ScreenWidth } from '@/styles/ScreenWidth';
-
 import AddCreationToFavoriteList from '@/components/favoriteList/add/addCreationToFavoriteList';
-
 import CardRank from '@/system/Cards/CardRank';
 import StyledHeadIcons from '@/system/Cards/Styles/Headicons';
-
 import { redirectToLoginWindow } from '@/utils/auth';
 import { isProd } from '@/utils/env';
 import { getWindowDimensions } from '@/utils/screen';
-
 import CollectionCreationEntity from '@/dto/Collection/CollectionCreationEntity';
 import { LabelKeys } from '@/dto/common/ItemType';
-
 import AddToFavListIcon from '@/public/cards/addToFavListIcon.svg';
 import AddToGalleryIcon from '@/public/cards/addToGalleryIcon.svg';
 import AddToLikesIcon from '@/public/cards/heart.svg';
-
-var __awaiter =
-  (this && this.__awaiter) ||
-  function (thisArg, _arguments, P, generator) {
-    function adopt(value) {
-      return value instanceof P
-        ? value
-        : new P(function (resolve) {
-            resolve(value);
-          });
-    }
-    return new (P || (P = Promise))(function (resolve, reject) {
-      function fulfilled(value) {
-        try {
-          step(generator.next(value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function rejected(value) {
-        try {
-          step(generator['throw'](value));
-        } catch (e) {
-          reject(e);
-        }
-      }
-      function step(result) {
-        result.done
-          ? resolve(result.value)
-          : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-var __generator =
-  (this && this.__generator) ||
-  function (thisArg, body) {
-    var _ = {
-        label: 0,
-        sent: function () {
-          if (t[0] & 1) throw t[1];
-          return t[1];
-        },
-        trys: [],
-        ops: [],
-      },
-      f,
-      y,
-      t,
-      g;
-    return (
-      (g = { next: verb(0), throw: verb(1), return: verb(2) }),
-      typeof Symbol === 'function' &&
-        (g[Symbol.iterator] = function () {
-          return this;
-        }),
-      g
-    );
-    function verb(n) {
-      return function (v) {
-        return step([n, v]);
-      };
-    }
-    function step(op) {
-      if (f) throw new TypeError('Generator is already executing.');
-      while ((g && ((g = 0), op[0] && (_ = 0)), _))
-        try {
-          if (
-            ((f = 1),
-            y &&
-              (t =
-                op[0] & 2
-                  ? y['return']
-                  : op[0]
-                  ? y['throw'] || ((t = y['return']) && t.call(y), 0)
-                  : y.next) &&
-              !(t = t.call(y, op[1])).done)
-          )
-            return t;
-          if (((y = 0), t)) op = [op[0] & 2, t.value];
-          switch (op[0]) {
-            case 0:
-            case 1:
-              t = op;
-              break;
-            case 4:
-              _.label++;
-              return { value: op[1], done: false };
-            case 5:
-              _.label++;
-              y = op[1];
-              op = [0];
-              continue;
-            case 7:
-              op = _.ops.pop();
-              _.trys.pop();
-              continue;
-            default:
-              if (
-                !((t = _.trys), (t = t.length > 0 && t[t.length - 1])) &&
-                (op[0] === 6 || op[0] === 2)
-              ) {
-                _ = 0;
-                continue;
-              }
-              if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) {
-                _.label = op[1];
-                break;
-              }
-              if (op[0] === 6 && _.label < t[1]) {
-                _.label = t[1];
-                t = op;
-                break;
-              }
-              if (t && _.label < t[2]) {
-                _.label = t[2];
-                _.ops.push(op);
-                break;
-              }
-              if (t[2]) _.ops.pop();
-              _.trys.pop();
-              continue;
-          }
-          op = body.call(thisArg, _);
-        } catch (e) {
-          op = [6, e];
-          y = 0;
-        } finally {
-          f = t = 0;
-        }
-      if (op[0] & 5) throw op[1];
-      return { value: op[0] ? op[1] : void 0, done: true };
-    }
-  };
-
 // Component
 var CardHeadIcons = function (_a) {
-  var creation = _a.creation,
-    isRegularCard = _a.isRegularCard,
-    isIconLiked = _a.isIconLiked,
-    addLikeToCard = _a.addLikeToCard,
-    deleteLikeFromCard = _a.deleteLikeFromCard,
-    actionIsNeedRenderCheckbox = _a.actionIsNeedRenderCheckbox,
-    itemId = _a.itemId,
-    isUserProfile = _a.isUserProfile,
-    isDisabled = _a.isDisabled;
-  var openModalSidebarPortal = useUiStore(function (state) {
-    return state.openModalSidebarPortal;
-  });
-  var isSignedIn = useUserStore(function (state) {
-    return state.isSignedIn;
-  });
-  var isLicked = isIconLiked && isSignedIn;
-  var windowWidth = getWindowDimensions().windowWidth;
-  var isMobile =
-    windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
-  var router = useRouter();
-  var isGallery = router.pathname.includes('gallery');
-  var handleClick = function (e, type) {
-    return __awaiter(void 0, void 0, void 0, function () {
-      return __generator(this, function (_a) {
-        switch (_a.label) {
-          case 0:
-            e.preventDefault();
-            e.stopPropagation();
-            if (!!isSignedIn) return [3 /*break*/, 1];
-            redirectToLoginWindow();
-            return [3 /*break*/, 8];
-          case 1:
-            if (!(type === 'fav-list')) return [3 /*break*/, 2];
-            openModalSidebarPortal(
-              <AddCreationToFavoriteList
-                ids={[
-                  creation instanceof CollectionCreationEntity
-                    ? ''.concat(
-                        creation.getItemType() + '.' + creation.getCreationId()
-                      )
-                    : creation.getCreationId(),
-                ]}
-              />
-            );
-            return [3 /*break*/, 8];
-          case 2:
-            if (!(type === 'likes')) return [3 /*break*/, 7];
-            if (!!isLicked) return [3 /*break*/, 4];
-            return [
-              4 /*yield*/,
-              addLikeToCard(
-                creation instanceof CollectionCreationEntity &&
-                  creation.getItemType() !== LabelKeys.collection
-                  ? creation.getCollectionCreationId()
-                  : creation.getItemId()
-              ),
-            ];
-          case 3:
-            _a.sent();
-            return [3 /*break*/, 6];
-          case 4:
-            return [
-              4 /*yield*/,
-              deleteLikeFromCard(
-                creation instanceof CollectionCreationEntity &&
-                  creation.getItemType() !== LabelKeys.collection
-                  ? creation.getCollectionCreationId()
-                  : creation.getItemId()
-              ),
-            ];
-          case 5:
-            _a.sent();
-            _a.label = 6;
-          case 6:
-            return [3 /*break*/, 8];
-          case 7:
-            if (type === 'gallery') {
-              actionIsNeedRenderCheckbox &&
-                actionIsNeedRenderCheckbox(true, itemId);
+    var creation = _a.creation, isRegularCard = _a.isRegularCard, isIconLiked = _a.isIconLiked, addLikeToCard = _a.addLikeToCard, deleteLikeFromCard = _a.deleteLikeFromCard, actionIsNeedRenderCheckbox = _a.actionIsNeedRenderCheckbox, itemId = _a.itemId, isUserProfile = _a.isUserProfile, isDisabled = _a.isDisabled;
+    var openModalSidebarPortal = useUiStore(function (state) { return state.openModalSidebarPortal; });
+    var isSignedIn = useUserStore(function (state) { return state.isSignedIn; });
+    var isLicked = isIconLiked && isSignedIn;
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= ScreenWidth.TABLET || windowWidth <= ScreenWidth.DESKTOP;
+    var router = useRouter();
+    var isGallery = router.pathname.includes('gallery');
+    var handleClick = function (e, type) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    e.preventDefault();
+                    e.stopPropagation();
+                    if (!!isSignedIn) return [3 /*break*/, 1];
+                    redirectToLoginWindow();
+                    return [3 /*break*/, 8];
+                case 1:
+                    if (!(type === 'fav-list')) return [3 /*break*/, 2];
+                    openModalSidebarPortal(<AddCreationToFavoriteList ids={[
+                            creation instanceof CollectionCreationEntity
+                                ? "".concat(creation.getItemType() + '.' + creation.getCreationId())
+                                : creation.getCreationId(),
+                        ]}/>);
+                    return [3 /*break*/, 8];
+                case 2:
+                    if (!(type === 'likes')) return [3 /*break*/, 7];
+                    if (!!isLicked) return [3 /*break*/, 4];
+                    return [4 /*yield*/, addLikeToCard(creation instanceof CollectionCreationEntity &&
+                            creation.getItemType() !== LabelKeys.collection
+                            ? creation.getCollectionCreationId()
+                            : creation.getItemId())];
+                case 3:
+                    _a.sent();
+                    return [3 /*break*/, 6];
+                case 4: return [4 /*yield*/, deleteLikeFromCard(creation instanceof CollectionCreationEntity &&
+                        creation.getItemType() !== LabelKeys.collection
+                        ? creation.getCollectionCreationId()
+                        : creation.getItemId())];
+                case 5:
+                    _a.sent();
+                    _a.label = 6;
+                case 6: return [3 /*break*/, 8];
+                case 7:
+                    if (type === 'gallery') {
+                        actionIsNeedRenderCheckbox && actionIsNeedRenderCheckbox(true, itemId);
+                    }
+                    _a.label = 8;
+                case 8: return [2 /*return*/];
             }
-            _a.label = 8;
-          case 8:
-            return [2 /*return*/];
-        }
-      });
-    });
-  };
-  var renderLikeButton = function () {
-    if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
-      return (
-        <div
-          className={'icon like '.concat(isLicked ? 'liked' : '')}
-          onClick={function (e) {
-            return handleClick(e, 'likes');
-          }}
-        >
+        });
+    }); };
+    var renderLikeButton = function () {
+        if (creation.getItemType() === LabelKeys.asset || LabelKeys.collection) {
+            return (<div className={"icon like ".concat(isLicked ? 'liked' : '')} onClick={function (e) { return handleClick(e, 'likes'); }}>
           <AddToLikesIcon />
-        </div>
-      );
-    }
-  };
-  return (
-    <StyledHeadIcons
-      isMobile={isMobile}
-      style={
-        isDisabled
-          ? {
-              pointerEvents: 'none',
+        </div>);
+        }
+    };
+    return (<StyledHeadIcons isMobile={isMobile} style={isDisabled
+            ? {
+                pointerEvents: 'none',
             }
-          : {}
-      }
-    >
+            : {}}>
       <div className={'rank'}>
-        <CardRank rank={creation.getRank()} />
+        <CardRank rank={creation.getRank()}/>
       </div>
       {/* // Todo cardHeadIcons */}
-      {!isProd() && (
-        <div className="icons">
-          <div
-            className="icon"
-            onClick={function (e) {
-              return handleClick(
-                e,
-                isRegularCard || !isUserProfile || isGallery
-                  ? 'fav-list'
-                  : 'gallery'
-              );
-            }}
-          >
-            {isRegularCard || !isUserProfile || isGallery ? (
-              <AddToFavListIcon />
-            ) : (
-              <AddToGalleryIcon />
-            )}
+      {!isProd() && (<div className="icons">
+          <div className="icon" onClick={function (e) {
+                return handleClick(e, isRegularCard || !isUserProfile || isGallery
+                    ? 'fav-list'
+                    : 'gallery');
+            }}>
+            {isRegularCard || !isUserProfile || isGallery ? (<AddToFavListIcon />) : (<AddToGalleryIcon />)}
           </div>
           {renderLikeButton()}
-        </div>
-      )}
-    </StyledHeadIcons>
-  );
+        </div>)}
+    </StyledHeadIcons>);
 };
 // Export
 export default CardHeadIcons;

package/dist/system/Cards/CardMedia/CardAudio/index.jsx

@@ -1,113 +1,66 @@
 import React, { useEffect, useState } from 'react';
-
 import Skeleton from 'react-loading-skeleton';
-
 import { useMediaStore } from '@/store/media';
-
 import StyledImg from '@/system/Cards/Styles/Image';
-
 import { getWindowDimensions } from '@/utils/screen';
-
 import PauseIcon from '@/public/video/pause.svg';
 import PlayIcon from '@/public/video/play.svg';
-
 // Component
 var CardAudio = function (_a) {
-  var audioSrc = _a.audioSrc,
-    imgSrc = _a.imgSrc,
-    errorImg = _a.errorImg,
-    alt = _a.alt;
-  var _b = useState(''),
-    lImgSrc = _b[0],
-    setLImgSrc = _b[1];
-  var windowWidth = getWindowDimensions().windowWidth;
-  var isMobile = windowWidth <= 768;
-  var imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
-  var _c = useState(false),
-    isPauseIcon = _c[0],
-    setPauseIcon = _c[1];
-  var _d = useState(null),
-    lAudioSrc = _d[0],
-    setLAudioSrc = _d[1];
-  var _e = useMediaStore(function (state) {
-      return {
+    var audioSrc = _a.audioSrc, imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(''), lImgSrc = _b[0], setLImgSrc = _b[1];
+    var windowWidth = getWindowDimensions().windowWidth;
+    var isMobile = windowWidth <= 768;
+    var imageDimensions = isMobile ? '?d=164x164' : '?d=252x252';
+    var _c = useState(false), isPauseIcon = _c[0], setPauseIcon = _c[1];
+    var _d = useState(null), lAudioSrc = _d[0], setLAudioSrc = _d[1];
+    var _e = useMediaStore(function (state) { return ({
         playAudioTrack: state.playAudioTrack,
         pauseAudioTrack: state.pauseAudioTrack,
         tracks: state.audioTracks,
-      };
-    }),
-    playAudioTrack = _e.playAudioTrack,
-    pauseAudioTrack = _e.pauseAudioTrack,
-    tracks = _e.tracks;
-  useEffect(function () {
-    var audioElement = new Audio(audioSrc);
-    audioElement.addEventListener('canplay', function () {
-      setLAudioSrc(audioSrc);
-    });
-    var image = new Image();
-    image.src = imgSrc;
-    image.onload = function () {
-      return setLImgSrc(''.concat(image.src).concat(imageDimensions));
+    }); }), playAudioTrack = _e.playAudioTrack, pauseAudioTrack = _e.pauseAudioTrack, tracks = _e.tracks;
+    useEffect(function () {
+        var audioElement = new Audio(audioSrc);
+        audioElement.addEventListener('canplay', function () {
+            setLAudioSrc(audioSrc);
+        });
+        var image = new Image();
+        image.src = imgSrc;
+        image.onload = function () { return setLImgSrc("".concat(image.src).concat(imageDimensions)); };
+        image.onerror = function () { return setLImgSrc("".concat(errorImg).concat(imageDimensions)); };
+        return function () {
+            return audioElement.removeEventListener('canplay', function () {
+                setLAudioSrc(null);
+            });
+        };
+    }, []);
+    useEffect(function () {
+        var isNeedSetPlayBtn = tracks.some(function (track) {
+            return track.audioSrc === lAudioSrc && !track.playing;
+        });
+        if (isNeedSetPlayBtn) {
+            setPauseIcon(false);
+        }
+    }, [tracks]);
+    var handlePause = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(false);
+        pauseAudioTrack(lAudioSrc);
     };
-    image.onerror = function () {
-      return setLImgSrc(''.concat(errorImg).concat(imageDimensions));
+    var handlePlay = function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        setPauseIcon(true);
+        playAudioTrack(lAudioSrc);
     };
-    return function () {
-      return audioElement.removeEventListener('canplay', function () {
-        setLAudioSrc(null);
-      });
+    var renderPlayPauseIcon = function () {
+        return isPauseIcon ? (<PauseIcon className={'pauseIcon'} onClick={function (e) { return handlePause(e); }}/>) : (<PlayIcon className={'playIcon'} onClick={function (e) { return handlePlay(e); }}/>);
     };
-  }, []);
-  useEffect(
-    function () {
-      var isNeedSetPlayBtn = tracks.some(function (track) {
-        return track.audioSrc === lAudioSrc && !track.playing;
-      });
-      if (isNeedSetPlayBtn) {
-        setPauseIcon(false);
-      }
-    },
-    [tracks]
-  );
-  var handlePause = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    setPauseIcon(false);
-    pauseAudioTrack(lAudioSrc);
-  };
-  var handlePlay = function (e) {
-    e.preventDefault();
-    e.stopPropagation();
-    setPauseIcon(true);
-    playAudioTrack(lAudioSrc);
-  };
-  var renderPlayPauseIcon = function () {
-    return isPauseIcon ? (
-      <PauseIcon
-        className={'pauseIcon'}
-        onClick={function (e) {
-          return handlePause(e);
-        }}
-      />
-    ) : (
-      <PlayIcon
-        className={'playIcon'}
-        onClick={function (e) {
-          return handlePlay(e);
-        }}
-      />
-    );
-  };
-  return lImgSrc.length ? (
-    <>
-      <StyledImg src={imgSrc} alt={alt} isLoading={lAudioSrc} />
-      {(lAudioSrc === null || lAudioSrc === void 0
-        ? void 0
-        : lAudioSrc.length) && renderPlayPauseIcon()}
-    </>
-  ) : (
-    <Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }} />
-  );
+    return lImgSrc.length ? (<>
+      <StyledImg src={imgSrc} alt={alt} isLoading={lAudioSrc}/>
+      {(lAudioSrc === null || lAudioSrc === void 0 ? void 0 : lAudioSrc.length) && renderPlayPauseIcon()}
+    </>) : (<Skeleton height={'100%'} width={'100%'} style={{ lineHeight: 'normal' }}/>);
 };
 // Export
 export default CardAudio;

package/dist/system/Cards/CardMedia/CardImage/index.jsx

@@ -1,42 +1,17 @@
 import React, { useState } from 'react';
-
 import Skeleton from 'react-loading-skeleton';
-
 import StyledImg from '@/system/Cards/Styles/Image';
-
 // Component
 var CardImage = function (_a) {
-  var imgSrc = _a.imgSrc,
-    errorImg = _a.errorImg,
-    alt = _a.alt;
-  var _b = useState(true),
-    loading = _b[0],
-    setLoading = _b[1];
-  return (
-    <>
-      {loading && (
-        <Skeleton
-          height={'100%'}
-          width={'100%'}
-          style={{
-            lineHeight: 'normal',
-            visibility: ''.concat(loading ? 'hidden' : 'visible'),
-          }}
-        />
-      )}
-      <StyledImg
-        isLoading={loading}
-        src={imgSrc}
-        alt={alt}
-        onError={function (e) {
-          return (e.target.src = errorImg);
-        }}
-        onLoad={function () {
-          return setLoading(false);
-        }}
-      />
-    </>
-  );
+    var imgSrc = _a.imgSrc, errorImg = _a.errorImg, alt = _a.alt;
+    var _b = useState(true), loading = _b[0], setLoading = _b[1];
+    return (<>
+      {loading && (<Skeleton height={'100%'} width={'100%'} style={{
+                lineHeight: 'normal',
+                visibility: "".concat(loading ? 'hidden' : 'visible'),
+            }}/>)}
+      <StyledImg isLoading={loading} src={imgSrc} alt={alt} onError={function (e) { return (e.target.src = errorImg); }} onLoad={function () { return setLoading(false); }}/>
+    </>);
 };
 // Export
 export default CardImage;