scanner improvements + playback ux

client/src/components/playback/player.rs

@@ -21,6 +21,7 @@ pub fn Player() -> Element {
 		Some(Date::from_ordinal_date(now.year(), now.ordinal() as u16).unwrap())
 	});
 	let mut zoom = use_signal(|| 1.0 as f32);
+	let mut time = use_signal(|| 0 as i64);
 	let playbackResult = use_resource(use_reactive!(|(selected_date)| async move {
 		let mut client = get_rpc_client();
 		info!("Load data");
@@ -75,7 +76,7 @@ pub fn Player() -> Element {
 				}
 			}
 			Viewport {  }
-			Timeline { playbackInfo: info, zoom }
+			Timeline { playbackInfo: info, zoom, time }
 		}
 	}
 }

client/src/components/playback/timeline.rs

@@ -3,23 +3,30 @@ use dioxus::prelude::*;
 use crate::rpc::azki::{MediaChannel, MediaEntry, PlaybackInfo};
 
 #[component]
-pub fn Timeline(playbackInfo: Option<PlaybackInfo>, zoom: Signal<f32>) -> Element {
+pub fn Timeline(playbackInfo: Option<PlaybackInfo>, zoom: Signal<f32>, time: Signal<i64>) -> Element {
 	return match playbackInfo {
 		Some(info) => rsx! {
 			div{
 				id: "timeline",
+				PlayHead { time, zoom }
 				TrackList { channels: info.channels, start: info.date.unwrap().seconds, zoom }
 			}
 		},
 		None => rsx! {
 			div{
 				id: "timeline",
+				PlayHead { time, zoom }
 				TrackList { channels: Vec::new(), start: 0, zoom }
 			}
 		},
 	};
 }
 
+#[component]
+fn PlayHead(time: Signal<i64>, zoom: Signal<f32>) -> Element {
+	rsx! {}
+}
+
 #[component]
 fn TrackList(channels: Vec<MediaChannel>, start: i64, zoom: Signal<f32>) -> Element {
 	rsx! {
@@ -62,7 +69,6 @@ fn Clip(media: MediaEntry, start: i64) -> Element {
 	let timestamp = date.seconds - start;
 	let duration = (meta.duration as f32 / SEC_PER_DAY) * 100.0;
 	let offset = (timestamp as f32 / SEC_PER_DAY) * 100.0;
-	let time = date.to_string();
 	rsx! {
 		div{
 			class: "clip",