From 041e7c77e1b6ba91de941f44cd69480d4a4dcf6a Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Sat, 9 May 2020 20:21:29 -0400 Subject: [PATCH] netflix fixed --- src/Chat.js | 2 - src/Create.js | 2 +- src/VideoListener.js | 152 +++++++++++++++++++++---------------------- 3 files changed, 77 insertions(+), 79 deletions(-) diff --git a/src/Chat.js b/src/Chat.js index e5c8d35..6acfa09 100644 --- a/src/Chat.js +++ b/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) { diff --git a/src/Create.js b/src/Create.js index 824e707..b008e2c 100644 --- a/src/Create.js +++ b/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: '', }, diff --git a/src/VideoListener.js b/src/VideoListener.js index dc85398..bc93550 100644 --- a/src/VideoListener.js +++ b/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(` - Server Status: ${this.server.status}\n - 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); - } + if (this.shouldPushSync()) { + console.log(this.video); + this.listener(this.video); } } - doUpdate(serverPlayer) { + async doUpdate(serverPlayer) { this.server = serverPlayer; - - console.log(` - Server Status: ${this.server.status}\n - Video Status: ${this.video.status}\n - Show Name: ${this.video.showName}\n - Updating: ${this.isUpdating} - `); - - if (!this.isUpdating) { + 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 && + serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid') + ) { this.isUpdating = true; - if (serverPlayer.updatedBy === window.localStorage.getItem('watchPartyUserUid')) { - this.isUpdating = false; - return; - } else { + if (this.video.element) { + // REMOVE LISTENER BEFORE SYNCING + this.video.element.removeEventListener('playing', this.onplay); + this.video.element.removeEventListener('pause', this.onpause); + await this.timeout(250); // SEEK - if (this.video.element) { - switch (this.video.source) { + 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 - if (this.video.element) { - switch (serverPlayer.status) { - case PLAYER_STATUS.PAUSED: - this.video.element.pause(); - break; - case PLAYER_STATUS.NOT_PLAYING: - this.video.element.pause(); - break; - case PLAYER_STATUS.PLAYING: - this.video.element.play(); - break; - default: - break; - } + // TOGGLE PLAYER STATUS + switch (serverPlayer.status) { + case PLAYER_STATUS.PAUSED: + await this.video.element.pause(); + break; + case PLAYER_STATUS.PLAYING: + 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) { - this.updateStatus({ - time: videoElement.currentTime, - status: PLAYER_STATUS.PLAYING, - }); - } - videoElement.onplay = async (ev) => { - this.updateStatus({ - 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 }); - // }; + // if (videoElement.currentTime > 0 && !videoElement.paused) { + // this.updateStatus({ + // time: videoElement.currentTime, + // status: PLAYER_STATUS.PLAYING, + // }); + // } + videoElement.addEventListener('playing', this.onplay); + videoElement.addEventListener('pause', this.onpause); } 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);