* (bluefox) Removed withStyles package

ioBroker · Jul 6, 2024 · 7ed1cfe · 7ed1cfe
1 parent d87df93
commit 7ed1cfe
Show file tree

Hide file tree

Showing 42 changed files with 301 additions and 325 deletions.
diff --git a/README.md b/README.md
@@ -71,6 +71,9 @@ To add a new camera, you must create a Pull Request on GitHub with the following
 -->
 
 ## Changelog
+### **WORK IN PROGRESS**
+* (bluefox) Removed withStyles package
+
 ### 2.0.8 (2024-06-09)
 * (bluefox) Packages updated
 * (bluefox) Allowed selecting another source (with bigger resolution) for URL cameras

diff --git a/admin/asset-manifest.json b/admin/asset-manifest.json
@@ -1,7 +1,7 @@
 {
   "files": {
     "main.css": "./static/css/main.482ecff8.css",
-    "main.js": "./static/js/main.944b0a8b.js",
+    "main.js": "./static/js/main.be39cc4f.js",
     "static/media/Ground Floor.svg": "./static/media/Ground Floor.2b7c5c91db7f070935a2.svg",
     "static/media/Second Floor.svg": "./static/media/Second Floor.a2d5ed32df336591c06b.svg",
     "static/media/Cellar.svg": "./static/media/Cellar.7ec1b1803a2437c8b78c.svg",
@@ -123,10 +123,10 @@
     "static/media/Outdoor Blinds.svg": "./static/media/Outdoor Blinds.37b85a9c060a4af48da9.svg",
     "static/media/Upstairs.svg": "./static/media/Upstairs.441813e54e0daca0882d.svg",
     "main.482ecff8.css.map": "./static/css/main.482ecff8.css.map",
-    "main.944b0a8b.js.map": "./static/js/main.944b0a8b.js.map"
+    "main.be39cc4f.js.map": "./static/js/main.be39cc4f.js.map"
   },
   "entrypoints": [
     "static/css/main.482ecff8.css",
-    "static/js/main.944b0a8b.js"
+    "static/js/main.be39cc4f.js"
   ]
 }
