Home Assistant Community

Lovelace: Chromecast Radio Jukebox

media_player
Tags: #<Tag:0x00007f374d3d7b48>
#18

There are two places in jukebox.js where “paper-button” should be changed to “mwc-button”

--- \Desktop\jukebox.js	Sun Feb 24 07:50:33 2019
+++ \Homeassistant Config\www\jukebox.js	Fri Feb 22 14:32:51 2019
@@ -171,7 +171,7 @@
     }
 
     buildStationSwitch(name, url) {
-        const btn = document.createElement('paper-button');
+        const btn = document.createElement('mwc-button');
         btn.stationUrl = url;
         btn.className = 'juke-toggle';
         btn.innerText = name;
@@ -270,7 +270,7 @@
         padding: 10px 20px;
     }
     
-    paper-button.juke-toggle[raised] {
+    mwc-button.juke-toggle[raised] {
         background-color: var(--primary-color);
         color: var(--text-primary-color);
     }
@@ -288,4 +288,5 @@
     return frag;
 }
 
+
 customElements.define('jukebox-card', JukeboxCard);
1 Like

#19

Yes, thanks… it worked, but why now i get this horrible color in place of the previous?

31

How to get the names of the stations like before?

0 Likes

#20

Thank you. Worked fine for me after flushing the browser cache.

0 Likes

#21

Not sure. I use two themes that both look as I expect. The default theme looks the same as your image. I am a mwc-button ignoramus, so you’ll need to find help elsewhere. Sorry.

0 Likes

#22

Will you share the two themes so i can try them?

0 Likes

#23

I just tried this one a few minutes ago and it seems to work fine with the mwc-buttons:

https://community.home-assistant.io/t/clear-theme/100464

0 Likes

#24

Just wondering if there is a way to divide or split the stations up.
Say by country, or genre, etc…

Loving this radio feature!

0 Likes

#25

I’d suggest submitting a PR to get the Git repo updated to include this

0 Likes

#26

It’s just what i asked many months ago… but never got a reply from the author… I’d like it too…

0 Likes

#27

OK, I opened a PR.

https://github.com/lukx/home-assistant-jukebox/issues/2#issue-415825578

0 Likes

#28

Can you give me the Link?

0 Likes

#29

This is awesome… my radio package failed with the new update (in the script call method) so I found this and put it in my system… i absolutely love this. Its fast and syncs perfectly through grouped speakers.

0 Likes

#30

Thank you so much for contributing this!
I was only now able to upgrade to 0.88, so it took too long for me to respond :-/
I upgraded the repository to look fine again with mwc-button, but also adapted the colors back to the original (black for non-active stations)

Thank you once again

0 Likes

#31

About grouping stations… I had originally thought about that as well but couldn’t come up with a nice way to display them, while still keeping the “80s radio pushbutton” simplicity I aimed for with the buttons.
Does anyone have an idea of how grouping stations could look like? maybe a hand-draft sketch?

0 Likes

#32

How did you divide Local Radio from Tune In? Will you share the code?

0 Likes

#33

sure

