@iobroker/adapter-react-v5 6.1.2 → 6.1.5

package/src/Components/FileViewer.tsx

@@ -0,0 +1,384 @@
+// File viewer in adapter-react does not support write
+// import { Buffer } from 'buffer';
+import React, { Component } from 'react';
+
+import {
+    TextField,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+} from '@mui/material';
+
+// Icons
+import { FaCopy as CopyIcon } from 'react-icons/fa';
+import {
+    Close as CloseIcon,
+    Save as SaveIcon,
+    Brightness6 as Brightness5Icon,
+} from '@mui/icons-material';
+
+import type { Connection } from '@iobroker/socket-client';
+
+import IconNoIcon from '../icons/IconNoIcon';
+import withWidth from './withWidth';
+import Utils from './Utils';
+import { Translate } from '../types';
+import Icon from './Icon';
+// File viewer in adapter-react does not use ace editor
+// import * as ace from 'ace-builds';
+// import 'ace-builds/src-noconflict/ext-modelist';
+// import Editor from './Editor';
+
+// const modelist = ace.require('ace/ext/modelist');
+
+const styles: Record<string, React.CSSProperties> = {
+    dialog: {
+        height: '100%',
+    },
+    paper: {
+        height: 'calc(100% - 64px)',
+    },
+    content: {
+        textAlign: 'center',
+    },
+    textarea: {
+        width: '100%',
+        height: '100%',
+    },
+    img: {
+        width: 'auto',
+        height: 'calc(100% - 5px)',
+        objectFit: 'contain',
+    },
+    dialogTitle: {
+        justifyContent: 'space-between',
+        display: 'flex',
+    },
+};
+
+export const EXTENSIONS = {
+    images: ['png', 'jpg', 'svg', 'jpeg', 'bmp', 'gif', 'apng', 'avif', 'webp'],
+    code:   ['js', 'json', 'json5', 'md'],
+    txt:    ['log', 'txt', 'html', 'css', 'xml', 'ics'],
+    audio:  ['mp3', 'wav', 'ogg', 'acc'],
+    video:  ['mp4', 'mov', 'avi'],
+};
+
+function bufferToBase64(buffer: Buffer, isFull?: boolean) {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len && (isFull || i < 50); i++) {
+        binary += String.fromCharCode(bytes[i]);
+    }
+    return window.btoa(binary);
+}
+
+interface FileViewerProps {
+    /** Translation function */
+    t: Translate;
+    /** Callback when the viewer is closed. */
+    onClose: () => void;
+    /** The URL (file path) to the file to be displayed. */
+    href: string;
+    // formatEditFile?: string;
+    socket: Connection;
+    setStateBackgroundImage: () => void;
+    // themeType: ThemeType;
+    getStyleBackgroundImage: () => React.CSSProperties | null;
+    /** Flag is the js-controller support subscribe on file */
+    supportSubscribes?: boolean;
+}
+
+interface FileViewerState {
+    text: string | null;
+    code: string | null;
+    ext: string | null;
+    editing: boolean;
+    editingValue: string | null;
+    copyPossible: boolean;
+    forceUpdate: number;
+    changed: boolean;
+    imgError: boolean;
+}
+
+class FileViewer extends Component<FileViewerProps, FileViewerState> {
+    private timeout: ReturnType<typeof setTimeout> | null = null;
+
+    constructor(props: FileViewerProps) {
+        super(props);
+        const ext = Utils.getFileExtension(props.href);
+
+        this.state = {
+            text: null,
+            code: null,
+            ext,
+            // File viewer in adapter-react does not support write
+            editing: /* !!this.props.formatEditFile || */ false,
+            editingValue: null,
+            copyPossible: !!ext && (EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext)),
+            forceUpdate: Date.now(),
+            changed: false,
+            imgError: false,
+        };
+    }
+
+    readFile() {
+        if (this.props.href) {
+            const parts = this.props.href.split('/');
+            parts.splice(0, 2);
+            const adapter = parts[0];
+            const name = parts.splice(1).join('/');
+
+            this.props.socket.readFile(adapter, name)
+                .then((data: { data: Buffer; type: string } | { file: string; mimeType: string }) => {
+                    let fileData: string = '';
+                    if ((data as { file: string; mimeType: string }).file !== undefined) {
+                        fileData = (data as { file: string; mimeType: string }).file;
+                    }
+
+                    const newState: Partial<FileViewerState> = { copyPossible: this.state.copyPossible, ext: this.state.ext };
+                    // try to detect valid extension
+                    if ((data as { data: Buffer; type: string }).type === 'Buffer') {
+                        if (name.toLowerCase().endsWith('.json5')) {
+                            newState.ext = 'json5';
+                            newState.copyPossible = true;
+                            try {
+                                fileData = atob(bufferToBase64((data as { data: Buffer; type: string }).data, true));
+                            } catch (e) {
+                                console.error('Cannot convert base64 to string');
+                                fileData = '';
+                            }
+                        } else {
+                            const ext = Utils.detectMimeType(bufferToBase64((data as { data: Buffer; type: string }).data));
+                            if (ext) {
+                                newState.ext = ext;
+                                newState.copyPossible = EXTENSIONS.code.includes(ext) || EXTENSIONS.txt.includes(ext);
+                            }
+                        }
+                    }
+
+                    if (newState.copyPossible) {
+                        if (newState.ext && EXTENSIONS.txt.includes(newState.ext)) {
+                            newState.text = fileData;
+                            newState.editingValue = fileData;
+                        } else if (newState.ext && EXTENSIONS.code.includes(newState.ext)) {
+                            newState.code = fileData;
+                            newState.editingValue = fileData;
+                        }
+                    }
+
+                    this.setState(newState as FileViewerState);
+                })
+                .catch(e => window.alert(`Cannot read file: ${e}`));
+        }
+    }
+
+    componentDidMount() {
+        this.readFile();
+
+        const parts = this.props.href.split('/');
+        parts.splice(0, 2);
+        const adapter = parts[0];
+        const name = parts.splice(1).join('/');
+
+        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+    }
+
+    componentWillUnmount() {
+        this.timeout && clearTimeout(this.timeout);
+        const parts = this.props.href.split('/');
+        parts.splice(0, 2);
+        const adapter = parts[0];
+        const name = parts.splice(1).join('/');
+        this.props.supportSubscribes && this.props.socket.subscribeFiles(adapter, name, this.onFileChanged);
+    }
+
+    onFileChanged = (id: string, fileName: string, size: number | null) => {
+        if (!this.state.changed) {
+            this.timeout && clearTimeout(this.timeout);
+            this.timeout = setTimeout(() => {
+                this.timeout = null;
+                if (size === null) {
+                    window.alert('Show file was deleted!');
+                } else if (this.state.text !== null || this.state.code !== null) {
+                    this.readFile();
+                } else {
+                    this.setState({ forceUpdate: Date.now() });
+                }
+            }, 300);
+        }
+    };
+
+    // eslint-disable-next-line class-methods-use-this
+    writeFile64 = () => {
+        /*
+        // File viewer in adapter-react does not support write
+        const parts = this.props.href.split('/');
+        const data = this.state.editingValue;
+        parts.splice(0, 2);
+        const adapter = parts[0];
+        const name = parts.splice(1).join('/');
+        this.props.socket.writeFile64(adapter, name, Buffer.from(data).toString('base64'))
+            .then(() => this.props.onClose())
+            .catch(e => window.alert(`Cannot write file: ${e}`));
+        */
+    };
+
+    static getEditFile(ext: string | null) {
+        switch (ext) {
+            case 'json':
+                return 'json';
+            case 'json5':
+                return 'json5';
+            case 'js':
+                return 'javascript';
+            case 'html':
+                return 'html';
+            case 'txt':
+                return 'html';
+            default:
+                // e.g. ace/mode/text
+                return 'text';
+        }
+    }
+
+    getContent() {
+        if (this.state.ext && EXTENSIONS.images.includes(this.state.ext)) {
+            if (this.state.imgError) {
+                return <IconNoIcon style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }} />;
+            }
+            return <Icon
+                onError={e => {
+                    (e.target as HTMLImageElement).onerror = null;
+                    this.setState({ imgError: true });
+                }}
+                style={{ ...styles.img, ...this.props.getStyleBackgroundImage() }}
+                src={`${this.props.href}?ts=${this.state.forceUpdate}`}
+                alt={this.props.href}
+            />;
+        }
+        if (this.state.ext && EXTENSIONS.audio.includes(this.state.ext)) {
+            return <div
+                style={{
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}
+            >
+                {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                <audio
+                    style={{ width: '100%' }}
+                    src={this.props.href}
+                    controls
+                ></audio>
+            </div>;
+        }
+        if (this.state.ext && EXTENSIONS.video.includes(this.state.ext)) {
+            return (
+                <div
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        display: 'flex',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                    }}
+                >
+                    {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+                    <video style={{ width: '100%', height: '100%' }} controls>
+                        <source src={this.props.href} type={`video/${this.state.ext}}`} />
+                    </video>
+                </div>
+            );
+        }
+        if (this.state.code !== null || this.state.text !== null || this.state.editing) {
+            // File viewer in adapter-react does not support write
+            // return <Editor
+            //     mode={FileViewer.getEditFile(this.props.formatEditFile)}
+            //     themeType={this.props.themeType}
+            //     value={this.state.editingValue || this.state.code || this.state.text}
+            //     onChange={this.state.editing ? newValue => this.setState({ editingValue: newValue, changed: true }) : undefined}
+            // />;
+            return <TextField
+                variant="standard"
+                style={styles.textarea}
+                multiline
+                value={this.state.editingValue || this.state.code || this.state.text}
+                // onChange={newValue => this.setState({ editingValue: newValue, changed: true })}
+                InputProps={{ readOnly: !this.state.editing }}
+            />;
+        }
+        return null;
+    }
+
+    render() {
+        return <Dialog
+            sx={{
+                '&.MuiDialog-scrollPaper': styles.dialog,
+                '& .MuiDialog-paper': styles.paper,
+            }}
+            scroll="paper"
+            open={!!this.props.href}
+            onClose={() => this.props.onClose()}
+            fullWidth
+            maxWidth="xl"
+            aria-labelledby="ar_dialog_file_view_title"
+        >
+            <div style={styles.dialogTitle}>
+                <DialogTitle id="ar_dialog_file_view_title">{`${this.props.t(this.state.editing ? 'Edit' : 'View')}: ${this.props.href}`}</DialogTitle>
+                {this.state.ext && EXTENSIONS.images.includes(this.state.ext) && <div>
+                    <IconButton
+                        size="large"
+                        color="inherit"
+                        onClick={this.props.setStateBackgroundImage}
+                    >
+                        <Brightness5Icon />
+                    </IconButton>
+                </div>}
+            </div>
+            <DialogContent style={styles.content}>
+                {this.getContent()}
+            </DialogContent>
+            <DialogActions>
+                {this.state.copyPossible ?
+                    <Button
+                        color="grey"
+                        onClick={e => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            Utils.copyToClipboard(this.state.text || this.state.code || '');
+                        }}
+                        startIcon={<CopyIcon />}
+                    >
+                        {this.props.t('Copy content')}
+                    </Button> : null}
+                {this.state.editing ?
+                    <Button
+                        color="grey"
+                        disabled={this.state.editingValue === this.state.code || this.state.editingValue === this.state.text}
+                        variant="contained"
+                        onClick={this.writeFile64}
+                        startIcon={<SaveIcon />}
+                    >
+                        {this.props.t('Save')}
+                    </Button> : null}
+                <Button
+                    variant="contained"
+                    onClick={() => this.props.onClose()}
+                    color="primary"
+                    startIcon={<CloseIcon />}
+                >
+                    {this.props.t('Close')}
+                </Button>
+            </DialogActions>
+        </Dialog>;
+    }
+}
+
+export default withWidth()(FileViewer);

