@dvrd/dvr-controls 1.0.14 → 1.0.16

package/src/js/label/label.tsx

@@ -0,0 +1,196 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+import classNames from 'classnames';
+
+import {ControlContext} from "../util/controlContext";
+import {convertColor} from "../util/colorUtil";
+import {calculateTextWidth, getComputedProperty, remToPx} from "../util/controlUtil";
+
+export enum LabelType {
+    LABEL, SPAN, PAR,
+}
+
+export enum BreakType {
+    CHAR, WORD
+}
+
+interface Props {
+    labelType: LabelType,
+    className: string,
+    text: string,
+    color?: string,
+    maxLines: number,
+    width?: string | number,
+    labelProps: object,
+    breakMode: BreakType,
+}
+
+interface State {
+    text: string,
+}
+
+/**
+ * Label component which breaks its contents automatically. If maxLines is specified, the label will only break the
+ * text until the number of lines is reached. Remaining text will be shown in the title.
+ */
+export default class Label extends React.Component<Props, State> {
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    static defaultProps = {
+        labelType: LabelType.LABEL,
+        className: '',
+        labelProps: {},
+        breakMode: BreakType.CHAR,
+        maxLines: 0,
+    };
+
+    label: HTMLElement | null = null;
+
+    state = {
+        text: '',
+    };
+
+    getColor = (): string => {
+        const {contrastColor} = this.context, {color} = this.props, finalColor: string = color ? color : contrastColor;
+        return convertColor(finalColor);
+    };
+
+    getWidth = (): string => {
+        const {width} = this.props;
+        let finalWidth: string = 'initial';
+        if (width !== undefined && width !== null) {
+            if (typeof width === 'string') finalWidth = width;
+            else finalWidth = width + 'px';
+        }
+        return finalWidth;
+    };
+
+    getLabelProps = () => {
+        const {className, labelProps, text} = this.props;
+        return {
+            className: classNames('dvr-label', className),
+            style: {
+                color: this.getColor(),
+                width: this.getWidth(),
+                display: 'inline-block',
+            },
+            title: text,
+            ref: (ref: HTMLElement | null) => {
+                this.label = ref
+            },
+            ...labelProps,
+        };
+    };
+
+    getFontSize = (): number | undefined => {
+        if (this.label) {
+            let fontSize: number | string = getComputedProperty('font-size', this.label);
+            fontSize = parseInt(fontSize.slice(0, fontSize.length - 2), 10);
+            return fontSize;
+        }
+        return undefined;
+    };
+
+    /**
+     * Truncate given text to given maxWidth. Truncating is done by removing characters from the end until the text + ...
+     * width is less then the given maxWidth. Trailing white spaces are removed and ... are appended.
+     * @param text Text to truncate
+     * @param maxWidth Max width in px
+     */
+    reduceText = (text: string, maxWidth: number): string => {
+        let fontSize, fontFamily;
+        if (this.label) {
+            fontSize = this.getFontSize();
+            fontFamily = getComputedProperty('font-family', this.label);
+        }
+        while (calculateTextWidth(text + '...', fontSize, fontFamily) >= maxWidth)
+            text = text.slice(0, -1);
+        return text.trimRight() + '...';
+    };
+
+    /**
+     * Break a line by removing characters from the end until a whitespace or dash is found. Removed characters are
+     * returned as remainingChars.
+     * @param validLine Text to break
+     * @return Object containing the remainder of the the line and the removed characters.
+     */
+    breakLine = (validLine: string): { validLine: string, remainingChars: string } => {
+        let remainingChars = '';
+        if (/[ -]$/.test(validLine)) {
+            validLine = validLine.slice(0, -1);
+            remainingChars = ' ';
+        }
+
+        while (!/[ -]$/.test(validLine) && validLine.length) {
+            remainingChars = validLine.slice(-1) + remainingChars;
+            validLine = validLine.slice(0, -1);
+        }
+        return {validLine, remainingChars};
+    };
+
+    /**
+     * Process the given text. This function divides the text into lines, by breaking the text according to the break
+     * mode given in the props. The width of the text is calculating by using a non-mounted canvas. The font family and
+     * font size are calculated from the computed properties of the rendered label.
+     */
+    renderText = () => {
+        const {text, maxLines, breakMode} = this.props, chars = text.split(''), width = this.getWidth();
+        if (width === 'initial') return text;
+
+        const pxWidth: number = width.endsWith('px') ? Number(width.slice(0, -2)) : remToPx(Number(width.slice(0, -3))),
+            lines: string[] = new Array<string>();
+        let fontSize, fontFamily;
+        if (this.label) {
+            fontSize = this.getFontSize();
+            fontFamily = getComputedProperty('font-family', this.label);
+        }
+
+        let line = '';
+        for (let i = 0; i < chars.length; i++) {
+            const char = chars[i];
+            if (calculateTextWidth(line + char, fontSize, fontFamily) < pxWidth)
+                line += char;
+            else {
+                let processedLine = line;
+                if (breakMode === BreakType.WORD) {
+                    const {validLine, remainingChars} = this.breakLine(line);
+                    processedLine = validLine;
+                    line = remainingChars;
+                } else line = '';
+
+                lines.push(processedLine);
+                if (maxLines > 0 && lines.length === maxLines) {
+                    if (i < chars.length)
+                    // Truncate last line if chars remaining
+                        lines[lines.length - 1] = this.reduceText(lines[lines.length - 1], pxWidth);
+                    line = '';
+                    break;
+                }
+                line += char;
+            }
+        }
+        if (line.length) lines.push(line);
+        this.setState({text: lines.join('\n')});
+    };
+
+    componentDidMount = () => {
+        // Make sure the label has mounted before calculating the text
+        window.setTimeout(this.renderText, 0);
+    };
+
+    render = () => {
+        const {labelType} = this.props, {text} = this.state, labelProps = this.getLabelProps();
+        switch (labelType) {
+            case LabelType.LABEL:
+                return <label {...labelProps}>{text}</label>;
+            case LabelType.PAR:
+                return <p {...labelProps}>{text}</p>;
+            case LabelType.SPAN:
+                return <span {...labelProps}>{text}</span>;
+        }
+    };
+}

