v1.7.8/release

- Video Listener Optimizations - Auto Leave Fix - Edge support - Admin Dashboard Update - Vimeo & Dailymotion
2020-11-16 23:06:44 -05:00
parent cfe42bd4aa
commit 16a11f7163
66 changed files with 2559 additions and 1114 deletions
@@ -12,7 +12,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
 /*global chrome*/
 /*global browser*/

-import React, { Component } from 'react';
+import React, { Component } from "react";
 import {
  Typography,
  TextField,
@@ -35,8 +35,8 @@ import {
  MenuItem,
  FormControl,
  InputLabel,
-} from '@material-ui/core';
-import Thread from './Thread';
+} from "@material-ui/core";
+import Thread from "./Thread";
 import {
  SendMessageApi,
  LeaveRoomApi,
@@ -50,7 +50,7 @@ import {
  removeLocalData,
  PLAYER_SOURCE,
  getPlayerSource,
-} from './Api';
+} from "./Api";
 import {
  Send,
  ExitToApp as Exit,
@@ -72,13 +72,13 @@ import {
  CancelRounded,
  VideocamRounded,
  VideocamOffRounded,
-} from '@material-ui/icons';
-import Create from './Create';
-import { goTo } from 'route-lite';
-import CallManager from './CallManager';
-import VideoListener from './VideoListener';
-import ReactGiphySearchbox from 'react-giphy-searchbox';
-import VoxeetSDK from '@voxeet/voxeet-web-sdk';
+} from "@material-ui/icons";
+import Create from "./Create";
+import { goTo } from "route-lite";
+import CallManager from "./CallManager";
+import VideoListener from "./VideoListener";
+import ReactGiphySearchbox from "react-giphy-searchbox";
+import VoxeetSDK from "@voxeet/voxeet-web-sdk";

 let CHROME_OR_BROWSER = chrome || browser;

