WebUI Improvements and fixes (#9613)

* Show toast instead of text for success and errors

* Show correct times

* Start playing next hour when current hour ends

* Fix refreshing camera image

* Fix timeline

web/src/components/player/DynamicVideoPlayer.tsx

@@ -228,6 +228,7 @@ export default function DynamicVideoPlayer({
             player.on("timeupdate", () => {
               controller.updateProgress(player.currentTime() || 0);
             });
+            player.on("ended", () => controller.fireClipEndEvent());
 
             if (onControllerReady) {
               onControllerReady(controller);
@@ -284,6 +285,7 @@ export class DynamicVideoController {
   // playback
   private recordings: Recording[] = [];
   private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
+  private onClipEnded: (() => void) | undefined = undefined;
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
 
@@ -393,6 +395,16 @@ export class DynamicVideoController {
     this.onPlaybackTimestamp = listener;
   }
 
+  onClipEndedEvent(listener: () => void) {
+    this.onClipEnded = listener;
+  }
+
+  fireClipEndEvent() {
+    if (this.onClipEnded) {
+      this.onClipEnded();
+    }
+  }
+
   scrubToTimestamp(time: number) {
     if (this.playerMode != "scrubbing") {
       this.playerMode = "scrubbing";