bind_playback_rate() — svelte Function Reference

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

Function javascript ClientRuntime Hydration calls 2

Entity Profile

ClientRuntime→ Hydration→ bind_playback_rate() — svelte Function Reference

Dependency Diagram

graph TD
  d355aa29_ab86_ad6d_4a8a_740461ac7a47["bind_playback_rate()"]
  1fdae683_fcfe_7f32_daab_6a4edc3c6b85["media.js"]
  d355aa29_ab86_ad6d_4a8a_740461ac7a47 -->|defined in| 1fdae683_fcfe_7f32_daab_6a4edc3c6b85
  a985ae40_8ef8_7ef2_adad_116fbf97e70c["effect()"]
  d355aa29_ab86_ad6d_4a8a_740461ac7a47 -->|calls| a985ae40_8ef8_7ef2_adad_116fbf97e70c
  da178604_a1e6_1104_9d60_daf043f014c9["listen()"]
  d355aa29_ab86_ad6d_4a8a_740461ac7a47 -->|calls| da178604_a1e6_1104_9d60_daf043f014c9
  style d355aa29_ab86_ad6d_4a8a_740461ac7a47 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/svelte/src/internal/client/dom/elements/bindings/media.js lines 133–151

export function bind_playback_rate(media, get, set = get) {
	// Needs to happen after element is inserted into the dom (which is guaranteed by using effect),
	// else playback will be set back to 1 by the browser
	effect(() => {
		var value = Number(get());

		if (value !== media.playbackRate && !isNaN(value)) {
			media.playbackRate = value;
		}
	});

	// Start listening to ratechange events after the element is inserted into the dom,
	// else playback will be set to 1 by the browser
	effect(() => {
		listen(media, ['ratechange'], () => {
			set(media.playbackRate);
		});
	});
}