Yehowshua/ZIm
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Indicate collaborators' presence (grayscale), speaking and muted status

Browse source
This commit is contained in:
Max Brunsfeld 2023-12-07 14:18:34 -08:00
parent 04d019ef66
commit d1b47b4059
3 changed files with 131 additions and 108 deletions
Download patch file Download diff file Expand all files Collapse all files

165
crates/collab_ui2/src/collab_titlebar_item.rs
View file

@ -1,15 +1,14 @@
use crate::face_pile::FacePile; use crate::face_pile::FacePile;
use call::{ActiveCall, Room}; use call::{ActiveCall, ParticipantLocation, Room};
use client::{proto::PeerId, Client, ParticipantIndex, User, UserStore}; use client::{proto::PeerId, Client, ParticipantIndex, User, UserStore};
use gpui::{ use gpui::{
actions, canvas, div, point, px, rems, AppContext, Div, Element, InteractiveElement, actions, canvas, div, point, px, rems, AppContext, Div, Element, Hsla, InteractiveElement,
IntoElement, Model, ParentElement, Path, Render, RenderOnce, Stateful, IntoElement, Model, ParentElement, Path, Render, Stateful, StatefulInteractiveElement, Styled,
StatefulInteractiveElement, Styled, Subscription, ViewContext, VisualContext, WeakView, Subscription, ViewContext, VisualContext, WeakView, WindowBounds,
WindowBounds,
}; };
use project::{Project, RepositoryEntry}; use project::{Project, RepositoryEntry};
use std::sync::Arc; use std::sync::Arc;
use theme::ActiveTheme; use theme::{ActiveTheme, PlayerColors};
use ui::{ use ui::{
h_stack, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon, h_stack, popover_menu, prelude::*, Avatar, Button, ButtonLike, ButtonStyle, ContextMenu, Icon,
IconButton, IconElement, KeyBinding, Tooltip, IconButton, IconElement, KeyBinding, Tooltip,
@ -43,11 +42,8 @@ pub fn init(cx: &mut AppContext) {
pub struct CollabTitlebarItem { pub struct CollabTitlebarItem {
project: Model<Project>, project: Model<Project>,
#[allow(unused)] // todo!()
user_store: Model<UserStore>, user_store: Model<UserStore>,
#[allow(unused)] // todo!()
client: Arc<Client>, client: Arc<Client>,
#[allow(unused)] // todo!()
workspace: WeakView<Workspace>, workspace: WeakView<Workspace>,
//branch_popover: Option<ViewHandle<BranchList>>, //branch_popover: Option<ViewHandle<BranchList>>,
//project_popover: Option<ViewHandle<recent_projects::RecentProjects>>, //project_popover: Option<ViewHandle<recent_projects::RecentProjects>>,
@ -92,62 +88,64 @@ impl Render for CollabTitlebarItem {
.child(self.render_project_name(cx)) .child(self.render_project_name(cx))
.children(self.render_project_branch(cx)) .children(self.render_project_branch(cx))
.when_some( .when_some(
current_user.clone().zip(room.clone()).zip(project_id), current_user
|this, ((current_user, room), project_id)| { .clone()
let remote_participants = room .zip(client.peer_id())
.read(cx) .zip(room.clone())
.remote_participants() .zip(project_id),
.values() |this, (((current_user, peer_id), room), project_id)| {
.map(|participant| { let player_colors = cx.theme().players();
( let room = room.read(cx);
participant.user.clone(), let mut remote_participants =
participant.participant_index, room.remote_participants().values().collect::<Vec<_>>();
participant.peer_id, remote_participants.sort_by_key(|p| p.participant_index.0);
)
})
.collect::<Vec<_>>();
this.children( this.children(self.render_collaborator(
self.render_collaborator( &current_user,
&current_user, peer_id,
client.peer_id().expect("todo!()"), ParticipantLocation::SharedProject { project_id },
&room, room.is_speaking(),
project_id, room.is_muted(cx),
&remote_participants, &room,
cx, project_id,
) &current_user,
.map(|pile| pile.render(cx)), ))
)
.children( .children(
remote_participants.iter().filter_map( remote_participants.iter().filter_map(|collaborator| {
|(user, participant_index, peer_id)| { // collaborator.is_
let peer_id = *peer_id;
let face_pile = self let face_pile = self.render_collaborator(
.render_collaborator( &collaborator.user,
user, collaborator.peer_id,
peer_id, collaborator.location.clone(),
&room, collaborator.speaking,
project_id, collaborator.muted,
&remote_participants, &room,
cx, project_id,
)? &current_user,
.render(cx); )?;
Some(
v_stack() Some(
.id(("collaborator", user.id)) v_stack()
.child(face_pile) .id(("collaborator", collaborator.user.id))
.child(render_color_ribbon(*participant_index, cx)) .child(face_pile)
.cursor_pointer() .child(render_color_ribbon(
.on_click(cx.listener(move |this, _, cx| { collaborator.participant_index,
player_colors,
))
.cursor_pointer()
.on_click({
let peer_id = collaborator.peer_id;
cx.listener(move |this, _, cx| {
this.workspace this.workspace
.update(cx, |workspace, cx| { .update(cx, |workspace, cx| {
workspace.follow(peer_id, cx); workspace.follow(peer_id, cx);
}) })
.ok(); .ok();
})), })
) }),
}, )
), }),
) )
}, },
), ),
@ -280,15 +278,8 @@ impl Render for CollabTitlebarItem {
} }
} }
fn render_color_ribbon( fn render_color_ribbon(participant_index: ParticipantIndex, colors: &PlayerColors) -> gpui::Canvas {
participant_index: ParticipantIndex, let color = colors.color_for_participant(participant_index.0).cursor;
cx: &mut WindowContext,
) -> gpui::Canvas {
let color = cx
.theme()
.players()
.color_for_participant(participant_index.0)
.cursor;
canvas(move |bounds, cx| { canvas(move |bounds, cx| {
let mut path = Path::new(bounds.lower_left()); let mut path = Path::new(bounds.lower_left());
let height = bounds.size.height; let height = bounds.size.height;
@ -417,25 +408,45 @@ impl CollabTitlebarItem {
&self, &self,
user: &Arc<User>, user: &Arc<User>,
peer_id: PeerId, peer_id: PeerId,
room: &Model<Room>, location: ParticipantLocation,
is_speaking: bool,
is_muted: bool,
room: &Room,
project_id: u64, project_id: u64,
collaborators: &[(Arc<User>, ParticipantIndex, PeerId)], current_user: &Arc<User>,
cx: &mut WindowContext,
) -> Option<FacePile> { ) -> Option<FacePile> {
let room = room.read(cx);
let followers = room.followers_for(peer_id, project_id); let followers = room.followers_for(peer_id, project_id);
let mut pile = FacePile::default(); let mut pile = FacePile::default();
pile.extend( pile.extend(
user.avatar user.avatar
.clone() .clone()
.map(|avatar| div().child(Avatar::data(avatar.clone())).into_any_element()) .map(|avatar| {
div()
.child(
Avatar::data(avatar.clone())
.grayscale(
location != ParticipantLocation::SharedProject { project_id },
)
.border_color(if is_speaking {
gpui::blue()
} else if is_muted {
gpui::red()
} else {
Hsla::default()
}),
)
.into_any_element()
})
.into_iter() .into_iter()
.chain(followers.iter().filter_map(|follower_peer_id| { .chain(followers.iter().filter_map(|follower_peer_id| {
let follower = collaborators let follower = room
.iter() .remote_participants()
.find(|(_, _, peer_id)| *peer_id == *follower_peer_id)? .values()
.0 .find_map(|p| (p.peer_id == *follower_peer_id).then_some(&p.user))
.or_else(|| {
(self.client.peer_id() == Some(*follower_peer_id))
.then_some(current_user)
})?
.clone(); .clone();
follower follower
.avatar .avatar

5
crates/collab_ui2/src/face_pile.rs
View file

@ -1,8 +1,9 @@
use gpui::{ use gpui::{
div, AnyElement, Div, IntoElement as _, ParentElement as _, RenderOnce, Styled, WindowContext, div, AnyElement, Div, ElementId, IntoElement, ParentElement as _, RenderOnce, Styled,
WindowContext,
}; };
#[derive(Default)] #[derive(Default, IntoElement)]
pub struct FacePile { pub struct FacePile {
pub faces: Vec<AnyElement>, pub faces: Vec<AnyElement>,
} }

69
crates/ui2/src/components/avatar.rs
View file

@ -1,7 +1,6 @@
use std::sync::Arc;
use crate::prelude::*; use crate::prelude::*;
use gpui::{img, rems, Div, ImageData, ImageSource, IntoElement, Styled}; use gpui::{img, Div, Hsla, ImageData, ImageSource, Img, IntoElement, Styled};
use std::sync::Arc;
#[derive(Debug, Default, PartialEq, Clone)] #[derive(Debug, Default, PartialEq, Clone)]
pub enum Shape { pub enum Shape {
@ -12,35 +11,39 @@ pub enum Shape {
#[derive(IntoElement)] #[derive(IntoElement)]
pub struct Avatar { pub struct Avatar {
src: ImageSource, image: Img,
border_color: Option<Hsla>,
is_available: Option<bool>, is_available: Option<bool>,
shape: Shape,
} }
impl RenderOnce for Avatar { impl RenderOnce for Avatar {
type Rendered = Div; type Rendered = Div;
fn render(self, cx: &mut WindowContext) -> Self::Rendered { fn render(mut self, cx: &mut WindowContext) -> Self::Rendered {
let mut img = img(self.src); if self.image.style().corner_radii.top_left.is_none() {
self = self.shape(Shape::Circle);
if self.shape == Shape::Circle {
img = img.rounded_full();
} else {
img = img.rounded_md();
} }
let size = rems(1.0); let size = cx.rem_size();
div() div()
.size(size) .size(size + px(2.))
.map(|mut div| {
div.style().corner_radii = self.image.style().corner_radii.clone();
div
})
.when_some(self.border_color, |this, color| {
this.border().border_color(color)
})
.child( .child(
img.size(size) self.image
.size(size)
// todo!(Pull the avatar fallback background from the theme.) // todo!(Pull the avatar fallback background from the theme.)
.bg(gpui::red()), .bg(gpui::red()),
) )
.children(self.is_available.map(|is_free| { .children(self.is_available.map(|is_free| {
// HACK: non-integer sizes result in oval indicators. // HACK: non-integer sizes result in oval indicators.
let indicator_size = (size.0 * cx.rem_size() * 0.4).round(); let indicator_size = (size * 0.4).round();
div() div()
.absolute() .absolute()
@ -56,31 +59,39 @@ impl RenderOnce for Avatar {
impl Avatar { impl Avatar {
pub fn uri(src: impl Into<SharedString>) -> Self { pub fn uri(src: impl Into<SharedString>) -> Self {
Self { Self::source(src.into().into())
src: src.into().into(),
shape: Shape::Circle,
is_available: None,
}
} }
pub fn data(src: Arc<ImageData>) -> Self { pub fn data(src: Arc<ImageData>) -> Self {
Self { Self::source(src.into())
src: src.into(),
shape: Shape::Circle,
is_available: None,
}
} }
pub fn source(src: ImageSource) -> Self { pub fn source(src: ImageSource) -> Self {
Self { Self {
src, image: img(src),
shape: Shape::Circle,
is_available: None, is_available: None,
border_color: None,
} }
} }
pub fn shape(mut self, shape: Shape) -> Self { pub fn shape(mut self, shape: Shape) -> Self {
self.shape = shape; self.image = match shape {
Shape::Circle => self.image.rounded_full(),
Shape::RoundedRectangle => self.image.rounded_md(),
};
self self
} }
pub fn grayscale(mut self, grayscale: bool) -> Self {
self.image = self.image.grayscale(grayscale);
self
}
pub fn border_color(mut self, color: impl Into<Hsla>) -> Self {
self.border_color = Some(color.into());
self
}
pub fn availability_indicator(mut self, is_available: impl Into<Option<bool>>) -> Self { pub fn availability_indicator(mut self, is_available: impl Into<Option<bool>>) -> Self {
self.is_available = is_available.into(); self.is_available = is_available.into();
self self