Misc

client/src/app/data/store.ts

@@ -1,9 +1,7 @@
 import * as $ from 'react-exo/redux';
 import {KV} from 'react-exo/kv';
 import cfg from 'config';
-
 import app from 'app/store';
-import media from 'media/store';
 
 const reducer = $.persistReducer({
   key: cfg.APP_NAME,
@@ -18,7 +16,6 @@ const reducer = $.persistReducer({
 }, $.combineReducers({
   router: $.history.context.routerReducer,
   app: app.reducer,
-  media: media.reducer,
 }));
 
 const store = $.configureStore({

client/src/app/hooks/useCurrentResource.ts

@@ -0,0 +1,22 @@
+import {useState, useEffect} from 'react';
+import {useLocation} from 'react-exo/navigation';
+
+export function useCurrentResource() {
+  const {pathname, hash} = useLocation();
+  const [path, setPath] = useState(hash ? `${pathname}/${hash?.slice(1)}` : '');
+  const [maximized, setMaximized] = useState(true);
+
+  useEffect(() => {
+    if (hash) {
+      const _path = `${pathname}/${hash?.slice(1)}`;
+      if (_path !== path) {
+        setPath(_path);
+      }
+      setMaximized(true);
+    } else {
+      setMaximized(false);
+    }
+  }, [pathname, hash, path]);
+
+  return {path, maximized, setPath, setMaximized};
+}

client/src/app/interface/Menu.tsx

@@ -1,9 +1,8 @@
 import {Trans} from '@lingui/macro';
-import {View, ScrollView, Text} from 'react-native';
+import {View, ScrollView} from 'react-native';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
 import {StorageIndicator} from 'media/stacks/StorageIndicator';
 import {useFileSystem} from 'media/hooks/useFileSystem';
-import {useLists} from 'media/hooks/useLists';
 
 import {MenuItem} from './MenuItem';
 import {MenuHeader} from './MenuHeader';
@@ -16,9 +15,9 @@ export interface MenuProps {
 }
 
 export function Menu(props: MenuProps) {
-  const lists = useLists();
+  // const lists = useLists();
   const {importFile} = useFileSystem();
-  const {styles, theme} = useStyles(stylesheet);
+  const {styles} = useStyles(stylesheet);
 
   return (
     <View style={styles.bg}>
@@ -95,7 +94,7 @@ export function Menu(props: MenuProps) {
               path="/calendar"
             />
           </MenuSection>
-          <MenuSection label={<Trans>Favorites</Trans>}>
+          {/* <MenuSection label={<Trans>Favorites</Trans>}>
             {lists.map(({id}) =>
               <MenuItem
                 key={id}
@@ -106,7 +105,7 @@ export function Menu(props: MenuProps) {
                 mode="subitem"
               />
             )}
-          </MenuSection>
+          </MenuSection> */}
           {__DEV__ &&
             <MenuSection label={<Trans>Dev Mode</Trans>} closed>
               <MenuItem

client/src/app/layout.tsx

@@ -1,8 +1,8 @@
+import {useEffect} from 'react';
+import {useInitialTheme, UnistylesRuntime} from 'react-native-unistyles';
 import {StatusBar, Appearance} from 'react-native';
 import {GestureProvider} from 'react-exo/gesture';
 import {ToastRoot} from 'react-exo/toast';
-import {useEffect} from 'react';
-import {useInitialTheme, UnistylesRuntime} from 'react-native-unistyles';
 import {useScheme} from 'app/hooks/useScheme';
 import {hideBootsplash} from 'app/utils/bootsplash';
 
@@ -23,9 +23,15 @@ export function Layout(props: React.PropsWithChildren) {
 
   return (
     <GestureProvider style={{flex: 1}}>
-      <StatusBar barStyle={`${theme}-content`}/>
+      <StatusBar
+        barStyle={`${theme}-content`}
+      />
       {props.children}
-      <ToastRoot theme={theme} position="bottom-center" offset={12}/>
+      <ToastRoot
+        theme={theme}
+        offset={12}
+        position="bottom-center"
+      />
     </GestureProvider>
   );
 }

client/src/app/routes/MainLayout.tsx

@@ -1,61 +1,54 @@
-import {useState, useEffect} from 'react';
-import {useLocation, Outlet} from 'react-exo/navigation';
-import {useWindowDimensions, View, StatusBar} from 'react-native';
+import {Outlet} from 'react-exo/navigation';
 import {useStyles, createStyleSheet} from 'react-native-unistyles';
+import {useWindowDimensions, View, StatusBar} from 'react-native';
+import {useCurrentResource} from 'app/hooks/useCurrentResource';
 import {useDeviceSession} from 'app/hooks/useDeviceSession';
 import {useProfile} from 'app/data';
 import {Menu} from 'app/interface/Menu';
 import {Tabs} from 'app/interface/Tabs';
-import {File} from 'media/stacks/File';
+import {CurrentFile} from 'media/stacks/CurrentFile';
 
 import type {useAppContext} from 'app/hooks/useAppContext';
 
 export const APP_MENU_WIDTH = 146;
 export const APP_MENU_TAB_HEIGHT = 64;
 
 export default function MainLayout() {
+  const {styles, theme} = useStyles(stylesheet);
+  const resource = useCurrentResource();
   const screen = useWindowDimensions();
   const device = useDeviceSession();
   const profile = useProfile();
-  const {styles, theme} = useStyles(stylesheet);
-  const {pathname, hash} = useLocation();
-  const [pinnedFile, setPinnedFile] = useState(`${pathname}/${hash?.slice(1)}`);
-  const [pinMaximized, setPinMaximized] = useState(true);
-  const context: ReturnType<typeof useAppContext> = {device, profile};
-  const tabs = screen.width < theme.breakpoints.xs;
-  const vert = screen.width < theme.breakpoints.sm;
+
+  const isVertical = screen.width < theme.breakpoints.sm;
+  const hasTabs = screen.width < theme.breakpoints.xs;
   const vstyles = {
-    root: [styles.root, tabs && styles.rootTabs],
-    menu: [styles.menu, tabs && styles.menuTabs],
-    content: [styles.content, vert && styles.contentVert],
+    root: [styles.root, hasTabs && styles.rootTabs],
+    menu: [styles.menu, hasTabs && styles.menuTabs],
+    content: [styles.content, isVertical && styles.contentVert],
   };
 
-  useEffect(() => {
-    if (hash) {
-      const path = `${pathname}/${hash?.slice(1)}`;
-      if (path !== pinnedFile) {
-        setPinnedFile(path);
-      }
-      setPinMaximized(true);
-    } else {
-      setPinMaximized(false);
-    }
-  }, [hash, pathname, pinnedFile]);
+  const context: ReturnType<typeof useAppContext> = {
+    profile,
+    device,
+  };
 
   return <>
     <StatusBar networkActivityIndicatorVisible={!device?.online}/>
     <View style={vstyles.root}>
       <View style={vstyles.menu}>
-        {tabs ? <Tabs/> : <Menu {...{profile}}/>}
+        {hasTabs ? <Tabs/> : <Menu {...{profile}}/>}
       </View>
       <View style={vstyles.content}>
         <Outlet {...{context}}/>
-        <File
-          file={pinnedFile}
-          vertical={vert}
-          maximized={pinMaximized}
-          close={() => setPinnedFile('')}
-        />
+        {Boolean(resource.path) &&
+          <CurrentFile
+            path={resource.path}
+            vertical={isVertical}
+            maximized={resource.maximized}
+            close={() => resource.setPath('')}
+          />
+        }
       </View>
     </View>
   </>;

client/src/media/hooks/useDirectory.ts

@@ -1,6 +1,6 @@
 import {fs} from 'react-exo/fs';
 import {useState, useEffect} from 'react';
-import {INIT_DIRECTORIES} from './useInitDirectories';
+import {isInitDirectory} from 'media/utils/path';
 import type {HfsDirectoryEntry} from 'react-exo/fs';
 
 interface DirectoryOptions {
@@ -18,7 +18,7 @@ export function useDirectory(path: string, options?: DirectoryOptions) {
       for await (const entry of hfs.list?.(dirPath) ?? []) {
         if (entry.name.endsWith('.crswap')) continue;
         if (entry.name.startsWith('.') && !options?.showHidden) continue;
-        if (dirPath === '.' && INIT_DIRECTORIES.includes(entry.name)) continue;
+        if (dirPath === '.' && isInitDirectory(entry.name)) continue;
         entries.push(entry);
       }
       setEntries(entries.sort((a, b) => {

client/src/media/hooks/useFileSystem.tsx

@@ -1,53 +1,25 @@
-import {useCallback} from 'react';
 import {fs} from 'react-exo/fs';
-
-import type {OpenDirectoryOptions} from 'react-exo/fs';
+import {useCallback} from 'react';
+import {getStartInDir} from 'media/utils/path';
 
 export function useFileSystem() {
-  const getOpenDirectoryInit = useCallback((path: string) => {
-    let startIn: OpenDirectoryOptions['startIn'];
-    switch (path) {
-      case 'documents': startIn = 'documents'; break;
-      case 'pictures': startIn = 'pictures'; break;
-      case 'videos': startIn = 'videos'; break;
-      case 'music': startIn = 'music'; break;
-      case 'downloads': startIn = 'downloads'; break;
-      default: startIn = 'desktop';
-    }
-    return startIn;
-  }, []);
-
-  const importDirectory = useCallback(async (path = '.') => {
-    const startIn = getOpenDirectoryInit(path);
-    const dir = await fs.openDirectory({id: path, startIn, mode: 'read'});
-    const start = performance.now();
-    const copy = await fs.importDirectory(dir, path);
-    console.log('[fs] import dir', copy, performance.now() - start);
-  }, [getOpenDirectoryInit]);
-
   const importFile = useCallback(async () => {
+    const perfStart = performance.now();
     const file = await fs.openFile();
-    console.log('[fs] file', file);
-    const start = performance.now();
     const copy = await fs.importFile(file);
-    console.log('[fs] import file', copy, performance.now() - start);
+    console.log('[fs] import file', file, copy, performance.now() - perfStart);
   }, []);
 
-  const hashFile = useCallback(async () => {
-    const file = await fs.openFile();
-    console.log('[fs] file', file);
-    const start = performance.now();
-    const hash = await fs.hashFile(file, (bytes, total) => {
-      console.log('[fs] hashing', (bytes / total) * 100);
-    });
-    console.log('[fs] hash', hash, performance.now() - start);
+  const importDirectory = useCallback(async (path = '.') => {
+    const perfStart = performance.now();
+    const startIn = getStartInDir(path);
+    const dir = await fs.openDirectory({id: path, startIn, mode: 'read'});
+    const copy = await fs.importDirectory(dir, path);
+    console.log('[fs] import dir', dir, copy, performance.now() - perfStart);
   }, []);
 
   return {
-    getOpenDirectoryInit,
-    importDirectory,
     importFile,
-    hashFile,
+    importDirectory,
   };
 }
-

client/src/media/hooks/useInitDirectories.ts

@@ -1,16 +1,6 @@
 import {fs} from 'react-exo/fs';
 import {useEffect} from 'react';
-
-export const INIT_DIRECTORIES = [
-  'documents',
-  'music',
-  'pictures',
-  'videos',
-  'games',
-  'books',
-  'downloads',
-  'uploads',
-];
+import {INIT_DIRECTORIES} from 'media/utils/path';
 
 export function useInitDirectories() {
   useEffect(() => {