feat: heavy WIP UI, need to tweak scdet

Author: AlbinoDrought

ui/src/stores/streamTypes.ts

@@ -7,6 +7,21 @@ export interface Stream {
   source: string;
 }
 
+export interface Motion {
+  /**
+   * Time of the motion event in this recording, in seconds
+   * @example 72 1m12s
+   */
+  t: number;
+  /**
+   * The score of the motion event, 0-100
+   * @example 2 low score
+   * @example 8 high score
+   * @example 16 extreme score
+   */
+  s: number;
+}
+
 export interface Recording {
   id: string;
   stream_id: string;
@@ -15,4 +30,10 @@ export interface Recording {
   end: string;
   path: string;
   thumbnail_path: string;
+  /**
+   * If false, motion detection hasn't been performed, and .motion will be empty.
+   * If true, motion detection has been performed: if .motion is still empty, assume no motion.
+   */
+  performed_motion_detect: boolean;
+  motion: Motion[];
 }

ui/src/views/RecordingView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue';
+import { computed, reactive, ref, onBeforeUnmount } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStreamStore } from '@/stores/stream';
 
@@ -14,6 +14,38 @@ const props = defineProps<{
 }>();
 
 const recording = computed(() => streamStore.recordings.find(r => r.id === props.recording));
+
+const recordingDuration = computed(() => {
+  if (!recording.value) {
+    return 0;
+  }
+  return Math.round(((new Date(recording.value.end)).getTime() - (new Date(recording.value.start)).getTime()) / 1000)
+});
+
+const data = reactive({
+  sliderPos: 0,
+  sliderPosInterval: null as ReturnType<typeof setInterval>|null,
+});
+
+const video = ref<HTMLVideoElement|null>(null);
+
+const setVideoPos = () => {
+  if (!video.value) {
+    return;
+  }
+  video.value.currentTime = data.sliderPos;
+};
+
+data.sliderPosInterval = setInterval(() => {
+  if (video.value) {
+    data.sliderPos = video.value.currentTime;
+  }
+}, 100);
+onBeforeUnmount(() => {
+  if (data.sliderPosInterval !== null) {
+    clearInterval(data.sliderPosInterval);
+  }
+});
 </script>
 
 <template>
@@ -34,6 +66,7 @@ const recording = computed(() => streamStore.recordings.find(r => r.id === props
             muted
             controls
             autoplay
+            ref="video"
           />
         </div>
       </div>
@@ -62,6 +95,13 @@ const recording = computed(() => streamStore.recordings.find(r => r.id === props
           </button>
         </div>
       </div> -->
+
+      <div v-if="recording && recording.performed_motion_detect" class="bg-gray-800 text-white p-4">
+        <input class="range" type="range" list="range" step="any" :min="0" :max="recordingDuration" v-model="data.sliderPos" @input="setVideoPos" />
+        <datalist id="range">
+          <option v-for="m in recording.motion" :value="m.t" :label="`${m.s}`"></option>
+        </datalist>
+      </div>
 
       <div v-if="recording" class="bg-gray-900 text-white p-4">
         <div class="flex items-center justify-between">
@@ -98,4 +138,10 @@ const recording = computed(() => streamStore.recordings.find(r => r.id === props
       </div>
     </div>
   </div>
-</template>
+</template>
+
+<style scoped>
+.range {
+  width: 100%;
+}
+</style>