chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Events performance (#1645)

Browse Source 
* 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>
This commit is contained in:
Bernt Christian Egeland
2021-09-03 14:11:23 +02:00
committed by GitHub
parent b8df419bad
commit 00ff76a0b9
18 changed files with 572 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/AppBar.jsx
View File

@@ -37,7 +37,8 @@ export default function AppBar({ title: Title, overflowRef, onOverflowClick }) {
return (
<div
className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 ${
id="appbar"
className={`w-full border-b border-gray-200 dark:border-gray-700 flex items-center align-middle p-2 fixed left-0 right-0 z-10 bg-white dark:bg-gray-900 transform transition-all duration-200 ${
!show ? '-translate-y-full' : 'translate-y-0'
} ${!atZero ? 'shadow-sm' : ''}`}
data-testid="appbar"

11
web/src/components/Table.jsx
View File

@@ -14,9 +14,9 @@ export function Thead({ children, className, ...attrs }) {
);
}
export function Tbody({ children, className, ...attrs }) {
export function Tbody({ children, className, reference, ...attrs }) {
return (
<tbody className={className} {...attrs}>
<tbody ref={reference} className={className} {...attrs}>
{children}
</tbody>
);
@@ -30,9 +30,10 @@ export function Tfoot({ children, className = '', ...attrs }) {
);
}
export function Tr({ children, className = '', ...attrs }) {
export function Tr({ children, className = '', reference, ...attrs }) {
return (
<tr
ref={reference}
className={`border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 ${className}`}
{...attrs}
>
@@ -49,9 +50,9 @@ export function Th({ children, className = '', colspan, ...attrs }) {
);
}
export function Td({ children, className = '', colspan, ...attrs }) {
export function Td({ children, className = '', reference, colspan, ...attrs }) {
return (
<td className={`p-2 px-1 lg:p-4 ${className}`} colSpan={colspan} {...attrs}>
<td ref={reference} className={`p-2 px-1 lg:p-4 ${className}`} colSpan={colspan} {...attrs}>
{children}
</td>
);

2
web/src/components/VideoPlayer.jsx
View File

@@ -88,7 +88,7 @@ export default function VideoPlayer({ children, options, seekOptions = {}, onRea
return (
<div data-vjs-player>
<video ref={playerRef} className="video-js vjs-default-skin" controls playsinline />
<video ref={playerRef} className="small-player video-js vjs-default-skin" controls playsinline />
{children}
</div>
);