diff --git a/TODO.md b/TODO.md index ebe4061..6b1ce5a 100644 --- a/TODO.md +++ b/TODO.md @@ -8,7 +8,4 @@ - Can we add a way to tell the user they are connecting to voice. Like show them its connecting so the user knows something is happening instead of them clicking on the voice stage again and again. -- Add photo / video albums like Commit https://commet.chat/ - -when i do filter image it has some other stuff like a .html file and a video file. In the search results but we shouldent show non images in the image filter. Videos should have its own filter and .html and other files should go under the file filter, but images should not go under the file filter. We should also show the video and file attachment like how we show it in the chat. - +- Add photo / video albums like Commit https://commet.chat/ \ No newline at end of file diff --git a/apps/electron/package.json b/apps/electron/package.json index 001e4a8..16e2729 100644 --- a/apps/electron/package.json +++ b/apps/electron/package.json @@ -1,7 +1,7 @@ { "name": "@discord-clone/electron", "private": true, - "version": "1.0.18", + "version": "1.0.19", "description": "Discord Clone - Electron app", "author": "Moyettes", "type": "module", diff --git a/packages/shared/package.json b/packages/shared/package.json index 51f8e8e..a72daca 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,7 +1,7 @@ { "name": "@discord-clone/shared", "private": true, - "version": "1.0.18", + "version": "1.0.19", "type": "module", "main": "src/App.jsx", "dependencies": { diff --git a/packages/shared/src/assets/icons/call.svg b/packages/shared/src/assets/icons/call.svg new file mode 100644 index 0000000..466d0c9 --- /dev/null +++ b/packages/shared/src/assets/icons/call.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/shared/src/assets/icons/index.js b/packages/shared/src/assets/icons/index.js index 7608eb0..4564fa2 100644 --- a/packages/shared/src/assets/icons/index.js +++ b/packages/shared/src/assets/icons/index.js @@ -28,6 +28,7 @@ import FriendsIcon from './friends.svg'; import SharingIcon from './sharing.svg'; import PersonalMuteIcon from './personal_mute.svg'; import ServerMuteIcon from './server_mute.svg'; +import CallIcon from './call.svg'; export { AddIcon, @@ -59,7 +60,8 @@ export { FriendsIcon, SharingIcon, PersonalMuteIcon, - ServerMuteIcon + ServerMuteIcon, + CallIcon }; export const Icons = { @@ -92,5 +94,6 @@ export const Icons = { Friends: FriendsIcon, Sharing: SharingIcon, PersonalMute: PersonalMuteIcon, - ServerMute: ServerMuteIcon + ServerMute: ServerMuteIcon, + Call: CallIcon }; diff --git a/packages/shared/src/assets/icons/memebers.svg b/packages/shared/src/assets/icons/memebers.svg new file mode 100644 index 0000000..626fa96 --- /dev/null +++ b/packages/shared/src/assets/icons/memebers.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/shared/src/components/ChatHeader.jsx b/packages/shared/src/components/ChatHeader.jsx index d026eb7..bfd67aa 100644 --- a/packages/shared/src/components/ChatHeader.jsx +++ b/packages/shared/src/components/ChatHeader.jsx @@ -11,6 +11,8 @@ const ChatHeader = ({ serverName, isMobile, onMobileBack, + onStartCall, + isDMCallActive, // Search props searchQuery, onSearchQueryChange, @@ -63,10 +65,23 @@ const ChatHeader = ({ )} + {isDM && !isMobile && ( + + + + )} @@ -76,9 +91,8 @@ const ChatHeader = ({ className={`chat-header-btn ${showMembers ? 'active' : ''}`} onClick={onToggleMembers} > - - - + + diff --git a/packages/shared/src/components/DMList.jsx b/packages/shared/src/components/DMList.jsx index 381cebd..e1130e2 100644 --- a/packages/shared/src/components/DMList.jsx +++ b/packages/shared/src/components/DMList.jsx @@ -33,7 +33,7 @@ const getUserColor = (username) => { return colors[Math.abs(hash) % colors.length]; }; -const DMList = ({ dmChannels, activeDMChannel, onSelectDM, onOpenDM }) => { +const DMList = ({ dmChannels, activeDMChannel, onSelectDM, onOpenDM, voiceStates }) => { const [showUserPicker, setShowUserPicker] = useState(false); const [allUsers, setAllUsers] = useState([]); const [searchQuery, setSearchQuery] = useState(''); @@ -217,6 +217,11 @@ const DMList = ({ dmChannels, activeDMChannel, onSelectDM, onOpenDM }) => {
{dm.other_username}
+ {voiceStates && voiceStates[dm.channel_id]?.length > 0 && ( +
+ In Call +
+ )}
handleCloseDM(e, dm)}> diff --git a/packages/shared/src/components/MessageItem.jsx b/packages/shared/src/components/MessageItem.jsx index f003292..26ab9bd 100644 --- a/packages/shared/src/components/MessageItem.jsx +++ b/packages/shared/src/components/MessageItem.jsx @@ -214,18 +214,10 @@ const MessageItem = React.memo(({ const currentDate = new Date(msg.created_at); const userColor = getUserColor(msg.username || 'Unknown'); + const systemMsg = parseSystemMessage(msg.content); + const renderMessageContent = () => { - const systemMsg = parseSystemMessage(msg.content); - if (systemMsg) { - return ( -
- - - - {systemMsg.text || 'System event'} -
- ); - } + if (systemMsg) return null; const attachmentMetadata = parseAttachment(msg.content); if (attachmentMetadata) { @@ -279,6 +271,20 @@ const MessageItem = React.memo(({
)} {showDateDivider &&
{dateLabel}
} + {systemMsg ? ( +
+ + + + + + {systemMsg.text || 'System event'} + + + {currentDate.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })} + +
+ ) : (
+ )} ); }, (prevProps, nextProps) => { diff --git a/packages/shared/src/components/Sidebar.jsx b/packages/shared/src/components/Sidebar.jsx index 341b49c..4d06260 100644 --- a/packages/shared/src/components/Sidebar.jsx +++ b/packages/shared/src/components/Sidebar.jsx @@ -1045,6 +1045,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam activeDMChannel={activeDMChannel} onSelectDM={(dm) => setActiveDMChannel(dm === 'friends' ? null : dm)} onOpenDM={onOpenDM} + voiceStates={voiceStates} /> ); @@ -1605,7 +1606,7 @@ const Sidebar = ({ channels, categories, activeChannel, onSelectChannel, usernam -
{voiceChannelName} / {serverName}
+
{dmChannels?.some(dm => dm.channel_id === voiceChannelId) ? `Call with ${voiceChannelName}` : `${voiceChannelName} / ${serverName}`}
+
+ )} + {isInDMCall && ( +
+ + + {!dmCallExpanded &&
} +
+ )} + {(!isInDMCall || !dmCallExpanded) && ( +
+ {}} + onOpenDM={openDM} + showPinned={showPinned} + onTogglePinned={() => setShowPinned(false)} + /> + +
+ )}
);