···

       
22
       
 
       
  });

     

       
23
       
 
       


     

       
24
       
 
       
  return (

     

       
25
       
-
       
    <video ref={video} class="max-h-80 max-w-[20rem]" controls playsinline onLoadedData={props.onLoad}>

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
0
       
 
       

     

       
26
       
 
       
      <source type="video/mp4" />

     

       
27
       
 
       
    </video>

     

       
28
       
 
       
  );

     

···

       
22
       
 
       
  });

     

       
23
       
 
       


     

       
24
       
 
       
  return (

     

       
25
       
+
       
    <video

     

       
26
       
+
       
      ref={video}

     

       
27
       
+
       
      class="max-h-80 max-w-[20rem]"

     

       
28
       
+
       
      controls

     

       
29
       
+
       
      playsinline

     

       
30
       
+
       
      onLoadedData={props.onLoad}

     

       
31
       
+
       
    >

     

       
32
       
 
       
      <source type="video/mp4" />

     

       
33
       
 
       
    </video>

     

       
34
       
 
       
  );

     

···

       
1
       
-
       
import { type Accessor, createEffect, createSignal, onCleanup } from 'solid-js';

     

       
2
       
 
       


     

       
3
       
 
       
export const createDebouncedValue = <T>(

     

       
4
       
-
       
	accessor: Accessor<T>,

     

       
5
       
-
       
	delay: number,

     

       
6
       
-
       
	equals?: false | ((prev: T, next: T) => boolean),

     

       
7
       
 
       
): Accessor<T> => {

     

       
8
       
-
       
	const initial = accessor();

     

       
9
       
-
       
	const [state, setState] = createSignal(initial, { equals });

     

       
10
       
 
       


     

       
11
       
-
       
	createEffect((prev: T) => {

     

       
12
       
-
       
		const next = accessor();

     

       
13
       
 
       


     

       
14
       
-
       
		if (prev !== next) {

     

       
15
       
-
       
			const timeout = setTimeout(() => setState(() => next), delay);

     

       
16
       
-
       
			onCleanup(() => clearTimeout(timeout));

     

       
17
       
-
       
		}

     

       
18
       
 
       


     

       
19
       
-
       
		return next;

     

       
20
       
-
       
	}, initial);

     

       
21
       
 
       


     

       
22
       
-
       
	return state;

     

       
23
       
 
       
};

     

···

       
1
       
+
       
import { type Accessor, createEffect, createSignal, onCleanup } from "solid-js";

     

       
2
       
 
       


     

       
3
       
 
       
export const createDebouncedValue = <T>(

     

       
4
       
+
       
  accessor: Accessor<T>,

     

       
5
       
+
       
  delay: number,

     

       
6
       
+
       
  equals?: false | ((prev: T, next: T) => boolean),

     

       
7
       
 
       
): Accessor<T> => {

     

       
8
       
+
       
  const initial = accessor();

     

       
9
       
+
       
  const [state, setState] = createSignal(initial, { equals });

     

       
10
       
 
       


     

       
11
       
+
       
  createEffect((prev: T) => {

     

       
12
       
+
       
    const next = accessor();

     

       
13
       
 
       


     

       
14
       
+
       
    if (prev !== next) {

     

       
15
       
+
       
      const timeout = setTimeout(() => setState(() => next), delay);

     

       
16
       
+
       
      onCleanup(() => clearTimeout(timeout));

     

       
17
       
+
       
    }

     

       
18
       
 
       


     

       
19
       
+
       
    return next;

     

       
20
       
+
       
  }, initial);

     

       
21
       
 
       


     

       
22
       
+
       
  return state;

     

       
23
       
 
       
};