Added a stream volume control slider to the Gamebar UI

renderer/components/ui/slider.css

@@ -0,0 +1,59 @@
+.slider-container {
+ display: flex;
+ align-items: flex-start;
+ padding: 1rem 1rem;
+ }
+
+ .slider-label {
+ margin-right: 5px;
+ display: none;
+ }
+ .slider-percentage {
+ display: none;
+ }
+ .slider-icon {
+ margin-right: -8px;
+ margin-top: -20px;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ border: none;
+ cursor: pointer;
+ overflow: hidden;
+ outline: none;
+ color: #005e31; /* SVG Color (vol icon) */
+ }
+
+ .slider {
+ width: 150px;
+ height: 8px;
+ border-radius: 4px;
+ accent-color: #008746; /* fill color for slider bar */ 
+ outline: none;
+ cursor: pointer;
+ margin-right: 10px;
+ }
+ /* sliders are silly in Chrome - probably should just find a nice cross-browser CSS slider/input[type=range] impl. somewhere and use that */
+ .slider::-webkit-slider-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #444444; 
+ cursor: pointer;
+ }
+
+ .slider::-moz-range-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #444444; 
+ cursor: pointer;
+ }
+
+ .slider::-ms-thumb {
+ width: 20px;
+ height: 20px;
+ border-radius: 50%;
+ background: #444444; 
+ cursor: pointer;
+ }
+

renderer/components/ui/slider.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+
+interface SliderProps {
+ id: string;
+ min: number;
+ max: number;
+ step: number;
+ value: number;
+ onChange: (value: number) => void;
+ label?: string;
+ svg?: React.ReactNode; // uses label if not defined
+ style?: React.CSSProperties;
+}
+
+const Slider: React.FC<SliderProps> = ({
+ id,
+ min,
+ max,
+ step,
+ value,
+ onChange,
+ label,
+ svg,
+ style,
+}) => {
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const newValue = parseFloat(event.target.value)
+ onChange(newValue)
+ }
+ const handleSvgClick = () => {
+ //click to mute/unmute lazy impl. (should remember last value to avoid 'rip headphone users' moments..)
+ if (value === min) onChange(max)
+ else onChange(min)
+ }
+ const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+ event.preventDefault()
+ return false
+ }
+
+ return (
+ <div className="slider-container" style={style}>
+ {svg ? (
+ <button
+ className="slider-icon"
+ onClick={handleSvgClick}
+ tabIndex={0}
+ role="button"
+ aria-label="Reset volume"
+ >
+ {svg}
+ </button>
+ ) : (
+ label && (
+ <label htmlFor={id} style={{ marginRight: 10 }}>
+ {label}:
+ </label>
+ )
+ )}
+ <input
+ id={id}
+ className="slider"
+ type="range"
+ min={min}
+ max={max}
+ step={step}
+ value={value}
+ onChange={handleChange}
+ onKeyDown={handleKeyDown}
+ />
+ <span className="slider-percentage" style={{ marginLeft: 10 }}>
+ {Math.round(value * 100)}%
+ </span>
+ </div>
+ )
+}
+
+export default Slider