nvrl/proton-stream
1
0 Fork 0
mirror of https://github.com/narrrl/proton-stream.git synced 2026-11-13 09:37:03 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(app): design tokens, settings page, backdrop layering

Browse Source 
Type/shape/motion tokens live in theme.rs and every ui/ module reads them
instead of scattering literal sizes and radii. Appearance and playback
preferences move out of the shares page into their own Settings page and
nav tab.

The title backdrop's veil and fades were painted after the header was laid
out, so they covered the name and overview as well as the still — the text
was being dimmed by the thing meant to make it readable. All band layers
now go into the shape slot reserved before the header, behind the text.
This commit is contained in:
nvrl committed 2026-08-10 01:09:58 +02:00
1 parent 46bb68e3a5
commit cb03f96eca
11 files changed
+915 -413
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/pstr-app/src/ui/downloads.rs
+6 -2
View File
@@ -32,7 +32,7 @@ pub fn show(ui: &mut egui::Ui, downloads: &[DownloadItem], actions: &mut Vec<Act
.filter(|item| item.state == DownloadState::Completed)
.count();
ui.label(egui::RichText::new(title).size(17.0).strong());
ui.label(theme::Role::Section.rich(title).strong());
let totals_known = group.iter().all(|item| item.total > 0);
ui.horizontal(|ui| {
if totals_known {
@@ -145,7 +145,11 @@ fn row(ui: &mut egui::Ui, item: &DownloadItem, actions: &mut Vec<Action>) {
}
}
DownloadState::Completed => {
if ui.button("Make online-only").clicked() {
if ui
.button("Delete")
.on_hover_text("Delete the offline copy; keep the online source")
.clicked()
{
actions.push(Action::RemoveDownload(item.key.clone(), false));
}
}
crates/pstr-app/src/ui/library.rs
+13 -4
View File
@@ -93,6 +93,9 @@ fn continue_row(
subtitle: remaining,
progress: episode.progress().map(|value| value as f32),
badge: episode.numbering(),
// A shelf that scrolls sideways has no right edge
// to reach, so nothing to flex to.
width: theme::CARD_WIDTH,
},
)
.clicked();
@@ -107,9 +110,14 @@ fn continue_row(
/// Every title, wrapped to the window.
fn grid(ui: &mut egui::Ui, art: &mut Art<'_>, titles: &[&Title], actions: &mut Vec<Action>) {
let columns = ui::columns(ui.available_width());
for row in titles.chunks(columns) {
let grid = ui::columns(ui.available_width());
for row in titles.chunks(grid.columns) {
ui.horizontal(|ui| {
// The gap the width was divided around, so what is drawn matches
// what was measured. egui's default item spacing is narrower, and
// the difference times the column count is a visible drift towards
// the left edge.
ui.spacing_mut().item_spacing.x = theme::CARD_GAP;
for title in row {
let clicked = ui::card(
ui,
@@ -121,6 +129,7 @@ fn grid(ui: &mut egui::Ui, art: &mut Art<'_>, titles: &[&Title], actions: &mut V
// What a film is says itself in the subtitle below the
// card; a second `Film` over the poster is noise.
badge: None,
width: grid.width,
},
)
.clicked();
@@ -163,8 +172,8 @@ fn empty_state(ui: &mut egui::Ui, actions: &mut Vec<Action>) {
ui.vertical_centered(|ui| {
ui.add_space(120.0);
ui.label(
egui::RichText::new("Nothing in the library yet")
.size(20.0)
theme::Role::Title
.rich("Nothing in the library yet")
.strong(),
);
ui.add_space(6.0);
crates/pstr-app/src/ui/matcher.rs
+6 -6
View File
@@ -49,8 +49,8 @@ pub fn show(
ui.set_width(620.0);
ui.label(
egui::RichText::new(format!("Match “{}”", matcher.title_name))
.size(18.0)
theme::Role::Heading
.rich(format!("Match “{}”", matcher.title_name))
.strong()
.color(theme::text()),
);
@@ -66,7 +66,7 @@ pub fn show(
ui.add_space(10.0);
if let Some(error) = &matcher.error {
ui.label(egui::RichText::new(error).size(12.0).color(theme::danger()));
ui.label(theme::Role::Caption.rich(error).color(theme::danger()));
ui.add_space(6.0);
}
@@ -212,8 +212,8 @@ fn row(ui: &mut egui::Ui, art: &mut Art<'_>, found: &TitleMetadata) -> egui::Res
ui.add_space(10.0);
ui.vertical(|ui| {
ui.label(
egui::RichText::new(&found.name)
.size(14.0)
theme::Role::Body
.rich(&found.name)
.strong()
.color(theme::text()),
);
@@ -224,7 +224,7 @@ fn row(ui: &mut egui::Ui, art: &mut Art<'_>, found: &TitleMetadata) -> egui::Res
if let Some(overview) = &found.overview {
let mut job = egui::text::LayoutJob::simple(
overview.replace('\n', " "),
egui::FontId::proportional(11.5),
theme::Role::Caption.font(),
theme::muted(),
ui.available_width(),
);
crates/pstr-app/src/ui/mod.rs
+204 -58
View File
@@ -7,6 +7,7 @@ pub mod downloads;
pub mod library;
pub mod matcher;
pub mod player;
pub mod settings;
pub mod shares;
pub mod title;
pub mod transport;
@@ -114,8 +115,8 @@ pub fn format_size(bytes: i64) -> String {
pub fn section(ui: &mut egui::Ui, text: &str) {
ui.add_space(6.0);
ui.label(
egui::RichText::new(text)
.size(17.0)
theme::Role::Section
.rich(text)
.strong()
.color(theme::text()),
);
@@ -124,18 +125,81 @@ pub fn section(ui: &mut egui::Ui, text: &str) {
/// Small grey text, for everything that is context rather than content.
pub fn muted(text: impl Into<String>) -> egui::RichText {
egui::RichText::new(text).size(12.0).color(theme::muted())
theme::Role::Caption.rich(text).color(theme::muted())
}
/// The one button style that means "this is the action".
pub fn accent_button(ui: &mut egui::Ui, text: &str) -> egui::Response {
filled(ui, text, true, Vec2::new(0.0, 0.0))
filled(ui, text, Fill::Accent, Vec2::new(0.0, 0.0))
}
/// A tab in the top bar. The selected one wears the accent; the others are text
/// until the pointer is over them.
pub fn tab(ui: &mut egui::Ui, selected: bool, text: &str) -> egui::Response {
filled(ui, text, selected, Vec2::new(4.0, 0.0))
/// What [`filled`] paints behind its label.
#[derive(Clone, Copy, PartialEq, Eq)]
enum Fill {
/// The accent, gradient and all.
Accent,
/// Nothing — something else already painted the accent here, and the label
/// only has to be legible on it.
Ink,
/// Nothing at rest, the hover colour under the pointer.
None,
}
/// A row of tabs with one accent pill that slides between them.
///
/// Drawn as a row rather than a tab at a time because the pill has to be
/// painted *behind* labels whose positions are not known until they have been
/// laid out, and because a pill that moves has to be one pill: a per-tab fill
/// can only ever cross-fade, which reads as two things blinking rather than one
/// thing travelling.
///
/// Returns the index that was clicked, if any.
pub fn tabs(ui: &mut egui::Ui, id: egui::Id, items: &[(&str, bool)]) -> Option<usize> {
// Reserved now, filled in below: everything drawn after this lands on top
// of it whatever it turns out to be.
let pill = ui.painter().add(egui::Shape::Noop);
let mut clicked = None;
let mut selected = None;
for (index, (text, is_selected)) in items.iter().enumerate() {
let response = tab(ui, *is_selected, text);
if *is_selected {
selected = Some(response.rect);
}
if response.clicked() {
clicked = Some(index);
}
}
if let Some(target) = selected {
// Interpolating the edges rather than the centre and the width keeps
// the pill from overshooting when it moves between tabs of different
// lengths — both edges arrive at the same time.
let ctx = ui.ctx();
let left = ctx.animate_value_with_time(id.with("left"), target.left(), 0.16);
let right = ctx.animate_value_with_time(id.with("right"), target.right(), 0.16);
let rect = Rect::from_min_max(
egui::pos2(left, target.top()),
egui::pos2(right, target.bottom()),
);
ui.painter().set(
pill,
theme::accent_shape(ui.ctx(), rect, CornerRadius::same(8)),
);
}
clicked
}
/// One tab. The selected one is ink on the pill [`tabs`] draws; the others are
/// text until the pointer is over them.
fn tab(ui: &mut egui::Ui, selected: bool, text: &str) -> egui::Response {
filled(
ui,
text,
if selected { Fill::Ink } else { Fill::None },
Vec2::new(4.0, 0.0),
)
}
/// A button painted by hand, so that "filled with the accent" can mean a
@@ -144,7 +208,7 @@ pub fn tab(ui: &mut egui::Ui, selected: bool, text: &str) -> egui::Response {
/// `egui::Button` takes a single `Color32` and there is no way in to give it
/// anything else, so the fill, the label and the hover states are all drawn
/// here. Everything else — sizing, padding, the click — is still egui's.
fn filled(ui: &mut egui::Ui, text: &str, accented: bool, extra: Vec2) -> egui::Response {
fn filled(ui: &mut egui::Ui, text: &str, fill: Fill, extra: Vec2) -> egui::Response {
let padding = ui.spacing().button_padding + extra;
let galley = ui.painter().layout_no_wrap(
text.to_owned(),
@@ -162,23 +226,35 @@ fn filled(ui: &mut egui::Ui, text: &str, accented: bool, extra: Vec2) -> egui::R
}
let radius = CornerRadius::same(8);
let lift = if response.is_pointer_button_down_on() {
-0.14
} else if response.hovered() {
0.10
} else {
0.0
};
// Eased rather than switched, so the veil arrives over a few frames instead
// of appearing whole the moment the pointer crosses the edge. The press is
// quicker than the hover: a click should feel like it registered, not like
// it was considered.
let ctx = ui.ctx().clone();
let hover = ctx.animate_bool_with_time(response.id.with("hover"), response.hovered(), 0.10);
let press = ctx.animate_bool_with_time(
response.id.with("press"),
response.is_pointer_button_down_on(),
0.05,
);
let lift = 0.10 * hover * (1.0 - press) - 0.14 * press;
let ink = if accented {
theme::accent_fill(ui.painter(), rect, radius, lift);
theme::on_accent()
} else {
if response.hovered() {
ui.painter().rect_filled(rect, radius, theme::card_hover());
theme::text()
} else {
theme::muted()
let ink = match fill {
Fill::Accent => {
theme::accent_fill(ui.painter(), rect, radius, lift);
theme::on_accent()
}
// The pill is already under this one; only the veil is missing.
Fill::Ink => {
theme::veil_over(ui.painter(), rect, radius, lift);
theme::on_accent()
}
Fill::None => {
if hover > 0.0 {
ui.painter()
.rect_filled(rect, radius, theme::card_hover().gamma_multiply(hover));
}
theme::muted().lerp_to_gamma(theme::text(), hover)
}
};
@@ -197,6 +273,12 @@ pub struct Card<'a> {
pub progress: Option<f32>,
/// A short label in the corner — `S01E04`.
pub badge: Option<String>,
/// How wide to draw it.
///
/// A grid flexes this so its rows reach the right edge of the window; a
/// sideways-scrolling shelf has no edge to reach and passes
/// [`theme::CARD_WIDTH`].
pub width: f32,
}
/// Draw one tile and report whether it was clicked.
@@ -208,7 +290,7 @@ pub struct Card<'a> {
/// the title, usually. The gap it leaves is filled with the card colour, which
/// reads as deliberate in a way a stretched poster does not.
pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
let width = theme::CARD_WIDTH;
let width = card.width;
let image_height = (width * theme::CARD_ASPECT).round();
// Two lines of name plus one of subtitle. Fixed, because the tile is
// allocated before the name is laid out — and because a grid whose rows are
@@ -223,16 +305,46 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
}
let image_rect = Rect::from_min_size(rect.min, Vec2::new(width, image_height));
let hovered = response.hovered();
// Hover is a value, not a flag: the border, the lift and the shadow all
// ride it, so they arrive together rather than each snapping on its own.
// egui drives this from wall-clock time, so it is the same speed whatever
// the frame rate — and it needs no state kept here.
let hover =
ui.ctx()
.animate_bool_with_time(response.id.with("hover"), response.hovered(), 0.12);
// The picture arrives whenever its download finishes, several frames after
// the tile first drew. Fading it in over the placeholder turns a wall of
// letters popping into stills into one settle.
let art_in = ui
.ctx()
.animate_bool_with_time(response.id.with("art"), card.art.is_some(), 0.22);
let painter = ui.painter();
if hover > 0.0 {
painter.add(theme::tile_shadow(hover).as_shape(image_rect, radius));
}
painter.rect_filled(image_rect, radius, theme::card());
// Under the picture, not instead of it: it is what shows through while the
// art fades in, and it is the whole tile when there is no art to come.
if art_in < 1.0 {
painter.text(
image_rect.center(),
Align2::CENTER_CENTER,
initials(card.name),
egui::FontId::proportional(28.0),
theme::muted().gamma_multiply(1.0 - art_in),
);
}
// White because a textured rect *multiplies* its fill by the texture; the
// alpha on it is what fades the picture in.
let ink = Color32::WHITE.gamma_multiply(art_in);
match &card.art {
Some((texture, ArtShape::Landscape)) => {
let size = texture.size_vec2();
painter.add(
egui::epaint::RectShape::filled(image_rect, radius, Color32::WHITE)
egui::epaint::RectShape::filled(image_rect, radius, ink)
.with_texture(texture.id(), cover_uv(size, image_rect.size())),
);
}
@@ -241,7 +353,7 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
egui::epaint::RectShape::filled(
contain_rect(texture.size_vec2(), image_rect),
radius,
Color32::WHITE,
ink,
)
.with_texture(
texture.id(),
@@ -249,24 +361,13 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
),
);
}
None => {
painter.text(
image_rect.center(),
Align2::CENTER_CENTER,
initials(card.name),
egui::FontId::proportional(28.0),
theme::muted(),
);
}
None => {}
}
if let Some(badge) = &card.badge {
let anchor = image_rect.right_top() + Vec2::new(-8.0, 8.0);
let galley = painter.layout_no_wrap(
badge.clone(),
egui::FontId::proportional(11.0),
Color32::WHITE,
);
let galley =
painter.layout_no_wrap(badge.clone(), theme::Role::Micro.font(), Color32::WHITE);
let background = Rect::from_min_size(
anchor - Vec2::new(galley.size().x + 10.0, 0.0),
galley.size() + Vec2::new(10.0, 4.0),
@@ -314,11 +415,11 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
theme::accent_fill(&clipped_painter, played, played_radius, 0.0);
}
if hovered {
if hover > 0.0 {
painter.rect_stroke(
image_rect,
radius,
Stroke::new(2.0, theme::accent()),
Stroke::new(2.0, theme::accent().gamma_multiply(hover)),
egui::StrokeKind::Inside,
);
}
@@ -333,12 +434,10 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
// the line below it.
let mut job = egui::text::LayoutJob::simple(
card.name.to_string(),
egui::FontId::proportional(14.0),
if hovered {
Color32::WHITE
} else {
theme::text()
},
theme::Role::Body.font(),
// Towards white as the pointer arrives, so the name lifts with the
// border rather than staying put while everything around it moves.
theme::text().lerp_to_gamma(Color32::WHITE, hover),
width,
);
job.wrap.max_rows = 2;
@@ -350,7 +449,7 @@ pub fn card(ui: &mut egui::Ui, card: Card<'_>) -> egui::Response {
text_rect.min + Vec2::new(0.0, name_height + 2.0),
Align2::LEFT_TOP,
card.subtitle,
egui::FontId::proportional(11.5),
theme::Role::Caption.font(),
theme::muted(),
);
@@ -396,10 +495,33 @@ fn initials(name: &str) -> String {
.collect()
}
/// How many cards fit, and the gap that leaves them evenly spread.
pub fn columns(available: f32) -> usize {
(((available + theme::CARD_GAP) / (theme::CARD_WIDTH + theme::CARD_GAP)).floor() as usize)
.max(1)
/// How a grid divides the width it was given.
#[derive(Debug, Clone, Copy, PartialEq)]
pub struct Grid {
pub columns: usize,
/// What each card should be drawn at, so the row reaches both edges.
pub width: f32,
}
/// Fit as many cards as will go, then widen them to use the rest.
///
/// [`theme::CARD_WIDTH`] is a *minimum*, not the width. Dividing by it and
/// flooring — which is what this used to do — leaves up to one whole card of
/// dead space at the right of every row, and on a wide window that reads as a
/// layout that failed to line up rather than as a margin.
pub fn columns(available: f32) -> Grid {
let columns = (((available + theme::CARD_GAP) / (theme::CARD_WIDTH + theme::CARD_GAP)).floor()
as usize)
.max(1);
// The gaps come out of the width before it is split. Floored, because a
// fraction of a point times four columns is enough to push the last card
// onto a row of its own. A window too narrow for even one full card gets a
// card narrower than the minimum, which is better than one clipped by the
// edge.
let width = ((available - theme::CARD_GAP * (columns - 1) as f32) / columns as f32)
.floor()
.max(1.0);
Grid { columns, width }
}
#[cfg(test)]
@@ -454,7 +576,31 @@ mod tests {
#[test]
fn column_count_never_reaches_zero() {
assert_eq!(columns(0.0), 1);
assert!(columns(2000.0) > 1);
assert_eq!(columns(0.0).columns, 1);
assert!(columns(2000.0).columns > 1);
}
#[test]
fn a_row_of_cards_fills_the_width_it_was_given() {
// The defect this replaced: floor(available / CARD_WIDTH) cards at a
// fixed width leave up to one card's worth of the window empty.
for available in [400.0, 813.0, 1280.0, 1920.5, 3440.0] {
let grid = columns(available);
let used =
grid.width * grid.columns as f32 + theme::CARD_GAP * (grid.columns - 1) as f32;
assert!(used <= available, "{available}: {used} overflows the row");
assert!(
available - used < grid.columns as f32 + 1.0,
"{available}: {} left over",
available - used,
);
}
}
#[test]
fn cards_never_go_below_the_minimum_while_they_still_fit() {
for available in [500.0, 900.0, 2400.0] {
assert!(columns(available).width >= theme::CARD_WIDTH);
}
}
}
crates/pstr-app/src/ui/player.rs
+17 -17
View File
@@ -287,7 +287,7 @@ fn waiting(ui: &mut egui::Ui, playback: &Playback, rect: Rect) {
rect.center() - Vec2::new(0.0, 18.0),
Align2::CENTER_CENTER,
&playback.target.title_name,
egui::FontId::proportional(20.0),
theme::Role::Title.font(),
theme::text(),
);
painter.text(
@@ -298,7 +298,7 @@ fn waiting(ui: &mut egui::Ui, playback: &Playback, rect: Rect) {
} else {
"playing in mpv's own window"
},
egui::FontId::proportional(13.0),
theme::Role::Label.font(),
theme::muted(),
);
}
@@ -313,14 +313,14 @@ fn between(ui: &mut egui::Ui, opening: Option<&str>, rect: Rect, actions: &mut V
rect.center() - Vec2::new(0.0, 16.0),
Align2::CENTER_CENTER,
"Up next",
egui::FontId::proportional(14.0),
theme::Role::Body.font(),
theme::muted(),
);
ui.painter().text(
rect.center() + Vec2::new(0.0, 12.0),
Align2::CENTER_CENTER,
opening.unwrap_or("opening…"),
egui::FontId::proportional(20.0),
theme::Role::Title.font(),
theme::text(),
);
@@ -361,7 +361,7 @@ fn skip(
// recap" are different lengths, and one constant leaves the shorter of them
// adrift in a box of its own whitespace, which is what made this read as a
// rectangle with some text in it instead of a button.
let font = egui::FontId::proportional(14.0);
let font = theme::Role::Body.font();
let text_width = ui
.painter()
.layout_no_wrap(label.to_owned(), font.clone(), Color32::WHITE)
@@ -440,8 +440,8 @@ fn up_next_card(
ui.set_width(size.x - 28.0);
ui.horizontal(|ui| {
ui.label(
egui::RichText::new("Up next")
.size(12.0)
theme::Role::Caption
.rich("Up next")
.strong()
.color(Color32::from_white_alpha(200)),
);
@@ -449,16 +449,16 @@ fn up_next_card(
// Rounded up, so a card that says "1s" is never
// followed by a second of nothing happening.
ui.label(
egui::RichText::new(format!("in {}s", card.seconds.ceil() as u32))
.size(12.0)
theme::Role::Caption
.rich(format!("in {}s", card.seconds.ceil() as u32))
.color(theme::accent()),
);
});
});
ui.add(
egui::Label::new(
egui::RichText::new(&card.caption)
.size(14.0)
theme::Role::Body
.rich(&card.caption)
.strong()
.color(Color32::WHITE),
)
@@ -533,7 +533,7 @@ fn chrome(
|ui| {
if ui
.add(
egui::Button::new(egui::RichText::new("Library").size(13.0))
egui::Button::new(theme::Role::Label.rich("Library"))
.fill(Color32::from_black_alpha(160))
.corner_radius(CornerRadius::same(8))
.min_size(Vec2::new(96.0, 32.0)),
@@ -546,14 +546,14 @@ fn chrome(
ui.add_space(14.0);
ui.vertical(|ui| {
ui.label(
egui::RichText::new(&playback.target.title_name)
.size(18.0)
theme::Role::Heading
.rich(&playback.target.title_name)
.strong()
.color(Color32::WHITE),
);
ui.label(
egui::RichText::new(playback.target.caption())
.size(13.0)
theme::Role::Label
.rich(playback.target.caption())
.color(Color32::from_white_alpha(190)),
);
});
@@ -561,7 +561,7 @@ fn chrome(
ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
if ui
.add(
egui::Button::new(egui::RichText::new("⛶").size(15.0))
egui::Button::new(theme::Role::Subhead.rich("⛶"))
.fill(Color32::from_black_alpha(160))
.corner_radius(CornerRadius::same(8))
.min_size(Vec2::new(38.0, 32.0)),
crates/pstr-app/src/ui/settings.rs
+269
View File
@@ -0,0 +1,269 @@
//! Settings: how the app looks, how it plays, and what it asks the internet.
//!
//! Split out of the shares page, where these lived because that was the only
//! page with a form on it. Nobody looking for the theme looks under the page
//! that manages Proton Drive links, and a page that is half link management and
//! half preferences is two pages.
use pstr_core::appearance::{Accent, Appearance, Flavor};
use pstr_core::metadata::{MetadataConfig, ProviderId};
use crate::app::Action;
use crate::theme;
use crate::ui;
/// The settings that are a single value rather than a form.
///
/// Bundled for the same reason [`crate::ui::Art`] is: they arrive together,
/// they are read-only, and passing them one by one is what pushed this
/// function past the argument count anybody can read.
#[derive(Debug, Clone, Copy)]
pub struct Prefs {
pub autoplay: bool,
pub appearance: Appearance,
}
pub fn show(
ui: &mut egui::Ui,
settings: &mut MetadataConfig,
prefs: Prefs,
api_key: &mut String,
actions: &mut Vec<Action>,
) {
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
appearance_form(ui, prefs.appearance, actions);
ui.add_space(28.0);
playback_form(ui, prefs.autoplay, actions);
ui.add_space(28.0);
metadata_form(ui, settings, api_key, actions);
});
}
/// The theme: a flavour, an accent, and whether the accent is a gradient.
///
/// Every control here repaints the whole window the moment it is clicked —
/// there is no "apply" — because the preview *is* the app. A swatch row that
/// only changed a small square would be asking someone to imagine the result.
fn appearance_form(ui: &mut egui::Ui, appearance: Appearance, actions: &mut Vec<Action>) {
ui::section(ui, "Appearance");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
ui.label(ui::muted("Palette"));
for flavor in Flavor::ALL {
if ui
.radio(appearance.flavor == flavor, flavor.label())
.on_hover_text(flavor.description())
.clicked()
&& appearance.flavor != flavor
{
actions.push(Action::SetAppearance(Appearance {
flavor,
..appearance
}));
}
}
ui.add_space(12.0);
ui.label(ui::muted("Accent"));
ui.horizontal_wrapped(|ui| {
for accent in Accent::ALL {
if swatch(ui, appearance, accent).clicked() && appearance.accent != accent {
actions.push(Action::SetAppearance(Appearance {
accent,
..appearance
}));
}
}
});
ui.add_space(12.0);
let mut gradients = appearance.gradients;
if ui
.checkbox(&mut gradients, "Fade the accent into a second colour")
.on_hover_text(
"Off draws it flat — better on a panel that bands a gradient into stripes",
)
.changed()
{
actions.push(Action::SetAppearance(Appearance {
gradients,
..appearance
}));
}
});
}
/// One accent, drawn in the colours it would actually produce.
///
/// Resolved against the *selected* flavour rather than the active palette, so
/// the row previews what clicking it would give rather than what is on screen.
fn swatch(ui: &mut egui::Ui, appearance: Appearance, accent: Accent) -> egui::Response {
let selected = appearance.accent == accent;
let size = egui::Vec2::new(52.0, 26.0);
let (rect, response) = ui.allocate_exact_size(size, egui::Sense::click());
if ui.is_rect_visible(rect) {
let palette = theme::Palette::resolve(Appearance {
accent,
..appearance
});
let radius = egui::CornerRadius::same(6);
theme::swatch_fill(ui.painter(), rect, radius, &palette);
if selected {
// A ring rather than a tick: the tick would have to be drawn in an
// ink that reads on eight different fills.
ui.painter().rect_stroke(
rect.expand(2.0),
egui::CornerRadius::same(8),
egui::Stroke::new(2.0, theme::text()),
egui::StrokeKind::Outside,
);
}
}
response
.on_hover_text(accent.label())
.on_hover_cursor(egui::CursorIcon::PointingHand)
}
/// The handful of playback settings that are not per-file.
///
/// Volume, audio language and subtitle language are all set from the player
/// itself, where a viewer can hear the result — only autoplay has no natural
/// home there, because by the time it matters the episode is over.
fn playback_form(ui: &mut egui::Ui, autoplay: bool, actions: &mut Vec<Action>) {
ui::section(ui, "Playback");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
let mut enabled = autoplay;
if ui
.checkbox(&mut enabled, "Play the next episode automatically")
.on_hover_text("Only when an episode reaches its end, never after a failure")
.changed()
{
actions.push(Action::SetAutoplay(enabled));
}
ui.label(ui::muted(
"Volume, audio language and subtitles are set from the player, and remembered \
from there.",
));
});
}
/// Enrichment: the switch, the provider, and the cost of turning it on.
///
/// The privacy note is not decoration and it is not in a tooltip. Turning this
/// on sends the titles in someone's library to a third party, which is a thing
/// they can only agree to if they are told — so it is stated where the switch
/// is, before the switch, in the same size as everything else.
fn metadata_form(
ui: &mut egui::Ui,
settings: &mut MetadataConfig,
api_key: &mut String,
actions: &mut Vec<Action>,
) {
ui::section(ui, "Posters and descriptions");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
ui.label(ui::muted(
"A share filled by the Proton Drive desktop client carries no thumbnails, so \
without this every tile is a pair of initials. Turning it on sends the titles \
in your library — not your files, and nothing about what you have watched — to \
the provider you choose, over HTTPS, each time a new one appears.",
));
ui.add_space(10.0);
let mut changed = false;
let mut enabled = settings.enabled;
if ui
.checkbox(&mut enabled, "Look up posters and descriptions")
.changed()
{
settings.enabled = enabled;
changed = true;
}
if settings.enabled {
ui.add_space(10.0);
ui.label(ui::muted("Provider"));
for provider in ProviderId::ALL {
if ui
.radio(settings.provider == provider, provider.label())
.on_hover_text(provider.description())
.clicked()
&& settings.provider != provider
{
settings.provider = provider;
changed = true;
}
}
if settings.provider.needs_api_key() {
ui.add_space(10.0);
ui.label(ui::muted(format!("{} API key", settings.provider.label())));
ui.horizontal(|ui| {
ui.add(
egui::TextEdit::singleline(api_key)
.password(true)
.hint_text("v3 API key")
.desired_width(300.0),
);
if ui.button("Save key").clicked() {
actions.push(Action::SetApiKey {
provider: settings.provider,
key: std::mem::take(api_key),
});
}
});
ui.label(ui::muted(
"Stored in your system keyring, never in a config file. Leave the box \
empty and save to forget it.",
));
}
ui.add_space(12.0);
ui.horizontal(|ui| {
if ui::accent_button(ui, "Match the library").clicked() {
actions.push(Action::MatchTitles { force: false });
}
if ui
.button("Match everything again")
.on_hover_text("Ask about every title, including ones already matched")
.clicked()
{
actions.push(Action::MatchTitles { force: true });
}
});
} else {
ui.add_space(6.0);
ui.label(ui::muted(
"Off. Nothing is sent anywhere, and turning it off also deletes the answers \
already stored.",
));
}
if changed {
actions.push(Action::SetMetadataConfig(settings.clone()));
}
});
}
crates/pstr-app/src/ui/shares.rs
+1 -256
View File
@@ -7,33 +7,12 @@
//! typed.
use pstr_core::Share;
use pstr_core::appearance::{Accent, Appearance, Flavor};
use pstr_core::metadata::{MetadataConfig, ProviderId};
use crate::app::{Action, ShareForm};
use crate::theme;
use crate::ui;
/// The settings on this page that are a single value rather than a form.
///
/// Bundled for the same reason [`crate::ui::Art`] is: they arrive together,
/// they are read-only, and passing them one by one is what pushed this
/// function past the argument count anybody can read.
#[derive(Debug, Clone, Copy)]
pub struct Prefs {
pub autoplay: bool,
pub appearance: Appearance,
}
pub fn show(
ui: &mut egui::Ui,
shares: &[Share],
form: &mut ShareForm,
settings: &mut MetadataConfig,
prefs: Prefs,
api_key: &mut String,
actions: &mut Vec<Action>,
) {
pub fn show(ui: &mut egui::Ui, shares: &[Share], form: &mut ShareForm, actions: &mut Vec<Action>) {
egui::ScrollArea::vertical()
.auto_shrink([false, false])
.show(ui, |ui| {
@@ -47,240 +26,6 @@ pub fn show(
ui.add_space(22.0);
add_form(ui, form, actions);
ui.add_space(28.0);
playback_form(ui, prefs.autoplay, actions);
ui.add_space(28.0);
appearance_form(ui, prefs.appearance, actions);
ui.add_space(28.0);
metadata_form(ui, settings, api_key, actions);
});
}
/// The theme: a flavour, an accent, and whether the accent is a gradient.
///
/// Every control here repaints the whole window the moment it is clicked —
/// there is no "apply" — because the preview *is* the app. A swatch row that
/// only changed a small square would be asking someone to imagine the result.
fn appearance_form(ui: &mut egui::Ui, appearance: Appearance, actions: &mut Vec<Action>) {
ui::section(ui, "Appearance");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
ui.label(ui::muted("Palette"));
for flavor in Flavor::ALL {
if ui
.radio(appearance.flavor == flavor, flavor.label())
.on_hover_text(flavor.description())
.clicked()
&& appearance.flavor != flavor
{
actions.push(Action::SetAppearance(Appearance {
flavor,
..appearance
}));
}
}
ui.add_space(12.0);
ui.label(ui::muted("Accent"));
ui.horizontal_wrapped(|ui| {
for accent in Accent::ALL {
if swatch(ui, appearance, accent).clicked() && appearance.accent != accent {
actions.push(Action::SetAppearance(Appearance {
accent,
..appearance
}));
}
}
});
ui.add_space(12.0);
let mut gradients = appearance.gradients;
if ui
.checkbox(&mut gradients, "Fade the accent into a second colour")
.on_hover_text(
"Off draws it flat — better on a panel that bands a gradient into stripes",
)
.changed()
{
actions.push(Action::SetAppearance(Appearance {
gradients,
..appearance
}));
}
});
}
/// One accent, drawn in the colours it would actually produce.
///
/// Resolved against the *selected* flavour rather than the active palette, so
/// the row previews what clicking it would give rather than what is on screen.
fn swatch(ui: &mut egui::Ui, appearance: Appearance, accent: Accent) -> egui::Response {
let selected = appearance.accent == accent;
let size = egui::Vec2::new(52.0, 26.0);
let (rect, response) = ui.allocate_exact_size(size, egui::Sense::click());
if ui.is_rect_visible(rect) {
let palette = theme::Palette::resolve(Appearance {
accent,
..appearance
});
let radius = egui::CornerRadius::same(6);
theme::swatch_fill(ui.painter(), rect, radius, &palette);
if selected {
// A ring rather than a tick: the tick would have to be drawn in an
// ink that reads on eight different fills.
ui.painter().rect_stroke(
rect.expand(2.0),
egui::CornerRadius::same(8),
egui::Stroke::new(2.0, theme::text()),
egui::StrokeKind::Outside,
);
}
}
response
.on_hover_text(accent.label())
.on_hover_cursor(egui::CursorIcon::PointingHand)
}
/// Enrichment: the switch, the provider, and the cost of turning it on.
///
/// The privacy note is not decoration and it is not in a tooltip. Turning this
/// on sends the titles in someone's library to a third party, which is a thing
/// they can only agree to if they are told — so it is stated where the switch
/// is, before the switch, in the same size as everything else.
/// The handful of playback settings that are not per-file.
///
/// Volume, audio language and subtitle language are all set from the player
/// itself, where a viewer can hear the result — only autoplay has no natural
/// home there, because by the time it matters the episode is over.
fn playback_form(ui: &mut egui::Ui, autoplay: bool, actions: &mut Vec<Action>) {
ui::section(ui, "Playback");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
let mut enabled = autoplay;
if ui
.checkbox(&mut enabled, "Play the next episode automatically")
.on_hover_text("Only when an episode reaches its end, never after a failure")
.changed()
{
actions.push(Action::SetAutoplay(enabled));
}
ui.label(ui::muted(
"Volume, audio language and subtitles are set from the player, and remembered \
from there.",
));
});
}
fn metadata_form(
ui: &mut egui::Ui,
settings: &mut MetadataConfig,
api_key: &mut String,
actions: &mut Vec<Action>,
) {
ui::section(ui, "Posters and descriptions");
egui::Frame::new()
.fill(theme::card())
.corner_radius(egui::CornerRadius::same(8))
.inner_margin(egui::Margin::same(14))
.show(ui, |ui| {
ui.set_width(ui.available_width().min(640.0));
ui.label(ui::muted(
"A share filled by the Proton Drive desktop client carries no thumbnails, so \
without this every tile is a pair of initials. Turning it on sends the titles \
in your library — not your files, and nothing about what you have watched — to \
the provider you choose, over HTTPS, each time a new one appears.",
));
ui.add_space(10.0);
let mut changed = false;
let mut enabled = settings.enabled;
if ui
.checkbox(&mut enabled, "Look up posters and descriptions")
.changed()
{
settings.enabled = enabled;
changed = true;
}
if settings.enabled {
ui.add_space(10.0);
ui.label(ui::muted("Provider"));
for provider in ProviderId::ALL {
if ui
.radio(settings.provider == provider, provider.label())
.on_hover_text(provider.description())
.clicked()
&& settings.provider != provider
{
settings.provider = provider;
changed = true;
}
}
if settings.provider.needs_api_key() {
ui.add_space(10.0);
ui.label(ui::muted(format!("{} API key", settings.provider.label())));
ui.horizontal(|ui| {
ui.add(
egui::TextEdit::singleline(api_key)
.password(true)
.hint_text("v3 API key")
.desired_width(300.0),
);
if ui.button("Save key").clicked() {
actions.push(Action::SetApiKey {
provider: settings.provider,
key: std::mem::take(api_key),
});
}
});
ui.label(ui::muted(
"Stored in your system keyring, never in a config file. Leave the box \
empty and save to forget it.",
));
}
ui.add_space(12.0);
ui.horizontal(|ui| {
if ui::accent_button(ui, "Match the library").clicked() {
actions.push(Action::MatchTitles { force: false });
}
if ui
.button("Match everything again")
.on_hover_text("Ask about every title, including ones already matched")
.clicked()
{
actions.push(Action::MatchTitles { force: true });
}
});
} else {
ui.add_space(6.0);
ui.label(ui::muted(
"Off. Nothing is sent anywhere, and turning it off also deletes the answers \
already stored.",
));
}
if changed {
actions.push(Action::SetMetadataConfig(settings.clone()));
}
});
}
crates/pstr-app/src/ui/title.rs
+134 -33
View File
@@ -44,13 +44,13 @@ pub fn show(
for (index, season) in title.seasons.iter().enumerate() {
let open = index == 0 || title.seasons.len() == 1;
egui::CollapsingHeader::new(
egui::RichText::new(format!(
"{} · {}",
season.label(),
ui::library::plural(season.episodes.len(), "episode")
))
.size(15.0)
.strong(),
theme::Role::Subhead
.rich(format!(
"{} · {}",
season.label(),
ui::library::plural(season.episodes.len(), "episode")
))
.strong(),
)
.id_salt(("season", index))
.default_open(open)
@@ -58,13 +58,17 @@ pub fn show(
let season_keys: Vec<_> = season.episodes.iter().map(key_of).collect();
let all_offline = season_keys.iter().all(|key| offline.files.contains(key));
if all_offline {
if ui.button("Make season online-only").clicked() {
if ui
.button("Delete season")
.on_hover_text("Delete the offline copies; keep the online source")
.clicked()
{
for key in season_keys {
actions.push(Action::RemoveDownload(key, false));
}
}
} else if ui
.button("Make season offline")
.button("Download season")
.on_hover_text("Download every episode in this season")
.clicked()
{
@@ -98,22 +102,34 @@ fn header(
let record = art.metadata.get(&title.key);
let found = record.and_then(|record| record.metadata.clone());
let by_hand = record.is_some_and(|record| record.manual);
// Asked for once and used twice: the same picture is the poster beside the
// text and the banner behind all of it.
let picture = art.of(title);
// Reserved before the header is laid out, because the band is as tall as
// whatever the header comes to — a fixed height would clip a long overview
// on one title and leave a gap under a short one on the next.
let backdrop = picture
.as_ref()
.map(|(texture, _)| (texture.clone(), ui.painter().add(egui::Shape::Noop)));
ui.add_space(6.0);
ui.horizontal_top(|ui| {
ui::card(
ui,
Card {
art: art.of(title),
art: picture,
name: &title.name,
subtitle: String::new(),
progress: title.resume().and_then(|e| e.progress()).map(|v| v as f32),
badge: None,
width: theme::CARD_WIDTH,
},
);
ui.add_space(18.0);
ui.vertical(|ui| {
ui.label(egui::RichText::new(&title.name).size(26.0).strong());
ui.label(theme::Role::Display.rich(&title.name).strong());
// The provider's name for it, when it is not the one the files use.
// Worth showing rather than replacing the filename's: a viewer
// should be able to tell what the match actually matched.
@@ -147,13 +163,17 @@ fn header(
let title_keys: Vec<_> = title.episodes().map(key_of).collect();
let all_offline = title_keys.iter().all(|key| offline.files.contains(key));
if all_offline {
if ui.button("Make show online-only").clicked() {
if ui
.button("Delete show")
.on_hover_text("Delete the offline copies; keep the online source")
.clicked()
{
for key in title_keys {
actions.push(Action::RemoveDownload(key, false));
}
}
} else if ui
.button("Make show offline")
.button("Download show")
.on_hover_text("Download every episode for disconnected playback")
.clicked()
{
@@ -220,6 +240,101 @@ fn header(
}
});
});
if let Some((texture, index)) = backdrop {
ui.add_space(10.0);
band(ui, &texture, index);
}
}
/// The picture again, across the whole width, behind the header.
///
/// The one piece of this page that had to wait for artwork to exist at all: the
/// providers already hand back a picture and its shape, so a backdrop costs no
/// new request — only somewhere to put it.
///
/// Three shapes over one another, in this order: the picture, a flat veil of the
/// page colour so text laid over it stays readable whatever the still happens to
/// be, and a fade into the page along the bottom so the band ends rather than
/// stops.
fn band(ui: &mut egui::Ui, texture: &egui::TextureHandle, index: egui::layers::ShapeIdx) {
// Full width of the window, not of the content: the panel's own margin is
// what the band has to reach past, or it reads as a picture in a box.
const BLEED: f32 = 18.0;
let content = ui.min_rect();
let rect = egui::Rect::from_min_max(
egui::pos2(ui.max_rect().left() - BLEED, content.top()),
egui::pos2(ui.max_rect().right() + BLEED, content.bottom()),
);
// Past the panel margin, or the bleed is trimmed off at exactly the edge it
// exists to cross.
let painter = ui.painter().with_clip_rect(rect);
// Every layer of the band goes into the one slot reserved before the header
// was laid out. Painting the veils here, after the fact, would put them over
// the name and the overview as well as the still — which is the picture
// being readable at the cost of the text it exists behind.
let mut layers: Vec<egui::Shape> = vec![
egui::epaint::RectShape::filled(rect, egui::CornerRadius::ZERO, egui::Color32::WHITE)
.with_texture(
texture.id(),
super::cover_uv(texture.size_vec2(), rect.size()),
)
.into(),
];
// Heavier than it looks: a still is arbitrary, and the one it lands on may
// be a white frame. This is the difference between a hero and an unreadable
// page.
//
// Two coats rather than one heavy one. The first is flat and near-opaque —
// enough on its own that body text over the busiest frame still reads. The
// second is the picture's own contrast being knocked back further behind the
// left half, where the poster, the name and the overview actually sit; the
// right half keeps more of the still, so the band is still a picture.
//
// Heavier still when there is no fade coming, since then these are the only
// things standing between the text and the picture.
let ramps = theme::ramps_on();
layers.push(
egui::epaint::RectShape::filled(
rect,
egui::CornerRadius::ZERO,
theme::background().gamma_multiply(if ramps { 0.90 } else { 0.94 }),
)
.into(),
);
if ramps {
let text_side = egui::Rect::from_min_max(
rect.min,
egui::pos2(rect.left() + rect.width() * 0.72, rect.bottom()),
);
layers.push(theme::fade_shape(
ui.ctx(),
text_side,
theme::background(),
theme::Direction::Horizontal,
// Solid at the left, where the poster and the text are.
false,
));
}
// A viewer with ramps off is on a panel that bands them; a 120-point ramp
// of one hue is exactly the case that shows it. The band then ends at its
// own edge, which is the honest version of the same thing.
if ramps {
let fade =
egui::Rect::from_min_max(egui::pos2(rect.left(), rect.bottom() - 120.0), rect.max);
layers.push(theme::fade_shape(
ui.ctx(),
fade,
theme::background(),
theme::Direction::Vertical,
// Solid at the bottom, where the page it hands over to is.
true,
));
}
painter.set(index, egui::Shape::Vec(layers));
}
/// What the provider had to say. Only ever drawn under a match.
@@ -229,14 +344,7 @@ fn description(ui: &mut egui::Ui, found: &TitleMetadata) {
ui.add_space(6.0);
}
if let Some(overview) = &found.overview {
ui.add(
egui::Label::new(
egui::RichText::new(overview)
.size(13.0)
.color(theme::text()),
)
.wrap(),
);
ui.add(egui::Label::new(theme::Role::Label.rich(overview).color(theme::text())).wrap());
}
if let Some(url) = &found.url {
ui.add_space(8.0);
@@ -324,10 +432,7 @@ fn episode_row(
// carries a checkbox, and a click that means "seen" must never
// be one that starts a 1.4 GiB stream instead.
if ui
.add(
egui::Button::new(egui::RichText::new("▶").size(13.0))
.fill(theme::card_hover()),
)
.add(egui::Button::new(theme::Role::Label.rich("▶")).fill(theme::card_hover()))
.on_hover_text("Play")
.clicked()
{
@@ -337,7 +442,7 @@ fn episode_row(
let current = offline.downloads.iter().find(|item| item.key == key);
if offline.files.contains(&key) {
if ui
.small_button("Online-only")
.small_button("Delete")
.on_hover_text("Delete the offline copy; keep the online source")
.clicked()
{
@@ -443,11 +548,7 @@ fn episode_row(
// saying so on the row rather than only when a click on
// it comes back with "has no content".
Some(0) => {
ui.label(
egui::RichText::new("empty")
.size(12.0)
.color(theme::danger()),
)
ui.label(theme::Role::Caption.rich("empty").color(theme::danger()))
.on_hover_text(
"The share reports no content for this file; it cannot be played.",
);
@@ -459,8 +560,8 @@ fn episode_row(
}
if let Some(at) = episode.resume_at() {
ui.label(
egui::RichText::new(format!("resume {}", ui::format_time(at)))
.size(12.0)
theme::Role::Caption
.rich(format!("resume {}", ui::format_time(at)))
.color(theme::accent()),
);
}
crates/pstr-app/src/ui/transport.rs
+4 -8
View File
@@ -116,7 +116,7 @@ pub fn mini(
// one-way trip: playback carries on with nowhere to watch it.
if ui
.add(
egui::Button::new(egui::RichText::new("Back to video").size(13.0))
egui::Button::new(theme::Role::Label.rich("Back to video"))
.fill(theme::card_hover())
.corner_radius(CornerRadius::same(8)),
)
@@ -132,12 +132,8 @@ pub fn mini(
// is the only thing that still knows which title this came from.
if ui
.add(
egui::Label::new(
egui::RichText::new(&playback.target.title_name)
.size(14.0)
.strong(),
)
.sense(Sense::click()),
egui::Label::new(theme::Role::Body.rich(&playback.target.title_name).strong())
.sense(Sense::click()),
)
.on_hover_text("Show this title")
.clicked()
@@ -287,7 +283,7 @@ fn step_button(
) {
let response = ui.add_enabled(
enabled,
egui::Button::new(egui::RichText::new(label).size(15.0)).min_size(Vec2::new(38.0, 30.0)),
egui::Button::new(theme::Role::Subhead.rich(label)).min_size(Vec2::new(38.0, 30.0)),
);
if response.on_hover_text(hover).clicked() {
push(actions);