ZacharyZhang-NY/Ely-GPUI-Components
1
1 Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

T26c Media: video

Browse Source 
Scrubber shows what has loaded, what has played and its chapters, names
the time under the pointer, seeks by press and gpui's drag, and steps by
the slider's keys; over_media lights it for a dark layer. VideoPlayer
shows the host's frame in its shape with a caption and a control bar over
it: the scrubber, play, the time, speed, captions, picture in picture and
full screen, each only with its handler; the bar rests after a still
pointer while it plays, on one wake from the executor's timer. Keys:
Space and K, J and L, the arrows, C and F. VideoThumbnailStrip lays frames
along the length under a playhead with a trim whose handles drag and whose
ends I and O set. SubtitleEditor edits cues in place: times as mm:ss.mmm,
kept in order, a time that does not read kept out with the reason shown.

InlineEdit is a Tab stop with the ring; it hands focus back after Enter or
Escape and keeps its text on Enter's release. overlays::media_button is
shared by the lightbox and the player's bar.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
ZacharyZhang-NYandClaude Opus 5.5 committed 2026-09-26 17:07:26 -04:00
1 parent f7f20b5146
commit d0175edb7b
22 files changed
+2232 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/gallery/pages/media/mod.rs
+19
View File
@@ -1,5 +1,6 @@
mod edit;
mod images;
mod video;
use gpui::{AnyElement, App, IntoElement, ParentElement, Window, div};
@@ -53,6 +54,20 @@ const SCRIPT: &[Step] = &[
Step::UpAt("media-upload", 388.0, 307.0),
Step::Wait(300),
Step::Shot("emptied"),
Step::HoverAt("media-scrubber", 320.0, 31.0),
Step::Wait(200),
Step::Shot("scrub-tip"),
Step::DownAt("media-strip", 467.0, 25.0),
Step::DragTo("media-strip", 560.0, 25.0),
Step::UpAt("media-strip", 560.0, 25.0),
Step::Wait(200),
Step::Shot("trimmed"),
Step::DownAt("media-subtitles", 80.0, 142.0),
Step::UpAt("media-subtitles", 80.0, 142.0),
Step::Type("00:20.000"),
Step::Key("enter"),
Step::Wait(300),
Step::Shot("retimed"),
];
fn render(window: &mut Window, cx: &mut App) -> AnyElement {
@@ -62,5 +77,9 @@ fn render(window: &mut Window, cx: &mut App) -> AnyElement {
.child(edit::cropper(window, cx))
.child(edit::upload(window, cx))
.child(edit::annotator(window, cx))
.child(video::video(window, cx))
.child(video::scrubber(window, cx))
.child(video::strip(window, cx))
.child(video::subtitles(window, cx))
.into_any_element()
}
examples/gallery/pages/media/video.rs
+236
View File
@@ -0,0 +1,236 @@
use std::{path::Path, time::Duration};
use ely_gpui_component::media::{Cue, Scrubber, SubtitleEditor, VideoPlayer, VideoThumbnailStrip};
use gpui::{App, Entity, IntoElement, ParentElement, SharedString, Styled, Window, div, px};
use crate::{
probe::probe,
ui::{keep, section, set},
};
const FRAMES: [&str; 3] = [
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium.jpg"
),
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium-stair.jpg"
),
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium-olive.jpg"
),
];
const LENGTH: Duration = Duration::from_secs(90);
/// How often the demo's clock moves while it plays.
const TICK: Duration = Duration::from_millis(250);
/// The demo video: where it stands, how it plays, its trim and its captions.
#[derive(Clone)]
struct Playback {
at: Duration,
playing: bool,
ticking: bool,
speed: f32,
captions: bool,
trim: (Duration, Duration),
cues: Vec<Cue>,
}
fn cue(key: &str, start: u64, end: u64, text: &str) -> Cue {
Cue {
key: key.to_string().into(),
start: Duration::from_secs(start),
end: Duration::from_secs(end),
text: text.to_string().into(),
}
}
fn frame(at: Duration) -> &'static str {
FRAMES[(at.as_secs() / 30) as usize % FRAMES.len()]
}
/// Runs the demo's clock while it plays, one loop at a time.
fn tick(state: &Entity<Playback>, window: &mut Window, cx: &mut App) {
if state.update(cx, |now, _| std::mem::replace(&mut now.ticking, true)) {
return;
}
let state = state.clone();
window
.spawn(cx, async move |cx| {
loop {
cx.background_executor().timer(TICK).await;
let going = state.update(cx, |now, cx| {
let step = TICK.mul_f32(now.speed);
now.at = (now.at + step).min(LENGTH);
now.playing &= now.at < LENGTH;
now.ticking = now.playing;
cx.notify();
now.playing
})?;
if !going {
return anyhow::Ok(());
}
}
})
.detach_and_log_err(cx);
}
/// The one video every section shows.
fn state(window: &mut Window, cx: &mut App) -> Entity<Playback> {
keep(
"media-video",
|| Playback {
at: Duration::from_secs(34),
playing: false,
ticking: false,
speed: 1.0,
captions: true,
trim: (Duration::from_secs(12), Duration::from_secs(66)),
cues: vec![
cue("cue-1", 2, 9, "Morning comes in through the tall window."),
cue("cue-2", 31, 38, "Light falls on the stair."),
cue("cue-3", 61, 70, "The shadow walks the length of the hall."),
],
},
window,
cx,
)
}
pub fn video(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let state = state(window, cx);
let now = state.read(cx).clone();
let caption: Option<SharedString> = now
.cues
.iter()
.find(|cue| cue.start <= now.at && now.at < cue.end)
.map(|cue| cue.text.clone());
let (play, seek, speed, captions) =
(state.clone(), state.clone(), state.clone(), state.clone());
let player = VideoPlayer::new(
"media-player",
Some(Path::new(frame(now.at)).into()),
1.5,
LENGTH,
now.at,
)
.loaded(LENGTH.mul_f32(0.8))
.playing(now.playing)
.speed(now.speed)
.captions(now.captions, caption)
.on_play(move |on, window, cx| {
play.update(cx, |now, cx| {
now.playing = on;
cx.notify();
});
if on {
tick(&play, window, cx);
}
})
.on_seek(move |at, _, cx| {
seek.update(cx, |now, cx| {
now.at = at;
cx.notify();
})
})
.on_speed(move |to, _, cx| {
speed.update(cx, |now, cx| {
now.speed = to;
cx.notify();
})
})
.on_captions(move |on, _, cx| {
captions.update(cx, |now, cx| {
now.captions = on;
cx.notify();
})
})
.on_picture(|_, _| log::info!("gallery: picture in picture"))
.on_fullscreen(|window, _| window.toggle_fullscreen());
section(
"VideoPlayer",
"A video the host plays, a frame at a time. Its controls fade once the pointer rests while it plays. Space plays, J and L jump ten seconds, C turns captions, F fills the screen.",
cx,
)
.child(probe("media-player", div().w(px(640.)).child(player)))
}
pub fn scrubber(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let state = state(window, cx);
let at = state.read(cx).at;
let seek = state.clone();
section(
"VideoTimeline / Scrubber",
"Where a video stands: what has loaded, how far it has played, its chapters, and the time under the pointer. A press or a drag seeks; with focus the arrows step five seconds.",
cx,
)
.child(probe(
"media-scrubber",
div().w(px(640.)).pt_6().child(
Scrubber::new("media-scrubber", LENGTH, at)
.loaded(LENGTH.mul_f32(0.8))
.chapter(Duration::ZERO, "Morning")
.chapter(Duration::from_secs(30), "The stair")
.chapter(Duration::from_secs(60), "The hall")
.on_seek(move |at, _, cx| seek.update(cx, |now, cx| {
now.at = at;
cx.notify();
})),
),
))
}
pub fn strip(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let state = state(window, cx);
let now = state.read(cx).clone();
let (seek, cut) = (state.clone(), state.clone());
let frames = (0..8).map(|ix| Path::new(FRAMES[ix * 3 / 8]));
section(
"VideoThumbnailStrip",
"Frames along the video under its playhead, and the part kept between two handles. A press seeks; a handle trims; I and O set the ends at the playhead.",
cx,
)
.child(probe(
"media-strip",
div().w(px(640.)).child(
VideoThumbnailStrip::new("media-strip", frames, LENGTH, now.at)
.trim(now.trim.0, now.trim.1)
.on_seek(move |at, _, cx| seek.update(cx, |now, cx| {
now.at = at;
cx.notify();
}))
.on_trim(move |trim, _, cx| cut.update(cx, |now, cx| {
now.trim = trim;
cx.notify();
})),
),
))
}
pub fn subtitles(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let state = state(window, cx);
let now = state.read(cx).clone();
let (change, seek) = (state.clone(), state.clone());
section(
"SubtitleEditor",
"Captions to edit in place, their times as mm:ss.mmm over their words. The one under the playhead is lit; Add puts a new cue there.",
cx,
)
.child(probe(
"media-subtitles",
div().w(px(480.)).child(
SubtitleEditor::new("media-subtitles", now.cues, now.at)
.on_change(move |cues, _, cx| {
let mut next = change.read(cx).clone();
next.cues = cues.to_vec();
set(&change, next, cx)
})
.on_seek(move |at, _, cx| seek.update(cx, |now, cx| {
now.at = at;
cx.notify();
})),
),
))
}