@ludo.ninja/components 2.0.0 → 2.0.2

package/build/components/toTopBtn/index.js

@@ -0,0 +1,95 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToTopBtnWithCustomHandler = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ScreenWidth_1 = require("@/styles/ScreenWidth");
+const colors_1 = require("@/styles/colors");
+const z_indexes_1 = require("@/styles/mixins/z-indexes");
+const scale_1 = require("@/utils/adaptive/scale");
+const screen_1 = require("@/utils/screen");
+const ui_1 = require("@/utils/ui");
+const styled_components_1 = __importDefault(require("styled-components"));
+const _4k_1 = require("@ludo.ninja/ui/build/utils/4k");
+const toTopBtn_svg_1 = __importDefault(require("@/public/toTopBtn/toTopBtn.svg"));
+// Styles
+const StyledToTopBnt = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  width: 48px;
+  height: 48px;
+  bottom: 36px;
+  right: 24px;
+  z-index: ${z_indexes_1.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: ${colors_1.AccentColor};
+    }
+  }
+
+  @media (max-width: 767px) {
+    position: fixed;
+    left: 0;
+    right: 0;
+    margin: 0 auto;
+  }
+
+  ${ScreenWidth_1.mediaQuery.minWidthFourK} {
+    width: ${(0, _4k_1.adaptiveValueCalc)(48)};
+    height: ${(0, _4k_1.adaptiveValueCalc)(48)};
+    bottom: ${(0, _4k_1.adaptiveValueCalc)(36)};
+    right: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    border-radius: ${(0, _4k_1.adaptiveValueCalc)(24)};
+    padding: ${(0, _4k_1.adaptiveValueCalc)(5)};
+    box-shadow: 0 ${(0, _4k_1.adaptiveValueCalc)(10)} ${(0, _4k_1.adaptiveValueCalc)(32)}
+      ${(0, _4k_1.adaptiveValueCalc)(-16)} rgba(33, 21, 95, 0.1);
+  }
+`;
+const ToTopBtnIconResize = () => {
+    const { windowDimensions } = (0, screen_1.useWindowDimensionsWithServerInitial)();
+    return ((0, jsx_runtime_1.jsx)(toTopBtn_svg_1.default, { style: (0, scale_1.getAdaptiveScale)({ windowDimensions, currentSize: 1 }) }));
+};
+const ToTopBtn = () => {
+    const [showBtn, setShowBtn] = (0, react_1.useState)(false);
+    let oldScrollY = document.documentElement.scrollTop;
+    const offsetPixels = 600;
+    (0, react_1.useEffect)(() => {
+        window.addEventListener('scroll', handleScroll);
+        return () => window.removeEventListener('scroll', handleScroll);
+    }, []);
+    const handleClickFunction = () => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+    };
+    const handleScroll = () => {
+        if ((0, ui_1.upBtnDistance)(document, offsetPixels)) {
+            if (oldScrollY > document.documentElement.scrollTop) {
+                setShowBtn(true);
+            }
+            oldScrollY = document.documentElement.scrollTop;
+        }
+        else {
+            setShowBtn(false);
+            oldScrollY = offsetPixels;
+        }
+    };
+    if (!showBtn)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(StyledToTopBnt, { onClick: handleClickFunction, children: (0, jsx_runtime_1.jsx)(ToTopBtnIconResize, {}) }));
+};
+const ToTopBtnWithCustomHandler = ({ handleClickFunction, }) => {
+    return ((0, jsx_runtime_1.jsx)(StyledToTopBnt, { onClick: handleClickFunction, children: (0, jsx_runtime_1.jsx)(ToTopBtnIconResize, {}) }));
+};
+exports.ToTopBtnWithCustomHandler = ToTopBtnWithCustomHandler;
+// Export
+exports.default = ToTopBtn;

package/build/dto/AssetEntity/index.d.ts

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

package/build/dto/AssetEntity/index.js

@@ -0,0 +1,223 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@ludo.ninja/core");
+const utils_1 = require("@ludo.ninja/utils");
+const views_1 = require("@/dto/AssetEntity/views");
+const AssetObject_1 = __importDefault(require("@/dto/AssetEntity/views/AssetObject"));
+const ItemType_1 = require("@/dto/common/ItemType");
+class AssetEntity {
+    assetId;
+    blockchain;
+    ownersProfiles;
+    ownersAddresses;
+    itemType;
+    address;
+    tokenId;
+    medias;
+    name;
+    description;
+    creatorsProfiles;
+    creatorsAddresses;
+    markets;
+    originalUrls;
+    rank;
+    collection;
+    category;
+    categoryLabel;
+    attributes;
+    blockTimestamp;
+    price;
+    constructor(asset) {
+        this.assetId = asset.assetId;
+        this.blockchain = new core_1.BlockChainEntity(asset?.blockchain);
+        this.markets =
+            asset.markets?.map((market) => new core_1.MarketPlaceEntity({
+                marketName: market?.marketName,
+                marketUrl: market?.marketUrl,
+                marketId: market?.marketUrl,
+            })) || [];
+        this.ownersProfiles = asset.ownersProfiles || null;
+        this.ownersAddresses = asset.ownersAddresses;
+        this.itemType = ItemType_1.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
+    getAssetId() {
+        return this.assetId;
+    }
+    getIsSlider() {
+        return this.getAssetMedias()
+            ? this.getAssetMedias()?.length > 1
+            : false;
+    }
+    getSplitedAssetId() {
+        return this.getAssetId().split('.')[1] || this.getAssetId();
+    }
+    getName() {
+        return this.name ? this.name : null;
+    }
+    getMarkets() {
+        return this.markets ? this.markets : null;
+    }
+    getBlockchain() {
+        return this.blockchain;
+    }
+    getPrice() {
+        return {
+            latestPriceAmount: this.price.latestPriceAmount
+                ? this.price.latestPriceAmount
+                : null,
+            latestPriceCurrency: this.price.latestPriceCurrency
+                ? this.price.latestPriceCurrency
+                : null,
+        };
+    }
+    getBlockTimestamp() {
+        return this.blockTimestamp;
+    }
+    getAttributes() {
+        return this.attributes?.length
+            ? this.attributes
+            : [];
+    }
+    getDescription() {
+        return this.description ? this.description : null;
+    }
+    getTokenId() {
+        return this.tokenId ? this.tokenId : null;
+    }
+    getCollection() {
+        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
+                : [],
+        };
+    }
+    getCategory() {
+        return this.category ? this.category : null;
+    }
+    getCategoryLabel() {
+        return this.categoryLabel ? this.categoryLabel : null;
+    }
+    getOriginalUrls() {
+        if (!this.originalUrls)
+            return null;
+        const convertedOriginalUrlsArray = [];
+        for (let i = 0; i < this.originalUrls?.length; i++) {
+            convertedOriginalUrlsArray.push({
+                url: (0, utils_1.checkGltfUrl)(this.originalUrls[i] || ''),
+                mimeType: null,
+                originalMime: null,
+            });
+        }
+        return convertedOriginalUrlsArray;
+    }
+    getItemType() {
+        return this.itemType;
+    }
+    getRank() {
+        return this.rank ? Math.round(this.rank) : 0;
+    }
+    getAddress() {
+        return this.address ? this.address : null;
+    }
+    getAssetLink() {
+        if (this.getItemType() === ItemType_1.LabelKeys.asset) {
+            if (this.getBlockchain().getBlockChainPrivateLabel() ===
+                (core_1.BlockChainKeys.elrond || core_1.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()}`;
+    }
+    getOwnersProfiles() {
+        return this.ownersProfiles
+            ? this.ownersProfiles
+            : [];
+    }
+    getAssetMedias() {
+        return this.medias ? this.medias : [];
+    }
+    getAssetMediaType() {
+        const medias = this.getAssetMedias().length
+            ? this.getAssetMedias()
+            : this.getOriginalUrls();
+        const detectedMedias = [];
+        medias?.forEach((media) => {
+            detectedMedias.push(this.detectMediaType(media.url, media.mimeType, media.originalUrl, media.originalMime));
+        });
+        return detectedMedias;
+    }
+    detectMediaType(media, mimeType, originalUrl, originalMime) {
+        const mediaFields = {
+            media,
+            nsfw: null,
+            mimeType,
+            previewUrl: null,
+            originalUrl,
+            alt: `${this.getName()} ${this.getAddress()}`,
+            originalMime,
+        };
+        const mediaTypes = [
+            new views_1.AssetImage(mediaFields),
+            new views_1.AssetAudio(mediaFields),
+            new views_1.AssetScreenshot(mediaFields),
+            new views_1.AssetVideo(mediaFields),
+            new AssetObject_1.default(mediaFields),
+            new views_1.AssetOther(mediaFields),
+        ];
+        let currentMedia = new views_1.AssetOther(mediaFields);
+        for (let i = 0; i < mediaTypes.length; i++) {
+            if (mediaTypes[i].checkOwnType()) {
+                currentMedia = mediaTypes[i];
+                break;
+            }
+        }
+        return currentMedia;
+    }
+    getCreatorsProfiles() {
+        return this.creatorsProfiles
+            ? this.creatorsProfiles
+            : [];
+    }
+    getOwnersAddresses() {
+        return this.ownersAddresses ? this.ownersAddresses : null;
+    }
+    getCreatorsAddresses() {
+        return this.creatorsAddresses ? this.creatorsAddresses : null;
+    }
+}
+exports.default = AssetEntity;