package/src/js/label/style/label.scss

@@ -0,0 +1,4 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+

package/src/js/link/link.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/link.scss';
+import classNames from 'classnames';
+import React, {MouseEventHandler} from 'react';
+import {navigate} from '../util/componentUtil';
+
+interface Props {
+    onClick?: MouseEventHandler;
+    route?: string;
+    className?: string;
+    disabled?: boolean;
+    underline?: boolean;
+    target?: string;
+}
+
+export default function Link(props: React.PropsWithChildren<Props>) {
+    const {className, disabled, route, children, underline, target, onClick} = props;
+
+    function _onClick(evt: React.MouseEvent) {
+        evt.preventDefault();
+        if (!disabled) {
+            if (route) {
+                if (/^(www|http).+/.test(route)) window.open(route, target);
+                else navigate(route);
+            }
+            if (onClick) onClick(evt);
+        }
+    }
+
+    return (
+        <a href={route} onClick={_onClick} target={target}
+           className={classNames('app-link', className, disabled && 'disabled',
+               underline && 'underline')}>{children}</a>
+    );
+};

package/src/js/link/style/link.scss

@@ -0,0 +1,30 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.app-link {
+  color: $color-blue-1;
+  text-decoration: none;
+  transition: color .2s ease-in-out, border-bottom-color .2s ease-in-out;
+  cursor: pointer;
+
+  &.underline {
+    border-bottom: 1px solid transparent;
+  }
+
+  &:hover {
+    color: $color-blue-1-darken;
+
+    &.underline {
+      border-bottom: 1px solid currentColor;
+    }
+  }
+
+  &.disabled {
+    cursor: default;
+    color: $color-gray-4 !important;
+    border-bottom: 1px solid transparent !important;
+  }
+}

