@ludo.ninja/components 1.0.7 → 1.0.9

package/dist/components/assetPage/assetNft/index.jsx

@@ -1,29 +1,71 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { isImage } from '@ludo.ninja/core';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
+
 import { Box, ExternalImage, Flex } from '@system';
-var ResponsiveImage = styled(ExternalImage)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  max-width: 320px;\n  max-height: 320px;\n\n  ", " {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ", " {\n    max-width: 508px;\n    max-height: 508px;\n  }\n"], ["\n  max-width: 320px;\n  max-height: 320px;\n\n  ", " {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ", " {\n    max-width: 508px;\n    max-height: 508px;\n  }\n"])), mediaQuery.tablet, mediaQuery.desktop);
-var EmptyState = function () { return (<Flex justifyContent="center">
-    <Box borderRadius={16} overflow="hidden"/>
-  </Flex>); };
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var ResponsiveImage = styled(ExternalImage)(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  max-width: 320px;\n  max-height: 320px;\n\n  ',
+        ' {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ',
+        ' {\n    max-width: 508px;\n    max-height: 508px;\n  }\n',
+      ],
+      [
+        '\n  max-width: 320px;\n  max-height: 320px;\n\n  ',
+        ' {\n    max-width: 336px;\n    max-height: 336px;\n  }\n\n  ',
+        ' {\n    max-width: 508px;\n    max-height: 508px;\n  }\n',
+      ]
+    )),
+  mediaQuery.tablet,
+  mediaQuery.desktop
+);
+var EmptyState = function () {
+  return (
+    <Flex justifyContent="center">
+      <Box borderRadius={16} overflow="hidden" />
+    </Flex>
+  );
+};
 export var AssetMedia = function (_a) {
-    var medias = _a.medias;
-    if (!(medias === null || medias === void 0 ? void 0 : medias.length) || medias.length > 1 || !medias[0])
-        return <EmptyState />;
-    var media = medias[0];
-    var url = media.url, mimeType = media.mimeType;
-    if (url && isImage({ media: url, mimeType: mimeType, originalMimeType: null })) {
-        return (<Flex justifyContent="center">
+  var medias = _a.medias;
+  if (
+    !(medias === null || medias === void 0 ? void 0 : medias.length) ||
+    medias.length > 1 ||
+    !medias[0]
+  )
+    return <EmptyState />;
+  var media = medias[0];
+  var url = media.url,
+    mimeType = media.mimeType;
+  if (
+    url &&
+    isImage({ media: url, mimeType: mimeType, originalMimeType: null })
+  ) {
+    return (
+      <Flex justifyContent="center">
         <Box borderRadius={16} overflow="hidden">
-          <ResponsiveImage src={url}/>
+          <ResponsiveImage src={url} />
         </Box>
-      </Flex>);
-    }
-    return <EmptyState />;
+      </Flex>
+    );
+  }
+  return <EmptyState />;
 };
 var templateObject_1;

package/dist/components/assetPage/assetWrapper/index.jsx

@@ -1,54 +1,189 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import React from 'react';
+
 import styled from 'styled-components';
+
 import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
+
 import { useFetchAssetByBlockchain } from '@/api/server-assets/queries/useFetchAssetByBlockchain';
+
 import { mediaQuery } from '@/styles/ScreenWidth';
-import { CollectionSlider, Description, DetailsAccordeon, Figcaption, MarketPlaces, Participants, PriceRank, Title, } from '@/components/assetPage';
+
+import {
+  CollectionSlider,
+  Description,
+  DetailsAccordeon,
+  Figcaption,
+  MarketPlaces,
+  Participants,
+  PriceRank,
+  Title,
+} from '@/components/assetPage';
+
 import AssetImage from '../media/AssetImage';
