Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-17 04:14:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

Make Scrubbers touchscreen capable (#5183)

Browse Source
This commit is contained in:
yoshnopa
2024-09-05 03:43:31 +02:00
committed by GitHub
parent ad17e7defe
commit 283f76240f
1 changed files with 42 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
ui/v2.5/src/components/Shared/HoverScrubber.tsx
View File

@@ -14,9 +14,21 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
setActiveIndex, setActiveIndex,
onClick, onClick,
}) => { }) => {
function getActiveIndex(e: React.MouseEvent<HTMLDivElement, MouseEvent>) { function getActiveIndex(
e:
| React.MouseEvent<HTMLDivElement, MouseEvent>
| React.TouchEvent<HTMLDivElement>
) {
const { width } = e.currentTarget.getBoundingClientRect(); const { width } = e.currentTarget.getBoundingClientRect();
const x = e.nativeEvent.offsetX;
let x = 0;
if (e.nativeEvent instanceof MouseEvent) {
x = e.nativeEvent.offsetX;
} else if (e.nativeEvent instanceof TouchEvent) {
x =
e.nativeEvent.touches[0].clientX -
e.currentTarget.getBoundingClientRect().x;
}
const i = Math.round((x / width) * (totalSprites - 1)); const i = Math.round((x / width) * (totalSprites - 1));
@@ -26,24 +38,42 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
return i; return i;
} }
function onMouseMove(e: React.MouseEvent<HTMLDivElement, MouseEvent>) { function onMove(
e:
| React.MouseEvent<HTMLDivElement, MouseEvent>
| React.TouchEvent<HTMLDivElement>
) {
const relatedTarget = e.currentTarget; const relatedTarget = e.currentTarget;
if (relatedTarget !== e.target) return; if (
(e instanceof MouseEvent && relatedTarget !== e.target) ||
(e instanceof TouchEvent &&
document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
)
return;
setActiveIndex(getActiveIndex(e)); setActiveIndex(getActiveIndex(e));
} }
function onMouseLeave() { function onLeave() {
setActiveIndex(undefined); setActiveIndex(undefined);
} }
function onScrubberClick(e: React.MouseEvent<HTMLDivElement, MouseEvent>) { function onScrubberClick(
e:
| React.MouseEvent<HTMLDivElement, MouseEvent>
| React.TouchEvent<HTMLDivElement>
) {
if (!onClick) return; if (!onClick) return;
const relatedTarget = e.currentTarget; const relatedTarget = e.currentTarget;
if (relatedTarget !== e.target) return; if (
(e instanceof MouseEvent && relatedTarget !== e.target) ||
(e instanceof TouchEvent &&
document.elementFromPoint(e.touches[0].clientX, e.touches[0].clientY))
)
return;
e.preventDefault(); e.preventDefault();
onClick(); onClick();
@@ -67,9 +97,12 @@ export const HoverScrubber: React.FC<IHoverScrubber> = ({
> >
<div <div
className="hover-scrubber-area" className="hover-scrubber-area"
onMouseMove={onMouseMove} onMouseMove={onMove}
onMouseLeave={onMouseLeave} onTouchMove={onMove}
onMouseLeave={onLeave}
onTouchEnd={onLeave}
onClick={onScrubberClick} onClick={onScrubberClick}
onTouchStart={onScrubberClick}
/> />
<div className="hover-scrubber-indicator"> <div className="hover-scrubber-indicator">
{activeIndex !== undefined && ( {activeIndex !== undefined && (