package/src/js/loader/loader.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import './style/loader.scss';
+
+import React, {CSSProperties} from 'react';
+import classNames from 'classnames';
+import {ThemeShape} from '../util/controlContext';
+import {isNull} from "../util/controlUtil";
+import {colorIsWhite, convertColor} from "../util/colorUtil";
+
+interface LoaderProps {
+    label?: string,
+    size?: string,
+    thickness?: string,
+    baseColor: string,
+    trackColor: string,
+    containerClass: string,
+    loaderClass: string,
+    labelClass: string,
+    contextStyle: ThemeShape,
+    disableBackground: boolean,
+    loaderStyle: CSSProperties;
+    position: 'absolute' | 'fixed' | 'relative';
+}
+
+export class Loader extends React.Component<LoaderProps> {
+    getContainerClass = (): string => {
+        const {containerClass, disableBackground} = this.props, classes = ['loaderContainer'];
+        if (disableBackground) classes.push('noBack');
+        classes.push(containerClass);
+        return classNames(classes);
+    };
+
+    getLoaderClass = (): string => {
+        const {loaderClass} = this.props, classes = ['loader'];
+        classes.push(loaderClass);
+        return classNames(classes);
+    };
+
+    getLoaderStyle = (): object => {
+        const {baseColor, trackColor, contextStyle} = this.props;
+        let color = isNull(baseColor) ? 'color-orange-1' :
+            colorIsWhite(baseColor) ? contextStyle.contrastColor : baseColor,
+            track = isNull(trackColor) ? 'color-gray-7' : trackColor;
+        const style: CSSProperties = {borderColor: convertColor(track), borderTopColor: convertColor(color)};
+        return this.addPropStyles(style);
+    };
+
+    addPropStyles = (style: CSSProperties): CSSProperties => {
+        const {size, thickness, loaderStyle} = this.props;
+        if (size !== null && size !== undefined)
+            style = Object.assign({}, style, {
+                width: size,
+                height: size,
+                paddingBottom: 'unset',
+            });
+        if (thickness !== null && thickness !== undefined)
+            style = Object.assign({}, style, {borderWidth: thickness});
+        return Object.assign({}, style, loaderStyle);
+    };
+
+    renderLabel = (): React.ReactNode => {
+        const {label, labelClass} = this.props;
+        if (label === null || label === undefined) return null;
+        return <label className={classNames('loaderLabel', labelClass)}>{label}</label>
+    };
+
+    render = () => {
+        const {position} = this.props;
+        return (
+            <div className={this.getContainerClass()} style={{position}}>
+                <div className={this.getLoaderClass()} style={this.getLoaderStyle()}/>
+                {this.renderLabel()}
+            </div>
+        )
+    }
+}

package/src/js/loader/loaderController.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {CSSProperties} from 'react';
+import {Loader} from "./loader";
+import {ControlContext} from "../util/controlContext";
+
+interface LoaderProps {
+    label?: string,
+    baseColor?: string,
+    thickness: string,
+    size: string,
+    trackColor: string,
+    containerClass: string,
+    loaderClass: string,
+    labelClass: string,
+    active: boolean,
+    disableBackground: boolean,
+    loaderStyle: CSSProperties;
+    position: 'absolute' | 'fixed' | 'relative';
+}
+
+export default class LoaderController extends React.Component<LoaderProps> {
+    // noinspection JSUnusedGlobalSymbols
+    declare context: React.ContextType<typeof ControlContext>;
+    static contextType = ControlContext;
+
+    static defaultProps = {
+        trackColor: 'transparent',
+        size: '5rem',
+        thickness: '.2rem',
+        containerClass: '',
+        trackClass: '',
+        loaderClass: '',
+        labelClass: '',
+        disableBackground: false,
+        loaderStyle: {},
+        position: 'absolute',
+    };
+
+    getBaseColor = () => {
+        const {baseColor} = this.props;
+        if (baseColor !== null && baseColor !== undefined) return baseColor;
+        // noinspection JSDeprecatedSymbols
+        return this.context.baseColor;
+    };
+
+    render = () => {
+        const {
+            active, trackColor, containerClass, loaderClass, labelClass, label, size, thickness, disableBackground,
+            loaderStyle, position
+        } = this.props;
+        if (active)
+            return <Loader baseColor={this.getBaseColor()} trackColor={trackColor} contextStyle={this.context}
+                           containerClass={containerClass} loaderClass={loaderClass} labelClass={labelClass}
+                           label={label} size={size} thickness={thickness} disableBackground={disableBackground}
+                           loaderStyle={loaderStyle} position={position}/>;
+        return null;
+    }
+}

package/src/js/loader/style/loader.scss