package/build/dto/AssetEntity/interface.d.ts

@@ -0,0 +1,39 @@
+import { assetSchema as schema } from '@ludo.ninja/api';
+import { BlockChainEntity, MarketPlaceEntity } from '@ludo.ninja/core';
+import Media from '@/dto/common/Media';
+import { LabelKeys } from '../common/ItemType';
+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/build/dto/AssetEntity/interface.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/build/dto/AssetEntity/views/AssetAudio/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import Audio from '@/dto/common/Media/Audio';
+import { BasicMediaType, TGetMediaUrlFunc } from '@/dto/common/Media/interface';
+declare class AssetAudio extends Audio {
+    constructor({ media, mimeType, previewUrl, nsfw, alt, originalMime, }: BasicMediaType);
+    getMediaUrl(): TGetMediaUrlFunc;
+    displaySingleMedia(): JSX.Element;
+}
+export default AssetAudio;

package/build/dto/AssetEntity/views/AssetAudio/index.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const assetPage_1 = require("@/components/assetPage");
+const Audio_1 = __importDefault(require("@/dto/common/Media/Audio"));
+const Urls_1 = require("@/dto/common/Media/Urls");
+const env_1 = require("@/store/env");
+class AssetAudio extends Audio_1.default {
+    constructor({ media, mimeType, previewUrl, nsfw, alt, originalMime, }) {
+        super({ nsfw, previewUrl, media, mimeType, alt, originalMime });
+    }
+    getMediaUrl() {
+        const media = this.getMedia();
+        return (getAudioENVDomain) => (0, Urls_1.isExternalMediaAudio)(media, getAudioENVDomain);
+    }
+    displaySingleMedia() {
+        return (0, jsx_runtime_1.jsx)(DisplaySingleMedia, { getMediaUrl: this.getMediaUrl() });
+    }
+}
+const DisplaySingleMedia = ({ getMediaUrl, }) => {
+    const getAudioENVDomain = (0, env_1.useEnvStore)((state) => state.getAudioDomain);
+    return ((0, jsx_runtime_1.jsx)(assetPage_1.AudioVideoPlayer, { playerType: "audio", poster: null, src: getMediaUrl(getAudioENVDomain) }));
+};
+exports.default = AssetAudio;

