cleaner asset names

FrameOS · Oct 7, 2024 · 03d5dba · 03d5dba
1 parent b296191
commit 03d5dba
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/frontend/src/scenes/frame/panels/Assets/Assets.tsx b/frontend/src/scenes/frame/panels/Assets/Assets.tsx
@@ -17,7 +17,7 @@ function humaniseSize(size: number) {
 
 export function Assets(): JSX.Element {
   const { frame } = useValues(frameLogic)
-  const { assetsLoading, assets } = useValues(assetsLogic({ frameId: frame.id }))
+  const { assetsLoading, cleanedAssets } = useValues(assetsLogic({ frameId: frame.id }))
   const { openAsset } = useActions(panelsLogic({ frameId: frame.id }))
   return (
     <div className="space-y-2">
@@ -26,7 +26,7 @@ export function Assets(): JSX.Element {
       ) : (
         <table className="w-full">
           <tbody>
-            {assets.map((asset) => (
+            {cleanedAssets.map((asset) => (
               <tr key={asset.path} className="even:bg-gray-700 hover:bg-gray-900">
                 <td onClick={() => openAsset(asset.path)} className="hover:underline cursor-pointer">
                   {asset.path}

diff --git a/frontend/src/scenes/frame/panels/Assets/assetsLogic.ts b/frontend/src/scenes/frame/panels/Assets/assetsLogic.ts
@@ -1,19 +1,20 @@
-import { actions, afterMount, connect, kea, key, path, props, reducers } from 'kea'
+import { actions, afterMount, connect, kea, key, path, props, reducers, selectors } from 'kea'
 
 import { AssetType } from '../../../../types'
 import { loaders } from 'kea-loaders'
 import { socketLogic } from '../../../socketLogic'
 
 import type { assetsLogicType } from './assetsLogicType'
+import { frameLogic } from '../../frameLogic'
 
-export interface assetsLogicProps {
+export interface AssetsLogicProps {
   frameId: number
 }
 
 export const assetsLogic = kea<assetsLogicType>([
   path(['src', 'scenes', 'frame', 'assetsLogic']),
-  props({} as assetsLogicProps),
-  connect({ logic: [socketLogic] }),
+  props({} as AssetsLogicProps),
+  connect(({ frameId }: AssetsLogicProps) => ({ logic: [socketLogic], values: [frameLogic({ frameId }), ['frame']] })),
   key((props) => props.frameId),
   loaders(({ props }) => ({
     assets: [
@@ -35,6 +36,18 @@ export const assetsLogic = kea<assetsLogicType>([
       },
     ],
   })),
+  selectors({
+    cleanedAssets: [
+      (s) => [s.assets, s.frame],
+      (assets, frame) => {
+        const assetsPath = frame.assets_path ?? '/srv/assets'
+        return assets.map((asset) => ({
+          ...asset,
+          path: asset.path.startsWith(assetsPath + '/') ? asset.path.substring(assetsPath.length + 1) : asset.path,
+        }))
+      },
+    ],
+  }),
   afterMount(({ actions, cache }) => {
     actions.loadAssets()
   }),