Convert emby-button and emby-scroller to react

src/elements/emby-button/Button.tsx

@@ -0,0 +1,42 @@
+import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import classNames from 'classnames';
+import layoutManager from '../../components/layoutManager';
+import './emby-button.scss';
+
+interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  icon?: string;
+  iconClassName?: string;
+  iconPos?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+    className,
+    title,
+    icon,
+    iconClassName,
+    iconPos,
+    onClick,
+    ...rest
+}) => {
+    let cssClass = classNames('emby-button', className);
+
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
+    }
+
+    return (
+        <button
+            className={cssClass}
+            onClick={onClick}
+            {...rest}
+        >
+            {icon && iconPos === 'LEFT' && <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>}
+            <span>{title}</span>
+            {icon && iconPos === 'RIGHT' && <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>}
+        </button>
+    );
+};
+
+export default Button;

src/elements/emby-button/IconButton.tsx

@@ -0,0 +1,41 @@
+import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react';
+import classNames from 'classnames';
+import layoutManager from '../../components/layoutManager';
+import './emby-button.scss';
+
+interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  > {
+  icon?: string;
+  iconClassName?: string;
+}
+
+const IconButton: React.FC<IconButtonProps> = ({
+    className,
+    title,
+    icon,
+    iconClassName,
+    disabled = false,
+    onClick,
+    ...rest
+}) => {
+    let cssClass = classNames('paper-icon-button-light', className);
+
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
+    }
+
+    return (
+        <button
+            className={cssClass}
+            title={title}
+            disabled={disabled}
+            onClick={onClick}
+            {...rest}
+        >
+            <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>
+        </button>
+    );
+};
+
+export default IconButton;

src/elements/emby-button/LinkButton.tsx

@@ -0,0 +1,65 @@
+import React, { AnchorHTMLAttributes, DetailedHTMLProps, MouseEvent } from 'react';
+import classNames from 'classnames';
+import layoutManager from '../../components/layoutManager';
+import shell from '../../scripts/shell';
+import { appRouter } from '../../components/appRouter';
+import { appHost } from '../../components/apphost';
+import './emby-button.scss';
+
+interface LinkButtonProps extends DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>,
+    HTMLAnchorElement
+  > {
+  className?: string;
+  isAutoHideEnabled?: boolean;
+  href?: string;
+  target?: string;
+}
+
+const LinkButton: React.FC<LinkButtonProps> = ({
+    className,
+    isAutoHideEnabled,
+    href,
+    target,
+    children,
+    ...rest
+}) => {
+    const onAnchorClick = (e: MouseEvent<HTMLAnchorElement>) => {
+        const url = href || '';
+        if (url !== '#') {
+            if (target) {
+                if (!appHost.supports('targetblank')) {
+                    e.preventDefault();
+                    shell.openUrl(url);
+                }
+            } else {
+                e.preventDefault();
+                appRouter.show(url);
+            }
+        } else {
+            e.preventDefault();
+        }
+    };
+
+    if (isAutoHideEnabled === true && !appHost.supports('externallinks')) {
+        return null;
+    }
+    let cssClass = classNames('emby-button', className);
+
+    if (layoutManager.tv) {
+        cssClass += ' show-focus';
+    }
+
+    return (
+        <a
+            className={cssClass}
+            href={href}
+            target={target}
+            onClick={onAnchorClick}
+            {...rest}
+        >
+            {children}
+        </a>
+    );
+};
+
+export default LinkButton;