@needle-tools/engine 4.9.3-next.002c20b → 4.9.3

package/src/engine/webcomponents/needle-engine.loading.ts

@@ -158,18 +158,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
     private onDoneLoading() {
         if (this._loadingElement) {
             if (debug) console.log("Hiding loading element");
-            // animate alpha to 0
-            const element = this._loadingElement;
-            element.animate([
-                { opacity: 1 },
-                { opacity: 0 }
-            ], {
-                duration: 200,
-                easing: 'ease-in-out',
-            }).addEventListener('finish', () => {
-                element.style.display = "none";
-                element.remove();
-            });
+            this._loadingElement.style.display = "none";
+            this._loadingElement.remove();
         }
         if (this._progressLoop)
             clearInterval(this._progressLoop);
@@ -200,7 +190,6 @@ export class EngineLoadingView implements ILoadingViewHandler {
                 loadingStyle = "light";
         }
 
-
         const hasLicense = hasProLicense();
         if (!existing) {
             this._loadingElement.style.position = "absolute";
@@ -208,7 +197,6 @@ export class EngineLoadingView implements ILoadingViewHandler {
             this._loadingElement.style.height = "100%";
             this._loadingElement.style.left = "0";
             this._loadingElement.style.top = "0";
-            this._loadingElement.style.overflow = "hidden";
             const loadingBackgroundColor = this._element.getAttribute("loading-background");
             if (loadingBackgroundColor) {
                 this._loadingElement.style.background = loadingBackgroundColor;
@@ -239,48 +227,24 @@ export class EngineLoadingView implements ILoadingViewHandler {
         }
 
         const content = document.createElement("div");
-        content.style.cssText = `
-            position: relative;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            width: 100%;
-            height: 100%;
-            pointer-events: none;
-        `
         this._loadingElement.appendChild(content);
 
-        const poster = this._element.getAttribute("poster");
-        if (poster !== null && poster !== "0") {
-            const backgroundImage = document.createElement("div");
-            const backgroundBlur = poster?.length ? "0px" : "50px";
-            backgroundImage.style.cssText = `
-            position: absolute;
-            left: 0;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            z-index: -1;
-            overflow: hidden;
-
-            margin: -${backgroundBlur};
-            background: url('${poster?.length ? poster : "/include/poster.webp"}') center center no-repeat;
-            background-size: cover;
-            filter: blur(${backgroundBlur});
-        `;
-            this._loadingElement.appendChild(backgroundImage);
-        }
-
         const logo = document.createElement("img");
-        const logoWidth = "80%";
-        const logoHeight = "15%";
-        const logoDelay = ".2s";
+        const logoSize = 120;
+        logo.style.width = `${logoSize}px`;
+        logo.style.height = `${logoSize}px`;
+        logo.style.paddingTop = "20px";
+        logo.style.paddingBottom = "10px";
+        logo.style.margin = "0px";
         logo.style.userSelect = "none";
         logo.style.objectFit = "contain";
+        logo.style.transition = "transform 1.5s ease-out, opacity .3s ease-in-out";
         logo.style.transform = "translateY(30px)";
-        logo.style.opacity = "0.0000001";
-        logo.style.transition = `transform 1s ease-out ${logoDelay}, opacity .3s ease-in-out ${logoDelay}`;
+        logo.style.opacity = "0.05";
+        setTimeout(() => {
+            logo.style.opacity = "1";
+            logo.style.transform = "translateY(0px)";
+        }, 1);
         logo.src = needleLogoOnlySVG;
         let isUsingCustomLogo = false;
         if (hasLicense && this._element) {
@@ -288,15 +252,8 @@ export class EngineLoadingView implements ILoadingViewHandler {
             if (customLogo) {
                 isUsingCustomLogo = true;
                 logo.src = customLogo;
-                setTimeout(() => {
-                    logo.style.opacity = "1";
-                    logo.style.transform = "translateY(0px)";
-                }, 1);
             }
         }
-
-        logo.style.width = `${logoWidth}`;
-        logo.style.height = `min(1000px, max(${logoHeight}, 50px))`;
         content.appendChild(logo);
 
         const details = document.createElement("div");
@@ -316,14 +273,18 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const maxWidth = 100;
         loadingBarContainer.style.display = "flex";
         loadingBarContainer.style.width = maxWidth + "%";
-        loadingBarContainer.style.height = "5px";
+        loadingBarContainer.style.height = "3px";
         loadingBarContainer.style.position = "absolute";
         loadingBarContainer.style.left = "0";
-        loadingBarContainer.style.top = "0px";
+        loadingBarContainer.style.bottom = "0px";
         loadingBarContainer.style.opacity = "0";
-        loadingBarContainer.style.transition = "opacity 1s ease-in-out";
-        loadingBarContainer.style.backgroundColor = "rgba(240,240,240,.5)"
+        loadingBarContainer.style.transition = "opacity 1s ease-in-out 2s";
         setTimeout(() => { loadingBarContainer.style.opacity = "1"; }, 1);
+        if (loadingStyle === "light")
+            loadingBarContainer.style.backgroundColor = "rgba(0,0,0,.2)"
+        else
+            loadingBarContainer.style.backgroundColor = "rgba(255,255,255,.2)"
+        // loadingBarContainer.style.alignItems = "center";
 
         this._loadingElement.appendChild(loadingBarContainer);
 
@@ -333,9 +294,9 @@ export class EngineLoadingView implements ILoadingViewHandler {
         const getGradientPos = function (t: number): string {
             return Mathf.lerp(0, maxWidth, t) + "%";
         }
-        // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
+        this._loadingBar.style.background = "#66A22F";
+            // `linear-gradient(90deg, #204f49 ${getGradientPos(0)}, #0BA398 ${getGradientPos(.3)}, #66A22F ${getGradientPos(.6)}, #D7DB0A ${getGradientPos(1)})`;
         this._loadingBar.style.backgroundAttachment = "fixed";
-        this._loadingBar.style.background = "#c4c4c4ab";
         this._loadingBar.style.width = "0%";
         this._loadingBar.style.height = "100%";
         if (hasLicense && this._element) {