From c4bb242d7a0e078b5039dd4bf00ea0843ef7320e Mon Sep 17 00:00:00 2001 From: Ayushya Amitabh Date: Tue, 5 May 2020 22:27:52 -0400 Subject: [PATCH] Fix sync loop --- functions/index.js | 2 +- src/Chat.js | 11 ++----- src/VideoListener.js | 72 ++++++++++++++++++++++++-------------------- 3 files changed, 43 insertions(+), 42 deletions(-) diff --git a/functions/index.js b/functions/index.js index 159fc49..0960550 100644 --- a/functions/index.js +++ b/functions/index.js @@ -384,7 +384,7 @@ const updatePlayer = async (req, res) => { .add({ uid: '', name: '', - text: `${userName} changed show to \n${player.showName}`, + text: `${userName} changed show \n${player.showName ? 'to ' + player.showName : ''}`, time: new Date(), }); } diff --git a/src/Chat.js b/src/Chat.js index 539dea7..b1151c8 100644 --- a/src/Chat.js +++ b/src/Chat.js @@ -16,14 +16,7 @@ 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, - getPlayerSource, - PLAYER_STATUS, -} from './Api'; +import { SendMessageApi, LeaveRoomApi, DeleteRoomApi, UpdatePlayerApi, PLAYER_STATUS } from './Api'; import { goTo } from 'route-lite'; import Create from './Create'; import VideoListener from './VideoListener'; @@ -105,7 +98,7 @@ export default class Chat extends Component { showChanged: showName !== this.state.player.showName, userName: window.localStorage.getItem('watchPartyUserName'), player: { - status: showName !== this.state.player.showName ? PLAYER_STATUS.PAUSED : status, + status, showName, time, source, diff --git a/src/VideoListener.js b/src/VideoListener.js index c121f68..77d37fd 100644 --- a/src/VideoListener.js +++ b/src/VideoListener.js @@ -11,6 +11,9 @@ export default class VideoListener { source: '', element: null, }; + this.server = { + status: PLAYER_STATUS.NOT_PLAYING, + }; this.listener = listener; this.updateStatus = this.updateStatus.bind(this); this.firstTimeSync = this.firstTimeSync.bind(this); @@ -18,23 +21,34 @@ export default class VideoListener { this.start = this.start.bind(this); } updateStatus(newStatus) { - const oldVideo = this.video; this.video = Object.assign({}, this.video, newStatus); - if (oldVideo.status !== this.video.status || Math.abs(this.video.time - oldVideo.time) > 1) - this.listener(this.video); + if (this.server.status !== this.video.status) { + if (this.video.showName) this.listener(this.video); + } } doUpdate(serverPlayer) { - // SEEK - if (serverPlayer.updatedBy !== window.localStorage.getItem('watchPartyUserUid')) { - if (this.video.element && Math.abs(this.video.time - serverPlayer.time) > 1) { + this.server = serverPlayer; + if (serverPlayer.updatedBy === window.localStorage.getItem('watchPartyUserUid')) return; + else { + // SEEK + console.log('GETTING UPDATE', serverPlayer, this.video); + if (this.video.element) { switch (this.video.source) { case PLAYER_SOURCE.NETFLIX: + if ( + this.server.status === PLAYER_STATUS.PAUSED && + this.video.status === PLAYER_STATUS.PLAYING + ) + this.video.element.pause(); window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*'); break; case PLAYER_SOURCE.AMAZON: this.video.element.play(); this.video.element.currentTime = serverPlayer.time; break; + case PLAYER_SOURCE.DISNEY: + this.video.element.currentTime = serverPlayer.time; + break; default: break; } @@ -89,29 +103,26 @@ export default class VideoListener { const hepisode = document.querySelector('.metadata-area__third-line').innerHTML; return hshow === '' && hepisode === '' ? null : hshow + '\n' + hepisode; case PLAYER_SOURCE.DISNEY: - this.video.element.click(); + this.video.element.parentElement.click(); await this.timeout(200); - const dshow = document.querySelector('.title-field').innerHTML; - const depisode = document.querySelector('.subtitle-field').innerHTML; + const dshow = document.querySelector('.title-field') + ? document.querySelector('.title-field').innerHTML + : ''; + const depisode = document.querySelector('.subtitle-field') + ? document.querySelector('.subtitle-field').innerHTML + : ''; return dshow === '' && depisode === '' ? null : dshow + '\n' + depisode; default: break; } } async firstTimeSync(videoElement) { - console.log('INSIDE FIRST TIME SYNC', videoElement); this.updateStatus({ element: videoElement, }); this.updateStatus({ showName: await this.getShowName(), }); - if (videoElement.paused) { - this.updateStatus({ - time: videoElement.currentTime, - status: PLAYER_STATUS.PAUSED, - }); - } if (videoElement.currentTime > 0 && !videoElement.paused) { this.updateStatus({ time: videoElement.currentTime, @@ -132,12 +143,12 @@ export default class VideoListener { time: videoElement.currentTime, showName: await this.getShowName(), }); - videoElement.onended = (ev) => { + videoElement.onended = async (ev) => { this.updateStatus({ status: PLAYER_STATUS.NOT_PLAYING, showName: '', time: 0 }); }; } - start() { - this.updateStatus({ source: getPlayerSource(), showName: this.getShowName() }); + 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);`; @@ -191,20 +202,17 @@ export default class VideoListener { if (disneyVideoElement) { this.firstTimeSync(disneyVideoElement); } else { - document.addEventListener('DOMNodeInserted', (e) => { - if (e.target && e.target.classList) { - if (e.target.classList.contains('btm-media-player')) { - const videoElement = document.querySelector('video.btm-media-client-element'); - if (videoElement) { - console.log(videoElement, this.video.element); - if (!this.video.element || this.video.element !== videoElement) { - console.log('FIRST TIME SYNC', videoElement); - this.firstTimeSync(videoElement); + setInterval( + this.video.element + ? null + : () => { + var dve = document.querySelector('video.btm-media-client-element'); + if (dve !== null && (this.video.element !== dve || this.video.element === null)) { + this.firstTimeSync(dve); } - } - } - } - }); + }, + 1000 + ); } break; case PLAYER_SOURCE.LOCAL: