netflix fixed

src/Chat.js

@@ -31,7 +31,6 @@ export default class Chat extends Component {
       newMessage: '',
       admin: null,
       player: {},
-      localPlayer: {},
       gif: false,
     };
     this.sendMessage = this.sendMessage.bind(this);
@@ -87,7 +86,6 @@ export default class Chat extends Component {
     this.props.updateLoading(false);
   }
   videoEventListener(video) {
-    this.setState({ localPlayer: video });
     this.syncPlayer(video);
   }
   syncPlayer(video) {

src/Create.js

@@ -65,7 +65,7 @@ const createRoom = async (data) => {
     userName: data.name,
     player: {
       source: getPlayerSource(),
-      status: PLAYER_STATUS.NOT_PLAYING,
+      status: PLAYER_STATUS.PAUSED,
       time: 0,
       url: '',
     },

src/VideoListener.js

@@ -12,61 +12,62 @@ export default class VideoListener {
       element: null,
     };
     this.isUpdating = false;
-    this.server = {
-      status: PLAYER_STATUS.NOT_PLAYING,
-    };
     this.listener = listener;
     this.updateStatus = this.updateStatus.bind(this);
     this.firstTimeSync = this.firstTimeSync.bind(this);
     this.doUpdate = this.doUpdate.bind(this);
     this.start = this.start.bind(this);
+    this.onpause = this.onpause.bind(this);
+    this.onplay = this.onplay.bind(this);
+    this.shouldPushSync = this.shouldPushSync.bind(this);
+  }
+  shouldPushSync() {
+    return (
+      this.isUpdating === false &&
+      this.server !== null &&
+      this.server !== undefined &&
+      this.video.element !== null &&
+      this.video.element !== undefined &&
+      this.video.status !== PLAYER_STATUS.NOT_PLAYING &&
+      (this.video.status !== this.server.status ||
+        Math.abs(this.video.element.currentTime - this.server.time) > 1.5)
+    );
   }
   updateStatus(newStatus) {
     this.video = Object.assign({}, this.video, newStatus);
-    console.log(`
+    if (this.shouldPushSync()) {
-      Server Status: ${this.server.status}\n
+      console.log(this.video);
-      Video Status: ${this.video.status}\n
-      Show Name: ${this.video.showName}\n
-      Updating: ${this.isUpdating} 
-    `);
-    if (
-      this.server.status !== this.video.status ||
-      Math.abs(this.server.time - this.video.time) > 2
-    ) {
-      if (
-        this.video.showName &&
-        !this.isUpdating &&
-        (Math.abs(this.server.time - this.video.element.currentTime) > 2 ||
-          this.server.status !== this.video.status)
-      ) {
       this.listener(this.video);
     }
   }
-  }
+  async doUpdate(serverPlayer) {
-  doUpdate(serverPlayer) {
     this.server = serverPlayer;
-
+    console.log(
-    console.log(`
+      `
-      Server Status: ${this.server.status}\n
+        isUpdating : ${this.isUpdating}\n
-      Video Status: ${this.video.status}\n
+        showName eq: ${serverPlayer.showName === this.video.showName}\n
-      Show Name: ${this.video.showName}\n
+        updatedByMe: ${serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')}
-      Updating: ${this.isUpdating} 
+      `
-    `);
+    );
-
+    if (
-    if (!this.isUpdating) {
+      this.isUpdating === false &&
+      serverPlayer.showName === this.video.showName &&
+      serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')
+    ) {
       this.isUpdating = true;
-      if (serverPlayer.updatedBy === window.localStorage.getItem('watchPartyUserUid')) {
-        this.isUpdating = false;
-        return;
-      } else {
-        // SEEK
       if (this.video.element) {
-          switch (this.video.source) {
+        // REMOVE LISTENER BEFORE SYNCING
+        this.video.element.removeEventListener('playing', this.onplay);
+        this.video.element.removeEventListener('pause', this.onpause);
+        await this.timeout(250);
+        // SEEK
+        if (Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5) {
+          switch (serverPlayer.source) {
             case PLAYER_SOURCE.NETFLIX:
               window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
               break;
             case PLAYER_SOURCE.AMAZON:
-              this.video.element.play();
+              await this.video.element.play();
               this.video.element.currentTime = serverPlayer.time;
               break;
             case PLAYER_SOURCE.DISNEY:
@@ -76,22 +77,21 @@ export default class VideoListener {
               break;
           }
         }
-        // PLAY OR PAUSE
+        // TOGGLE PLAYER STATUS
-        if (this.video.element) {
         switch (serverPlayer.status) {
           case PLAYER_STATUS.PAUSED:
-              this.video.element.pause();
+            await this.video.element.pause();
-              break;
-            case PLAYER_STATUS.NOT_PLAYING:
-              this.video.element.pause();
             break;
           case PLAYER_STATUS.PLAYING:
-              this.video.element.play();
+            await this.video.element.play();
             break;
           default:
             break;
         }
-        }
+        await this.timeout(250);
+        // RE-ADD LISTENERS FOR FUTURE SYNC
+        this.video.element.addEventListener('playing', this.onplay);
+        this.video.element.addEventListener('pause', this.onpause);
       }
       this.isUpdating = false;
     }
@@ -141,6 +141,20 @@ export default class VideoListener {
         break;
     }
   }
+  async onplay(ev) {
+    this.updateStatus({
+      status: PLAYER_STATUS.PLAYING,
+      time: this.video.element.currentTime,
+      showName: await this.getShowName(),
+    });
+  }
+  async onpause(ev) {
+    this.updateStatus({
+      status: PLAYER_STATUS.PAUSED,
+      time: this.video.element.currentTime,
+      showName: await this.getShowName(),
+    });
+  }
   async firstTimeSync(videoElement) {
     this.updateStatus({
       element: videoElement,
@@ -148,34 +162,20 @@ export default class VideoListener {
     this.updateStatus({
       showName: await this.getShowName(),
     });
-    if (videoElement.currentTime > 0 && !videoElement.paused) {
+    // if (videoElement.currentTime > 0 && !videoElement.paused) {
-      this.updateStatus({
+    //   this.updateStatus({
-        time: videoElement.currentTime,
+    //     time: videoElement.currentTime,
-        status: PLAYER_STATUS.PLAYING,
+    //     status: PLAYER_STATUS.PLAYING,
-      });
+    //   });
-    }
+    // }
-    videoElement.onplay = async (ev) => {
+    videoElement.addEventListener('playing', this.onplay);
-      this.updateStatus({
+    videoElement.addEventListener('pause', this.onpause);
-        status: PLAYER_STATUS.PLAYING,
-        time: videoElement.currentTime,
-        showName: await this.getShowName(),
-      });
-    };
-    videoElement.onpause = async (ev) =>
-      this.updateStatus({
-        status: PLAYER_STATUS.PAUSED,
-        time: videoElement.currentTime,
-        showName: await this.getShowName(),
-      });
-    // videoElement.onended = async (ev) => {
-    //   this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, showName: '', time: 0 });
-    // };
   }
   async start() {
     this.updateStatus({ source: getPlayerSource(), showName: await this.getShowName() });
     switch (this.video.source) {
       case PLAYER_SOURCE.NETFLIX:
-        const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type)getVideoPlayer().seek(e.data.time);e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
+        const seekInject = `window.seekScriptLoaded=!0;var getVideoPlayer=function(){var e=window.netflix.appContext.state.playerApp.getAPI().videoPlayer,t=e.getAllPlayerSessionIds()[0];return e.getVideoPlayerBySessionId(t)},seekInteraction=function(e){if(e.source==window){if(e.data.type&&"SEEK"==e.data.type){getVideoPlayer().pause();getVideoPlayer().seek(e.data.time);}e.data.type&&"teardown"==e.data.type&&(window.removeEventListener("message",seekInteraction,!1),window.seekScriptLoaded=!1)}};window.addEventListener("message",seekInteraction,!1);`;
         const seekInjectScript = document.createElement('script');
         seekInjectScript.text = seekInject;
         document.head.appendChild(seekInjectScript);