mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

apply suggestion

Browse source
This commit is contained in:
grafixeyehero 2022-12-15 22:54:58 +03:00
parent 62a9034f5b
commit 72cbd37182
5 changed files with 41 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/elements/emby-button/Button.tsx
View file

@ -3,6 +3,11 @@ import classNames from 'classnames';
import layoutManager from '../../components/layoutManager'; import layoutManager from '../../components/layoutManager';
import './emby-button.scss'; import './emby-button.scss';
enum IconPosition {
RIGHT = 'RIGHT',
LEFT = 'LEFT',
}
interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, interface ButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
HTMLButtonElement HTMLButtonElement
> { > {
@ -20,21 +25,27 @@ const Button: React.FC<ButtonProps> = ({
onClick, onClick,
...rest ...rest
}) => { }) => {
let cssClass = classNames('emby-button', className); const btnClass = classNames(
'emby-button',
className,
{ 'show-focus': layoutManager.tv }
);
if (layoutManager.tv) { const iconClass = classNames(
cssClass += ' show-focus'; 'material-icons',
} iconClassName,
icon
);
return ( return (
<button <button
className={cssClass} className={btnClass}
onClick={onClick} onClick={onClick}
{...rest} {...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> <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> </button>
); );
}; };

18
src/elements/emby-button/IconButton.tsx
View file

@ -19,21 +19,27 @@ const IconButton: React.FC<IconButtonProps> = ({
onClick, onClick,
...rest ...rest
}) => { }) => {
let cssClass = classNames('paper-icon-button-light', className); const btnClass = classNames(
'paper-icon-button-light',
className,
{ 'show-focus': layoutManager.tv }
);
if (layoutManager.tv) { const iconClass = classNames(
cssClass += ' show-focus'; 'material-icons',
} iconClassName,
icon
);
return ( return (
<button <button
className={cssClass} className={btnClass}
title={title} title={title}
disabled={disabled} disabled={disabled}
onClick={onClick} onClick={onClick}
{...rest} {...rest}
> >
<span className={classNames('material-icons', iconClassName, icon)} aria-hidden='true'></span> <span className={iconClass} aria-hidden='true' />
</button> </button>
); );
}; };

9
src/elements/emby-button/LinkButton.tsx
View file

@ -43,11 +43,12 @@ const LinkButton: React.FC<LinkButtonProps> = ({
if (isAutoHideEnabled === true && !appHost.supports('externallinks')) { if (isAutoHideEnabled === true && !appHost.supports('externallinks')) {
return null; return null;
} }
let cssClass = classNames('emby-button', className);
if (layoutManager.tv) { const cssClass = classNames(
cssClass += ' show-focus'; 'emby-button',
} className,
{ 'show-focus': layoutManager.tv }
);
return ( return (
<a <a

4
src/elements/emby-scrollbuttons/ScrollButtons.tsx
View file

@ -20,7 +20,7 @@ interface ScrollButtonsProps {
} }
const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState }) => { const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState }) => {
const [localeScrollPos, SetLocaleScrollPos] = useState<number>(0); const [localeScrollPos, setLocaleScrollPos] = useState<number>(0);
const scrollButtonsRef = useRef<HTMLDivElement>(null); const scrollButtonsRef = useRef<HTMLDivElement>(null);
const scrollToPosition = useCallback((pos: number, immediate: boolean) => { const scrollToPosition = useCallback((pos: number, immediate: boolean) => {
@ -54,7 +54,7 @@ const ScrollButtons: FC<ScrollButtonsProps> = ({ scrollerFactoryRef, scrollState
if (globalize.getIsElementRTL(scrollButtonsRef.current)) { if (globalize.getIsElementRTL(scrollButtonsRef.current)) {
localeAwarePos *= -1; localeAwarePos *= -1;
} }
SetLocaleScrollPos(localeAwarePos); setLocaleScrollPos(localeAwarePos);
}, [scrollState.scrollPos]); }, [scrollState.scrollPos]);
return ( return (

8
src/elements/emby-scroller/Scroller.tsx
View file

@ -32,7 +32,7 @@ const Scroller: FC<ScrollerProps> = ({
isAllowNativeSmoothScrollEnabled, isAllowNativeSmoothScrollEnabled,
children children
}) => { }) => {
const [showControls, SetShowControls] = useState(false); const [showControls, setShowControls] = useState(false);
const [scrollState, setScrollState] = useState({ const [scrollState, setScrollState] = useState({
scrollSize: 0, scrollSize: 0,
scrollPos: 0, scrollPos: 0,
@ -196,7 +196,7 @@ const Scroller: FC<ScrollerProps> = ({
capture: false, capture: false,
passive: true passive: true
}); });
SetShowControls(true); setShowControls(true);
} }
return () => { return () => {
@ -229,12 +229,12 @@ const Scroller: FC<ScrollerProps> = ({
return ( return (
<> <>
{ {
showControls && scrollState.scrollWidth > scrollState.scrollSize + 20 ? showControls && scrollState.scrollWidth > scrollState.scrollSize + 20 &&
<ScrollButtons <ScrollButtons
scrollRef={scrollRef} scrollRef={scrollRef}
scrollerFactoryRef={scrollerFactoryRef} scrollerFactoryRef={scrollerFactoryRef}
scrollState={scrollState} scrollState={scrollState}
/> : null />
} }
<div <div