badges: []
path: radio
panel: true
cards:
  - type: horizontal-stack
    cards:
      - type: vertical-stack
        cards:
          - show_header_toggle: false
            entities:
              - type: "custom:jukebox-card"
                links:
                  - url: https://wxpnhi.xpn.org/xpnhi
                    name: 88.9
                  - url: http://16083.live.streamtheworld.com:3690/WXTUFM_SC?DIST=TuneIn&TGT=TuneIn&maxServers=2&tdtok=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImtpZCI6ImZTeXA4In0.eyJpc3MiOiJ0aXNydiIsInN1YiI6I
                    name: 92.5
                  - url: http://18363.live.streamtheworld.com/WMMRFMAACIHR_SC?dist=TuneIn&dist=TuneIn&dist=TuneIn&TGT=TuneIn&maxServers=2&tdtok=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImtpZCI6ImZTeXA4In0.eyJpc3MiOiJ0aXNyd
                    name: 93.3
                  - url: http://18853.live.streamtheworld.com:3690/WYSPFM_SC?DIST=TuneIn&TGT=TuneIn&maxServers=2&ua=RadioTime&ttag=RadioTime
                    name: 94.1
                  - url: http://20833.live.streamtheworld.com:3690/WBENFMAACIHR_SC?dist=TuneIn&dist=TuneIn&dist=TuneIn&TGT=TuneIn&maxServers=2&tdtok=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImtpZCI6ImZTeXA4In0.eyJpc3MiOiJ0aXNyd
                    name: 95.7
                  - url: https://17643.live.streamtheworld.com/WRNBFMAAC.aac?tdsdk=js-2.9&pname=TDSdk&pversion=2.9&banners=none&sbmid=d2096154-5e6f-4767-ad11-bfb96bb997fe
                    name: 100.3
                  - url: http://54.184.105.154/wbeb-wbebfmmp3-ibc2?session-id=2ddff8ba5706639e6a4dd6e5b60d0dd6&source=TuneIn&source=TuneIn&source=TuneIn
                    name: 101.1
                  - url: http://18363.live.streamtheworld.com/WMGKFMAACIHR_SC?dist=TuneIn&dist=TuneIn&dist=TuneIn&TGT=TuneIn&maxServers=2&tdtok=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiIsImtpZCI6ImZTeXA4In0.eyJpc3MiOiJ0aXNyd
                    name: 102.9
                  - url: https://17473.live.streamtheworld.com/WPHIFMAAC.aac?tdsdk=js-2.9&pname=TDSdk&pversion=2.9&banners=none&sbmid=5acec7a7-9d41-4dcf-8861-261e3be9b79c
                    name: 103.9
                entities:
                  - media_player.all_speakers
                  - media_player.downstairs_group
                  - media_player.living_room_speaker
                  - media_player.family_room_speaker
                  - media_player.basement_speaker_1
            title: Local Radio
            type: entities
          - show_header_toggle: false
            entities:
              - type: "custom:jukebox-card"
                links:
                  - url: http://rfcmedia.streamguys1.com/MusicPulse.mp3?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533328727
                    name: Today's Hits
                  - url: http://tunein4.streamguys1.com/80shtfree1?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533329056
                    name: 80s
                  - url: http://tunein4.streamguys1.com/90shtfree1?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533343177
                    name: 90s
                  - url: http://tunein4.streamguys1.com/2khtsfree1?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533329308
                    name: 2000s
                  - url: http://rfcmedia.streamguys1.com/newpophits.mp3?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533327336
                    name: Pop Hits
                  - url: http://tunein4.streamguys1.com/claltfree2
                    name: Alt Mix
                  - url: http://rfcmedia.streamguys1.com/classicrock.mp3?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533328813
                    name: Classic Hits
                  - url: http://tunein4.streamguys1.com/hhbeat?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533328852
                    name: Hip Hop
                  - url: http://rfcmedia.streamguys1.com/countryroads.mp3?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533328902
                    name: Country Roads
                  - url: http://rfcmedia.streamguys1.com/smoothjazz.mp3?aw_0_1st.playerid=RadioTime&aw_0_1st.skey=1533328952
                    name: Smooth Jazz
                  - url: http://tunein4.streamguys1.com/hhhrbfree1
                    name: Hip Hop/R&B
                  - url: http://tunein4.streamguys1.com/poolsfree1
                    name: Poolside      
                entities:
                  - media_player.all_speakers
                  - media_player.downstairs_group
                  - media_player.living_room_speaker
                  - media_player.family_room_speaker
                  - media_player.basement_speaker_1
            title: Tune In
            type: entities
      - type: vertical-stack
        cards:
          - entity: media_player.all_speakers
            artwork: cover
            hide:
              icon: true
            type: 'custom:mini-media-player'
          - entity: media_player.downstairs_group
            artwork: cover
            hide:
              icon: true
            type: 'custom:mini-media-player'
          - entity: media_player.living_room_speaker
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
          - entity: media_player.living_room_receiver
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
          - entity: media_player.family_room_speaker
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
          - entity: media_player.basement_speaker_1
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
          - entity: media_player.alyssa_room_speaker
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
          - entity: media_player.master_bedroom_speaker
            artwork: cover
            type: 'custom:mini-media-player'
            hide:
              icon: true
0 Likes

#34

all it really is is 2 separate cards using the same custom card type

0 Likes

#35

Yes, i got it… Thanks
EDIT: @rotcop4u2 How did you get the TuneIn URL’s ? They re very different from what i get… which is your method?

0 Likes

#36

@lukx I love the push button style and don’t want that changed.

My thought was maybe a way to place dividers and headers in the list of stations? Perhaps something like this:

---- Talk Radio -------
[Station 1] [Talk 2] [Capitol City Talk]

---- Classic Rock ------
[The Beast] [The Bear] [Classic Hits]

---- Top 40 -----
[Capitol FM] [Today’s Best]

Just a thought

0 Likes

#37

I used tunein via chrome browser and found the links on the developer console

0 Likes