vp-outstream-player/src/ui/controls.ts

Outstream video player with Google IMA integration

import { PlayerConfig } from "../config/types";
import { VpOutstreamPlayer } from "../core/vpOutstreamPlayer";

export function wireControls(player: VpOutstreamPlayer): void {
	const { playButton, muteButton, skipButton, volumeButton } = player;

	playButton?.addEventListener("click", () => {
		const playing = player.isPlaying;
		if (playing) {
			player.pause();
		} else {
			player.play();
		}
	});

	muteButton?.addEventListener("click", () => {
		const muted = player.isMuted;
		if (muted) {
			player.unmute();
		} else {
			player.mute();
		}
	});

	volumeButton?.addEventListener("input", (e) => {
		const value = parseFloat((e.target as HTMLInputElement).value);
		player.setVolume(value);
		updateGradient(e.target as HTMLInputElement);
	});

	skipButton?.addEventListener("click", () => {
		player.skipAd();
	});
}

export function updateGradient(element: HTMLInputElement): void {
	if (!element) return;
	const value = parseFloat(element.value);
	const min = parseFloat(element.min);
	const max = parseFloat(element.max);

	const val = ((value - min) / (max - min)) * 100;

	element.style.backgroundImage = `linear-gradient(to right,
      var(--player-progress-color) 0%,
      var(--player-progress-color) ${val}%,
      var(--player-rail-color) ${val}%,
      var(--player-rail-color) 100%)`;
}

export function hideVolumeContainer(playerContainer: HTMLElement): void {
	if (!playerContainer) return;
	const volumeContainer = playerContainer.querySelector(".vp-volume-container")! as HTMLElement;
	volumeContainer.style.display = "none";
}

export function setSkin(container: HTMLElement, skin: PlayerConfig["config"]["skin"]): void {
	if (!skin || !container) return;

	const root = container;
	const { icons, slider } = skin;

	if (icons) {
		if (icons.default) root.style.setProperty("--player-icon-color", icons.default);
		if (icons.hover) root.style.setProperty("--player-icon-hover-color", icons.hover);
	}

	if (slider) {
		if (slider.rail) root.style.setProperty("--player-rail-color", slider.rail);
		if (slider.progress) root.style.setProperty("--player-progress-color", slider.progress);
		if (slider.dragger) root.style.setProperty("--player-dragger-color", slider.dragger);
	}
}