From 72cbd3718206ceb15c0c2b68e53039ff2fc466db Mon Sep 17 00:00:00 2001
From: grafixeyehero <grafixeyehero@yahoo.com>
Date: Thu, 15 Dec 2022 22:54:58 +0300
Subject: [PATCH] apply suggestion

---
 src/elements/emby-button/Button.tsx           | 25 +++++++++++++------
 src/elements/emby-button/IconButton.tsx       | 18 ++++++++-----
 src/elements/emby-button/LinkButton.tsx       |  9 ++++---
 .../emby-scrollbuttons/ScrollButtons.tsx      |  4 +--
 src/elements/emby-scroller/Scroller.tsx       |  8 +++---
 5 files changed, 41 insertions(+), 23 deletions(-)

diff --git a/src/elements/emby-button/Button.tsx b/src/elements/emby-button/Button.tsx
index ba3e7b9d11..8f742c41bb 100644
--- a/src/elements/emby-button/Button.tsx
+++ b/src/elements/emby-button/Button.tsx
@@ -3,6 +3,11 @@ import classNames from 'classnames';
 import layoutManager from '../../components/layoutManager';
 import './emby-button.scss';
 
+enum IconPosition {
+    RIGHT = 'RIGHT',
+    LEFT = 'LEFT',
+  }
+
 interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
     HTMLButtonElement
   > {
@@ -20,21 +25,27 @@ const Button: React.FC<ButtonProps> = ({
     onClick,
     ...rest
 }) => {
-    let cssClass = classNames('emby-button', className);
+    const btnClass = classNames(
+        'emby-button',
+        className,
+        { 'show-focus': layoutManager.tv }
+    );
 
-    if (layoutManager.tv) {
-        cssClass += ' show-focus';
-    }
+    const iconClass = classNames(
+        'material-icons',
+        iconClassName,
+        icon
+    );
 
     return (
         <button
-            className={cssClass}
+            className={btnClass}
             onClick={onClick}
             {...rest}
         >
-            {icon && iconPos === 'LEFT' && <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>}
+            {icon && iconPos === IconPosition.LEFT && <span className={iconClass} aria-hidden='true' />}
             <span>{title}</span>
-            {icon && iconPos === 'RIGHT' && <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>}
+            {icon && iconPos === IconPosition.RIGHT && <span className={iconClass} aria-hidden='true' />}
         </button>
     );
 };
diff --git a/src/elements/emby-button/IconButton.tsx b/src/elements/emby-button/IconButton.tsx
index e908a81920..3f4f66e198 100644
--- a/src/elements/emby-button/IconButton.tsx
+++ b/src/elements/emby-button/IconButton.tsx
@@ -19,21 +19,27 @@ const IconButton: React.FC<IconButtonProps> = ({
     onClick,
     ...rest
 }) => {
-    let cssClass = classNames('paper-icon-button-light', className);
+    const btnClass = classNames(
+        'paper-icon-button-light',
+        className,
+        { 'show-focus': layoutManager.tv }
+    );
 
-    if (layoutManager.tv) {
-        cssClass += ' show-focus';
-    }
+    const iconClass = classNames(
+        'material-icons',
+        iconClassName,
+        icon
+    );
 
     return (
         <button
-            className={cssClass}
+            className={btnClass}
             title={title}
             disabled={disabled}
             onClick={onClick}
             {...rest}
         >
-            <span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span>
+            <span className={iconClass} aria-hidden='true' />
         </button>
     );
 };
diff --git a/src/elements/emby-button/LinkButton.tsx b/src/elements/emby-button/LinkButton.tsx
index fdf88cca29..2a175bd177 100644
--- a/src/elements/emby-button/LinkButton.tsx
+++ b/src/elements/emby-button/LinkButton.tsx
@@ -43,11 +43,12 @@ const LinkButton: React.FC<LinkButtonProps> = ({
     if (isAutoHideEnabled === true && !appHost.supports('externallinks')) {
         return null;
     }
-    let cssClass = classNames('emby-button', className);
 
-    if (layoutManager.tv) {
-        cssClass += ' show-focus';
-    }
+    const cssClass = classNames(
+        'emby-button',
+        className,
+        { 'show-focus': layoutManager.tv }
+    );
 
     return (
         <a
diff --git a/src/elements/emby-scrollbuttons/ScrollButtons.tsx b/src/elements/emby-scrollbuttons/ScrollButtons.tsx
index e19f145dbb..85c6f03a0e 100644
--- a/src/elements/emby-scrollbuttons/ScrollButtons.tsx
+++ b/src/elements/emby-scrollbuttons/ScrollButtons.tsx
@@ -20,7 +20,7 @@ interface ScrollButtonsProps {
 }
 
 const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState }) => {
-    const [localeScrollPos, SetLocaleScrollPos] = useState<number>(0);
+    const [localeScrollPos, setLocaleScrollPos] = useState<number>(0);
     const scrollButtonsRef = useRef<HTMLDivElement>(null);
 
     const scrollToPosition = useCallback((pos: number, immediate: boolean) => {
@@ -54,7 +54,7 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
         if (globalize.getIsElementRTL(scrollButtonsRef.current)) {
             localeAwarePos *= -1;
         }
-        SetLocaleScrollPos(localeAwarePos);
+        setLocaleScrollPos(localeAwarePos);
     }, [scrollState.scrollPos]);
 
     return (
diff --git a/src/elements/emby-scroller/Scroller.tsx b/src/elements/emby-scroller/Scroller.tsx
index 1956b1d664..6cd83fc784 100644
--- a/src/elements/emby-scroller/Scroller.tsx
+++ b/src/elements/emby-scroller/Scroller.tsx
@@ -32,7 +32,7 @@ const Scroller: FC<ScrollerProps> = ({
     isAllowNativeSmoothScrollEnabled,
     children
 }) => {
-    const [showControls, SetShowControls] = useState(false);
+    const [showControls, setShowControls] = useState(false);
     const [scrollState, setScrollState] = useState({
         scrollSize: 0,
         scrollPos: 0,
@@ -196,7 +196,7 @@ const Scroller: FC<ScrollerProps> = ({
                 capture: false,
                 passive: true
             });
-            SetShowControls(true);
+            setShowControls(true);
         }
 
         return () => {
@@ -229,12 +229,12 @@ const Scroller: FC<ScrollerProps> = ({
     return (
         <>
             {
-                showControls && scrollState.scrollWidth > scrollState.scrollSize + 20 ?
+                showControls && scrollState.scrollWidth > scrollState.scrollSize + 20 &&
                     <ScrollButtons
                         scrollRef={scrollRef}
                         scrollerFactoryRef={scrollerFactoryRef}
                         scrollState={scrollState}
-                    /> : null
+                    />
             }
 
             <div