From 138055141d66c2f9d9eaf2483c31066fc6e635e5 Mon Sep 17 00:00:00 2001
From: Hyperblast <dev@bitflow.org>
Date: Wed, 19 Feb 2025 14:46:40 +0500
Subject: [PATCH 1/5] introduce RepeatingButton, use for up-down volume control

---
 js/webui/src/elements.js       | 103 ++++++++++++++++++++++++++++++++-
 js/webui/src/volume_control.js |   8 +--
 2 files changed, 104 insertions(+), 7 deletions(-)

diff --git a/js/webui/src/elements.js b/js/webui/src/elements.js
index 429fb017..9b83d668 100644
--- a/js/webui/src/elements.js
+++ b/js/webui/src/elements.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import spriteSvg from 'open-iconic/sprite/sprite.svg'
 import { makeClassName } from './dom_utils.js';
+import { bindHandlers } from './utils.js';
 
 function makeClickHandler(callback)
 {
@@ -40,7 +41,7 @@ Icon.propTypes = {
     className: PropTypes.string,
 };
 
-export const Button = React.forwardRef(function Button(props, ref)
+function Button_(props, ref)
 {
     const { name, title, className, href, onClick, active } = props;
 
@@ -58,9 +59,9 @@ export const Button = React.forwardRef(function Button(props, ref)
             <Icon name={name} />
         </a>
     );
-});
+}
 
