Skip to content

Commit ffb0bba

Browse files
MarcLandisferferga
MarcLandis
and
ferferga
committed
Merge (#6): added options
* added options - show/hide devicestatus (volume / play state) - show/hide album artist * Made requested changes myself Co-authored-by: Fernando <ferferga@users.noreply.github.com>
1 parent ecc8eea commit ffb0bba

File tree

2 files changed

+78
-65
lines changed

2 files changed

+78
-65
lines changed

‎MMM-GoogleCast.js

+76-65
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ Module.register("MMM-GoogleCast",{
33
device: null,
44
hide: false,
55
animationSpeed: 3000,
6+
showDeviceStatus: true,
7+
showAlbumArtist: true,
68
},
79

810
getStyles: function() {
@@ -44,13 +46,13 @@ Module.register("MMM-GoogleCast",{
4446
{
4547
this.updateDom();
4648
}
47-
}
49+
}
4850
if (this.app && this.config.hide)
4951
{
5052
this.updateDom();
5153
this.show(this.config.animationSpeed);
5254
}
53-
}
55+
}
5456
}
5557
else if (payload.type == "mediaStatus")
5658
{
@@ -215,7 +217,7 @@ Module.register("MMM-GoogleCast",{
215217
mediaInfo.appendChild(people);
216218
mediaInfo.appendChild(artist);
217219
}
218-
if (this.albumArtist != null)
220+
if (this.albumArtist != null && this.config.showAlbumArtist)
219221
{
220222
var person = document.createElement("img");
221223
person.src = this.file("icons/person.svg");
@@ -228,72 +230,78 @@ Module.register("MMM-GoogleCast",{
228230
}
229231
}
230232
//
231-
var deviceStatus = document.createElement("div");
232-
var statusIcon = document.createElement("img");
233-
statusIcon.style = "width: 50px; height: 50px; margin-top: 40%; margin-bottom: 40%; align-self: center; margin-right: 5px; filter: invert(100%)";
234-
if (this.state == "PLAYING")
235-
{
236-
statusIcon.src = this.file("icons/play.svg");
237-
}
238-
else if (this.state == "IDLE")
239-
{
240-
statusIcon.src = this.file("icons/idle.svg");
241-
}
242-
else if (this.state == "BUFFERING")
243-
{
244-
statusIcon.src = this.file("icons/spinning.gif");
245-
statusIcon.style = "width: 50px; height: 50px; margin-top: 40%; margin-bottom: 40%; align-self: center; margin-right: 5px";
246-
}
247-
else if (this.state == "PAUSED")
248-
{
249-
statusIcon.src = this.file("icons/pause.svg");
250-
}
251-
else if (!this.media)
233+
if (this.config.showDeviceStatus)
252234
{
253-
statusIcon.style = "visibility: hidden";
254-
}
255-
deviceStatus.appendChild(statusIcon);
256-
var volumeDiv = document.createElement("div");
257-
volumeDiv.classList.add("volumeDiv");
258-
var volumeBar = document.createElement("div");
259-
if (this.volume == 0)
260-
{
261-
volumeBar.style = "visibility: hidden";
262-
}
263-
else
264-
{
265-
volumeBar.style = "background-color: white; border: 4px solid white; vertical-align: bottom; border-radius: 5px; overflow: hidden; height: " + (this.volume * 100) + "px";
266-
// volumeBar.style = "background-color: white; border: 4px solid white; vertical-align: bottom; border-radius: 5px; height: " + (this.volume * 100) + "%";
267-
}
268-
volumeDiv.appendChild(volumeBar);
269-
deviceStatus.appendChild(volumeDiv);
270-
var volumeIcon = document.createElement("img");
271-
volumeIcon.classList.add("volumeIcon");
272-
if (this.volume == 0)
273-
{
274-
volumeIcon.src = this.file("icons/volume_muted.svg");
275-
}
276-
else if (this.volume <= 0.30)
277-
{
278-
volumeIcon.src = this.file("icons/volume_low.svg");
279-
}
280-
else if (this.volume <= 0.58)
281-
{
282-
volumeIcon.src = this.file("icons/volume_medium.svg");
283-
}
284-
else if (this.volume <= 0.85)
285-
{
286-
volumeIcon.src = this.file("icons/volume_high.svg");
287-
}
288-
else if (this.volume >= 0.85)
289-
{
290-
volumeIcon.src = this.file("icons/volume_insane.svg");
235+
var deviceStatus = document.createElement("div");
236+
var statusIcon = document.createElement("img");
237+
statusIcon.style = "width: 50px; height: 50px; margin-top: 40%; margin-bottom: 40%; align-self: center; margin-right: 5px; filter: invert(100%)";
238+
if (this.state == "PLAYING")
239+
{
240+
statusIcon.src = this.file("icons/play.svg");
241+
}
242+
else if (this.state == "IDLE")
243+
{
244+
statusIcon.src = this.file("icons/idle.svg");
245+
}
246+
else if (this.state == "BUFFERING")
247+
{
248+
statusIcon.src = this.file("icons/spinning.gif");
249+
statusIcon.style = "width: 50px; height: 50px; margin-top: 40%; margin-bottom: 40%; align-self: center; margin-right: 5px";
250+
}
251+
else if (this.state == "PAUSED")
252+
{
253+
statusIcon.src = this.file("icons/pause.svg");
254+
}
255+
else if (!this.media)
256+
{
257+
statusIcon.style = "visibility: hidden";
258+
}
259+
deviceStatus.appendChild(statusIcon);
260+
var volumeDiv = document.createElement("div");
261+
volumeDiv.classList.add("volumeDiv");
262+
var volumeBar = document.createElement("div");
263+
if (this.volume == 0)
264+
{
265+
volumeBar.style = "visibility: hidden";
266+
}
267+
else
268+
{
269+
volumeBar.style = "background-color: white; border: 4px solid white; vertical-align: bottom; border-radius: 5px; overflow: hidden; height: " + (this.volume * 100) + "px";
270+
// volumeBar.style = "background-color: white; border: 4px solid white; vertical-align: bottom; border-radius: 5px; height: " + (this.volume * 100) + "%";
271+
}
272+
volumeDiv.appendChild(volumeBar);
273+
deviceStatus.appendChild(volumeDiv);
274+
var volumeIcon = document.createElement("img");
275+
volumeIcon.classList.add("volumeIcon");
276+
if (this.volume == 0)
277+
{
278+
volumeIcon.src = this.file("icons/volume_muted.svg");
279+
}
280+
else if (this.volume <= 0.30)
281+
{
282+
volumeIcon.src = this.file("icons/volume_low.svg");
283+
}
284+
else if (this.volume <= 0.58)
285+
{
286+
volumeIcon.src = this.file("icons/volume_medium.svg");
287+
}
288+
else if (this.volume <= 0.85)
289+
{
290+
volumeIcon.src = this.file("icons/volume_high.svg");
291+
}
292+
else if (this.volume >= 0.85)
293+
{
294+
volumeIcon.src = this.file("icons/volume_insane.svg");
295+
}
296+
deviceStatus.appendChild(volumeIcon);
291297
}
292-
deviceStatus.appendChild(volumeIcon);
293298
// CSS styles to grid divs
294299
mediaDetails.classList.add("mediaDetails");
295300
cover.classList.add("cover");
296-
deviceStatus.classList.add("deviceStatus");
301+
if (this.config.showDeviceStatus)
302+
{
303+
deviceStatus.classList.add("deviceStatus");
304+
}
297305
// All the elements will be appended here
298306
mediaDetails.appendChild(header);
299307
mediaDetails.appendChild(cover);
@@ -303,7 +311,10 @@ Module.register("MMM-GoogleCast",{
303311
mediaDetails.appendChild(mediaInfo);
304312
}
305313
main.appendChild(mediaDetails);
306-
main.appendChild(deviceStatus);
314+
if (this.config.showDeviceStatus)
315+
{
316+
main.appendChild(deviceStatus);
317+
}
307318
}
308319
return main;
309320
},

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,8 @@ Available options in ``config.js`` for advanced users:
7474
| ``device`` | ``null`` | Specifies the device to link in your mirror |
7575
| ``hide`` | ``false`` | Setting this to true will hide the module if no app is connected to the Google Cast device |
7676
| ``animationSpeed`` | ``3000`` | Sets the speed of the animations while hiding/showing the module |
77+
| ``showDeviceStatus`` | ``true`` | Shows or hides the device status (If media is playing, paused, buffering...) |
78+
| ``showAlbumArtist`` | ``true`` | Shows or hides the information about the album artist |
7779

7880
You can also run multiple instances of the module, one for every device do you want to track. Copy multiple times the snippet above
7981
in your ``config.js`` (one for the device) and change the ID of the device in each instance.

0 commit comments

Comments
 (0)