ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix sync loop

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-05 22:27:52 -04:00
parent 8aef416eda
commit c4bb242d7a
3 changed files with 43 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Chat.js
+2 -9
View File
@@ -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,
src/VideoListener.js
+40 -32
View File
@@ -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: