@ludo.ninja/components 1.1.1 → 1.1.3

package/dist/components/assetPage/slider/slideItem.jsx

@@ -1,57 +1,16 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 // 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var SlideWrapper = styled.div(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  //width: 450px;\n  //height: 450px;\n  position: relative;\n  border-radius: 16px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  margin: 0 auto;\n\n  ',
-        ' {\n    margin-right: 0;\n  }\n\n  ',
-        ' {\n    width: 280px;\n    height: 280px;\n  }\n\n  ',
-        ' {\n    width: 240px;\n    height: 240px;\n  }\n\n  & > div {\n    width: 100%;\n\n    /* ',
-        ' {\n    width:100%;\n    } */\n  }\n  ',
-        ' {\n    border-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  //width: 450px;\n  //height: 450px;\n  position: relative;\n  border-radius: 16px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  margin: 0 auto;\n\n  ',
-        ' {\n    margin-right: 0;\n  }\n\n  ',
-        ' {\n    width: 280px;\n    height: 280px;\n  }\n\n  ',
-        ' {\n    width: 240px;\n    height: 240px;\n  }\n\n  & > div {\n    width: 100%;\n\n    /* ',
-        ' {\n    width:100%;\n    } */\n  }\n  ',
-        ' {\n    border-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  ReactPlayerWrapper,
-  mediaQuery.desktop,
-  mediaQuery.tablet,
-  mediaQuery.desktop,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(16)
-);
+var SlideWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  //width: 450px;\n  //height: 450px;\n  position: relative;\n  border-radius: 16px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  margin: 0 auto;\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 280px;\n    height: 280px;\n  }\n\n  ", " {\n    width: 240px;\n    height: 240px;\n  }\n\n  & > div {\n    width: 100%;\n\n    /* ", " {\n    width:100%;\n    } */\n  }\n  ", " {\n    border-radius: ", ";\n  }\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  //width: 450px;\n  //height: 450px;\n  position: relative;\n  border-radius: 16px;\n  background-size: contain;\n  background-repeat: no-repeat;\n  margin: 0 auto;\n\n  ", " {\n    margin-right: 0;\n  }\n\n  ", " {\n    width: 280px;\n    height: 280px;\n  }\n\n  ", " {\n    width: 240px;\n    height: 240px;\n  }\n\n  & > div {\n    width: 100%;\n\n    /* ", " {\n    width:100%;\n    } */\n  }\n  ", " {\n    border-radius: ", ";\n  }\n"])), ReactPlayerWrapper, mediaQuery.desktop, mediaQuery.tablet, mediaQuery.desktop, mediaQuery.minWidthFourK, adaptiveValueCalc(16));
 export var SlideItem = function (_a) {
-  var item = _a.item,
-    key = _a.key;
-  return <SlideWrapper key={key}>{item.displayLinkedMedia()}</SlideWrapper>;
+    var item = _a.item, key = _a.key;
+    return <SlideWrapper key={key}>{item.displayLinkedMedia()}</SlideWrapper>;
 };
 var templateObject_1;

package/dist/components/assetPage/tittle/index.jsx

@@ -1,154 +1,51 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { useEffect, useState } from 'react';
-
 import Link from 'next/link';
-
 import styled from 'styled-components';
-
 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var SCollection = styled(Flex)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  margin-bottom: 8px;\n\n  img {\n    margin-right: 8px;\n    width: 28px;\n    height: 28px;\n    border-radius: 2px;\n  }\n\n  a {\n    font-size: 18px;\n    font-weight: 600;\n    color: ',
-        ';\n  }\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n\n    img {\n      margin-right: ',
-        ';\n      width: ',
-        ';\n      height: ',
-        ';\n      border-radius: ',
-        ';\n    }\n\n    a {\n      font-size: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  margin-bottom: 8px;\n\n  img {\n    margin-right: 8px;\n    width: 28px;\n    height: 28px;\n    border-radius: 2px;\n  }\n\n  a {\n    font-size: 18px;\n    font-weight: 600;\n    color: ',
-        ';\n  }\n\n  ',
-        ' {\n    margin-bottom: ',
-        ';\n\n    img {\n      margin-right: ',
-        ';\n      width: ',
-        ';\n      height: ',
-        ';\n      border-radius: ',
-        ';\n    }\n\n    a {\n      font-size: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  AccentColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(28),
-  adaptiveValueCalc(28),
-  adaptiveValueCalc(2),
-  adaptiveValueCalc(18)
-);
-var SH1 = styled(H1)(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  color: ',
-        ';\n  line-height: 42px;\n  word-break: break-word;\n\n  span {\n    padding-left: 5px;\n    color: blue;\n    cursor: pointer;\n  }\n\n  ',
-        ' {\n    line-height: ',
-        ';\n\n    span {\n      padding-left: ',
-        ';\n    }\n  }\n',
-      ],
-      [
-        '\n  color: ',
-        ';\n  line-height: 42px;\n  word-break: break-word;\n\n  span {\n    padding-left: 5px;\n    color: blue;\n    cursor: pointer;\n  }\n\n  ',
-        ' {\n    line-height: ',
-        ';\n\n    span {\n      padding-left: ',
-        ';\n    }\n  }\n',
-      ]
-    )),
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(42),
-  adaptiveValueCalc(5)
-);
+var SCollection = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin-bottom: 8px;\n\n  img {\n    margin-right: 8px;\n    width: 28px;\n    height: 28px;\n    border-radius: 2px;\n  }\n\n  a {\n    font-size: 18px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      margin-right: ", ";\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    }\n\n    a {\n      font-size: ", ";\n    }\n  }\n"], ["\n  margin-bottom: 8px;\n\n  img {\n    margin-right: 8px;\n    width: 28px;\n    height: 28px;\n    border-radius: 2px;\n  }\n\n  a {\n    font-size: 18px;\n    font-weight: 600;\n    color: ", ";\n  }\n\n  ", " {\n    margin-bottom: ", ";\n\n    img {\n      margin-right: ", ";\n      width: ", ";\n      height: ", ";\n      border-radius: ", ";\n    }\n\n    a {\n      font-size: ", ";\n    }\n  }\n"])), AccentColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(8), adaptiveValueCalc(28), adaptiveValueCalc(28), adaptiveValueCalc(2), adaptiveValueCalc(18));
+var SH1 = styled(H1)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: ", ";\n  line-height: 42px;\n  word-break: break-word;\n\n  span {\n    padding-left: 5px;\n    color: blue;\n    cursor: pointer;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    span {\n      padding-left: ", ";\n    }\n  }\n"], ["\n  color: ", ";\n  line-height: 42px;\n  word-break: break-word;\n\n  span {\n    padding-left: 5px;\n    color: blue;\n    cursor: pointer;\n  }\n\n  ", " {\n    line-height: ", ";\n\n    span {\n      padding-left: ", ";\n    }\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(42), adaptiveValueCalc(5));
 var Collection = function (props) {
-  var _a;
-  if (!props.collectionTitle || !props.collectionId) return null;
-  return (
-    <SCollection alignItems="center">
-      {!!props.collectionMedias && (
-        <ImageInterceptor>
-          <ExternalImage
-            src={getAssetImage(
-              (_a = props.collectionMedias[0]) === null || _a === void 0
-                ? void 0
-                : _a.url,
-              '/noContent/noContent.svg',
-              mediaSizes.small
-            )}
-            alt="collection_img"
-            width={28}
-            height={28}
-            borderRadius={2}
-          />
-        </ImageInterceptor>
-      )}
-      <Link
-        href={'/collection/'.concat(
-          props === null || props === void 0 ? void 0 : props.collectionId
-        )}
-      >
+    var _a;
+    if (!props.collectionTitle || !props.collectionId)
+        return null;
+    return (<SCollection alignItems="center">
+      {!!props.collectionMedias && (<ImageInterceptor>
+          <ExternalImage src={getAssetImage((_a = props.collectionMedias[0]) === null || _a === void 0 ? void 0 : _a.url, '/noContent/noContent.svg', mediaSizes.small)} alt="collection_img" width={28} height={28} borderRadius={2}/>
+        </ImageInterceptor>)}
+      <Link href={"/collection/".concat(props === null || props === void 0 ? void 0 : props.collectionId)}>
         {props.collectionTitle}
       </Link>
-    </SCollection>
-  );
+    </SCollection>);
 };
 export var Title = function (_a) {
-  var name = _a.name,
-    collectionTitle = _a.collectionTitle,
-    collectionMedias = _a.collectionMedias,
-    collectionId = _a.collectionId;
-  var _b = useState(name),
-    cuttedString = _b[0],
-    setCuttedString = _b[1];
-  var _c = useState(false),
-    isNeedReadMore = _c[0],
-    setNeedReadMore = _c[1];
-  useEffect(function () {
-    if (name && name.length > 35) {
-      setCuttedString(name.slice(0, 35));
-      setNeedReadMore(true);
-    }
-  }, []);
-  var handleReadMore = function () {
-    setCuttedString(name);
-    setNeedReadMore(false);
-  };
-  return (
-    <Flex flexDirection="column">
-      <Collection
-        collectionId={collectionId}
-        collectionTitle={collectionTitle}
-        collectionMedias={collectionMedias}
-      />
+    var name = _a.name, collectionTitle = _a.collectionTitle, collectionMedias = _a.collectionMedias, collectionId = _a.collectionId;
+    var _b = useState(name), cuttedString = _b[0], setCuttedString = _b[1];
+    var _c = useState(false), isNeedReadMore = _c[0], setNeedReadMore = _c[1];
+    useEffect(function () {
+        if (name && name.length > 35) {
+            setCuttedString(name.slice(0, 35));
+            setNeedReadMore(true);
+        }
+    }, []);
+    var handleReadMore = function () {
+        setCuttedString(name);
+        setNeedReadMore(false);
+    };
+    return (<Flex flexDirection="column">
+      <Collection collectionId={collectionId} collectionTitle={collectionTitle} collectionMedias={collectionMedias}/>
       <SH1>
         {cuttedString}
         {isNeedReadMore && <span onClick={handleReadMore}>...</span>}
       </SH1>
-    </Flex>
-  );
+    </Flex>);
 };
 var templateObject_1, templateObject_2;

package/dist/components/assetPage/viewer3D/index.jsx

@@ -1,250 +1,85 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 import React, { Suspense, useEffect, useState } from 'react';
-
-import {
-  Center,
-  ContactShadows,
-  OrbitControls,
-  Stage,
-  useGLTF,
-} from '@react-three/drei';
+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 { 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';
-
-var __makeTemplateObject =
-  (this && this.__makeTemplateObject) ||
-  function (cooked, raw) {
-    if (Object.defineProperty) {
-      Object.defineProperty(cooked, 'raw', { value: raw });
-    } else {
-      cooked.raw = raw;
-    }
-    return cooked;
-  };
-
-var Togler = styled(Flex)(
-  templateObject_1 ||
-    (templateObject_1 = __makeTemplateObject(
-      [
-        '\n  border-radius: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  overflow: hidden;\n  z-index: 1;\n  border: 1px solid ',
-        ';\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n    top: ',
-        ';\n    right: ',
-        ';\n    border: ',
-        ' solid ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  border-radius: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  overflow: hidden;\n  z-index: 1;\n  border: 1px solid ',
-        ';\n\n  ',
-        ' {\n    border-radius: ',
-        ';\n    top: ',
-        ';\n    right: ',
-        ';\n    border: ',
-        ' solid ',
-        ';\n  }\n',
-      ]
-    )),
-  BlackColor,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(8),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(16),
-  adaptiveValueCalc(1),
-  BlackColor
-);
-var ButtonTogler = styled.button(
-  templateObject_2 ||
-    (templateObject_2 = __makeTemplateObject(
-      [
-        '\n  border: none;\n  cursor: pointer;\n  background: ',
-        ';\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  font-size: 13px;\n  font-weight: 40;\n  color: ',
-        ';\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    font-size: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  border: none;\n  cursor: pointer;\n  background: ',
-        ';\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  font-size: 13px;\n  font-weight: 40;\n  color: ',
-        ';\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    font-size: ',
-        ';\n  }\n',
-      ]
-    )),
-  function (props) {
-    return props.isActive ? InactiveButtonColor : WhiteColor;
-  },
-  function (props) {
-    return props.isActive ? BlackColor : TextGrayColor;
-  },
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(36),
-  adaptiveValueCalc(36),
-  adaptiveValueCalc(13)
-);
-var StyledAsset = styled.div(
-  templateObject_3 ||
-    (templateObject_3 = __makeTemplateObject(
-      [
-        '\n  max-height: 100%;\n  max-width: 100%;\n  width: 510px;\n  height: 510px;\n  margin-right: 60px;\n  position: relative;\n  overflow: hidden;\n  border-radius: 16px;\n  background-color: ',
-        ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  //border: 2px solid rgba(0, 0, 0, 0.5);\n\n  ',
-        ' {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
-        ' {\n    align-items: flex-start;\n    width: 320px;\n    margin-right: 0;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    margin-right: ',
-        ';\n    border-radius: ',
-        ';\n  }\n',
-      ],
-      [
-        '\n  max-height: 100%;\n  max-width: 100%;\n  width: 510px;\n  height: 510px;\n  margin-right: 60px;\n  position: relative;\n  overflow: hidden;\n  border-radius: 16px;\n  background-color: ',
-        ';\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  //border: 2px solid rgba(0, 0, 0, 0.5);\n\n  ',
-        ' {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ',
-        ' {\n    align-items: flex-start;\n    width: 320px;\n    margin-right: 0;\n  }\n\n  ',
-        ' {\n    width: ',
-        ';\n    height: ',
-        ';\n    margin-right: ',
-        ';\n    border-radius: ',
-        ';\n  }\n',
-      ]
-    )),
-  WhiteColor,
-  mediaQuery.desktop,
-  mediaQuery.tablet,
-  mediaQuery.minWidthFourK,
-  adaptiveValueCalc(510),
-  adaptiveValueCalc(510),
-  adaptiveValueCalc(60),
-  adaptiveValueCalc(16)
-);
+var Togler = styled(Flex)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  overflow: hidden;\n  z-index: 1;\n  border: 1px solid ", ";\n\n  ", " {\n    border-radius: ", ";\n    top: ", ";\n    right: ", ";\n    border: ", " solid ", ";\n  }\n"], ["\n  border-radius: 8px;\n  position: absolute;\n  top: 16px;\n  right: 16px;\n  overflow: hidden;\n  z-index: 1;\n  border: 1px solid ", ";\n\n  ", " {\n    border-radius: ", ";\n    top: ", ";\n    right: ", ";\n    border: ", " solid ", ";\n  }\n"])), BlackColor, mediaQuery.minWidthFourK, adaptiveValueCalc(8), adaptiveValueCalc(16), adaptiveValueCalc(16), adaptiveValueCalc(1), BlackColor);
+var ButtonTogler = styled.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: none;\n  cursor: pointer;\n  background: ", ";\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  font-size: 13px;\n  font-weight: 40;\n  color: ", ";\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n  }\n"], ["\n  border: none;\n  cursor: pointer;\n  background: ", ";\n  padding: 0;\n  width: 36px;\n  height: 36px;\n  font-size: 13px;\n  font-weight: 40;\n  color: ", ";\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    font-size: ", ";\n  }\n"])), function (props) { return (props.isActive ? InactiveButtonColor : WhiteColor); }, function (props) { return (props.isActive ? BlackColor : TextGrayColor); }, mediaQuery.minWidthFourK, adaptiveValueCalc(36), adaptiveValueCalc(36), adaptiveValueCalc(13));
+var StyledAsset = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-height: 100%;\n  max-width: 100%;\n  width: 510px;\n  height: 510px;\n  margin-right: 60px;\n  position: relative;\n  overflow: hidden;\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  //border: 2px solid rgba(0, 0, 0, 0.5);\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    align-items: flex-start;\n    width: 320px;\n    margin-right: 0;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n  }\n"], ["\n  max-height: 100%;\n  max-width: 100%;\n  width: 510px;\n  height: 510px;\n  margin-right: 60px;\n  position: relative;\n  overflow: hidden;\n  border-radius: 16px;\n  background-color: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  //border: 2px solid rgba(0, 0, 0, 0.5);\n\n  ", " {\n    width: 335px;\n    margin-right: 30px;\n  }\n\n  ", " {\n    align-items: flex-start;\n    width: 320px;\n    margin-right: 0;\n  }\n\n  ", " {\n    width: ", ";\n    height: ", ";\n    margin-right: ", ";\n    border-radius: ", ";\n  }\n"])), WhiteColor, mediaQuery.desktop, mediaQuery.tablet, mediaQuery.minWidthFourK, adaptiveValueCalc(510), adaptiveValueCalc(510), adaptiveValueCalc(60), adaptiveValueCalc(16));
 var ModelPreview = function (_a) {
-  var file3D = _a.file3D;
-  var gltf = useGLTF(file3D);
-  useFrame(function () {
-    gltf.scene.rotateY(0.002);
-  });
-  useEffect(
-    function () {
-      return function () {
-        gltf.scene.rotation.set(0, 0, 0);
-      };
-    },
-    [gltf]
-  );
-  return <primitive object={gltf.scene} />;
+    var file3D = _a.file3D;
+    var gltf = useGLTF(file3D);
+    useFrame(function () {
+        gltf.scene.rotateY(0.002);
+    });
+    useEffect(function () {
+        return function () {
+            gltf.scene.rotation.set(0, 0, 0);
+        };
+    }, [gltf]);
+    return <primitive object={gltf.scene}/>;
 };
 export var ScenePreview = function (_a) {
-  var file3D = _a.file3D;
-  if (typeof window === 'undefined' || !file3D) return null;
-  return (
-    <NoSsr>
-      <Suspense
-        fallback={
-          <Skeleton
-            style={{ position: 'absolute', left: 0, top: 0 }}
-            height="100%"
-            width="100%"
-          />
-        }
-      >
+    var file3D = _a.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"
-          />
+          <ContactShadows opacity={1} scale={1000} blur={0.5} far={100} resolution={2048} color="#003366"/>
           <Stage environment="city" preset="rembrandt">
             <Center>
-              <ModelPreview file3D={file3D} />
+              <ModelPreview file3D={file3D}/>
             </Center>
           </Stage>
           <OrbitControls />
         </Canvas>
       </Suspense>
-    </NoSsr>
-  );
+    </NoSsr>);
 };
 export var Viewer3D = function (_a) {
-  var file3D = _a.file3D,
-    file2D = _a.file2D;
-  var _b = useState('2D'),
-    activeTab = _b[0],
-    setActiveTab = _b[1];
-  var setIsDisabledSlider = useSliderStore(function (state) {
-    return state.setIsDisabled;
-  });
-  return (
-    <div
-      style={{
-        width: '100%',
-        height: '100%',
-      }}
-    >
+    var file3D = _a.file3D, file2D = _a.file2D;
+    var _b = useState('2D'), activeTab = _b[0], setActiveTab = _b[1];
+    var setIsDisabledSlider = useSliderStore(function (state) { return state.setIsDisabled; });
+    return (<div style={{
+            width: '100%',
+            height: '100%',
+        }}>
       <StyledAsset is3D={activeTab === '3D'}>
         <Togler>
-          <ButtonTogler
-            isActive={activeTab === '2D'}
-            onClick={function () {
-              setActiveTab('2D');
-              setIsDisabledSlider(false);
-            }}
-          >
+          <ButtonTogler isActive={activeTab === '2D'} onClick={function () {
+            setActiveTab('2D');
+            setIsDisabledSlider(false);
+        }}>
             2D
           </ButtonTogler>
-          <ButtonTogler
-            isActive={activeTab === '3D'}
-            onClick={function () {
-              setActiveTab('3D');
-              setIsDisabledSlider(true);
-            }}
-          >
+          <ButtonTogler isActive={activeTab === '3D'} onClick={function () {
+            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'}
-          />
-        )}
+        {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>
-  );
+    </div>);
 };
 var templateObject_1, templateObject_2, templateObject_3;