v1.0.0-beta

src/Chat.js

@@ -1,3 +1,4 @@
+/*global chrome */
 import React, { Component } from 'react';
 import {
   Typography,
@@ -7,16 +8,19 @@ import {
   ButtonGroup,
   Button,
 } from '@material-ui/core';
-import firebase from 'firebase/app';
-import 'firebase/firestore';
-import 'firebase/auth';
 import Thread from './Thread';
 import Send from '@material-ui/icons/SendRounded';
-import Sync from '@material-ui/icons/SyncOutlined';
 import Exit from '@material-ui/icons/ExitToAppRounded';
 import Share from '@material-ui/icons/ShareRounded';
 import Delete from '@material-ui/icons/Delete';
-import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi } from './Api';
+import {
+  SendMessageApi,
+  LeaveRoomApi,
+  DeleteRoomApi,
+  UpdatePlayerApi,
+  getPlayerSource,
+  PLAYER_STATUS,
+} from './Api';
 import { goTo } from 'route-lite';
 import Create from './Create';
 import VideoListener from './VideoListener';
@@ -28,7 +32,7 @@ export default class Chat extends Component {
       name: '',
       messages: [],
       newMessage: '',
-      admin: false,
+      admin: null,
       player: {},
       localPlayer: {},
     };
@@ -36,73 +40,74 @@ export default class Chat extends Component {
     this.endParty = this.endParty.bind(this);
     this.leaveParty = this.leaveParty.bind(this);
     this.shareParty = this.shareParty.bind(this);
+    this.syncPlayer = this.syncPlayer.bind(this);
     this.videoEventListener = this.videoEventListener.bind(this);
     this.mVideoListener = new VideoListener(this.videoEventListener);
+    this.port = null;
   }
   componentDidMount() {
-    window.addEventListener('keyup', (ev) => {
+    window.onkeypress = (ev) => {
       if (ev.code === 'Enter') {
         if (ev.target === document.getElementById('chat-message-box-input')) {
           if (ev.shiftKey === false) {
+            ev.preventDefault();
             const trim = this.state.newMessage.replace(/^\s+|\s+$/g, '');
             if (trim !== '') this.sendMessage(trim);
             this.setState({ newMessage: '' });
           }
         }
       }
+    };
+    this.port = chrome.runtime.connect({ name: window.localStorage.getItem('watchPartyRoomId') });
+    this.port.postMessage({
+      type: 'INIT',
+      roomId: window.localStorage.getItem('watchPartyRoomId'),
+    });
+    this.port.onMessage.addListener((response) => {
+      this.setState(response);
+      if (response.player && this.state.localPlayer.status !== response.player.status) {
+        if (response.player.source !== getPlayerSource()) {
+          this.props.updateLoading(true);
+          this.props.notify('This party is for a different website');
+          goTo(Create, this.props);
+          this.props.updateLoading(false);
+        } else {
+          if (this.mVideoListener.isUpdating === false)
+            this.mVideoListener.doUpdate(response.player);
+        }
+      }
+      const pcc = document.getElementsByClassName('thread-container')[0];
+      if (pcc) pcc.scrollTop = pcc.scrollHeight;
     });
-    firebase
-      .firestore()
-      .collection('rooms')
-      .doc(window.localStorage.getItem('watchPartyRoomId'))
-      .onSnapshot(
-        (snap) => {
-          if (snap.data().player.status !== this.state.localPlayer.status) {
-            this.mVideoListener.doUpdate(snap.data().player);
-          }
-          this.setState(snap.data());
-        },
-        (err) => {}
-      );
-    firebase
-      .firestore()
-      .collection('rooms')
-      .doc(window.localStorage.getItem('watchPartyRoomId'))
-      .collection('users')
-      .onSnapshot((snap) => {
-        const isAdmin = snap.docs
-          .filter((user) => user.id === firebase.auth().currentUser.uid)[0]
-          .data().admin;
-        this.setState({ admin: isAdmin });
-      });
-    firebase
-      .firestore()
-      .collection('rooms')
-      .doc(window.localStorage.getItem('watchPartyRoomId'))
-      .collection('messages')
-      .orderBy('time')
-      .onSnapshot((snap) => {
-        this.setState({ messages: snap.docs.map((v) => ({ ...v.data(), id: v.id })) });
-        const pcc = document.getElementsByClassName('thread-container')[0];
-        if (pcc) pcc.scrollTop = pcc.scrollHeight;
-      });
     this.mVideoListener.start();
     this.props.updateLoading(false);
   }
   videoEventListener(video) {
-    const { status, url, time, source } = video;
-    if (this.state.player.status !== status) {
+    this.setState({ localPlayer: video });
+    if (
+      this.state.player.status !== video.status &&
+      video.showName &&
+      video.status !== PLAYER_STATUS.NOT_PLAYING
+    )
+      this.syncPlayer(video);
+  }
+  syncPlayer(video) {
+    const { status, showName, time, source, element } = video;
+    if (element) {
       UpdatePlayerApi({
         roomId: window.localStorage.getItem('watchPartyRoomId'),
+        showChanged: showName !== this.state.player.showName,
+        userName: window.localStorage.getItem('watchPartyUserName'),
         player: {
-          status,
-          url,
+          status: showName !== this.state.player.showName ? PLAYER_STATUS.PAUSED : status,
+          showName,
           time,
           source,
         },
       });
+    } else {
+      this.mVideoListener.start();
     }
-    this.setState({ localPlayer: video });
   }
   endParty() {
     this.props.notify('Ending party...');
@@ -111,11 +116,10 @@ export default class Chat extends Component {
       roomId: window.localStorage.getItem('watchPartyRoomId'),
     };
     DeleteRoomApi(data).then((res) => {
-      if (res.status === 200) {
-        this.props.notify('Ended party');
-        window.localStorage.removeItem('watchPartyRoomId');
-        goTo(Create, this.props);
-      }
+      this.props.notify('Ended party');
+      window.localStorage.removeItem('watchPartyRoomId');
+      goTo(Create, this.props);
+      this.props.updateLoading(false);
     });
   }
   leaveParty() {
@@ -123,14 +127,13 @@ export default class Chat extends Component {
     this.props.updateLoading(true);
     const data = {
       roomId: window.localStorage.getItem('watchPartyRoomId'),
-      uid: firebase.auth().currentUser.uid,
+      uid: window.localStorage.getItem('watchPartyUserUid'),
     };
     LeaveRoomApi(data).then((res) => {
-      if (res.status === 200) {
-        this.props.notify('Left party');
-        window.localStorage.removeItem('watchPartyRoomId');
-        goTo(Create, this.props);
-      }
+      this.props.notify('Left party');
+      window.localStorage.removeItem('watchPartyRoomId');
+      goTo(Create, this.props);
+      this.props.updateLoading(false);
     });
   }
   shareParty() {
@@ -146,7 +149,7 @@ export default class Chat extends Component {
     const data = {
       roomId: window.localStorage.getItem('watchPartyRoomId'),
       name: window.localStorage.getItem('watchPartyUserName'),
-      uid: firebase.auth().currentUser.uid,
+      uid: window.localStorage.getItem('watchPartyUserUid'),
       text: message,
       time: new Date().toISOString(),
     };
@@ -166,7 +169,6 @@ export default class Chat extends Component {
           <Button onClick={this.shareParty} startIcon={<Share />}>
             Share
           </Button>
-          <Button startIcon={<Sync />}>Sync</Button>
           <Button onClick={this.leaveParty} startIcon={<Exit />}>
             Leave
           </Button>
@@ -180,13 +182,12 @@ export default class Chat extends Component {
           <Thread messages={messages} />
         </div>
         <TextField
-          onSubmit={(e) => console.log(e)}
           multiline
           rowsMax="3"
           size="small"
           placeholder="New message... (<Enter> to send)"
           variant="outlined"
-          className="chat-message-box"
+          className="chat-message-box addFocus"
           value={newMessage}
           onChange={(e) => this.setState({ newMessage: e.target.value })}
           InputProps={{