diff --git a/src/actions/actionNavigate.tsx b/src/actions/actionNavigate.tsx index 6a13ef3a..bdf6865d 100644 --- a/src/actions/actionNavigate.tsx +++ b/src/actions/actionNavigate.tsx @@ -50,7 +50,7 @@ export const actionGoToCollaborator = register({ border={stroke} onClick={() => updateData(collaborator.pointer)} name={collaborator.username || ""} - src={collaborator.src} + src={collaborator.avatarUrl} /> ); }, diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx index 9b2c8b71..9af4dab5 100644 --- a/src/components/Avatar.tsx +++ b/src/components/Avatar.tsx @@ -1,6 +1,6 @@ import "./Avatar.scss"; -import React from "react"; +import React, { useState } from "react"; import { getClientInitials } from "../clients"; type AvatarProps = { @@ -13,13 +13,21 @@ type AvatarProps = { export const Avatar = ({ color, border, onClick, name, src }: AvatarProps) => { const shortName = getClientInitials(name); - const style = src + const [error, setError] = useState(false); + const loadImg = !error && src; + const style = loadImg ? undefined : { background: color, border: `1px solid ${border}` }; return (
- {src ? ( - {shortName} + {loadImg ? ( + {shortName} setError(true)} + /> ) : ( shortName )} diff --git a/src/packages/excalidraw/CHANGELOG.md b/src/packages/excalidraw/CHANGELOG.md index fe6ceeab..e3ca421f 100644 --- a/src/packages/excalidraw/CHANGELOG.md +++ b/src/packages/excalidraw/CHANGELOG.md @@ -25,7 +25,7 @@ Please add the latest change on the top under the correct section. - Exported [`loadSceneOrLibraryFromBlob`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#loadSceneOrLibraryFromBlob) function [#5057](https://github.com/excalidraw/excalidraw/pull/5057). - Export [`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L92) supported by Excalidraw [#5135](https://github.com/excalidraw/excalidraw/pull/5135). -- Support [`src`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `src` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114). +- Support [`avatarUrl`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L50) for collaborators. Now onwards host can pass `avatarUrl` to render the customized avatar for collaborators [#5114](https://github.com/excalidraw/excalidraw/pull/5114), renamed in [#5177](https://github.com/excalidraw/excalidraw/pull/5177). - Support `libraryItems` argument in `initialData.libraryItems` and `updateScene({ libraryItems })` to be a Promise resolving to `LibraryItems`, and support functional update of `libraryItems` in [`updateScene({ libraryItems })`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#updateScene). [#5101](https://github.com/excalidraw/excalidraw/pull/5101). - Expose util [`mergeLibraryItems`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#mergeLibraryItems) [#5101](https://github.com/excalidraw/excalidraw/pull/5101). - Expose util [`exportToClipboard`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#exportToClipboard) which allows to copy the scene contents to clipboard as `svg`, `png` or `json` [#5103](https://github.com/excalidraw/excalidraw/pull/5103). diff --git a/src/packages/excalidraw/example/App.js b/src/packages/excalidraw/example/App.js index 31272a4c..ed74bff6 100644 --- a/src/packages/excalidraw/example/App.js +++ b/src/packages/excalidraw/example/App.js @@ -487,15 +487,19 @@ export default function App() { const collaborators = new Map(); collaborators.set("id1", { username: "Doremon", - src: "doremon.png", + avatarUrl: "doremon.png", }); collaborators.set("id2", { username: "Excalibot", - src: "https://avatars.githubusercontent.com/excalibot", + avatarUrl: "excalibot.png", }); collaborators.set("id3", { username: "Pika", - src: "pika.jpeg", + avatarUrl: "pika.jpeg", + }); + collaborators.set("id4", { + username: "fallback", + avatarUrl: "https://example.com", }); excalidrawRef.current.updateScene({ collaborators }); } else { diff --git a/src/packages/excalidraw/example/public/excalibot.png b/src/packages/excalidraw/example/public/excalibot.png new file mode 100644 index 00000000..7928ec32 Binary files /dev/null and b/src/packages/excalidraw/example/public/excalibot.png differ diff --git a/src/types.ts b/src/types.ts index 663134d5..1ece60e9 100644 --- a/src/types.ts +++ b/src/types.ts @@ -47,7 +47,7 @@ export type Collaborator = { }; // The url of the collaborator's avatar, defaults to username intials // if not present - src?: string; + avatarUrl?: string; }; export type DataURL = string & { _brand: "DataURL" };