-var AvatarContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  ", " {\n    width: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ", " {\n      display: none;\n    }\n  }\n\n  ", " {\n    width: ", ";\n    margin-right: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.tablet, mediaQuery.mobile, mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(510), adaptiveValueCalc(60));
-var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ", " {\n    flex-direction: column;\n    align-items: center;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ", " {\n    flex-direction: column;\n    align-items: center;\n  }\n"])), mediaQuery.tablet);
-var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ", " {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ", " {\n    width: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ", " {\n    width: 335px;\n  }\n\n  ", " {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ", " {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ", " {\n    width: ", ";\n  }\n"])), mediaQuery.desktop, mediaQuery.mobile, mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(510));
+
+var __makeTemplateObject =
+  (this && this.__makeTemplateObject) ||
+  function (cooked, raw) {
+    if (Object.defineProperty) {
+      Object.defineProperty(cooked, 'raw', { value: raw });
+    } else {
+      cooked.raw = raw;
+    }
+    return cooked;
+  };
+
+var AvatarContainer = styled.div(
+  templateObject_1 ||
+    (templateObject_1 = __makeTemplateObject(
+      [
+        '\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ',
+        ' {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
+        ' {\n    margin-right: 0;\n  }\n\n  ',
+        ' {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ',
+        ' {\n      display: none;\n    }\n  }\n\n  ',
+        ' {\n    width: ',
+        ';\n    margin-right: ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n  margin-right: 60px;\n\n  ',
+        ' {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
+        ' {\n    margin-right: 0;\n  }\n\n  ',
+        ' {\n    width: 320px;\n  }\n\n  .description {\n    display: flex;\n\n    ',
+        ' {\n      display: none;\n    }\n  }\n\n  ',
+        ' {\n    width: ',
+        ';\n    margin-right: ',
+        ';\n  }\n',
+      ]
+    )),
+  mediaQuery.desktop,
+  mediaQuery.tablet,
+  mediaQuery.mobile,
+  mediaQuery.tablet,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(510),
+  adaptiveValueCalc(60)
+);
+var Wrapper = styled.div(
+  templateObject_2 ||
+    (templateObject_2 = __makeTemplateObject(
+      [
+        '\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ',
+        ' {\n    flex-direction: column;\n    align-items: center;\n  }\n',
+      ],
+      [
+        '\n  display: flex;\n  justify-content: center;\n  flex-direction: row;\n  align-items: flex-start;\n\n  ',
+        ' {\n    flex-direction: column;\n    align-items: center;\n  }\n',
+      ]
+    )),
+  mediaQuery.tablet
+);
+var Container = styled.div(
+  templateObject_3 ||
+    (templateObject_3 = __makeTemplateObject(
+      [
+        '\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ',
+        ' {\n    width: 335px;\n  }\n\n  ',
+        ' {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ',
+        ' {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ',
+        ' {\n    width: ',
+        ';\n  }\n',
+      ],
+      [
+        '\n  display: flex;\n  flex-direction: column;\n  width: 510px;\n\n  ',
+        ' {\n    width: 335px;\n  }\n\n  ',
+        ' {\n    width: 320px;\n  }\n\n  .description {\n    display: none;\n\n    ',
+        ' {\n      display: flex;\n      margin-bottom: 25px;\n    }\n  }\n  ',
+        ' {\n    width: ',
+        ';\n  }\n',
+      ]
+    )),
+  mediaQuery.desktop,
+  mediaQuery.mobile,
+  mediaQuery.tablet,
+  mediaQuery.minWidthFourK,
+  adaptiveValueCalc(510)
+);
 var AssetComponents = function (_a) {
-    // const file2D = '/test/test.svg';
-    // const file3D =
-    // 'https://nfts.snowx.com/0xfe2674e976884844db9ff5e49b6bbca878ddac2d/2-artwork.glb';
-    // 'https://ipfs.io/ipfs/QmPsVLBHhczr6uF6AaWsS2fUcWuMFHBsUZi3BGKgSsDpxJ/2109.glb';
-    // const audio = "https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3";
-    // const video = "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4";
-    var _b, _c;
-    var clientData = _a.clientData;
-    var isSlider = clientData.getIsSlider();
-    var markets = clientData.getMarkets();
-    return (<>
-      {isSlider && <CollectionSlider medias={clientData.getAssetMediaType()}/>}
+  // const file2D = '/test/test.svg';
+  // const file3D =
+  // 'https://nfts.snowx.com/0xfe2674e976884844db9ff5e49b6bbca878ddac2d/2-artwork.glb';
+  // 'https://ipfs.io/ipfs/QmPsVLBHhczr6uF6AaWsS2fUcWuMFHBsUZi3BGKgSsDpxJ/2109.glb';
+  // const audio = "https://storage.googleapis.com/media-session/elephants-dream/the-wires.mp3";
+  // const video = "https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4";
+  var _b, _c;
+  var clientData = _a.clientData;
+  var isSlider = clientData.getIsSlider();
+  var markets = clientData.getMarkets();
+  return (
+    <>
+      {isSlider && <CollectionSlider medias={clientData.getAssetMediaType()} />}
       <Wrapper>
         <AvatarContainer>
           {!isSlider &&
-            ((_c = (_b = clientData.getAssetMediaType()[0]) === null || _b === void 0 ? void 0 : _b.displayLinkedMedia()) !== null && _c !== void 0 ? _c : (<AssetImage alt={"".concat(clientData.getName(), " ").concat(clientData.getAddress() || '')} imageUrl={'/noContent/noContent.svg'} errorImg={'/noContent/noContent.svg'}/>))}
-          <Figcaption asset={clientData}/>
-          <Description description={clientData.getDescription()}/>
+            ((_c =
+              (_b = clientData.getAssetMediaType()[0]) === null || _b === void 0
+                ? void 0
+                : _b.displayLinkedMedia()) !== null && _c !== void 0 ? (
+              _c
+            ) : (
+              <AssetImage
+                alt={''
+                  .concat(clientData.getName(), ' ')
+                  .concat(clientData.getAddress() || '')}
+                imageUrl={'/noContent/noContent.svg'}
+                errorImg={'/noContent/noContent.svg'}
+              />
+            ))}
+          <Figcaption asset={clientData} />
+          <Description description={clientData.getDescription()} />
         </AvatarContainer>
         <Container>
-          <Title collectionId={clientData.getCollection().collectionId} collectionTitle={clientData.getCollection().collectionTitle} collectionMedias={clientData.getCollection().collectionMedias} name={clientData.getName()}/>
-          <Participants creatorsAddresses={clientData.getCreatorsAddresses()} creatorsProfiles={clientData.getCreatorsProfiles()} ownersAddresses={clientData.getOwnersAddresses()} ownersProfiles={clientData.getOwnersProfiles()}/>
-          <PriceRank latestPriceAmount={clientData.getPrice().latestPriceAmount} latestPriceCurrency={clientData.getPrice().latestPriceCurrency} rank={clientData.getRank()} blockchain={clientData.getBlockchain()}/>
-          {markets && <MarketPlaces markets={markets}/>}
-          <Description description={clientData.getDescription()}/>
-          <DetailsAccordeon asset={clientData}/>
+          <Title
+            collectionId={clientData.getCollection().collectionId}
+            collectionTitle={clientData.getCollection().collectionTitle}
+            collectionMedias={clientData.getCollection().collectionMedias}
+            name={clientData.getName()}
+          />
+          <Participants
+            creatorsAddresses={clientData.getCreatorsAddresses()}
+            creatorsProfiles={clientData.getCreatorsProfiles()}
+            ownersAddresses={clientData.getOwnersAddresses()}
+            ownersProfiles={clientData.getOwnersProfiles()}
+          />
+          <PriceRank
+            latestPriceAmount={clientData.getPrice().latestPriceAmount}
+            latestPriceCurrency={clientData.getPrice().latestPriceCurrency}
+            rank={clientData.getRank()}
+            blockchain={clientData.getBlockchain()}
+          />
+          {markets && <MarketPlaces markets={markets} />}
+          <Description description={clientData.getDescription()} />
+          <DetailsAccordeon asset={clientData} />
         </Container>
       </Wrapper>
-    </>);
+    </>
+  );
 };
 var AssetWrapper = function (_a) {
-    var blockchain = _a.blockchain, address = _a.address, elrondId = _a.elrondId, tokenId = _a.tokenId;
-    var _b = useFetchAssetByBlockchain({ blockchain: blockchain, address: address, tokenId: tokenId, elrondId: elrondId }, null), clientData = _b.clientData, loading = _b.loading, error = _b.error;
-    if (loading || error || !clientData)
-        return null;
-    return <AssetComponents clientData={clientData}/>;
+  var blockchain = _a.blockchain,
+    address = _a.address,
+    elrondId = _a.elrondId,
+    tokenId = _a.tokenId;
+  var _b = useFetchAssetByBlockchain(
+      {
+        blockchain: blockchain,
+        address: address,
+        tokenId: tokenId,
+        elrondId: elrondId,
+      },
+      null
+    ),
+    clientData = _b.clientData,
+    loading = _b.loading,
+    error = _b.error;
+  if (loading || error || !clientData) return null;
+  return <AssetComponents clientData={clientData} />;
 };
 export default AssetWrapper;
 var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/assetPage/audioVideoPlayer/Duration.jsx

@@ -1,22 +1,27 @@
 import React from 'react';
+
 import { InactiveButtonColor } from '@/styles/colors';
+
 import { H5 } from '@system';
+
 export default function Duration(_a) {
-    var seconds = _a.seconds;
-    return (<time dateTime={"P".concat(Math.round(seconds), "S")}>
+  var seconds = _a.seconds;
+  return (
+    <time dateTime={'P'.concat(Math.round(seconds), 'S')}>
       <H5 color={InactiveButtonColor}>{format(seconds)}</H5>
-    </time>);
+    </time>
+  );
 }
 function format(seconds) {
-    var date = new Date(seconds * 1000);
-    var hh = date.getUTCHours();
-    var mm = date.getUTCMinutes();
-    var ss = pad(date.getUTCSeconds());
-    if (hh) {
-        return "".concat(hh, ":").concat(pad(mm), ":").concat(ss);
-    }
-    return "".concat(mm, ":").concat(ss);
+  var date = new Date(seconds * 1000);
+  var hh = date.getUTCHours();
+  var mm = date.getUTCMinutes();
+  var ss = pad(date.getUTCSeconds());
+  if (hh) {
+    return ''.concat(hh, ':').concat(pad(mm), ':').concat(ss);
+  }
+  return ''.concat(mm, ':').concat(ss);
 }
 function pad(string) {
-    return ('0' + string).slice(-2);
+  return ('0' + string).slice(-2);
 }