This repository has been archived by the owner on Feb 20, 2019. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
recorder.jsx
103 lines (85 loc) · 2.03 KB
/
recorder.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
'use strict';
import _ from 'lodash';
import React from 'react';
import Symbol from 'es-symbol';
import alt from 'my-alt';
import DispatcherRecorder from 'alt/utils/DispatcherRecorder';
const recorder = new DispatcherRecorder(alt);
const Recorder = React.createClass({
getInitialState() {
return {
recording : false,
snapshot : null,
events : [],
};
},
startRecording() {
this.setState({
recording : true,
snapshot : alt.takeSnapshot(),
events : [],
});
recorder.record();
},
stopRecording() {
recorder.stop();
let events = _.cloneDeep(recorder.events);
events = _.map(events, function(event) {
console.log(Symbol.keyFor(event.action));
return {
action : Symbol.keyFor(event.action),
data : event.data,
};
});
this.setState({
recording : false,
events : events,
});
},
replay() {
let data = JSON.parse(this.refs.replay.getDOMNode().value);
recorder.events = _.map(data.events, function(event) {
console.log(alt);
return {
action : Symbol.for(event.action),
data : event.data,
};
});
recorder.replay();
},
renderReplay() {
if (this.state.events.length) {
let data = JSON.stringify({
snapshot : this.state.snapshot,
events : this.state.events
});
return <input value={data} />;
} else {
return <input ref="replay" />;
}
},
renderControls() {
if (this.state.recording === true) {
return (
<div><button onClick={this.stopRecording}>Stop</button></div>
);
} else {
return (
<div>
<button onClick={this.startRecording}>Record</button>
</div>
);
}
},
render() {
console.log(this.state.events);
return (
<div style={{position : 'fixed', bottom : 0, left : 0}}>
{this.renderControls()}
{this.renderReplay()}
<button onClick={this.replay}>Replay!</button>
</div>
);
}
});
export default Recorder;