@ludo.ninja/components 1.5.7 → 1.5.9

package/src/components/toTopBtn/index.tsx

@@ -1,117 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor } from '@/styles/colors';
-import { zIndexToTopBtn } from '@/styles/mixins/z-indexes';
-
-import { getAdaptiveScale } from '@/utils/adaptive/scale';
-import { useWindowDimensionsWithServerInitial } from '@/utils/screen';
-import { upBtnDistance } from '@/utils/ui';
-
-import ToTopBtnIcon from '@/public/toTopBtn/toTopBtn.svg';
-
-// Styles
-const StyledToTopBnt = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: fixed;
-  width: 48px;
-  height: 48px;
-  bottom: 36px;
-  right: 24px;
-  z-index: ${zIndexToTopBtn};
-  cursor: pointer;
-  padding: 5px;
-  background-color: ${({ theme }) => theme.colors.toTopBtn};
-  border-radius: 24px;
-  box-shadow: 0 10px 32px -16px rgba(33, 21, 95, 0.1);
-
-  &:hover {
-    svg path {
-      stroke: ${AccentColor};
-    }
-  }
-
-  @media (max-width: 767px) {
-    position: fixed;
-    left: 0;
-    right: 0;
-    margin: 0 auto;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(48)};
-    height: ${adaptiveValueCalc(48)};
-    bottom: ${adaptiveValueCalc(36)};
-    right: ${adaptiveValueCalc(24)};
-    border-radius: ${adaptiveValueCalc(24)};
-    padding: ${adaptiveValueCalc(5)};
-    box-shadow: 0 ${adaptiveValueCalc(10)} ${adaptiveValueCalc(32)}
-      ${adaptiveValueCalc(-16)} rgba(33, 21, 95, 0.1);
-  }
-`;
-
-const ToTopBtnIconResize = () => {
-  const { windowDimensions } = useWindowDimensionsWithServerInitial();
-
-  return (
-    <ToTopBtnIcon
-      style={getAdaptiveScale({ windowDimensions, currentSize: 1 })}
-    />
-  );
-};
-
-const ToTopBtn = () => {
-  const [showBtn, setShowBtn] = useState<boolean>(false);
-  let oldScrollY = document.documentElement.scrollTop;
-  const offsetPixels = 600;
-
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
-
-  const handleClickFunction = () => {
-    window.scrollTo({ top: 0, behavior: 'smooth' });
-  };
-
-  const handleScroll = () => {
-    if (upBtnDistance(document, offsetPixels)) {
-      if (oldScrollY > document.documentElement.scrollTop) {
-        setShowBtn(true);
-      }
-      oldScrollY = document.documentElement.scrollTop;
-    } else {
-      setShowBtn(false);
-      oldScrollY = offsetPixels;
-    }
-  };
-
-  if (!showBtn) return null;
-  return (
-    <StyledToTopBnt onClick={handleClickFunction}>
-      <ToTopBtnIconResize />
-    </StyledToTopBnt>
-  );
-};
-
-export const ToTopBtnWithCustomHandler = ({
-  handleClickFunction,
-}: {
-  handleClickFunction: () => void;
-}) => {
-  return (
-    <StyledToTopBnt onClick={handleClickFunction}>
-      <ToTopBtnIconResize />
-    </StyledToTopBnt>
-  );
-};
-
-// Export
-
-export default ToTopBtn;

package/src/dto/AssetEntity/index.ts

@@ -1,294 +0,0 @@
-// classes
-import { assetSchema as schema } from '@ludo.ninja/api';
-import {
-  BlockChainEntity,
-  BlockChainKeys,
-  MarketPlaceEntity,
-} from '@ludo.ninja/core';
-import { checkGltfUrl } from '@ludo.ninja/utils';
-
-import IAssetEntity from '@/dto/AssetEntity/interface';
-import {
-  AssetAudio,
-  AssetImage,
-  AssetOther,
-  AssetScreenshot,
-  AssetVideo,
-} from '@/dto/AssetEntity/views';
-import AssetObject from '@/dto/AssetEntity/views/AssetObject';
-import { LabelKeys } from '@/dto/common/ItemType';
-import Media from '@/dto/common/Media';
-import { BasicMediaType } from '@/dto/common/Media/interface';
-
-class AssetEntity implements IAssetEntity {
-  private assetId;
-  private blockchain;
-  private ownersProfiles;
-  private ownersAddresses;
-  private itemType;
-  private address;
-  private tokenId;
-  private medias;
-  private name;
-  private description;
-  private creatorsProfiles;
-  private creatorsAddresses;
-  private markets;
-  private originalUrls;
-  private rank;
-  private collection;
-  private category;
-  private categoryLabel;
-  private attributes;
-  private blockTimestamp;
-  private price;
-
-  constructor(asset: schema.IAsset) {
-    this.assetId = asset.assetId;
-    this.blockchain = new BlockChainEntity(asset?.blockchain as string);
-    this.markets =
-      asset.markets?.map(
-        (market) =>
-          new MarketPlaceEntity({
-            marketName: market?.marketName as string,
-            marketUrl: market?.marketUrl as string,
-            marketId: market?.marketUrl as string,
-          })
-      ) || [];
-    this.ownersProfiles = asset.ownersProfiles || null;
-    this.ownersAddresses = asset.ownersAddresses;
-    this.itemType = LabelKeys.asset;
-    this.address = asset.address;
-    this.tokenId = asset.tokenId;
-    this.medias = asset.medias;
-    this.name = asset.name;
-    this.description = asset.description;
-    this.creatorsProfiles = asset.creatorsProfiles || null;
-    this.creatorsAddresses = asset.creatorsAddresses;
-    this.originalUrls = asset.originalUrls;
-    this.rank = asset.rank;
-    this.collection = {
-      collectionId: asset.collectionId,
-      collectionTitle: asset.collectionTitle,
-      collectionMedias: asset.collectionMedias,
-    };
-    this.category = asset.category;
-    this.categoryLabel = asset.categoryLabel;
-    this.price = {
-      latestPriceAmount: asset.latestPriceAmount,
-      latestPriceCurrency: asset.latestPriceCurrency,
-    };
-    this.attributes = asset.attributes;
-    this.blockTimestamp = asset.blockTimestamp;
-  }
-
-  // accessors
-  public getAssetId(): string {
-    return this.assetId;
-  }
-
-  public getIsSlider(): boolean {
-    return this.getAssetMedias()
-      ? (this.getAssetMedias() as schema.IMedia[])?.length > 1
-      : false;
-  }
-
-  public getSplitedAssetId(): string {
-    return this.getAssetId().split('.')[1] || this.getAssetId();
-  }
-
-  public getName(): null | string {
-    return this.name ? this.name : null;
-  }
-
-  public getMarkets(): MarketPlaceEntity[] | null {
-    return this.markets ? this.markets : null;
-  }
-
-  public getBlockchain(): BlockChainEntity {
-    return this.blockchain;
-  }
-
-  public getPrice(): {
-    latestPriceAmount: number | null;
-    latestPriceCurrency: string | null;
-  } {
-    return {
-      latestPriceAmount: this.price.latestPriceAmount
-        ? this.price.latestPriceAmount
-        : null,
-      latestPriceCurrency: this.price.latestPriceCurrency
-        ? this.price.latestPriceCurrency
-        : null,
-    };
-  }
-
-  public getBlockTimestamp(): number {
-    return this.blockTimestamp;
-  }
-
-  public getAttributes(): schema.IAttribute[] {
-    return this.attributes?.length
-      ? (this.attributes as schema.IAttribute[])
-      : [];
-  }
-
-  public getDescription(): null | string {
-    return this.description ? this.description : null;
-  }
-
-  public getTokenId(): string | null {
-    return this.tokenId ? this.tokenId : null;
-  }
-
-  public getCollection(): {
-    collectionId: string | null;
-    collectionTitle: string | null;
-    collectionMedias: schema.IMedia[];
-  } {
-    return {
-      collectionId: this.collection.collectionId
-        ? this.collection.collectionId
-        : null,
-      collectionTitle: this.collection.collectionTitle
-        ? this.collection.collectionTitle
-        : null,
-      collectionMedias: this.collection.collectionMedias?.length
-        ? (this.collection.collectionMedias as schema.IMedia[])
-        : [],
-    };
-  }
-
-  public getCategory(): string | null {
-    return this.category ? this.category : null;
-  }
-
-  public getCategoryLabel(): string | null {
-    return this.categoryLabel ? this.categoryLabel : null;
-  }
-
-  public getOriginalUrls(): schema.IMedia[] | null {
-    if (!this.originalUrls) return null;
-
-    const convertedOriginalUrlsArray: schema.IMedia[] = [];
-
-    for (let i = 0; i < this.originalUrls?.length; i++) {
-      convertedOriginalUrlsArray.push({
-        url: checkGltfUrl(this.originalUrls[i] || ''),
-        mimeType: null,
-        originalMime: null,
-      });
-    }
-
-    return convertedOriginalUrlsArray;
-  }
-
-  public getItemType(): LabelKeys {
-    return this.itemType;
-  }
-
-  public getRank(): number {
-    return this.rank ? Math.round(this.rank) : 0;
-  }
-
-  public getAddress(): string | null {
-    return this.address ? this.address : null;
-  }
-
-  public getAssetLink(): string {
-    if (this.getItemType() === LabelKeys.asset) {
-      if (
-        this.getBlockchain().getBlockChainPrivateLabel() ===
-        (BlockChainKeys.elrond || BlockChainKeys.solana)
-      ) {
-        return `/${this.getItemType()}/${this.getBlockchain().getBlockChainPrivateLabel()}/${this.getAssetId()}`;
-      } else {
-        return `/${this.getItemType()}/${this.getBlockchain().getBlockChainPrivateLabel()}/${this.getAddress()}/${this.getTokenId()}`;
-      }
-    }
-
-    return `/${this.getItemType()}/${this.getAssetId()}`;
-  }
-
-  public getOwnersProfiles(): schema.IProfile[] {
-    return this.ownersProfiles
-      ? (this.ownersProfiles as schema.IProfile[])
-      : [];
-  }
-
-  public getAssetMedias(): schema.IMedia[] {
-    return this.medias ? (this.medias as schema.IMedia[]) : [];
-  }
-
-  public getAssetMediaType(): Media[] {
-    const medias = this.getAssetMedias().length
-      ? this.getAssetMedias()
-      : this.getOriginalUrls();
-    const detectedMedias: Media[] = [];
-
-    medias?.forEach((media) => {
-      detectedMedias.push(
-        this.detectMediaType(
-          media.url as string,
-          media.mimeType as string,
-          media.originalUrl as string,
-          media.originalMime as string
-        )
-      );
-    });
-    return detectedMedias;
-  }
-
-  public detectMediaType(
-    media: string,
-    mimeType: string,
-    originalUrl: string,
-    originalMime: string
-  ): Media {
-    const mediaFields = {
-      media,
-      nsfw: null,
-      mimeType,
-      previewUrl: null,
-      originalUrl,
-      alt: `${this.getName()} ${this.getAddress()}`,
-      originalMime,
-    } as BasicMediaType;
-
-    const mediaTypes = [
-      new AssetImage(mediaFields),
-      new AssetAudio(mediaFields),
-      new AssetScreenshot(mediaFields),
-      new AssetVideo(mediaFields),
-      new AssetObject(mediaFields),
-      new AssetOther(mediaFields),
-    ];
-
-    let currentMedia = new AssetOther(mediaFields);
-
-    for (let i = 0; i < mediaTypes.length; i++) {
-      if (mediaTypes[i].checkOwnType()) {
-        currentMedia = mediaTypes[i];
-        break;
-      }
-    }
-
-    return currentMedia;
-  }
-
-  public getCreatorsProfiles(): schema.IProfile[] {
-    return this.creatorsProfiles
-      ? (this.creatorsProfiles as schema.IProfile[])
-      : [];
-  }
-
-  public getOwnersAddresses(): string[] | null {
-    return this.ownersAddresses ? (this.ownersAddresses as string[]) : null;
-  }
-
-  public getCreatorsAddresses(): string[] | null {
-    return this.creatorsAddresses ? (this.creatorsAddresses as string[]) : null;
-  }
-}
-
-export default AssetEntity;

package/src/dto/AssetEntity/interface.ts

@@ -1,46 +0,0 @@
-import { assetSchema as schema } from '@ludo.ninja/api';
-import { BlockChainEntity, MarketPlaceEntity } from '@ludo.ninja/core';
-
-import { LabelKeys } from '@/dto/common/ItemType';
-import Media from '@/dto/common/Media';
-
-interface IAssetEntity {
-  getAssetId(): string;
-  getBlockchain(): BlockChainEntity;
-  getOwnersProfiles(): schema.IProfile[];
-  getBlockTimestamp(): number;
-  getCreatorsProfiles(): schema.IProfile[];
-  getSplitedAssetId(): string;
-  getAttributes(): schema.IAttribute[];
-  getAssetMediaType(): Media[];
-  getOwnersAddresses(): string[] | null;
-  getCreatorsAddresses(): string[] | null;
-  getIsSlider(): boolean;
-  getMarkets(): MarketPlaceEntity[] | null;
-  detectMediaType(
-    media: string,
-    mimeType: string,
-    originalUrl: string,
-    originalMime: string
-  ): Media;
-  getPrice(): {
-    latestPriceAmount: number | null;
-    latestPriceCurrency: string | null;
-  };
-  getAssetMedias(): schema.IMedia[];
-  getItemType(): LabelKeys;
-  getName(): null | string;
-  getOriginalUrls(): schema.IMedia[] | null;
-  getAddress(): string | null;
-  getCollection(): {
-    collectionId: string | null;
-    collectionTitle: string | null;
-    collectionMedias: schema.IMedia[];
-  };
-  getCategory(): string | null;
-  getCategoryLabel(): string | null;
-  getTokenId(): string | null;
-  getDescription(): string | null;
-  getRank(): number;
-}
-export default IAssetEntity;

package/src/dto/AssetEntity/views/AssetAudio/index.tsx

@@ -1,36 +0,0 @@
-import React from 'react';
-
-import { AudioVideoPlayer } from '@/components/assetPage';
-
-import Audio from '@/dto/common/Media/Audio';
-import { isExternalMediaAudio } from '@/dto/common/Media/Urls';
-import { BasicMediaType } from '@/dto/common/Media/interface';
-
-class AssetAudio extends Audio {
-  constructor({
-    media,
-    mimeType,
-    previewUrl,
-    nsfw,
-    alt,
-    originalMime,
-  }: BasicMediaType) {
-    super({ nsfw, previewUrl, media, mimeType, alt, originalMime });
-  }
-
-  getMediaUrl(): string {
-    return isExternalMediaAudio(this.getMedia());
-  }
-
-  displaySingleMedia(): JSX.Element {
-    return (
-      <AudioVideoPlayer
-        playerType="audio"
-        poster={null}
-        src={this.getMediaUrl()}
-      />
-    );
-  }
-}
-
-export default AssetAudio;

package/src/dto/AssetEntity/views/AssetImage/index.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import AssetImageView from '@/components/assetPage/media/AssetImage';
-
-import Image from '@/dto/common/Media/Image';
-import { isExternalMediaImage, mediaSizes } from '@/dto/common/Media/Urls';
-import { BasicMediaType } from '@/dto/common/Media/interface';
-
-class AssetImage extends Image {
-  constructor({
-    media,
-    mimeType,
-    previewUrl,
-    nsfw,
-    originalUrl,
-    alt,
-    originalMime,
-  }: BasicMediaType) {
-    super({
-      nsfw,
-      previewUrl,
-      media,
-      mimeType,
-      originalUrl,
-      alt,
-      originalMime,
-    });
-  }
-
-  getMediaUrl(): string {
-    return isExternalMediaImage(this.getMedia(), mediaSizes.regular);
-  }
-
-  displaySingleMedia(): JSX.Element {
-    return (
-      <AssetImageView
-        alt={this.getAlt()}
-        imageUrl={this.getMediaUrl()}
-        errorImg={'/noContent/noContent.svg'}
-      />
-    );
-  }
-
-  displayLinkedMedia(): JSX.Element {
-    return (
-      <AssetImageView
-        alt={this.getAlt()}
-        imageUrl={this.getMediaUrl()}
-        errorImg={'/noContent/noContent.svg'}
-        originalUrl={this.getOriginalUrl()}
-      />
-    );
-  }
-}
-
-export default AssetImage;

package/src/dto/AssetEntity/views/AssetObject/index.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-
-import { Viewer3D } from '@/components/assetPage';
-
-import Object from '@/dto/common/Media/Object';
-import { isExternalMediaObject } from '@/dto/common/Media/Urls';
-import { BasicMediaType } from '@/dto/common/Media/interface';
-
-class AssetObject extends Object {
-  constructor({
-    media,
-    mimeType,
-    previewUrl,
-    nsfw,
-    originalUrl,
-    alt,
-    originalMime,
-  }: BasicMediaType) {
-    super({
-      nsfw,
-      previewUrl,
-      media,
-      mimeType,
-      originalUrl,
-      alt,
-      originalMime,
-    });
-  }
-
-  getMediaUrl(): string {
-    return isExternalMediaObject(this.getMedia());
-  }
-
-  displaySingleMedia(): JSX.Element {
-    //todo: add previewUrl to 2d
-    return <Viewer3D file3D={this.getMediaUrl()} file2D={''} />;
-    // return (
-    //   <AssetImage
-    //     alt={this.getAlt()}
-    //     imageUrl={this.getMediaUrl()}
-    //     errorImg={'/noContent/noContent.svg'}
-    //   />
-    // );
-  }
-
-  displayLinkedMedia(): JSX.Element {
-    //todo: add previewUrl to 2d
-
-    return <Viewer3D file3D={this.getOriginalUrl()} file2D={''} />;
-
-    // return (
-    //   <AssetImage
-    //     alt={this.getAlt()}
-    //     imageUrl={this.getMediaUrl()}
-    //     errorImg={'/noContent/noContent.svg'}
-    //     originalUrl={this.getOriginalUrl() ?? this.getMediaUrl()}
-    //   />
-    // );
-  }
-
-  displayMiniature(): JSX.Element {
-    return <div> It`s otherMedia Miniature</div>;
-  }
-}
-
-export default AssetObject;

