89 lines
2.2 KiB
Rust
89 lines
2.2 KiB
Rust
use chrono::{Datelike, Local};
|
|
use dioxus::prelude::*;
|
|
use dioxus_primitives::slider::{SliderTrack, SliderValue};
|
|
use prost_types::Timestamp;
|
|
use time::Date;
|
|
|
|
use crate::{
|
|
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 mut selected_date = use_signal(|| {
|
|
let now = Local::now();
|
|
Some(Date::from_ordinal_date(now.year(), now.ordinal() as u16).unwrap())
|
|
});
|
|
let mut zoom = use_signal(|| 1.0 as f32);
|
|
let 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");
|
|
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;
|
|
if let Ok(entries) = result
|
|
{
|
|
let res = entries.into_inner();
|
|
return Ok(res);
|
|
}
|
|
else
|
|
{
|
|
let err = result.err().unwrap();
|
|
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),
|
|
Err(_) => None,
|
|
},
|
|
_ => None,
|
|
};
|
|
rsx! {
|
|
document::Link { rel: "stylesheet", href: PLAYER_CSS }
|
|
div{
|
|
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 { playback_info: info.clone(), time }
|
|
Timeline { playback_info: info, zoom, time }
|
|
}
|
|
}
|
|
}
|