bind_current_time() — svelte Function Reference

Architecture documentation for the bind_current_time() function in media.js from the svelte codebase.

Function javascript ClientRuntime Hydration calls 2

Entity Profile

ClientRuntime→ Hydration→ bind_current_time() — svelte Function Reference

Dependency Diagram

graph TD
  fda24846_4565_bcc6_1a1b_41c0c39abb5d["bind_current_time()"]
  1fdae683_fcfe_7f32_daab_6a4edc3c6b85["media.js"]
  fda24846_4565_bcc6_1a1b_41c0c39abb5d -->|defined in| 1fdae683_fcfe_7f32_daab_6a4edc3c6b85
  7494b934_a3b8_689e_91b6_8435e26461c5["render_effect()"]
  fda24846_4565_bcc6_1a1b_41c0c39abb5d -->|calls| 7494b934_a3b8_689e_91b6_8435e26461c5
  20340432_01a2_6741_abf4_60ccab51cdb3["teardown()"]
  fda24846_4565_bcc6_1a1b_41c0c39abb5d -->|calls| 20340432_01a2_6741_abf4_60ccab51cdb3
  style fda24846_4565_bcc6_1a1b_41c0c39abb5d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/media.js lines 21–58

export function bind_current_time(media, get, set = get) {
	/** @type {number} */
	var raf_id;
	/** @type {number} */
	var value;

	// Ideally, listening to timeupdate would be enough, but it fires too infrequently for the currentTime
	// binding, which is why we use a raf loop, too. We additionally still listen to timeupdate because
	// the user could be scrubbing through the video using the native controls when the media is paused.
	var callback = () => {
		cancelAnimationFrame(raf_id);

		if (!media.paused) {
			raf_id = requestAnimationFrame(callback);
		}

		var next_value = media.currentTime;
		if (value !== next_value) {
			set((value = next_value));
		}
	};

	raf_id = requestAnimationFrame(callback);
	media.addEventListener('timeupdate', callback);

	render_effect(() => {
		var next_value = Number(get());

		if (value !== next_value && !isNaN(/** @type {any} */ (next_value))) {
			media.currentTime = value = next_value;
		}
	});

	teardown(() => {
		cancelAnimationFrame(raf_id);
		media.removeEventListener('timeupdate', callback);
	});
}