-
-
- );
-};
diff --git a/web-old/src/components/HistoryViewer/HistoryViewer.tsx b/web-old/src/components/HistoryViewer/HistoryViewer.tsx
deleted file mode 100644
index 36aaaf7cf..000000000
--- a/web-old/src/components/HistoryViewer/HistoryViewer.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Fragment, h } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import useSWR from 'swr';
-import axios from 'axios';
-import Timeline from '../Timeline/Timeline';
-import type { TimelineChangeEvent } from '../Timeline/TimelineChangeEvent';
-import type { TimelineEvent } from '../Timeline/TimelineEvent';
-import { HistoryHeader } from './HistoryHeader';
-import { HistoryVideo } from './HistoryVideo';
-
-export default function HistoryViewer({ camera }: {camera: string}) {
- const searchParams = {
- before: null,
- after: null,
- camera,
- label: 'all',
- zone: 'all',
- };
-
- // TODO: refactor
- const eventsFetcher = (path: string, params: {[name:string]: string|number}) => {
- params = { ...params, include_thumbnails: 0, limit: 500 };
- return axios.get
-
-
-
-
-
- Frigate
-
-
-
- );
-}
diff --git a/web-old/src/components/Logo.jsx b/web-old/src/components/Logo.jsx
deleted file mode 100644
index de7f62731..000000000
--- a/web-old/src/components/Logo.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { h } from 'preact';
-
-export default function Logo() {
- return (
-
- );
-}
diff --git a/web-old/src/components/Menu.jsx b/web-old/src/components/Menu.jsx
deleted file mode 100644
index 34ff20326..000000000
--- a/web-old/src/components/Menu.jsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import { h } from 'preact';
-import RelativeModal from './RelativeModal';
-import { useCallback } from 'preact/hooks';
-
-export default function Menu({ className, children, onDismiss, relativeTo, widthRelative }) {
- return relativeTo ? (
-
-
-
-
-
-
- Live
-
-
- ) : null}
- {label}
-
-
- );
-}
diff --git a/web-old/src/components/NavigationDrawer.jsx b/web-old/src/components/NavigationDrawer.jsx
deleted file mode 100644
index 04397c429..000000000
--- a/web-old/src/components/NavigationDrawer.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { h, Fragment } from 'preact';
-import { Link } from 'preact-router/match';
-import { useCallback } from 'preact/hooks';
-import { useDrawer } from '../context';
-
-export default function NavigationDrawer({ children, header }) {
- const { showDrawer, setShowDrawer } = useDrawer();
-
- const handleDismiss = useCallback(() => {
- setShowDrawer(false);
- }, [setShowDrawer]);
-
- return (
- setState({ showMenu: true })}>
-
-
- {state.showMenu ? (
-
- ) : null}
-
- {header ? (
-
-
- {header}
-
- ) : null}
-
-
- {text}
-
-
- );
-}
-
-export function DayOfEvents({ camera, day, hours }) {
- const date = parseISO(day);
- const { data: events } = useSWR([
- `events`,
- {
- before: getUnixTime(endOfDay(date)),
- after: getUnixTime(startOfDay(date)),
- camera,
- has_clip: '1',
- include_thumbnails: 0,
- limit: 5000,
- },
- ]);
-
- // maps all the events under the keys for the hour by hour recordings view
- const eventMap = useMemo(() => {
- const eventMap = {};
- for (const hour of hours) {
- eventMap[`${day}-${hour.hour}`] = [];
- }
-
- if (!events) {
- return eventMap;
- }
-
- for (const event of events) {
- const key = format(fromUnixTime(event.start_time), 'yyyy-MM-dd-HH');
- // if the hour of recordings is missing for the event start time, skip it
- if (key in eventMap) {
- eventMap[key].push(event);
- }
- }
-
- return eventMap;
- }, [events, day, hours]);
-
- if (!events) {
- return
- {active ? :
-
- {result}
-
-
-
- ))}
-
- );
-}
-
-export function ExpandableList({ title, events = 0, children, selected = false }) {
- const [active, setActive] = useState(selected);
- const toggle = () => setActive(!active);
- return (
-
-
- {eventMap[`${day}-${hour.hour}`].map((event) => (
-
-
- {hour.hour}:00
-
-
- {hour.events} Events
-
-
- );
-}
-
-export function EventCard({ camera, event }) {
- const apiHost = useApiHost();
- const start = fromUnixTime(event.start_time);
- const end = fromUnixTime(event.end_time);
- let duration = 'In Progress';
- if (event.end_time) {
- duration = formatDuration(intervalToDuration({ start, end }));
- }
-
- return (
-
-
-
- {/* Only render the child when expanded to lazy load events for the day */}
- {active && {title}
- {events} Events
- {active ?
- {children}
}
-
-
-
- );
-}
diff --git a/web-old/src/components/RelativeModal.jsx b/web-old/src/components/RelativeModal.jsx
deleted file mode 100644
index 6ccfccbe1..000000000
--- a/web-old/src/components/RelativeModal.jsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import { h, Fragment } from 'preact';
-import { createPortal } from 'preact/compat';
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'preact/hooks';
-
-const WINDOW_PADDING = 20;
-
-export default function RelativeModal({
- className,
- role = 'dialog',
- children,
- onDismiss,
- portalRootID,
- relativeTo,
- widthRelative = false,
-}) {
- const [position, setPosition] = useState({ top: -9999, left: -9999 });
- const [show, setShow] = useState(false);
- const portalRoot = portalRootID && document.getElementById(portalRootID);
- const ref = useRef(null);
-
- const handleDismiss = useCallback(
- (event) => {
- onDismiss && onDismiss(event);
- },
- [onDismiss]
- );
-
- const handleKeydown = useCallback(
- (event) => {
- const focusable = ref.current && ref.current.querySelectorAll('[tabindex]');
- if (event.key === 'Tab' && focusable.length) {
- if (event.shiftKey && document.activeElement === focusable[0]) {
- focusable[focusable.length - 1].focus();
- event.preventDefault();
- } else if (document.activeElement === focusable[focusable.length - 1]) {
- focusable[0].focus();
- event.preventDefault();
- }
- return;
- }
-
- if (event.key === 'Escape') {
- setShow(false);
- handleDismiss();
- return;
- }
- },
- [ref, handleDismiss]
- );
-
- useLayoutEffect(() => {
- if (ref && ref.current && relativeTo && relativeTo.current) {
- const windowWidth = window.innerWidth;
- const windowHeight = window.innerHeight;
- const { width: menuWidth, height: menuHeight } = ref.current.getBoundingClientRect();
- const {
- x: relativeToX,
- y: relativeToY,
- width: relativeToWidth,
- height: relativeToHeight,
- } = relativeTo.current.getBoundingClientRect();
-
- const _width = widthRelative ? relativeToWidth : menuWidth;
- const width = _width * 1.1;
-
- const left = relativeToX + window.scrollX;
- const top = relativeToY + window.scrollY;
-
- let newTop = top;
- let newLeft = left;
-
- // too far left
- if (left < WINDOW_PADDING) {
- newLeft = WINDOW_PADDING;
- }
- // too far right
- else if (newLeft + width + WINDOW_PADDING >= windowWidth - WINDOW_PADDING) {
- newLeft = windowWidth - width - WINDOW_PADDING;
- }
-
- // This condition checks if the menu overflows the bottom of the page and
- // if there's enough space to position the menu above the clicked icon.
- // If both conditions are met, the menu will be positioned above the clicked icon
- if (
- top + menuHeight > windowHeight - WINDOW_PADDING + window.scrollY &&
- top - menuHeight - relativeToHeight >= WINDOW_PADDING
- ) {
- newTop = top - menuHeight;
- }
-
- if (top <= WINDOW_PADDING + window.scrollY) {
- newTop = WINDOW_PADDING;
- }
-
- // This calculation checks if there's enough space below the clicked icon for the menu to fit.
- // If there is, it sets the maxHeight to null(meaning no height constraint). If not, it calculates the maxHeight based on the remaining space in the window
- const maxHeight =
- windowHeight - WINDOW_PADDING * 2 - top > menuHeight
- ? null
- : windowHeight - WINDOW_PADDING * 2 - top + window.scrollY;
-
- const newPosition = { left: newLeft, top: newTop, maxHeight };
- if (widthRelative) {
- newPosition.width = relativeToWidth;
- }
- setPosition(newPosition);
- const focusable = ref.current.querySelector('[tabindex]');
- focusable && focusable.focus();
- }
- }, [relativeTo, ref, widthRelative]);
-
- useEffect(() => {
- if (position.top >= 0) {
- window.requestAnimationFrame(() => {
- setShow(true);
- });
- } else {
- setShow(false);
- }
- }, [show, position, ref]);
-
- const menu = (
-
- 
-
-
-
-
-
-
-
-
-
-
-
- {event.label}
- Start: {format(start, 'HH:mm:ss')}
- Duration: {duration}
-
- {((event?.data?.top_score || event.top_score) * 100).toFixed(1)}%
-
-
- {children}
-
-
-
- );
-}
-
-export function TextTab({ selected, text, onClick, disabled }) {
- const selectedStyle = disabled
- ? 'text-gray-400 dark:text-gray-600 bg-transparent'
- : selected
- ? 'text-white bg-blue-500 dark:text-black dark:bg-white'
- : 'text-black dark:text-white bg-transparent';
- return (
-
- );
-}
diff --git a/web-old/src/components/TextField.jsx b/web-old/src/components/TextField.jsx
deleted file mode 100644
index 8dd3540c0..000000000
--- a/web-old/src/components/TextField.jsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { h } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-
-export default function TextField({
- helpText,
- keyboardType = 'text',
- inputRef,
- label,
- leadingIcon: LeadingIcon,
- onBlur,
- onChangeText,
- onFocus,
- readonly,
- trailingIcon: TrailingIcon,
- value: propValue = '',
- ...props
-}) {
- const [isFocused, setFocused] = useState(false);
- const [value, setValue] = useState(propValue);
-
- const handleFocus = useCallback(
- (event) => {
- setFocused(true);
- onFocus && onFocus(event);
- },
- [onFocus]
- );
-
- const handleBlur = useCallback(
- (event) => {
- setFocused(false);
- onBlur && onBlur(event);
- },
- [onBlur]
- );
-
- const handleChange = useCallback(
- (event) => {
- const { value } = event.target;
- setValue(value);
- onChangeText && onChangeText(value);
- },
- [onChangeText, setValue]
- );
-
- useEffect(() => {
- if (propValue !== value) {
- setValue(propValue);
- }
- // DO NOT include `value`
- }, [propValue, setValue]); // eslint-disable-line react-hooks/exhaustive-deps
-
- const labelMoved = isFocused || value !== '';
-
- return (
-
-
- );
-}
diff --git a/web-old/src/components/TimeAgo.tsx b/web-old/src/components/TimeAgo.tsx
deleted file mode 100644
index b7ed45007..000000000
--- a/web-old/src/components/TimeAgo.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { h, FunctionComponent } from 'preact';
-import { useEffect, useMemo, useState } from 'preact/hooks';
-
-interface IProp {
- /** The time to calculate time-ago from */
- time: Date;
- /** OPTIONAL: overwrite current time */
- currentTime?: Date;
- /** OPTIONAL: boolean that determines whether to show the time-ago text in dense format */
- dense?: boolean;
- /** OPTIONAL: set custom refresh interval in milliseconds, default 1000 (1 sec) */
- refreshInterval?: number;
-}
-
-type TimeUnit = {
- unit: string;
- full: string;
- value: number;
-};
-
-const timeAgo = ({ time, currentTime = new Date(), dense = false }: IProp): string => {
- if (typeof time !== 'number' || time < 0) return 'Invalid Time Provided';
-
- const pastTime: Date = new Date(time);
- const elapsedTime: number = currentTime.getTime() - pastTime.getTime();
-
- const timeUnits: TimeUnit[] = [
- { unit: 'yr', full: 'year', value: 31536000 },
- { unit: 'mo', full: 'month', value: 0 },
- { unit: 'd', full: 'day', value: 86400 },
- { unit: 'h', full: 'hour', value: 3600 },
- { unit: 'm', full: 'minute', value: 60 },
- { unit: 's', full: 'second', value: 1 },
- ];
-
- const elapsed: number = elapsedTime / 1000;
- if (elapsed < 10) {
- return 'just now';
- }
-
- for (let i = 0; i < timeUnits.length; i++) {
- // if months
- if (i === 1) {
- // Get the month and year for the time provided
- const pastMonth = pastTime.getUTCMonth();
- const pastYear = pastTime.getUTCFullYear();
-
- // get current month and year
- const currentMonth = currentTime.getUTCMonth();
- const currentYear = currentTime.getUTCFullYear();
-
- let monthDiff = (currentYear - pastYear) * 12 + (currentMonth - pastMonth);
-
- // check if the time provided is the previous month but not exceeded 1 month ago.
- if (currentTime.getUTCDate() < pastTime.getUTCDate()) {
- monthDiff--;
- }
-
- if (monthDiff > 0) {
- const unitAmount = monthDiff;
- return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? '' : 's'} ago`;
- }
- } else if (elapsed >= timeUnits[i].value) {
- const unitAmount: number = Math.floor(elapsed / timeUnits[i].value);
- return `${unitAmount}${dense ? timeUnits[i].unit : ` ${timeUnits[i].full}`}${dense ? '' : 's'} ago`;
- }
- }
- return 'Invalid Time';
-};
-
-const TimeAgo: FunctionComponent
-
-
- {helpText ? {helpText}
: null}
-
-
-
- );
-};
-
-export default TimePicker;
diff --git a/web-old/src/components/Timeline/ScrollPermission.ts b/web-old/src/components/Timeline/ScrollPermission.ts
deleted file mode 100644
index c0fe084c9..000000000
--- a/web-old/src/components/Timeline/ScrollPermission.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ScrollPermission {
- allowed: boolean;
- resetAfterSeeked: boolean;
-}
\ No newline at end of file
diff --git a/web-old/src/components/Timeline/Timeline.tsx b/web-old/src/components/Timeline/Timeline.tsx
deleted file mode 100644
index 785af1f9b..000000000
--- a/web-old/src/components/Timeline/Timeline.tsx
+++ /dev/null
@@ -1,245 +0,0 @@
-import { Fragment, h } from 'preact';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { getTimelineEventBlocksFromTimelineEvents } from '../../utils/Timeline/timelineEventUtils';
-import type { ScrollPermission } from './ScrollPermission';
-import { TimelineBlocks } from './TimelineBlocks';
-import type { TimelineChangeEvent } from './TimelineChangeEvent';
-import { DisabledControls, TimelineControls } from './TimelineControls';
-import type { TimelineEvent } from './TimelineEvent';
-import type { TimelineEventBlock } from './TimelineEventBlock';
-
-interface TimelineProps {
- events: TimelineEvent[];
- isPlaying: boolean;
- onChange: (event: TimelineChangeEvent) => void;
- onPlayPause?: (isPlaying: boolean) => void;
-}
-
-export default function Timeline({ events, isPlaying, onChange, onPlayPause }: TimelineProps) {
- const timelineContainerRef = useRef
-
-
-
-
-
- After
-
-
-
- {hoursInDays.map((time, idx) => (
-
-
-
- ))}
- handleTime(`${time}:00`, before)}
- >
- {hoursInDays[idx]}:00
-
-
-
- Before
-
-
-
- {hoursInDays.map((time, idx) => (
-
-
-
- ))}
- handleTime(after, `${time}:00`)}
- >
- {hoursInDays[idx]}:00
-
-
-
-
-
-
-
- {markerTime && {markerTime.toLocaleTimeString()}}
-
-
-
-
-
-
-
-
-
-
- {timelineBlocks}
-
-
- {timeline.map((block) => {
- const onClickHandler = (block: TimelineEventBlock) => onEventClick(block);
- const updatedBlock: TimelineEventBlock = {
- ...block,
- yOffset: block.yOffset + timelineBlockOffset,
- };
- return
- );
- }
- return ;
- }, [timeline, onEventClick, firstBlockOffset]);
-
- return timelineEventBlocks;
-};
diff --git a/web-old/src/components/Timeline/TimelineChangeEvent.ts b/web-old/src/components/Timeline/TimelineChangeEvent.ts
deleted file mode 100644
index 8e0397f7f..000000000
--- a/web-old/src/components/Timeline/TimelineChangeEvent.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { TimelineEvent } from './TimelineEvent';
-
-export interface TimelineChangeEvent {
- timelineEvent?: TimelineEvent;
- markerTime: Date;
- seekComplete: boolean;
-}
\ No newline at end of file
diff --git a/web-old/src/components/Timeline/TimelineControls.tsx b/web-old/src/components/Timeline/TimelineControls.tsx
deleted file mode 100644
index 4e08ec4b7..000000000
--- a/web-old/src/components/Timeline/TimelineControls.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { h } from 'preact';
-import Next from '../../icons/Next';
-import Pause from '../../icons/Pause';
-import Play from '../../icons/Play';
-import Previous from '../../icons/Previous';
-import { BubbleButton } from '../BubbleButton';
-
-export interface DisabledControls {
- playPause: boolean;
- next: boolean;
- previous: boolean;
-}
-
-interface TimelineControlsProps {
- disabled: DisabledControls;
- className?: string;
- isPlaying: boolean;
- onPlayPause: (isPlaying: boolean) => void;
- onNext: () => void;
- onPrevious: () => void;
-}
-
-export const TimelineControls = ({
- disabled,
- isPlaying,
- onPlayPause,
- onNext,
- onPrevious,
- className = '',
-}: TimelineControlsProps) => {
- const onPlayClickHandler = () => {
- onPlayPause(!isPlaying);
- };
- return (
-
-
-
- {!isPlaying ?
-
-
-
- );
-};
diff --git a/web-old/src/components/Timeline/TimelineEvent.ts b/web-old/src/components/Timeline/TimelineEvent.ts
deleted file mode 100644
index 11bc3e0c1..000000000
--- a/web-old/src/components/Timeline/TimelineEvent.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export interface TimelineEvent {
- start_time: number;
- end_time: number;
- startTime: Date;
- endTime: Date;
- id: string;
- label: 'car' | 'person' | 'dog';
-}
\ No newline at end of file
diff --git a/web-old/src/components/Timeline/TimelineEventBlock.ts b/web-old/src/components/Timeline/TimelineEventBlock.ts
deleted file mode 100644
index b52bf40f1..000000000
--- a/web-old/src/components/Timeline/TimelineEventBlock.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import type { TimelineEvent } from './TimelineEvent';
-
-export interface TimelineEventBlock extends TimelineEvent {
- index: number;
- yOffset: number;
- width: number;
- positionX: number;
- seconds: number;
-}
\ No newline at end of file
diff --git a/web-old/src/components/TimelineEventOverlay.jsx b/web-old/src/components/TimelineEventOverlay.jsx
deleted file mode 100644
index 1cff55099..000000000
--- a/web-old/src/components/TimelineEventOverlay.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Fragment, h } from 'preact';
-import { useState } from 'preact/hooks';
-
-export default function TimelineEventOverlay({ eventOverlay, cameraConfig }) {
- const boxLeftEdge = Math.round(eventOverlay.data.box[0] * 100);
- const boxTopEdge = Math.round(eventOverlay.data.box[1] * 100);
- const boxRightEdge = Math.round((1 - eventOverlay.data.box[2] - eventOverlay.data.box[0]) * 100);
- const boxBottomEdge = Math.round((1 - eventOverlay.data.box[3] - eventOverlay.data.box[1]) * 100);
-
- const [isHovering, setIsHovering] = useState(false);
- const getHoverStyle = () => {
- if (boxLeftEdge < 15) {
- // show object stats on right side
- return {
- left: `${boxLeftEdge + eventOverlay.data.box[2] * 100 + 1}%`,
- top: `${boxTopEdge}%`,
- };
- }
-
- return {
- right: `${boxRightEdge + eventOverlay.data.box[2] * 100 + 1}%`,
- top: `${boxTopEdge}%`,
- };
- };
-
- const getObjectArea = () => {
- const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
- const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
- return Math.round(width * height);
- };
-
- const getObjectRatio = () => {
- const width = eventOverlay.data.box[2] * cameraConfig.detect.width;
- const height = eventOverlay.data.box[3] * cameraConfig.detect.height;
- return Math.round(100 * (width / height)) / 100;
- };
-
- return (
- setIsHovering(true)}
- onMouseLeave={() => setIsHovering(false)}
- onTouchStart={() => setIsHovering(true)}
- onTouchEnd={() => setIsHovering(false)}
- style={{
- left: `${boxLeftEdge}%`,
- top: `${boxTopEdge}%`,
- right: `${boxRightEdge}%`,
- bottom: `${boxBottomEdge}%`,
- }}
- >
- {eventOverlay.class_type == 'entered_zone' ? (
-
- ) : null}
-
- {isHovering && (
-
-
- )}
- {`Area: ${getObjectArea()} px`}
- {`Ratio: ${getObjectRatio()}`}
-
-
- );
-}
-
-function getTimelineIcon(timelineItem) {
- switch (timelineItem.class_type) {
- case 'visible':
- return
-
- {timeIndex >= 0 ? (
-
- {eventTimeline.map((item, index) => (
-
- ))}
-
-
-
- ) : null}
-
-
- Bounding boxes may not align
-
- = 0 ? 'opacity-100 scale-100' : ''}`}
- ref={ref}
- style={position}
- >
- {text}
-
- );
-
- return portalRoot ? createPortal(tooltip, portalRoot) : tooltip;
-}
diff --git a/web-old/src/components/VideoPlayer.jsx b/web-old/src/components/VideoPlayer.jsx
deleted file mode 100644
index ec548eab8..000000000
--- a/web-old/src/components/VideoPlayer.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { h } from 'preact';
-import { useRef, useEffect } from 'preact/hooks';
-import videojs from 'video.js';
-import 'videojs-playlist';
-import 'video.js/dist/video-js.css';
-
-export default function VideoPlayer({ children, options, seekOptions = {forward:30, backward: 10}, onReady = () => {}, onDispose = () => {} }) {
- const playerRef = useRef();
-
- useEffect(() => {
- const defaultOptions = {
- controls: true,
- controlBar: {
- skipButtons: seekOptions,
- },
- playbackRates: [0.5, 1, 2, 4, 8],
- fluid: true,
- };
-
-
- if (!videojs.browser.IS_FIREFOX) {
- defaultOptions.playbackRates.push(16);
- }
-
- const player = videojs(playerRef.current, { ...defaultOptions, ...options }, () => {
- onReady(player);
- });
-
- // Allows player to continue on error
- player.reloadSourceOnError();
-
- // Disable fullscreen on iOS if we have children
- if (
- children &&
- videojs.browser.IS_IOS &&
- videojs.browser.IOS_VERSION > 9 &&
- !player.el_.ownerDocument.querySelector('.bc-iframe')
- ) {
- player.tech_.el_.setAttribute('playsinline', 'playsinline');
- player.tech_.supportsFullScreen = function () {
- return false;
- };
- }
-
- const screen = window.screen;
-
- const angle = () => {
- // iOS
- if (typeof window.orientation === 'number') {
- return window.orientation;
- }
- // Android
- if (screen && screen.orientation && screen.orientation.angle) {
- return window.orientation;
- }
- videojs.log('angle unknown');
- return 0;
- };
-
- const rotationHandler = () => {
- const currentAngle = angle();
-
- if (currentAngle === 90 || currentAngle === 270 || currentAngle === -90) {
- if (player.paused() === false) {
- player.requestFullscreen();
- }
- }
-
- if ((currentAngle === 0 || currentAngle === 180) && player.isFullscreen()) {
- player.exitFullscreen();
- }
- };
-
- if (videojs.browser.IS_IOS) {
- window.addEventListener('orientationchange', rotationHandler);
- } else if (videojs.browser.IS_ANDROID && screen.orientation) {
- // addEventListener('orientationchange') is not a user interaction on Android
- screen.orientation.onchange = rotationHandler;
- }
-
- return () => {
- if (videojs.browser.IS_IOS) {
- window.removeEventListener('orientationchange', rotationHandler);
- }
- player.dispose();
- onDispose();
- };
- }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
- return (
-
- {/* Setting an empty data-setup is required to override the default values and allow video to be fit the size of its parent */}
-
- {children}
-
- );
-}
\ No newline at end of file
diff --git a/web-old/src/components/WebRtcPlayer.jsx b/web-old/src/components/WebRtcPlayer.jsx
deleted file mode 100644
index c1427fcbc..000000000
--- a/web-old/src/components/WebRtcPlayer.jsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { h } from 'preact';
-import { baseUrl } from '../api/baseUrl';
-import { useCallback, useEffect } from 'preact/hooks';
-
-export default function WebRtcPlayer({ camera, width, height }) {
- const PeerConnection = useCallback(async (media) => {
- const pc = new RTCPeerConnection({
- iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
- });
-
- const localTracks = [];
-
- if (/camera|microphone/.test(media)) {
- const tracks = await getMediaTracks('user', {
- video: media.indexOf('camera') >= 0,
- audio: media.indexOf('microphone') >= 0,
- });
- tracks.forEach((track) => {
- pc.addTransceiver(track, { direction: 'sendonly' });
- if (track.kind === 'video') localTracks.push(track);
- });
- }
-
- if (media.indexOf('display') >= 0) {
- const tracks = await getMediaTracks('display', {
- video: true,
- audio: media.indexOf('speaker') >= 0,
- });
- tracks.forEach((track) => {
- pc.addTransceiver(track, { direction: 'sendonly' });
- if (track.kind === 'video') localTracks.push(track);
- });
- }
-
- if (/video|audio/.test(media)) {
- const tracks = ['video', 'audio']
- .filter((kind) => media.indexOf(kind) >= 0)
- .map((kind) => pc.addTransceiver(kind, { direction: 'recvonly' }).receiver.track);
- localTracks.push(...tracks);
- }
-
- document.getElementById('video').srcObject = new MediaStream(localTracks);
-
- return pc;
- }, []);
-
- async function getMediaTracks(media, constraints) {
- try {
- const stream =
- media === 'user'
- ? await navigator.mediaDevices.getUserMedia(constraints)
- : await navigator.mediaDevices.getDisplayMedia(constraints);
- return stream.getTracks();
- } catch (e) {
- return [];
- }
- }
-
- const connect = useCallback(async (ws, aPc) => {
- const pc = await aPc;
-
- ws.addEventListener('open', () => {
- pc.addEventListener('icecandidate', (ev) => {
- if (!ev.candidate) return;
- const msg = { type: 'webrtc/candidate', value: ev.candidate.candidate };
- ws.send(JSON.stringify(msg));
- });
-
- pc.createOffer()
- .then((offer) => pc.setLocalDescription(offer))
- .then(() => {
- const msg = { type: 'webrtc/offer', value: pc.localDescription.sdp };
- ws.send(JSON.stringify(msg));
- });
- });
-
- ws.addEventListener('message', (ev) => {
- const msg = JSON.parse(ev.data);
- if (msg.type === 'webrtc/candidate') {
- pc.addIceCandidate({ candidate: msg.value, sdpMid: '0' });
- } else if (msg.type === 'webrtc/answer') {
- pc.setRemoteDescription({ type: 'answer', sdp: msg.value });
- }
- });
- }, []);
-
- useEffect(() => {
- const url = `${baseUrl.replace(/^http/, 'ws')}live/webrtc/api/ws?src=${camera}`;
- const ws = new WebSocket(url);
- const aPc = PeerConnection('video+audio');
- connect(ws, aPc);
-
- return async () => {
- (await aPc).close();
- }
- }, [camera, connect, PeerConnection]);
-
- return (
-
-
-
- );
-}
diff --git a/web-old/src/components/__tests__/ActivityIndicator.test.jsx b/web-old/src/components/__tests__/ActivityIndicator.test.jsx
deleted file mode 100644
index a9037fbdf..000000000
--- a/web-old/src/components/__tests__/ActivityIndicator.test.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { h } from 'preact';
-import ActivityIndicator from '../ActivityIndicator';
-import { render, screen } from 'testing-library';
-
-describe('ActivityIndicator', () => {
- test('renders an ActivityIndicator with default size md', async () => {
- render(
-
-
- `);
- });
-
- test('renders an ActivityIndicator with size sm', async () => {
- render(
-
-
- `);
- });
-
- test('renders an ActivityIndicator with size lg', async () => {
- render(
-
-
- `);
- });
-});
diff --git a/web-old/src/components/__tests__/AppBar.test.jsx b/web-old/src/components/__tests__/AppBar.test.jsx
deleted file mode 100644
index b925be0a6..000000000
--- a/web-old/src/components/__tests__/AppBar.test.jsx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { h } from 'preact';
-import { DrawerProvider } from '../../context';
-import AppBar from '../AppBar';
-import { fireEvent, render, screen } from '@testing-library/preact';
-import { useRef } from 'preact/hooks';
-
-function Title() {
- return I am the title
;
-}
-
-describe('AppBar', () => {
- test('renders the title', async () => {
- render(
- {searchParams}
;
- }
- return {
- __esModule: true,
- default: CameraImage,
- };
-});
-
-describe('AutoUpdatingCameraImage', () => {
- let dateNowSpy;
- beforeEach(() => {
- dateNowSpy = vi.spyOn(Date, 'now').mockReturnValue(0);
- });
-
- test('shows FPS by default', async () => {
- render(hello
;
- render(
-
-
-
- );
- }
-
- render(Hello
-
-
-
-
-
-
-
-
-
- );
-
- const inputs = screen.queryAllByTestId(/modal-input/);
- expect(document.activeElement).toBe(inputs[0]);
- userEvent.tab();
- expect(document.activeElement).toBe(inputs[1]);
- userEvent.tab();
- expect(document.activeElement).toBe(inputs[0]);
- });
-
- test('pressing ESC dismisses', async () => {
- const handleDismiss = vi.fn();
- const ref = createRef();
- render(
-
-
-
-
-
-
- );
-
- const dialog = screen.queryByRole('dialog');
- expect(dialog).toBeInTheDocument();
-
- fireEvent.keyDown(document.activeElement, { key: 'Escape', code: 'Escape' });
- expect(handleDismiss).toHaveBeenCalled();
- });
-
- test('clicking a scrim dismisses', async () => {
- const handleDismiss = vi.fn();
- const ref = createRef();
- render(
-
-
-
-
-
-
- );
-
- fireEvent.click(screen.queryByTestId('scrim'));
- expect(handleDismiss).toHaveBeenCalled();
- });
-});
diff --git a/web-old/src/components/__tests__/Select.test.jsx b/web-old/src/components/__tests__/Select.test.jsx
deleted file mode 100644
index 00579ce40..000000000
--- a/web-old/src/components/__tests__/Select.test.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { h } from 'preact';
-import Select from '../Select';
-import { fireEvent, render, screen } from '@testing-library/preact';
-
-describe('Select', () => {
- test('on focus, shows a menu', async () => {
- const handleChange = vi.fn();
- render(
-
- );
-
- expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
- fireEvent.click(screen.getByRole('textbox'));
- expect(screen.queryByRole('listbox')).toBeInTheDocument();
- expect(screen.queryByRole('option', { name: 'all' })).toBeInTheDocument();
- expect(screen.queryByRole('option', { name: 'tacos' })).toBeInTheDocument();
- expect(screen.queryByRole('option', { name: 'burritos' })).toBeInTheDocument();
-
- fireEvent.click(screen.queryByRole('option', { name: 'tacos' }));
- expect(handleChange).toHaveBeenCalledWith({ dinner: 'tacos' });
- });
-
- test('allows keyboard navigation', async () => {
- const handleChange = vi.fn();
- render(
-
- );
-
- expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
- const input = screen.getByRole('textbox');
- fireEvent.focus(input);
- fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
- expect(screen.queryByRole('listbox')).toBeInTheDocument();
-
- fireEvent.keyDown(input, { key: 'ArrowDown', code: 'ArrowDown' });
- fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' });
- expect(handleChange).toHaveBeenCalledWith({ dinner: 'burritos' });
- });
-});
diff --git a/web-old/src/components/__tests__/Switch.test.jsx b/web-old/src/components/__tests__/Switch.test.jsx
deleted file mode 100644
index 354ed5c4f..000000000
--- a/web-old/src/components/__tests__/Switch.test.jsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { h } from 'preact';
-import Switch from '../Switch';
-import { fireEvent, render, screen } from '@testing-library/preact';
-
-describe('Switch', () => {
- test('renders a hidden checkbox', async () => {
- render(
-
-
- );
-
- const unchecked = screen.queryByTestId('unchecked-switch-input');
- expect(unchecked).toHaveAttribute('type', 'checkbox');
- expect(unchecked).not.toBeChecked();
-
- const checked = screen.queryByTestId('checked-switch-input');
- expect(checked).toHaveAttribute('type', 'checkbox');
- expect(checked).toBeChecked();
- });
-
- test('calls onChange callback when checked/unchecked', async () => {
- const handleChange = vi.fn();
- const { rerender } = render(
-
-
- );
-
- const tooltip = await screen.findByRole('tooltip');
- const style = window.getComputedStyle(tooltip);
- expect(style.left).toEqual('103px');
- expect(style.top).toEqual('68.5px');
- });
-
- test('if too far right, renders to the left', async () => {
- window.innerWidth = 1024;
- vi
- .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
- // relativeTo
- .mockReturnValueOnce({
- x: 1000,
- y: 100,
- width: 24,
- height: 10,
- })
- // tooltip
- .mockReturnValueOnce({ width: 50, height: 15 });
-
- const ref = createRef();
- render(
-
-
-
- );
-
- const tooltip = await screen.findByRole('tooltip');
- const style = window.getComputedStyle(tooltip);
- expect(style.left).toEqual('937px');
- expect(style.top).toEqual('97px');
- });
-
- test('if too far left, renders to the right', async () => {
- vi
- .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
- // relativeTo
- .mockReturnValueOnce({
- x: 0,
- y: 100,
- width: 24,
- height: 10,
- })
- // tooltip
- .mockReturnValueOnce({ width: 50, height: 15 });
-
- const ref = createRef();
- render(
-
-
-
- );
-
- const tooltip = await screen.findByRole('tooltip');
- const style = window.getComputedStyle(tooltip);
- expect(style.left).toEqual('32px');
- expect(style.top).toEqual('97px');
- });
-
- test('if too close to top, renders to the bottom', async () => {
- window.scrollY = 90;
- vi
- .spyOn(window.HTMLElement.prototype, 'getBoundingClientRect')
- // relativeTo
- .mockReturnValueOnce({
- x: 100,
- y: 100,
- width: 24,
- height: 10,
- })
- // tooltip
- .mockReturnValueOnce({ width: 50, height: 15 });
-
- const ref = createRef();
- render(
-
-
-
- );
-
- const tooltip = await screen.findByRole('tooltip');
- const style = window.getComputedStyle(tooltip);
- expect(style.left).toEqual('84px');
- expect(style.top).toEqual('158.5px');
- });
-});
diff --git a/web-old/src/context/__tests__/index.test.jsx b/web-old/src/context/__tests__/index.test.jsx
deleted file mode 100644
index 60e8a2e7e..000000000
--- a/web-old/src/context/__tests__/index.test.jsx
+++ /dev/null
@@ -1,196 +0,0 @@
-import { h } from 'preact';
-import { set as setData } from 'idb-keyval';
-import { DarkModeProvider, useDarkMode, usePersistence } from '..';
-import { fireEvent, render, screen } from 'testing-library';
-import { useCallback } from 'preact/hooks';
-import * as WS from '../../api/ws';
-
-function DarkModeChecker() {
- const { currentMode } = useDarkMode();
- return {currentMode}
;
-}
-
-describe('DarkMode', () => {
- beforeEach(() => {
- vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
- });
-
- test('uses media by default', async () => {
- render(
- click me
;
- }
-
- render(
-
-
- );
- }
-
- render({loaded ? 'loaded' : 'not loaded'}
- {value}
-
- not loaded
-
- `);
- expect(screen.getByTestId('value')).toMatchInlineSnapshot(`
-
- my-default
-
- `);
- });
-
- // eslint-disable-next-line jest/no-disabled-tests
- test.skip('updates with the previously-persisted value', async () => {
- setData('tacos', 'are delicious');
-
- function Component() {
- const [value, , loaded] = usePersistence('tacos', 'my-default');
- return (
-
-
- );
- }
-
- render({loaded ? 'loaded' : 'not loaded'}
- {value}
-
- loaded
-
- `);
- expect(screen.getByTestId('value')).toMatchInlineSnapshot(`
-
- are delicious
-
- `);
- });
-
- test('can be updated manually', async () => {
- setData('darkmode', 'are delicious');
-
- function Component() {
- const [value, setValue] = usePersistence('tacos', 'my-default');
- const handleClick = useCallback(() => {
- setValue('super delicious');
- }, [setValue]);
- return (
-
-
- );
- }
-
- render(click me
- {value}
-
- super delicious
-
- `);
- });
-});
diff --git a/web-old/src/context/index.jsx b/web-old/src/context/index.jsx
deleted file mode 100644
index 416eeb174..000000000
--- a/web-old/src/context/index.jsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { h, createContext } from 'preact';
-import { get as getData, set as setData } from 'idb-keyval';
-import { useCallback, useContext, useEffect, useLayoutEffect, useState } from 'preact/hooks';
-
-const DarkMode = createContext(null);
-
-export function DarkModeProvider({ children }) {
- const [persistedMode, setPersistedMode] = useState(null);
- const [currentMode, setCurrentMode] = useState(persistedMode !== 'media' ? persistedMode : null);
-
- const setDarkMode = useCallback(
- (value) => {
- setPersistedMode(value);
- setData('darkmode', value);
- setCurrentMode(value);
- },
- [setPersistedMode]
- );
-
- useEffect(() => {
- async function load() {
- const darkmode = await getData('darkmode');
- setDarkMode(darkmode || 'media');
- }
-
- load();
- }, [setDarkMode]);
-
- const handleMediaMatch = useCallback(
- ({ matches }) => {
- if (matches) {
- setCurrentMode('dark');
- } else {
- setCurrentMode('light');
- }
- },
- [setCurrentMode]
- );
-
- useEffect(() => {
- if (persistedMode !== 'media') {
- return;
- }
-
- const query = window.matchMedia('(prefers-color-scheme: dark)');
- query.addEventListener('change', handleMediaMatch);
- handleMediaMatch(query);
- }, [persistedMode, handleMediaMatch]);
-
- useLayoutEffect(() => {
- if (currentMode === 'dark') {
- document.body.classList.add('dark');
- } else {
- document.body.classList.remove('dark');
- }
- }, [currentMode]);
-
- return !persistedMode ? null : (
-
-
-
- MSE is only supported on iOS 17.1+. You'll need to update if available or use jsmpeg / webRTC streams. See the docs for more info.
-
-
-
-
-
-
-
- );
-}
-
-function getDefaultLiveMode(config) {
- if (config) {
- if (config.birdseye.restream) {
- return config.ui.live_mode;
- }
-
- return 'jsmpeg';
- }
-
- return undefined;
-}
diff --git a/web-old/src/routes/Camera.jsx b/web-old/src/routes/Camera.jsx
deleted file mode 100644
index 9260b41fc..000000000
--- a/web-old/src/routes/Camera.jsx
+++ /dev/null
@@ -1,234 +0,0 @@
-import { h, Fragment } from 'preact';
-import AutoUpdatingCameraImage from '../components/AutoUpdatingCameraImage';
-import ActivityIndicator from '../components/ActivityIndicator';
-import JSMpegPlayer from '../components/JSMpegPlayer';
-import Button from '../components/Button';
-import Card from '../components/Card';
-import Heading from '../components/Heading';
-import Link from '../components/Link';
-import SettingsIcon from '../icons/Settings';
-import Switch from '../components/Switch';
-import ButtonsTabbed from '../components/ButtonsTabbed';
-import { usePersistence } from '../context';
-import { useCallback, useMemo, useState } from 'preact/hooks';
-import { useApiHost } from '../api';
-import useSWR from 'swr';
-import WebRtcPlayer from '../components/WebRtcPlayer';
-import '../components/MsePlayer';
-import CameraControlPanel from '../components/CameraControlPanel';
-import { baseUrl } from '../api/baseUrl';
-
-const emptyObject = Object.freeze({});
-
-export default function Camera({ camera }) {
- const { data: config } = useSWR('config');
- const { data: trackedLabels } = useSWR(['labels', { camera }]);
- const apiHost = useApiHost();
- const [showSettings, setShowSettings] = useState(false);
- const [viewMode, setViewMode] = useState('live');
-
- const cameraConfig = config?.cameras[camera];
- const restreamEnabled =
- cameraConfig && Object.keys(config.go2rtc.streams || {}).includes(cameraConfig.live.stream_name);
- const jsmpegWidth = cameraConfig
- ? Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height))
- : 0;
- const [viewSource, setViewSource, sourceIsLoaded] = usePersistence(
- `${camera}-source`,
- getDefaultLiveMode(config, cameraConfig, restreamEnabled)
- );
- const sourceValues = restreamEnabled ? ['mse', 'webrtc', 'jsmpeg'] : ['jsmpeg'];
- const [options, setOptions] = usePersistence(`${camera}-feed`, emptyObject);
-
- const handleSetOption = useCallback(
- (id, value) => {
- const newOptions = { ...options, [id]: value };
- setOptions(newOptions);
- },
- [options, setOptions]
- );
-
- const searchParams = useMemo(
- () =>
- new URLSearchParams(
- Object.keys(options).reduce((memo, key) => {
- memo.push([key, options[key] === true ? '1' : '0']);
- return memo;
- }, [])
- ),
- [options]
- );
-
- const handleToggleSettings = useCallback(() => {
- setShowSettings(!showSettings);
- }, [showSettings, setShowSettings]);
-
- if (!cameraConfig || !sourceIsLoaded) {
- return
-
- Birdseye
-
-
- {!ptzCameras.length && (
-
- )}
-
- {config.birdseye.restream && (
-
- )}
-
-
-
-
-
- {' '}
- {/* Use dynamic class */}
- {player}
-
-
- {ptzCameras.length ? (
-
- Control Panel
- {ptzCameras.map((camera) => (
-
- ) : null}
-
- {camera.replaceAll('_', ' ')}
-
- ))}
-
-
- ) : null;
-
- let player;
- if (viewMode === 'live') {
- if (viewSource == 'mse' && restreamEnabled) {
- if ('MediaSource' in window || 'ManagedMediaSource' in window) {
- player = (
-
-
-
- MSE is only supported on iOS 17.1+. You'll need to update if available or use jsmpeg / webRTC streams. See the docs for more info.
-
-
-
-
-
-
-
-
-
- {showSettings ?
-
- );
-}
-
-function getDefaultLiveMode(config, cameraConfig, restreamEnabled) {
- if (cameraConfig) {
- if (restreamEnabled) {
- return config.ui.live_mode;
- }
-
- return 'jsmpeg';
- }
-
- return undefined;
-}
diff --git a/web-old/src/routes/CameraMap.jsx b/web-old/src/routes/CameraMap.jsx
deleted file mode 100644
index a7b96e851..000000000
--- a/web-old/src/routes/CameraMap.jsx
+++ /dev/null
@@ -1,752 +0,0 @@
-import { h } from 'preact';
-import Card from '../components/Card.jsx';
-import Button from '../components/Button.jsx';
-import Heading from '../components/Heading.jsx';
-import Switch from '../components/Switch.jsx';
-import { useResizeObserver } from '../hooks';
-import { useCallback, useMemo, useRef, useState } from 'preact/hooks';
-import { useApiHost } from '../api';
-import useSWR from 'swr';
-import axios from 'axios';
-export default function CameraMasks({ camera }) {
- const { data: config } = useSWR('config');
- const apiHost = useApiHost();
- const imageRef = useRef(null);
- const [snap, setSnap] = useState(true);
-
- const cameraConfig = config.cameras[camera];
- const {
- motion: { mask: motionMask },
- objects: { filters: objectFilters },
- zones,
- } = cameraConfig;
-
- const { width, height } = cameraConfig.detect;
-
- const [{ width: scaledWidth }] = useResizeObserver(imageRef);
- const imageScale = scaledWidth / width;
-
- const [motionMaskPoints, setMotionMaskPoints] = useState(
- Array.isArray(motionMask)
- ? motionMask.map((mask) => getPolylinePoints(mask))
- : motionMask
- ? [getPolylinePoints(motionMask)]
- : []
- );
-
- const [zonePoints, setZonePoints] = useState(
- Object.keys(zones).reduce((memo, zone) => ({ ...memo, [zone]: getPolylinePoints(zones[zone].coordinates) }), {})
- );
-
- const [objectMaskPoints, setObjectMaskPoints] = useState(
- Object.keys(objectFilters).reduce(
- (memo, name) => ({
- ...memo,
- [name]: Array.isArray(objectFilters[name].mask)
- ? objectFilters[name].mask.map((mask) => getPolylinePoints(mask))
- : objectFilters[name].mask
- ? [getPolylinePoints(objectFilters[name].mask)]
- : [],
- }),
- {}
- )
- );
-
- const [editing, setEditing] = useState({ set: motionMaskPoints, key: 0, fn: setMotionMaskPoints });
- const [success, setSuccess] = useState();
- const [error, setError] = useState();
-
- const handleUpdateEditable = useCallback(
- (newPoints) => {
- let newSet;
- if (Array.isArray(editing.set)) {
- newSet = [...editing.set];
- newSet[editing.key] = newPoints;
- } else if (editing.subkey !== undefined) {
- newSet = { ...editing.set };
- newSet[editing.key][editing.subkey] = newPoints;
- } else {
- newSet = { ...editing.set, [editing.key]: newPoints };
- }
- editing.set = newSet;
- editing.fn(newSet);
- },
- [editing]
- );
-
- // Motion mask methods
- const handleAddMask = useCallback(() => {
- const newMotionMaskPoints = [...motionMaskPoints, []];
- setMotionMaskPoints(newMotionMaskPoints);
- setEditing({ set: newMotionMaskPoints, key: newMotionMaskPoints.length - 1, fn: setMotionMaskPoints });
- }, [motionMaskPoints, setMotionMaskPoints]);
-
- const handleEditMask = useCallback(
- (key) => {
- setEditing({ set: motionMaskPoints, key, fn: setMotionMaskPoints });
- },
- [setEditing, motionMaskPoints, setMotionMaskPoints]
- );
-
- const handleRemoveMask = useCallback(
- (key) => {
- const newMotionMaskPoints = [...motionMaskPoints];
- newMotionMaskPoints.splice(key, 1);
- setMotionMaskPoints(newMotionMaskPoints);
- },
- [motionMaskPoints, setMotionMaskPoints]
- );
-
- const handleCopyMotionMasks = useCallback(() => {
- const textToCopy = ` motion:
- mask:
- ${motionMaskPoints.map((mask) => ` - ${polylinePointsToPolyline(mask)}`).join('\n')}`;
-
- if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
- // Use Clipboard API if available
- window.navigator.clipboard.writeText(textToCopy).catch((err) => {
- throw new Error('Failed to copy text: ', err);
- });
- } else {
- // Fallback to document.execCommand('copy')
- const textarea = document.createElement('textarea');
- textarea.value = textToCopy;
- document.body.appendChild(textarea);
- textarea.select();
-
- try {
- const successful = document.execCommand('copy');
- if (!successful) {
- throw new Error('Failed to copy text');
- }
- } catch (err) {
- throw new Error('Failed to copy text: ', err);
- }
-
- document.body.removeChild(textarea);
- }
- }, [motionMaskPoints]);
-
- const handleSaveMotionMasks = useCallback(async () => {
- try {
- const queryParameters = motionMaskPoints
- .map((mask, index) => `cameras.${camera}.motion.mask.${index}=${polylinePointsToPolyline(mask)}`)
- .join('&');
- const endpoint = `config/set?${queryParameters}`;
- const response = await axios.put(endpoint);
- if (response.status === 200) {
- setSuccess(response.data.message);
- }
- } catch (error) {
- if (error.response) {
- setError(error.response.data.message);
- } else {
- setError(error.message);
- }
- }
- }, [camera, motionMaskPoints]);
-
- // Zone methods
- const handleEditZone = useCallback(
- (key) => {
- setEditing({ set: zonePoints, key, fn: setZonePoints });
- },
- [setEditing, zonePoints, setZonePoints]
- );
-
- const handleAddZone = useCallback(() => {
- const n = Object.keys(zonePoints).filter((name) => name.startsWith('zone_')).length;
- const zoneName = `zone_${n}`;
- const newZonePoints = { ...zonePoints, [zoneName]: [] };
- setZonePoints(newZonePoints);
- setEditing({ set: newZonePoints, key: zoneName, fn: setZonePoints });
- }, [zonePoints, setZonePoints]);
-
- const handleRemoveZone = useCallback(
- (key) => {
- const newZonePoints = { ...zonePoints };
- delete newZonePoints[key];
- setZonePoints(newZonePoints);
- },
- [zonePoints, setZonePoints]
- );
-
- const handleCopyZones = useCallback(async () => {
- const textToCopy = ` zones:
-${Object.keys(zonePoints)
- .map(
- (zoneName) => ` ${zoneName}:
- coordinates: ${polylinePointsToPolyline(zonePoints[zoneName])}`
- )
- .join('\n')}`;
-
- if (window.navigator.clipboard && window.navigator.clipboard.writeText) {
- // Use Clipboard API if available
- window.navigator.clipboard.writeText(textToCopy).catch((err) => {
- throw new Error('Failed to copy text: ', err);
- });
- } else {
- // Fallback to document.execCommand('copy')
- const textarea = document.createElement('textarea');
- textarea.value = textToCopy;
- document.body.appendChild(textarea);
- textarea.select();
-
- try {
- const successful = document.execCommand('copy');
- if (!successful) {
- throw new Error('Failed to copy text');
- }
- } catch (err) {
- throw new Error('Failed to copy text: ', err);
- }
-
- document.body.removeChild(textarea);
- }
- }, [zonePoints]);
-
- const handleSaveZones = useCallback(async () => {
- try {
- const queryParameters = Object.keys(zonePoints)
- .map(
- (zoneName) =>
- `cameras.${camera}.zones.${zoneName}.coordinates=${polylinePointsToPolyline(zonePoints[zoneName])}`
- )
- .join('&');
- const endpoint = `config/set?${queryParameters}`;
- const response = await axios.put(endpoint);
- if (response.status === 200) {
- setSuccess(response.data);
- }
- } catch (error) {
- if (error.response) {
- setError(error.response.data.message);
- } else {
- setError(error.message);
- }
- }
- }, [camera, zonePoints]);
-
- // Object methods
- const handleEditObjectMask = useCallback(
- (key, subkey) => {
- setEditing({ set: objectMaskPoints, key, subkey, fn: setObjectMaskPoints });
- },
- [setEditing, objectMaskPoints, setObjectMaskPoints]
- );
-
- const handleAddObjectMask = useCallback(() => {
- const n = Object.keys(objectMaskPoints).filter((name) => name.startsWith('object_')).length;
- const newObjectName = `object_${n}`;
- const newObjectMaskPoints = { ...objectMaskPoints, [newObjectName]: [[]] };
- setObjectMaskPoints(newObjectMaskPoints);
- setEditing({ set: newObjectMaskPoints, key: newObjectName, subkey: 0, fn: setObjectMaskPoints });
- }, [objectMaskPoints, setObjectMaskPoints, setEditing]);
-
- const handleRemoveObjectMask = useCallback(
- (key, subkey) => {
- const newObjectMaskPoints = { ...objectMaskPoints };
- delete newObjectMaskPoints[key][subkey];
- setObjectMaskPoints(newObjectMaskPoints);
- },
- [objectMaskPoints, setObjectMaskPoints]
- );
-
- const handleCopyObjectMasks = useCallback(async () => {
- await window.navigator.clipboard.writeText(` objects:
- filters:
-${Object.keys(objectMaskPoints)
- .map((objectName) =>
- objectMaskPoints[objectName].length
- ? ` ${objectName}:
- mask: ${polylinePointsToPolyline(objectMaskPoints[objectName])}`
- : ''
- )
- .filter(Boolean)
- .join('\n')}`);
- }, [objectMaskPoints]);
-
- const handleSaveObjectMasks = useCallback(async () => {
- try {
- const queryParameters = Object.keys(objectMaskPoints)
- .filter((objectName) => objectMaskPoints[objectName].length > 0)
- .map(
- (objectName, index) =>
- `cameras.${camera}.objects.filters.${objectName}.mask.${index}=${polylinePointsToPolyline(
- objectMaskPoints[objectName]
- )}`
- )
- .join('&');
- const endpoint = `config/set?${queryParameters}`;
- const response = await axios.put(endpoint);
- if (response.status === 200) {
- setSuccess(response.data);
- }
- } catch (error) {
- if (error.response) {
- setError(error.response.data.message);
- } else {
- setError(error.message);
- }
- }
- }, [camera, objectMaskPoints]);
-
- const handleAddToObjectMask = useCallback(
- (key) => {
- const newObjectMaskPoints = { ...objectMaskPoints, [key]: [...objectMaskPoints[key], []] };
- setObjectMaskPoints(newObjectMaskPoints);
- setEditing({
- set: newObjectMaskPoints,
- key,
- subkey: newObjectMaskPoints[key].length - 1,
- fn: setObjectMaskPoints,
- });
- },
- [objectMaskPoints, setObjectMaskPoints, setEditing]
- );
-
- const handleChangeSnap = useCallback(
- (id, value) => {
- setSnap(value);
- },
- [setSnap]
- );
-
- return (
-
-
- {camera.replaceAll('_', ' ')}
-
-
-
-
-
- Control Panel
-
- )}
-
-
- Tracked objects
-
-
- {(trackedLabels || []).map((objectType) => (
-
-
- {camera} mask & zone creator
-
-
-
- }
- header="Instructions"
- />
-
- This tool can help you create masks & zones for your {camera} camera.
--
-
- Click to add a point. -
- Click and hold on an existing point to move it. -
- Right-Click on an existing point to delete it. -
config.yml file restart
- your Frigate instance to save your changes.
-
- }
- header="Warning"
- />
-
- {success && {success}
}
- {error && {error}
}
-
-
-
-
-
- 
-
-
-
-
-
-
-
- );
-}
-
-function maskYamlKeyPrefix() {
- return ' - ';
-}
-
-function zoneYamlKeyPrefix(_points, key) {
- return ` ${key}:
- coordinates: `;
-}
-
-function objectYamlKeyPrefix() {
- return ' - ';
-}
-
-const MaskInset = 20;
-
-function boundedSize(value, maxValue, snap) {
- const newValue = Math.min(Math.max(0, Math.round(value)), maxValue);
- if (snap) {
- if (newValue <= MaskInset) {
- return 0;
- } else if (maxValue - newValue <= MaskInset) {
- return maxValue;
- }
- }
-
- return newValue;
-}
-
-function EditableMask({ onChange, points, scale, snap, width, height, setError }) {
- const boundingRef = useRef(null);
-
- const handleMovePoint = useCallback(
- (index, newX, newY) => {
- if (newX < 0 && newY < 0) {
- return;
- }
- const x = boundedSize(newX / scale, width, snap);
- const y = boundedSize(newY / scale, height, snap);
-
- const newPoints = [...points];
- newPoints[index] = [x, y];
- onChange(newPoints);
- },
- [height, width, onChange, scale, points, snap]
- );
-
- // Add a new point between the closest two other points
- const handleAddPoint = useCallback(
- (event) => {
- if (!points) {
- setError('You must choose an item to edit or add a new item before adding a point.');
- return
- }
-
- const { offsetX, offsetY } = event;
- const scaledX = boundedSize((offsetX - MaskInset) / scale, width, snap);
- const scaledY = boundedSize((offsetY - MaskInset) / scale, height, snap);
- const newPoint = [scaledX, scaledY];
-
- const { index } = points.reduce(
- (result, point, i) => {
- const nextPoint = points.length === i + 1 ? points[0] : points[i + 1];
- const distance0 = Math.sqrt(Math.pow(point[0] - newPoint[0], 2) + Math.pow(point[1] - newPoint[1], 2));
- const distance1 = Math.sqrt(Math.pow(point[0] - nextPoint[0], 2) + Math.pow(point[1] - nextPoint[1], 2));
- const distance = distance0 + distance1;
- return distance < result.distance ? { distance, index: i } : result;
- },
- { distance: Infinity, index: -1 }
- );
- const newPoints = [...points];
- newPoints.splice(index, 0, newPoint);
- onChange(newPoints);
- },
- [height, width, scale, points, onChange, snap, setError]
- );
-
- const handleRemovePoint = useCallback(
- (index) => {
- const newPoints = [...points];
- newPoints.splice(index, 1);
- onChange(newPoints);
- },
- [points, onChange]
- );
-
- const scaledPoints = useMemo(() => scalePolylinePoints(points, scale), [points, scale]);
-
- return (
-
- {!scaledPoints
- ? null
- : scaledPoints.map(([x, y], i) => (
-
- );
-}
-
-function MaskValues({
- isMulti = false,
- editing,
- title,
- onAdd,
- onCopy,
- onSave,
- onCreate,
- onEdit,
- onRemove,
- points,
- yamlPrefix,
- yamlKeyPrefix,
-}) {
- const [showButtons, setShowButtons] = useState(false);
-
- const handleMousein = useCallback(() => {
- setShowButtons(true);
- }, [setShowButtons]);
-
- const handleMouseout = useCallback(
- (event) => {
- const el = event.toElement || event.relatedTarget;
- if (!el || el.parentNode === event.target) {
- return;
- }
- setShowButtons(false);
- },
- [setShowButtons]
- );
-
- const handleEdit = useCallback(
- (event) => {
- const { key, subkey } = event.target.dataset;
- onEdit(key, subkey);
- },
- [onEdit]
- );
-
- const handleRemove = useCallback(
- (event) => {
- const { key, subkey } = event.target.dataset;
- onRemove(key, subkey);
- },
- [onRemove]
- );
-
- const handleAdd = useCallback(
- (event) => {
- const { key } = event.target.dataset;
- onAdd(key);
- },
- [onAdd]
- );
-
- return (
-
-
- );
-}
-
-function Item({ mainkey, subkey, editing, handleEdit, points, showButtons, _handleAdd, handleRemove, yamlKeyPrefix }) {
- return (
-
- {`${yamlKeyPrefix(points, mainkey, subkey)}${polylinePointsToPolyline(points)}`}
- {showButtons ? (
-
- ) : null}
-
- );
-}
-
-function getPolylinePoints(polyline) {
- if (!polyline) {
- return;
- }
-
- return polyline.split(',').reduce((memo, point, i) => {
- if (i % 2) {
- memo[memo.length - 1].push(parseInt(point, 10));
- } else {
- memo.push([parseInt(point, 10)]);
- }
- return memo;
- }, []);
-}
-
-function scalePolylinePoints(polylinePoints, scale) {
- if (!polylinePoints) {
- return;
- }
-
- return polylinePoints.map(([x, y]) => [Math.round(x * scale), Math.round(y * scale)]);
-}
-
-function polylinePointsToPolyline(polylinePoints) {
- if (!polylinePoints) {
- return;
- }
- return polylinePoints.reduce((memo, [x, y]) => `${memo}${x},${y},`, '').replace(/,$/, '');
-}
-
-const PolyPointRadius = 10;
-function PolyPoint({ boundingRef, index, x, y, onMove, onRemove }) {
- const [hidden, setHidden] = useState(false);
-
- const handleDragOver = useCallback(
- (event) => {
- if (
- !boundingRef.current ||
- (event.target !== boundingRef.current && !boundingRef.current.contains(event.target))
- ) {
- return;
- }
- onMove(index, event.layerX - PolyPointRadius * 2, event.layerY - PolyPointRadius * 2);
- },
- [onMove, index, boundingRef]
- );
-
- const handleDragStart = useCallback(() => {
- boundingRef.current && boundingRef.current.addEventListener('dragover', handleDragOver, false);
- setHidden(true);
- }, [setHidden, boundingRef, handleDragOver]);
-
- const handleDragEnd = useCallback(() => {
- boundingRef.current && boundingRef.current.removeEventListener('dragover', handleDragOver);
- setHidden(false);
- }, [setHidden, boundingRef, handleDragOver]);
-
- const handleRightClick = useCallback(
- (event) => {
- event.preventDefault();
- onRemove(index);
- },
- [onRemove, index]
- );
-
- const handleClick = useCallback((event) => {
- event.stopPropagation();
- event.preventDefault();
- }, []);
-
- return (
-
- );
-}
diff --git a/web-old/src/routes/Camera_V2.jsx b/web-old/src/routes/Camera_V2.jsx
deleted file mode 100644
index 15ee1a996..000000000
--- a/web-old/src/routes/Camera_V2.jsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { h, Fragment } from 'preact';
-import JSMpegPlayer from '../components/JSMpegPlayer';
-import Heading from '../components/Heading';
-import { useState } from 'preact/hooks';
-import useSWR from 'swr';
-import { Tabs, TextTab } from '../components/Tabs';
-import { LiveChip } from '../components/LiveChip';
-import { DebugCamera } from '../components/DebugCamera';
-import HistoryViewer from '../components/HistoryViewer/HistoryViewer.tsx';
-
-export default function Camera({ camera }) {
- const { data: config } = useSWR('config');
-
- const [playerType, setPlayerType] = useState('live');
-
- const cameraConfig = config?.cameras[camera];
-
- const handleTabChange = (index) => {
- if (index === 0) {
- setPlayerType('history');
- } else if (index === 1) {
- setPlayerType('live');
- } else if (index === 2) {
- setPlayerType('debug');
- }
- };
-
- return (
-
-
- {title}
-
-
-
-
-
-
- {yamlPrefix}
- {Object.keys(points).map((mainkey) => {
- if (isMulti) {
- return (
-
- {` ${mainkey}:\n mask:\n`}
- {onAdd && showButtons ? (
-
- ) : null}
- {points[mainkey].map((item, subkey) => (
-
-
-
- );
-}
-
-const RenderPlayer = function ({ camera, cameraConfig, playerType }) {
- const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height));
- if (playerType === 'live') {
- return (
-
-
-
-
-
-
- {(playerType === 'live' || playerType === 'debug') && (
-
-
- {camera}
-
-
- )}
-
-
-
-
-
-
-
-
-
-
-
-
- );
-}
-
-function SortedCameras({ config, unsortedCameras, availableWidth }) {
- const sortedCameras = useMemo(
- () =>
- Object.entries(unsortedCameras)
- .filter(([_, conf]) => conf.ui.dashboard)
- .sort(([_, aConf], [__, bConf]) => aConf.ui.order - bConf.ui.order),
- [unsortedCameras]
- );
-
- return (
-
-
- );
-}
diff --git a/web-old/src/routes/Events.jsx b/web-old/src/routes/Events.jsx
deleted file mode 100644
index 0777829a8..000000000
--- a/web-old/src/routes/Events.jsx
+++ /dev/null
@@ -1,972 +0,0 @@
-import { h, Fragment } from 'preact';
-import { route } from 'preact-router';
-import ActivityIndicator from '../components/ActivityIndicator';
-import Heading from '../components/Heading';
-import { Tabs, TextTab } from '../components/Tabs';
-import Link from '../components/Link';
-import { useApiHost } from '../api';
-import useSWR from 'swr';
-import useSWRInfinite from 'swr/infinite';
-import axios, { AxiosError } from 'axios';
-import { useState, useRef, useCallback, useMemo } from 'preact/hooks';
-import VideoPlayer from '../components/VideoPlayer';
-import { StarRecording } from '../icons/StarRecording';
-import { Submitted } from '../icons/Submitted';
-import { Snapshot } from '../icons/Snapshot';
-import { UploadPlus } from '../icons/UploadPlus';
-import { Clip } from '../icons/Clip';
-import { Zone } from '../icons/Zone';
-import { Camera } from '../icons/Camera';
-import { Clock } from '../icons/Clock';
-import { Delete } from '../icons/Delete';
-import { Download } from '../icons/Download';
-import Menu, { MenuItem } from '../components/Menu';
-import CalendarIcon from '../icons/Calendar';
-import Calendar from '../components/Calendar';
-import Button from '../components/Button';
-import Dialog from '../components/Dialog';
-import MultiSelect from '../components/MultiSelect';
-import { formatUnixTimestampToDateTime, getDurationFromTimestamps } from '../utils/dateUtil';
-import TimeAgo from '../components/TimeAgo';
-import Timepicker from '../components/TimePicker';
-import TimelineSummary from '../components/TimelineSummary';
-import TimelineEventOverlay from '../components/TimelineEventOverlay';
-import { Score } from '../icons/Score';
-import { About } from '../icons/About';
-import MenuIcon from '../icons/Menu';
-import { MenuOpen } from '../icons/MenuOpen';
-
-const API_LIMIT = 25;
-
-const daysAgo = (num) => {
- let date = new Date();
- date.setDate(date.getDate() - num);
- return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000;
-};
-
-const monthsAgo = (num) => {
- let date = new Date();
- date.setMonth(date.getMonth() - num);
- return new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() / 1000;
-};
-
-export default function Events({ path, ...props }) {
- const apiHost = useApiHost();
- const { data: config } = useSWR('config');
- const timezone = useMemo(() => config?.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, [config]);
- const [searchParams, setSearchParams] = useState({
- before: null,
- after: null,
- cameras: props.cameras ?? 'all',
- labels: props.labels ?? 'all',
- zones: props.zones ?? 'all',
- sub_labels: props.sub_labels ?? 'all',
- time_range: '00:00,24:00',
- timezone,
- favorites: props.favorites ?? 0,
- is_submitted: props.is_submitted ?? -1,
- event: props.event,
- });
- const [state, setState] = useState({
- showDownloadMenu: false,
- showDatePicker: false,
- showCalendar: false,
- showPlusSubmit: false,
- });
- const [plusSubmitEvent, setPlusSubmitEvent] = useState({
- id: null,
- label: null,
- validBox: null,
- });
- const [uploading, setUploading] = useState([]);
- const [uploadErrors, setUploadErrors] = useState([]);
- const [viewEvent, setViewEvent] = useState(props.event);
- const [eventOverlay, setEventOverlay] = useState();
- const [eventDetailType, setEventDetailType] = useState('clip');
- const [downloadEvent, setDownloadEvent] = useState({
- id: null,
- label: null,
- box: null,
- has_clip: false,
- has_snapshot: false,
- plus_id: undefined,
- end_time: null,
- });
- const [deleteFavoriteState, setDeleteFavoriteState] = useState({
- deletingFavoriteEventId: null,
- showDeleteFavorite: false,
- });
-
- const [showInProgress, setShowInProgress] = useState((props.event || props.cameras || props.labels) == null);
-
- const eventsFetcher = useCallback(
- (path, params) => {
- if (searchParams.event) {
- path = `${path}/${searchParams.event}`;
- return axios.get(path).then((res) => [res.data]);
- }
- params = { ...params, in_progress: 0, include_thumbnails: 0, limit: API_LIMIT };
- return axios.get(path, { params }).then((res) => res.data);
- },
- [searchParams]
- );
-
- const getKey = useCallback(
- (index, prevData) => {
- if (index > 0) {
- const lastDate = prevData[prevData.length - 1].start_time;
- const pagedParams = { ...searchParams, before: lastDate };
- return ['events', pagedParams];
- }
-
- return ['events', searchParams];
- },
- [searchParams]
- );
-
- const { data: ongoingEvents, mutate: refreshOngoingEvents } = useSWR([
- 'events',
- { in_progress: 1, include_thumbnails: 0 },
- ]);
- const {
- data: eventPages,
- mutate: refreshEvents,
- size,
- setSize,
- isValidating,
- } = useSWRInfinite(getKey, eventsFetcher);
- const mutate = () => {
- refreshEvents();
- refreshOngoingEvents();
- };
-
- const { data: allLabels } = useSWR(['labels']);
- const { data: allSubLabels } = useSWR(['sub_labels', { split_joined: 1 }]);
-
- const filterValues = useMemo(
- () => ({
- cameras: Object.keys(config?.cameras || {}),
- zones: [
- ...Object.values(config?.cameras || {})
- .reduce((memo, camera) => {
- memo = memo.concat(Object.keys(camera?.zones || {}));
- return memo;
- }, [])
- .filter((value, i, self) => self.indexOf(value) === i),
- 'None',
- ],
- labels: Object.values(allLabels || {}),
- sub_labels: (allSubLabels || []).length > 0 ? [...Object.values(allSubLabels), 'None'] : [],
- }),
- [config, allLabels, allSubLabels]
- );
-
- const onSave = async (e, eventId, save) => {
- e.stopPropagation();
- let response;
- if (save) {
- response = await axios.post(`events/${eventId}/retain`);
- } else {
- response = await axios.delete(`events/${eventId}/retain`);
- }
- if (response.status === 200) {
- mutate();
- }
- };
-
- const onDelete = async (e, eventId, saved) => {
- e.stopPropagation();
-
- if (saved) {
- setDeleteFavoriteState({ deletingFavoriteEventId: eventId, showDeleteFavorite: true });
- } else {
- const response = await axios.delete(`events/${eventId}`);
- if (response.status === 200) {
- mutate();
- }
- }
- };
-
- const onToggleNamedFilter = (name, item) => {
- let items;
-
- if (searchParams[name] == 'all') {
- const currentItems = Array.from(filterValues[name]);
-
- // don't remove all if only one option
- if (currentItems.length > 1) {
- currentItems.splice(currentItems.indexOf(item), 1);
- items = currentItems.join(',');
- } else {
- items = ['all'];
- }
- } else {
- let currentItems = searchParams[name].length > 0 ? searchParams[name].split(',') : [];
-
- if (currentItems.includes(item)) {
- // don't remove the last item in the filter list
- if (currentItems.length > 1) {
- currentItems.splice(currentItems.indexOf(item), 1);
- }
-
- items = currentItems.join(',');
- } else if (currentItems.length + 1 == filterValues[name].length) {
- items = ['all'];
- } else {
- currentItems.push(item);
- items = currentItems.join(',');
- }
- }
-
- onFilter(name, items);
- };
-
- const onEventFrameSelected = (event, frame, seekSeconds) => {
- if (this.player) {
- this.player.pause();
- this.player.currentTime(seekSeconds);
- setEventOverlay(frame);
- }
- };
-
- const datePicker = useRef();
-
- const downloadButton = useRef();
-
- const onDownloadClick = (e, event) => {
- e.stopPropagation();
- setDownloadEvent((_prev) => ({
- id: event.id,
- box: event?.data?.box || event.box,
- label: event.label,
- has_clip: event.has_clip,
- has_snapshot: event.has_snapshot,
- plus_id: event.plus_id,
- end_time: event.end_time,
- }));
- downloadButton.current = e.target;
- setState({ ...state, showDownloadMenu: true });
- };
-
- const showSubmitToPlus = (event_id, label, box, e) => {
- if (e) {
- e.stopPropagation();
- }
- // if any of the box coordinates are > 1, then the box data is from an older version
- // and not valid to submit to plus with the snapshot image
- setPlusSubmitEvent({ id: event_id, label, validBox: !box.some((d) => d > 1) });
- setState({ ...state, showDownloadMenu: false, showPlusSubmit: true });
- };
-
- const handleSelectDateRange = useCallback(
- (dates) => {
- setShowInProgress(false);
- setSearchParams({ ...searchParams, before: dates.before, after: dates.after });
- setState({ ...state, showDatePicker: false });
- },
- [searchParams, setSearchParams, state, setState]
- );
-
- const handleSelectTimeRange = useCallback(
- (timeRange) => {
- setSearchParams({ ...searchParams, time_range: timeRange });
- },
- [searchParams]
- );
-
- const onFilter = useCallback(
- (name, value) => {
- setShowInProgress(false);
- const updatedParams = { ...searchParams, [name]: value };
- setSearchParams(updatedParams);
- const queryString = Object.keys(updatedParams)
- .map((key) => {
- if (updatedParams[key] && updatedParams[key] != 'all') {
- return `${key}=${updatedParams[key]}`;
- }
- return null;
- })
- .filter((val) => val)
- .join('&');
- route(`${path}?${queryString}`);
- },
- [path, searchParams, setSearchParams]
- );
-
- const onClickFilterSubmitted = useCallback(() => {
- if (++searchParams.is_submitted > 1) {
- searchParams.is_submitted = -1;
- }
- onFilter('is_submitted', searchParams.is_submitted);
- }, [searchParams, onFilter]);
-
- const isDone = (eventPages?.[eventPages.length - 1]?.length ?? 0) < API_LIMIT;
-
- // hooks for infinite scroll
- const observer = useRef();
- const lastEventRef = useCallback(
- (node) => {
- if (isValidating) return;
- if (observer.current) observer.current.disconnect();
- try {
- observer.current = new IntersectionObserver((entries) => {
- if (entries[0].isIntersecting && !isDone) {
- setSize(size + 1);
- }
- });
- if (node) observer.current.observe(node);
- } catch (e) {
- // no op
- }
- },
- [size, setSize, isValidating, isDone]
- );
-
- const onSendToPlus = async (id, false_positive, validBox) => {
- if (uploading.includes(id)) {
- return;
- }
-
- setUploading((prev) => [...prev, id]);
-
- try {
- const response = false_positive
- ? await axios.put(`events/${id}/false_positive`)
- : await axios.post(`events/${id}/plus`, validBox ? { include_annotation: 1 } : {});
-
- if (response.status === 200) {
- mutate(
- (pages) =>
- pages.map((page) =>
- page.map((event) => {
- if (event.id === id) {
- return { ...event, plus_id: response.data.plus_id };
- }
- return event;
- })
- ),
- false
- );
- }
- } catch (e) {
- if (
- e instanceof AxiosError &&
- (e.response.data.message === 'Error uploading annotation, unsupported label provided.' ||
- e.response.data.message === 'Error uploading false positive, unsupported label provided.')
- ) {
- setUploadErrors((prev) => [...prev, { id, isUnsupported: true }]);
- return;
- }
- setUploadErrors((prev) => [...prev, { id }]);
- throw e;
- } finally {
- setUploading((prev) => prev.filter((i) => i !== id));
- }
-
- if (state.showDownloadMenu && downloadEvent.id === id) {
- setState({ ...state, showDownloadMenu: false });
- }
-
- setState({ ...state, showPlusSubmit: false });
- };
-
- const handleEventDetailTabChange = (index) => {
- setEventDetailType(index == 0 ? 'clip' : 'image');
- };
-
- if (!config) {
- return
- Config
-
-
- {success &&
-
-
-
-
- {success}
}
- {error && {error}
}
-
-
-
- Events
-
- );
-}
-
-function Event({
- className = '',
- config,
- event,
- eventDetailType,
- eventOverlay,
- viewEvent,
- setViewEvent,
- lastEvent,
- lastEventRef,
- uploading,
- uploadErrors,
- handleEventDetailTabChange,
- onEventFrameSelected,
- onDelete,
- onDispose,
- onDownloadClick,
- onReady,
- onSave,
- showSubmitToPlus,
-}) {
- const getUploadButtonState = (eventId) => {
- const isUploading = uploading.includes(eventId);
- const hasUploadError = uploadErrors.find((event) => event.id === eventId);
- if (hasUploadError) {
- if (hasUploadError.isUnsupported) {
- return { isDisabled: true, label: 'Unsupported label' };
- }
- return { isDisabled: isUploading, label: 'Upload error' };
- }
-
- const label = isUploading ? 'Uploading...' : 'Send to Frigate+';
- return { isDisabled: isUploading, label };
- };
- const apiHost = useApiHost();
-
- return (
-
- onToggleNamedFilter('cameras', item)}
- onShowAll={() => onFilter('cameras', ['all'])}
- onSelectSingle={(item) => onFilter('cameras', item)}
- />
- onToggleNamedFilter('labels', item)}
- onShowAll={() => onFilter('labels', ['all'])}
- onSelectSingle={(item) => onFilter('labels', item)}
- />
- onToggleNamedFilter('zones', item)}
- onShowAll={() => onFilter('zones', ['all'])}
- onSelectSingle={(item) => onFilter('zones', item)}
- />
- {filterValues.sub_labels.length > 0 && (
- onToggleNamedFilter('sub_labels', item)}
- onShowAll={() => onFilter('sub_labels', ['all'])}
- onSelectSingle={(item) => onFilter('sub_labels', item)}
- />
- )}
- {searchParams.event && (
-
- )}
-
-
- {state.showDownloadMenu && (
-
- )}
- {state.showDatePicker && (
-
- )}
-
- {state.showCalendar && (
-
-
-
- )}
- {state.showPlusSubmit && (
-
- )}
- {deleteFavoriteState.showDeleteFavorite && (
-
- )}
-
- {config.plus.enabled && (
- onClickFilterSubmitted()}
- inner_fill={searchParams.is_submitted == 1 ? 'currentColor' : 'gray'}
- outer_stroke={searchParams.is_submitted >= 0 ? 'currentColor' : 'gray'}
- />
- )}
-
- onFilter('favorites', searchParams.favorites ? 0 : 1)}
- fill={searchParams.favorites == 1 ? 'currentColor' : 'none'}
- />
-
-
-
- setState({ ...state, showDatePicker: true })}
- />
-
-
- {ongoingEvents ? (
-
- Past Events
-
- {eventPages ? (
- eventPages.map((page, i) => {
- const lastPage = eventPages.length === i + 1;
- return page.map((event, j) => {
- const lastEvent = lastPage && page.length === j + 1;
- return (
- {
- this.player = null;
- }}
- onDownloadClick={onDownloadClick}
- onReady={(player) => {
- this.player = player;
- this.player.on('playing', () => {
- setEventOverlay(undefined);
- });
- }}
- onSave={onSave}
- showSubmitToPlus={showSubmitToPlus}
- />
- );
- });
- })
- ) : (
-
-
- {
- this.player = null;
- }}
- onDownloadClick={onDownloadClick}
- onReady={(player) => {
- this.player = player;
- this.player.on('playing', () => {
- setEventOverlay(undefined);
- });
- }}
- onSave={onSave}
- showSubmitToPlus={showSubmitToPlus}
- />
- );
- })}
-
- ) : null}
-
-
- Ongoing Events
-
-
-
-
- {showInProgress &&
- ongoingEvents.map((event, _) => {
- return (
- {isDone ? null :
-
-
- );
-}
diff --git a/web-old/src/routes/Export.jsx b/web-old/src/routes/Export.jsx
deleted file mode 100644
index 84a6cff57..000000000
--- a/web-old/src/routes/Export.jsx
+++ /dev/null
@@ -1,263 +0,0 @@
-import Heading from '../components/Heading';
-import { useState } from 'preact/hooks';
-import useSWR, { mutate } from 'swr';
-import Button from '../components/Button';
-import axios from 'axios';
-import { baseUrl } from '../api/baseUrl';
-import { Fragment } from 'preact';
-import ActivityIndicator from '../components/ActivityIndicator';
-import { Play } from '../icons/Play';
-import { Delete } from '../icons/Delete';
-import LargeDialog from '../components/DialogLarge';
-import VideoPlayer from '../components/VideoPlayer';
-import Dialog from '../components/Dialog';
-
-export default function Export() {
- const { data: config } = useSWR('config');
- const { data: exports } = useSWR('exports/', (url) => axios({ baseURL: baseUrl, url }).then((res) => res.data));
-
- // Export States
- const [camera, setCamera] = useState('select');
- const [playback, setPlayback] = useState('select');
- const [message, setMessage] = useState({ text: '', error: false });
-
- const currentDate = new Date();
- currentDate.setHours(0, 0, 0, 0);
- const offsetMs = currentDate.getTimezoneOffset() * 60 * 1000;
- const localDate = new Date(currentDate.getTime() - offsetMs);
- const localISODate = localDate.toISOString().split('T')[0];
-
- const [startDate, setStartDate] = useState(localISODate);
- const [startTime, setStartTime] = useState('00:00:00');
- const [endDate, setEndDate] = useState(localISODate);
- const [endTime, setEndTime] = useState('23:59:59');
-
- // Export States
-
- const [selectedClip, setSelectedClip] = useState();
- const [deleteClip, setDeleteClip] = useState();
-
- const onHandleExport = () => {
- if (camera == 'select') {
- setMessage({ text: 'A camera needs to be selected.', error: true });
- return;
- }
-
- if (playback == 'select') {
- setMessage({ text: 'A playback factor needs to be selected.', error: true });
- return;
- }
-
- if (!startDate || !startTime || !endDate || !endTime) {
- setMessage({ text: 'A start and end time needs to be selected', error: true });
- return;
- }
-
- const start = new Date(`${startDate}T${startTime}`).getTime() / 1000;
- const end = new Date(`${endDate}T${endTime}`).getTime() / 1000;
-
- if (end <= start) {
- setMessage({ text: 'The end time must be after the start time.', error: true });
- return;
- }
-
- axios
- .post(`export/${camera}/start/${start}/end/${end}`, { playback })
- .then((response) => {
- if (response.status == 200) {
- setMessage({ text: 'Successfully started export. View the file in the /exports folder.', error: false });
- }
- })
- .catch((error) => {
- if (error.response?.data?.message) {
- setMessage({ text: `Failed to start export: ${error.response.data.message}`, error: true });
- } else {
- setMessage({ text: `Failed to start export: ${error.message}`, error: true });
- }
- });
- };
-
- const onHandleDelete = (clip) => {
- axios.delete(`export/${clip}`).then((response) => {
- if (response.status == 200) {
- setDeleteClip();
- mutate();
- }
- });
- };
-
- return (
- (viewEvent === event.id ? setViewEvent(null) : setViewEvent(event.id))}
- >
-
- {viewEvent !== event.id ? null : (
-
- onSave(e, event.id, !event.retain_indefinitely)}
- fill={event.retain_indefinitely ? 'currentColor' : 'none'}
- />
- {event.end_time ? null : (
-
-
- In progress
-
- )}
-
-
-
-
-
- {event.label.replaceAll('_', ' ')}
- {event.sub_label ? `: ${event.sub_label.replaceAll('_', ' ')}` : null}
-
-
-
-
-
- -
-
-
- ( {getDurationFromTimestamps(event.start_time, event.end_time)} )
-
-
-
- {event.zones.length ? (
-
-
- ) : null}
-
-
-
- {event.end_time && event.has_snapshot && (event?.data?.type || 'object') == 'object' && (
-
- {event.plus_id ? (
-
- )}
-
-
-
- Edit in Frigate+
-
-
- ) : (
-
- )}
-
- onDelete(e, event.id, event.retain_indefinitely)}
- />
-
- onDownloadClick(e, event)}
- />
-
-
-
- )}
-
-
-
-
-
-
-
-
- {eventDetailType == 'clip' && event.has_clip ? (
-
-
- onEventFrameSelected(event, frame, seekSeconds)}
- />
-
- ) : null}
-
- {eventDetailType == 'image' || !event.has_clip ? (
-
-
- {eventOverlay ? (
-
-
-
- 
-
- ) : null}
-
- Export
-
- {message.text && (
-
-
- )}
-
- {deleteClip && (
-
- )}
-
-
- );
-}
-
-function Exports({ exports, onSetClip, onDeleteClip }) {
- return (
- {message.text}
- )}
-
- {selectedClip && (
-
- Playback
- {
- this.player = player;
- }}
- onDispose={() => {
- this.player = null;
- }}
- />
-
-
-
-
-
-
-
-
-
- {exports && (
-
-
-
-
-
-
-
- From:
-
- setStartDate(e.target.value)}
- />
- setStartTime(e.target.value)}
- />
-
- To:
-
- setEndDate(e.target.value)}
- />
- setEndTime(e.target.value)}
- />
-
-
-
- Exports
- setSelectedClip(clip)}
- onDeleteClip={(clip) => setDeleteClip(clip)}
- />
-
- )}
-
- {item.name.startsWith('in_progress') ? (
-
- ))}
-
-
- ) : (
-
- )}
-
-
- {item.name.substring(12, item.name.length - 4)}
-
- Logs
-
-
- );
-}
diff --git a/web-old/src/routes/Recording.jsx b/web-old/src/routes/Recording.jsx
deleted file mode 100644
index 405549e8b..000000000
--- a/web-old/src/routes/Recording.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { h } from 'preact';
-import { parseISO, endOfHour, startOfHour, getUnixTime } from 'date-fns';
-import { useEffect, useMemo } from 'preact/hooks';
-import ActivityIndicator from '../components/ActivityIndicator';
-import Heading from '../components/Heading';
-import RecordingPlaylist from '../components/RecordingPlaylist';
-import VideoPlayer from '../components/VideoPlayer';
-import { useApiHost } from '../api';
-import useSWR from 'swr';
-
-export default function Recording({ camera, date, hour = '00', minute = '00', second = '00' }) {
- const { data: config } = useSWR('config');
- const currentDate = useMemo(
- () => (date ? parseISO(`${date}T${hour || '00'}:${minute || '00'}:${second || '00'}`) : new Date()),
- [date, hour, minute, second]
- );
- const timezone = useMemo(() => config.ui?.timezone || Intl.DateTimeFormat().resolvedOptions().timeZone, [config]);
-
- const apiHost = useApiHost();
- const { data: recordingsSummary } = useSWR([`${camera}/recordings/summary`, { timezone }], {
- revalidateOnFocus: false,
- });
-
- const recordingParams = {
- before: getUnixTime(endOfHour(currentDate)),
- after: getUnixTime(startOfHour(currentDate)),
- };
- const { data: recordings } = useSWR([`${camera}/recordings`, recordingParams], { revalidateOnFocus: false });
-
- // calculates the seek seconds by adding up all the seconds in the segments prior to the playback time
- const seekSeconds = useMemo(() => {
- if (!recordings) {
- return undefined;
- }
- const currentUnix = getUnixTime(currentDate);
-
- const hourStart = getUnixTime(startOfHour(currentDate));
- let seekSeconds = 0;
- recordings.every((segment) => {
- // if the next segment is past the desired time, stop calculating
- if (segment.start_time > currentUnix) {
- return false;
- }
- // if the segment starts before the hour, skip the seconds before the hour
- const start = segment.start_time < hourStart ? hourStart : segment.start_time;
- // if the segment ends after the selected time, use the selected time for end
- const end = segment.end_time > currentUnix ? currentUnix : segment.end_time;
- seekSeconds += end - start;
- return true;
- });
- return seekSeconds;
- }, [recordings, currentDate]);
-
- const playlist = useMemo(() => {
- if (!recordingsSummary) {
- return [];
- }
-
- const selectedDayRecordingData = recordingsSummary.find((s) => !date || s.day === date);
-
- if (!selectedDayRecordingData) {
- return [];
- }
-
- const [year, month, day] = selectedDayRecordingData.day.split('-');
- return selectedDayRecordingData.hours
- .map((h) => {
- return {
- name: h.hour,
- description: `${camera} recording @ ${h.hour}:00.`,
- sources: [
- {
- src: `${apiHost}vod/${year}-${month}/${day}/${h.hour}/${camera}/${timezone.replaceAll(
- '/',
- ','
- )}/master.m3u8`,
- type: 'application/vnd.apple.mpegurl',
- },
- ],
- };
- })
- .reverse();
- }, [apiHost, date, recordingsSummary, camera, timezone]);
-
- const playlistIndex = useMemo(() => {
- const index = playlist.findIndex((item) => item.name === hour);
- if (index === -1) {
- return 0;
- }
- return index;
- }, [playlist, hour]);
-
- useEffect(() => {
- if (this.player) {
- this.player.playlist(playlist);
- }
- }, [playlist]);
-
- useEffect(() => {
- if (this.player) {
- this.player.playlist.currentItem(playlistIndex);
- }
- }, [playlistIndex]);
-
- useEffect(() => {
- if (seekSeconds === undefined) {
- return;
- }
- if (this.player) {
- // if the playlist has moved on to the next item, then reset
- if (this.player.playlist.currentItem() !== playlistIndex) {
- this.player.playlist.currentItem(playlistIndex);
- }
- this.player.currentTime(seekSeconds);
- // try and play since the user is likely to have interacted with the dom
- this.player.play();
- }
- }, [seekSeconds, playlistIndex]);
-
- if (!recordingsSummary || !config) {
- return
- {logs}
-
-
- {camera} Recordings
-
- );
- }
-
- return (
-
-
- No Recordings Found
-Make sure you have enabled the record role in your configuration for the {camera} camera.
-
- {camera.replaceAll('_', ' ')} Recordings
- {
- player.on('ratechange', () => player.defaultPlaybackRate(player.playbackRate()));
- if (player.playlist) {
- player.playlist(playlist);
- player.playlist.autoadvance(0);
- player.playlist.currentItem(playlistIndex);
- if (seekSeconds !== undefined) {
- player.currentTime(seekSeconds);
- }
- this.player = player;
- }
- }}
- onDispose={() => {
- this.player = null;
- }}
- >
-
-
- );
-}
diff --git a/web-old/src/routes/Storage.jsx b/web-old/src/routes/Storage.jsx
deleted file mode 100644
index 4e187ef86..000000000
--- a/web-old/src/routes/Storage.jsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import { h, Fragment } from 'preact';
-import ActivityIndicator from '../components/ActivityIndicator';
-import Heading from '../components/Heading';
-import { useWs } from '../api/ws';
-import useSWR from 'swr';
-import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
-import Link from '../components/Link';
-import Button from '../components/Button';
-import { About } from '../icons/About';
-
-const emptyObject = Object.freeze({});
-
-export default function Storage() {
- const { data: storage } = useSWR('recordings/storage');
-
- const {
- value: { payload: stats },
- } = useWs('stats');
- const { data: initialStats } = useSWR('stats');
-
- const { service } = stats || initialStats || emptyObject;
-
- if (!service || !storage) {
- return Dates and times are based on the timezone {timezone}
-
-
- Storage
-
-
- Overview
-
-
- );
-}
diff --git a/web-old/src/routes/StyleGuide.jsx b/web-old/src/routes/StyleGuide.jsx
deleted file mode 100644
index d1c0e2310..000000000
--- a/web-old/src/routes/StyleGuide.jsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { h } from 'preact';
-import ArrowDropdown from '../icons/ArrowDropdown';
-import ArrowDropup from '../icons/ArrowDropup';
-import Button from '../components/Button';
-import Dialog from '../components/Dialog';
-import Heading from '../components/Heading';
-import Select from '../components/Select';
-import Switch from '../components/Switch';
-import TextField from '../components/TextField';
-import { useCallback, useState } from 'preact/hooks';
-
-export default function StyleGuide() {
- const [switches, setSwitches] = useState({ 0: false, 1: true, 2: false, 3: false });
- const [showDialog, setShowDialog] = useState(false);
-
- const handleSwitch = useCallback(
- (id, checked) => {
- setSwitches({ ...switches, [id]: checked });
- },
- [switches]
- );
-
- const handleDismissDialog = () => {
- setShowDialog(false);
- };
-
- return (
-
-
-
-
-
-
-
- Data
-
-
-
-
-
-
- | Location | -Used | -Total | -
|---|
-
-
-
- Memory
-
-
-
-
-
-
- | Location | -Used | -Total | -
|---|---|---|
| /dev/shm | -{getUnitSize(service['storage']['/dev/shm']['used'])} | -{getUnitSize(service['storage']['/dev/shm']['total'])} | -
| /tmp/cache | -{getUnitSize(service['storage']['/tmp/cache']['used'])} | -{getUnitSize(service['storage']['/tmp/cache']['total'])} | -
- Cameras
-
-
-
- {Object.entries(storage).map(([name, camera]) => (
-
-
-
- ))}
-
- {name.replaceAll('_', ' ')}
-
-
-
-
-
-
- | Usage | -Stream Bandwidth | -
|---|---|
| {Math.round(camera['usage_percent'] ?? 0)}% | -{camera['bandwidth'] ? `${getUnitSize(camera['bandwidth'])}/hr` : 'Calculating...'} | -
- Button
- Dialog
-
- {showDialog ? (
-
- ) : null}
-
- Switch
- Select
- TextField
-
- );
-}
diff --git a/web-old/src/routes/System.jsx b/web-old/src/routes/System.jsx
deleted file mode 100644
index 77b37686f..000000000
--- a/web-old/src/routes/System.jsx
+++ /dev/null
@@ -1,487 +0,0 @@
-import { h, Fragment } from 'preact';
-import ActivityIndicator from '../components/ActivityIndicator';
-import Button from '../components/Button';
-import Heading from '../components/Heading';
-import Link from '../components/Link';
-import { useWs } from '../api/ws';
-import useSWR from 'swr';
-import axios from 'axios';
-import { Table, Tbody, Thead, Tr, Th, Td } from '../components/Table';
-import { useState } from 'preact/hooks';
-import Dialog from '../components/Dialog';
-import TimeAgo from '../components/TimeAgo';
-import copy from 'copy-to-clipboard';
-import { About } from '../icons/About';
-import { WebUI } from '../icons/WebUI';
-
-const emptyObject = Object.freeze({});
-
-export default function System() {
- const [state, setState] = useState({ showFfprobe: false, ffprobe: '' });
- const { data: config } = useSWR('config');
-
- const {
- value: { payload: stats },
- } = useWs('stats');
- const { data: initialStats } = useSWR('stats');
-
- const {
- cpu_usages,
- gpu_usages,
- bandwidth_usages,
- detectors,
- service = {},
- detection_fps: _,
- processes,
- cameras,
- } = stats || initialStats || emptyObject;
-
- const detectorNames = Object.keys(detectors || emptyObject);
- const gpuNames = Object.keys(gpu_usages || emptyObject);
- const cameraNames = Object.keys(cameras || emptyObject);
- const processesNames = Object.keys(processes || emptyObject);
-
- const { data: go2rtc } = useSWR('go2rtc/api');
-
- const onHandleFfprobe = async (camera, e) => {
- if (e) {
- e.stopPropagation();
- }
-
- setState({ ...state, showFfprobe: true });
- const response = await axios.get('ffprobe', {
- params: {
- paths: `camera:${camera}`,
- },
- });
-
- if (response.status === 200) {
- setState({ ...state, showFfprobe: true, ffprobe: response.data });
- } else {
- setState({ ...state, showFfprobe: true, ffprobe: 'There was an error getting the ffprobe output.' });
- }
- };
-
- const onCopyFfprobe = async () => {
- copy(JSON.stringify(state.ffprobe).replace(/[\\\s]+/gi, ''));
- setState({ ...state, ffprobe: '', showFfprobe: false });
- };
-
- const onHandleVainfo = async (e) => {
- if (e) {
- e.stopPropagation();
- }
-
- const response = await axios.get('vainfo');
-
- if (response.status === 200) {
- setState({
- ...state,
- showVainfo: true,
- vainfo: response.data,
- });
- } else {
- setState({ ...state, showVainfo: true, vainfo: 'There was an error getting the vainfo output.' });
- }
- };
-
- const onCopyVainfo = async () => {
- copy(JSON.stringify(state.vainfo).replace(/[\\\s]+/gi, ''));
- setState({ ...state, vainfo: '', showVainfo: false });
- };
-
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- )}
-
- );
-}
diff --git a/web-old/src/routes/__tests__/Camera.test.jsx b/web-old/src/routes/__tests__/Camera.test.jsx
deleted file mode 100644
index ef679681c..000000000
--- a/web-old/src/routes/__tests__/Camera.test.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { h } from 'preact';
-import * as AutoUpdatingCameraImage from '../../components/AutoUpdatingCameraImage';
-import * as WS from '../../api/ws';
-import Camera from '../Camera';
-import { set as setData } from 'idb-keyval';
-import * as JSMpegPlayer from '../../components/JSMpegPlayer';
-import { fireEvent, render, screen, waitForElementToBeRemoved } from 'testing-library';
-
-describe('Camera Route', () => {
- beforeEach(() => {
- vi.spyOn(AutoUpdatingCameraImage, 'default').mockImplementation(({ searchParams }) => {
- return
-
- System {service.version}
-
- {config && (
-
- go2rtc {go2rtc && `${go2rtc.version} `}
-
- streams info
-
-
- )}
-
-
- {service.last_updated && (
-
-
- Last refreshed:
-
- ) : (
-
-
- Detectors
-
-
-
-
- {detectorNames.map((detector) => (
-
-
-
-
- ))}
- {detector}
-
-
-
-
-
- | P-ID | -Inference Speed | -CPU % | -Memory % | - {config.telemetry.network_bandwidth &&Network Bandwidth | } -
|---|---|---|---|---|
| {detectors[detector]['pid']} | -{detectors[detector]['inference_speed']} ms | -{cpu_usages[detectors[detector]['pid']]?.['cpu'] || '- '}% | -{cpu_usages[detectors[detector]['pid']]?.['mem'] || '- '}% | - {config.telemetry.network_bandwidth && ( -{bandwidth_usages[detectors[detector]['pid']]?.['bandwidth'] || '- '}KB/s | - )} -
-
-
- {!gpu_usages ? (
-
-
- GPUs
-
-
-
-
-
-
- Hardware acceleration has not been setup, see the docs to setup hardware acceleration.
-
-
- ) : (
-
- {gpuNames.map((gpu) => (
-
- )}
-
-
-
- ))}
- {gpu}
-
- {gpu_usages[gpu]['gpu'] == -1 ? (
-
-
-
- )}
-
-
- There was an error getting usage stats. This does not mean hardware acceleration is not working.
- Either your GPU does not support this or Frigate does not have proper access to get statistics.
- This is expected for the Home Assistant addon.
-
- ) : (
- | GPU % | -Memory % | - {'dec' in gpu_usages[gpu] &&Decoder % | } - {'enc' in gpu_usages[gpu] &&Encoder % | } -
|---|---|---|---|
| {gpu_usages[gpu]['gpu']} | -{gpu_usages[gpu]['mem']} | - {'dec' in gpu_usages[gpu] &&{gpu_usages[gpu]['dec']} | } - {'enc' in gpu_usages[gpu] &&{gpu_usages[gpu]['enc']} | } -
-
- Cameras
-
-
-
- {!cameras ? (
-
- {cameraNames.map(
- (camera) =>
- config.cameras[camera]['enabled'] && (
-
- )}
-
-
-
- )
- )}
-
- {camera.replaceAll('_', ' ')}
-
-
- {config.cameras[camera]['webui_url'] && (
-
- )}
-
-
-
-
-
-
-
- | Process | -P-ID | -FPS | -CPU % | -Memory % | - {config.telemetry.network_bandwidth &&Network Bandwidth | } -||
|---|---|---|---|---|---|---|---|
| - ffmpeg - - | -{cameras[camera]['ffmpeg_pid'] || '- '} | -{cameras[camera]['camera_fps'] || '- '} | -{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['cpu'] || '- '}% | -{cpu_usages[cameras[camera]['ffmpeg_pid']]?.['mem'] || '- '}% | - {config.telemetry.network_bandwidth && ( -{bandwidth_usages[cameras[camera]['ffmpeg_pid']]?.['bandwidth'] || '- '}KB/s | - )} -||
| Capture | -{cameras[camera]['capture_pid'] || '- '} | -{cameras[camera]['process_fps'] || '- '} | -{cpu_usages[cameras[camera]['capture_pid']]?.['cpu'] || '- '}% | -{cpu_usages[cameras[camera]['capture_pid']]?.['mem'] || '- '}% | - {config.telemetry.network_bandwidth &&- | } -||
| Detect | -{cameras[camera]['pid'] || '- '} | - - {(() => { - if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 1) - return ( -- {cameras[camera]['detection_fps']} ({cameras[camera]['skipped_fps']} skipped) - | - ); - else if (cameras[camera]['pid'] && cameras[camera]['detection_enabled'] == 0) - returndisabled | ; - - return- | ; - })()} - -{cpu_usages[cameras[camera]['pid']]?.['cpu'] || '- '}% | -{cpu_usages[cameras[camera]['pid']]?.['mem'] || '- '}% | - {config.telemetry.network_bandwidth &&- | } -
-
- Other Processes
-
-
-
-
- {processesNames.map((process) => (
-
-
-
-
- ))}
-
-
- {process}
-
-
-
-
-
- | P-ID | -CPU % | -Avg CPU % | -Memory % | - {config.telemetry.network_bandwidth &&Network Bandwidth | } -
|---|---|---|---|---|
| {processes[process]['pid'] || '- '} | -{cpu_usages[processes[process]['pid']]?.['cpu'] || '- '}% | -{cpu_usages[processes[process]['pid']]?.['cpu_average'] || '- '}% | -{cpu_usages[processes[process]['pid']]?.['mem'] || '- '}% | - {config.telemetry.network_bandwidth && ( -{bandwidth_usages[processes[process]['pid']]?.['bandwidth'] || '- '}KB/s | - )} -
System stats update automatically every {config.mqtt.stats_interval} seconds.
-{searchParams.toString()}
;
- });
- vi.spyOn(JSMpegPlayer, 'default').mockImplementation(() => {
- return ;
- });
- vi.spyOn(WS, 'WsProvider').mockImplementation(({ children }) => children);
- });
-
- // eslint-disable-next-line jest/no-disabled-tests
- test.skip('reads camera feed options from persistence', async () => {
- setData('front-source', 'mse')
- setData('front-feed', {
- bbox: true,
- timestamp: false,
- zones: true,
- mask: false,
- motion: true,
- regions: false,
- });
-
- render(