[API] filter for favorite events (#4737)

* [API] filter for favorite events

*  Added /api/events filter for favorite (retain_indefinitely) events

* New Star button to filter for favorite events on the Events page

* fix python formatting

* keep Events favorite button to right side

frigate/http.py

@@ -565,6 +565,7 @@ def events():
     has_clip = request.args.get("has_clip", type=int)
     has_snapshot = request.args.get("has_snapshot", type=int)
     include_thumbnails = request.args.get("include_thumbnails", default=1, type=int)
+    favorites = request.args.get("favorites", type=int)
 
     clauses = []
     excluded_fields = []
@@ -635,6 +636,9 @@ def events():
     else:
         selected_columns.append(Event.thumbnail)
 
+    if favorites:
+        clauses.append((Event.retain_indefinitely == favorites))
+
     if len(clauses) == 0:
         clauses.append((True))
 

web/src/routes/Events.jsx

@@ -58,6 +58,7 @@ export default function Events({ path, ...props }) {
     labels: props.labels ?? 'all',
     zones: props.zones ?? 'all',
     sub_labels: props.sub_labels ?? 'all',
+    favorites: props.favorites ?? 0,
   });
   const [state, setState] = useState({
     showDownloadMenu: false,
@@ -334,7 +335,14 @@ export default function Events({ path, ...props }) {
               onSelectSingle={(item) => onFilter("sub_labels", item)}
             />
           )}
-        <div ref={datePicker} className="ml-auto">
+          
+        <StarRecording
+          className="h-10 w-10 text-yellow-300 cursor-pointer ml-auto"
+          onClick={() => onFilter("favorites", searchParams.favorites ? 0 : 1)}
+          fill={searchParams.favorites == 1 ? 'currentColor' : 'none'}
+        />
+          
+        <div ref={datePicker} className="ml-right">
           <CalendarIcon
             className="h-8 w-8 cursor-pointer"
             onClick={() => setState({ ...state, showDatePicker: true })}