@ludo.ninja/components 0.5.0 → 1.0.0

package/src/components/toTopBtn/index.tsx

@@ -0,0 +1,117 @@
+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

@@ -0,0 +1,294 @@
+// 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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,36 @@
+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

@@ -0,0 +1,56 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,60 @@
+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;