v1.5.2/fullscreen support

app/src/App.js

@@ -41,14 +41,6 @@ const darkTheme = createMuiTheme({
   },
 });
 
-function hboClickFix(ev) {
-  if (document.querySelector('body.visible')) {
-    ev.preventDefault();
-    ev.stopPropagation();
-    ev.stopImmediatePropagation();
-  }
-}
-
 const Routes = (props) => (
   <Router>
     <Create {...props} />

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}

app/src/Create.js

@@ -32,7 +32,6 @@ import Chat from './Chat';
 import {
   ChevronRight,
   InfoRounded,
-  ContactSupportRounded,
   MonetizationOnRounded,
   RateReviewRounded,
 } from '@material-ui/icons';
@@ -56,6 +55,15 @@ export default class Create extends Component {
     this.joinCall = this.joinCall.bind(this);
     this.success = this.success.bind(this);
   }
+  componentDidMount() {
+    const { lastActive, userName, partyName, partyPin } = LocalData();
+    if (Math.abs(new Date(parseInt(lastActive)) - new Date().getTime()) <= 60000) {
+      if (userName && partyName && partyPin) {
+        this.props.updateLoading(true);
+        this.joinCall(userName, partyName, partyPin);
+      }
+    }
+  }
   partyNameChange(value) {
     if (value.length <= CONSTANTS.NAME_LENGTH) this.setState({ name: value });
   }
@@ -102,6 +110,7 @@ export default class Create extends Component {
   }
   createCall(userName, partyName, partyPin) {
     this.props.updateLoading(true);
+    getUserUid();
     const apidata = {
       userName,
       partyName,
@@ -136,6 +145,7 @@ export default class Create extends Component {
       partyPin,
       source: getPlayerSource(),
     };
+    getUserUid();
     JoinRoomApi(apidata)
       .then((res) => res.json())
       .then((joinResult) => {

app/src/Thread.js

@@ -19,7 +19,7 @@ HBO Now and HBO Max logos are trademark and intellectual property of WarnerMedia
 import React from 'react';
 import { Typography } from '@material-ui/core';
 import './Thread.css';
-import { LocalData, getUserUid } from './Api';
+import { LocalData } from './Api';
 
 const Thread = (props) =>
   props.messages.map((m, midx) => {

app/src/VideoListener.js

@@ -113,6 +113,7 @@ export default class VideoListener {
               simulate(sliderHead, 'mousedown');
               simulate(sliderHead, 'mouseup');
               await this.timeout(500);
+              break;
             default:
               break;
           }

app/src/index.css

@@ -126,6 +126,18 @@ body.peacock.visible .playback-header__container {
   position: relative;
   max-width: 100%;
 }
+
+/*
+FULL SCREEN BUTTON REMOVER
+*/
+body.netflix
+  .touchable.PlayerControls--control-element.nfp-button-control.default-control-button.button-nfplayerFullscreen,
+body.hulu .controls__view-mode-button-normal-icon.player-svgicon,
+body.disney .control-icon-btn.fullscreen-icon,
+body.amazon .fyysciv.f1lobqlo.fk0j80b {
+  display: none;
+}
+
 #party-loading {
   position: absolute;
   width: 100%;

app/src/index.js

@@ -40,6 +40,19 @@ const PartyWrapper = document.createElement('div');
 PartyWrapper.id = 'party_wrapper';
 document.body.appendChild(PartyWrapper);
 
+document.addEventListener(
+  'keydown',
+  (ev) => {
+    if (ev.code === 'KeyF') {
+      if (ev.target.tagName !== 'INPUT' && ev.target.tagName !== 'TEXTAREA') {
+        ev.stopImmediatePropagation();
+        ev.stopPropagation();
+      }
+    }
+  },
+  { capture: true }
+);
+
 switch (getPlayerSource()) {
   case PLAYER_SOURCE.NETFLIX:
     document.body.classList.add('netflix');

website/welcome/index.html

@@ -70,6 +70,14 @@ Peacock TV logo is a trademark and intellectual property of Peacock TV & NBC Uni
       <p data-font="sans-bold" class="title">
        TIPS & FAQ
       </p>
+      <div class="tip">
+        <h6 data-font="sans">
+          CAN I USE WATCH PARTY IN FULLSCREEN
+        </h6>
+        <p data-font="sans-bold">
+          To have access to Watch Party in fullscreen use the fullscreen button in the bottom left corner of the sidebar.
+        </p>
+      </div>
       <div class="tip">
         <h6 data-font="sans">
           CAN I USE THE SAME PARTY, ON A DIFFERENT SITE