v1.1.0-beta/all fixes + styling

functions/index.js

@@ -384,7 +384,7 @@ const updatePlayer = async (req, res) => {
         .add({
           uid: '<system>',
           name: '',
-          text: `${userName} changed show \n${player.showName ? 'to ' + player.showName : ''}`,
+          text: `${userName} changed \n${player.showName ? 'to ' + player.showName : ''}`,
           time: new Date(),
         });
     }

public/background.js

@@ -67,11 +67,15 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 });
 
 chrome.runtime.onConnect.addListener((port) => {
-  port.onDisconnect.addListener(() => {});
+  port.onDisconnect.addListener(() => {
+    port.roomListener && port.roomListener();
+    port.userListener && port.userListener();
+    port.messageListener && port.messageListener();
+  });
   port.onMessage.addListener((request) => {
     const { type, roomId } = request;
     if (type === 'INIT') {
-      firebase
+      port.roomListener = firebase
         .firestore()
         .collection('rooms')
         .doc(roomId)
@@ -85,7 +89,7 @@ chrome.runtime.onConnect.addListener((port) => {
             port.postMessage({ isError: true, ...err });
           }
         );
-      firebase
+      port.userListener = firebase
         .firestore()
         .collection('rooms')
         .doc(roomId)
@@ -103,7 +107,7 @@ chrome.runtime.onConnect.addListener((port) => {
             port.postMessage({ isError: true, ...err });
           }
         );
-      firebase
+      port.messageListener = firebase
         .firestore()
         .collection('rooms')
         .doc(roomId)

src/Chat.js

@@ -16,12 +16,25 @@ import Delete from '@material-ui/icons/Delete';
 import Gif from '@material-ui/icons/Gif';
 import { Carousel } from '@giphy/react-components';
 import { GiphyFetch } from '@giphy/js-fetch-api';
-import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi, PLAYER_STATUS } from './Api';
+import {
+  SendMessageApi,
+  LeaveRoomApi,
+  DeleteRoomApi,
+  UpdatePlayerApi,
+  getPlayerSource,
+  PLAYER_SOURCE,
+} from './Api';
 import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
 
 const giphyFetch = new GiphyFetch('ojJbIMUN6XRMn4mHiFFav3rMCpXUg8sq');
+const huluAlert = {
+  name: '<alert>',
+  text: 'Time sync is not available on Hulu yet.',
+  time: '',
+  uid: '<system>',
+};
 export default class Chat extends Component {
   constructor(props) {
     super(props);
@@ -30,7 +43,6 @@ export default class Chat extends Component {
       messages: [],
       newMessage: '',
       admin: null,
-      player: {},
       gif: false,
     };
     this.sendMessage = this.sendMessage.bind(this);
@@ -89,11 +101,11 @@ export default class Chat extends Component {
     this.syncPlayer(video);
   }
   syncPlayer(video) {
-    const { status, showName, time, source, element } = video;
+    const { status, showName, time, source, element, showChanged } = video;
     if (element) {
       UpdatePlayerApi({
         roomId: window.localStorage.getItem('watchPartyRoomId'),
-        showChanged: showName !== this.state.player.showName,
+        showChanged,
         userName: window.localStorage.getItem('watchPartyUserName'),
         player: {
           status,
@@ -201,6 +213,8 @@ export default class Chat extends Component {
   }
   render() {
     const { admin, name, messages, newMessage, gif } = this.state;
+    if (getPlayerSource() === PLAYER_SOURCE.HULU && messages[0] !== huluAlert)
+      messages.unshift(huluAlert);
     return (
       <div className="party-chat-container">
         <div className="party-chat-header">
@@ -242,7 +256,7 @@ export default class Chat extends Component {
             id: 'chat-message-box-input',
             endAdornment: (
               <InputAdornment position="end">
-                <IconButton onClick={this.sendMessageInvoker} edge="end">
+                <IconButton onClick={() => this.sendMessageInvoker(newMessage)} edge="end">
                   <Send />
                 </IconButton>
               </InputAdornment>

src/Create.js

@@ -112,10 +112,11 @@ const Create = (props) => {
         <TextField
           fullWidth
           value={name}
-          onChange={(e) => setName(e.target.value)}
+          onChange={(e) => (e.target.value.length <= 24 ? setName(e.target.value) : null)}
           className="name-field"
           label="Name"
           variant="filled"
+          helperText={name.length > 0 ? `${name.length}/24` : null}
           InputProps={{
             endAdornment: (
               <InputAdornment position="end">
@@ -134,7 +135,8 @@ const Create = (props) => {
             fullWidth
             value={createName}
             className="card-field addFocus"
-            onChange={(e) => setCreateName(e.target.value)}
+            onChange={(e) => (e.target.value.length <= 24 ? setCreateName(e.target.value) : null)}
+            helperText={createName.length > 0 ? `${createName.length}/24` : null}
             label="Party Name"
           />
           <Button

src/Thread.css

@@ -17,6 +17,15 @@
   margin-top: 7.5px !important;
   color: rgba(100, 100, 100, 0.8) !important;
 }
+.system-message.alert {
+  background-color: black;
+  border-radius: 1rem;
+  color: white !important;
+  padding: 5px 10px;
+  position: sticky;
+  top: 2px;
+  z-index: 1;
+}
 .my-message {
   display: block;
   width: fit-content;
@@ -62,8 +71,9 @@ img.party-message {
   font-size: 10px !important;
 }
 .time {
+  top: 0;
+  color: #3a3a3a;
   position: absolute;
-  bottom: 50%;
   opacity: 0;
   transition: all ease-in-out 0.3s;
 }

src/Thread.js

@@ -1,11 +1,25 @@
 import React from 'react';
 import { Typography } from '@material-ui/core';
 import './Thread.css';
+import firebase from 'firebase/app';
+import 'firebase/firestore';
 
 const Thread = (props) =>
   props.messages.map((m, midx) => {
     const userUid = window.localStorage.getItem('watchPartyUserUid');
     if (m.uid === '<system>') {
+      if (m.name === '<alert>') {
+        return (
+          <Typography
+            variant="body2"
+            className="thread-item system-message alert"
+            key={m.id}
+            disabled
+          >
+            {m.text}
+          </Typography>
+        );
+      }
       return (
         <Typography variant="body2" className="thread-item system-message" key={m.id} disabled>
           {m.text}
@@ -26,7 +40,7 @@ const Thread = (props) =>
               {m.text}
             </Typography>
           )}
-          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
+          <span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
         </div>
       );
     } else {
@@ -47,7 +61,7 @@ const Thread = (props) =>
               {m.text}
             </Typography>
           )}
-          <span className="time">{new Date(m.time).toLocaleTimeString()}</span>
+          <span className="time">{new Date(m.time.seconds * 1000).toLocaleTimeString()}</span>
         </div>
       );
     }

src/VideoListener.js

@@ -1,6 +1,6 @@
 import { PLAYER_STATUS, getPlayerSource, PLAYER_SOURCE } from './Api';
 
-const templateListener = (video) => console.log(video);
+const templateListener = (video) => console.log('MISSING VIDEO LISTENER');
 
 export default class VideoListener {
   constructor(listener = templateListener) {
@@ -36,19 +36,14 @@ export default class VideoListener {
   updateStatus(newStatus) {
     this.video = Object.assign({}, this.video, newStatus);
     if (this.shouldPushSync()) {
-      console.log(this.video);
+      this.listener({
-      this.listener(this.video);
+        ...this.video,
+        showChanged: this.video.showName !== this.server.showName,
+      });
     }
   }
   async doUpdate(serverPlayer) {
     this.server = serverPlayer;
-    console.log(
-      `
-        isUpdating : ${this.isUpdating}\n
-        showName eq: ${serverPlayer.showName === this.video.showName}\n
-        updatedByMe: ${serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')}
-      `
-    );
     if (
       this.isUpdating === false &&
       serverPlayer.showName === this.video.showName &&
@@ -67,11 +62,13 @@ export default class VideoListener {
               window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
               break;
             case PLAYER_SOURCE.AMAZON:
-              await this.video.element.play();
+              if (this.video.status === PLAYER_STATUS.PAUSED) await this.video.element.play();
               this.video.element.currentTime = serverPlayer.time;
+              await this.timeout(500);
               break;
             case PLAYER_SOURCE.DISNEY:
               this.video.element.currentTime = serverPlayer.time;
+              await this.timeout(500);
               break;
             default:
               break;

src/index.css

@@ -1,6 +1,6 @@
 :root {
-  --party-width: 22rem;
+  --party-width: 350px;
-  --neg-party-width: -22rem;
+  --neg-party-width: -350px;
   --body-width: calc(100% - var(--party-width));
 }
 body {
@@ -209,14 +209,10 @@ body.amazon-prime textarea:focus {
 }
 .room-title {
   text-overflow: ellipsis !important;
-  word-break: break-all !important;
+  word-break: break-word !important;
   overflow: hidden !important;
   padding-right: 1rem !important;
 }
-.room-title,
-.brand-title {
-  padding-left: 1rem !important;
-}
 .thread-container::-webkit-scrollbar {
   width: 5px;
 }
@@ -236,17 +232,27 @@ textarea::-webkit-scrollbar {
 }
 .party-chat-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  padding-left: 2.25rem;
 }
 .party-chat-header-text {
   flex: 1;
 }
+.party-controls {
+  margin-top: 2rem;
+}
+.party-controls .MuiButton-startIcon {
+  margin-right: 0px !important;
+}
 .party-control-button-text {
   display: none;
 }
 .party-controls button:hover .party-control-button-text {
   display: initial;
 }
+.party-controls button:hover .MuiButton-startIcon {
+  margin-right: 8px !important;
+}
 .giphy-carousel {
   margin-top: 1rem;
   min-height: fit-content;

src/index.js

@@ -43,8 +43,6 @@ switch (getPlayerSource()) {
     const ds = document.createElement('script');
     ds.text = `window.doquery=function(){window.huluPlayer=window.queryObjects(window.HuluMediaPlayer);}`;
     document.head.appendChild(ds);
-    if (window.queryObjects) console.log('canqyery');
-    else console.log('cantqyery');
     break;
   case PLAYER_SOURCE.AMAZON:
     document.body.classList.add('amazon-prime');