v1.5.2/release

- notification timer
- auto rejoin
- mic permission overlay
- fullscreen support
- loading for call
- gif ui update
- netflix player listener update
- room migrate fix
- update player fix

app/src/Chat.js

@@ -34,6 +34,7 @@ import {
   Switch,
   FormControlLabel,
   Chip,
+  CircularProgress,
 } from '@material-ui/core';
 import Thread from './Thread';
 import { Carousel } from '@giphy/react-components';
@@ -104,6 +105,8 @@ export default class Chat extends Component {
       allowChatNotification:
         LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
       isFullscreen: document.fullscreen,
+      allowAutoRejoin:
+        LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -119,6 +122,7 @@ export default class Chat extends Component {
     this.sendMessageInvoker = this.sendMessageInvoker.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
+    this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
     this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
     this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
   }
@@ -142,9 +146,16 @@ export default class Chat extends Component {
     });
 
     // ACTIVE TRACKER
-    updateLocalData({ lastActive: new Date().getTime() });
-    setInterval(() => {
+    if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) {
+      updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin });
+    }
+    if (this.state.allowAutoRejoin === true) {
       updateLocalData({ lastActive: new Date().getTime() });
+    }
+    setInterval(() => {
+      if (this.state.allowAutoRejoin === true) {
+        updateLocalData({ lastActive: new Date().getTime() });
+      }
     }, 60000);
 
     // VIDEO LISTENER START
