hina/MMM-HomeAssistant-Touch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

adds basic media_player volume handling

Browse Source
This commit is contained in:
Mathias Scherer
2021-04-05 01:10:15 +02:00
parent e6567ae330
commit fcc4430bf9
6 changed files with 124 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
UIClasses/Cover.js
View File

@@ -1,93 +1,10 @@
class Cover extends Base {
constructor(...params) {
super(...params);
this.onSliderMove = this.onSliderMove.bind(this);
this.removeSlider = this.removeSlider.bind(this);
}
getContainer() {
const entity = super.getContainer();
entity.onmousedown = (event) => {
this.addSlider(event.x, event.y);
};
entity.onpointerdown = (event) => {
this.addSlider(event.x, event.y)
}
entity.onmouseup = this.removeSlider
entity.ontouchend = this.removeSlider
return entity;
}
class Cover extends Slider {
updateState(state) {
this.name = (state.attributes || {}).friendly_name || this.id;
this.state = state.attributes.current_position;
this.render();
}
render() {
super.render();
const container = document.getElementById(this.id);
if (container) {
container.classList.add(this.state);
}
}
addSlider(offsetX, offsetY) {
const slider = document.createElement("div");
slider.id = `slider-${this.id}`;
slider.classList.add("ha-slider");
// click location minus height minus margins
slider.style.top = `calc(${offsetY}px - 60px - 200px + calc(2px * ${this.state}))`;
// click location minus width/2 minus margins
slider.style.left = `calc(${offsetX}px - 60px - 1.5rem)`;
const sliderFill = document.createElement("div");
sliderFill.id = `slider-fill-${this.id}`;
sliderFill.classList.add("ha-slider-fill");
sliderFill.style.height = `${this.state}%`;
sliderFill.innerHTML = this.state;
slider.appendChild(sliderFill);
document.body.appendChild(slider);
document.body.addEventListener("mouseup", this.removeSlider);
document.body.addEventListener("touchend", this.removeSlider)
document.body.addEventListener("mousemove", this.onSliderMove);
document.body.addEventListener("touchmove", this.onSliderMove);
this.sliderStartY = offsetY;
this.sliderState = this.state;
}
onSliderMove(event) {
let y = event.y
if(event.touches) {
y = event.touches[0].clientY
}
const sliderFill = document.getElementById(`slider-fill-${this.id}`);
if (sliderFill) {
const offset = this.sliderStartY - y;
this.sliderState = this.state + Math.round((100 / 200) * offset);
if(this.sliderState > 100) this.sliderState = 100
if(this.sliderState < 0) this.sliderState = 0
sliderFill.style.height = `${this.sliderState}%`;
sliderFill.innerHTML = this.sliderState;
}
}
removeSlider() {
const slider = document.getElementById(`slider-${this.id}`);
if (slider) {
slider.remove();
}
document.body.removeEventListener("mouseup", this.removeSlider);
document.body.removeEventListener("touchend", this.removeSlider)
document.body.removeEventListener("mousemove", this.onSliderMove);
document.body.removeEventListener("touchmove", this.onSliderMove);
this.sendNewState();
}
sendNewState() {
this.mm.sendSocketNotification("SET_COVER_POSITION", {
entity: this.id,

20
UIClasses/MediaPlayer.js Normal file
View File

@@ -0,0 +1,20 @@
class MediaPlayer extends Slider {
updateState(state) {
console.log(state)
this.name = (state.attributes || {}).friendly_name || this.id;
this.state = state.attributes.volume_level * 100;
this.render();
}
onSliderMove(event) {
super.onSliderMove(event)
this.sendNewState()
}
sendNewState() {
this.mm.sendSocketNotification("SET_MEDIAPLAYER_VOLUME", {
entity: this.id,
volume_level: this.sliderState / 100,
});
}
}

78
UIClasses/Slider.js Normal file
View File

@@ -0,0 +1,78 @@
class Slider extends Base {
constructor(...params) {
super(...params);
this.onSliderMove = this.onSliderMove.bind(this);
this.removeSlider = this.removeSlider.bind(this);
}
getContainer() {
const entity = super.getContainer();
entity.onmousedown = (event) => {
this.addSlider(event.x, event.y);
};
entity.onpointerdown = (event) => {
this.addSlider(event.x, event.y);
};
entity.onmouseup = this.removeSlider;
entity.ontouchend = this.removeSlider;
return entity;
}
addSlider(offsetX, offsetY) {
const slider = document.createElement("div");
slider.id = `slider-${this.id}`;
slider.classList.add("ha-slider");
// click location minus height minus margins
slider.style.top = `calc(${offsetY}px - 60px - 200px + calc(2px * ${this.state}))`;
// click location minus width/2 minus margins
slider.style.left = `calc(${offsetX}px - 60px - 1.5rem)`;
const sliderFill = document.createElement("div");
sliderFill.id = `slider-fill-${this.id}`;
sliderFill.classList.add("ha-slider-fill");
sliderFill.style.height = `${this.state}%`;
sliderFill.innerHTML = this.state;
slider.appendChild(sliderFill);
document.body.appendChild(slider);
document.body.addEventListener("mouseup", this.removeSlider);
document.body.addEventListener("touchend", this.removeSlider);
document.body.addEventListener("mousemove", this.onSliderMove);
document.body.addEventListener("touchmove", this.onSliderMove);
this.sliderStartY = offsetY;
this.sliderState = this.state;
}
onSliderMove(event) {
let y = event.y;
if (event.touches) {
y = event.touches[0].clientY;
}
const sliderFill = document.getElementById(`slider-fill-${this.id}`);
if (sliderFill) {
const offset = this.sliderStartY - y;
this.sliderState = this.state + Math.round((100 / 200) * offset);
if (this.sliderState > 100) this.sliderState = 100;
if (this.sliderState < 0) this.sliderState = 0;
sliderFill.style.height = `${this.sliderState}%`;
sliderFill.innerHTML = this.sliderState;
}
}
removeSlider() {
const slider = document.getElementById(`slider-${this.id}`);
if (slider) {
slider.remove();
}
document.body.removeEventListener("mouseup", this.removeSlider);
document.body.removeEventListener("touchend", this.removeSlider);
document.body.removeEventListener("mousemove", this.onSliderMove);
document.body.removeEventListener("touchmove", this.onSliderMove);
this.sendNewState();
}
sendNewState() {}
}