package/src/dto/AssetEntity/views/AssetOther/index.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-import AssetImage from '@/components/assetPage/media/AssetImage';
-
-import OtherClass from '@/dto/common/Media/Other';
-import { isExternalMediaImage, mediaSizes } from '@/dto/common/Media/Urls';
-import { BasicMediaType } from '@/dto/common/Media/interface';
-
-class AssetOther extends OtherClass {
-  constructor({
-    media,
-    mimeType,
-    previewUrl,
-    nsfw,
-    originalUrl,
-    alt,
-    originalMime,
-  }: BasicMediaType) {
-    super({
-      nsfw,
-      previewUrl,
-      media,
-      mimeType,
-      originalUrl,
-      alt,
-      originalMime,
-    });
-  }
-
-  getMediaUrl(): string {
-    return isExternalMediaImage(this.getMedia(), mediaSizes.regular);
-  }
-
-  displaySingleMedia(): JSX.Element {
-    return (
-      <AssetImage
-        alt={this.getAlt()}
-        imageUrl={this.getMediaUrl()}
-        errorImg={'/noContent/noContent.svg'}
-      />
-    );
-  }
-
-  displayLinkedMedia(): JSX.Element {
-    return (
-      <AssetImage
-        alt={this.getAlt()}
-        imageUrl={this.getMediaUrl()}
-        errorImg={'/noContent/noContent.svg'}
-        originalUrl={this.getOriginalUrl() ?? this.getMediaUrl()}
-      />
-    );
-  }
-
-  displayMiniature(): JSX.Element {
-    return <div> It`s otherMedia Miniature</div>;
-  }
-}
-
-export default AssetOther;