show generating thumbnails in filebrowser (#10382)

* show `generating thumbnails` in filebrowser * fix check error * remove console log --------- Co-authored-by: Daniel Belmes <[email protected]>
EtherealEngine · Jun 14, 2024 · 8843016 · 8843016
1 parent 3f20ba4
commit 8843016
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 102 deletions.
diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
@@ -1169,6 +1169,7 @@
       "downloadProject": "Download Project",
       "uploadAssets": "Upload Assets",
       "search-placeholder": "Search folders",
+      "generatingThumbnails": "Generating Thumbnails ({{count}} remaining)",
       "fileProperties": {
         "name": "Name:",
         "type": "Type:",
@@ -1380,9 +1381,5 @@
   "tabs": {
     "scene-assets": "Assets",
     "project-assets": "Project Assets"
-  },
-  "generatingThumbnails": {
-    "title": "Generating Thumbnails",
-    "amountRemaining": "{{count}} remaining"
   }
 }
diff --git a/packages/client-core/src/common/services/FileThumbnailJobState.tsx b/packages/client-core/src/common/services/FileThumbnailJobState.tsx
@@ -45,7 +45,7 @@ import { useTexture } from '@etherealengine/engine/src/assets/functions/resource
 import { GLTFDocumentState } from '@etherealengine/engine/src/gltf/GLTFDocumentState'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
 import { getModelSceneID } from '@etherealengine/engine/src/scene/functions/loaders/ModelFunctions'
-import { NO_PROXY, defineState, getMutableState, none, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import { NO_PROXY, defineState, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
@@ -69,10 +69,8 @@ import { ErrorComponent } from '@etherealengine/engine/src/scene/components/Erro
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
 import { iterateEntityNode } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import { Paginated } from '@feathersjs/feathers'
-import { useTranslation } from 'react-i18next'
 import { uploadToFeathersService } from '../../util/upload'
 import { getCanvasBlob } from '../utils'
-import { ProgressBarState } from './ProgressBarState'
 
 type ThumbnailJob = {
   key: string
@@ -125,23 +123,6 @@ const uploadThumbnail = async (key: string, projectName: string, staticResourceI
 
 const seenThumbnails = new Set<string>()
 
-const ProgressBar = () => {
-  const thumbnailJobState = useMutableState(FileThumbnailJobState)
-  const { t } = useTranslation()
-
-  return (
-    <div
-      key="thumbnail-generation-progress-bar"
-      className="pointer-events-none fixed inset-x-0 top-0 z-[1000] m-2 flex justify-center"
-    >
-      <div className="flex max-w-[500px] flex-col items-center rounded-md bg-gray-700 bg-opacity-50 px-4 py-2">
-        <div>{t('editor:generatingThumbnails.title')}</div>
-        <div>{t('editor:generatingThumbnails.amountRemaining', { count: thumbnailJobState.length })}</div>
-      </div>
-    </div>
-  )
-}
-
 export const FileThumbnailJobState = defineState({
   name: 'FileThumbnailJobState',
   initial: [] as ThumbnailJob[],
@@ -308,9 +289,7 @@ const ThumbnailJobReactor = () => {
     if (jobState.length > 0) {
       const newJob = jobState[0].get(NO_PROXY)
       currentJob.set(JSON.parse(JSON.stringify(newJob)))
-      getMutableState(ProgressBarState)['thumbnail-generation'].set(<ProgressBar />)
     } else {
-      getMutableState(ProgressBarState)['thumbnail-generation'].set(none)
       cleanupState()
     }
   }, [jobState.length])

diff --git a/packages/client-core/src/common/services/ProgressBarState.tsx b/packages/client-core/src/common/services/ProgressBarState.tsx
diff --git a/packages/editor/src/components/Editor2Container.tsx b/packages/editor/src/components/Editor2Container.tsx
@@ -39,7 +39,6 @@ import { ScenePanelTab } from '@etherealengine/ui/src/components/editor/panels/S
 import { ViewportPanelTab } from '@etherealengine/ui/src/components/editor/panels/Viewport'
 import { VisualScriptPanelTab } from '@etherealengine/ui/src/components/editor/panels/VisualScript'
 
-import { EditorProgressBar } from '@etherealengine/ui/src/components/editor/util/EditorProgressBar'
 import ErrorDialog from '@etherealengine/ui/src/components/tailwind/ErrorDialog'
 import PopupMenu from '@etherealengine/ui/src/primitives/tailwind/PopupMenu'
 import { t } from 'i18next'
@@ -163,7 +162,6 @@ const EditorContainer = () => {
         className="flex flex-col bg-black"
         style={scenePath.value ? { background: 'transparent' } : {}}
       >
-        <EditorProgressBar />
         <DndWrapper id="editor-container">
           <DragLayer />
           <Toolbar />

diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -54,9 +54,9 @@ import {
   ImageConvertDefaultParms,
   ImageConvertParms
 } from '@etherealengine/engine/src/assets/constants/ImageConvertParms'
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { useFind, useMutation, useSearch } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
-import React, { useEffect, useRef } from 'react'
+import React, { Fragment, useEffect, useRef } from 'react'
 import { useDrop } from 'react-dnd'
 import { useTranslation } from 'react-i18next'
 import { FaList } from 'react-icons/fa'
@@ -118,6 +118,22 @@ export function isFileDataType(value: any): value is FileDataType {
   return value && value.key
 }
 
+function GeneratingThumbnailsProgress() {
+  const { t } = useTranslation()
+  const thumbnailJobState = useMutableState(FileThumbnailJobState)
+
+  if (!thumbnailJobState.length) return null
+
+  return (
+    <LoadingView
+      titleClassname="mt-0"
+      containerClassname="flex-row mt-1"
+      className="mx-2 my-auto h-6 w-6"
+      title={t('editor:layout.filebrowser.generatingThumbnails', { count: thumbnailJobState.length })}
+    />
+  )
+}
+
 /**
  * FileBrowserPanel used to render view for AssetsPanel.
  */
@@ -351,7 +367,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
       >
         <span className="flex h-full w-full items-center justify-center space-x-2 overflow-x-auto whitespace-nowrap px-4">
           {breadcrumbDirectoryFiles.map((file, index, arr) => (
-            <>
+            <Fragment key={index}>
               {index !== 0 && ( // Add separator for all but the first item
                 <span className="cursor-default align-middle text-xs">{'>'}</span>
               )}
@@ -371,7 +387,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
                   </span>
                 </a>
               )}
-            </>
+            </Fragment>
           ))}
         </span>
       </nav>
@@ -622,6 +638,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         </Button>
       </div>
       {isLoading && <LoadingView title={t('editor:layout.filebrowser.loadingFiles')} className="h-6 w-6" />}
+      <GeneratingThumbnailsProgress />
       <div id="file-browser-panel" style={{ overflowY: 'auto', height: '100%' }}>
         <DndWrapper id="file-browser-panel">
           <DropArea />

diff --git a/packages/ui/src/components/editor/util/EditorProgressBar.tsx b/packages/ui/src/components/editor/util/EditorProgressBar.tsx
diff --git a/packages/ui/src/primitives/tailwind/LoadingView/index.stories.tsx b/packages/ui/src/primitives/tailwind/LoadingView/index.stories.tsx
@@ -40,5 +40,3 @@ export default {
   },
   argTypes
 }
-
-export const Default = { args: Component.defaultProps }
diff --git a/packages/ui/src/primitives/tailwind/LoadingView/index.tsx b/packages/ui/src/primitives/tailwind/LoadingView/index.tsx
@@ -88,8 +88,4 @@ const LoadingView = ({
 
 LoadingView.displayName = 'LoadingView'
 
-LoadingView.defaultProps = {
-  message: 'Loading...'
-}
-
 export default LoadingView
-Original file line number
+Diff line change
@@ Expand Up / @@ -40,5 +40,3 @@ export default { @@
       },
       argTypes
     }
-    export const Default = { args: Component.defaultProps }