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: '',
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
+1 -1
View File
@@ -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
+76 -76
View File
@@ -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);