diff --git a/CHANGELOG.md b/CHANGELOG.md index 98f68a18..9ae2741b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## [3.1.0] - (Upcoming release) - BETA version available at: [beta.frontmatter.codes](https://beta.frontmatter.codes) +- [#72](https://github.com/estruyf/vscode-front-matter/issues/72): Media view on the dashboard - [#73](https://github.com/estruyf/vscode-front-matter/issues/73): List view option for the dashboard - [#77](https://github.com/estruyf/vscode-front-matter/issues/77): Dashboard grouping pages functionality integrated - [#81](https://github.com/estruyf/vscode-front-matter/issues/81): Optimizing the content folders to use a new setting to simplify configuration @@ -10,6 +11,7 @@ - [#88](https://github.com/estruyf/vscode-front-matter/issues/88): Fix issue with search sorting - [#89](https://github.com/estruyf/vscode-front-matter/issues/89): Clear filter, sorting, and grouping button added - [#90](https://github.com/estruyf/vscode-front-matter/issues/90): Refactoring to use Recoil state management +- [#91](https://github.com/estruyf/vscode-front-matter/issues/91): Support image previews from content folders ## [3.0.2] - 2021-08-31 diff --git a/src/commands/Dashboard.ts b/src/commands/Dashboard.ts index 41284e82..791bc5a5 100644 --- a/src/commands/Dashboard.ts +++ b/src/commands/Dashboard.ts @@ -138,6 +138,10 @@ export class Dashboard { case DashboardMessage.copyToClipboard: env.clipboard.writeText(msg.data); break; + case DashboardMessage.refreshMedia: + Dashboard.media = []; + Dashboard.getMedia(0, msg?.data?.folder); + break; } }); } @@ -153,6 +157,7 @@ export class Dashboard { Dashboard.postWebviewMessage({ command: DashboardCommand.settings, data: { + beta: ext.isBetaVersion(), wsFolder: wsFolder ? wsFolder.fsPath : '', staticFolder: config.get(SETTINGS_CONTENT_STATIC_FOLDERS), folders: Folders.get(), diff --git a/src/pagesView/DashboardMessage.ts b/src/pagesView/DashboardMessage.ts index 3b315439..0fa3b3eb 100644 --- a/src/pagesView/DashboardMessage.ts +++ b/src/pagesView/DashboardMessage.ts @@ -9,4 +9,5 @@ export enum DashboardMessage { setPageViewType = 'setPageViewType', getMedia = 'getMedia', copyToClipboard = 'copyToClipboard', + refreshMedia = 'refreshMedia', } \ No newline at end of file diff --git a/src/pagesView/components/Contents/Contents.tsx b/src/pagesView/components/Contents/Contents.tsx index f7a7d2de..5817d556 100644 --- a/src/pagesView/components/Contents/Contents.tsx +++ b/src/pagesView/components/Contents/Contents.tsx @@ -29,7 +29,7 @@ export const Contents: React.FunctionComponent = ({pages, loadin { loading ? : } - + ); diff --git a/src/pagesView/components/Media/Item.tsx b/src/pagesView/components/Media/Item.tsx index 0e27d563..e4e2caf9 100644 --- a/src/pagesView/components/Media/Item.tsx +++ b/src/pagesView/components/Media/Item.tsx @@ -1,5 +1,5 @@ import { Messenger } from '@estruyf/vscode/dist/client'; -import { ClipboardCopyIcon, FolderIcon, PhotographIcon } from '@heroicons/react/outline'; +import { ClipboardCopyIcon } from '@heroicons/react/outline'; import { basename, dirname } from 'path'; import * as React from 'react'; import { useRecoilValue } from 'recoil'; @@ -69,12 +69,12 @@ export const Item: React.FunctionComponent = ({media}: React.PropsWi {basename(media.fsPath)}

- {getFolder()} + Folder: {getFolder()}