package/build/dto/AssetEntity/views/AssetImage/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import Image from '@/dto/common/Media/Image';
+import { BasicMediaType } from '@/dto/common/Media/interface';
+declare class AssetImage extends Image {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }: BasicMediaType);
+    getMediaUrl(): (NEXT_PUBLIC_STATIC_DOMAIN: string) => string;
+    displaySingleMedia(): JSX.Element;
+    displayLinkedMedia(): JSX.Element;
+}
+export default AssetImage;

package/build/dto/AssetEntity/views/AssetImage/index.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AssetImage_1 = __importDefault(require("@/components/assetPage/media/AssetImage"));
+const Image_1 = __importDefault(require("@/dto/common/Media/Image"));
+const Urls_1 = require("@/dto/common/Media/Urls");
+const env_1 = require("@/store/env");
+class AssetImage extends Image_1.default {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }) {
+        super({
+            nsfw,
+            previewUrl,
+            media,
+            mimeType,
+            originalUrl,
+            alt,
+            originalMime,
+        });
+    }
+    getMediaUrl() {
+        const media = this.getMedia();
+        return (NEXT_PUBLIC_STATIC_DOMAIN) => (0, Urls_1.isExternalMediaImage)(media, Urls_1.mediaSizes.regular, NEXT_PUBLIC_STATIC_DOMAIN);
+    }
+    displaySingleMedia() {
+        return ((0, jsx_runtime_1.jsx)(DisplayMedia, { alt: this.getAlt(), getMediaUrl: this.getMediaUrl() }));
+    }
+    displayLinkedMedia() {
+        return ((0, jsx_runtime_1.jsx)(DisplayMedia, { alt: this.getAlt(), getMediaUrl: this.getMediaUrl(), originalUrl: this.getOriginalUrl() }));
+    }
+}
+const DisplayMedia = ({ getMediaUrl, alt, originalUrl, }) => {
+    const NEXT_PUBLIC_STATIC_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_STATIC_DOMAIN);
+    return ((0, jsx_runtime_1.jsx)(AssetImage_1.default, { alt: alt, imageUrl: getMediaUrl(NEXT_PUBLIC_STATIC_DOMAIN), errorImg: '/noContent/noContent.svg', originalUrl: originalUrl }));
+};
+exports.default = AssetImage;