@@ -86,9 +86,9 @@ export default class Chat extends Component {
  constructor(props) {
    super(props);
    this.state = {
-      name: '',
+      name: "",
      messages: [],
-      newMessage: '',
+      newMessage: "",
      admin: null,
      adminOnly: false,
      adminModeUpdate: false,
@@ -99,21 +99,27 @@ export default class Chat extends Component {
      callActionPending: false,
      menuPopover: true,
      allowChatNotification:
-        LocalData().allowChatNotification !== undefined ? LocalData().allowChatNotification : true,
+        LocalData().allowChatNotification !== undefined
+          ? LocalData().allowChatNotification
+          : true,
      isFullscreen: document.fullscreen,
      allowAutoRejoin:
-        LocalData().allowAutoRejoin !== undefined ? LocalData().allowAutoRejoin : true,
+        LocalData().allowAutoRejoin !== undefined
+          ? LocalData().allowAutoRejoin
+          : true,
      allowAutoFollow:
-        LocalData().allowAutoFollow !== undefined ? LocalData().allowAutoFollow : false,
+        LocalData().allowAutoFollow !== undefined
+          ? LocalData().allowAutoFollow
+          : false,
      replyTo: null,
      sendingMessages: [],
      usingVideo: false,
      audioInputs: [],
-      selectedAudioInput: '',
+      selectedAudioInput: "",
      audioOutputs: [],
-      selectedAudioOutput: '',
+      selectedAudioOutput: "",
      videoInputs: [],
-      selectedVideoInput: '',
+      selectedVideoInput: "",
    };
    this.port = null;
    this.gifClick = this.gifClick.bind(this);
@@ -137,15 +143,21 @@ export default class Chat extends Component {
    );
    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);
+    this.updateAllowChatNotification = this.updateAllowChatNotification.bind(
+      this
+    );
+    this.mCallManager = new CallManager(
+      this.callEventListener,
+      this.props.notify
+    );
  }
  componentDidMount() {
    // EVENT CAPTURE FOR ENTER TO SEND
    window.onkeypress = (ev) => {
-      if (ev.code === 'Enter') {
-        if (ev.target === document.getElementById('chat-message-box-input')) {
-          if (ev.shiftKey === false && this.state.gif === true) ev.preventDefault();
+      if (ev.code === "Enter") {
+        if (ev.target === document.getElementById("chat-message-box-input")) {
+          if (ev.shiftKey === false && this.state.gif === true)
+            ev.preventDefault();
          if (ev.shiftKey === false && this.state.gif === false) {
            ev.preventDefault();
            this.sendMessageInvoker();
@@ -155,12 +167,15 @@ export default class Chat extends Component {
    };

    // FULLSCREEN LISTENER
-    document.addEventListener('fullscreenchange', (ev) => {
+    document.addEventListener("fullscreenchange", (ev) => {
      this.setState({ isFullscreen: document.fullscreen });
    });

    // ACTIVE TRACKER
-    if (LocalData().allowAutoRejoin === undefined || LocalData().allowAutoRejoin === null) {
+    if (
+      LocalData().allowAutoRejoin === undefined ||
+      LocalData().allowAutoRejoin === null
+    ) {
      updateLocalData({ allowAutoRejoin: this.state.allowAutoRejoin });
    }
    if (this.state.allowAutoRejoin === true) {
@@ -176,23 +191,25 @@ export default class Chat extends Component {
    this.mVideoListener.start();

    // CHROME FIREBASE FIRESTORE LISTENER
-    this.port = CHROME_OR_BROWSER.runtime.connect({ name: LocalData().partyName });
+    this.port = CHROME_OR_BROWSER.runtime.connect({
+      name: LocalData().partyName,
+    });
    // Initialize listener
    this.port.postMessage({
-      type: 'INIT',
+      type: "INIT",
      roomId: LocalData().partyName,
      roomPin: LocalData().partyPin,
    });
    // Listener
    this.port.onMessage.addListener((response) => {
      if (response.isError === true) {
-        this.props.notify('Uh oh. Got lost from the party.');
+        this.props.notify("Uh oh. Got lost from the party.");
        goTo(Create, this.props);
        return;
      } else {
        // CONTINUE TUTORIAL
        if (this.props.tutorialComplete === false) {
-          this.props.resetTutorial('chat');
+          this.props.resetTutorial("chat");
        }
      }

@@ -201,13 +218,21 @@ export default class Chat extends Component {
      }

      // IF CHAT IS HIDDEN AND ALLOWS NOTIFICATION
-      if (!document.querySelector('body.visible') && this.state.allowChatNotification === true) {
-        if (response.messages && response.messages.length !== this.state.messages.length) {
+      if (
+        !document.querySelector("body.visible") &&
+        this.state.allowChatNotification === true
+      ) {
+        if (
+          response.messages &&
+          response.messages.length !== this.state.messages.length
+        ) {
          const lastMessage = response.messages[response.messages.length - 1];
-          if (lastMessage.uid !== '<system>') {
+          if (lastMessage.uid !== "<system>") {
            this.props.notify(
              `${lastMessage.name}${
-                lastMessage.type === 'giphy' ? ' sent a gif.' : ': ' + lastMessage.text
+                lastMessage.type === "giphy"
+                  ? " sent a gif."
+                  : ": " + lastMessage.text
              }`
            );
          }
@@ -223,7 +248,7 @@ export default class Chat extends Component {

    // GIPHY IPC
    const giphyInject = `var giphySearchInteraction=function(e){if(e.source===window){const{data}=e;if(data.watchPartyDirection==='TO_SCRIPT'){if(data.type==='WATCH_PARTY_SEARCH_GIF'){const giphyInput=document.querySelector('.giphy-search-form input');if(giphyInput){giphyInput.value=data.value;giphyInput.dispatchEvent(new Event('change',{bubbles:true}))}}}}};window.addEventListener("message",giphySearchInteraction);`;
-    const giphyInjectScript = document.createElement('script');
+    const giphyInjectScript = document.createElement("script");
    giphyInjectScript.text = giphyInject;
    document.head.appendChild(giphyInjectScript);

@@ -257,22 +282,22 @@ export default class Chat extends Component {
  callEventListener(event) {
    this.setState(event);
    if (event.onCall === true) {
-      VoxeetSDK.mediaDevice.enumerateAudioDevices('input').then((devices) => {
+      VoxeetSDK.mediaDevice.enumerateAudioDevices("input").then((devices) => {
        this.setState({
          audioInputs: devices,
-          selectedAudioInput: devices.length > 0 ? devices[0].deviceId : '',
+          selectedAudioInput: devices.length > 0 ? devices[0].deviceId : "",
        });
      });
-      VoxeetSDK.mediaDevice.enumerateAudioDevices('output').then((devices) => {
+      VoxeetSDK.mediaDevice.enumerateAudioDevices("output").then((devices) => {
        this.setState({
          audioOutputs: devices,
-          selectedAudioOutput: devices.length > 0 ? devices[0].deviceId : '',
+          selectedAudioOutput: devices.length > 0 ? devices[0].deviceId : "",
        });
      });
-      VoxeetSDK.mediaDevice.enumerateVideoDevices('output').then((devices) => {
+      VoxeetSDK.mediaDevice.enumerateVideoDevices("output").then((devices) => {
        this.setState({
          videoInputs: devices,
-          selectedVideoInput: devices.length > 0 ? devices[0].deviceId : '',
+          selectedVideoInput: devices.length > 0 ? devices[0].deviceId : "",
        });
      });
    }
@@ -295,14 +320,14 @@ export default class Chat extends Component {
      }).catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('Sync Party API error', err);
+        console.error("Sync Party API error", err);
      });
    } else {
      this.mVideoListener.start();
    }
  }
  endParty() {
-    this.props.notify('Ending party...');
+    this.props.notify("Ending party...");
    this.props.updateLoading(true);
    const data = {
      partyName: LocalData().partyName,
@@ -317,20 +342,20 @@ export default class Chat extends Component {
      );
    DeleteRoomApi(data)
      .then((res) => {
-        this.props.notify('Ended party');
-        removeLocalData('partyPin');
-        removeLocalData('partyName');
+        this.props.notify("Ended party");
+        removeLocalData("partyPin");
+        removeLocalData("partyName");
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
      .catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('End Party API error', err);
+        console.error("End Party API error", err);
      });
  }
  leaveParty() {
-    this.props.notify('Leaving party...');
+    this.props.notify("Leaving party...");
    this.props.updateLoading(true);
    const data = {
      partyName: LocalData().partyName,
@@ -346,28 +371,30 @@ export default class Chat extends Component {
      );
    LeaveRoomApi(data)
      .then((res) => {
-        this.props.notify('Left party');
-        removeLocalData('partyPin');
-        removeLocalData('partyName');
+        this.props.notify("Left party");
+        removeLocalData("partyPin");
+        removeLocalData("partyName");
        goTo(Create, this.props);
        this.props.updateLoading(false);
      })
      .catch((err) => {
        this.props.updateLoading(false);
        this.props.notify(err.message || err.statusText);
-        console.error('End Party API error', err);
+        console.error("End Party API error", err);
      });
  }
  shareParty() {
-    const el = document.createElement('textarea');
-    el.value = `Join my party on Watch Party!\nParty Name: ${LocalData().partyName}\nParty Pin: ${
-      LocalData().partyPin
-    }\n${window.location.href}\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
+    const el = document.createElement("textarea");
+    el.value = `Join my party on Watch Party!\nParty Name: ${
+      LocalData().partyName
+    }\nParty Pin: ${LocalData().partyPin}\n${
+      window.location.href
+    }\n---\nGet Watch Party at https:\\\\get.chromewatchparty.com`;
    document.body.appendChild(el);
    el.select();
-    document.execCommand('copy');
+    document.execCommand("copy");
    document.body.removeChild(el);
-    this.props.notify('Copied party invitation');
+    this.props.notify("Copied party invitation");
  }
  sendMessage(message) {
    const { sendingMessages } = this.state;
@@ -378,9 +405,9 @@ export default class Chat extends Component {
      uid: LocalData().userUid,
      text: message,
      time: new Date(),
-      type: '',
+      type: "",
    };
-    if (this.state.gif === true) data.type = 'giphy';
+    if (this.state.gif === true) data.type = "giphy";
    if (this.state.replyTo !== null) data.replyTo = this.state.replyTo.id;
    sendingMessages.push(data);
    this.setState({
@@ -401,7 +428,7 @@ export default class Chat extends Component {
        this.setState({ sendingMessages: sm });
        scrollThread();
        this.props.notify(err.message || err.statusText);
-        console.error('Send Message API error', err);
+        console.error("Send Message API error", err);
      });
    this.setState({ replyTo: null });
    scrollThread();
@@ -409,10 +436,10 @@ export default class Chat extends Component {
  sendMessageInvoker(overrideMessage) {
    if (overrideMessage) this.sendMessage(overrideMessage);
    else {
-      const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
-      if (trim !== '') this.sendMessage(trim);
+      const trim = this.state.newMessage.replace(/^\s+|\s+$/g, "");
+      if (trim !== "") this.sendMessage(trim);
    }
-    this.setState({ newMessage: '' });
+    this.setState({ newMessage: "" });
  }
  gifClick(iGif) {
    this.sendMessageInvoker(iGif.images.original.url);
@@ -421,12 +448,12 @@ export default class Chat extends Component {
    const { onCall, conference, admin, adminOnly } = this.state;
    if (window.navigator && onCall === false) {
      try {
-        const overlay = document.createElement('div');
+        const overlay = document.createElement("div");
        overlay.innerHTML = `
          <div id="mic-highlight"></div>
          <h4 id="mic-text">Grant Mic / Camera Permission</h4>
        `;
-        overlay.id = 'mic-permission-overlay';
+        overlay.id = "mic-permission-overlay";
        document.body.appendChild(overlay);
        window.navigator
          .getUserMedia({
@@ -439,32 +466,51 @@ export default class Chat extends Component {
                  video: true,
                })
                .then(() => {
-                  document.getElementById('mic-permission-overlay').remove();
-                  this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
+                  document.getElementById("mic-permission-overlay").remove();
+                  this.mCallManager.toggleCall(
+                    onCall,
+                    conference,
+                    admin,
+                    adminOnly,
+                    useVideo
+                  );
                })
                .catch(() => {
-                  document.getElementById('mic-permission-overlay').remove();
+                  document.getElementById("mic-permission-overlay").remove();
                  this.props.notify(
-                    'Check your camera permission for this website. You can modify site permission by clicking on the lock (🔒) icon in the top left, then clicking site permissions.',
+                    "Check your camera permission for this website. You can modify site permission by clicking on the lock (🔒) icon in the top left, then clicking site permissions.",
                    15000
                  );
                });
            } else {
-              document.getElementById('mic-permission-overlay').remove();
-              this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
+              document.getElementById("mic-permission-overlay").remove();
+              this.mCallManager.toggleCall(
+                onCall,
+                conference,
+                admin,
+                adminOnly,
+                useVideo
+              );
            }
          })
          .catch(() => {
-            document.getElementById('mic-permission-overlay').remove();
+            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, then clicking site permissions.',
+              "Check your mic permission for this website. You can modify site permission by clicking on the lock (🔒) icon in the top left, then clicking site permissions.",
              15000
            );
          });
      } catch (err) {
-        console.error('Handle Phone Call Error', err);
+        console.error("Handle Phone Call Error", err);
      }
-    } else this.mCallManager.toggleCall(onCall, conference, admin, adminOnly, useVideo);
+    } else
+      this.mCallManager.toggleCall(
+        onCall,
+        conference,
+        admin,
+        adminOnly,
+        useVideo
+      );
  }
  handleMute() {
    this.mCallManager.toggleMute(this.state.muted);
@@ -502,7 +548,7 @@ export default class Chat extends Component {
      adminOnly: !this.state.adminOnly,
    }).catch((err) => {
      this.props.notify(err.message || err.statusText);
-      console.error('Update Admin Only API error', err);
+      console.error("Update Admin Only API error", err);
    });
  }
  setReplyTo(message) {
@@ -514,7 +560,7 @@ export default class Chat extends Component {
  getReplyToContent() {
    const { replyTo } = this.state;
    if (replyTo) {
-      if (replyTo.type === 'giphy') {
+      if (replyTo.type === "giphy") {
        return <img alt="gif" src={replyTo.text} />;
      }
      return (
@@ -562,15 +608,17 @@ export default class Chat extends Component {
    const alerts = [
      {
        condition: () => adminOnly,
-        message: 'Party is currently in admin only mode.',
+        message: "Party is currently in admin only mode.",
      },
      {
        condition: () => getPlayerSource() === PLAYER_SOURCE.FUNIMATION,
-        message: 'If sync stops working, try (Ctrl + Shift + R) or (⌘ + Shift + R)',
+        message:
+          "If sync stops working, try (Ctrl + Shift + R) or (⌘ + Shift + R)",
      },
      {
-        condition: () => window.location.href.includes(PLAYER_SOURCE.PRIMEVIDEO),
-        message: 'Support on Prime Video is untested, and may be buggy.',
+        condition: () =>
+          window.location.href.includes(PLAYER_SOURCE.PRIMEVIDEO),
+        message: "Support on Prime Video is untested, and may be buggy.",
      },
    ];
    return (
@@ -597,7 +645,12 @@ export default class Chat extends Component {
                >
                  WATCH PARTY
                </Typography>
-                <Typography color="textPrimary" className="room-title" variant="h4" gutterBottom>
+                <Typography
+                  color="textPrimary"
+                  className="room-title"
+                  variant="h4"
+                  gutterBottom
+                >
                  {name}
                </Typography>
              </div>
@@ -606,9 +659,9 @@ export default class Chat extends Component {
              <TextField
                className="share-textbox"
                label="Party Details"
-                value={`Party Name: ${LocalData().partyName}\nParty Pin: ${LocalData().partyPin}\n${
-                  window.location.href
-                }`}
+                value={`Party Name: ${LocalData().partyName}\nParty Pin: ${
+                  LocalData().partyPin
+                }\n${window.location.href}`}
                multiline
                rowsMax={2}
                variant="outlined"
@@ -635,13 +688,19 @@ export default class Chat extends Component {
                color="secondary"
              >
                <Button onClick={this.leaveParty} startIcon={<Exit />}>
-                  <Typography variant="caption" className="party-control-button-text">
+                  <Typography
+                    variant="caption"
+                    className="party-control-button-text"
+                  >
                    Leave
                  </Typography>
                </Button>
                {admin && (
                  <Button onClick={this.endParty} startIcon={<Delete />}>
-                    <Typography variant="caption" className="party-control-button-text">
+                    <Typography
+                      variant="caption"
+                      className="party-control-button-text"
+                    >
                      End
                    </Typography>
                  </Button>
@@ -654,15 +713,17 @@ export default class Chat extends Component {
                    checked={allowChatNotification}
                    onChange={this.updateAllowChatNotification}
                    name="allowChatNotification"
-                    color={allowChatNotification ? 'secondary' : 'primary'}
+                    color={allowChatNotification ? "secondary" : "primary"}
                  />
                }
                label={
                  <span>
                    Allow chat notification when side panel is closed
                    <br />
-                    <span style={{ color: '#8a8a8a' }}>
-                      {allowChatNotification ? 'Notifications Enabled' : 'Notifications Disabled'}
+                    <span style={{ color: "#8a8a8a" }}>
+                      {allowChatNotification
+                        ? "Notifications Enabled"
+                        : "Notifications Disabled"}
                    </span>
                  </span>
                }
@@ -675,15 +736,17 @@ export default class Chat extends Component {
                    checked={allowAutoRejoin}
                    onChange={this.updateAllowAutoRejoin}
                    name="allowAutoRejoin"
-                    color={allowAutoRejoin ? 'secondary' : 'primary'}
+                    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 style={{ color: "#8a8a8a" }}>
+                      {allowAutoRejoin
+                        ? "Auto Rejoin Enabled"
+                        : "Auto Rejoin Disabled"}
                    </span>
                  </span>
                }
@@ -697,7 +760,7 @@ export default class Chat extends Component {
                      checked={adminOnly}
                      onChange={this.updateAdminOnly}
                      name="adminOnly"
-                      color={adminOnly ? 'secondary' : 'primary'}
+                      color={adminOnly ? "secondary" : "primary"}
                      disabled={adminModeUpdate}
                    />
                  }
@@ -705,10 +768,10 @@ export default class Chat extends Component {
                    <span>
                      Admin Only Mode
                      <br />
-                      <span style={{ color: '#8a8a8a' }}>
+                      <span style={{ color: "#8a8a8a" }}>
                        {adminOnly
-                          ? 'Only admin can update player and start calls'
-                          : 'All party members can update player and start calls'}
+                          ? "Only admin can update player and start calls"
+                          : "All party members can update player and start calls"}
                      </span>
                    </span>
                  }
@@ -726,25 +789,38 @@ export default class Chat extends Component {
                }
                label={
                  <span>
-                    Allow Watch Party to change to the currently playing
+                    (BETA) Allow Watch Party to change to the currently playing
                    <br />
-                    <span style={{ color: '#8a8a8a' }}>
-                      {allowAutoFollow ? 'Auto Follow Enabled' : 'Auto Follow Disabled'}
+                    <span style={{ color: "#8a8a8a" }}>
+                      {allowAutoFollow
+                        ? "Auto Follow Enabled"
+                        : "Auto Follow Disabled"}
                    </span>
                  </span>
                }
                labelPlacement="end"
              />
-              <Typography className="party-controls-users-title" variant="overline">
+              <Typography
+                className="party-controls-users-title"
+                variant="overline"
+              >
                PARTY MEMBERS
              </Typography>
              <div className="party-controls-users-container">
                {users.map((user) => (
-                  <Chip className="party-controls-users-chip" clickable size="small" label={user} />
+                  <Chip
+                    className="party-controls-users-chip"
+                    clickable
+                    size="small"
+                    label={user}
+                  />
                ))}
              </div>
              {onCall && (
-                <Typography className="party-controls-users-title" variant="overline">
+                <Typography
+                  className="party-controls-users-title"
+                  variant="overline"
+                >
                  DEVICE SELECT
                </Typography>
              )}
@@ -760,9 +836,13 @@ export default class Chat extends Component {
                      color="secondary"
                      variant="outlined"
                      onChange={(ev) => {
-                        VoxeetSDK.mediaDevice.selectAudioInput(ev.target.value).then(() => {
-                          this.setState({ selectedAudioInput: ev.target.value });
-                        });
+                        VoxeetSDK.mediaDevice
+                          .selectAudioInput(ev.target.value)
+                          .then(() => {
+                            this.setState({
+                              selectedAudioInput: ev.target.value,
+                            });
+                          });
                      }}
                    >
                      {audioInputs.map((v) => (
@@ -781,9 +861,13 @@ export default class Chat extends Component {
                      color="secondary"
                      variant="outlined"
                      onChange={(ev) => {
-                        VoxeetSDK.mediaDevice.selectAudioOutput(ev.target.value).then(() => {
-                          this.setState({ selectedAudioOutput: ev.target.value });
-                        });
+                        VoxeetSDK.mediaDevice
+                          .selectAudioOutput(ev.target.value)
+                          .then(() => {
+                            this.setState({
+                              selectedAudioOutput: ev.target.value,
+                            });
+                          });
                      }}
                    >
                      {audioOutputs.map((v) => (
@@ -803,9 +887,13 @@ export default class Chat extends Component {
                      fullWidth
                      variant="outlined"
                      onChange={(ev) => {
-                        VoxeetSDK.mediaDevice.selectVideoInput(ev.target.value).then(() => {
-                          this.setState({ selectedVideoInput: ev.target.value });
-                        });
+                        VoxeetSDK.mediaDevice
+                          .selectVideoInput(ev.target.value)
+                          .then(() => {
+                            this.setState({
+                              selectedVideoInput: ev.target.value,
+                            });
+                          });
                      }}
                    >
                      {videoInputs.map((v) => (
@@ -819,10 +907,11 @@ export default class Chat extends Component {
          </ExpansionPanel>
          {player ? (
            <Card elevation={0} className="media-info-card">
-              {player.showName && player.status !== PLAYER_STATUS.NOT_PLAYING ? (
+              {player.showName &&
+              player.status !== PLAYER_STATUS.NOT_PLAYING ? (
                <CardContent>
                  <Typography
-                    style={{ display: 'block' }}
+                    style={{ display: "block" }}
                    className="media-info-at updated-by"
                    variant="caption"
                    color="secondary"
@@ -848,16 +937,22 @@ export default class Chat extends Component {
                      </Typography>
                    </div>
                  </div>
-                  <Typography
-                    variant="overline"
-                    style={{ fontSize: 9, display: 'block', marginTop: 12 }}
-                  >
-                    Watch Party will not automatically change the show for you.
-                  </Typography>
+                  {allowAutoFollow ? null : (
+                    <Typography
+                      variant="overline"
+                      style={{ fontSize: 9, display: "block", marginTop: 12 }}
+                    >
+                      Watch Party will not automatically change the show for
+                      you.
+                    </Typography>
+                  )}
                </CardContent>
              ) : (
                <CardContent>
-                  <Typography style={{ fontSize: 12, marginBottom: 12 }} variant="h4">
+                  <Typography
+                    style={{ fontSize: 12, marginBottom: 12 }}
+                    variant="h4"
+                  >
                    Nothing playing right now
                  </Typography>
                  <Typography variant="overline" style={{ fontSize: 9 }}>
@@ -868,7 +963,11 @@ export default class Chat extends Component {
                </CardContent>
              )}
              {player && player.showName && player.status ? (
-                <Button className="media-info-link" href={player.url} startIcon={<LinkOutlined />}>
+                <Button
+                  className="media-info-link"
+                  href={player.url}
+                  startIcon={<LinkOutlined />}
+                >
                  Link to currently playing
                </Button>
              ) : null}
@@ -900,7 +999,9 @@ export default class Chat extends Component {
        <Paper
          square
          variant="outlined"
-          className={`replying-to-card ${replyTo !== null ? 'replying-to-card-up' : ''}`}
+          className={`replying-to-card ${
+            replyTo !== null ? "replying-to-card-up" : ""
+          }`}
        >
          <div className="replying-to-content">
            <Typography variant="overline" display="block" gutterBottom>
@@ -914,8 +1015,15 @@ export default class Chat extends Component {
        </Paper>
        <div className="text-phone-panel">
          {gif || newMessage ? null : (
-            <Tooltip title="Fullscreen with Watch Party" aria-label="Fullscreen">
-              <IconButton className="icon-button" color="secondary" onClick={this.toggleFullscreen}>
+            <Tooltip
+              title="Fullscreen with Watch Party"
+              aria-label="Fullscreen"
+            >
+              <IconButton
+                className="icon-button"
+                color="secondary"
+                onClick={this.toggleFullscreen}
+              >
                {isFullscreen ? <FullscreenExit /> : <Fullscreen />}
              </IconButton>
            </Tooltip>
@@ -925,11 +1033,21 @@ export default class Chat extends Component {
          ) : (
            <Tooltip
              placement="top"
-              title={onCall ? (usingVideo ? 'Stop Video' : 'Start Video') : 'Join Video Call'}
+              title={
+                onCall
+                  ? usingVideo
+                    ? "Stop Video"
+                    : "Start Video"
+                  : "Join Video Call"
+              }
            >
              <IconButton
-                onClick={onCall ? () => this.handleVideo() : () => this.handlePhoneCall(true)}
-                color={usingVideo ? 'primary' : 'secondary'}
+                onClick={
+                  onCall
+                    ? () => this.handleVideo()
+                    : () => this.handlePhoneCall(true)
+                }
+                color={usingVideo ? "primary" : "secondary"}
              >
                {usingVideo ? <VideocamOffRounded /> : <VideocamRounded />}
              </IconButton>
@@ -938,11 +1056,14 @@ export default class Chat extends Component {
          {gif || newMessage || !callEnabled ? null : callActionPending ? (
            <CircularProgress className="icon-button" color="secondary" />
          ) : (
-            <Tooltip placement="top" title={onCall ? 'Leave Call' : 'Join Call'}>
+            <Tooltip
+              placement="top"
+              title={onCall ? "Leave Call" : "Join Call"}
+            >
              <IconButton
                disabled={callActionPending}
                onClick={() => this.handlePhoneCall(false)}
-                color={!onCall ? 'secondary' : 'primary'}
+                color={!onCall ? "secondary" : "primary"}
                className="icon-button"
              >
                {onCall ? <PhoneDisable /> : <PhoneEnable />}
@@ -977,12 +1098,14 @@ export default class Chat extends Component {
            multiline
            rowsMax="3"
            size="small"
-            placeholder={this.state.gif ? 'Search something...' : 'Say something...'}
+            placeholder={
+              this.state.gif ? "Search something..." : "Say something..."
+            }
            helperText={
              this.state.newMessage && !this.state.gif
-                ? 'Enter to send / Shift+Enter for new line'
+                ? "Enter to send / Shift+Enter for new line"
                : this.state.gif
-                ? 'Click on gif to send / Scroll to load more'
+                ? "Click on gif to send / Scroll to load more"
                : null
            }
            variant="outlined"
@@ -993,19 +1116,19 @@ export default class Chat extends Component {
              scrollThread();
              if (gif) {
                window.postMessage({
-                  watchPartyDirection: 'TO_SCRIPT',
-                  type: 'WATCH_PARTY_SEARCH_GIF',
+                  watchPartyDirection: "TO_SCRIPT",
+                  type: "WATCH_PARTY_SEARCH_GIF",
                  value: e.target.value,
                });
              }
            }}
            InputProps={{
-              id: 'chat-message-box-input',
+              id: "chat-message-box-input",
              endAdornment: (
                <InputAdornment position="end">
                  <IconButton
-                    className={`${this.state.gif ? 'gif-active' : ''} ${
-                      this.state.newMessage ? 'message-active' : ''
+                    className={`${this.state.gif ? "gif-active" : ""} ${
+                      this.state.newMessage ? "message-active" : ""
                    } message-send`}
                    size="small"
                    onClick={() => this.sendMessageInvoker(newMessage)}
@@ -1018,13 +1141,15 @@ export default class Chat extends Component {
              startAdornment: (
                <InputAdornment position="start">
                  <IconButton
-                    className={`gif-button ${this.state.gif ? 'gif-close' : ''}`}
+                    className={`gif-button ${
+                      this.state.gif ? "gif-close" : ""
+                    }`}
                    onClick={() => {
                      this.setState({ gif: !gif });
                      if (!gif) {
                        window.postMessage({
-                          watchPartyDirection: 'TO_SCRIPT',
-                          type: 'WATCH_PARTY_SEARCH_GIF',
+                          watchPartyDirection: "TO_SCRIPT",
+                          type: "WATCH_PARTY_SEARCH_GIF",
                          value: newMessage,
                        });
                        scrollThread();
@@ -1042,9 +1167,9 @@ export default class Chat extends Component {
        <ReactGiphySearchbox
          apiKey="ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq"
          onSelect={this.gifClick}
-          masonryConfig={[{ columns: 2, imageWidth: '50%', gutter: 5 }]}
+          masonryConfig={[{ columns: 2, imageWidth: "50%", gutter: 5 }]}
          searchFormClassName="giphy-search-form"
-          wrapperClassName={`giphy-wrapper ${gif ? '' : 'giphy-wrapper-down'}`}
+          wrapperClassName={`giphy-wrapper ${gif ? "" : "giphy-wrapper-down"}`}
          listWrapperClassName="giphy-list-wrapper"
          listItemClassName="giphy-list-item"
          poweredByGiphy