added zoom + date selector

client/src/components/playback/player.rs

@@ -1,19 +1,31 @@
 use chrono::{Datelike, Local};
 use dioxus::prelude::*;
+use dioxus_primitives::slider::{SliderTrack, SliderValue};
 use prost_types::Timestamp;
+use time::Date;
 
 use crate::{
-	components::playback::{Timeline, Viewport},
+	components::{
+		date_picker::{DatePicker, DatePickerInput},
+		playback::{Timeline, Viewport},
+		slider::{Slider, SliderRange, SliderThumb},
+	},
 	rpc::{azki::MediaPlaybackRequest, get_rpc_client},
 };
 const PLAYER_CSS: Asset = asset!("/assets/styling/player.scss");
 
 #[component]
 pub fn Player() -> Element {
-	let playbackResult = use_resource(|| async move {
-		let mut client = get_rpc_client();
+	let mut selected_date = use_signal(|| {
 		let now = Local::now();
-		let from = Timestamp::date(now.year() as i64, now.month() as u8, now.day() as u8 - 4).unwrap();
+		Some(Date::from_ordinal_date(now.year(), now.ordinal() as u16).unwrap())
+	});
+	let mut zoom = use_signal(|| 1.0 as f32);
+	let playbackResult = use_resource(use_reactive!(|(selected_date)| async move {
+		let mut client = get_rpc_client();
+		info!("Load data");
+		let now = selected_date.cloned().unwrap();
+		let from = Timestamp::date(now.year() as i64, now.month() as u8, now.day()).unwrap();
 		let result = client
 			.get_media_playback(MediaPlaybackRequest { date: Some(from) })
 			.await;
@@ -25,7 +37,7 @@ pub fn Player() -> Element {
 			let msg = err.message();
 			return Err(format!("Failed to load results: {msg}"));
 		}
-	});
+	}));
 	let info = match playbackResult.cloned() {
 		Some(value) => match value {
 			Ok(result) => Some(result),
@@ -39,9 +51,31 @@ pub fn Player() -> Element {
 			id: "player",
 			div {
 				id: "head",
+				Slider{
+					value: SliderValue::Single(zoom() as f64),
+					horizontal: true,
+					min: 1.0,
+					max: 5.0,
+					step: 0.1,
+					on_value_change: move |val| {
+						let SliderValue::Single(v) = val;
+						zoom.set(v as f32);
+					},
+					SliderTrack{
+						SliderRange{}
+						SliderThumb{}
+					}
+				},
+				DatePicker{
+					selected_date,
+					 on_value_change: move |v| {
+						selected_date.set(v);
+					},
+					DatePickerInput{}
+				}
 			}
 			Viewport {  }
-			Timeline { playbackInfo: info }
+			Timeline { playbackInfo: info, zoom }
 		}
 	}
 }