diff --git a/src/component/FileManager/TopBar/Breadcrumb.tsx b/src/component/FileManager/TopBar/Breadcrumb.tsx index fe47af0..50e9663 100644 --- a/src/component/FileManager/TopBar/Breadcrumb.tsx +++ b/src/component/FileManager/TopBar/Breadcrumb.tsx @@ -1,34 +1,16 @@ +import { Box, ClickAwayListener, Menu, styled, TextField, useMediaQuery, useTheme } from "@mui/material"; +import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; +import { useIsOverflow } from "../../../hooks/useOverflow.tsx"; import { useAppDispatch, useAppSelector } from "../../../redux/hooks.ts"; -import { - Box, - ClickAwayListener, - Menu, - styled, - TextField, - useMediaQuery, - useTheme, -} from "@mui/material"; -import React, { - useCallback, - useContext, - useEffect, - useMemo, - useRef, - useState, -} from "react"; -import BreadcrumbButton, { - BreadcrumbButtonBase, - BreadcrumbButtonProps, -} from "./BreadcrumbButton.tsx"; +import { navigateToPath } from "../../../redux/thunks/filemanager.ts"; +import { mergeRefs } from "../../../util"; import CrUri from "../../../util/uri.ts"; import ChevronRight from "../../Icons/ChevronRight.tsx"; import MoreHorizontal from "../../Icons/MoreHorizontal.tsx"; -import { useIsOverflow } from "../../../hooks/useOverflow.tsx"; -import { mergeRefs } from "../../../util"; -import BreadcrumbHiddenItem from "./BreadcrumbHiddenItem.tsx"; import { NoOpDropUri, useFileDrag } from "../Dnd/DndWrappedFile.tsx"; -import { navigateToPath } from "../../../redux/thunks/filemanager.ts"; import { FmIndexContext } from "../FmIndexContext.tsx"; +import BreadcrumbButton, { BreadcrumbButtonBase, BreadcrumbButtonProps } from "./BreadcrumbButton.tsx"; +import BreadcrumbHiddenItem from "./BreadcrumbHiddenItem.tsx"; const PathTextField = styled(TextField)(() => ({ "& .MuiOutlinedInput-notchedOutline": { @@ -63,9 +45,7 @@ const useBreadcrumb = (targetPath?: string) => { const index = useContext(FmIndexContext); - const base = useAppSelector( - (s) => s.fileManager[index].path_root_with_category, - ); + const base = useAppSelector((s) => s.fileManager[index].path_root_with_category); const path = useAppSelector((s) => s.fileManager[index].path); const elements = useAppSelector((s) => s.fileManager[index].path_elements); @@ -204,10 +184,7 @@ const Breadcrumb = (props: BreadcrumbProps) => { onClick={onEdit} > {editing && ( - submitNewPath()} - > + submitNewPath()}> { @@ -257,17 +234,11 @@ const Breadcrumb = (props: BreadcrumbProps) => { slotProps={{ list: { dense: true, - } + }, }} > {hidedButtons && - hidedButtons.map((b) => ( - setAnchorEl(null)} - {...b} - /> - ))} + hidedButtons.map((b) => setAnchorEl(null)} {...b} />)} ); diff --git a/src/component/FileManager/TreeView/TreeFiles.tsx b/src/component/FileManager/TreeView/TreeFiles.tsx index c65a8ba..b72ec52 100644 --- a/src/component/FileManager/TreeView/TreeFiles.tsx +++ b/src/component/FileManager/TreeView/TreeFiles.tsx @@ -1,13 +1,13 @@ -import React, { useContext, useMemo } from "react"; -import TreeFile from "./TreeFile.tsx"; -import CrUri, { Filesystem } from "../../../util/uri.ts"; -import { useAppSelector } from "../../../redux/hooks.ts"; -import { useTranslation } from "react-i18next"; -import { useBreadcrumbButtons } from "../TopBar/BreadcrumbButton.tsx"; -import path from "path-browserify"; import { Box } from "@mui/material"; +import path from "path-browserify"; +import React, { useContext, useMemo } from "react"; +import { useTranslation } from "react-i18next"; +import { useAppSelector } from "../../../redux/hooks.ts"; +import CrUri, { Filesystem } from "../../../util/uri.ts"; import SideNavItem from "../../Frame/NavBar/SideNavItem.tsx"; import { FmIndexContext } from "../FmIndexContext.tsx"; +import { useBreadcrumbButtons } from "../TopBar/BreadcrumbButton.tsx"; +import TreeFile from "./TreeFile.tsx"; export interface TreeFilesProps { path: string; @@ -26,24 +26,12 @@ export const pinedPrefix = "Pined"; const TreeFiles = React.memo( React.forwardRef( ( - { - path: p, - level, - elements, - labelOverwrite, - notLoaded, - pinned, - flatten, - canDrop, - ...rest - }: TreeFilesProps, + { path: p, level, elements, labelOverwrite, notLoaded, pinned, flatten, canDrop, ...rest }: TreeFilesProps, ref: React.Ref, ) => { const { t } = useTranslation(); const fmIndex = useContext(FmIndexContext); - const parentsCache = useAppSelector( - (state) => state.fileManager[fmIndex].tree[p], - ); + const parentsCache = useAppSelector((state) => state.fileManager[fmIndex].tree[p]); const [limit, setLimit] = React.useState(50); const uri = useMemo(() => new CrUri(p), [p]); const nodeId = useMemo(() => { @@ -54,10 +42,7 @@ const TreeFiles = React.memo( return p; }, [pinned, p, flatten]); const [loading, displayName, startIcon, onClick] = useBreadcrumbButtons({ - name: - parentsCache && parentsCache.file - ? parentsCache.file.name - : path.basename(uri.path()), + name: parentsCache && parentsCache.file ? parentsCache.file.name : path.basename(uri.path()), is_latest: false, path: p, }); @@ -109,10 +94,7 @@ const TreeFiles = React.memo( }, [p, elements, parentsCache, limit]); const shadowChild = useMemo(() => { - if ( - flatten || - (parentsCache?.children && parentsCache.children.length == 0) - ) { + if (flatten || (parentsCache?.children && parentsCache.children.length == 0)) { return null; } return ; @@ -150,11 +132,7 @@ const TreeFiles = React.memo( : shadowChild} {limit < childTreeFiles.length ? ( - setLimit((l) => l + 50)} - /> + setLimit((l) => l + 50)} /> ) : null} ); diff --git a/src/component/Viewers/Video/VideoViewer.tsx b/src/component/Viewers/Video/VideoViewer.tsx index 4833ec4..2d43ecf 100644 --- a/src/component/Viewers/Video/VideoViewer.tsx +++ b/src/component/Viewers/Video/VideoViewer.tsx @@ -333,7 +333,7 @@ const VideoViewer = () => { url = url.replace(CrMaskedPrefix, ""); const currentFileUrl = new CrUri(getFileLinkedUri(viewerState.file)); const base = new CrUri(currentFileUrl.base()); - const realUrl = base.join(url); + const realUrl = base.join(...url.split("/")); try { const res = await dispatch(getFileEntityUrl({ uris: [realUrl.toString()] })); return res.urls[0]; diff --git a/src/util/uri.ts b/src/util/uri.ts index cfad823..eb8e8bf 100644 --- a/src/util/uri.ts +++ b/src/util/uri.ts @@ -196,11 +196,14 @@ export default class CrUri { } public path(): string { - return this.url.pathname; + return decodeURIComponent(this.url.pathname); } public setPath(path: string): this { - this.url.pathname = path; + this.url.pathname = path + .split("/") + .map((p) => encodeURIComponent(p)) + .join("/"); return this; }