Release 1.2.1

Luligu · Mar 25, 2024 · ad465db · ad465db
1 parent b64f65a
commit ad465db
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,10 +2,12 @@
 
 All notable changes to this project will be documented in this file.
 
-## [1.2.1] - 2024-03-24
+## [1.2.1] - 2024-03-25
 
 ### Added
 
+- [frontend]: Remove plugin from frontend.
+- [frontend]: Add plugin from frontend.
 - [workflow]: All packages now have a workflow on GitHub.
 - [frontend]: Frontend got updated to 0.8.4.
 

diff --git a/frontend/build/asset-manifest.json b/frontend/build/asset-manifest.json
@@ -1,15 +1,15 @@
 {
   "files": {
     "main.css": "/static/css/main.61f6cf42.css",
-    "main.js": "/static/js/main.feac417a.js",
+    "main.js": "/static/js/main.a9e270e2.js",
     "static/js/453.d855a71b.chunk.js": "/static/js/453.d855a71b.chunk.js",
     "index.html": "/index.html",
     "main.61f6cf42.css.map": "/static/css/main.61f6cf42.css.map",
-    "main.feac417a.js.map": "/static/js/main.feac417a.js.map",
+    "main.a9e270e2.js.map": "/static/js/main.a9e270e2.js.map",
     "453.d855a71b.chunk.js.map": "/static/js/453.d855a71b.chunk.js.map"
   },
   "entrypoints": [
     "static/css/main.61f6cf42.css",
-    "static/js/main.feac417a.js"
+    "static/js/main.a9e270e2.js"
   ]
 }
