Filter & refresh

src/TeslaCamPlayer.BlazorHosted/Client/Components/ClipViewer.razor.cs

@@ -100,7 +100,7 @@ private async Task ExecuteOnPlayers(Func<VideoPlayer, Task> player)
 			await player(_videoPlayerRightRepeater);
 			await player(_videoPlayerBack);
 		}
-		catch (Exception e)
+		catch
 		{
 			// ignore
 		}

src/TeslaCamPlayer.BlazorHosted/Client/Components/EventFilter.razor

@@ -0,0 +1,134 @@
+@using TeslaCamPlayer.BlazorHosted.Client.Models
+<MudTreeView Items="@_treeItems" Dense="true">
+	<ItemTemplate>
+		<MudTreeViewItem Expanded="true" Items="@context.TreeItems">
+			<Content>
+				<MudCheckBox
+					T="bool?"
+					Checked="@context.IsCheckedState()"
+					CheckedChanged="@(_ => context.CheckedChanged())">
+					<div class="d-flex align-center">
+						<MudIcon Icon="@context.Icon" Size="Size.Small" Class="mr-1"/>
+						@context.Text
+					</div>
+				</MudCheckBox>
+			</Content>
+		</MudTreeViewItem>
+	</ItemTemplate>
+</MudTreeView>
+<div class="event-filter-arrow"></div>
+
+@code {
+	private class TreeItemData
+	{
+		private readonly Action<bool> _isCheckedChangedHandler;
+
+		public TreeItemData Parent { get; set; } = null;
+
+		public string Text { get; }
+		public string Icon { get; }
+
+		public bool IsChecked { get; set; }
+
+		public bool HasChild => TreeItems?.Any() == true;
+
+		public HashSet<TreeItemData> TreeItems { get; set; } = new();
+
+		public TreeItemData(string text, string icon, bool isChecked, Action<bool> isCheckedChangedHandler = null)
+		{
+			_isCheckedChangedHandler = isCheckedChangedHandler;
+			Text = text;
+			Icon = icon;
+			IsChecked = isChecked;
+		}
+
+		public TreeItemData AddChild(string itemName, string icon, bool isChecked, Action<bool> isCheckedChangedHandler = null)
+		{
+			var item = new TreeItemData(itemName, icon, isChecked, isCheckedChangedHandler)
+			{
+				Parent = this
+			};
+			TreeItems.Add(item);
+
+			return item;
+		}
+
+		public bool? IsCheckedState()
+		{
+			if (!HasChild)
+				return IsChecked;
+
+			if (TreeItems.All(i => i.IsChecked))
+				return true;
+
+			if (TreeItems.All(i => !i.IsChecked))
+				return false;
+
+			return null;
+		}
+
+		public void CheckedChanged()
+		{
+			IsChecked = !IsChecked;
+			if (HasChild)
+			{
+				foreach (var child in TreeItems)
+				{
+					child.IsChecked = IsChecked;
+				}
+			}
+
+			if (Parent != null)
+			{
+				Parent.IsChecked = Parent.TreeItems.All(i => i.IsChecked);
+			}
+
+			_isCheckedChangedHandler?.Invoke(IsChecked);
+		}
+	}
+
+	[Parameter]
+	public EventFilterValues Values { get; set; } = new();
+
+	[Parameter]
+	public EventCallback<EventFilterValues> ValuesChanged { get; set; }
+
+	private HashSet<TreeItemData> _treeItems = new();
+
+	private void ValueSetterAction(bool isChecked, Action valueSetter)
+	{
+		valueSetter.Invoke();
+		ValuesChanged.InvokeAsync(Values);
+	}
+
+	protected override void OnInitialized()
+	{
+		// TODO: Set IsChecked for parent items correctly
+		var dashcamEvents = new TreeItemData("Dashcam", Icons.Material.Filled.CameraAlt, true, c => ValueSetterAction(c, () =>
+		{
+			Values.DashcamHonk = c;
+			Values.DashcamSaved = c;
+			Values.DashcamOther = c;
+		}));
+		dashcamEvents.AddChild("Honk", Icons.Material.Filled.Campaign, Values.DashcamHonk, c => ValueSetterAction(c, () => Values.DashcamHonk = c));
+		dashcamEvents.AddChild("Saved", Icons.Material.Filled.Archive, Values.DashcamSaved, c => ValueSetterAction(c, () => Values.DashcamSaved = c));
+		dashcamEvents.AddChild("Other", Icons.Material.Filled.QuestionMark, Values.DashcamOther, c => ValueSetterAction(c, () => Values.DashcamOther = c));
+
+		var sentryEvents = new TreeItemData("Sentry", Icons.Material.Filled.RadioButtonChecked, true, c => ValueSetterAction(c, () =>
+		{
+			Values.SentryObjectDetection = c;
+			Values.SentryAccelerationDetection = c;
+			Values.SentryOther = c;
+		}));
+		sentryEvents.AddChild("Object detection", Icons.Material.Filled.Animation, Values.SentryObjectDetection, c => ValueSetterAction(c, () => Values.SentryObjectDetection = c));
+		sentryEvents.AddChild("Acceleration detection", Icons.Material.Filled.OpenWith, Values.SentryAccelerationDetection, c => ValueSetterAction(c, () => Values.SentryAccelerationDetection = c));
+		sentryEvents.AddChild("Other", Icons.Material.Filled.QuestionMark, Values.SentryOther, c => ValueSetterAction(c, () => Values.SentryOther = c));
+
+		var recentEvents = new TreeItemData("Recent", Icons.Material.Filled.History, Values.Recent, c => ValueSetterAction(c, () => Values.Recent = c));
+
+		_treeItems.Add(dashcamEvents);
+		_treeItems.Add(sentryEvents);
+		_treeItems.Add(recentEvents);
+	}
+
+}