@@ -301,7 +312,33 @@ export default class Chat extends Component {
   }
   handlePhoneCall() {
     const { onCall, conference, admin } = this.state;
-    this.mCallManager.toggleCall(onCall, conference, admin);
+    if (window.navigator && onCall === false) {
+      try {
+        const overlay = document.createElement('div');
+        overlay.innerHTML = `
+          <div id="mic-highlight"></div>
+          <h4 id="mic-text">Grant Mic Permission</h4>
+        `;
+        overlay.id = 'mic-permission-overlay';
+        document.body.appendChild(overlay);
+        window.navigator
+          .getUserMedia({
+            audio: true,
+          })
+          .then(() => {
+            document.getElementById('mic-permission-overlay').remove();
+            this.mCallManager.toggleCall(onCall, conference, admin);
+          })
+          .catch(() => {
+            document.getElementById('mic-permission-overlay').remove();
+            this.props.notify(
+              'Check your mic permission for this website. You can modify site permission by clicking on the lock icon in the top left.'
+            );
+          });
+      } catch (err) {
+        console.log(err);
+      }
+    } else this.mCallManager.toggleCall(onCall, conference, admin);
   }
   handleMute() {
     this.mCallManager.toggleMute(this.state.muted);
@@ -315,6 +352,10 @@ export default class Chat extends Component {
     updateLocalData({ allowChatNotification: !this.state.allowChatNotification });
     this.setState({ allowChatNotification: !this.state.allowChatNotification });
   }
+  updateAllowAutoRejoin() {
+    updateLocalData({ allowAutoRejoin: !this.state.allowAutoRejoin });
+    this.setState({ allowAutoRejoin: !this.state.allowAutoRejoin });
+  }
   toggleFullscreen() {
     if (document.fullscreen) {
       document.exitFullscreen();
@@ -335,6 +376,7 @@ export default class Chat extends Component {
       allowChatNotification,
       users,
       callActionPending,
+      allowAutoRejoin,
       usersOnCall,
       isFullscreen,
     } = this.state;
@@ -391,7 +433,14 @@ export default class Chat extends Component {
                   ),
                 }}
               />
-              <ButtonGroup fullWidth className="party-controls" size="small">
+              <ButtonGroup
+                fullWidth
+                className="party-controls"
+                size="small"
+                disableElevation
+                variant="contained"
+                color="secondary"
+              >
                 <Button onClick={this.leaveParty} startIcon={<Exit />}>
                   <Typography variant="caption" className="party-control-button-text">
                     Leave
@@ -420,7 +469,28 @@ export default class Chat extends Component {
                     Allow chat notification when side panel is closed
                     <br />
                     <span style={{ color: '#8a8a8a' }}>
-                      {allowChatNotification ? 'Currently Enabled' : 'Currently Disabled'}
+                      {allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
+                    </span>
+                  </span>
+                }
+                labelPlacement="end"
+              />
+              <FormControlLabel
+                className="notification-switch"
+                control={
+                  <Switch
+                    checked={allowAutoRejoin}
+                    onChange={this.updateAllowAutoRejoin}
+                    name="allowAutoRejoin"
+                    color={allowAutoRejoin ? 'secondary' : 'primary'}
+                  />
+                }
+                label={
+                  <span>
+                    Allow Watch Party to auto rejoin (within 1 minute)
+                    <br />
+                    <span style={{ color: '#8a8a8a' }}>
+                      {allowAutoRejoin ? 'Auto Rejoin Enabled' : 'Auto Rejoin Disabled'}
                     </span>
                   </span>
                 }
@@ -494,7 +564,7 @@ export default class Chat extends Component {
               )}
               {player && player.showName && player.status ? (
                 <Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
-                  Link to show
+                  Link to currently playing
                 </Button>
               ) : null}
             </Card>
@@ -520,16 +590,19 @@ export default class Chat extends Component {
         <div className="text-phone-panel">
           {gif || newMessage ? null : (
             <Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">
-              <IconButton color="secondary" onClick={this.toggleFullscreen}>
+              <IconButton className="icon-button" color="secondary" onClick={this.toggleFullscreen}>
                 {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
               </IconButton>
             </Tooltip>
           )}
-          {gif || newMessage ? null : (
+          {gif || newMessage ? null : callActionPending ? (
+            <CircularProgress className="icon-button" color="secondary" />
+          ) : (
             <IconButton
               disabled={callActionPending}
               onClick={this.handlePhoneCall}
               color={!onCall ? 'secondary' : 'primary'}
+              className="icon-button"
             >
               {onCall ? (
                 <Tooltip placement="top" title="Leave Call">
@@ -544,13 +617,23 @@ export default class Chat extends Component {
           )}
           {!gif && !newMessage && onCall && !muted ? (
             <Tooltip title="Mute Mic" placement="top">
-              <IconButton disabled={callActionPending} onClick={this.handleMute} color="primary">
+              <IconButton
+                className="icon-button"
+                disabled={callActionPending}
+                onClick={this.handleMute}
+                color="primary"
+              >
                 <MicOff />
               </IconButton>
             </Tooltip>
           ) : !gif && !newMessage && onCall && muted ? (
             <Tooltip title="Unmute Mic" placement="top">
-              <IconButton disabled={callActionPending} onClick={this.handleMute} color="secondary">
+              <IconButton
+                className="icon-button"
+                disabled={callActionPending}
+                onClick={this.handleMute}
+                color="secondary"
+              >
                 <MicOn />
               </IconButton>
             </Tooltip>
@@ -565,7 +648,7 @@ export default class Chat extends Component {
               this.state.newMessage && !this.state.gif
                 ? 'Enter to send / Shift+Enter for new line'
                 : this.state.gif
-                ? 'Click on gif to send'
+                ? 'Click on gif to send / Scroll to load more'
                 : null
             }
             variant="outlined"
@@ -596,7 +679,11 @@ export default class Chat extends Component {
               ),
               startAdornment: (
                 <InputAdornment position="start">
-                  <IconButton onClick={() => this.setState({ gif: !gif })} edge="start">
+                  <IconButton
+                    className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
+                    onClick={() => this.setState({ gif: !gif })}
+                    edge="start"
+                  >
                     {gif ? <Cancel /> : <Gif />}
                   </IconButton>
                 </InputAdornment>