Commit 6da7a68f authored by Tomas Pettersson's avatar Tomas Pettersson 🏸
Browse files

mini player

parent 34fef643
......@@ -43,8 +43,8 @@
var player = new L.Control.Player({
"lang" : language,
"langdata" : langData,
"position": 'bottomleft'
// ,"display" : 'horizontal'
"position": 'bottomleft',
"display" : 'horizontal'
});
map.addControl(player);
......
......@@ -9,6 +9,12 @@
border: 1px solid #ddd;
border-radius: 4px;
}
.player-horizontal-padding {
padding-bottom: 0;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
}
.player-button {
width: 34px;
......@@ -18,7 +24,15 @@
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
position: relative;
bottom: 1px;
}
.player-play-progress {
font-size: 12px;
position: relative;
left: -2px;
}
.player-disable {
pointer-events: none;
......@@ -37,7 +51,21 @@
.player-horizontal {
display: inline-block;
padding-right: 5px;
min-width: 300px;
}
.player-horizontal .irs {
height: 25px;
}
.player-horizontal-control {
min-width: 130px;
}
.player-horizontal-timeselect {
min-width: 200px;
}
.player-horizontal-timeslider {
min-width: 200px;
position: relative;
bottom: 10px;
}
.player-calendar {
......
......@@ -66,6 +66,7 @@ var L;
});
self.timeDimension.on('timeload', function (time) {
self.enable();
self.playForwardIcon.innerHTML = "";
});
self.player = new L.TimeDimension.Player({
transitionTime: self.transitionTime,
......@@ -73,6 +74,19 @@ var L;
minBufferReady: 10,
loop: true
}, self.timeDimension);
self.player.on('waiting', self.onPlayerWaiting, this);
};
Player.prototype.onPlayerWaiting = function (evt) {
var self = this;
if (self.player.getSteps() > 0) {
self.playForwardIcon.classList.remove('uk-icon-pause');
self.playForwardIcon.innerHTML = '<span class="player-play-progress">' + Math.floor(evt.available / evt.buffer * 100) + '%</span>';
;
}
// if (this._buttonPlayReversePause && this._player.getSteps() < 0) {
// L.DomUtil.addClass(this._buttonPlayReversePause, 'loading');
// this._buttonPlayReversePause.innerHTML = this._getDisplayLoadingText(evt.available, evt.buffer);
// }
};
Player.prototype.getTimeDimension = function () {
return this.timeDimension;
......@@ -117,12 +131,16 @@ var L;
};
Player.prototype.addLayout = function () {
var self = this;
self.playerDiv = L.DomUtil.create('div', 'uk-margin-top player', self.container);
self.playerDiv = L.DomUtil.create('div', 'player', self.container);
var timeSelectDiv = L.DomUtil.create('div', '');
var timeSliderDiv = L.DomUtil.create('div', '');
var timeSliderWrapper = L.DomUtil.create('div', '');
var controlsDiv = L.DomUtil.create('div', 'uk-margin-top');
var controlsDiv = L.DomUtil.create('div', '');
var showGrid = false;
if (self.display == 'vertical') {
showGrid = true;
self.playerDiv.classList.add('uk-margin-top');
controlsDiv.classList.add('uk-margin-top');
timeSelectDiv.classList.add('uk-width-1-1');
timeSliderDiv.classList.add('uk-width-1-1');
controlsDiv.classList.add('uk-width-1-1');
......@@ -131,12 +149,19 @@ var L;
self.playerDiv.appendChild(controlsDiv);
}
else {
timeSliderWrapper.classList.add('uk-width-1-1');
self.playerDiv.classList.add('player-horizontal-padding');
timeSliderWrapper.classList.add('player-horizontal');
timeSliderWrapper.classList.add('uk-width-1-3');
timeSliderWrapper.classList.add('player-horizontal-timeslider');
timeSelectDiv.classList.add('player-horizontal');
timeSelectDiv.classList.add('uk-width-1-3');
timeSelectDiv.classList.add('player-horizontal-timeselect');
controlsDiv.classList.add('player-horizontal');
self.playerDiv.appendChild(timeSliderWrapper);
controlsDiv.classList.add('uk-width-1-3');
controlsDiv.classList.add('player-horizontal-control');
self.playerDiv.appendChild(controlsDiv);
self.playerDiv.appendChild(timeSelectDiv);
self.playerDiv.appendChild(timeSliderWrapper);
}
var timeSliderDiv = L.DomUtil.create('div', '', timeSliderWrapper);
$(timeSliderDiv).ionRangeSlider({
......@@ -145,7 +170,7 @@ var L;
max: +moment().utc().startOf("day").add(2, "days").format("X"),
from: +moment().utc().startOf("hour").format("X"),
step: self.interval,
grid: true,
grid: showGrid,
keyboard: true,
keyboard_step: 1,
hide_min_max: true,
......@@ -172,13 +197,13 @@ var L;
var stepStart = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepStartIcon = L.DomUtil.create('span', 'uk-icon-step-backward', stepStart);
var playBackwardButton = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var playBackwardIcon = L.DomUtil.create('span', 'uk-icon-play player-play-reverse', playBackwardButton);
self.playBackwardIcon = L.DomUtil.create('span', 'uk-icon-play player-play-reverse', playBackwardButton);
var stepBack = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepBackIcon = L.DomUtil.create('span', 'uk-icon-chevron-left', stepBack);
var stepForward = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepForwardIcon = L.DomUtil.create('span', 'uk-icon-chevron-right', stepForward);
var playForwardButton = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var playForwardIcon = L.DomUtil.create('span', 'uk-icon-play', playForwardButton);
self.playForwardIcon = L.DomUtil.create('span', 'uk-icon-play', playForwardButton);
var stepEnd = L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepEndIcon = L.DomUtil.create('span', 'uk-icon-step-forward', stepEnd);
// var calendarDiv = <HTMLDivElement>L.DomUtil.create('div', 'player-calendar', controls);
......@@ -192,10 +217,10 @@ var L;
};
var stopPlay = function () {
if (self.player.isPlaying()) {
playForwardIcon.classList.remove('uk-icon-pause');
playForwardIcon.classList.add('uk-icon-play');
playBackwardIcon.classList.remove('uk-icon-pause');
playBackwardIcon.classList.add('uk-icon-play');
self.playForwardIcon.classList.remove('uk-icon-pause');
self.playForwardIcon.classList.add('uk-icon-play');
self.playBackwardIcon.classList.remove('uk-icon-pause');
self.playBackwardIcon.classList.add('uk-icon-play');
self.player.stop();
self.timeDimension.off('timeload', playUpdate);
}
......@@ -205,8 +230,8 @@ var L;
stopPlay();
}
else {
playForwardIcon.classList.remove('uk-icon-play');
playForwardIcon.classList.add('uk-icon-pause');
self.playForwardIcon.classList.remove('uk-icon-play');
self.playForwardIcon.classList.add('uk-icon-pause');
self.player.start(1);
self.timeDimension.on('timeload', playUpdate);
}
......@@ -216,8 +241,8 @@ var L;
stopPlay();
}
else {
playBackwardIcon.classList.remove('uk-icon-play');
playBackwardIcon.classList.add('uk-icon-pause');
self.playBackwardIcon.classList.remove('uk-icon-play');
self.playBackwardIcon.classList.add('uk-icon-pause');
self.player.start(-1);
self.timeDimension.on('timeload', playUpdate);
}
......
......@@ -12,6 +12,8 @@ export class Player extends L.Control {
private onForward : Function;
private async : boolean;
private timeSelect : HTMLSelectElement;
private playBackwardIcon : HTMLSpanElement;
private playForwardIcon : HTMLSpanElement;
private interval : number;
private playerDiv : HTMLDivElement;
private transitionTime : number;
......@@ -82,16 +84,31 @@ export class Player extends L.Control {
});
self.timeDimension.on('timeload', function(time) {
self.enable();
self.playForwardIcon.innerHTML ="";
});
self.player = new L.TimeDimension.Player({
transitionTime : self.transitionTime,
buffer : 15,
minBufferReady : 10,
loop: true
}, self.timeDimension);
}, self.timeDimension);
self.player.on('waiting', self.onPlayerWaiting, this);
}
private onPlayerWaiting(evt) {
var self = this;
if (self.player.getSteps() > 0) {
self.playForwardIcon.classList.remove('uk-icon-pause');
self.playForwardIcon.innerHTML = '<span class="player-play-progress">' + Math.floor(evt.available / evt.buffer * 100) + '%</span>';;
}
// if (this._buttonPlayReversePause && this._player.getSteps() < 0) {
// L.DomUtil.addClass(this._buttonPlayReversePause, 'loading');
// this._buttonPlayReversePause.innerHTML = this._getDisplayLoadingText(evt.available, evt.buffer);
// }
}
public getTimeDimension() {
return this.timeDimension;
}
......@@ -139,12 +156,16 @@ export class Player extends L.Control {
private addLayout() {
var self = this;
self.playerDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-top player', self.container);
self.playerDiv = <HTMLDivElement>L.DomUtil.create('div', 'player', self.container);
var timeSelectDiv = <HTMLDivElement>L.DomUtil.create('div', '');
var timeSliderDiv = <HTMLDivElement>L.DomUtil.create('div', '');
var timeSliderWrapper = <HTMLDivElement>L.DomUtil.create('div', '');
var controlsDiv = <HTMLDivElement>L.DomUtil.create('div', 'uk-margin-top');
var controlsDiv = <HTMLDivElement>L.DomUtil.create('div', '');
var showGrid = false;
if (self.display == 'vertical') {
showGrid = true;
self.playerDiv.classList.add('uk-margin-top');
controlsDiv.classList.add('uk-margin-top');
timeSelectDiv.classList.add('uk-width-1-1');
timeSliderDiv.classList.add('uk-width-1-1');
controlsDiv.classList.add('uk-width-1-1');
......@@ -152,12 +173,19 @@ export class Player extends L.Control {
self.playerDiv.appendChild(timeSliderWrapper);
self.playerDiv.appendChild(controlsDiv);
} else {
timeSliderWrapper.classList.add('uk-width-1-1');
self.playerDiv.classList.add('player-horizontal-padding');
timeSliderWrapper.classList.add('player-horizontal');
timeSliderWrapper.classList.add('uk-width-1-3');
timeSliderWrapper.classList.add('player-horizontal-timeslider');
timeSelectDiv.classList.add('player-horizontal');
timeSelectDiv.classList.add('uk-width-1-3');
timeSelectDiv.classList.add('player-horizontal-timeselect');
controlsDiv.classList.add('player-horizontal');
self.playerDiv.appendChild(timeSliderWrapper);
controlsDiv.classList.add('uk-width-1-3');
controlsDiv.classList.add('player-horizontal-control');
self.playerDiv.appendChild(controlsDiv);
self.playerDiv.appendChild(timeSelectDiv);
self.playerDiv.appendChild(timeSliderWrapper);
}
var timeSliderDiv = <HTMLDivElement>L.DomUtil.create('div', '', timeSliderWrapper);
......@@ -167,7 +195,7 @@ export class Player extends L.Control {
max: +moment().utc().startOf("day").add(2,"days").format("X"),
from: +moment().utc().startOf("hour").format("X"),
step: self.interval,
grid: true,
grid: showGrid,
keyboard: true,
keyboard_step: 1,
hide_min_max: true,
......@@ -195,13 +223,13 @@ export class Player extends L.Control {
var stepStart = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepStartIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-step-backward', stepStart);
var playBackwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var playBackwardIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-play player-play-reverse', playBackwardButton);
self.playBackwardIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-play player-play-reverse', playBackwardButton);
var stepBack = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepBackIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-chevron-left', stepBack);
var stepForward = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepForwardIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-chevron-right', stepForward);
var playForwardButton = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var playForwardIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-play', playForwardButton);
self.playForwardIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-play', playForwardButton);
var stepEnd = <HTMLButtonElement>L.DomUtil.create('button', 'uk-button player-button', timeButtonGroup);
var stepEndIcon = <HTMLSpanElement>L.DomUtil.create('span', 'uk-icon-step-forward', stepEnd);
// var calendarDiv = <HTMLDivElement>L.DomUtil.create('div', 'player-calendar', controls);
......@@ -217,10 +245,10 @@ export class Player extends L.Control {
var stopPlay = function() {
if (self.player.isPlaying()) {
playForwardIcon.classList.remove('uk-icon-pause');
playForwardIcon.classList.add('uk-icon-play');
playBackwardIcon.classList.remove('uk-icon-pause');
playBackwardIcon.classList.add('uk-icon-play');
self.playForwardIcon.classList.remove('uk-icon-pause');
self.playForwardIcon.classList.add('uk-icon-play');
self.playBackwardIcon.classList.remove('uk-icon-pause');
self.playBackwardIcon.classList.add('uk-icon-play');
self.player.stop();
self.timeDimension.off('timeload', playUpdate);
}
......@@ -230,8 +258,8 @@ export class Player extends L.Control {
if (self.player.isPlaying()) {
stopPlay();
} else {
playForwardIcon.classList.remove('uk-icon-play');
playForwardIcon.classList.add('uk-icon-pause');
self.playForwardIcon.classList.remove('uk-icon-play');
self.playForwardIcon.classList.add('uk-icon-pause');
self.player.start(1);
self.timeDimension.on('timeload', playUpdate);
}
......@@ -240,8 +268,8 @@ export class Player extends L.Control {
if (self.player.isPlaying()) {
stopPlay();
} else {
playBackwardIcon.classList.remove('uk-icon-play');
playBackwardIcon.classList.add('uk-icon-pause');
self.playBackwardIcon.classList.remove('uk-icon-play');
self.playBackwardIcon.classList.add('uk-icon-pause');
self.player.start(-1);
self.timeDimension.on('timeload', playUpdate);
}
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment