Trackpad and touch support in media example (#5912)

site/content/examples/05-bindings/09-media-elements/App.svelte

@@ -7,37 +7,35 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	function handleMousemove(e) {
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
 		// Make the controls visible, but fade out after
 		// 2.5 seconds of inactivity
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => showControls = false, 2500);
 		showControls = true;
 
-		if (!(e.buttons & 1)) return; // mouse not down
 		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
 
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
-		time = duration * (e.clientX - left) / (right - left);
+		time = duration * (clientX - left) / (right - left);
 	}
 
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
 	function handleMousedown(e) {
-		// we can't rely on the built-in click event, because it fires
+		lastMouseDown = new Date();
-		// after a drag — we have to listen for clicks ourselves
+	}
 
-		function handleMouseup() {
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
 			if (paused) e.target.play();
 			else e.target.pause();
-			cancel();
-		}
-
-		function cancel() {
-			e.target.removeEventListener('mouseup', handleMouseup);
 		}
-
-		e.target.addEventListener('mouseup', handleMouseup);
-
-		setTimeout(cancel, 200);
 	}
 
 	function format(seconds) {
@@ -58,8 +56,10 @@
 	<video
 		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
 		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
+		on:mousemove={handleMove}
+		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused>
@@ -128,4 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
+</style>

site/content/tutorial/06-bindings/10-media-elements/app-a/App.svelte

@@ -7,37 +7,35 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	function handleMousemove(e) {
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
 		// Make the controls visible, but fade out after
 		// 2.5 seconds of inactivity
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => showControls = false, 2500);
 		showControls = true;
 
-		if (!(e.buttons & 1)) return; // mouse not down
 		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
 
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
-		time = duration * (e.clientX - left) / (right - left);
+		time = duration * (clientX - left) / (right - left);
 	}
 
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
 	function handleMousedown(e) {
-		// we can't rely on the built-in click event, because it fires
+		lastMouseDown = new Date();
-		// after a drag — we have to listen for clicks ourselves
+	}
 
-		function handleMouseup() {
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
 			if (paused) e.target.play();
 			else e.target.pause();
-			cancel();
-		}
-
-		function cancel() {
-			e.target.removeEventListener('mouseup', handleMouseup);
 		}
-
-		e.target.addEventListener('mouseup', handleMouseup);
-
-		setTimeout(cancel, 200);
 	}
 
 	function format(seconds) {
@@ -58,8 +56,10 @@
 	<video
 		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
 		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
+		on:mousemove={handleMove}
-		on:mousedown={handleMousedown}>
+		on:touchmove|preventDefault={handleMove}
+		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}>
 		<track kind="captions">
 	</video>
 
@@ -125,4 +125,4 @@
 	video {
 		width: 100%;
 	}
-</style>
+</style>

site/content/tutorial/06-bindings/10-media-elements/app-b/App.svelte

@@ -7,37 +7,35 @@
 	let showControls = true;
 	let showControlsTimeout;
 
-	function handleMousemove(e) {
+	// Used to track time of last mouse down event
+	let lastMouseDown;
+
+	function handleMove(e) {
 		// Make the controls visible, but fade out after
 		// 2.5 seconds of inactivity
 		clearTimeout(showControlsTimeout);
 		showControlsTimeout = setTimeout(() => showControls = false, 2500);
 		showControls = true;
 
-		if (!(e.buttons & 1)) return; // mouse not down
 		if (!duration) return; // video not loaded yet
+		if (e.type !== 'touchmove' && !(e.buttons & 1)) return; // mouse not down
 
+		const clientX = e.type === 'touchmove' ? e.touches[0].clientX : e.clientX;
 		const { left, right } = this.getBoundingClientRect();
-		time = duration * (e.clientX - left) / (right - left);
+		time = duration * (clientX - left) / (right - left);
 	}
 
+	// we can't rely on the built-in click event, because it fires
+	// after a drag — we have to listen for clicks ourselves
 	function handleMousedown(e) {
-		// we can't rely on the built-in click event, because it fires
+		lastMouseDown = new Date();
-		// after a drag — we have to listen for clicks ourselves
+	}
 
-		function handleMouseup() {
+	function handleMouseup(e) {
+		if (new Date() - lastMouseDown < 300) {
 			if (paused) e.target.play();
 			else e.target.pause();
-			cancel();
-		}
-
-		function cancel() {
-			e.target.removeEventListener('mouseup', handleMouseup);
 		}
-
-		e.target.addEventListener('mouseup', handleMouseup);
-
-		setTimeout(cancel, 200);
 	}
 
 	function format(seconds) {
@@ -58,8 +56,10 @@
 	<video
 		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
 		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-		on:mousemove={handleMousemove}
+		on:mousemove={handleMove}
+		on:touchmove|preventDefault={handleMove}
 		on:mousedown={handleMousedown}
+		on:mouseup={handleMouseup}
 		bind:currentTime={time}
 		bind:duration
 		bind:paused>
@@ -128,4 +128,4 @@
 	video {
 		width: 100%;
 	}
-</style>
+</style>

site/content/tutorial/06-bindings/10-media-elements/text.md

@@ -10,12 +10,15 @@ On line 58, add `currentTime={time}`, `duration` and `paused` bindings:
 <video
 	poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
 	src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
-	on:mousemove={handleMousemove}
+	on:mousemove={handleMove}
+	on:touchmove|preventDefault={handleMove}
 	on:mousedown={handleMousedown}
+	on:mouseup={handleMouseup}
 	bind:currentTime={time}
 	bind:duration
-	bind:paused
+	bind:paused>
-></video>
+	<track kind="captions">
+</video>
 ```
 
 > `bind:duration` is equivalent to `bind:duration={duration}`