v1.7.0/auto follow

app/src/App.js

@@ -84,8 +84,6 @@ const App = () => {
   const [loading, setLoading] = useState(false);
   const [notification, setNotification] = useState(closedNotification);
 
-  let hasAttached = false;
-
   useEffect(() => {
     setLoading(true);
     getUserUid();

app/src/Chat.js

@@ -29,9 +29,6 @@ import {
   Chip,
   CircularProgress,
   Paper,
-  Grid,
-  Slider,
-  LinearProgress,
 } from '@material-ui/core';
 import Thread from './Thread';
 import {
@@ -39,8 +36,6 @@ import {
   LeaveRoomApi,
   DeleteRoomApi,
   UpdatePlayerApi,
-  getPlayerSource,
-  PLAYER_SOURCE,
   LocalData,
   PLAYER_STATUS,
   updateLocalData,
@@ -66,8 +61,6 @@ import {
   Error,
   FullscreenExit,
   Fullscreen,
-  VolumeDown,
-  VolumeUp,
   CancelRounded,
   VideocamRounded,
   VideocamOffRounded,
@@ -99,6 +92,8 @@ export default class Chat extends Component {
       isFullscreen: document.fullscreen,
       allowAutoRejoin:
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
+      allowAutoFollow:
+        LocalData().allowAutoFollow !== undefined ? LocalData().allowAutoFollow : false,
       replyTo: null,
       sendingMessages: [],
       usingVideo: false,
@@ -124,6 +119,7 @@ export default class Chat extends Component {
       props.nameSelectors
     );
     this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
+    this.updateAllowAutoFollow = this.updateAllowAutoFollow.bind(this);
     this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
     this.mCallManager = new CallManager(this.callEventListener, this.props.notify);
   }
@@ -451,6 +447,10 @@ export default class Chat extends Component {
     updateLocalData({ allowAutoRejoin: !this.state.allowAutoRejoin });
     this.setState({ allowAutoRejoin: !this.state.allowAutoRejoin });
   }
+  updateAllowAutoFollow() {
+    updateLocalData({ allowAutoFollow: !this.state.allowAutoFollow });
+    this.setState({ allowAutoFollow: !this.state.allowAutoFollow });
+  }
   toggleFullscreen() {
     if (document.fullscreen) {
       document.exitFullscreen();
@@ -506,6 +506,7 @@ export default class Chat extends Component {
       users,
       callActionPending,
       allowAutoRejoin,
+      allowAutoFollow,
       isFullscreen,
       adminModeUpdate,
       adminOnly,
@@ -655,14 +656,34 @@ export default class Chat extends Component {
                       <br />
                       <span style={{ color: '#8a8a8a' }}>
                         {adminOnly
-                          ? 'Only admin can update player and start calls right now'
-                          : 'All party members can update player and start calls right now'}
+                          ? 'Only admin can update player and start calls'
+                          : 'All party members can update player and start calls'}
                       </span>
                     </span>
                   }
                   labelPlacement="end"
                 />
               ) : null}
+              <FormControlLabel
+                className="notification-switch"
+                control={
+                  <Switch
+                    checked={allowAutoFollow}
+                    onChange={this.updateAllowAutoFollow}
+                    name="allowAutoFollow"
+                  />
+                }
+                label={
+                  <span>
+                    Allow Watch Party to change to the currently playing
+                    <br />
+                    <span style={{ color: '#8a8a8a' }}>
+                      {allowAutoFollow ? 'Auto Follow Enabled' : 'Auto Follow Disabled'}
+                    </span>
+                  </span>
+                }
+                labelPlacement="end"
+              />
               <Typography className="party-controls-users-title" variant="overline">
                 PARTY MEMBERS
               </Typography>

app/src/Create.js

@@ -78,6 +78,7 @@ export default class Create extends Component {
         LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
       allowChatNotification:
         LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
+      allowAutoFollow: LocalData().allowAutoFollow || false,
       expanded: 'alerts',
     };
     this.createCall = this.createCall.bind(this);
@@ -85,6 +86,7 @@ export default class Create extends Component {
     this.success = this.success.bind(this);
     this.partyNameAutocompleteProcessor = this.partyNameAutocompleteProcessor.bind(this);
     this.updateAllowAutoRejoin = this.updateAllowAutoRejoin.bind(this);
+    this.updateAllowAutoFollow = this.updateAllowAutoFollow.bind(this);
     this.updateAllowChatNotification = this.updateAllowChatNotification.bind(this);
     this.clearPartyHistory = this.clearPartyHistory.bind(this);
     this.handleSteps = this.handleSteps.bind(this);
@@ -244,6 +246,10 @@ export default class Create extends Component {
     updateLocalData({ allowAutoRejoin: !this.state.allowAutoRejoin });
     this.setState({ allowAutoRejoin: !this.state.allowAutoRejoin });
   }
+  updateAllowAutoFollow() {
+    updateLocalData({ allowAutoFollow: !this.state.allowAutoFollow });
+    this.setState({ allowAutoFollow: !this.state.allowAutoFollow });
+  }
   clearPartyHistory() {
     this.setState({
       parties: [],
@@ -270,6 +276,7 @@ export default class Create extends Component {
       parties,
       adminOnly,
       allowAutoRejoin,
+      allowAutoFollow,
       allowChatNotification,
       alertStep,
       expanded,
@@ -500,6 +507,26 @@ export default class Create extends Component {
               }
               labelPlacement="end"
             />
+            <FormControlLabel
+              className="notification-switch"
+              control={
+                <Switch
+                  checked={allowAutoFollow}
+                  onChange={this.updateAllowAutoFollow}
+                  name="allowAutoFollow"
+                />
+              }
+              label={
+                <span>
+                  Allow Watch Party to change to the currently playing show
+                  <br />
+                  <span style={{ color: '#8a8a8a' }}>
+                    {allowAutoFollow ? 'Auto Follow Enabled' : 'Auto Follow Disabled'}
+                  </span>
+                </span>
+              }
+              labelPlacement="end"
+            />
             <Button
               color="secondary"
               fullWidth

app/src/VideoListener.js

@@ -60,6 +60,13 @@ export default class VideoListener {
     }
   }
   async doUpdate(serverPlayer) {
+    if (
+      this.video.showName !== serverPlayer.showName &&
+      window.location.href !== serverPlayer.url &&
+      serverPlayer.updatedBy !== LocalData().userUid
+    ) {
+      window.location.href = serverPlayer.url;
+    }
     if (
       this.isUpdating === false &&
       serverPlayer.showName === this.video.showName &&