Generative: the video strip scrolls and reveals; tags wrap in their row
The timeline's scroll box is the flex row itself, so its reach is its shots; a focused shot brings itself whole into view through layout::bring_into_view, which table headers now share; Extend sits with the caption under the strip. A voice's tags cap at the row's width and wrap inside it.
This commit is contained in:
ZacharyZhang-NY committed
1 parent
a4f101f7b3
commit
396531c075
7 files changed
+189
-38
No files matched your search
@@ -185,3 +185,99 @@ fn a_peak_past_full_fails_loud() {
|
||||
let _ =
|
||||
AudioGenerationPlayer::new("sound", "rain", "Orchid", vec![1.5], Duration::from_secs(1));
|
||||
}
|
||||
|
||||
/// Four five-second shots in a strip 280 wide, and what they heard.
|
||||
struct Long(Heard);
|
||||
|
||||
impl Render for Long {
|
||||
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
|
||||
let (chosen, extended) = (self.0.clone(), self.0.clone());
|
||||
let shot = |key: &str| Shot {
|
||||
key: key.to_string().into(),
|
||||
prompt: "a pan".into(),
|
||||
length: Duration::from_secs(5),
|
||||
outcome: Outcome::Pending(None),
|
||||
};
|
||||
div().w(px(280.0)).child(
|
||||
VideoGenerationTimeline::new("long", ["a", "b", "c", "d"].map(shot), Duration::ZERO)
|
||||
.on_select(move |key, _, _| chosen.borrow_mut().push(format!("choose {key}")))
|
||||
.on_extend(move |_, _| extended.borrow_mut().push("extend".into())),
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
fn long(cx: &mut TestAppContext) -> (Heard, &mut gpui::VisualTestContext) {
|
||||
setup(cx);
|
||||
let heard = Heard::default();
|
||||
let store = heard.clone();
|
||||
let (_, cx) = cx.add_window_view(|_, _| Long(store));
|
||||
cx.update(|window, _| window.activate_window());
|
||||
settle(cx);
|
||||
(heard, cx)
|
||||
}
|
||||
|
||||
#[gpui::test]
|
||||
fn a_long_strip_scrolls_sideways(cx: &mut TestAppContext) {
|
||||
let (heard, cx) = long(cx);
|
||||
cx.simulate_event(gpui::ScrollWheelEvent {
|
||||
position: point(px(140.0), px(50.0)),
|
||||
delta: gpui::ScrollDelta::Pixels(point(px(-2000.0), px(0.0))),
|
||||
modifiers: Modifiers::none(),
|
||||
touch_phase: gpui::TouchPhase::Moved,
|
||||
});
|
||||
settle(cx);
|
||||
cx.simulate_click(point(px(250.0), px(50.0)), Modifiers::none());
|
||||
settle(cx);
|
||||
assert_eq!(
|
||||
*heard.borrow(),
|
||||
["choose d"],
|
||||
"the last shot comes under the press"
|
||||
);
|
||||
}
|
||||
|
||||
#[gpui::test]
|
||||
fn tab_brings_a_hidden_shot_into_view_and_reaches_extend(cx: &mut TestAppContext) {
|
||||
let (heard, cx) = long(cx);
|
||||
tab(4, cx);
|
||||
settle(cx);
|
||||
cx.simulate_click(point(px(250.0), px(50.0)), Modifiers::none());
|
||||
settle(cx);
|
||||
tab(1, cx);
|
||||
press("enter", cx);
|
||||
assert_eq!(*heard.borrow(), ["choose d", "extend"]);
|
||||
}
|
||||
|
||||
/// A voice with six tags in a list 280 wide.
|
||||
struct Tagged;
|
||||
|
||||
impl Render for Tagged {
|
||||
fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
|
||||
let voice = Voice {
|
||||
key: "iris".into(),
|
||||
name: "Iris".into(),
|
||||
about: "a voice".into(),
|
||||
tags: [
|
||||
"English",
|
||||
"American",
|
||||
"Female",
|
||||
"Adult",
|
||||
"Warm",
|
||||
"Narration",
|
||||
]
|
||||
.map(gpui::SharedString::from)
|
||||
.to_vec(),
|
||||
};
|
||||
div()
|
||||
.w(px(280.0))
|
||||
.child(TTSVoicePicker::new("voices", [voice]))
|
||||
}
|
||||
}
|
||||
|
||||
#[gpui::test]
|
||||
fn many_tags_wrap_inside_their_row(cx: &mut TestAppContext) {
|
||||
setup(cx);
|
||||
let (_, cx) = cx.add_window_view(|_, _| Tagged);
|
||||
settle(cx);
|
||||
let tags = cx.debug_bounds("voice-tags-iris").expect("the tags draw");
|
||||
assert!(tags.right() <= px(280.0), "{tags:?}");
|
||||
}
|
||||
+69
-25
@@ -2,8 +2,8 @@ use std::{rc::Rc, time::Duration};
|
||||
|
||||
use gpui::{
|
||||
App, ElementId, InteractiveElement, IntoElement, MouseButton, ParentElement, RenderOnce,
|
||||
SharedString, StatefulInteractiveElement, Styled, Window, div, prelude::*, relative,
|
||||
transparent_black,
|
||||
ScrollHandle, SharedString, StatefulInteractiveElement, Styled, Window, canvas, div,
|
||||
prelude::*, relative, transparent_black,
|
||||
};
|
||||
|
||||
use super::Outcome;
|
||||
@@ -12,7 +12,7 @@ use crate::{
|
||||
debug::ruler,
|
||||
documents::source,
|
||||
forms::{OnValue, Run},
|
||||
layout::on_axis,
|
||||
layout::{bring_into_view, on_axis},
|
||||
motion::Skeleton,
|
||||
primitives::{Icon, IconName, Image, tab_stop},
|
||||
theme::{ActiveTheme, ControlSize, IconSize, TextSize},
|
||||
@@ -97,6 +97,16 @@ impl RenderOnce for VideoGenerationTimeline {
|
||||
.is_none_or(|key| self.shots.iter().any(|shot| &shot.key == key));
|
||||
assert!(named, "the chosen shot is not listed");
|
||||
let pickable = self.on_select.is_some();
|
||||
let scroll = window
|
||||
.use_keyed_state((self.id.clone(), "scroll"), cx, |_, _| ScrollHandle::new())
|
||||
.read(cx)
|
||||
.clone();
|
||||
let revealed =
|
||||
window.use_keyed_state(
|
||||
(self.id.clone(), "revealed"),
|
||||
cx,
|
||||
|_, _| None::<SharedString>,
|
||||
);
|
||||
let focuses: Vec<_> = self
|
||||
.shots
|
||||
.iter()
|
||||
@@ -211,6 +221,36 @@ impl RenderOnce for VideoGenerationTimeline {
|
||||
} else {
|
||||
transparent_black()
|
||||
})
|
||||
.when(pick.is_some(), |tile| {
|
||||
let (focus, revealed, scroll, key) =
|
||||
(focus.clone(), revealed.clone(), scroll.clone(), key.clone());
|
||||
tile.child(
|
||||
canvas(
|
||||
move |bounds, window, cx| {
|
||||
let focused = focus.is_focused(window);
|
||||
let held = revealed.read(cx).as_ref() == Some(&key);
|
||||
if focused && !held {
|
||||
revealed.update(cx, |revealed, _| {
|
||||
*revealed = Some(key.clone())
|
||||
});
|
||||
if bring_into_view(&scroll, bounds) {
|
||||
log::info!(
|
||||
"video timeline: shot {key} scrolled into view"
|
||||
);
|
||||
window.request_animation_frame();
|
||||
}
|
||||
} else if !focused && held {
|
||||
revealed.update(cx, |revealed, _| *revealed = None);
|
||||
}
|
||||
},
|
||||
|_, _, _, _| {},
|
||||
)
|
||||
.absolute()
|
||||
.top_0()
|
||||
.left_0()
|
||||
.size_full(),
|
||||
)
|
||||
})
|
||||
.when_some(pick, |tile, pick| {
|
||||
tile.track_focus(&focus)
|
||||
.cursor_pointer()
|
||||
@@ -253,36 +293,40 @@ impl RenderOnce for VideoGenerationTimeline {
|
||||
.gap_2()
|
||||
.child(
|
||||
on_axis(div().id((self.id.clone(), "sideways")))
|
||||
.track_scroll(&scroll)
|
||||
.w_full()
|
||||
.flex()
|
||||
.overflow_x_scroll()
|
||||
.pb_1()
|
||||
.child(
|
||||
div()
|
||||
.relative()
|
||||
.flex_none()
|
||||
.flex()
|
||||
.items_end()
|
||||
.gap_3()
|
||||
.pb_1()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(ruler_row)
|
||||
.child(div().flex().children(tiles))
|
||||
.child(
|
||||
div()
|
||||
.relative()
|
||||
.flex_none()
|
||||
.flex()
|
||||
.flex_col()
|
||||
.gap_1()
|
||||
.child(ruler_row)
|
||||
.child(div().flex().children(tiles))
|
||||
.child(
|
||||
div()
|
||||
.absolute()
|
||||
.top_0()
|
||||
.bottom_0()
|
||||
.left(relative(playhead))
|
||||
.border_l_1()
|
||||
.border_color(colors.accent),
|
||||
),
|
||||
)
|
||||
.children(extend.map(|extend| div().flex_none().child(extend))),
|
||||
.absolute()
|
||||
.top_0()
|
||||
.bottom_0()
|
||||
.left(relative(playhead))
|
||||
.border_l_1()
|
||||
.border_color(colors.accent),
|
||||
),
|
||||
),
|
||||
)
|
||||
.children(caption.map(Caption::new))
|
||||
.when(caption.is_some() || extend.is_some(), |column| {
|
||||
column.child(
|
||||
div()
|
||||
.flex()
|
||||
.items_center()
|
||||
.gap_3()
|
||||
.child(div().flex_1().min_w_0().children(caption.map(Caption::new)))
|
||||
.children(extend.map(|extend| div().flex_none().child(extend))),
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -215,7 +215,9 @@ impl RenderOnce for TTSVoicePicker {
|
||||
)
|
||||
.child(
|
||||
div()
|
||||
.debug_selector(|| format!("voice-tags-{}", voice.key))
|
||||
.flex_none()
|
||||
.max_w_full()
|
||||
.flex()
|
||||
.flex_wrap()
|
||||
.gap_1()
|
||||
|
||||
Reference in new issue
Block a user