Brunobkr/llama.cpp_AlgMor24_github

1import { render_effect, effect, teardown } from '../../../reactivity/effects.js';2import { listen } from './shared.js';3 4/** @param {TimeRanges} ranges */5function time_ranges_to_array(ranges) {6	var array = [];7 8	for (var i = 0; i < ranges.length; i += 1) {9		array.push({ start: ranges.start(i), end: ranges.end(i) });10	}11 12	return array;13}14 15/**16 * @param {HTMLVideoElement | HTMLAudioElement} media17 * @param {() => number | undefined} get18 * @param {(value: number) => void} set19 * @returns {void}20 */21export function bind_current_time(media, get, set = get) {22	/** @type {number} */23	var raf_id;24	/** @type {number} */25	var value;26 27	// Ideally, listening to timeupdate would be enough, but it fires too infrequently for the currentTime28	// binding, which is why we use a raf loop, too. We additionally still listen to timeupdate because29	// the user could be scrubbing through the video using the native controls when the media is paused.30	var callback = () => {31		cancelAnimationFrame(raf_id);32 33		if (!media.paused) {34			raf_id = requestAnimationFrame(callback);35		}36 37		var next_value = media.currentTime;38		if (value !== next_value) {39			set((value = next_value));40		}41	};42 43	raf_id = requestAnimationFrame(callback);44	media.addEventListener('timeupdate', callback);45 46	render_effect(() => {47		var next_value = Number(get());48 49		if (value !== next_value && !isNaN(/** @type {any} */ (next_value))) {50			media.currentTime = value = next_value;51		}52	});53 54	teardown(() => {55		cancelAnimationFrame(raf_id);56		media.removeEventListener('timeupdate', callback);57	});58}59 60/**61 * @param {HTMLVideoElement | HTMLAudioElement} media62 * @param {(array: Array<{ start: number; end: number }>) => void} set63 */64export function bind_buffered(media, set) {65	/** @type {{ start: number; end: number; }[]} */66	var current;67 68	// `buffered` can update without emitting any event, so we check it on various events.69	// By specs, `buffered` always returns a new object, so we have to compare deeply.70	listen(media, ['loadedmetadata', 'progress', 'timeupdate', 'seeking'], () => {71		var ranges = media.buffered;72 73		if (74			!current ||75			current.length !== ranges.length ||76			current.some((range, i) => ranges.start(i) !== range.start || ranges.end(i) !== range.end)77		) {78			current = time_ranges_to_array(ranges);79			set(current);80		}81	});82}83 84/**85 * @param {HTMLVideoElement | HTMLAudioElement} media86 * @param {(array: Array<{ start: number; end: number }>) => void} set87 */88export function bind_seekable(media, set) {89	listen(media, ['loadedmetadata'], () => set(time_ranges_to_array(media.seekable)));90}91 92/**93 * @param {HTMLVideoElement | HTMLAudioElement} media94 * @param {(array: Array<{ start: number; end: number }>) => void} set95 */96export function bind_played(media, set) {97	listen(media, ['timeupdate'], () => set(time_ranges_to_array(media.played)));98}99 100/**101 * @param {HTMLVideoElement | HTMLAudioElement} media102 * @param {(seeking: boolean) => void} set103 */104export function bind_seeking(media, set) {105	listen(media, ['seeking', 'seeked'], () => set(media.seeking));106}107 108/**109 * @param {HTMLVideoElement | HTMLAudioElement} media110 * @param {(seeking: boolean) => void} set111 */112export function bind_ended(media, set) {113	listen(media, ['timeupdate', 'ended'], () => set(media.ended));114}115 116/**117 * @param {HTMLVideoElement | HTMLAudioElement} media118 * @param {(ready_state: number) => void} set119 */120export function bind_ready_state(media, set) {121	listen(122		media,123		['loadedmetadata', 'loadeddata', 'canplay', 'canplaythrough', 'playing', 'waiting', 'emptied'],124		() => set(media.readyState)125	);126}127 128/**129 * @param {HTMLVideoElement | HTMLAudioElement} media130 * @param {() => number | undefined} get131 * @param {(playback_rate: number) => void} set132 */133export function bind_playback_rate(media, get, set = get) {134	// Needs to happen after element is inserted into the dom (which is guaranteed by using effect),135	// else playback will be set back to 1 by the browser136	effect(() => {137		var value = Number(get());138 139		if (value !== media.playbackRate && !isNaN(value)) {140			media.playbackRate = value;141		}142	});143 144	// Start listening to ratechange events after the element is inserted into the dom,145	// else playback will be set to 1 by the browser146	effect(() => {147		listen(media, ['ratechange'], () => {148			set(media.playbackRate);149		});150	});151}152 153/**154 * @param {HTMLVideoElement | HTMLAudioElement} media155 * @param {() => boolean | undefined} get156 * @param {(paused: boolean) => void} set157 */158export function bind_paused(media, get, set = get) {159	var paused = get();160 161	var update = () => {162		if (paused !== media.paused) {163			set((paused = media.paused));164		}165	};166 167	// If someone switches the src while media is playing, the player will pause.168	// Listen to the canplay event to get notified of this situation.169	listen(media, ['play', 'pause', 'canplay'], update, paused == null);170 171	// Needs to be an effect to ensure media element is mounted: else, if paused is `false` (i.e. should play right away)172	// a "The play() request was interrupted by a new load request" error would be thrown because the resource isn't loaded yet.173	effect(() => {174		if ((paused = !!get()) !== media.paused) {175			if (paused) {176				media.pause();177			} else {178				media.play().catch((error) => {179					set((paused = true));180					throw error;181				});182			}183		}184	});185}186 187/**188 * @param {HTMLVideoElement | HTMLAudioElement} media189 * @param {() => number | undefined} get190 * @param {(volume: number) => void} set191 */192export function bind_volume(media, get, set = get) {193	var callback = () => {194		set(media.volume);195	};196 197	if (get() == null) {198		callback();199	}200 201	listen(media, ['volumechange'], callback, false);202 203	render_effect(() => {204		var value = Number(get());205 206		if (value !== media.volume && !isNaN(value)) {207			media.volume = value;208		}209	});210}211 212/**213 * @param {HTMLVideoElement | HTMLAudioElement} media214 * @param {() => boolean | undefined} get215 * @param {(muted: boolean) => void} set216 */217export function bind_muted(media, get, set = get) {218	var callback = () => {219		set(media.muted);220	};221 222	if (get() == null) {223		callback();224	}225 226	listen(media, ['volumechange'], callback, false);227 228	render_effect(() => {229		var value = !!get();230 231		if (media.muted !== value) media.muted = value;232	});233}234