v1.7.17/release

app/src/Chat.js

@@ -2,7 +2,7 @@
 Copyright (C) Ayushya Amitabh - All Rights Reserved
 Unauthorized copying of this file, via any medium is strictly prohibited
 Proprietary and confidential
-Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 - 2021 
+Written by Ayushya Amitabh <admin@chromewatchparty.com>, 2020 - 2022 
 https://www.chromewatchparty.com/copyright
 =========================================================================
 ALL CONTENT ON WATCH PARTY'S WEBSITE OR IN WATCH PARTY'S CHROME EXTENSION APP, UNLESS OTHERWISE
@@ -123,6 +123,7 @@ export default class Chat extends Component {
       videoInputs: [],
       selectedVideoInput: "",
       minimized: false,
+      hideVideoContainer: LocalData().hideVideoContainer || false,
     };
     this.port = null;
     this.gifClick = this.gifClick.bind(this);
@@ -152,6 +153,7 @@ export default class Chat extends Component {
       this.callEventListener,
       this.props.notify
     );
+    this.updateHideVideoContainer = this.updateHideVideoContainer.bind(this);
   }
   componentDidMount() {
     // EVENT CAPTURE FOR ENTER TO SEND
@@ -256,6 +258,7 @@ export default class Chat extends Component {
 
     // DONE WITH MOUNTING TASKS
     this.props.updateLoading(false);
+    this.updateHideVideoContainer();
 
     setInterval(() => {
       if (
@@ -577,6 +580,12 @@ export default class Chat extends Component {
     const { usingVideo } = this.state;
     this.mCallManager.toggleVideo(!usingVideo);
   }
+  updateHideVideoContainer() {
+    const hideVideoContainer = !this.state.hideVideoContainer;
+    document.documentElement.style.setProperty('--video-container-pos', hideVideoContainer ? 'relative' : 'fixed');
+    updateLocalData({ hideVideoContainer });
+    this.setState({ hideVideoContainer });
+  }
   render() {
     const {
       admin,
@@ -605,6 +614,7 @@ export default class Chat extends Component {
       videoInputs,
       selectedVideoInput,
       minimized,
+      hideVideoContainer
     } = this.state;
     const { status } = this.props;
     const { callEnabled } = status;
@@ -820,6 +830,28 @@ export default class Chat extends Component {
                 }
                 labelPlacement="end"
               />
+              <FormControlLabel
+                className="notification-switch"
+                control={
+                  <Switch
+                    checked={hideVideoContainer}
+                    onChange={this.updateHideVideoContainer}
+                    name="hideVideoContainer"
+                  />
+                }
+                label={
+                  <span>
+                    Hide Video Container when sidebar is collapsed
+                    <br />
+                    <span style={{ color: "#8a8a8a" }}>
+                      {hideVideoContainer
+                        ? "Video containers will be hidden"
+                        : "Video containers will be shown"}
+                    </span>
+                  </span>
+                }
+                labelPlacement="end"
+              />
               <Typography
                 className="party-controls-users-title"
                 variant="overline"