@ludo.ninja/components 1.4.3 → 1.4.4

package/src/components/assetPage/slider/index.tsx

@@ -1,235 +0,0 @@
-// link to carousel source https://dev.to/holdmypotion/react-3d-image-slider-5g6
-import React, { useEffect, useState } from 'react';
-
-import Slider, { Settings } from 'react-slick';
-import 'slick-carousel/slick/slick.css';
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { TextGrayColor, WhiteColor } from '@/styles/colors';
-
-import { useSliderStore } from '@/components/assetPage/slider/store';
-
-import { H6 } from '@system';
-
-import Media from '@/dto/common/Media';
-
-import { SlideItem } from './slideItem';
-
-const Wrapper = styled.div`
-  margin: 0 0 60px -160px;
-  width: 1400px;
-
-  ${mediaQuery.desktop} {
-    margin: 0 auto;
-    width: 100%;
-  }
-
-  ${mediaQuery.mobile} {
-    width: 95vw;
-    position: relative;
-    left: calc(((100vw - 320px) / -2) - -2.5vw);
-  }
-
-  .prevArrow {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    background: ${WhiteColor};
-    position: absolute;
-    top: calc(50% - 25px);
-    left: 165px;
-    z-index: 100;
-    cursor: pointer;
-    font-size: 2rem;
-
-    ${mediaQuery.desktop} {
-      left: 10px;
-    }
-
-    ${mediaQuery.tablet} {
-      left: 0;
-    }
-  }
-
-  .nextArrow {
-    left: calc(100% - 195px);
-    transform: rotate(180deg);
-
-    ${mediaQuery.desktop} {
-      left: calc(100% - 65px);
-    }
-
-    ${mediaQuery.tablet} {
-      left: calc(100% - 48px);
-    }
-  }
-
-  .disable {
-    display: none;
-  }
-
-  .slick-track {
-    display: flex;
-    align-items: center;
-  }
-
-  .slick-slide {
-    padding: 0 10px;
-    transform: scale(0.63);
-    transition: all 400ms;
-    opacity: 0.2;
-
-    ${mediaQuery.tablet} {
-      transform: scale(0.5);
-    }
-
-    &:not(.slick-active) {
-      pointer-events: none;
-    }
-  }
-
-  .slick-slide.slick-active.slick-center.slick-current {
-    transform: scale(1);
-    transition: all 400ms;
-    opacity: 1;
-  }
-
-  .medias-count {
-    margin-top: 15px;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin: 0 0 ${adaptiveValueCalc(60)} ${adaptiveValueCalc(-160)};
-    width: ${adaptiveValueCalc(1400)};
-
-    .medias-count {
-      margin-top: ${adaptiveValueCalc(15)};
-    }
-
-    .prevArrow {
-      width: ${adaptiveValueCalc(50)};
-      height: ${adaptiveValueCalc(50)};
-      top: calc(50% - ${adaptiveValueCalc(25)});
-      left: ${adaptiveValueCalc(165)};
-      font-size: ${adaptiveValueCalc(20)};
-
-      img {
-        width: ${adaptiveValueCalc(12)};
-        height: ${adaptiveValueCalc(15)};
-      }
-    }
-
-    .nextArrow {
-      left: calc(100% - ${adaptiveValueCalc(195)});
-    }
-
-    .slick-slide {
-      padding: 0 ${adaptiveValueCalc(10)};
-    }
-  }
-`;
-
-const PrevArrow = ({
-  disable,
-  onClick,
-}: {
-  disable: boolean;
-  onClick: () => void;
-}) => {
-  return (
-    <div
-      className={`${disable ? 'disable prevArrow' : 'prevArrow'}`}
-      onClick={onClick}
-    >
-      <img src={'/assetPage/arrow.svg'} width={12} height={15} alt="arrow" />
-    </div>
-  );
-};
-
-const NextArrow = ({
-  disable,
-  onClick,
-}: {
-  disable: boolean;
-  onClick: () => void;
-}) => {
-  return (
-    <div
-      className={`${
-        disable ? 'disable prevArrow nextArrow' : 'prevArrow nextArrow'
-      }`}
-      onClick={onClick}
-    >
-      <img src={'/assetPage/arrow.svg'} width={12} height={15} alt="arrow" />
-    </div>
-  );
-};
-
-export const CollectionSlider = ({ medias }: { medias: Media[] | null }) => {
-  if (!medias) return null;
-  return <SliderMedias medias={medias} />;
-};
-
-const SliderMedias = ({ medias }: { medias: Media[] }) => {
-  const setIsActiveSlider = useSliderStore((state) => state.setIsActiveSlider);
-  const isDisabled = useSliderStore((state) => state.isDisabled);
-
-  useEffect(() => {
-    setIsActiveSlider(true);
-    return () => {
-      setIsActiveSlider(false);
-    };
-  }, []);
-
-  const [imageIndex, setImageIndex] = useState(0);
-
-  const settings: Settings = {
-    draggable: !isDisabled,
-    swipe: !isDisabled,
-    arrows: !isDisabled,
-    centerMode: true,
-    infinite: false,
-    dots: false,
-    speed: 400,
-    swipeToSlide: true,
-    focusOnSelect: true,
-    variableWidth: true,
-    nextArrow: (
-      <NextArrow
-        disable={imageIndex === medias.length - 1}
-        onClick={() => setImageIndex((val) => val + 1)}
-      />
-    ),
-    prevArrow: (
-      <PrevArrow
-        disable={imageIndex === 0}
-        onClick={() => setImageIndex((val) => val - 1)}
-      />
-    ),
-    beforeChange: (current: number, next: number) => setImageIndex(next),
-  };
-
-  const collectionTemplate = medias.map((image, idx) => {
-    if (!image) return null;
-    return <SlideItem item={image} key={idx} />;
-  });
-
-  return (
-    <Wrapper>
-      <Slider {...settings}>{collectionTemplate}</Slider>
-      <H6
-        style={{ textAlign: 'center' }}
-        color={TextGrayColor}
-        className={'medias-count'}
-      >
-        {imageIndex + 1 + '/' + medias.length + ' medias'}
-      </H6>
-    </Wrapper>
-  );
-};

