fix #160

howardchung · May 29, 2021 · 41bff51 · 41bff51
1 parent bcbc4ed
commit 41bff51
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 7 deletions.
diff --git a/server/room.ts b/server/room.ts
@@ -126,6 +126,7 @@ export class Room {
       socket.on('CMD:seek', (data) => this.seekVideo(socket, data));
       socket.on('CMD:ts', (data) => this.setTimestamp(socket, data));
       socket.on('CMD:chat', (data) => this.sendChatMessage(socket, data));
+      socket.on('CMD:clearchat', (data) => this.clearChat(socket, data));
       socket.on('CMD:joinVideo', () => this.joinVideo(socket));
       socket.on('CMD:leaveVideo', () => this.leaveVideo(socket));
       socket.on('CMD:joinScreenShare', (data) =>
@@ -471,16 +472,33 @@ export class Room {
     if (data && data.length > 10000) {
       return;
     }
-    if (config.NODE_ENV === 'development' && data === '/clear') {
-      this.chat.length = 0;
-      this.io.of(this.roomId).emit('chatinit', this.chat);
-      return;
-    }
     redisCount('chatMessages');
     const chatMsg = { id: socket.id, msg: data };
     this.addChatMessage(socket, chatMsg);
   };
 
+  private clearChat = async (
+    socket: Socket,
+    data: { uid: string; token: string }
+  ) => {
+    const decoded = await validateUserToken(
+      data?.uid as string,
+      data?.token as string
+    );
+    if (!decoded) {
+      socket.emit('errorMessage', 'Failed to authenticate user');
+      return;
+    }
+    const isOwner = await this.validateOwner(decoded.uid);
+    if (!isOwner) {
+      socket.emit('errorMessage', 'Not current room owner');
+      return;
+    }
+    this.chat.length = 0;
+    this.io.of(this.roomId).emit('chatinit', this.chat);
+    return;
+  };
+
   private joinVideo = (socket: Socket) => {
     const match = this.roster.find((user) => user.id === socket.id);
     if (match) {

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1309,6 +1309,12 @@ export default class App extends React.Component<AppProps, AppState> {
 
   setIsChatDisabled = (val: boolean) => this.setState({ isChatDisabled: val });
 
+  clearChat = async () => {
+    const uid = this.props.user?.uid;
+    const token = await this.props.user?.getIdToken();
+    this.socket.emit('CMD:clearchat', { uid, token });
+  };
+
   getLeaderTime = () => {
     return calculateMedian(Object.values(this.state.tsMap));
   };
@@ -1453,6 +1459,7 @@ export default class App extends React.Component<AppProps, AppState> {
           roomLink={this.state.roomLink}
           password={this.state.password}
           setPassword={this.setPassword}
+          clearChat={this.clearChat}
         />
       </Grid.Column>
     );

diff --git a/src/components/Settings/SettingsTab.tsx b/src/components/Settings/SettingsTab.tsx
@@ -32,6 +32,7 @@ interface SettingsTabProps {
   setPassword: Function;
   isChatDisabled: boolean;
   setIsChatDisabled: Function;
+  clearChat: Function;
 }
 
 export const SettingsTab = ({
@@ -49,6 +50,7 @@ export const SettingsTab = ({
   setPassword,
   isChatDisabled,
   setIsChatDisabled,
+  clearChat,
 }: SettingsTabProps) => {
   const [updateTS, setUpdateTS] = useState(0);
   const [permModalOpen, setPermModalOpen] = useState(false);
@@ -103,7 +105,14 @@ export const SettingsTab = ({
     !Boolean(user) || Boolean(owner && owner !== user?.uid);
 
   return (
-    <div style={{ display: hide ? 'none' : 'block', color: 'white' }}>
+    <div
+      style={{
+        display: hide ? 'none' : 'block',
+        color: 'white',
+        overflow: 'scroll',
+        padding: '8px',
+      }}
+    >
       {permModalOpen && (
         <PermanentRoomModal
           closeModal={() => setPermModalOpen(false)}
@@ -170,6 +179,25 @@ export const SettingsTab = ({
           onChange={(_e, data) => setIsChatDisabled(Boolean(data.checked))}
         />
       )}
+      {owner && owner === user?.uid && (
+        <SettingRow
+          icon={'i delete'}
+          name={`Clear Chat`}
+          description="Delete all existing chat messages"
+          disabled={false}
+          content={
+            <Button
+              color="red"
+              icon
+              labelPosition="left"
+              onClick={() => clearChat()}
+            >
+              <Icon name="delete" />
+              Delete Messages
+            </Button>
+          }
+        />
+      )}
       {owner && owner === user?.uid && (
         <SettingRow
           icon={'linkify'}
@@ -308,7 +336,9 @@ const SettingRow = ({
             />
           )}
         </div>
-        <div className="smallText">{description}</div>
+        <div className="smallText" style={{ marginBottom: '8px' }}>
+          {description}
+        </div>
         {content}
       </div>
     </React.Fragment>