package/build/dto/AssetEntity/views/AssetObject/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import Object from '@/dto/common/Media/Object';
+import { BasicMediaType, TGetMediaUrlFunc } from '@/dto/common/Media/interface';
+declare class AssetObject extends Object {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }: BasicMediaType);
+    getMediaUrl(): TGetMediaUrlFunc;
+    displaySingleMedia(): JSX.Element;
+    displayLinkedMedia(): JSX.Element;
+    displayMiniature(): JSX.Element;
+}
+export default AssetObject;

package/build/dto/AssetEntity/views/AssetObject/index.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const assetPage_1 = require("@/components/assetPage");
+const Object_1 = __importDefault(require("@/dto/common/Media/Object"));
+const Urls_1 = require("@/dto/common/Media/Urls");
+const env_1 = require("@/store/env");
+class AssetObject extends Object_1.default {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }) {
+        super({
+            nsfw,
+            previewUrl,
+            media,
+            mimeType,
+            originalUrl,
+            alt,
+            originalMime,
+        });
+    }
+    getMediaUrl() {
+        const media = this.getMedia();
+        return (getMediaDomain) => (0, Urls_1.isExternalMediaObject)(media, getMediaDomain);
+    }
+    displaySingleMedia() {
+        //todo: add previewUrl to 2d
+        return (0, jsx_runtime_1.jsx)(DisplaySingleMedia, { getMediaUrl: this.getMediaUrl() });
+        // return <Viewer3D file3D={this.getMediaUrl(getMediaDomain)} file2D={''} />;
+        // return (
+        //   <AssetImage
+        //     alt={this.getAlt()}
+        //     imageUrl={this.getMediaUrl()}
+        //     errorImg={'/noContent/noContent.svg'}
+        //   />
+        // );
+    }
+    displayLinkedMedia() {
+        //todo: add previewUrl to 2d
+        return (0, jsx_runtime_1.jsx)(assetPage_1.Viewer3D, { file3D: this.getOriginalUrl(), file2D: '' });
+        // return (
+        //   <AssetImage
+        //     alt={this.getAlt()}
+        //     imageUrl={this.getMediaUrl()}
+        //     errorImg={'/noContent/noContent.svg'}
+        //     originalUrl={this.getOriginalUrl() ?? this.getMediaUrl()}
+        //   />
+        // );
+    }
+    displayMiniature() {
+        return (0, jsx_runtime_1.jsx)("div", { children: " It`s otherMedia Miniature" });
+    }
+}
+const DisplaySingleMedia = ({ getMediaUrl, }) => {
+    const getMediaDomain = (0, env_1.useEnvStore)((state) => state.getMediaDomain);
+    return (0, jsx_runtime_1.jsx)(assetPage_1.Viewer3D, { file3D: getMediaUrl(getMediaDomain), file2D: '' });
+};
+exports.default = AssetObject;