src/TeslaCamPlayer.BlazorHosted/Client/Models/CamEvents.cs

@@ -0,0 +1,10 @@
+namespace TeslaCamPlayer.BlazorHosted.Client.Models;
+
+public static class CamEvents
+{
+	public const string UserInteractionHonk = "user_interaction_honk";
+	public const string UserInteractionDashcamPanelSave = "user_interaction_dashcam_panel_save";
+	public const string UserInteractionDashcamIconTapped = "user_interaction_dashcam_icon_tapped";
+	public const string SentryAwareObjectDetection = "sentry_aware_object_detection";
+	public const string SentryAwareAccelerationPrefix = "sentry_aware_accel_";
+}

src/TeslaCamPlayer.BlazorHosted/Client/Models/EventFilterValues.cs

@@ -0,0 +1,44 @@
+using TeslaCamPlayer.BlazorHosted.Shared.Models;
+
+namespace TeslaCamPlayer.BlazorHosted.Client.Models
+{
+	public class EventFilterValues
+	{
+		public bool DashcamHonk { get; set; } = true;
+
+		public bool DashcamSaved { get; set; } = true;
+
+		public bool DashcamOther { get; set; } = true;
+
+		public bool SentryObjectDetection { get; set; } = true;
+
+		public bool SentryAccelerationDetection { get; set; } = true;
+
+		public bool SentryOther { get; set; } = true;
+
+		public bool Recent { get; set; } = true;
+
+		public bool IsInFilter(Clip clip)
+		{
+			if (DashcamHonk && clip.Event.Reason == CamEvents.UserInteractionHonk)
+				return true;
+
+			if (DashcamSaved && (clip.Event.Reason == CamEvents.UserInteractionDashcamPanelSave || clip.Event.Reason == CamEvents.UserInteractionDashcamIconTapped))
+				return true;
+
+			if (DashcamOther && clip.Type == ClipType.Saved)
+				return true;
+
+			if (SentryObjectDetection && clip.Event.Reason == CamEvents.SentryAwareObjectDetection)
+				return true;
+
+			if (SentryAccelerationDetection && clip.Event.Reason.StartsWith(CamEvents.SentryAwareAccelerationPrefix))
+				return true;
+
+			if (SentryOther && clip.Type == ClipType.Sentry)
+				return true;
+
+			return Recent && clip.Type == ClipType.Recent;
+		}
+	}
+}

src/TeslaCamPlayer.BlazorHosted/Client/Pages/Index.razor

@@ -1,9 +1,11 @@
 @page "/"
 @using TeslaCamPlayer.BlazorHosted.Shared.Models
-@using TeslaCamPlayer.BlazorHosted.Client.Helpers
-@if (_clips == null)
+
+@if (_filteredclips == null)
 {
-	<text>Loading...</text>
+	<div class="loading-screen">
+		Loading...
+	</div>
 }
 else
 {
@@ -21,8 +23,23 @@ else
 				DateChanged="DatePicked"
 				@onmousewheel="@DatePickerOnMouseWheel"/>
 
+			<MudToolBar Class="py-2">
+				<MudTooltip Text="Refresh videos/events">
+					<MudIconButton Icon="@Icons.Material.Filled.Refresh" Size="Size.Small" OnClick="@(() => RefreshEventsAsync(true))"/>
+				</MudTooltip>
+				<MudSpacer/>
+				<div>
+					<MudIconButton Icon="@Icons.Material.Filled.FilterAlt" Size="Size.Small" OnClick="@ToggleFilter"/>
+
+					<MudPopover @bind-Open="_showFilter" AnchorOrigin="Origin.CenterLeft" TransformOrigin="Origin.CenterRight" Class="pa-4">
+						<EventFilter Values="_eventFilter" ValuesChanged="EventFilterValuesChanged" />
+					</MudPopover>
+					<MudOverlay @bind-Visible="_showFilter" OnClick="ToggleFilter" />
+				</div>
+			</MudToolBar>
+
 			<div @ref="_eventsList" class="events-list" @onscroll="EventListScrolled">
-				<Virtualize TItem="Clip" ItemSize="@EventItemHeight" Items="@_clips" OverscanCount="10">
+				<Virtualize TItem="Clip" ItemSize="@EventItemHeight" Items="@_filteredclips" OverscanCount="10">
 					<ItemContent>
 						<div class="event @(_activeClip == context ? "event--active" : null)" @key="@context.EndDate" @onclick="@(() => SetActiveClip(context))">
 							@if (!string.IsNullOrWhiteSpace(context.ThumbnailUrl))