@@ -0,0 +1,53 @@
+/*!
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+@import '../../../style/variables';
+
+.loaderContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: $z-index-high;
+  background-color: rgba(white, .6);
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  &.noBack {
+    background-color: transparent;
+  }
+
+  .loaderLabel {
+    @include borderRadius(.2rem);
+    font-size: .9rem;
+    color: $color-gray-6;
+    text-align: center;
+    margin-top: .5rem;
+    display: block;
+    padding: .2rem .3rem;
+    background-color: rgba(black, .6);
+  }
+
+  .loader {
+    @include borderRadius(50%);
+    border: 1rem solid;
+    animation: rotate 1s ease-in-out infinite;
+    min-width: 2rem;
+    padding-bottom: 100%;
+    width: 100%;
+    height: 0;
+
+    @keyframes rotate {
+      0% {
+        transform: rotate(0);
+      }
+
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  }
+}

package/src/js/media/media.tsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React, {PureComponent, MouseEventHandler} from 'react';
+import {HTMLVideoEvent, MediaType} from '../util/interfaces';
+import {generateComponentId} from "../util/componentUtil";
+
+interface Props {
+    onVideoEnd?: VoidFunction;
+    onClick?: MouseEventHandler;
+    onCanPlay?: HTMLVideoEvent;
+    filename: string;
+    source?: string;
+    className?: string;
+    imgAlt?: string;
+    mediaType?: MediaType;
+    controls?: boolean;
+    loop?: boolean;
+    autoPlay?: boolean;
+    muted?: boolean;
+    extension?: string;
+    id?: string;
+}
+
+const videoExtensions = ['.mp4', '.webm'];
+
+export default class Media extends PureComponent<Props> {
+    private readonly id = generateComponentId(this.props.id);
+
+    getExtension = (): string => {
+        const {source, filename, extension} = this.props;
+        if (extension) return extension;
+        if (source && source.match(/\.[A-Za-z\d]+$/))
+            return source.substr(source.lastIndexOf('.'), source.length);
+        else if (filename.match(/\.[A-Za-z\d]+$/))
+            return filename.substr(filename.lastIndexOf('.'), filename.length);
+        throw new TypeError('No extension found in either the source or filename')
+    };
+
+    getMediaType = (): MediaType => {
+        const {mediaType} = this.props;
+        if (mediaType) return mediaType;
+        const extension: string = this.getExtension();
+        return videoExtensions.includes(extension) ? MediaType.VIDEO : MediaType.IMAGE;
+    };
+
+    renderImgElement = () => {
+        const {source, filename, imgAlt, onClick, className} = this.props;
+        return (
+            <img id={this.id} src={source ?? filename} alt={imgAlt ?? 'DVR Controls'} onClick={onClick} className={className}/>
+        );
+    };
+
+    renderVideoElement = () => {
+        const {source, filename, onClick, onVideoEnd, className, controls, autoPlay, loop, muted, onCanPlay} = this.props,
+            extension = this.getExtension();
+        return (
+            <video onEnded={onVideoEnd} className={className} controls={controls} autoPlay={autoPlay} loop={loop}
+                   muted={muted} onClick={onClick} id={this.id} onCanPlay={onCanPlay}>
+                <source src={source ?? filename} type={`video/${extension.substr(1)}`}/>
+                This browser does not support the HTML5 video element.
+            </video>
+        )
+    };
+
+    render = () => {
+        const mediaType: MediaType = this.getMediaType();
+        if (mediaType === MediaType.IMAGE) return this.renderImgElement();
+        return this.renderVideoElement();
+    }
+}

package/src/js/navigator/navigator.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright (c) 2021. Dave van Rijn Development
+ */
+
+import React from 'react';
+// import {RouteComponentProps, withRouter} from "react-router";
+import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import {debug} from '../util/miscUtil';
+
+// let navigationData: any = null;
+
+export default function AppNavigator() {
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    function onNavigate(evt: React.MouseEvent) {
+        const navigator: HTMLButtonElement = evt.target as HTMLButtonElement;
+        const url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
+        navigator.dataset.strip = '0';
+        debug(`Navigating to ${url}`);
+        navigate(url);
+    }
+
+    return (
+        <button id='appNavigator' style={{display: 'none'}} data-url='' data-strip='0' onClick={onNavigate}/>
+    )
+}
+
+// class AppNavigator extends React.Component<RouteComponentProps> {
+//     static setNavigationData = (data: any) => {
+//         navigationData = data;
+//     };
+//
+//     static getNavigationData = (): any => navigationData;
+//
+//     navigate = (evt: any) => {
+//         const {location, history} = this.props;
+//         const navigator = evt.target,
+//             url = navigator.dataset.url + (navigator.dataset.strip === '0' ? location.search : '');
+//         navigator.dataset.strip = '0';
+//         debug(`Navigating to ${url}`);
+//         history.push(url);
+//     };
+//
+//     render = () => {
+//         return <button id='appNavigator' style={{display: 'none'}} data-url='' data-strip='0' onClick={this.navigate}/>
+//     }
+// }
+//
+// export default withRouter(AppNavigator);