package/build/dto/AssetEntity/views/AssetOther/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import OtherClass from '@/dto/common/Media/Other';
+import { BasicMediaType } from '@/dto/common/Media/interface';
+declare class AssetOther extends OtherClass {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }: BasicMediaType);
+    getMediaUrl(): (NEXT_PUBLIC_STATIC_DOMAIN: string) => string;
+    displaySingleMedia(): JSX.Element;
+    displayLinkedMedia(): JSX.Element;
+    displayMiniature(): JSX.Element;
+}
+export default AssetOther;

package/build/dto/AssetEntity/views/AssetOther/index.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const AssetImage_1 = __importDefault(require("@/components/assetPage/media/AssetImage"));
+const Other_1 = __importDefault(require("@/dto/common/Media/Other"));
+const Urls_1 = require("@/dto/common/Media/Urls");
+const env_1 = require("@/store/env");
+class AssetOther extends Other_1.default {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }) {
+        super({
+            nsfw,
+            previewUrl,
+            media,
+            mimeType,
+            originalUrl,
+            alt,
+            originalMime,
+        });
+    }
+    getMediaUrl() {
+        const media = this.getMedia();
+        return (NEXT_PUBLIC_STATIC_DOMAIN) => (0, Urls_1.isExternalMediaImage)(media, Urls_1.mediaSizes.regular, NEXT_PUBLIC_STATIC_DOMAIN);
+    }
+    displaySingleMedia() {
+        return ((0, jsx_runtime_1.jsx)(DisplayMedia, { getMediaUrl: this.getMediaUrl(), alt: this.getAlt() }));
+    }
+    displayLinkedMedia() {
+        return ((0, jsx_runtime_1.jsx)(DisplayMedia, { getMediaUrl: this.getMediaUrl(), alt: this.getAlt(), originalUrl: this.getOriginalUrl(), isOriginalUrl: true }));
+    }
+    displayMiniature() {
+        return (0, jsx_runtime_1.jsx)("div", { children: " It`s otherMedia Miniature" });
+    }
+}
+const DisplayMedia = ({ getMediaUrl, alt, originalUrl, isOriginalUrl, }) => {
+    const NEXT_PUBLIC_STATIC_DOMAIN = (0, env_1.useEnvStore)((state) => state.NEXT_PUBLIC_STATIC_DOMAIN);
+    return ((0, jsx_runtime_1.jsx)(AssetImage_1.default, { alt: alt, imageUrl: getMediaUrl(NEXT_PUBLIC_STATIC_DOMAIN), errorImg: '/noContent/noContent.svg', originalUrl: isOriginalUrl
+            ? originalUrl ?? getMediaUrl(NEXT_PUBLIC_STATIC_DOMAIN)
+            : undefined }));
+};
+exports.default = AssetOther;

package/build/dto/AssetEntity/views/AssetScreenshot/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import Screenshot from '@/dto/common/Media/Screenshot';
+import { BasicMediaType } from '@/dto/common/Media/interface';
+declare class AssetScreenshot extends Screenshot {
+    constructor({ media, mimeType, previewUrl, nsfw, originalUrl, alt, originalMime, }: BasicMediaType);
+    getMediaUrl(): (NEXT_PUBLIC_STATIC_DOMAIN: string) => string;
+    displaySingleMedia(): JSX.Element;
+    displayLinkedMedia(): JSX.Element;
+}
+export default AssetScreenshot;