v1.5.2/fullscreen support

app/src/Chat.js

@@ -66,6 +66,8 @@ import {
   PlayCircleFilled,
   Cancel,
   Error,
+  FullscreenExit,
+  Fullscreen,
 } from '@material-ui/icons';
 import Create from './Create';
 import { goTo } from 'route-lite';
@@ -101,6 +103,7 @@ export default class Chat extends Component {
       menuPopover: true,
       allowChatNotification:
         LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
+      isFullscreen: document.fullscreen,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -133,6 +136,17 @@ export default class Chat extends Component {
       }
     };
 
+    // FULLSCREEN LISTENER
+    document.addEventListener('fullscreenchange', (ev) => {
+      this.setState({ isFullscreen: document.fullscreen });
+    });
+
+    // ACTIVE TRACKER
+    updateLocalData({ lastActive: new Date().getTime() });
+    setInterval(() => {
+      updateLocalData({ lastActive: new Date().getTime() });
+    }, 60000);
+
     // VIDEO LISTENER START
     this.mVideoListener.start();
 
@@ -262,6 +276,9 @@ export default class Chat extends Component {
       time: new Date(),
       type: '',
     };
+    const { messages } = this.state;
+    messages.push({ ...data, type: 'pending' });
+    this.setState({ messages });
     if (this.state.gif === true) data.type = 'giphy';
     SendMessageApi(data).catch((err) => {
       this.props.notify(err.message || err.statusText);
@@ -301,6 +318,13 @@ export default class Chat extends Component {
     updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
     this.setState({ allowChatNotification: !this.state.allowChatNotification });
   }
+  toggleFullscreen() {
+    if (document.fullscreen) {
+      document.exitFullscreen();
+    } else {
+      document.documentElement.requestFullscreen();
+    }
+  }
   render() {
     const {
       admin,
@@ -315,6 +339,7 @@ export default class Chat extends Component {
       users,
       callActionPending,
       usersOnCall,
+      isFullscreen,
     } = this.state;
     return (
       <div className="party-chat-container">
@@ -490,12 +515,17 @@ export default class Chat extends Component {
                     </CardContent>
                   </Card>
                 );
-              }
+              } else return null;
             })}
           </div>
           <Thread messages={messages} />
         </div>
         <div className="text-phone-panel">
+          {gif || newMessage ? null : (
+            <IconButton color="secondary" onClick={this.toggleFullscreen}>
+              {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
+            </IconButton>
+          )}
           {gif || newMessage ? null : (
             <IconButton
               disabled={callActionPending}