From 045cece0cea027b18ed0aa8f5b0e43344825fae9 Mon Sep 17 00:00:00 2001 From: Elio Struyf Date: Sun, 21 Nov 2021 11:32:56 +0100 Subject: [PATCH] #97 - Custom scripts to support media management --- src/commands/Dashboard.ts | 28 ++--- src/dashboardWebView/DashboardCommand.ts | 3 +- .../components/Media/Item.tsx | 113 +++++++++--------- .../components/Media/MenuButton.tsx | 20 ++++ .../components/Media/Pagination.tsx | 17 +++ .../components/Menu/MenuItem.tsx | 2 +- src/helpers/CustomScript.ts | 35 +++++- 7 files changed, 139 insertions(+), 79 deletions(-) create mode 100644 src/dashboardWebView/components/Media/MenuButton.tsx diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 13950633..3a9be624 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -227,6 +227,20 @@ export class Dashboard { Dashboard.resetMedia(); Dashboard.getMedia(0, folderPath); } + + /** + * Post data to the dashboard + * @param msg + */ + public static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) { + if (Dashboard.isDisposed) { + return; + } + + if (Dashboard.webview) { + Dashboard.webview?.webview.postMessage(msg); + } + } /** * Insert an image into the front matter or contents @@ -696,20 +710,6 @@ export class Dashboard { Dashboard.getMedia(page || 0, folder || ""); } - - /** - * Post data to the dashboard - * @param msg - */ - private static postWebviewMessage(msg: { command: DashboardCommand, data?: any }) { - if (Dashboard.isDisposed) { - return; - } - - if (Dashboard.webview) { - Dashboard.webview?.webview.postMessage(msg); - } - } /** * Retrieve the webview HTML contents diff --git a/src/dashboardWebView/DashboardCommand.ts b/src/dashboardWebView/DashboardCommand.ts index 42442972..a44b26a0 100644 --- a/src/dashboardWebView/DashboardCommand.ts +++ b/src/dashboardWebView/DashboardCommand.ts @@ -3,5 +3,6 @@ export enum DashboardCommand { pages = "pages", settings = "settings", media = "media", - viewData = "viewData" + viewData = "viewData", + mediaUpdate = "mediaUpdate" } \ No newline at end of file diff --git a/src/dashboardWebView/components/Media/Item.tsx b/src/dashboardWebView/components/Media/Item.tsx index b0993aad..8a30926b 100644 --- a/src/dashboardWebView/components/Media/Item.tsx +++ b/src/dashboardWebView/components/Media/Item.tsx @@ -1,18 +1,20 @@ import { Messenger } from '@estruyf/vscode/dist/client'; -import { ClipboardCopyIcon, CodeIcon, PencilIcon, PhotographIcon, PlayIcon, PlusCircleIcon, TrashIcon } from '@heroicons/react/outline'; +import { Menu } from '@headlessui/react'; +import { PhotographIcon } from '@heroicons/react/outline'; import { basename, dirname } from 'path'; import * as React from 'react'; import { useEffect } from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; -import { CompressIcon } from '../../../components/icons/CompressIcon'; import { CustomScript } from '../../../helpers/CustomScript'; import { parseWinPath } from '../../../helpers/parseWinPath'; import { ScriptType } from '../../../models'; import { MediaInfo } from '../../../models/MediaPaths'; import { DashboardMessage } from '../../DashboardMessage'; import { LightboxAtom, PageSelector, SelectedMediaFolderSelector, SettingsSelector, ViewDataSelector } from '../../state'; +import { MenuItem, MenuItems } from '../Menu'; import { Alert } from '../Modals/Alert'; import { Metadata } from '../Modals/Metadata'; +import { MenuButton } from './MenuButton' export interface IItemProps { media: MediaInfo; @@ -65,8 +67,7 @@ export const Item: React.FunctionComponent = ({media}: React.PropsWi }; const runCustomScript = (script: CustomScript) => { - const relPath = getRelPath(); - Messenger.send(DashboardMessage.runCustomScript, {script, path: relPath}); + Messenger.send(DashboardMessage.runCustomScript, {script, path: media.fsPath}); }; const insertToArticle = () => { @@ -159,6 +160,15 @@ export const Item: React.FunctionComponent = ({media}: React.PropsWi setFilename(getFileName()); }; + const customScriptActions = () => { + return (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFile).map(script => ( + runCustomScript(script)} /> + )) + } + useEffect(() => { if (media.alt !== alt) { setAlt(media.alt); @@ -195,65 +205,52 @@ export const Item: React.FunctionComponent = ({media}: React.PropsWi
- - { - viewData?.data?.filePath ? ( - <> - +
+ + + + + + { - (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && ( - + viewData?.data?.filePath ? ( + <> + + + { + (viewData?.data?.position && settings?.mediaSnippet && settings?.mediaSnippet.length > 0) && ( + + ) + } + + { customScriptActions() } + + ) : ( + <> + + + { customScriptActions() } + + + ) } - - ) : ( - <> - + + +
- { - (settings?.scripts || []).filter(script => script.type === ScriptType.MediaFile).map(script => ( - - )) - } - - - - ) - }

{basename(parseWinPath(media.fsPath) || "")} 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 cd0b5895..28fbe262 100644 --- a/src/dashboardWebView/components/Media/Pagination.tsx +++ b/src/dashboardWebView/components/Media/Pagination.tsx @@ -1,7 +1,9 @@ +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, SortingSelector } from '../../state'; import { FolderCreation } from './FolderCreation'; @@ -47,6 +49,17 @@ 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, { @@ -75,6 +88,10 @@ export const Pagination: React.FunctionComponent = ({}: React. }); }, [crntSorting]); + React.useEffect(() => { + Messenger.listen(mediaUpdate); + }, []); + return (