netflix fixed
This commit is contained in:
Ayushya Amitabh
@@ -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) {
|
||||
|
||||
+1
-1
@@ -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: '',
|
||||
},
|
||||
|
||||
+68
-68
@@ -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)
|
||||
) {
|
||||
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 {
|
||||
// SEEK
|
||||
if (this.video.element) {
|
||||
switch (this.video.source) {
|
||||
// REMOVE LISTENER BEFORE SYNCING
|
||||
this.video.element.removeEventListener('playing', this.onplay);
|
||||
this.video.element.removeEventListener('pause', this.onpause);
|
||||
await this.timeout(250);
|
||||
// SEEK
|
||||
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) {
|
||||
// TOGGLE PLAYER STATUS
|
||||
switch (serverPlayer.status) {
|
||||
case PLAYER_STATUS.PAUSED:
|
||||
this.video.element.pause();
|
||||
break;
|
||||
case PLAYER_STATUS.NOT_PLAYING:
|
||||
this.video.element.pause();
|
||||
await this.video.element.pause();
|
||||
break;
|
||||
case PLAYER_STATUS.PLAYING:
|
||||
this.video.element.play();
|
||||
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);
|
||||
|
||||
Reference in New Issue
Block a user