-
- {
- viewData?.data?.filePath ? (
- <>
-
+
+
+
+
{basename(parseWinPath(media.fsPath) || "")}
@@ -256,7 +276,7 @@ export const Item: React.FunctionComponent = ({media}: React.PropsWi
{getFolder()}
{
- (media?.stats?.size || media?.dimensions) && (
+ (media?.size || media?.dimensions) && (
Size:
{calculateSize()}
diff --git a/src/dashboardWebView/components/Media/MenuButton.tsx b/src/dashboardWebView/components/Media/MenuButton.tsx
new file mode 100644
index 00000000..22279a09
--- /dev/null
+++ b/src/dashboardWebView/components/Media/MenuButton.tsx
@@ -0,0 +1,20 @@
+import { Menu } from '@headlessui/react';
+import { DotsVerticalIcon } from '@heroicons/react/outline';
+import * as React from 'react';
+
+export interface IMenuButtonProps {
+ title: string;
+ disabled?: boolean;
+}
+
+export const MenuButton: React.FunctionComponent = ({ title, disabled }: React.PropsWithChildren) => {
+ return (
+
+
+ {title}
+
+
+
+ );
+};
+
diff --git a/src/dashboardWebView/components/Media/Pagination.tsx b/src/dashboardWebView/components/Media/Pagination.tsx
index dffc92ca..28fbe262 100644
--- a/src/dashboardWebView/components/Media/Pagination.tsx
+++ b/src/dashboardWebView/components/Media/Pagination.tsx
@@ -1,9 +1,11 @@
+import { EventData } from '@estruyf/vscode';
import { Messenger } from '@estruyf/vscode/dist/client';
import { RefreshIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { useRecoilState, useRecoilValue } from 'recoil';
+import { DashboardCommand } from '../../DashboardCommand';
import { DashboardMessage } from '../../DashboardMessage';
-import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector } from '../../state';
+import { LoadingAtom, MediaTotalSelector, PageAtom, SelectedMediaFolderSelector, SortingSelector } from '../../state';
import { FolderCreation } from './FolderCreation';
import { LIMIT } from './Media';
import { PaginationButton } from './PaginationButton';
@@ -12,6 +14,7 @@ export interface IPaginationProps {}
export const Pagination: React.FunctionComponent = ({}: React.PropsWithChildren) => {
const selectedFolder = useRecoilValue(SelectedMediaFolderSelector);
+ const crntSorting = useRecoilValue(SortingSelector);
const totalMedia = useRecoilValue(MediaTotalSelector);
const [ , setLoading ] = useRecoilState(LoadingAtom);
const [ page, setPage ] = useRecoilState(PageAtom);
@@ -46,11 +49,23 @@ export const Pagination: React.FunctionComponent = ({}: React.
Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder });
}
+ const mediaUpdate = (message: MessageEvent>) => {
+ if (message.data.command === DashboardCommand.mediaUpdate) {
+ setLoading(true);
+ Messenger.send(DashboardMessage.getMedia, {
+ page,
+ folder: selectedFolder || '',
+ sorting: crntSorting
+ });
+ }
+ }
+
React.useEffect(() => {
setLoading(true);
Messenger.send(DashboardMessage.getMedia, {
page,
- folder: selectedFolder || ''
+ folder: selectedFolder || '',
+ sorting: crntSorting
});
}, [page]);
@@ -58,11 +73,25 @@ export const Pagination: React.FunctionComponent = ({}: React.
setLoading(true);
Messenger.send(DashboardMessage.getMedia, {
page: 0,
- folder: selectedFolder || ''
+ folder: selectedFolder || '',
+ sorting: crntSorting
});
setPage(0);
}, [selectedFolder]);
+ React.useEffect(() => {
+ setLoading(true);
+ Messenger.send(DashboardMessage.getMedia, {
+ page,
+ folder: selectedFolder || '',
+ sorting: crntSorting
+ });
+ }, [crntSorting]);
+
+ React.useEffect(() => {
+ Messenger.listen(mediaUpdate);
+ }, []);
+
return (