Skip to content

Commit

Permalink
some trying out
Browse files Browse the repository at this point in the history
  • Loading branch information
@Narfinger
Narfinger committed Oct 4, 2024
1 parent a667e0b commit 5f56414
Show file tree
Hide file tree
Showing 3 changed files with 42 additions and 57 deletions.
6 changes: 2 additions & 4 deletions web_gui_yew/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@

<head profile="http://www.w4.org/2005/10/profile">
<meta charset="UTF-8">
<link data-trunk rel="css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap/dist/js/bootstrap.bundle.min.js" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/x-square.svg" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/play.svg" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/play-btn.svg" />
Expand All @@ -18,8 +16,8 @@
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/window-fullscreen.svg" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/caret-right-square-fill.svg" />
<link data-trunk rel="copy-file" href="node_modules/bootstrap-icons/icons/list-nested.svg" />
<link data-trunk rel="tailwind-css" href="tailwind.css" />
<link data-trunk rel="css" href="index.css" />
<script src="/bootstrap.bundle.min.js"></script>
<title>Viola</title>
<link rel="icon" type="image/svg" href="/caret-right-square-fill.svg" />
<base data-trunk-public-url />
Expand All @@ -29,4 +27,4 @@
</body>


</html>
</html>
39 changes: 13 additions & 26 deletions web_gui_yew/src/button.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,29 +25,15 @@ pub(crate) fn buttons(props: &ButtonRowProps) -> Html {
};

