diff --git a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
index 3aad0836..67b56b6b 100644
--- a/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
+++ b/tdrive/frontend/src/app/views/client/body/drive/browser.tsx
@@ -163,7 +163,7 @@ export default memo(
{viewId == 'shared-with-me' ? (
<>
>}>
-
+
>
@@ -196,7 +196,7 @@ export default memo(
>}>
-
+
{
- const { isOpen, close, loading } = useDrivePreview();
+interface DrivePreviewProps {
+ items: DriveItem[];
+}
+
+export const DrivePreview: React.FC = ({ items }) => {
+ const history = useHistory();
+ const company = useRouterCompany();
+ const { status, isOpen, open, close, loading } = useDrivePreview();
const [modalLoading, setModalLoading] = useState(true);
const { loading: loadingData } = useDrivePreviewLoading();
const { type = '' } = useDrivePreviewDisplayData();
let animationTimeout: number = setTimeout(() => undefined);
+ const handleSwitchRight = () => {
+ const currentItem = status.item;
+ if (currentItem) {
+ const currentItemPos = items.findIndex(x => x.id === currentItem.id);
+ switchPreview(items[(currentItemPos + 1) % items.length]);
+ }
+ };
+
+ const handleSwitchLeft = () => {
+ const currentItem = status.item;
+ if (currentItem) {
+ const currentItemPos = items.findIndex(x => x.id === currentItem.id);
+ switchPreview(items[(currentItemPos - 1 + items.length) % items.length]);
+ }
+ };
useEffect(() => {
addShortcut({ shortcut: 'esc', handler: close });
@@ -32,6 +58,16 @@ export const DrivePreview = (): React.ReactElement => {
};
}, []);
+ useEffect(() => {
+ addShortcut({ shortcut: 'Right', handler: handleSwitchRight });
+ addShortcut({ shortcut: 'Left', handler: handleSwitchLeft });
+
+ return () => {
+ removeShortcut({ shortcut: 'Right', handler: handleSwitchRight });
+ removeShortcut({ shortcut: 'Left', handler: handleSwitchLeft });
+ };
+ }, [status]);
+
useEffect(() => {
clearTimeout(animationTimeout);
@@ -42,6 +78,17 @@ export const DrivePreview = (): React.ReactElement => {
}
}, [loading]);
+ const switchPreview = (item: DriveItem) => {
+ const device = getDevice();
+ if (device != 'ios' && device != 'android') {
+ close();
+ history.push(
+ RouterServices.generateRouteFromState({ companyId: company, viewId: '', itemId: item.id }),
+ );
+ open(item);
+ }
+ };
+
return (