Skip to content

Commit 57dc16c

Browse files
arg0navtarg0navt
committed
fixed issue #4 and autoplay after init player
1 parent d6b39a7 commit 57dc16c

File tree

3 files changed

+77
-69
lines changed

3 files changed

+77
-69
lines changed

‎src/App.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ class App extends Component {
2222
<Map center={position} zoom={this.state.zoom}>
2323
{this.state.show ? (
2424
<LeafletReactTrackPlayer
25+
autoplay={false}
2526
track={this.state.demo}
2627
optionMultyIdxFn={function(p) {
2728
return p.status;

‎src/demo.js‎

Lines changed: 67 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,69 @@
11
export default [
2-
{ LOAD: 33, SPEED: 2, status: 1, t: "180927072508000", course: 0, lat: 53.22376666666667, lng: 50.745841666666664 },
3-
{ LOAD: 33, SPEED: 2, status: 1, t: "180927072508000", course: 0, lat: 53.22376666666667, lng: 50.745841666666664 },
4-
{ LOAD: 30, SPEED: 2.3, status: 1, t: "180927072523000", course: 114, lat: 53.223728333333334, lng: 50.74598666666667 },
5-
{ LOAD: 30, SPEED: 2.3, status: 1, t: "180927072529000", course: 138, lat: 53.223705, lng: 50.746021666666664 },
6-
{ LOAD: 34, SPEED: 5.7, status: 1, t: "180927072538000", course: 149, lat: 53.22365166666667, lng: 50.746075 },
7-
{ LOAD: 34, SPEED: 5.7, status: 1, t: "180927072538000", course: 149, lat: 53.22365166666667, lng: 50.746075 },
8-
{ LOAD: 45, SPEED: 5.8, status: 1, t: "180927072554000", course: 111, lat: 53.22358333333333, lng: 50.74638 },
9-
{ LOAD: 51, SPEED: 5.5, status: 1, t: "180927072608000", course: 15, lat: 53.2238, lng: 50.746478333333336 },
10-
{ LOAD: 24, SPEED: 2, status: 1, t: "180927072623000", course: 245, lat: 53.22374333333333, lng: 50.74627666666667 },
11-
{ LOAD: 22, SPEED: 0, status: 1, t: "180927072638000", course: 165, lat: 53.223725, lng: 50.746285 },
12-
{ LOAD: 19, SPEED: 0, status: 1, t: "180927074023000", course: 0, lat: 53.22374, lng: 50.746285 },
13-
{ LOAD: 27, SPEED: 1, status: 1, t: "180927074023000", course: 0, lat: 53.22374, lng: 50.746285 },
14-
{ LOAD: 35, SPEED: 6.4, status: 1, t: "180927074038000", course: 160, lat: 53.22356833333333, lng: 50.746386666666666 },
15-
{ LOAD: 35, SPEED: 6.4, status: 1, t: "180927074038000", course: 160, lat: 53.22356833333333, lng: 50.746386666666666 },
16-
{ LOAD: 35, SPEED: 6.4, status: 1, t: "180927074050000", course: 270, lat: 53.22356833333333, lng: 50.74625 },
17-
{ LOAD: 19, SPEED: 0, status: 1, t: "180927074053000", course: 0, lat: 53.22358333333333, lng: 50.74625 },
18-
{ LOAD: 23, SPEED: 1.6, status: 1, t: "180927075308000", course: 188, lat: 53.22356833333333, lng: 50.746246666666664 },
19-
{ LOAD: 34, SPEED: 5.6, status: 1, t: "180927075323000", course: 301, lat: 53.223618333333334, lng: 50.746105 },
20-
{ LOAD: 34, SPEED: 5.6, status: 1, t: "180927075329000", course: 352, lat: 53.223681666666664, lng: 50.74609 },
21-
{ LOAD: 21, SPEED: 0, status: 1, t: "180927075338000", course: 134, lat: 53.223675, lng: 50.74610166666667 },
22-
{ LOAD: 62, SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
23-
{ LOAD: 62, SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
24-
{ LOAD: 62, SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
25-
{ LOAD: 78, SPEED: 15.6, status: 1, t: "180927080953000", course: 171, lat: 53.223391666666664, lng: 50.746215 },
26-
{ LOAD: 43, SPEED: 15.8, status: 1, t: "180927081009000", course: 162, lat: 53.22277, lng: 50.746543333333335 },
27-
{ LOAD: 41, SPEED: 15.8, status: 1, t: "180927081023000", course: 154, lat: 53.22221833333333, lng: 50.746993333333336 },
28-
{ LOAD: 45, SPEED: 15.5, status: 1, t: "180927081038000", course: 141, lat: 53.22172166666667, lng: 50.747665 },
29-
{ LOAD: 45, SPEED: 15.5, status: 1, t: "180927081038000", course: 141, lat: 53.22172166666667, lng: 50.747665 },
30-
{ LOAD: 45, SPEED: 15.5, status: 1, t: "180927081050000", course: 138, lat: 53.221408333333336, lng: 50.74813 },
31-
{ LOAD: 42, SPEED: 16.5, status: 1, t: "180927081053000", course: 139, lat: 53.221245, lng: 50.74836666666667 },
32-
{ LOAD: 39, SPEED: 16.6, status: 1, t: "180927081108000", course: 146, lat: 53.220706666666665, lng: 50.74897 },
33-
{ LOAD: 39, SPEED: 16.6, status: 1, t: "180927081116000", course: 144, lat: 53.220531666666666, lng: 50.74918 },
34-
{ LOAD: 57, SPEED: 15.2, status: 1, t: "180927081123000", course: 145, lat: 53.22033666666667, lng: 50.749408333333335 },
35-
{ LOAD: 49, SPEED: 17, status: 1, t: "180927081138000", course: 140, lat: 53.21983, lng: 50.75011833333333 },
36-
{ LOAD: 57, SPEED: 15.2, status: 1, t: "180927081138000", course: 140, lat: 53.21983, lng: 50.75011833333333 },
37-
{ LOAD: 52, SPEED: 16.2, status: 1, t: "180927081153000", course: 134, lat: 53.219375, lng: 50.75090333333333 },
38-
{ LOAD: 50, SPEED: 17.4, status: 1, t: "180927081208000", course: 131, lat: 53.21893333333333, lng: 50.751751666666664 },
39-
{ LOAD: 56, SPEED: 25.2, status: 1, t: "180927081223000", course: 123, lat: 53.21850666666667, lng: 50.75283 },
40-
{ LOAD: 64, SPEED: 20.8, status: 1, t: "180927081238000", course: 119, lat: 53.21807166666667, lng: 50.75411666666667 },
41-
{ LOAD: 64, SPEED: 20.8, status: 1, t: "180927081238000", course: 119, lat: 53.21807166666667, lng: 50.75411666666667 },
42-
{ LOAD: 48, SPEED: 19.8, status: 1, t: "180927081254000", course: 119, lat: 53.217681666666664, lng: 50.75528 },
43-
{ LOAD: 51, SPEED: 19.5, status: 1, t: "180927081308000", course: 118, lat: 53.217315, lng: 50.756413333333334 },
44-
{ LOAD: 55, SPEED: 20.3, status: 1, t: "180927081324000", course: 117, lat: 53.21696166666667, lng: 50.75758 },
45-
{ LOAD: 49, SPEED: 20.5, status: 1, t: "180927081338000", course: 117, lat: 53.216595, lng: 50.75879333333334 },
46-
{ LOAD: 49, SPEED: 20.5, status: 1, t: "180927081338000", course: 117, lat: 53.216595, lng: 50.75879333333334 },
47-
{ LOAD: 51, SPEED: 20.5, status: 1, t: "180927081354000", course: 118, lat: 53.21621666666667, lng: 50.76000666666667 },
48-
{ LOAD: 51, SPEED: 20.5, status: 1, t: "180927081405000", course: 118, lat: 53.215968333333336, lng: 50.7608 },
49-
{ LOAD: 58, SPEED: 18.2, status: 1, t: "180927081408000", course: 121, lat: 53.21584, lng: 50.761155 },
50-
{ LOAD: 51, SPEED: 10.8, status: 1, t: "180927081424000", course: 115, lat: 53.21556833333333, lng: 50.762141666666665 },
51-
{ LOAD: 51, SPEED: 10.8, status: 1, t: "180927081435000", course: 115, lat: 53.215435, lng: 50.762618333333336 },
52-
{ LOAD: 30, SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
53-
{ LOAD: 30, SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
54-
{ LOAD: 30, SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
55-
{ LOAD: 43, SPEED: 11.9, status: 1, t: "180927081453000", course: 85, lat: 53.215423333333334, lng: 50.763686666666665 },
56-
{ LOAD: 28, SPEED: 8.6, status: 1, t: "180927081509000", course: 30, lat: 53.21579666666667, lng: 50.764041666666664 },
57-
{ LOAD: 44, SPEED: 4.7, status: 1, t: "180927081523000", course: 28, lat: 53.21608666666667, lng: 50.76429666666667 },
58-
{ LOAD: 44, SPEED: 4.7, status: 1, t: "180927081535000", course: 26, lat: 53.21628166666667, lng: 50.76445833333333 },
59-
{ LOAD: 52, SPEED: 11.4, status: 1, t: "180927081539000", course: 29, lat: 53.216393333333336, lng: 50.76456 },
60-
{ LOAD: 52, SPEED: 11.4, status: 1, t: "180927081539000", course: 29, lat: 53.216393333333336, lng: 50.76456 },
61-
{ LOAD: 49, SPEED: 11.7, status: 1, t: "180927081553000", course: 47, lat: 53.21669, lng: 50.76508666666667 },
62-
{ LOAD: 49, SPEED: 11.7, status: 1, t: "180927081559000", course: 70, lat: 53.21674333333333, lng: 50.76532666666667 },
63-
{ LOAD: 44, SPEED: 12.1, status: 1, t: "180927081608000", course: 65, lat: 53.216876666666664, lng: 50.765815 },
64-
{ LOAD: 50, SPEED: 12.4, status: 1, t: "180927081623000", course: 62, lat: 53.21711, lng: 50.76653666666667 },
65-
{ LOAD: 50, SPEED: 12.4, status: 1, t: "180927081623000", course: 62, lat: 53.21711, lng: 50.76653666666667 },
66-
{ LOAD: 8, SPEED: 10.7, status: 4, t: "180927081638000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
67-
{ LOAD: 8, SPEED: 10.7, status: 4, t: "180927081638000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
68-
{ LOAD: 8, SPEED: 10.7, status: 4, t: "180927081639000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
2+
{ status: 1, t: "180927072508000", course: 0, lat: 53.22376666666667, lng: 50.745841666666664 },
3+
{ status: 1, t: "180927072508000", course: 0, lat: 53.22376666666667, lng: 50.745841666666664 },
4+
{ status: 1, t: "180927072523000", course: 114, lat: 53.223728333333334, lng: 50.74598666666667 },
5+
{ status: 1, t: "180927072529000", course: 138, lat: 53.223705, lng: 50.746021666666664 },
6+
{ status: 1, t: "180927072538000", course: 149, lat: 53.22365166666667, lng: 50.746075 },
7+
{ status: 1, t: "180927072538000", course: 149, lat: 53.22365166666667, lng: 50.746075 },
8+
{ status: 1, t: "180927072554000", course: 111, lat: 53.22358333333333, lng: 50.74638 },
9+
{ status: 1, t: "180927072608000", course: 15, lat: 53.2238, lng: 50.746478333333336 },
10+
{ status: 1, t: "180927072623000", course: 245, lat: 53.22374333333333, lng: 50.74627666666667 },
11+
{ status: 1, t: "180927072638000", course: 165, lat: 53.223725, lng: 50.746285 },
12+
{ status: 1, t: "180927074023000", course: 0, lat: 53.22374, lng: 50.746285 },
13+
{ status: 1, t: "180927074023000", course: 0, lat: 53.22374, lng: 50.746285 },
14+
{ status: 1, t: "180927074038000", course: 160, lat: 53.22356833333333, lng: 50.746386666666666 },
15+
{ status: 1, t: "180927074038000", course: 160, lat: 53.22356833333333, lng: 50.746386666666666 },
16+
{ status: 1, t: "180927074050000", course: 270, lat: 53.22356833333333, lng: 50.74625 },
17+
{ SPEED: 0, status: 1, t: "180927074053000", course: 0, lat: 53.22358333333333, lng: 50.74625 },
18+
{ SPEED: 1.6, status: 1, t: "180927075308000", course: 188, lat: 53.22356833333333, lng: 50.746246666666664 },
19+
{ SPEED: 5.6, status: 1, t: "180927075323000", course: 301, lat: 53.223618333333334, lng: 50.746105 },
20+
{ SPEED: 5.6, status: 1, t: "180927075329000", course: 352, lat: 53.223681666666664, lng: 50.74609 },
21+
{ SPEED: 0, status: 1, t: "180927075338000", course: 134, lat: 53.223675, lng: 50.74610166666667 },
22+
{ SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
23+
{ SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
24+
{ SPEED: 7.9, status: 1, t: "180927080939000", course: 22, lat: 53.22372, lng: 50.74613166666666 },
25+
{ SPEED: 15.6, status: 1, t: "180927080953000", course: 171, lat: 53.223391666666664, lng: 50.746215 },
26+
{ SPEED: 15.8, status: 1, t: "180927081009000", course: 162, lat: 53.22277, lng: 50.746543333333335 },
27+
{ SPEED: 15.8, status: 1, t: "180927081023000", course: 154, lat: 53.22221833333333, lng: 50.746993333333336 },
28+
{ SPEED: 15.5, status: 1, t: "180927081038000", course: 141, lat: 53.22172166666667, lng: 50.747665 },
29+
{ SPEED: 15.5, status: 1, t: "180927081038000", course: 141, lat: 53.22172166666667, lng: 50.747665 },
30+
{ SPEED: 15.5, status: 1, t: "180927081050000", course: 138, lat: 53.221408333333336, lng: 50.74813 },
31+
{ SPEED: 16.5, status: 1, t: "180927081053000", course: 139, lat: 53.221245, lng: 50.74836666666667 },
32+
{ SPEED: 16.6, status: 1, t: "180927081108000", course: 146, lat: 53.220706666666665, lng: 50.74897 },
33+
{ SPEED: 16.6, status: 1, t: "180927081116000", course: 144, lat: 53.220531666666666, lng: 50.74918 },
34+
{ SPEED: 15.2, status: 1, t: "180927081123000", course: 145, lat: 53.22033666666667, lng: 50.749408333333335 },
35+
{ SPEED: 17, status: 1, t: "180927081138000", course: 140, lat: 53.21983, lng: 50.75011833333333 },
36+
{ SPEED: 15.2, status: 1, t: "180927081138000", course: 140, lat: 53.21983, lng: 50.75011833333333 },
37+
{ SPEED: 16.2, status: 1, t: "180927081153000", course: 134, lat: 53.219375, lng: 50.75090333333333 },
38+
{ SPEED: 17.4, status: 1, t: "180927081208000", course: 131, lat: 53.21893333333333, lng: 50.751751666666664 },
39+
{ SPEED: 25.2, status: 1, t: "180927081223000", course: 123, lat: 53.21850666666667, lng: 50.75283 },
40+
{ SPEED: 20.8, status: 1, t: "180927081238000", course: 119, lat: 53.21807166666667, lng: 50.75411666666667 },
41+
{ SPEED: 20.8, status: 1, t: "180927081238000", course: 119, lat: 53.21807166666667, lng: 50.75411666666667 },
42+
{ SPEED: 19.8, status: 1, t: "180927081254000", course: 119, lat: 53.217681666666664, lng: 50.75528 },
43+
{ SPEED: 19.5, status: 1, t: "180927081308000", course: 118, lat: 53.217315, lng: 50.756413333333334 },
44+
{ SPEED: 20.3, status: 1, t: "180927081324000", course: 117, lat: 53.21696166666667, lng: 50.75758 },
45+
{ SPEED: 20.5, status: 1, t: "180927081338000", course: 117, lat: 53.216595, lng: 50.75879333333334 },
46+
{ SPEED: 20.5, status: 1, t: "180927081338000", course: 117, lat: 53.216595, lng: 50.75879333333334 },
47+
{ SPEED: 20.5, status: 1, t: "180927081354000", course: 118, lat: 53.21621666666667, lng: 50.76000666666667 },
48+
{ SPEED: 20.5, status: 1, t: "180927081405000", course: 118, lat: 53.215968333333336, lng: 50.7608 },
49+
{ SPEED: 18.2, status: 1, t: "180927081408000", course: 121, lat: 53.21584, lng: 50.761155 },
50+
{ SPEED: 10.8, status: 1, t: "180927081424000", course: 115, lat: 53.21556833333333, lng: 50.762141666666665 },
51+
{ SPEED: 10.8, status: 1, t: "180927081435000", course: 115, lat: 53.215435, lng: 50.762618333333336 },
52+
{ SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
53+
{ SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
54+
{ SPEED: 11.3, status: 1, t: "180927081438000", course: 109, lat: 53.215378333333334, lng: 50.76288666666667 },
55+
{ SPEED: 11.9, status: 1, t: "180927081453000", course: 85, lat: 53.215423333333334, lng: 50.763686666666665 },
56+
{ SPEED: 8.6, status: 1, t: "180927081509000", course: 30, lat: 53.21579666666667, lng: 50.764041666666664 },
57+
{ SPEED: 4.7, status: 1, t: "180927081523000", course: 28, lat: 53.21608666666667, lng: 50.76429666666667 },
58+
{ SPEED: 4.7, status: 1, t: "180927081535000", course: 26, lat: 53.21628166666667, lng: 50.76445833333333 },
59+
{ SPEED: 11.4, status: 1, t: "180927081539000", course: 29, lat: 53.216393333333336, lng: 50.76456 },
60+
{ SPEED: 11.4, status: 1, t: "180927081539000", course: 29, lat: 53.216393333333336, lng: 50.76456 },
61+
{ SPEED: 11.7, status: 1, t: "180927081553000", course: 47, lat: 53.21669, lng: 50.76508666666667 },
62+
{ SPEED: 11.7, status: 1, t: "180927081559000", course: 70, lat: 53.21674333333333, lng: 50.76532666666667 },
63+
{ SPEED: 12.1, status: 1, t: "180927081608000", course: 65, lat: 53.216876666666664, lng: 50.765815 },
64+
{ SPEED: 12.4, status: 1, t: "180927081623000", course: 62, lat: 53.21711, lng: 50.76653666666667 },
65+
{ SPEED: 12.4, status: 1, t: "180927081623000", course: 62, lat: 53.21711, lng: 50.76653666666667 },
66+
{ SPEED: 10.7, status: 4, t: "180927081638000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
67+
{ SPEED: 10.7, status: 4, t: "180927081638000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
68+
{ SPEED: 10.7, status: 4, t: "180927081639000", course: 62, lat: 53.21732333333333, lng: 50.767205 },
6969
]

‎src/laeflet-react-track-player/index.js‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ class LeafletReactTrackPlayer extends MapLayer {
3636
this.state = {
3737
activePosition: props.startPosition === 0,
3838
track: props.track,
39-
active: true,
39+
active: props.autoplay,
4040
activeStream: props.streamData,
4141
durationTrack:
4242
props.progressFormat === "time"
@@ -75,7 +75,7 @@ class LeafletReactTrackPlayer extends MapLayer {
7575
this.props.customMarker &&
7676
this.props.customCourse &&
7777
this.props.track[0] &&
78-
this.props.track[0].course
78+
this.props.track[0].course !== undefined
7979
? this.props.track[0].course
8080
: null;
8181
const finishMarker = L.marker(this.props.track[0], {
@@ -90,6 +90,7 @@ class LeafletReactTrackPlayer extends MapLayer {
9090
startPosition: this.props.startPosition,
9191
defaultSpeed: this.props.defaultSpeed,
9292
});
93+
9394
this.props.leaflet.map.addLayer(snakePolyline);
9495
return {
9596
snakePolyline,
@@ -103,6 +104,7 @@ class LeafletReactTrackPlayer extends MapLayer {
103104

104105
initSnake = () => {
105106
this.leafletElement.snakePolyline.snakePlayer({
107+
play: this.state.active,
106108
fly: point => this.flyTrack(point),
107109
nextPoint: (point, index) => this.nextPoint(point, index),
108110
finish: lastPosition => this.finishTrack(lastPosition),
@@ -116,6 +118,9 @@ class LeafletReactTrackPlayer extends MapLayer {
116118
});
117119
}
118120
});
121+
if(!this.state.active) {
122+
this.leafletElement.snakePolyline.snakeStop();
123+
}
119124
this.setState({ init: true });
120125
};
121126

@@ -528,6 +533,7 @@ class LeafletReactTrackPlayer extends MapLayer {
528533
}
529534

530535
LeafletReactTrackPlayer.defaultProps = {
536+
autoplay: true,
531537
useControl: true,
532538
useInformationPanel: false,
533539
optionMultyIdxFn: function() {},
@@ -552,6 +558,7 @@ LeafletReactTrackPlayer.defaultProps = {
552558
};
553559

554560
LeafletReactTrackPlayer.propTypes = {
561+
autoplay: PropTypes.bool,
555562
track: PropTypes.arrayOf(PropTypes.object),
556563
useControl: PropTypes.bool,
557564
useInformationPanel: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),

0 commit comments

Comments
 (0)