-Button.propTypes = {
+Button_.propTypes = {
     name: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -69,6 +70,102 @@ Button.propTypes = {
     active: PropTypes.bool
 };
 
+export const Button = React.forwardRef(Button_);
+
+const repeatInterval = 500;
+
+export class RepeatingButton extends React.PureComponent
+{
+    constructor(props)
+    {
+        super(props);
+        this.intervalId = null;
+        this.hasInitialClick = false;
+        bindHandlers(this);
+    }
+
+    handleTimer()
+    {
+        this.hasInitialClick = true;
+        this.props.onClick();
+    }
+
+    handleClick(e)
+    {
+        if (e.button === 0 || e.button === 1)
+        {
+            e.preventDefault();
+
+            if (e.button === 0 && !this.hasInitialClick)
+                this.props.onClick();
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState, snapshot)
+    {
+        if (prevProps.onClick === this.props.onClick || !this.intervalId)
+            return;
+
+        clearInterval(this.intervalId);
+        this.intervalId = setInterval(this.handleTimer, repeatInterval);
+    }
+
+    handleStart(e)
+    {
+        if (e.button !== 0 && typeof e.touches === 'undefined')
+            return;
+
+        if (!this.intervalId)
+        {
+            this.hasInitialClick = false;
+            this.intervalId = setInterval(this.handleTimer, repeatInterval);
+        }
+    }
+
+    handleEnd(e)
+    {
+        if (e.button !== 0 && typeof e.touches === 'undefined')
+            return;
+
+        if (this.intervalId)
+        {
+            clearInterval(this.intervalId);
+            this.intervalId = null;
+        }
+    }
+
+    render()
+    {
+        const { name, title, className, active } = this.props;
+
+        const fullClassName = 'button'
+            + (className ? ' ' + className : '')
+            + (active ? ' active' : '');
+
+        return (
+            <a
+                href='#'
+                title={title}
+                className={fullClassName}
+                onMouseDown={this.handleStart}
+                onMouseUp={this.handleEnd}
+                onTouchStart={this.handleStart}
+                onTouchEnd={this.handleEnd}
+                onClick={this.handleClick}>
+                <Icon name={name} />
+            </a>
+        );
+    }
+}
+
+RepeatingButton.propTypes = {
+    name: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    active: PropTypes.bool
+};
+
 export function Menu(props)
 {
     const { children } = props;
diff --git a/js/webui/src/volume_control.js b/js/webui/src/volume_control.js
index 72cd1173..1096bb18 100644
--- a/js/webui/src/volume_control.js
+++ b/js/webui/src/volume_control.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Button } from './elements.js'
+import { Button, RepeatingButton } from './elements.js';
 import { bindHandlers, dbToLinear, linearToDb } from './utils.js'
 import ModelBinding from './model_binding.js';
 import { DropdownButton } from './dropdown.js';
@@ -54,7 +54,7 @@ class VolumeControl_ extends React.PureComponent
         this.context.playerModel.volumeUp();
     }
 
-    handleVolumeDown(e)
+    handleVolumeDown()
     {
         this.context.playerModel.volumeDown();
     }
@@ -84,8 +84,8 @@ class VolumeControl_ extends React.PureComponent
                 {
                     isUpDown
                         ? <>
-                            <Button name='minus' title='Decrease volume' onClick={this.handleVolumeDown}/>
-                            <Button name='plus' title='Increase volume' onClick={this.handleVolumeUp}/>
+                            <RepeatingButton name='minus' title='Decrease volume' onClick={this.handleVolumeDown}/>
+                            <RepeatingButton name='plus' title='Increase volume' onClick={this.handleVolumeUp}/>
                             <div className='volume-text-block'><span className='volume-text'>{valueText}</span></div>
                         </>
                         : <input type='range'

From 92b786308920ee43e0722384bba3a905c6439cf3 Mon Sep 17 00:00:00 2001
From: Hyperblast <dev@bitflow.org>
Date: Thu, 20 Feb 2025 12:34:12 +0500
Subject: [PATCH 2/5] remove checks for button 1

---
 js/webui/src/elements.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/js/webui/src/elements.js b/js/webui/src/elements.js
index 9b83d668..b49839b2 100644
--- a/js/webui/src/elements.js
+++ b/js/webui/src/elements.js
@@ -92,13 +92,13 @@ export class RepeatingButton extends React.PureComponent
 
     handleClick(e)
     {
-        if (e.button === 0 || e.button === 1)
-        {
-            e.preventDefault();
+        if (e.button !== 0)
+            return;
 
-            if (e.button === 0 && !this.hasInitialClick)
-                this.props.onClick();
-        }
+        e.preventDefault();
+
+        if (!this.hasInitialClick)
+            this.props.onClick();
     }
 
     componentDidUpdate(prevProps, prevState, snapshot)

From 2d4a6f9372eee9f840404cd3b29af8ba25d2a423 Mon Sep 17 00:00:00 2001
From: Hyperblast <dev@bitflow.org>
Date: Thu, 20 Feb 2025 12:44:25 +0500
Subject: [PATCH 3/5] introduce helper

---
 js/webui/src/elements.js | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/js/webui/src/elements.js b/js/webui/src/elements.js
index b49839b2..7811fa46 100644
--- a/js/webui/src/elements.js
+++ b/js/webui/src/elements.js
@@ -74,6 +74,11 @@ export const Button = React.forwardRef(Button_);
 
 const repeatInterval = 500;
 
+function isLeftButtonOrTouch(e)
+{
+    return e.button === 0 || typeof e.touches != 'undefined';
+}
+
 export class RepeatingButton extends React.PureComponent
 {
     constructor(props)
@@ -112,26 +117,20 @@ export class RepeatingButton extends React.PureComponent
 
     handleStart(e)
     {
-        if (e.button !== 0 && typeof e.touches === 'undefined')
+        if (!isLeftButtonOrTouch(e) || this.intervalId)
             return;
 
-        if (!this.intervalId)
-        {
-            this.hasInitialClick = false;
-            this.intervalId = setInterval(this.handleTimer, repeatInterval);
-        }
+        this.hasInitialClick = false;
+        this.intervalId = setInterval(this.handleTimer, repeatInterval);
     }
 
     handleEnd(e)
     {
-        if (e.button !== 0 && typeof e.touches === 'undefined')
+        if (!isLeftButtonOrTouch(e) || !this.intervalId)
             return;
 
-        if (this.intervalId)
-        {
-            clearInterval(this.intervalId);
-            this.intervalId = null;
-        }
+        clearInterval(this.intervalId);
+        this.intervalId = null;
     }
 
     render()

From 2525ee0f372a510bb59614cdb4c7834efc7f68e7 Mon Sep 17 00:00:00 2001
From: Hyperblast <dev@bitflow.org>
Date: Thu, 20 Feb 2025 15:47:54 +0500
Subject: [PATCH 4/5] remove propTypes inside forwardRef

---
 js/webui/src/elements.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/js/webui/src/elements.js b/js/webui/src/elements.js
index 7811fa46..5cba4f7f 100644
--- a/js/webui/src/elements.js
+++ b/js/webui/src/elements.js
@@ -41,7 +41,7 @@ Icon.propTypes = {
     className: PropTypes.string,
 };
 
-function Button_(props, ref)
+export const Button = React.forwardRef(function Button(props, ref)
 {
     const { name, title, className, href, onClick, active } = props;
 
@@ -59,9 +59,9 @@ function Button_(props, ref)
             <Icon name={name} />
         </a>
     );
-}
+});
 
-Button_.propTypes = {
+Button.propTypes = {
     name: PropTypes.string.isRequired,
     title: PropTypes.string.isRequired,
     className: PropTypes.string,
@@ -70,8 +70,6 @@ Button_.propTypes = {
     active: PropTypes.bool
 };
 
-export const Button = React.forwardRef(Button_);
-
 const repeatInterval = 500;
 
 function isLeftButtonOrTouch(e)

From eb5c2cd9fbf0a6ac1a010114873ee13886fd2c33 Mon Sep 17 00:00:00 2001
From: Hyperblast <dev@bitflow.org>
Date: Thu, 20 Feb 2025 15:52:52 +0500
Subject: [PATCH 5/5] minor fixes

---
 js/webui/src/elements.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/webui/src/elements.js b/js/webui/src/elements.js
index 5cba4f7f..5ae0de59 100644
--- a/js/webui/src/elements.js
+++ b/js/webui/src/elements.js
@@ -74,7 +74,7 @@ const repeatInterval = 500;
 
 function isLeftButtonOrTouch(e)
 {
-    return e.button === 0 || typeof e.touches != 'undefined';
+    return e.button === 0 || typeof e.touches !== 'undefined';
 }
 
 export class RepeatingButton extends React.PureComponent