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

netflix fixed

Browse Source
This commit is contained in:
Ayushya Amitabh
2020-05-09 20:21:29 -04:00
parent ad2b2eafdf
commit 041e7c77e1
3 changed files with 77 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Chat.js
-2
View File
@@ -31,7 +31,6 @@ export default class Chat extends Component {
newMessage: '', newMessage: '',
admin: null, admin: null,
player: {}, player: {},
localPlayer: {},
gif: false, gif: false,
}; };
this.sendMessage = this.sendMessage.bind(this); this.sendMessage = this.sendMessage.bind(this);
@@ -87,7 +86,6 @@ export default class Chat extends Component {
this.props.updateLoading(false); this.props.updateLoading(false);
} }
videoEventListener(video) { videoEventListener(video) {
this.setState({ localPlayer: video });
this.syncPlayer(video); this.syncPlayer(video);
} }
syncPlayer(video) { syncPlayer(video) {
src/Create.js
+1 -1
View File
@@ -65,7 +65,7 @@ const createRoom = async (data) => {
userName: data.name, userName: data.name,
player: { player: {
source: getPlayerSource(), source: getPlayerSource(),
status: PLAYER_STATUS.NOT_PLAYING, status: PLAYER_STATUS.PAUSED,
time: 0, time: 0,
url: '', url: '',
}, },
src/VideoListener.js
+76 -76
View File
@@ -12,61 +12,62 @@ export default class VideoListener {
element: null, element: null,
}; };
this.isUpdating = false; this.isUpdating = false;
this.server = {
status: PLAYER_STATUS.NOT_PLAYING,
};
this.listener = listener; this.listener = listener;
this.updateStatus = this.updateStatus.bind(this); this.updateStatus = this.updateStatus.bind(this);
this.firstTimeSync = this.firstTimeSync.bind(this); this.firstTimeSync = this.firstTimeSync.bind(this);
this.doUpdate = this.doUpdate.bind(this); this.doUpdate = this.doUpdate.bind(this);
this.start = this.start.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) { updateStatus(newStatus) {
this.video = Object.assign({}, this.video, 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 this.listener(this.video);
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);
}
} }
} }
doUpdate(serverPlayer) { async doUpdate(serverPlayer) {
this.server = 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; this.isUpdating = true;
if (serverPlayer.updatedBy === window.localStorage.getItem('watchPartyUserUid')) { if (this.video.element) {
this.isUpdating = false; // REMOVE LISTENER BEFORE SYNCING
return; this.video.element.removeEventListener('playing', this.onplay);
} else { this.video.element.removeEventListener('pause', this.onpause);
await this.timeout(250);
// SEEK // SEEK
if (this.video.element) { if (Math.abs(serverPlayer.time - this.video.element.currentTime) > 1.5) {
switch (this.video.source) { switch (serverPlayer.source) {
case PLAYER_SOURCE.NETFLIX: case PLAYER_SOURCE.NETFLIX:
window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*'); window.postMessage({ type: 'SEEK', time: serverPlayer.time * 1000 }, '*');
break; break;
case PLAYER_SOURCE.AMAZON: case PLAYER_SOURCE.AMAZON:
this.video.element.play(); await this.video.element.play();
this.video.element.currentTime = serverPlayer.time; this.video.element.currentTime = serverPlayer.time;
break; break;
case PLAYER_SOURCE.DISNEY: case PLAYER_SOURCE.DISNEY:
@@ -76,22 +77,21 @@ export default class VideoListener {
break; break;
} }
} }
// PLAY OR PAUSE // TOGGLE PLAYER STATUS
if (this.video.element) { switch (serverPlayer.status) {
switch (serverPlayer.status) { case PLAYER_STATUS.PAUSED:
case PLAYER_STATUS.PAUSED: await this.video.element.pause();
this.video.element.pause(); break;
break; case PLAYER_STATUS.PLAYING:
case PLAYER_STATUS.NOT_PLAYING: await this.video.element.play();
this.video.element.pause(); break;
break; default:
case PLAYER_STATUS.PLAYING: break;
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; this.isUpdating = false;
} }
@@ -141,6 +141,20 @@ export default class VideoListener {
break; 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) { async firstTimeSync(videoElement) {
this.updateStatus({ this.updateStatus({
element: videoElement, element: videoElement,
@@ -148,34 +162,20 @@ export default class VideoListener {
this.updateStatus({ this.updateStatus({
showName: await this.getShowName(), 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() { async start() {
this.updateStatus({ source: getPlayerSource(), showName: await this.getShowName() }); this.updateStatus({ source: getPlayerSource(), showName: await this.getShowName() });
switch (this.video.source) { switch (this.video.source) {
case PLAYER_SOURCE.NETFLIX: 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'); const seekInjectScript = document.createElement('script');
seekInjectScript.text = seekInject; seekInjectScript.text = seekInject;
document.head.appendChild(seekInjectScript); document.head.appendChild(seekInjectScript);