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

T44d Web · Gallery builds for wasm32: one story per section by URL, themed by the host

Browse Source 
The gallery's entry runs natively or, on wasm32, from a wasm_bindgen start
through gpui_web, single-threaded with WebGL2 fallback. ?page, ?story and
?theme choose what shows; an unknown one fails in the page and the log.
set_theme switches the mode later. Pictures load from ELY_GALLERY_ASSETS.
scripts/stories.py writes examples/gallery/stories.json from the pages.
This commit is contained in:
ZacharyZhang-NY committed 2026-09-29 19:16:41 -04:00
1 parent 29f1c8f467
commit 09dd3fc2cb
83 files changed
+1000 -455
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

examples/gallery/pages/media/audio.rs
+4 -7
View File
@@ -1,4 +1,4 @@
use std::{path::Path, time::Duration};
use std::time::Duration;
use ely_gpui_component::media::{
AudioPlayer, AudioSpectrum, AudioWaveform, MediaControls, PlaybackSpeedControl, Playlist,
@@ -10,13 +10,10 @@ use gpui::{
use crate::{
probe::probe,
ui::{change, keep, noise, section},
ui::{change, keep, noise, picture, section},
};
const COVER: &str = concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/dunes-square.jpg"
);
const COVER: &str = asset!("dunes-square.jpg");
/// How often the demo's clock moves while a song plays.
const TICK: Duration = Duration::from_millis(100);
const SONGS: [(&str, &str, &str, u64); 5] = [
@@ -181,7 +178,7 @@ pub fn player(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
let (title, artist) = (SONGS[now.song].1, SONGS[now.song].2);
let seek = state.clone();
let player = AudioPlayer::new("media-audio", title, artist, now.length(), now.at)
.artwork(Path::new(COVER))
.artwork(picture(COVER))
.controls(controls("media-audio-transport", &state, &now))
.volume(volume("media-audio-volume", &state, &now))
.on_seek(move |at, _, cx| change(&seek, cx, |now| now.at = at));
examples/gallery/pages/media/devices.rs
+4 -7
View File
@@ -1,4 +1,4 @@
use std::{path::Path, sync::Arc};
use std::sync::Arc;
use ely_gpui_component::{
media::{
@@ -15,13 +15,10 @@ use gpui::{
use super::sculpt;
use crate::{
probe::probe,
ui::{change, keep, section},
ui::{change, keep, picture, section},
};
const OLIVE: &str = concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium-olive.jpg"
);
const OLIVE: &str = asset!("atrium-olive.jpg");
/// The model's frame, in pixels: twice the viewer's points.
const FRAME: (u32, u32) = (960, 640);
@@ -105,7 +102,7 @@ pub fn camera(cx: &mut App) -> impl IntoElement + use<> {
.child(
div().w(px(300.)).child(
CameraPreview::new("media-camera-on", 1.5)
.frame(Path::new(OLIVE))
.frame(picture(OLIVE))
.name("Studio camera"),
),
)
examples/gallery/pages/media/edit.rs
+7 -16
View File
@@ -1,4 +1,4 @@
use std::path::{Path, PathBuf};
use std::path::PathBuf;
use ely_gpui_component::{
buttons::SegmentedControl,
@@ -9,21 +9,12 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p
use crate::{
probe::probe,
ui::{keep, section, set},
ui::{keep, picture, section, set},
};
const ATRIUM: &str = concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium.jpg"
);
const STAIR: &str = concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium-stair.jpg"
);
const DUNES: &str = concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/dunes.jpg"
);
const ATRIUM: &str = asset!("atrium.jpg");
const STAIR: &str = asset!("atrium-stair.jpg");
const DUNES: &str = asset!("dunes.jpg");
/// Crop shapes to pick from, width over height; none is free.
const ASPECTS: [(&str, Option<f32>); 4] = [
@@ -89,7 +80,7 @@ pub fn cropper(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
.child(probe(
"media-cropper",
div().w(px(560.)).child(
ImageCropper::new("media-cropper", Path::new(ATRIUM), 1.5, crop)
ImageCropper::new("media-cropper", picture(ATRIUM), 1.5, crop)
.aspect(aspect)
.on_change(move |crop, _, cx| {
let shape = moved.read(cx).1;
@@ -165,7 +156,7 @@ pub fn annotator(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
.child(probe(
"media-annotator",
div().w(px(560.)).child(
ImageAnnotator::new("media-annotator", Path::new(STAIR), 1.5, marks)
ImageAnnotator::new("media-annotator", picture(STAIR), 1.5, marks)
.on_change(move |marks, _, cx| set(&changed, marks.to_vec(), cx)),
),
))
examples/gallery/pages/media/images.rs
+9 -46
View File
@@ -1,5 +1,3 @@
use std::path::{Path, PathBuf};
use ely_gpui_component::{
media::{ImageThumbnail, ImageViewer},
overlays::{Lightbox, Slide},
@@ -8,56 +6,21 @@ use gpui::{App, IntoElement, ParentElement, SharedString, Styled, Window, div, p
use crate::{
probe::probe,
ui::{keep, row, section, set},
ui::{keep, picture, resource, row, section, set},
};
/// The gallery's pictures: a file, its width over height, a caption, and a corner label.
const PICTURES: [(&str, f32, &str, &str); 5] = [
(asset!("atrium.jpg"), 1.5, "An atrium, noon", ""),
(asset!("dunes.jpg"), 1.5, "Dunes at first light", ""),
(
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium.jpg"
),
1.5,
"An atrium, noon",
"",
),
(
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/dunes.jpg"
),
1.5,
"Dunes at first light",
"",
),
(
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/atrium-olive.jpg"
),
asset!("atrium-olive.jpg"),
1.5,
"An olive tree by the stair",
"HDR",
),
(
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/dunes-grass.jpg"
),
1.5,
"Grass on the ridge",
"",
),
(
concat!(
env!("CARGO_MANIFEST_DIR"),
"/examples/gallery/assets/dunes-square.jpg"
),
1.0,
"The long shadow",
"+2",
),
(asset!("dunes-grass.jpg"), 1.5, "Grass on the ridge", ""),
(asset!("dunes-square.jpg"), 1.0, "The long shadow", "+2"),
];
pub fn viewer(cx: &mut App) -> impl IntoElement + use<> {
@@ -68,7 +31,7 @@ pub fn viewer(cx: &mut App) -> impl IntoElement + use<> {
)
.child(probe(
"media-viewer",
div().w(px(640.)).h(px(440.)).child(ImageViewer::new("media-viewer", PathBuf::from(PICTURES[0].0))),
div().w(px(640.)).h(px(440.)).child(ImageViewer::new("media-viewer", resource(PICTURES[0].0))),
))
}
@@ -83,7 +46,7 @@ pub fn thumbnails(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
let (open, mark) = (shown.clone(), opened.clone());
let thumb = ImageThumbnail::new(
SharedString::from(format!("media-thumb-{ix}")),
Path::new(*path),
picture(*path),
*ratio,
)
.selected(ix == last)
@@ -102,7 +65,7 @@ pub fn thumbnails(window: &mut Window, cx: &mut App) -> impl IntoElement + use<>
let (step, close) = (shown.clone(), shown.clone());
Lightbox::new(
"media-lightbox",
PICTURES.map(|(path, _, caption, _)| Slide::new(Path::new(path), caption)),
PICTURES.map(|(path, _, caption, _)| Slide::new(picture(path), caption)),
at,
move |_, cx| set(&close, None, cx),
)
examples/gallery/pages/media/mod.rs
+1 -1
View File
@@ -8,7 +8,7 @@ mod video;
use gpui::{AnyElement, App, IntoElement, ParentElement, Window, div};
use super::Page;
use crate::script::Step;
use crate::step::Step;
pub const PAGE: Page = Page {
number: 26,
examples/gallery/pages/media/video.rs
+7 -16
View File
@@ -1,4 +1,4 @@
use std::{path::Path, time::Duration};
use std::time::Duration;
use ely_gpui_component::media::{Cue, Scrubber, SubtitleEditor, VideoPlayer, VideoThumbnailStrip};
use gpui::{
@@ -7,22 +7,13 @@ use gpui::{
use crate::{
probe::probe,
ui::{keep, section, set},
ui::{keep, picture, 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"
),
asset!("atrium.jpg"),
asset!("atrium-stair.jpg"),
asset!("atrium-olive.jpg"),
];
const LENGTH: Duration = Duration::from_secs(90);
/// How often the demo's clock moves while it plays.
@@ -115,7 +106,7 @@ pub fn video(window: &mut Window, cx: &mut App) -> impl IntoElement + use<> {
(state.clone(), state.clone(), state.clone(), state.clone());
let player = VideoPlayer::new(
"media-player",
Some(Path::new(frame(now.at)).into()),
Some(picture(frame(now.at))),
1.5,
LENGTH,
now.at,
@@ -190,7 +181,7 @@ 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]));
let frames = (0..8).map(|ix| picture(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.",