{ media?.stats?.size && (

- {calculateSize()} + Size: {calculateSize()}

) } diff --git a/src/pagesView/components/Media/Media.tsx b/src/pagesView/components/Media/Media.tsx index cca18f06..91527e15 100644 --- a/src/pagesView/components/Media/Media.tsx +++ b/src/pagesView/components/Media/Media.tsx @@ -1,10 +1,13 @@ import { Messenger } from '@estruyf/vscode/dist/client'; +import { EventData } from '@estruyf/vscode/dist/models'; import * as React from 'react'; import { useRecoilState, useRecoilValue } from 'recoil'; import { MediaInfo, MediaPaths } from '../../../models/MediaPaths'; import { DashboardCommand } from '../../DashboardCommand'; -import { MediaFoldersAtom, MediaTotalAtom, SettingsSelector } from '../../state'; +import { LoadingAtom, MediaFoldersAtom, MediaTotalAtom, SettingsSelector } from '../../state'; import { Header } from '../Header'; +import { Spinner } from '../Spinner'; +import { SponsorMsg } from '../SponsorMsg'; import { Item } from './Item'; import { List } from './List'; @@ -17,15 +20,23 @@ export const Media: React.FunctionComponent = (props: React.PropsWi const [ media, setMedia ] = React.useState([]); const [ , setTotal ] = useRecoilState(MediaTotalAtom); const [ , setFolders ] = useRecoilState(MediaFoldersAtom); + const [ loading, setLoading ] = useRecoilState(LoadingAtom); + + const messageListener = (message: MessageEvent>) => { + if (message.data.command === DashboardCommand.media) { + setLoading(false); + setMedia(message.data.data.media); + setTotal(message.data.data.total); + setFolders(message.data.data.folders); + } + } React.useEffect(() => { - Messenger.listen((message) => { - if (message.command === DashboardCommand.media) { - setMedia(message.data.media); - setTotal(message.data.total); - setFolders(message.data.folders); - } - }); + Messenger.listen(messageListener); + + return () => { + Messenger.unlisten(messageListener); + } }, ['']); return ( @@ -33,7 +44,7 @@ export const Media: React.FunctionComponent = (props: React.PropsWi
-
+
{ media.map((file) => ( @@ -42,6 +53,12 @@ export const Media: React.FunctionComponent = (props: React.PropsWi }
+ + { + loading && ( ) + } + +
); diff --git a/src/pagesView/components/Media/Pagination.tsx b/src/pagesView/components/Media/Pagination.tsx index 88443e9d..955dfa1f 100644 --- a/src/pagesView/components/Media/Pagination.tsx +++ b/src/pagesView/components/Media/Pagination.tsx @@ -1,8 +1,9 @@ import { Messenger } from '@estruyf/vscode/dist/client'; +import { RefreshIcon } from '@heroicons/react/outline'; import * as React from 'react'; -import { useRecoilValue } from 'recoil'; +import { useRecoilState, useRecoilValue } from 'recoil'; import { DashboardMessage } from '../../DashboardMessage'; -import { MediaTotalSelector, SelectedMediaFolderSelector } from '../../state'; +import { LoadingAtom, MediaTotalSelector, SelectedMediaFolderSelector } from '../../state'; import { FolderSelection } from './FolderSelection'; import { LIMIT } from './Media'; import { PaginationButton } from './PaginationButton'; @@ -12,6 +13,7 @@ export interface IPaginationProps {} export const Pagination: React.FunctionComponent = ({}: React.PropsWithChildren) => { const selectedFolder = useRecoilValue(SelectedMediaFolderSelector); const totalMedia = useRecoilValue(MediaTotalSelector); + const [ , setLoading ] = useRecoilState(LoadingAtom); const [ page, setPage ] = React.useState(0); const totalPages = Math.ceil(totalMedia / LIMIT) - 1; @@ -39,9 +41,13 @@ export const Pagination: React.FunctionComponent = ({}: React. return buttons; }; - const buttons = getButtons(); + const refresh = () => { + setPage(0); + Messenger.send(DashboardMessage.refreshMedia, { folder: selectedFolder }); + } React.useEffect(() => { + setLoading(true); Messenger.send(DashboardMessage.getMedia, { page, folder: selectedFolder || '' @@ -49,6 +55,7 @@ export const Pagination: React.FunctionComponent = ({}: React. }, [page]); React.useEffect(() => { + setLoading(true); Messenger.send(DashboardMessage.getMedia, { page: 0, folder: selectedFolder || '' @@ -61,7 +68,14 @@ export const Pagination: React.FunctionComponent = ({}: React. className="py-4 px-5 flex items-center justify-between bg-gray-200 border-b border-gray-300 dark:bg-vulcan-400 dark:border-vulcan-100" aria-label="Pagination" > -
+
+ +

Showing {(page * LIMIT) + 1} to {getTotalPage()} of{' '} {totalMedia} results @@ -89,7 +103,7 @@ export const Pagination: React.FunctionComponent = ({}: React. } }} /> - {buttons.map((button) => ( + {getButtons().map((button) => (