Events performance (#1645)

* rearrange event route and splitted into several components

* useIntersectionObserver

* re-arrange

* searchstring improvement

* added xs tailwind breakpoint

* useOuterClick hook

* cleaned up

* removed some video controls for mobile devices

* lint

* moved hooks to global folder

* moved buttons for small devices

* added button groups

Co-authored-by: Bernt Christian Egeland <cbegelan@gmail.com>

web/src/hooks/useClickOutside.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+// https://stackoverflow.com/a/54292872/2693528
+export const useClickOutside = (callback) => {
+  const callbackRef = useRef(); // initialize mutable ref, which stores callback
+  const innerRef = useRef(); // returned to client, who marks "border" element
+
+  // update cb on each render, so second useEffect has access to current value
+  useEffect(() => {
+    callbackRef.current = callback;
+  });
+
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => document.removeEventListener('click', handleClick);
+    function handleClick(e) {
+      if (innerRef.current && callbackRef.current && !innerRef.current.contains(e.target)) callbackRef.current(e);
+    }
+  }, []);
+
+  return innerRef; // convenience for client (doesn't need to init ref himself)
+};

web/src/hooks/useSearchString.jsx

@@ -0,0 +1,25 @@
+import { useState, useCallback } from 'preact/hooks';
+
+const defaultSearchString = (limit) => `include_thumbnails=0&limit=${limit}`;
+
+export const useSearchString = (limit, searchParams) => {
+  const { searchParams: initialSearchParams } = new URL(window.location);
+  const _searchParams = searchParams || initialSearchParams.toString();
+
+  const [searchString, changeSearchString] = useState(`${defaultSearchString(limit)}&${_searchParams}`);
+
+  const setSearchString = useCallback(
+    (limit, searchString) => {
+      changeSearchString(`${defaultSearchString(limit)}&${searchString}`);
+    },
+    [changeSearchString]
+  );
+
+  const removeDefaultSearchKeys = useCallback((searchParams) => {
+    searchParams.delete('limit');
+    searchParams.delete('include_thumbnails');
+    searchParams.delete('before');
+  }, []);
+
+  return { searchString, setSearchString, removeDefaultSearchKeys };
+};