diff --git a/frontend/build/index.html b/frontend/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.feac417a.js"></script><link href="/static/css/main.61f6cf42.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/matterbridge 32x32.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><title>Matterbridge</title><link rel="manifest" href="/manifest.json"/><script defer="defer" src="/static/js/main.a9e270e2.js"></script><link href="/static/css/main.61f6cf42.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/frontend/build/static/js/main.feac417a.js → frontend/build/static/js/main.a9e270e2.js b/frontend/build/static/js/main.feac417a.js → frontend/build/static/js/main.a9e270e2.js
diff --git a/...ld/static/js/main.feac417a.js.LICENSE.txt → ...ld/static/js/main.a9e270e2.js.LICENSE.txt b/...ld/static/js/main.feac417a.js.LICENSE.txt → ...ld/static/js/main.a9e270e2.js.LICENSE.txt
diff --git a/frontend/build/static/js/main.a9e270e2.js.map b/frontend/build/static/js/main.a9e270e2.js.map
diff --git a/frontend/build/static/js/main.feac417a.js.map b/frontend/build/static/js/main.feac417a.js.map
diff --git a/frontend/src/components/Header.js b/frontend/src/components/Header.js
@@ -23,9 +23,10 @@ const theme = createTheme({
 });
 
 export function sendCommandToMatterbridge(command, param) {
-  console.log('sendCommandToMatterbridge:', command, param);
+  const sanitizedParam = param.replace(/\\/g, '*');
+  console.log('sendCommandToMatterbridge:', command, param, sanitizedParam);
   // Send a POST request to the Matterbridge API
-  fetch(`/api/command/${command}/${param}`, {
+  fetch(`/api/command/${command}/${sanitizedParam}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -51,15 +52,6 @@ function Header() {
     setOpen(false);
   };
 
-  // Define the function that sends the "restart" command
-  const handleAddPluginClick = () => {
-    sendCommandToMatterbridge('addplugin','xxxx');
-    setOpen(true);
-    setTimeout(() => {
-      setOpen(false);
-    }, 20000);
-  };
-
   const handleUpdateClick = () => {
     sendCommandToMatterbridge('update','now');
     setOpen(true);
@@ -87,8 +79,12 @@ function Header() {
         <Link to="/settings" className="nav-link">Settings</Link>
       </nav>
       <div className="header" style={{ flex: 1, display: 'flex', flexDirection: 'row', justifyContent: 'flex-end' }}>
-        <Tooltip title="Update matterbridge"><Button disabled theme={theme} color="primary" variant="contained" size="small" endIcon={<SystemUpdateAltIcon />} style={{ color: '#ffffff' }} onClick={handleUpdateClick}>Update</Button></Tooltip>        
-        <Tooltip title="Restart matterbridge"><Button theme={theme} color="primary" variant="contained" size="small" endIcon={<RestartAltIcon />} style={{ color: '#ffffff' }} onClick={handleRestartClick}>Restart</Button></Tooltip>        
+        <Tooltip title="Update matterbridge">
+          <Button disabled theme={theme} color="primary" variant="contained" size="small" endIcon={<SystemUpdateAltIcon />} style={{ color: '#ffffff' }} onClick={handleUpdateClick}>Update</Button>
+        </Tooltip>        
+        <Tooltip title="Restart matterbridge">
+          <Button theme={theme} color="primary" variant="contained" size="small" endIcon={<RestartAltIcon />} style={{ color: '#ffffff' }} onClick={handleRestartClick}>Restart</Button>
+        </Tooltip>        
         <Backdrop sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }} open={open} onClick={handleClose}>
           <CircularProgress color="inherit" />
         </Backdrop>

diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
@@ -1,5 +1,5 @@
 // Home.js
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, ChangeEvent } from 'react';
 import QRCode from 'qrcode.react';
 import { StatusIndicator } from './StatusIndicator';
 import QrCode2Icon from '@mui/icons-material/QrCode2';
@@ -118,7 +118,7 @@ function Home() {
         {systemInfo && <SystemInfoTable systemInfo={systemInfo}/>}
       </div>
       <div style={{ display: 'flex', flexDirection: 'column', flex: '1 1 auto', gap: '20px' }}>
-        <AddRemovePluginsDiv systemInfo={systemInfo}/>
+        <AddRemovePluginsDiv plugins={plugins}/>
         <table>
           <thead>
             <tr>
@@ -182,7 +182,21 @@ function Home() {
     </div>
   );}
 
-  function AddRemovePluginsDiv({ systemInfo }) {
+  function AddRemovePluginsDiv({ plugins }) {
+    const [pluginName, setPluginName] = useState('matterbridge-');
+
+    // Function that sends the "addplugin" command
+    const handleAddPluginClick = () => {
+      console.log('handleAddPluginClick', pluginName);
+      sendCommandToMatterbridge('addplugin', pluginName);
+    };
+
+    // Function that sends the "removeplugin" command
+    const handleRemovePluginClick = () => {
+      console.log('handleRemovePluginClick', pluginName);
+      sendCommandToMatterbridge('removeplugin', pluginName);
+    };
+
     const theme = createTheme({
       palette: {
         primary: {
@@ -191,27 +205,19 @@ function Home() {
       },
     });
 
-    // Define the style for the header element
-    const bodyStyle = {
-      display: 'flex',
-      flexDirection: 'row', 
-      flex: '1 1 auto',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      margin: '0px',
-      padding: '10px',
-      gap: '20px',
-    };
-
     return (
       <div className="MbfWindowDiv">
         <div className="MbfWindowHeader">
           <p className="MbfWindowHeaderText">Add remove plugin</p>
         </div>
-        <div style={bodyStyle}>
-          <TextField size="small" id="plugin-name" label="Plugin" variant="outlined" fullWidth/>
-          <Button disabled theme={theme} color="primary" variant='contained' size="small" aria-label="add" endIcon={<AddIcon />} style={{ color: '#ffffff', height: '30px' }}>Add</Button>
-          <Button disabled theme={theme} color="primary" variant='contained' size="small" aria-label="remove" endIcon={<RemoveIcon />} style={{ color: '#ffffff', height: '30px' }}>Remove</Button>
+        <div style={{ display: 'flex', flexDirection: 'row', flex: '1 1 auto', alignItems: 'center', justifyContent: 'space-between', margin: '0px', padding: '10px', gap: '20px' }}>
+          <TextField value={pluginName} onChange={(event) => { setPluginName(event.target.value); }} size="small" id="plugin-name" label="Plugin name or plugin path" variant="outlined" fullWidth/>
+          <Tooltip title="Add a plugin">
+            <Button onClick={handleAddPluginClick} theme={theme} color="primary" variant='contained' size="small" aria-label="add" endIcon={<AddIcon />} style={{ color: '#ffffff', height: '30px' }}> Add</Button>
+          </Tooltip>        
+          <Tooltip title="Remove a plugin">
+            <Button onClick={handleRemovePluginClick} theme={theme} color="primary" variant='contained' size="small" aria-label="remove" endIcon={<RemoveIcon />} style={{ color: '#ffffff', height: '30px' }}> Remove</Button>
+          </Tooltip>        
         </div>
       </div>
     );

diff --git a/src/matterbridge.ts b/src/matterbridge.ts
@@ -2100,7 +2100,7 @@ export class Matterbridge extends EventEmitter {
     // Endpoint to receive commands
     this.expressApp.post('/api/command/:command/:param', async (req, res) => {
       const command = req.params.command;
-      const param = req.params.param;
+      let param = req.params.param;
       this.log.debug(`The frontend sent /api/command/${command}/${param}`);
 
       if (!command) {
@@ -2138,9 +2138,52 @@ export class Matterbridge extends EventEmitter {
       if (command === 'update') {
         this.log.warn(`The /api/command/${command} is not yet implemented`);
       }
-      // Handle the command addplugin from Header
+      // Handle the command addplugin from Home C:\Users\lligu\GitHub\matterbridge-example-accessory-platform
       if (command === 'addplugin') {
-        this.log.warn(`The /api/command/${command}/${param} is not yet implemented`);
+        param = param.replace(/\*/g, '\\');
+        if (this.registeredPlugins.find((plugin) => plugin.name === param)) {
+          this.log.warn(`Plugin ${plg}${param}${wr} already added to matterbridge`);
+          res.json({ message: 'Command received' });
+          return;
+        }
+        const packageJsonPath = await this.resolvePluginName(param);
+        if (!packageJsonPath) {
+          this.log.error(`Error resolving plugin ${plg}${param}${er}`);
+          res.json({ message: 'Command received' });
+          return;
+        }
+        this.log.debug(`Loading plugin from ${plg}${packageJsonPath}${db}`);
+        try {
+          // Load the package.json of the plugin
+          const packageJson = JSON.parse(await fs.readFile(packageJsonPath, 'utf8'));
+          const plugin = { path: packageJsonPath, type: '', name: packageJson.name, version: packageJson.version, description: packageJson.description, author: packageJson.author, enabled: true };
+          if (await this.loadPlugin(plugin)) {
+            this.registeredPlugins.push(plugin);
+            await this.nodeContext?.set<RegisteredPlugin[]>('plugins', this.getBaseRegisteredPlugins());
+            this.log.info(`Plugin ${plg}${packageJsonPath}${nf} type ${plugin.type} added to matterbridge. Restart required.`);
+          } else {
+            this.log.error(`Error adding plugin ${plg}${packageJsonPath}${er}`);
+          }
+        } catch (error) {
+          this.log.error(`Error adding plugin ${plg}${packageJsonPath}${er}`);
+          res.json({ message: 'Command received' });
+          return;
+        }
+      }
+      // Handle the command removeplugin from Home
+      if (command === 'removeplugin') {
+        const index = this.registeredPlugins.findIndex((registeredPlugin) => registeredPlugin.name === param);
+        if (index !== -1) {
+          if (this.registeredPlugins[index].platform) {
+            await this.registeredPlugins[index].platform?.onShutdown('The plugin has been removed.');
+            await this.savePluginConfig(this.registeredPlugins[index]);
+          }
+          this.registeredPlugins.splice(index, 1);
+          await this.nodeContext?.set<RegisteredPlugin[]>('plugins', this.getBaseRegisteredPlugins());
+          this.log.info(`Plugin ${plg}${param}${nf} removed from matterbridge`);
+        } else {
+          this.log.warn(`Plugin ${plg}${param}${wr} not registered in matterbridge`);
+        }
       }
       // Handle the command enableplugin from Home
       if (command === 'enableplugin') {