Image compression icon test

package.json

@@ -860,5 +860,7 @@
     "webpack": "4.44.2",
     "webpack-cli": "3.3.12"
   },
-  "dependencies": {}
+  "dependencies": {
+    "imagemin-cli": "^7.0.0"
+  }
 }

src/commands/Dashboard.ts

@@ -3,7 +3,7 @@ import { ArticleHelper } from './../helpers/ArticleHelper';
 import { basename, dirname, extname, join, parse } from "path";
 import { existsSync, readdirSync, statSync, unlinkSync, writeFileSync } from "fs";
 import { commands, Uri, ViewColumn, Webview, WebviewPanel, window, workspace, env, Position } from "vscode";
-import { FilesHelper, Settings as SettingsHelper } from '../helpers';
+import { Settings as SettingsHelper } from '../helpers';
 import { DraftField, Framework, SortingSetting, SortOrder, SortType, TaxonomyType } from '../models';
 import { Folders } from './Folders';
 import { DashboardCommand } from '../dashboardWebView/DashboardCommand';
@@ -28,6 +28,7 @@ import { ContentType } from '../helpers/ContentType';
 import { SortingOption } from '../dashboardWebView/models';
 import { Sorting } from '../helpers/Sorting';
 import imageSize from 'image-size';
+import { Media } from '../helpers/Media';
 
 export class Dashboard {
   private static webview: WebviewPanel | null = null;
@@ -203,6 +204,9 @@ export class Dashboard {
         case DashboardMessage.setFramework:
           Dashboard.setFramework(msg?.data);
           break;
+        case DashboardMessage.compressImage:
+          Media.optimize(msg?.data);
+          break;
         case DashboardMessage.setState:
           if (msg?.data?.key && msg?.data?.value) {
             Extension.getInstance().setState(msg?.data?.key, msg?.data?.value, "workspace");

src/components/icons/CompressIcon.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export interface ICompressIconProps {
+  className?: string;
+}
+
+export const CompressIcon: React.FunctionComponent<ICompressIconProps> = ({className}: React.PropsWithChildren<ICompressIconProps>) => {
+  return (
+    <svg className={className || ""} aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+      <path fill="currentColor" d="M436 192H312c-13.3 0-24-10.7-24-24V44c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v84h84c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm-276-24V44c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v84H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24zm0 300V344c0-13.3-10.7-24-24-24H12c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-84h84c6.6 0 12-5.4 12-12v-40c0-6.6-5.4-12-12-12H312c-13.3 0-24 10.7-24 24v124c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12z"></path>
+    </svg>
+  );
+};

src/dashboardWebView/DashboardMessage.ts

@@ -20,4 +20,5 @@ export enum DashboardMessage {
   createMediaFolder = 'createMediaFolder',
   setFramework = 'setFramework',
   setState = 'setState',
+  compressImage = 'compressImage',
 }

src/dashboardWebView/components/Media/Item.tsx

@@ -4,6 +4,7 @@ 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 { parseWinPath } from '../../../helpers/parseWinPath';
 import { MediaInfo } from '../../../models/MediaPaths';
 import { DashboardMessage } from '../../DashboardMessage';
@@ -61,6 +62,11 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
     Messenger.send(DashboardMessage.copyToClipboard, parseWinPath(relPath) || "");
   };
 
+  const compressImage = () => {
+    const relPath = getRelPath();
+    Messenger.send(DashboardMessage.compressImage, parseWinPath(relPath) || "");
+  };
+
   const insertToArticle = () => {
     const relPath = getRelPath();
     Messenger.send(DashboardMessage.insertPreviewImage, {
@@ -224,6 +230,12 @@ export const Item: React.FunctionComponent<IItemProps> = ({media}: React.PropsWi
                     <ClipboardCopyIcon className={`h-5 w-5`} />
                     <span className={`sr-only`}>Copy media path</span>
                   </button>
+                  <button title={`Compress image`} 
+                          className={`hover:text-teal-900 focus:outline-none`} 
+                          onClick={compressImage}>
+                    <CompressIcon className={`h-5 w-5`} />
+                    <span className={`sr-only`}>Compress image</span>
+                  </button>
                   <button title={`Delete media`} 
                           className={`hover:text-teal-900 focus:outline-none`} 
                           onClick={deleteMedia}>

src/helpers/Media.ts

@@ -0,0 +1,15 @@
+import { readdirSync } from 'fs';
+import { Extension } from './Extension';
+import { Notifications } from './Notifications';
+
+export class Media {
+
+  public static async optimize(file: string, quality: number = 0.8) {
+    if (!file) {
+      Notifications.warning('No file provided');
+      return;
+    }
+
+    Notifications.info(readdirSync(Extension.getInstance().extensionPath.fsPath).join(","));
+  }
+}