html! {
<div class="row">
<div class="col">
<div class="flex gap-4 px-8 py-8">
<div class="contents">
<CallbackButton text="Menu" icon="/menu-button.svg" btype={ButtonType::Info} callback={props.sidebar_callback.clone()} />
</div>
<div class="col">
<TransportButton text="Prev" icon="/skip-backward.svg" btype={ButtonType::Primary} on_click={Some(GStreamerAction::Previous)} callback={props.refresh_play_callback.clone()} />
</div>
<div class="col">
{playpause_button}
</div>
<div class="col">
<TransportButton text="Pause" icon="/pause.svg" btype={ButtonType::Primary} on_click={Some(GStreamerAction::Pausing)} callback={props.refresh_play_callback.clone()} />
</div>
<div class="col">
<TransportButton text="Next" icon="/skip-forward.svg" btype={ButtonType::Primary} on_click={Some(GStreamerAction::Next)} callback={props.refresh_play_callback.clone()} />
</div>
<div class="col">
<TransportButton text="Again" icon="/arrow-repeat.svg" btype={ButtonType::Secondary} on_click={Some(GStreamerAction::RepeatOnce)} callback = {props.repeat_once_callback.clone()} />
</div>
<div class="col">
<UrlCallButton text="Clean" icon="/trash.svg" btype={ButtonType::Danger} url_call = {"/clean/"} />
</div>
<div class="col-2">
<CallbackButton text="Delete Range" icon="/trash.svg" btype={ButtonType::Danger} callback={props.delete_range_callback.clone()} />
</div>
</div>}
Expand Down Expand Up @@ -79,9 +65,7 @@ pub(crate) enum ButtonMsg {
fn icon(path: String, size: Option<usize>) -> Html {
let size = (size.unwrap_or(24)).to_string() + "px";
html! {
<span style="padding-right: 5px">
<img src ={path} height={size.clone()} width={size} />
</span>
}
}

Expand All @@ -97,20 +81,21 @@ impl Component for TransportButton {
fn view(&self, ctx: &Context<Self>) -> Html {
let class = String::from("btn ")
+ match ctx.props().btype {
ButtonType::Info => "btn-info",
ButtonType::Primary => "btn-primary",
ButtonType::Info => "bg-cyan-500 text",
ButtonType::Primary => "bg-cyan-500 text",
ButtonType::Secondary => "btn-secondary",
ButtonType::Danger => "btn-danger",
ButtonType::Success => "btn-success",
};
let class = "flex-1 bg-cyan-500 text px-4 py-4 font-semibold text-sm text-white rounded-full";
let onclick = ctx.link().callback(|_| ButtonMsg::Clicked);
let icon_path: String = ctx.props().icon.clone();
html! {
<div class="col">
<>
<button class={class} onclick={onclick}>
{icon(icon_path,None)}
{ &ctx.props().text}</button>
</div>
</>
}
}

Expand Down Expand Up @@ -178,14 +163,15 @@ impl Component for UrlCallButton {
ButtonType::Danger => "btn-danger",
ButtonType::Success => "btn-success",
};
let class = "flex-1 bg-cyan-500 text px-4 py-4 font-semibold text-sm text-white rounded-full";
let onclick = ctx.link().callback(|_| ButtonMsg::Clicked);
let icon_path: String = ctx.props().icon.clone();
html! {
<div class="col">
<>
<button class={class} onclick={onclick}>
{icon(icon_path,None)}
{ &ctx.props().text}</button>
</div>
</>
}
}
}
Expand Down Expand Up @@ -217,14 +203,15 @@ impl Component for CallbackButton {
ButtonType::Danger => "btn-danger",
ButtonType::Success => "btn-success",
};
let class = "bg-cyan-500 text px-4 py-4 font-semibold text-sm text-white rounded-full";
let onclick = ctx.link().callback(|_| ButtonMsg::Clicked);
let icon_path: String = ctx.props().icon.clone();
html! {
<div class="col">
<>
<button class={class} onclick={onclick}>
{icon(icon_path,None)}
{ &ctx.props().text}</button>
</div>
</>
}
}
fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
Expand Down
54 changes: 27 additions & 27 deletions web_gui_yew/src/main.rs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,21 +258,20 @@ impl Component for App {
.cloned()
.collect::<Vec<Rc<Track>>>();
html! {
<div class="container-fluid" style="padding-left: 5vw; padding-bottom: 1vh; height: 75vh">
<Sidebar
visible = {self.sidebar_visible}
close_callback = {ctx.link().callback(|_| AppMessage::ToggleSidebar)}
reload_callback = {ctx.link().batch_callback(|_| vec![AppMessage::LoadTabs, AppMessage::RefreshList])}
show_all_tracks_callback = {ctx.link().callback(|_| AppMessage::ShowFullPlaylist)}
/>
<DeleteRangeDialog
visible = {self.delete_range_visible}
refresh_callback = {ctx.link().callback(|_| AppMessage::RefreshList)}
toggle_visible_callback = {ctx.link().callback(|_| AppMessage::ToggleDeleteRange)}
max = {self.current_tracks.len()}
/>
<div class="row">
<div class="col" style="height: 80vh">
<div class="w-full flex flex-col">
/*<Sidebar
visible = {self.sidebar_visible}
close_callback = {ctx.link().callback(|_| AppMessage::ToggleSidebar)}
reload_callback = {ctx.link().batch_callback(|_| vec![AppMessage::LoadTabs, AppMessage::RefreshList])}
show_all_tracks_callback = {ctx.link().callback(|_| AppMessage::ShowFullPlaylist)}
/>
<DeleteRangeDialog
visible = {self.delete_range_visible}
refresh_callback = {ctx.link().callback(|_| AppMessage::RefreshList)}
toggle_visible_callback = {ctx.link().callback(|_| AppMessage::ToggleDeleteRange)}
max = {self.current_tracks.len()}
*/
<div class="w-full h-24">
<Buttons
// the clean tab refresh will happen from the websocket and not here
status={self.current_status}
Expand All @@ -281,29 +280,30 @@ impl Component for App {
sidebar_callback = {ctx.link().callback(|_| AppMessage::ToggleSidebar)}
delete_range_callback = {ctx.link().callback(|_| AppMessage::ToggleDeleteRange)}
/>

<TabsComponent
// the tab refresh and similar thing will come from the websocket as otherwise we would refresh the old status
tabs = {self.playlist_tabs.clone()}
/>

<div class="row" style="height: 75vh; width: 95vw; overflow-x: auto">
</div>
<div class="w-full flex-shrink">
<TabsComponent
// the tab refresh and similar thing will come from the websocket as otherwise we would refresh the old status
tabs = {self.playlist_tabs.clone()}
/>
</div>
/*
<div style="height: 75vh; width: 95vw; overflow-x: auto">
<TracksComponent
tracks={trimmed_tracks}
current_playing={self.current_playing}
status = {self.current_status}
not_current_tab = {self.playlist_tabs.current_playing_in.map_or(false, |s| s!= self.playlist_tabs.current) }
/>
</div>

<Status
<Status
current_status = {self.current_status}
current_track = {self.current_tracks.get(self.current_playing).cloned()} total_track_time = {full_time_playing} remaining_time_playing = {remaining_time_playing} current_track_time={self.current_track_time} repeat_once = {self.repeat_once} number_of_tracks={self.current_tracks.len()}
window = {TRACK_MAX_NUMBER}
/>
</div>
</div>
</div>
*/
</div>

}
}
}
Expand Down

0 comments on commit 5f56414

Please sign in to comment.