diff --git a/src/components/Messages.css b/src/components/Messages.css index 00bd63e..46d63a4 100644 --- a/src/components/Messages.css +++ b/src/components/Messages.css @@ -16,7 +16,7 @@ .my-msg { padding: 6px; border-radius: 5px; - margin-bottom: 4px; + margin: 2px 0 2px 0; max-width: 70%; background: var(--ion-color-secondary-shade); color: #fff; @@ -25,12 +25,19 @@ .other-msg { padding: 6px; border-radius: 5px; - margin-bottom: 4px; + margin: 2px 0 2px 0; max-width: 70%; background: var(--ion-color-primary-shade); color: #fff; } +.system-msg { + margin: auto; + color: #999; + font-size: 13px; + padding: 4px; +} + .message-toolbar { padding-left: 5px; --background: var(--ion-color-light); diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx index eeee441..f4123eb 100644 --- a/src/components/Messages.tsx +++ b/src/components/Messages.tsx @@ -29,6 +29,7 @@ type Message = { createdAt: number; id: string; senderId: string; + type: string; }; const Messages: React.FC = ({ pane, ownerId, roomId, userId, userList, joinTime }) => { @@ -51,6 +52,7 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user createdAt: msg.createdAt, id: msg.senderId + msg.createdAt, senderId: msg.senderId, + type: 'chat', }); } }); @@ -80,6 +82,7 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user createdAt: req.createdAt, id: req.senderId + req.createdAt, senderId: req.senderId, + type: 'system', }); } } @@ -164,14 +167,24 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user .sort((msg1, msg2) => msg1.createdAt - msg2.createdAt) .map((msg) => { if (getName(msg.senderId) !== undefined) { - return ( - - - {getName(msg.senderId) !== '' ? {getName(msg.senderId)}: : <>} - {msg.content} - - - ); + if (msg.type === 'chat') { + return ( + + + {getName(msg.senderId) !== '' ? {getName(msg.senderId)}: : <>} + {msg.content} + + + ); + } else { + return ( + + + {getName(msg.senderId) + ' ' + msg.content} + + + ); + } } else { return <>; } @@ -181,7 +194,31 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user return ( <> - {userList.size === 0 ? Loading... : renderMessages()} + + {userList.size === 0 ? ( + Loading... + ) : ( + <> + + + {ownerId === userId ? ( + + Welcome to TurtleTV! You joined the room as the owner, so everyone else in the room will sync up + with your plays/pauses. + + ) : ( + + Welcome to TurtleTV! You joined the room as a member, so your plays/pauses will not affect anyone + else in the room. + + )} + + + + {renderMessages()} + + )} + @@ -191,6 +228,7 @@ const Messages: React.FC = ({ pane, ownerId, roomId, userId, user value={message} placeholder="Send message" enterkeyhint="send" + autocorrect="on" class="message-input" > diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index d408ef7..ae3c754 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -57,7 +57,7 @@ const Home: React.FC = () => { }); await db.collection('playlists').doc(roomId.id).set({ createdAt: timestamp, - url: 'https://www.youtube.com/watch?v=DGQwd1_dpuc', + url: 'https://www.youtube.com/watch?v=SMKPKGW083c', }); await db.collection('states').doc(roomId.id).set({ isPlaying: false,