Fixes for the new 3d editor (#465)

Removed the login page and timeline and confusing UI components.
Extended scene to the bottom of the screen.

Co-authored-by: Michael Chung <michaelchung@michaels-mbp-2.home>

frontend/editor3d/app/hoc/withProtectedRoute.tsx

@@ -15,29 +15,29 @@ export const withProtectionRoute = <P extends object>(
       persistLogin();
     });
 
-    const { status, userInfo } = authentication;
-    //render according to auth status
-    if (
-      status.value === AUTH_STATUS.INIT ||
-      status.value === AUTH_STATUS.LOGGING ||
-      status.value === AUTH_STATUS.GET_USER_INFO
-    ) {
-      return (
-        <div className="fixed flex h-full w-full flex-col  items-center justify-center">
-          <LoadingDots type="bricks" message="Authentication in Process..." />
-        </div>
-      );
-    }
+    // const { status, userInfo } = authentication;
+    // //render according to auth status
+    // if (
+    //   status.value === AUTH_STATUS.INIT ||
+    //   status.value === AUTH_STATUS.LOGGING ||
+    //   status.value === AUTH_STATUS.GET_USER_INFO
+    // ) {
+    //   return (
+    //     <div className="fixed flex h-full w-full flex-col  items-center justify-center">
+    //       <LoadingDots type="bricks" message="Authentication in Process..." />
+    //     </div>
+    //   );
+    // }
 
-    if (
-      status.value === AUTH_STATUS.LOGGED_IN &&
-      userInfo.value &&
-      userInfo.value.can_access_studio
-    ) {
-      return <Component {...rest} />;
-    }
+    // if (
+    //   status.value === AUTH_STATUS.LOGGED_IN &&
+    //   userInfo.value &&
+    //   userInfo.value.can_access_studio
+    // ) {
+    return <Component {...rest} />; // uncomment everything else this gives the component to render.
+    // }
 
-    return <RedirectToLogin />;
+    // return <RedirectToLogin />;
   };
 
 const RedirectToLogin = () => {

frontend/editor3d/app/pages/PageEnigma/PageEditor.tsx

@@ -37,7 +37,7 @@ export const PageEditor = () => {
   };
 
   useEffect(() => {
-    timelineHeight.value = 208;
+    timelineHeight.value = 0; //timelineHeight.value = 208;
     sidePanelWidth.value = 340;
     window.onbeforeunload = () => {
       return "You may have unsaved changes.";
@@ -153,9 +153,9 @@ export const PageEditor = () => {
       </div>
 
       {/* Timeline */}
-      <div onClick={handleOverlayClick}>
+      {/* <div onClick={handleOverlayClick}>
         <Timeline />
-      </div>
+      </div> */}
     </div>
   );
 };

frontend/editor3d/app/pages/PageEnigma/PageStyling.tsx

@@ -69,11 +69,11 @@ export const PageStyling = () => {
         <div className="mt-4">
           <ControlsVideo />
         </div>
-        <div className="relative h-[120px] w-full overflow-hidden bg-ui-panel">
+        {/* <div className="relative h-[120px] w-full overflow-hidden bg-ui-panel">
           <LowerPanel>
             <Timeline />
           </LowerPanel>
-        </div>
+        </div> */}
         <div className="flex h-full justify-center gap-8 bg-ui-panel pt-4">
           <div className="relative flex w-[292px] flex-col gap-4">
             <div className="absolute -left-[140px] top-[90px] flex flex-col justify-center">

frontend/editor3d/app/pages/PageEnigma/comps/SidePanel/tabList.tsx

@@ -1,15 +1,10 @@
 import { ReactNode } from "react";
 import { FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
-import {
-  faBrush,
-  faCatSpace,
-} from "@fortawesome/pro-solid-svg-icons";
+import { faBrush, faCatSpace } from "@fortawesome/pro-solid-svg-icons";
 
 import { TabTitles } from "~/enums";
 import { StylizeTab } from "~/pages/PageEnigma/comps/SidePanelTabs/tabComps/StylizeTab/StylizeTab";
-import {
-  CartoonsTab,
-} from "../SidePanelTabs/tabComps/CharactersComboTabs";
+import { CartoonsTab } from "../SidePanelTabs/tabComps/CharactersComboTabs";
 
 export interface TabItem {
   icon: FontAwesomeIconProps["icon"];
@@ -23,9 +18,10 @@ export const tabList: TabItem[] = [
     title: TabTitles.GROUP_CARTOONS,
     component: <CartoonsTab />,
   },
-  {
-    icon: faBrush,
-    title: TabTitles.STYLIZE,
-    component: <StylizeTab />,
-  }
+
+  // {
+  //   icon: faBrush,
+  //   title: TabTitles.STYLIZE,
+  //   component: <StylizeTab />,
+  // }
 ];

frontend/editor3d/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/AnimeTab.tsx

@@ -20,15 +20,15 @@ export const AnimeTab = () => {
         setSubpage={(newPage) => {
           setCurrSubpage(newPage);
         }}
-        subPageTitles={[TabTitles.CHARACTERS, TabTitles.ANIMATION]}
-        subPageTitleIcons={[faPerson, faRabbitRunning]}
+        subPageTitles={[TabTitles.CHARACTERS]} // , TabTitles.ANIMATION
+        subPageTitleIcons={[faPerson]} // faRabbitRunning
       />
       {currSubpage === TabTitles.CHARACTERS && (
         <CharactersTab animationType={MediaFileAnimationType.MikuMikuDance} />
       )}
-      {currSubpage === TabTitles.ANIMATION && (
+      {/* {currSubpage === TabTitles.ANIMATION && (
         <AnimationsTab animationType={MediaFileAnimationType.MikuMikuDance} />
-      )}
+      )} */}
     </>
   );
 };

frontend/editor3d/app/pages/PageEnigma/comps/SidePanelTabs/tabComps/CharactersComboTabs/CartoonsTab.tsx

@@ -35,8 +35,8 @@ export const CartoonsTab = () => {
         }}
         subPageTitles={[
           TabTitles.CHARACTERS,
-          TabTitles.ANIMATION,
-          TabTitles.EXPRESSIONS,
+          // TabTitles.ANIMATION,
+          // TabTitles.EXPRESSIONS,
         ]}
         subPageTitleIcons={[faPerson, faRabbitRunning, faFaceSmileWink]}
       />
@@ -47,18 +47,6 @@ export const CartoonsTab = () => {
           demoCharacterItems={demoCharacterItems.value}
         />
       )}
-      {currSubpage === TabTitles.ANIMATION && (
-        <AnimationsTab
-          animationType={MediaFileAnimationType.Mixamo}
-          demoAnimationItems={demoAnimationItems.value}
-        />
-      )}
-      {currSubpage === TabTitles.EXPRESSIONS && (
-        <ExpressionTab
-        // animationType={MediaFileAnimationType.Mixamo}
-        // demoAnimationItems={demoAnimationItems.value}
-        />
-      )}
     </>
   );
 };

frontend/editor3d/app/signals/authentication/authentication.ts

@@ -5,7 +5,7 @@ import { AUTH_STATUS, LoyaltyProgram, USER_FEATURE_FLAGS } from "~/enums";
 const status = signal<AUTH_STATUS>(AUTH_STATUS.INIT);
 const userInfo = signal<UserInfo | undefined>(undefined);
 const activeSubs = signal<ActiveSubscriptions | undefined>(undefined);
-
+// Return all true for these inorder to remove the login.
 const canUpload3D = computed(() => {
   if (!userInfo.value || !userInfo.value.maybe_feature_flags) {
     return undefined;