package/src/Components/Icon.tsx

@@ -0,0 +1,210 @@
+import React, { ReactEventHandler } from 'react';
+import SVG from 'react-inlinesvg';
+
+import { Box } from '@mui/material';
+
+import {
+    SettingsApplications as IconSystem,
+    Photo as IconPhoto,
+    SupervisedUserCircle as IconGroup,
+    PersonOutlined as IconUser,
+    Router as IconHost,
+    Wifi as IconConnection,
+    Info as IconInfo,
+    Description as IconMeta,
+} from '@mui/icons-material';
+
+import IconAlias from '../icons/IconAlias';
+import Utils from './Utils';
+
+export function getSystemIcon(obj: ioBroker.Object | null): React.JSX.Element | null {
+    let icon;
+    const id = obj?._id;
+
+    if (!id) {
+        return null;
+    }
+
+    // system or design has special icons
+    if (id.startsWith('_design/') || (id === 'system')) {
+        icon = <IconSystem className="iconOwn" />;
+    } else if (id === '0_userdata' || id === '0_userdata.0') {
+        icon = <IconPhoto className="iconOwn" />;
+    } else if (id === 'alias' || id === 'alias.0') {
+        icon = <IconAlias className="iconOwn" />;
+    } else if (id === 'system.adapter') {
+        icon = <IconSystem className="iconOwn" />;
+    } else if (id === 'system.group') {
+        icon = <IconGroup className="iconOwn" />;
+    } else if (id === 'system.user') {
+        icon = <IconUser className="iconOwn" />;
+    } else if (id === 'system.host') {
+        icon = <IconHost className="iconOwn" />;
+    } else if (id.endsWith('.connection') || id.endsWith('.connected')) {
+        icon = <IconConnection className="iconOwn" />;
+    } else if (id.endsWith('.info')) {
+        icon = <IconInfo className="iconOwn" />;
+    } else if (obj?.type === 'meta') {
+        icon = <IconMeta className="iconOwn" />;
+    }
+
+    return icon || null;
+}
+
+export function getSelectIdIcon(obj: ioBroker.Object | null, imagePrefix?: string): string | null {
+    imagePrefix = imagePrefix || '.'; // http://localhost:8081';
+    let src = '';
+    const common = obj?.common;
+
+    if (common) {
+        const cIcon = common.icon;
+        if (cIcon) {
+            if (!cIcon.startsWith('data:image/')) {
+                if (cIcon.includes('.')) {
+                    let instance;
+                    if (obj.type === 'instance' || obj.type === 'adapter') {
+                        src = `${imagePrefix}/adapter/${common.name}/${cIcon}`;
+                    } else if (obj._id && obj._id.startsWith('system.adapter.')) {
+                        instance = obj._id.split('.', 3);
+                        if (cIcon[0] === '/') {
+                            instance[2] += cIcon;
+                        } else {
+                            instance[2] += `/${cIcon}`;
+                        }
+                        src = `${imagePrefix}/adapter/${instance[2]}`;
+                    } else {
+                        instance = obj._id.split('.', 2);
+                        if (cIcon[0] === '/') {
+                            instance[0] += cIcon;
+                        } else {
+                            instance[0] += `/${cIcon}`;
+                        }
+                        src = `${imagePrefix}/adapter/${instance[0]}`;
+                    }
+                } else {
+                    return null;
+                }
+            } else {
+                // base 64 image
+                src = cIcon;
+            }
+        }
+    }
+
+    return src || null;
+}
+
+interface IconProps {
+    /** URL, UTF-8 character, or svg code (data:image/svg...) */
+    src: string | React.JSX.Element | null | undefined;
+    /** Class name */
+    className?: string;
+    /** Style for image */
+    style?: React.CSSProperties;
+    sx?: Record<string, any>;
+    /** Tooltip */
+    title?: string;
+    /** Styles for utf-8 characters */
+    styleUTF8?: React.CSSProperties;
+    onError?: ReactEventHandler<HTMLImageElement>;
+    ref?: React.RefObject<HTMLImageElement>;
+    /** Alternative text for image */
+    alt?: string;
+}
+
+const REMOTE_SERVER = window.location.hostname.endsWith('iobroker.in');
+const REMOTE_PREFIX = window.location.pathname.substring(0, window.location.pathname.lastIndexOf('/') + 1);
+
+export default function Icon(props: IconProps) {
+    if (props.src) {
+        if (typeof props.src === 'string') {
+            if (props.src.length < 3) {
+                // utf-8 char
+                if (props.sx) {
+                    return <Box
+                        component="span"
+                        sx={props.sx}
+                        title={props.title || undefined}
+                        style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}
+                        className={Utils.clsx(props.className, 'iconOwn')}
+                    >
+                        {props.src}
+                    </Box>;
+                }
+                return <span
+                    title={props.title || undefined}
+                    style={{ height: 27, marginTop: -8, ...(props.styleUTF8 || props.style) }}
+                    className={Utils.clsx(props.className, 'iconOwn')}
+                >
+                    {props.src}
+                </span>;
+            }
+            if (props.src.startsWith('data:image/svg')) {
+                return <SVG
+                    title={props.title || undefined}
+                    src={props.src}
+                    className={Utils.clsx(props.className, 'iconOwn')}
+                    width={props.style?.width || 28}
+                    height={props.style?.height || props.style?.width || 28}
+                    style={props.style || {}}
+                />;
+            }
+            if (REMOTE_SERVER && !props.src.startsWith('http://') && !props.src.startsWith('https://')) {
+                let src = props.src;
+                if (src.startsWith('./')) {
+                    src = REMOTE_PREFIX + src.substring(2);
+                } else if (!src.startsWith('/')) {
+                    src = REMOTE_PREFIX + src;
+                }
+
+                if (props.sx) {
+                    return <Box
+                        component="img"
+                        sx={props.sx}
+                        title={props.title || undefined}
+                        style={props.style || {}}
+                        className={Utils.clsx(props.className, 'iconOwn')}
+                        src={`https://remote-files.iobroker.in${src}`}
+                        alt={props.alt || undefined}
+                        ref={props.ref}
+                        onError={e => props.onError && props.onError(e)}
+                    />;
+                }
+                return <img
+                    title={props.title || undefined}
+                    style={props.style || {}}
+                    className={Utils.clsx(props.className, 'iconOwn')}
+                    src={`https://remote-files.iobroker.in${src}`}
+                    alt={props.alt || undefined}
+                    ref={props.ref}
+                    onError={e => props.onError && props.onError(e)}
+                />;
+            }
+            if (props.sx) {
+                return <Box
+                    component="img"
+                    sx={props.sx}
+                    title={props.title || undefined}
+                    style={props.style || {}}
+                    className={Utils.clsx(props.className, 'iconOwn')}
+                    src={props.src}
+                    alt={props.alt || undefined}
+                    ref={props.ref}
+                    onError={props.onError}
+                />;
+            }
+            return <img
+                title={props.title || undefined}
+                style={props.style || {}}
+                className={Utils.clsx(props.className, 'iconOwn')}
+                src={props.src}
+                alt={props.alt || undefined}
+                ref={props.ref}
+                onError={props.onError}
+            />;
+        }
+
+        return props.src;
+    }
+    return null;
+}