@ludo.ninja/components 0.6.0 → 1.0.1

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

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

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

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

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

@@ -0,0 +1,206 @@
+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>
+  );
+};