diff --git a/admin/index_m.html b/admin/index_m.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><script type="text/javascript" src="./../../lib/js/socket.io.js"></script><title>ioBroker.cameras</title><script defer="defer" src="./static/js/main.944b0a8b.js"></script><link href="./static/css/main.482ecff8.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="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><script type="text/javascript" src="./../../lib/js/socket.io.js"></script><title>ioBroker.cameras</title><script defer="defer" src="./static/js/main.be39cc4f.js"></script><link href="./static/css/main.482ecff8.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/admin/static/js/main.944b0a8b.js → admin/static/js/main.be39cc4f.js b/admin/static/js/main.944b0a8b.js → admin/static/js/main.be39cc4f.js
diff --git a/admin/static/js/main.944b0a8b.js.LICENSE.txt → admin/static/js/main.be39cc4f.js.LICENSE.txt b/admin/static/js/main.944b0a8b.js.LICENSE.txt → admin/static/js/main.be39cc4f.js.LICENSE.txt
@@ -60,14 +60,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * A better abstraction over CSS.
- *
- * @copyright Oleg Isonen (Slobodskoi) / Isonen 2014-present
- * @website https://github.com/cssinjs/jss
- * @license MIT
- */
-
 /** @license React v16.13.1
  * react-is.production.min.js
  *

diff --git a/admin/static/js/main.944b0a8b.js.map → admin/static/js/main.be39cc4f.js.map b/admin/static/js/main.944b0a8b.js.map → admin/static/js/main.be39cc4f.js.map
diff --git a/package.json b/package.json
@@ -26,31 +26,31 @@
     "decompress": "^4.2.1",
     "fluent-ffmpeg": "^2.1.3",
     "moment": "^2.30.1",
-    "sharp": "0.32.6",
-    "uuid": "^9.0.1",
-    "ws": "^8.17.0"
+    "sharp": "0.33.4",
+    "uuid": "^10.0.0",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
-    "@alcalzone/release-script": "^3.7.0",
-    "@alcalzone/release-script-plugin-iobroker": "^3.7.0",
+    "@alcalzone/release-script": "^3.7.3",
+    "@alcalzone/release-script-plugin-iobroker": "^3.7.2",
     "@alcalzone/release-script-plugin-license": "^3.7.0",
     "@iobroker/testing": "^4.1.3",
-    "@iobroker/vis-2-widgets-react-dev": "^1.0.6",
+    "@iobroker/vis-2-widgets-react-dev": "^2.0.1",
     "@types/chai": "^4.3.16",
     "@types/chai-as-promised": "^7.1.8",
     "@types/gulp": "^4.0.17",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.14.2",
+    "@types/mocha": "^10.0.7",
+    "@types/node": "^20.14.10",
     "@types/proxyquire": "^1.3.31",
     "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.12",
     "chai": "^4.4.1",
-    "chai-as-promised": "^7.1.2",
+    "chai-as-promised": "^8.0.0",
     "eslint": "^8.57.0",
     "gulp": "^4.0.2",
     "gulp-rename": "^2.0.0",
     "gulp-replace": "^1.1.4",
-    "mocha": "^10.4.0",
+    "mocha": "^10.6.0",
     "proxyquire": "^2.1.3",
     "sinon": "^18.0.0",
     "sinon-chai": "^3.7.0"

diff --git a/src-widgets/package.json b/src-widgets/package.json
@@ -1,37 +1,35 @@
 {
     "name": "iobroker.vis-2-widgets-camera",
     "private": true,
-    "version": "1.0.6",
+    "version": "2.0.1",
     "dependencies": {
         "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
         "@craco/craco": "^7.1.0",
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@iobroker/adapter-react-v5": "^5.0.4",
-        "@iobroker/vis-2-widgets-react-dev": "^1.0.6",
-        "@mui/icons-material": "^5.15.19",
-        "@mui/material": "5.14.14",
-        "@mui/styles": "5.14.14",
-        "@mui/system": "^5.15.15",
+        "@iobroker/adapter-react-v5": "^6.0.13",
+        "@iobroker/vis-2-widgets-react-dev": "^2.0.1",
+        "@mui/icons-material": "^5.16.0",
+        "@mui/material": "^5.16.0",
         "craco-esbuild": "^0.6.1",
         "craco-module-federation": "^1.1.0",
         "eslint": "^8.57.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-plugin-eqeqeq-fix": "^1.0.3",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsx-a11y": "^6.8.0",
+        "eslint-plugin-jsx-a11y": "^6.9.0",
         "eslint-plugin-only-warn": "^1.1.0",
-        "eslint-plugin-react": "^7.34.2",
+        "eslint-plugin-react": "^7.34.3",
         "eslint-plugin-react-hooks": "^4.6.2",
-        "hls.js": "^1.5.11",
+        "hls.js": "^1.5.13",
         "moment": "^2.30.1",
         "node-sass": "^9.0.0",
         "prop-types": "^15.8.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-scripts": "^5.0.1",
-        "sass": "^1.77.4",
-        "uuid": "^9.0.1"
+        "sass": "^1.77.6",
+        "uuid": "^10.0.0"
     },
     "scripts": {
         "start": "set PORT=4173 && craco start",

diff --git a/src-widgets/src/App.jsx b/src-widgets/src/App.jsx
@@ -1,24 +1,23 @@
 import React from 'react';
-import { withStyles } from '@mui/styles';
 
+import { Checkbox, Box } from '@mui/material';
 import WidgetDemoApp from '@iobroker/vis-2-widgets-react-dev/widgetDemoApp';
 import { I18n } from '@iobroker/adapter-react-v5';
 
-import { Checkbox } from '@mui/material';
 import translations from './translations';
 import RtspCamera from './RtspCamera';
 import SnapshotCamera from './SnapshotCamera';
 
-const styles = theme => ({
-    app: {
+const styles = {
+    app: theme => ({
         backgroundColor: theme?.palette?.background.default,
         color: theme?.palette?.text.primary,
         height: '100%',
         width: '100%',
         overflow: 'auto',
         display: 'flex',
-    },
-});
+    }),
+};
 
 class App extends WidgetDemoApp {
     constructor(props) {
@@ -77,7 +76,7 @@ class App extends WidgetDemoApp {
             />,
         };
 
-        return <div className={this.props.classes.app}>
+        return <Box sx={styles.app}>
             <div>
                 {Object.keys(widgets).map(key => <div key={key} style={{ display: 'flex', alignItems: 'center' }}>
                     <Checkbox
@@ -93,8 +92,8 @@ class App extends WidgetDemoApp {
                 </div>)}
             </div>
             {Object.keys(widgets).map(key => (this.state.disabled[key] ? null : widgets[key]))}
-        </div>;
+        </Box>;
     }
 }
 
-export default withStyles(styles)(App);
+export default App;
diff --git a/src-widgets/src/RtspCamera.jsx b/src-widgets/src/RtspCamera.jsx
@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { withStyles } from '@mui/styles';
 import {
     Button,
     CircularProgress, Dialog,
@@ -13,7 +12,7 @@ import { Close } from '@mui/icons-material';
 
 import Generic from './Generic';
 
-const styles = () => ({
+const styles = {
     camera: {
         width: '100%',
         height: '100%',
@@ -32,7 +31,7 @@ const styles = () => ({
         width: '100%',
         height: '100%',
     },
-});
+};
 
 export const CameraField = props => {
     const [cameras, setCameras] = React.useState(null);
@@ -404,10 +403,10 @@ class RtspCamera extends Generic {
         >
             <DialogTitle>{this.state.rxData.widgetTitle}</DialogTitle>
             <DialogContent>
-                <div className={this.props.classes.imageContainer}>
+                <div style={styles.imageContainer}>
                     <canvas
                         ref={this.fullVideoRef}
-                        className={this.props.classes.fullCamera}
+                        style={styles.fullCamera}
                     ></canvas>
                 </div>
             </DialogContent>
@@ -432,18 +431,18 @@ class RtspCamera extends Generic {
         super.renderWidgetBody(props);
 
         const content = <div
-            className={this.props.classes.imageContainer}
+            style={styles.imageContainer}
             onClick={() => this.setState({ full: true })}
         >
-            {this.state.loading && this.state.alive && <CircularProgress className={this.props.classes.progress} />}
+            {this.state.loading && this.state.alive && <CircularProgress style={styles.progress} />}
             {!this.state.alive ? <div
                 style={{ position: 'absolute', top: 0, left: 0 }}
             >
                 {Generic.t('Camera instance %s inactive', (this.state.rxData.camera || '').split('/')[0])}
             </div> : null}
             <canvas
                 ref={this.videoRef}
-                className={this.props.classes.camera}
+                style={styles.camera}
             ></canvas>
             {this.renderDialog()}
         </div>;
@@ -460,4 +459,4 @@ class RtspCamera extends Generic {
     }
 }
 
-export default withStyles(styles)(RtspCamera);
+export default RtspCamera;
diff --git a/src-widgets/src/SnapshotCamera.jsx b/src-widgets/src/SnapshotCamera.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { withStyles } from '@mui/styles';
 import {
     Button,
     Dialog, DialogActions, DialogContent, DialogTitle,
@@ -10,7 +9,7 @@ import { Close } from '@mui/icons-material';
 import Generic from './Generic';
 import { CameraField } from './RtspCamera';
 
-const styles = () => ({
+const styles = {
     camera: {
         width: '100%',
         height: '100%',
@@ -29,7 +28,7 @@ const styles = () => ({
         width: '100%',
         height: '100%',
     },
-});
+};
 
 class SnapshotCamera extends Generic {
     constructor(props) {
@@ -253,11 +252,11 @@ class SnapshotCamera extends Generic {
         >
             <DialogTitle>{this.state.rxData.widgetTitle}</DialogTitle>
             <DialogContent>
-                <div className={this.props.classes.imageContainer}>
+                <div style={styles.imageContainer}>
                     <img
                         src={url}
                         ref={this.fullVideoRef}
-                        className={this.props.classes.fullCamera}
+                        style={styles.fullCamera}
                         alt={this.state.rxData.camera}
                     />
                 </div>
@@ -310,7 +309,7 @@ class SnapshotCamera extends Generic {
         const url = this.getUrl();
 
         const content = <div
-            className={this.props.classes.imageContainer}
+            style={styles.imageContainer}
             onClick={() => !this.state.error && this.setState({ full: true }, () => this.restartPollingInterval())}
         >
             {!this.state.alive ? <div
@@ -321,7 +320,7 @@ class SnapshotCamera extends Generic {
             {url ? <img
                 src={url}
                 ref={this.videoRef}
-                className={this.props.classes.camera}
+                style={styles.camera}
                 alt={this.state.rxData.camera}
             /> : Generic.t('No camera selected')}
             {this.state.alive && this.state.error ? <div
@@ -352,4 +351,4 @@ class SnapshotCamera extends Generic {
     }
 }
 
-export default withStyles(styles)(SnapshotCamera);
+export default SnapshotCamera;
diff --git a/src-widgets/src/i18n/de.json b/src-widgets/src/i18n/de.json
@@ -18,5 +18,6 @@
   "Polling Camera": "URL kamera",
   "Cannot load URL": "URL kann nicht geladen werden",
   "noCacheByFull": "Kein Cache im Dialog",
-  "camera_in_dialog": "Kamera im Dialog"
+  "camera_in_dialog": "Kamera im Dialog",
+  "No camera selected": "Keine Kamera ausgewählt"
 }
diff --git a/src-widgets/src/i18n/en.json b/src-widgets/src/i18n/en.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Polling Camera",
   "Cannot load URL": "Cannot load URL",
   "noCacheByFull": "No cache in dialog",
-  "camera_in_dialog": "Camera in Dialog"
+  "camera_in_dialog": "Camera in Dialog",
+  "No camera selected": "No camera selected"
 }
diff --git a/src-widgets/src/i18n/es.json b/src-widgets/src/i18n/es.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Cámara de sondeo",
   "Cannot load URL": "No se puede cargar la URL",
   "noCacheByFull": "No hay caché en el diálogo",
-  "camera_in_dialog": "Cámara en diálogo"
+  "camera_in_dialog": "Cámara en diálogo",
+  "No camera selected": "Ninguna cámara seleccionada"
 }
diff --git a/src-widgets/src/i18n/fr.json b/src-widgets/src/i18n/fr.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Caméra de sondage",
   "Cannot load URL": "Impossible de charger l'URL",
   "noCacheByFull": "Pas de cache dans la boîte de dialogue",
-  "camera_in_dialog": "Caméra dans la boîte de dialogue"
+  "camera_in_dialog": "Caméra dans la boîte de dialogue",
+  "No camera selected": "Aucune caméra sélectionnée"
 }
diff --git a/src-widgets/src/i18n/it.json b/src-widgets/src/i18n/it.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Telecamera per sondaggi",
   "Cannot load URL": "Impossibile caricare l'URL",
   "noCacheByFull": "Nessuna cache nella finestra di dialogo",
-  "camera_in_dialog": "Fotocamera nella finestra di dialogo"
+  "camera_in_dialog": "Fotocamera nella finestra di dialogo",
+  "No camera selected": "Nessuna telecamera selezionata"
 }
diff --git a/src-widgets/src/i18n/nl.json b/src-widgets/src/i18n/nl.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Pollingcamera",
   "Cannot load URL": "Kan URL niet laden",
   "noCacheByFull": "Geen cache in dialoogvenster",
-  "camera_in_dialog": "Camera in dialoog"
+  "camera_in_dialog": "Camera in dialoog",
+  "No camera selected": "Geen camera geselecteerd"
 }
diff --git a/src-widgets/src/i18n/pl.json b/src-widgets/src/i18n/pl.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Kamera wyborcza",
   "Cannot load URL": "Nie można załadować adresu URL",
   "noCacheByFull": "Brak pamięci podręcznej w oknie dialogowym",
-  "camera_in_dialog": "Kamera w oknie dialogowym"
+  "camera_in_dialog": "Kamera w oknie dialogowym",
+  "No camera selected": "Nie wybrano kamery"
 }
diff --git a/src-widgets/src/i18n/pt.json b/src-widgets/src/i18n/pt.json
@@ -18,5 +18,6 @@
   "Polling Camera": "Câmera de votação",
   "Cannot load URL": "Não é possível carregar o URL",
   "noCacheByFull": "Sem cache na caixa de diálogo",
-  "camera_in_dialog": "Câmera na caixa de diálogo"
+  "camera_in_dialog": "Câmera na caixa de diálogo",
+  "No camera selected": "Nenhuma câmera selecionada"
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><script type="text/javascript" src="./../../lib/js/socket.io.js"></script><title>ioBroker.cameras</title><script defer="defer" src="./static/js/main.944b0a8b.js"></script><link href="./static/css/main.482ecff8.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="shortcut icon" href="./favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="./manifest.json"/><script type="text/javascript" src="./../../lib/js/socket.io.js"></script><title>ioBroker.cameras</title><script defer="defer" src="./static/js/main.be39cc4f.js"></script><link href="./static/css/main.482ecff8.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>