@iobroker/adapter-react-v5 6.0.13 → 6.0.15

package/Components/FileViewer.js

@@ -224,6 +224,27 @@ class FileViewer extends react_1.Component {
                     this.setState({ imgError: true });
                 }, style: Object.assign(Object.assign({}, styles.img), this.props.getStyleBackgroundImage()), src: `${this.props.href}?ts=${this.state.forceUpdate}`, alt: this.props.href });
         }
+        if (this.state.ext && exports.EXTENSIONS.audio.includes(this.state.ext)) {
+            return react_1.default.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                react_1.default.createElement("audio", { style: { width: '100%' }, src: this.props.href, controls: true }));
+        }
+        if (this.state.ext && exports.EXTENSIONS.video.includes(this.state.ext)) {
+            return (react_1.default.createElement("div", { style: {
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                } },
+                react_1.default.createElement("video", { style: { width: '100%', height: '100%' }, controls: true },
+                    react_1.default.createElement("source", { src: this.props.href, type: `video/${this.state.ext}}` }))));
+        }
         if (this.state.code !== null || this.state.text !== null || this.state.editing) {
             // File viewer in adapter-react does not support write
             // return <Editor

package/Components/ObjectBrowser.js

@@ -1781,7 +1781,6 @@ class ObjectBrowserClass extends react_1.Component {
         this.localStorage = window._localStorage || window.localStorage;
         this.lastAppliedFilter = null;
         this.pausedSubscribes = false;
-        this.selectedFound = false;
         this.root = null;
         this.states = {};
         this.subscribes = [];
@@ -2257,6 +2256,7 @@ class ObjectBrowserClass extends react_1.Component {
             selected = props.selected;
         }
         selected = selected.map(id => id.replace(/["']/g, '')).filter(id => id);
+        this.selectedFound = !selected.length && !this.lastSelectedItems.length;
         const columnsStr = this.localStorage.getItem(`${props.dialogName || 'App'}.columns`);
         let columns;
         try {
@@ -4458,7 +4458,7 @@ class ObjectBrowserClass extends react_1.Component {
                 icons),
             react_1.default.createElement("div", { style: Object.assign(Object.assign({}, styles.grow), (invertBackground ? this.styles.invertedBackgroundFlex : {})) }),
             react_1.default.createElement(material_1.Grid, { item: true, container: true, alignItems: "center" }, iconItem),
-            this.props.width !== 'xs' || narrowStyleWithDetails ? react_1.default.createElement("div", null,
+            this.props.width !== 'xs' ? react_1.default.createElement("div", null,
                 react_1.default.createElement(IconCopy_1.default, { className: narrowStyleWithDetails ? '' : 'copyButton', style: styles.cellCopyButton, onClick: e => this.onCopy(e, id) })) : null);
         let colName = (narrowStyleWithDetails && name) || this.columnsVisibility.name ? react_1.default.createElement(material_1.Box, { component: "div", sx: Object.assign(Object.assign(Object.assign({}, styles.cellName), (useDesc ? styles.cellNameWithDesc : undefined)), { width: this.props.width !== 'xs' ? this.columnsVisibility.name : undefined, ml: narrowStyleWithDetails ? 0 : '5px' }) },
             name,
@@ -4615,6 +4615,9 @@ class ObjectBrowserClass extends react_1.Component {
                     padding: 10,
                     backgroundColor: this.props.theme.palette.mode === 'dark' ? '#333' : '#ccc',
                 } },
+                react_1.default.createElement("div", { style: styles.cellDetailsLine },
+                    react_1.default.createElement("div", { style: { flexGrow: 1 } }),
+                    react_1.default.createElement(IconCopy_1.default, { style: styles.cellCopyButtonInDetails, onClick: e => this.onCopy(e, id) })),
                 colName && react_1.default.createElement("div", { style: styles.cellDetailsLine },
                     react_1.default.createElement("span", { style: styles.cellDetailsName },
                         this.texts.name,

package/Components/Utils.js

@@ -1199,7 +1199,7 @@ class Utils {
         if (window.vendorPrefix && window.vendorPrefix !== '@@vendorPrefix@@') {
             return 'light';
         }
-        themeName = themeName || (window._localStorage || window.localStorage).getItem('App.themeName');
+        themeName = themeName || Utils.getThemeName();
         return themeName === 'dark' || themeName === 'blue' ? 'dark' : 'light';
     }
     /**

package/GenericApp.js

@@ -299,7 +299,7 @@ class GenericApp extends Router_1.default {
                         console.log('Sentry initialized');
                     }
                     // read UUID and init sentry with it.
-                    // for backward compatibility it will be processed separately from above logic: some adapters could still have this.sentryDSN as undefined
+                    // for backward compatibility it will be processed separately from the above logic: some adapters could still have this.sentryDSN as undefined
                     if (!this.sentryInited && sentryEnabled) {
                         this.sentryInited = true;
                         waitPromise = this.socket.getObject('system.meta.uuid')

package/README.md

@@ -699,6 +699,11 @@ const styles: Record<string, any> = (theme: IobTheme) => ({
    dialog: {
       height: `calc(100% - ${theme.mixins.toolbar.minHeight}px)`,
       padding: theme.spacing(1),
+      margin: theme.spacing(2),
+      gap: 5,
+      borderRadius: 5,
+      marginLeft: 10, // marginTop, marginRight, marginBottom
+      paddingLeft: 10, // paddingTop, paddingRight, paddingBottom
    },
    ...
 });
@@ -709,7 +714,12 @@ After:
 const styles: Record<string, any> = {
    dialog: (theme: IobTheme) => ({
       height: `calc(100% - ${theme => theme.mixins.toolbar.minHeight}px)`,
-      p: 1,
+      p: 1, // or 8px, padding is OK too
+      m: '16px', // or 2, margin is OK too
+      gap: '5px',
+      borderRadius: '5px',
+      ml: '10px', // mt, mr, mb, but marginLeft, marginRight, marginBottom is OK too
+      pl: '10px', // pt, pr, pb, but paddingTop, paddingRight, paddingBottom is OK too
    }),
 };
 ```
@@ -717,11 +727,11 @@ const styles: Record<string, any> = {
 - Modify `className`:
 Before: `<div className={this.props.classes.box}>`
 
-After: `<Box component="div" sx={styles.box}>`
+After: `<Box sx={styles.box}>`
 
-Before: `<div className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
+Before: `<span className={Utils.clsx(this.props.classes.box1, condition && this.props.classes.box2)}>`
 
-After: `<Box component="div" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>`
+After: `<Box component="span" sx={Utils.getStyle(this.props.theme, this.props.classes.box1, condition && this.props.classes.box2)}>`
 Or if no one style is a function: `<Box component="div" sx={{ ...this.props.classes.box1, ...(condition ? this.props.classes.box2 : undefined) }}>`
 
 Do not use `sx` if the style is not dynamic (not a function). Use `style` instead.
@@ -759,7 +769,7 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
   Before: `<Tooltip title={this.props.t('ra_Refresh tree')} classes={{ popper: styles.tooltip }}>`
   
   After: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: { pointerEvents: 'none' } } }}>`
-  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} elr>`
+  Or: `<Tooltip title={this.props.t('ra_Refresh tree')} componentsProps={{ popper: { sx: styles.tooltip } }}>`
 
   Before. `<AccordionSummary classes={{ root: styles.rootStyle, content: styles.content }}>`
 
@@ -771,6 +781,13 @@ The best practice is to replace `padding` with `p` and `margin` with `m`, so you
 -->
 
 ## Changelog
+### 6.0.15 (2024-07-13)
+* (bluefox) Allowed playing mp3 files in the file browser
+* (bluefox) Corrected jump by object selection
+
+### 6.0.14 (2024-07-07)
+* (bluefox) Corrected theme type selection
+
 ### 6.0.13 (2024-06-30)
 * (bluefox) Corrected color picker
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iobroker/adapter-react-v5",
-  "version": "6.0.13",
+  "version": "6.0.15",
   "description": "React classes to develop admin interfaces for ioBroker with react.",
   "author": {
     "name": "Denis Haev (bluefox)",
@@ -30,13 +30,13 @@
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
     "@iobroker/socket-client": "^2.4.18",
-    "@iobroker/types": "^6.0.6-alpha.0-20240624-92c3310c8",
-    "@iobroker/js-controller-common": "^6.0.5",
-    "@iobroker/js-controller-common-db": "^6.0.5",
-    "@mui/icons-material": "^5.15.21",
-    "@mui/material": "^5.15.21",
-    "@mui/x-date-pickers": "^7.8.0",
-    "@sentry/browser": "^8.13.0",
+    "@iobroker/types": "^6.0.8",
+    "@iobroker/js-controller-common": "^6.0.8",
+    "@iobroker/js-controller-common-db": "^6.0.8",
+    "@mui/icons-material": "^5.16.1",
+    "@mui/material": "^5.16.1",
+    "@mui/x-date-pickers": "^7.10.0",
+    "@sentry/browser": "^8.17.0",
     "react-color": "^2.19.3",
     "react-colorful": "^5.6.1",
     "react-cropper": "^2.3.3",