package/src/components/assetPage/slider/slideItem.tsx

@@ -1,55 +0,0 @@
-// link to carousel source https://dev.to/holdmypotion/react-3d-image-slider-5g6
-import React from 'react';
-
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import { ReactPlayerWrapper } from '@/components/assetPage/audioVideoPlayer';
-
-import Media from '@/dto/common/Media';
-
-const SlideWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  //width: 450px;
-  //height: 450px;
-  position: relative;
-  border-radius: 16px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  margin: 0 auto;
-
-  ${ReactPlayerWrapper} {
-    margin-right: 0;
-  }
-
-  ${mediaQuery.desktop} {
-    width: 280px;
-    height: 280px;
-  }
-
-  ${mediaQuery.tablet} {
-    width: 240px;
-    height: 240px;
-  }
-
-  & > div {
-    width: 100%;
-
-    /* ${mediaQuery.desktop} {
-    width:100%;
-    } */
-  }
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(16)};
-  }
-`;
-
-export const SlideItem = ({ item, key }: { item: Media; key: number }) => {
-  return <SlideWrapper key={key}>{item.displayLinkedMedia()}</SlideWrapper>;
-};

package/src/components/assetPage/slider/store.ts

@@ -1,23 +0,0 @@
-import { create } from 'zustand';
-
-interface ISliderStore {
-  isActiveSlider: boolean;
-  setIsActiveSlider: (isActiveSlider: boolean) => void;
-
-  isDisabled: boolean;
-  setIsDisabled: (isDisabled: boolean) => void;
-}
-
-export const useSliderStore = create<ISliderStore>()((setState, getState) => ({
-  isActiveSlider: false,
-  setIsActiveSlider: (isActiveSlider) => {
-    setState({ isActiveSlider });
-  },
-
-  isDisabled: false,
-  setIsDisabled: (isDisabled) => {
-    if (getState().isActiveSlider) {
-      setState({ isDisabled });
-    }
-  },
-}));

package/src/components/assetPage/tittle/index.tsx

@@ -1,143 +0,0 @@
-import React, { useEffect, useState } from 'react';
-
-import Link from 'next/link';
-
-import styled from 'styled-components';
-
-import { assetSchema as schema } from '@ludo.ninja/api';
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import { AccentColor, BlackColor } from '@/styles/colors';
-
-import { ImageInterceptor } from '@/system/Img/ImageInterceptor';
-
-import { ExternalImage, Flex, H1 } from '@system';
-
-import { getAssetImage, mediaSizes } from '@/dto/common/Media/Urls';
-
-const SCollection = styled(Flex)`
-  margin-bottom: 8px;
-
-  img {
-    margin-right: 8px;
-    width: 28px;
-    height: 28px;
-    border-radius: 2px;
-  }
-
-  a {
-    font-size: 18px;
-    font-weight: 600;
-    color: ${AccentColor};
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    margin-bottom: ${adaptiveValueCalc(8)};
-
-    img {
-      margin-right: ${adaptiveValueCalc(8)};
-      width: ${adaptiveValueCalc(28)};
-      height: ${adaptiveValueCalc(28)};
-      border-radius: ${adaptiveValueCalc(2)};
-    }
-
-    a {
-      font-size: ${adaptiveValueCalc(18)};
-    }
-  }
-`;
-
-const SH1 = styled(H1)`
-  color: ${BlackColor};
-  line-height: 42px;
-  word-break: break-word;
-
-  span {
-    padding-left: 5px;
-    color: blue;
-    cursor: pointer;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    line-height: ${adaptiveValueCalc(42)};
-
-    span {
-      padding-left: ${adaptiveValueCalc(5)};
-    }
-  }
-`;
-
-const Collection = (
-  props: Pick<
-    schema.IAsset,
-    'collectionTitle' | 'collectionMedias' | 'collectionId'
-  >
-) => {
-  if (!props.collectionTitle || !props.collectionId) return null;
-
-  return (
-    <SCollection alignItems="center">
-      {!!props.collectionMedias && (
-        <ImageInterceptor>
-          <ExternalImage
-            src={getAssetImage(
-              props.collectionMedias[0]?.url,
-              '/noContent/noContent.svg',
-              mediaSizes.small
-            )}
-            alt="collection_img"
-            width={28}
-            height={28}
-            borderRadius={2}
-          />
-        </ImageInterceptor>
-      )}
-      <Link href={`/collection/${props?.collectionId}`}>
-        {props.collectionTitle}
-      </Link>
-    </SCollection>
-  );
-};
-
-type TitleProps = {
-  collectionId: string | null;
-  collectionTitle: string | null;
-  collectionMedias: schema.IMedia[];
-  name: null | string;
-};
-
-export const Title = ({
-  name,
-  collectionTitle,
-  collectionMedias,
-  collectionId,
-}: TitleProps) => {
-  const [cuttedString, setCuttedString] = useState<typeof name | null>(name);
-  const [isNeedReadMore, setNeedReadMore] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (name && name.length > 35) {
-      setCuttedString(name.slice(0, 35));
-      setNeedReadMore(true);
-    }
-  }, []);
-
-  const handleReadMore = () => {
-    setCuttedString(name);
-    setNeedReadMore(false);
-  };
-  return (
-    <Flex flexDirection="column">
-      <Collection
-        collectionId={collectionId}
-        collectionTitle={collectionTitle}
-        collectionMedias={collectionMedias}
-      />
-      <SH1>
-        {cuttedString}
-        {isNeedReadMore && <span onClick={handleReadMore}>...</span>}
-      </SH1>
-    </Flex>
-  );
-};

package/src/components/assetPage/viewer3D/index.tsx

@@ -1,206 +0,0 @@
-import React, { Suspense, useEffect, useState } from 'react';
-
-import {
-  Center,
-  ContactShadows,
-  OrbitControls,
-  Stage,
-  useGLTF,
-} from '@react-three/drei';
-import { Canvas, useFrame } from '@react-three/fiber';
-import Skeleton from 'react-loading-skeleton';
-import styled from 'styled-components';
-
-import { adaptiveValueCalc } from '@ludo.ninja/ui/build/utils/4k';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-import {
-  BlackColor,
-  InactiveButtonColor,
-  TextGrayColor,
-  WhiteColor,
-} from '@/styles/colors';
-
-import AssetImage from '@/components/assetPage/media/AssetImage';
-import { useSliderStore } from '@/components/assetPage/slider/store';
-import NoSsr from '@/components/base/NoSSR';
-
-import { Flex } from '@system';
-
-type Viewer3dProps = {
-  file2D?: string | undefined | null;
-  file3D: string | undefined | null;
-};
-
-const Togler = styled(Flex)`
-  border-radius: 8px;
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  overflow: hidden;
-  z-index: 1;
-  border: 1px solid ${BlackColor};
-
-  ${mediaQuery.minWidthFourK} {
-    border-radius: ${adaptiveValueCalc(8)};
-    top: ${adaptiveValueCalc(16)};
-    right: ${adaptiveValueCalc(16)};
-    border: ${adaptiveValueCalc(1)} solid ${BlackColor};
-  }
-`;
-
-const ButtonTogler = styled.button<{ isActive: boolean }>`
-  border: none;
-  cursor: pointer;
-  background: ${(props) => (props.isActive ? InactiveButtonColor : WhiteColor)};
-  padding: 0;
-  width: 36px;
-  height: 36px;
-  font-size: 13px;
-  font-weight: 40;
-  color: ${(props) => (props.isActive ? BlackColor : TextGrayColor)};
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(36)};
-    height: ${adaptiveValueCalc(36)};
-    font-size: ${adaptiveValueCalc(13)};
-  }
-`;
-
-const StyledAsset = styled.div<{ is3D: boolean }>`
-  max-height: 100%;
-  max-width: 100%;
-  width: 510px;
-  height: 510px;
-  margin-right: 60px;
-  position: relative;
-  overflow: hidden;
-  border-radius: 16px;
-  background-color: ${WhiteColor};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  //border: 2px solid rgba(0, 0, 0, 0.5);
-
-  ${mediaQuery.desktop} {
-    width: 335px;
-    margin-right: 30px;
-  }
-
-  ${mediaQuery.tablet} {
-    align-items: flex-start;
-    width: 320px;
-    margin-right: 0;
-  }
-
-  ${mediaQuery.minWidthFourK} {
-    width: ${adaptiveValueCalc(510)};
-    height: ${adaptiveValueCalc(510)};
-    margin-right: ${adaptiveValueCalc(60)};
-    border-radius: ${adaptiveValueCalc(16)};
-  }
-`;
-
-const ModelPreview = ({ file3D }: { file3D: string }) => {
-  const gltf = useGLTF(file3D);
-  useFrame(() => {
-    gltf.scene.rotateY(0.002);
-  });
-
-  useEffect(() => {
-    return () => {
-      gltf.scene.rotation.set(0, 0, 0);
-    };
-  }, [gltf]);
-
-  return <primitive object={gltf.scene} />;
-};
-
-export const ScenePreview = ({ file3D }: Pick<Viewer3dProps, 'file3D'>) => {
-  if (typeof window === 'undefined' || !file3D) return null;
-  return (
-    <NoSsr>
-      <Suspense
-        fallback={
-          <Skeleton
-            style={{ position: 'absolute', left: 0, top: 0 }}
-            height="100%"
-            width="100%"
-          />
-        }
-      >
-        <Canvas resize={{ scroll: false }}>
-          <ContactShadows
-            opacity={1}
-            scale={1000}
-            blur={0.5}
-            far={100}
-            resolution={2048}
-            color="#003366"
-          />
-          <Stage environment="city" preset="rembrandt">
-            <Center>
-              <ModelPreview file3D={file3D} />
-            </Center>
-          </Stage>
-          <OrbitControls />
-        </Canvas>
-      </Suspense>
-    </NoSsr>
-  );
-};
-
-export const Viewer3D = ({ file3D, file2D }: Viewer3dProps) => {
-  const [activeTab, setActiveTab] = useState<'3D' | '2D'>('2D');
-  const setIsDisabledSlider = useSliderStore((state) => state.setIsDisabled);
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
-      <StyledAsset is3D={activeTab === '3D'}>
-        <Togler>
-          <ButtonTogler
-            isActive={activeTab === '2D'}
-            onClick={() => {
-              setActiveTab('2D');
-              setIsDisabledSlider(false);
-            }}
-          >
-            2D
-          </ButtonTogler>
-          <ButtonTogler
-            isActive={activeTab === '3D'}
-            onClick={() => {
-              setActiveTab('3D');
-              setIsDisabledSlider(true);
-            }}
-          >
-            3D
-          </ButtonTogler>
-        </Togler>
-
-        {activeTab === '3D' && file3D ? (
-          <div
-            style={{
-              cursor: 'pointer',
-              width: '100%',
-              height: '100%',
-            }}
-          >
-            <ScenePreview file3D={file3D} />
-          </div>
-        ) : (
-          <AssetImage
-            alt="fallback"
-            imageUrl={file2D || '/noContent/noContentObject.svg'}
-            errorImg={'/noContent/noContentObject.svg'}
-          />
-        )}
-      </StyledAsset>
-    </div>
-  );
-};