mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-10 22:20:14 +00:00
feat(player): add volume/mute controls (#651)
* feat(player): add volume/mute controls to the player Adds a mute toggle button and volume slider to the controls bar, positioned between the time display and speed selector. The slider expands on hover for a compact default footprint. - `volume` attribute/property (0–1, clamped) with `volumechange` event - `muted` attribute now syncs to the controls UI (icon updates) - Three volume icons: high, low, muted — updates reactively - Volume forwarded to parent-frame audio proxies and iframe runtime via `set-volume` postMessage control - 9 new tests covering volume clamping, events, controls rendering, mute toggle, and iframe message forwarding Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(player): wire set-volume through runtime bridge + address review feedback Addresses the blocker from PR review: the iframe runtime now handles `set-volume` messages end-to-end (types → bridge → init → media sync). Runtime side: - Add `set-volume` to RuntimeBridgeControlAction union - Add `volume` field to RuntimeBridgeControlMessage - Handle `set-volume` in bridge.ts with [0,1] clamping - Store bridgeVolume in RuntimeState, apply to media elements - syncRuntimeMedia composes userVolume × clip author volume Player side: - Muted toggle now dispatches `volumechange` (HTML5 spec compliance) - Volume slider auto-unmutes when scrubbed above 0 while muted - Touch support on volume slider (touchstart/move/end) Tests: 5 new (3 bridge, 2 media) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(player): add ARIA keyboard controls, fix icon collision and clipVolume parity - Volume slider: role="slider", aria-label, aria-valuemin/max/now, tabindex=0, arrow key support (5% steps, auto-unmutes) - Volume=0 unmuted now shows low-volume icon instead of muted icon - Fix clipVolume divergence: init.ts uses Number.isFinite() matching media.ts semantics (preserves data-volume="0") - 3 new tests: ARIA attributes, volumechange on mute, icon collision Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Miguel Ángel
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
614f764bcd
commit
a7a6648852
@@ -1,10 +1,18 @@
|
||||
import { PLAY_ICON, PAUSE_ICON } from "./styles.js";
|
||||
import {
|
||||
PLAY_ICON,
|
||||
PAUSE_ICON,
|
||||
VOLUME_HIGH_ICON,
|
||||
VOLUME_LOW_ICON,
|
||||
VOLUME_MUTED_ICON,
|
||||
} from "./styles.js";
|
||||
|
||||
export interface ControlsCallbacks {
|
||||
onPlay: () => void;
|
||||
onPause: () => void;
|
||||
onSeek: (fraction: number) => void;
|
||||
onSpeedChange: (speed: number) => void;
|
||||
onMuteToggle: () => void;
|
||||
onVolumeChange: (volume: number) => void;
|
||||
}
|
||||
|
||||
/** Default logarithmic speed presets — each step roughly doubles/halves. */
|
||||
@@ -38,6 +46,8 @@ export function createControls(
|
||||
updateTime: (current: number, duration: number) => void;
|
||||
updatePlaying: (playing: boolean) => void;
|
||||
updateSpeed: (speed: number) => void;
|
||||
updateMuted: (muted: boolean) => void;
|
||||
updateVolume: (volume: number) => void;
|
||||
show: () => void;
|
||||
hide: () => void;
|
||||
destroy: () => void;
|
||||
@@ -94,23 +104,135 @@ export function createControls(
|
||||
speedWrap.appendChild(speedMenu);
|
||||
speedWrap.appendChild(speedBtn);
|
||||
|
||||
const volumeWrap = document.createElement("div");
|
||||
volumeWrap.className = "hfp-volume-wrap";
|
||||
|
||||
const muteBtn = document.createElement("button");
|
||||
muteBtn.className = "hfp-mute-btn";
|
||||
muteBtn.type = "button";
|
||||
muteBtn.innerHTML = VOLUME_HIGH_ICON;
|
||||
muteBtn.setAttribute("aria-label", "Mute");
|
||||
|
||||
const volumeSliderWrap = document.createElement("div");
|
||||
volumeSliderWrap.className = "hfp-volume-slider-wrap";
|
||||
|
||||
const volumeSlider = document.createElement("div");
|
||||
volumeSlider.className = "hfp-volume-slider";
|
||||
volumeSlider.setAttribute("role", "slider");
|
||||
volumeSlider.setAttribute("aria-label", "Volume");
|
||||
volumeSlider.setAttribute("aria-valuemin", "0");
|
||||
volumeSlider.setAttribute("aria-valuemax", "100");
|
||||
volumeSlider.setAttribute("aria-valuenow", "100");
|
||||
volumeSlider.tabIndex = 0;
|
||||
const volumeFill = document.createElement("div");
|
||||
volumeFill.className = "hfp-volume-fill";
|
||||
volumeFill.style.width = "100%";
|
||||
volumeSlider.appendChild(volumeFill);
|
||||
volumeSliderWrap.appendChild(volumeSlider);
|
||||
|
||||
volumeWrap.appendChild(volumeSliderWrap);
|
||||
volumeWrap.appendChild(muteBtn);
|
||||
|
||||
controls.appendChild(playBtn);
|
||||
controls.appendChild(scrubber);
|
||||
controls.appendChild(time);
|
||||
controls.appendChild(volumeWrap);
|
||||
controls.appendChild(speedWrap);
|
||||
parent.appendChild(controls);
|
||||
|
||||
let isPlaying = false;
|
||||
let isMuted = false;
|
||||
let currentVolume = 1;
|
||||
let hideTimeout: ReturnType<typeof setTimeout> | null = null;
|
||||
let speedIndex = presets.indexOf(1); // start at 1x
|
||||
if (speedIndex === -1) speedIndex = 0;
|
||||
|
||||
const getVolumeIcon = (muted: boolean, volume: number): string => {
|
||||
if (muted) return VOLUME_MUTED_ICON;
|
||||
if (volume === 0) return VOLUME_LOW_ICON;
|
||||
if (volume < 0.5) return VOLUME_LOW_ICON;
|
||||
return VOLUME_HIGH_ICON;
|
||||
};
|
||||
|
||||
playBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
if (isPlaying) callbacks.onPause();
|
||||
else callbacks.onPlay();
|
||||
});
|
||||
|
||||
muteBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
callbacks.onMuteToggle();
|
||||
});
|
||||
|
||||
let volumeScrubbing = false;
|
||||
|
||||
const handleVolumeAt = (clientX: number) => {
|
||||
const rect = volumeSlider.getBoundingClientRect();
|
||||
const fraction = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
|
||||
currentVolume = fraction;
|
||||
volumeFill.style.width = `${fraction * 100}%`;
|
||||
volumeSlider.setAttribute("aria-valuenow", String(Math.round(fraction * 100)));
|
||||
if (isMuted && fraction > 0) callbacks.onMuteToggle();
|
||||
muteBtn.innerHTML = getVolumeIcon(isMuted, fraction);
|
||||
callbacks.onVolumeChange(fraction);
|
||||
};
|
||||
|
||||
volumeSlider.addEventListener("mousedown", (e) => {
|
||||
e.stopPropagation();
|
||||
volumeScrubbing = true;
|
||||
handleVolumeAt(e.clientX);
|
||||
});
|
||||
const onVolumeMouseMove = (e: MouseEvent) => {
|
||||
if (volumeScrubbing) handleVolumeAt(e.clientX);
|
||||
};
|
||||
const onVolumeMouseUp = () => {
|
||||
volumeScrubbing = false;
|
||||
};
|
||||
document.addEventListener("mousemove", onVolumeMouseMove);
|
||||
document.addEventListener("mouseup", onVolumeMouseUp);
|
||||
|
||||
volumeSlider.addEventListener(
|
||||
"touchstart",
|
||||
(e) => {
|
||||
volumeScrubbing = true;
|
||||
const touch = e.touches[0];
|
||||
if (touch) handleVolumeAt(touch.clientX);
|
||||
},
|
||||
{ passive: true },
|
||||
);
|
||||
const onVolumeTouchMove = (e: TouchEvent) => {
|
||||
if (volumeScrubbing) {
|
||||
const touch = e.touches[0];
|
||||
if (touch) handleVolumeAt(touch.clientX);
|
||||
}
|
||||
};
|
||||
const onVolumeTouchEnd = () => {
|
||||
volumeScrubbing = false;
|
||||
};
|
||||
document.addEventListener("touchmove", onVolumeTouchMove, { passive: true });
|
||||
document.addEventListener("touchend", onVolumeTouchEnd);
|
||||
|
||||
const VOLUME_STEP = 0.05;
|
||||
volumeSlider.addEventListener("keydown", (e) => {
|
||||
let newVol = currentVolume;
|
||||
if (e.key === "ArrowRight" || e.key === "ArrowUp") {
|
||||
newVol = Math.min(1, currentVolume + VOLUME_STEP);
|
||||
} else if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
|
||||
newVol = Math.max(0, currentVolume - VOLUME_STEP);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
currentVolume = newVol;
|
||||
volumeFill.style.width = `${newVol * 100}%`;
|
||||
volumeSlider.setAttribute("aria-valuenow", String(Math.round(newVol * 100)));
|
||||
if (isMuted && newVol > 0) callbacks.onMuteToggle();
|
||||
muteBtn.innerHTML = getVolumeIcon(isMuted, newVol);
|
||||
callbacks.onVolumeChange(newVol);
|
||||
});
|
||||
|
||||
const setActiveOption = (speed: number) => {
|
||||
for (const opt of speedMenu.querySelectorAll(".hfp-speed-option")) {
|
||||
opt.classList.toggle("hfp-active", (opt as HTMLElement).dataset.speed === String(speed));
|
||||
@@ -221,6 +343,17 @@ export function createControls(
|
||||
speedBtn.textContent = formatSpeed(speed);
|
||||
setActiveOption(speed);
|
||||
},
|
||||
updateMuted(muted: boolean) {
|
||||
isMuted = muted;
|
||||
muteBtn.innerHTML = getVolumeIcon(muted, currentVolume);
|
||||
muteBtn.setAttribute("aria-label", muted ? "Unmute" : "Mute");
|
||||
},
|
||||
updateVolume(volume: number) {
|
||||
currentVolume = volume;
|
||||
volumeFill.style.width = `${volume * 100}%`;
|
||||
volumeSlider.setAttribute("aria-valuenow", String(Math.round(volume * 100)));
|
||||
muteBtn.innerHTML = getVolumeIcon(isMuted, volume);
|
||||
},
|
||||
show() {
|
||||
controls.style.display = "";
|
||||
},
|
||||
@@ -232,6 +365,10 @@ export function createControls(
|
||||
document.removeEventListener("mouseup", onMouseUp);
|
||||
document.removeEventListener("touchmove", onTouchMove);
|
||||
document.removeEventListener("touchend", onTouchEnd);
|
||||
document.removeEventListener("mousemove", onVolumeMouseMove);
|
||||
document.removeEventListener("mouseup", onVolumeMouseUp);
|
||||
document.removeEventListener("touchmove", onVolumeTouchMove);
|
||||
document.removeEventListener("touchend", onVolumeTouchEnd);
|
||||
document.removeEventListener("click", onDocClick);
|
||||
if (hideTimeout) clearTimeout(hideTimeout);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user