454 lines
12 KiB
JavaScript
454 lines
12 KiB
JavaScript
import { io } from 'socket.io-client';
|
|
import { makeAutoObservable, autorun } from 'mobx';
|
|
import logger from 'App/logger';
|
|
import {
|
|
createPlayerState,
|
|
createToolPanelState,
|
|
createToggleState,
|
|
PLAYING,
|
|
PAUSED,
|
|
COMPLETED,
|
|
SOCKET_ERROR,
|
|
|
|
CRASHES,
|
|
LOGS,
|
|
NETWORK,
|
|
PERFORMANCE,
|
|
CUSTOM,
|
|
EVENTS, // last evemt +clicks
|
|
} from "./state";
|
|
import {
|
|
createListState,
|
|
createScreenListState,
|
|
} from './lists';
|
|
import Parser from './Parser';
|
|
import PerformanceList from './PerformanceList';
|
|
|
|
const HIGHEST_SPEED = 3;
|
|
|
|
|
|
export default class ImagePlayer {
|
|
_screen = null
|
|
_wrapper = null
|
|
_socket = null
|
|
toolPanel = createToolPanelState()
|
|
fullscreen = createToggleState()
|
|
lists = {
|
|
[LOGS]: createListState(),
|
|
[NETWORK]: createListState(),
|
|
[CRASHES]: createListState(),
|
|
[EVENTS]: createListState(),
|
|
[CUSTOM]: createListState(),
|
|
[PERFORMANCE]: new PerformanceList(),
|
|
}
|
|
_clicks = createListState()
|
|
_screens = createScreenListState()
|
|
|
|
constructor(session) {
|
|
this.state = createPlayerState({
|
|
endTime: session.duration.valueOf(),
|
|
});
|
|
//const canvas = document.createElement("canvas");
|
|
// this._context = canvas.getContext('2d');
|
|
// this._img = new Image();
|
|
// this._img..onerror = function(e){
|
|
// logger.log('Error during loading image:', e);
|
|
// };
|
|
// wrapper.appendChild(this._img);
|
|
session.crashes.forEach(c => this.lists[CRASHES].append(c));
|
|
session.events.forEach(e => this.lists[EVENTS].append(e));
|
|
session.stackEvents.forEach(e => this.lists[CUSTOM].append(e));
|
|
window.fetch(session.mobsUrl)
|
|
.then(r => r.arrayBuffer())
|
|
.then(b => {
|
|
new Parser(new Uint8Array(b)).parseEach(m => {
|
|
m.time = m.timestamp - session.startedAt;
|
|
try {
|
|
if (m.tp === "ios_log") {
|
|
this.lists[LOGS].append(m);
|
|
} else if (m.tp === "ios_network_call") {
|
|
this.lists[NETWORK].append(m);
|
|
// } else if (m.tp === "ios_custom_event") {
|
|
// this.lists[CUSTOM].append(m);
|
|
} else if (m.tp === "ios_click_event") {
|
|
m.time -= 600; //for graphic initiation
|
|
this._clicks.append(m);
|
|
} else if (m.tp === "ios_performance_event") {
|
|
this.lists[PERFORMANCE].append(m);
|
|
}
|
|
} catch (e) {
|
|
logger.error(e);
|
|
}
|
|
});
|
|
Object.values(this.lists).forEach(list => list.moveGetLast(0)); // In case of negative values
|
|
})
|
|
|
|
if (session.socket == null || typeof session.socket.jwt !== "string" || typeof session.socket.url !== "string") {
|
|
logger.error("No socket info found fpr session", session);
|
|
return
|
|
}
|
|
|
|
const options = {
|
|
extraHeaders: {Authorization: `Bearer ${session.socket.jwt}`},
|
|
reconnectionAttempts: 5,
|
|
//transports: ['websocket'],
|
|
}
|
|
|
|
const socket = this._socket = io(session.socket.url, options);
|
|
socket.on("connect", () => {
|
|
logger.log("Socket Connected");
|
|
});
|
|
|
|
socket.on('disconnect', (reason) => {
|
|
if (reason === 'io client disconnect') {
|
|
return;
|
|
}
|
|
logger.error("Disconnected. Reason: ", reason)
|
|
// if (reason === 'io server disconnect') {
|
|
// socket.connect();
|
|
// }
|
|
});
|
|
socket.on('connect_error', (e) => {
|
|
this.state.setState(SOCKET_ERROR);
|
|
logger.error(e)
|
|
});
|
|
|
|
socket.on('screen', (time, width, height, binary) => {
|
|
//logger.log("New Screen!", time, width, height, binary);
|
|
this._screens.insertScreen(time, width, height, binary);
|
|
});
|
|
socket.on('buffered', (playTime) => {
|
|
if (playTime === this.state.time) {
|
|
this.state.setBufferingState(false);
|
|
}
|
|
logger.log("Play ack!", playTime);
|
|
});
|
|
|
|
let startPingInterval;
|
|
socket.on('start', () => {
|
|
logger.log("Started!");
|
|
clearInterval(startPingInterval)
|
|
this.state.setBufferingState(true);
|
|
socket.emit("speed", this.state.speed);
|
|
this.play();
|
|
});
|
|
startPingInterval = setInterval(() => socket.emit("start"), 1000);
|
|
socket.emit("start");
|
|
|
|
window.addEventListener("resize", this.scale);
|
|
autorun(this.scale);
|
|
}
|
|
|
|
_click
|
|
_getClickElement() {
|
|
if (this._click != null) {
|
|
return this._click;
|
|
}
|
|
const click = document.createElement('div');
|
|
click.style.position = "absolute";
|
|
click.style.background = "#ddd";
|
|
click.style.border = "solid 4px #bbb";
|
|
click.style.borderRadius = "50%";
|
|
click.style.width = "32px";
|
|
click.style.height = "32px";
|
|
click.style.transformOrigin = "center";
|
|
return this._click = click;
|
|
}
|
|
// More sufficient ways?
|
|
_animateClick({ x, y }) {
|
|
if (this._screen == null) {
|
|
return;
|
|
}
|
|
const click = this._getClickElement();
|
|
if (click.parentElement == null) {
|
|
this._screen.appendChild(click);
|
|
}
|
|
click.style.transition = "none";
|
|
click.style.left = `${x-18}px`;
|
|
click.style.top = `${y-18}px`;
|
|
click.style.transform = "scale(1)";
|
|
click.style.opacity = "1";
|
|
setTimeout(() => {
|
|
click.style.transition = "all ease-in .5s";
|
|
click.style.transform = "scale(0)";
|
|
click.style.opacity = "0";
|
|
}, 0)
|
|
}
|
|
|
|
_updateFrame({ image, width, height }) {
|
|
// const img = new Image();
|
|
// img.onload = () => {
|
|
// this._context.drawImage(img);
|
|
// };
|
|
// img.onerror = function(e){
|
|
// logger.log('Error during loading image:', e);
|
|
// };
|
|
// this._screen.style.backgroundImage = `url(${binaryToDataURL(binaryArray)})`;
|
|
this._canvas.getContext('2d').drawImage(image, 0, 0, this._canvas.width, this._canvas.height);
|
|
}
|
|
|
|
_setTime(ts) {
|
|
ts = Math.max(Math.min(ts, this.state.endTime), 0);
|
|
this.state.setTime(ts);
|
|
Object.values(this.lists).forEach(list => list.moveGetLast(ts));
|
|
const screen = this._screens.moveGetLast(ts);
|
|
if (screen != null) {
|
|
const { dataURL, width, height } = screen;
|
|
this.state.setSize(width, height);
|
|
//imagePromise.then(() => this._updateFrame({ image, width, height }));
|
|
//this._screen.style.backgroundImage = `url(${screen.dataURL})`;
|
|
screen.loadImage.then(() => this._screen.style.backgroundImage = `url(${screen.dataURL})`);
|
|
}
|
|
const lastClick = this._clicks.moveGetLast(ts);
|
|
if (lastClick != null && lastClick.time > ts - 600) {
|
|
this._animateClick(lastClick);
|
|
}
|
|
}
|
|
|
|
attach({ wrapperId, screenId }) {
|
|
const screen = document.getElementById(screenId);
|
|
if (!screen) {
|
|
throw new Error(`ImagePlayer: No screen element found with ID "${screenId}" `);
|
|
}
|
|
const wrapper = document.getElementById(wrapperId);
|
|
if (!wrapper) {
|
|
throw new Error(`ImagePlayer: No wrapper element found with ID "${wrapperId}" `);
|
|
}
|
|
screen.style.backgroundSize = "contain";
|
|
screen.style.backgroundPosition = "center";
|
|
wrapper.style.position = "absolute";
|
|
wrapper.style.transformOrigin = "left top";
|
|
wrapper.style.top = "50%";
|
|
wrapper.style.left = "50%";
|
|
// const canvas = document.createElement('canvas');
|
|
// canvas.style.width = "300px";
|
|
// canvas.style.height = "600px";
|
|
// screen.appendChild(canvas);
|
|
// this._canvas = canvas;
|
|
this._screen = screen;
|
|
this._wrapper = wrapper;
|
|
this.scale();
|
|
}
|
|
|
|
|
|
get loading() {
|
|
return this.state.initializing;
|
|
}
|
|
|
|
get buffering() {
|
|
return this.state.buffering;
|
|
}
|
|
|
|
// get timeTravelDisabled() {
|
|
// return this.state.initializing;
|
|
// }
|
|
|
|
get controlsDisabled() {
|
|
return this.state.initializing; //|| this.state.buffering;
|
|
}
|
|
|
|
_animationFrameRequestId = null
|
|
_stopAnimation() {
|
|
cancelAnimationFrame(this._animationFrameRequestId);
|
|
}
|
|
_startAnimation() {
|
|
let prevTime = this.state.time;
|
|
let animationPrevTime = performance.now();
|
|
const nextFrame = (animationCurrentTime) => {
|
|
const {
|
|
speed,
|
|
//skip,
|
|
//skipIntervals,
|
|
endTime,
|
|
playing,
|
|
buffering,
|
|
//live,
|
|
//livePlay,
|
|
//disconnected,
|
|
//messagesLoading,
|
|
//cssLoading,
|
|
} = this.state;
|
|
|
|
const diffTime = !playing || buffering
|
|
? 0
|
|
: Math.max(animationCurrentTime - animationPrevTime, 0) * speed;
|
|
|
|
let time = prevTime + diffTime;
|
|
|
|
//const skipInterval = skip && skipIntervals.find(si => si.contains(time)); // TODO: good skip by messages
|
|
//if (skipInterval) time = skipInterval.end;
|
|
|
|
//const fmt = this.getFirstMessageTime();
|
|
//if (time < fmt) time = fmt; // ?
|
|
|
|
//const lmt = this.getLastMessageTime();
|
|
//if (livePlay && time < lmt) time = lmt;
|
|
// if (endTime < lmt) {
|
|
// update({
|
|
// endTime: lmt,
|
|
// });
|
|
// }
|
|
|
|
prevTime = time;
|
|
animationPrevTime = animationCurrentTime;
|
|
|
|
const completed = time >= endTime;
|
|
if (completed) {
|
|
this._setComplete();
|
|
} else {
|
|
|
|
// if (live && time > endTime) {
|
|
// update({
|
|
// endTime: time,
|
|
// });
|
|
// }
|
|
this._setTime(time);
|
|
this._animationFrameRequestId = requestAnimationFrame(nextFrame);
|
|
}
|
|
};
|
|
this._animationFrameRequestId = requestAnimationFrame(nextFrame);
|
|
}
|
|
|
|
|
|
scale = () => {
|
|
const { height, width } = this.state; // should be before any return for mobx observing
|
|
if (this._wrapper === null) return;
|
|
const parent = this._wrapper.parentElement;
|
|
if (parent === null) return;
|
|
let s = 1;
|
|
const { offsetWidth, offsetHeight } = parent;
|
|
|
|
s = Math.min(offsetWidth / width, (offsetHeight - 20) / height);
|
|
if (s > 1) {
|
|
s = 1;
|
|
} else {
|
|
s = Math.round(s * 1e3) / 1e3;
|
|
}
|
|
|
|
this._wrapper.style.transform = `scale(${ s }) translate(-50%, -50%)`;
|
|
this._wrapper.style.width = width + 'px';
|
|
this._wrapper.style.height = height + 'px';
|
|
// this._canvas.style.width = width + 'px';
|
|
// this._canvas.style.height = height + 'px';
|
|
}
|
|
|
|
_setComplete() {
|
|
this.state.setStatus(COMPLETED);
|
|
this._setTime(this.state.endTime);
|
|
if (this._socket != null) {
|
|
this._socket.emit("pause");
|
|
}
|
|
}
|
|
|
|
|
|
_pause() {
|
|
this._stopAnimation();
|
|
this.state.setStatus(PAUSED);
|
|
}
|
|
|
|
pause = () => {
|
|
this._pause();
|
|
if (this._socket != null) {
|
|
this._socket.emit("pause");
|
|
}
|
|
}
|
|
|
|
_play() {
|
|
if (!this.state.playing) {
|
|
this._startAnimation();
|
|
}
|
|
this.state.setStatus(PLAYING);
|
|
}
|
|
play = () => {
|
|
this._play()
|
|
if (this._socket != null) {
|
|
this._socket.emit("resume");
|
|
}
|
|
}
|
|
|
|
_jump(ts) {
|
|
if (this.state.playing) {
|
|
this._stopAnimation();
|
|
this._setTime(ts);
|
|
this._startAnimation();
|
|
} else {
|
|
this._setTime(ts);
|
|
this.state.setStatus(PAUSED); // for the case when completed
|
|
}
|
|
}
|
|
jump = (ts) => {
|
|
ts = Math.round(ts); // Should be integer
|
|
this._jump(ts);
|
|
if (this._socket != null) {
|
|
this.state.setBufferingState(true);
|
|
console.log("Send play on jump!", ts)
|
|
this._socket.emit("jump", ts);
|
|
}
|
|
}
|
|
|
|
togglePlay = () => {
|
|
if (this.state.playing) {
|
|
this.pause()
|
|
} else {
|
|
if (this.state.completed) {
|
|
//this.state.time = 0;
|
|
this.jump(0)
|
|
}
|
|
this.play()
|
|
}
|
|
}
|
|
backTenSeconds = () => {
|
|
this.jump(Math.max(this.state.time - 10000, 0));
|
|
}
|
|
forthTenSeconds = () => {
|
|
this.jump(Math.min(this.state.time + 10000, this.state.endTime));
|
|
}
|
|
|
|
_setSpeed(speed) {
|
|
if (this._socket != null) {
|
|
this._socket.emit("speed", speed);
|
|
}
|
|
this.state.setSpeed(speed)
|
|
}
|
|
|
|
toggleSpeed = () => {
|
|
const speed = this.state.speed;
|
|
this._setSpeed(speed < HIGHEST_SPEED ? speed + 1 : 1);
|
|
}
|
|
|
|
speedUp = () => {
|
|
const speed = this.state.speed;
|
|
this._setSpeed(Math.min(HIGHEST_SPEED, speed + 1));
|
|
}
|
|
|
|
speedDown = () => {
|
|
const speed = this.state.speed;
|
|
this._setSpeed(Math.max(1, speed - 1));
|
|
}
|
|
|
|
togglePanel = (key) => {
|
|
this.toolPanel.toggle(key);
|
|
setTimeout(() => this.scale(), 0);
|
|
}
|
|
|
|
closePanel = () => {
|
|
this.toolPanel.close();
|
|
setTimeout(() => this.scale(), 0);
|
|
}
|
|
|
|
toggleFullscreen = (flag = true) => {
|
|
this.fullscreen.toggle(flag);
|
|
setTimeout(() => this.scale(), 0);
|
|
}
|
|
|
|
|
|
clean() {
|
|
this._stopAnimation();
|
|
if (this._socket != null) {
|
|
//this._socket.emit("close");
|
|
this._socket.close();
|
|
}
|
|
this._screens.clean();
|
|
}
|
|
}
|
|
|