add 3rd party radio station support #689

also add disabled property for next button

src/renderer/assets/cider-icons/stop.svg

@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="100%"
+   height="100%"
+   viewBox="0 0 34 34"
+   version="1.1"
+   xml:space="preserve"
+   style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
+   id="svg10"
+   sodipodi:docname="stop.svg"
+   inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+   id="defs14" /><sodipodi:namedview
+   id="namedview12"
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1.0"
+   inkscape:pageshadow="2"
+   inkscape:pageopacity="0.0"
+   inkscape:pagecheckerboard="0"
+   showgrid="false"
+   inkscape:snap-object-midpoints="false"
+   inkscape:zoom="24.205882"
+   inkscape:cx="17"
+   inkscape:cy="17.020656"
+   inkscape:window-width="1920"
+   inkscape:window-height="1009"
+   inkscape:window-x="-8"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="svg10"><inkscape:grid
+     type="xygrid"
+     id="grid1236" /></sodipodi:namedview>
+    
+<rect
+   style="fill:#ffffff;fill-opacity:1"
+   id="rect871"
+   width="18.01215"
+   height="19.375456"
+   x="7.9939251"
+   y="7.3122721"
+   ry="2.3134873" /></svg>

src/renderer/less/elements.less

@@ -1590,6 +1590,12 @@ input[type=checkbox][switch]:checked:active::before {
   background-image: url("./assets/repeatOne.svg");
 }
 
+.playback-button.stop {
+  background-image: url('./assets/cider-icons/stop.svg');
+  background-size: 38px;
+  background-position: center;
+}
+
 .playback-button.pause {
   background-image: url('./assets/cider-icons/pause.svg');
   background-size: 38px;
@@ -1613,6 +1619,15 @@ input[type=checkbox][switch]:checked:active::before {
   background-size: 60%;
   background-position: center;
 }
+.playback-button.disabled {
+  opacity: 0.25 !important;
+  pointer-events: none;
+  transform: none !important;
+  &:hover{
+    background-color: transparent !important;
+    transform: none !important;
+  }
+}
 
 .playback-button {
   &.navigation {

src/renderer/main/vueapp.js

@@ -658,6 +658,7 @@ const app = new Vue({
             }
 
             this.mk._bag.features['seamless-audio-transitions'] = this.cfg.audio.seamless_audio
+            this.mk._bag.features["broadcast-radio"] = true
             this.mk._services.apiManager.store.storekit._restrictedEnabled = false
             // API Fallback
             if (!this.chrome.userinfo) {
@@ -1801,6 +1802,12 @@ const app = new Vue({
                 app.skipToPreviousItem()
             }
         },
+        isDisabled() {
+            if(!app.mk.nowPlayingItem || app.mk.nowPlayingItem.attributes.playParams.kind == 'radioStation' || app.mk.queue._position + 1 == app.mk.queue.length) {
+                return true;
+            }
+            return false;
+        },
         async getNowPlayingItemDetailed(target) {
             try {
                 let u = await app.mkapi(app.mk.nowPlayingItem.playParams.kind,

src/renderer/views/app/chrome-bottom.ejs

@@ -66,14 +66,16 @@
                 <button class="playback-button previous" @click="prevButton()"
                         :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
             </div>
-            <div class="app-chrome-item">
+            <<div class="app-chrome-item display--large">
-                <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
+                <button class="playback-button stop" @click="mk.stop()" v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
+                        :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
+                <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
                         :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
                 <button class="playback-button play" @click="mk.play()" v-else
                         :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
             </div>
-            <div class="app-chrome-item">
+            <div class="app-chrome-item display--large">
-                <button class="playback-button next" @click="skipToNextItem()"
+                <button class="playback-button next" @click="skipToNextItem()" :class="isDisabled() && 'disabled'"
                         :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item">

src/renderer/views/app/chrome-top.ejs

@@ -47,13 +47,15 @@
                         :title="$root.getLz('term.previous')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
-                <button class="playback-button pause" @click="mk.pause()" v-if="mk.isPlaying"
+                <button class="playback-button stop" @click="mk.stop()" v-if="mk.isPlaying && mk.nowPlayingItem.attributes.playParams.kind == 'radioStation'"
+                        :title="$root.getLz('term.stop')" v-b-tooltip.hover></button>
+                <button class="playback-button pause" @click="mk.pause()" v-else-if="mk.isPlaying"
                         :title="$root.getLz('term.pause')" v-b-tooltip.hover></button>
                 <button class="playback-button play" @click="mk.play()" v-else
                         :title="$root.getLz('term.play')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">
-                <button class="playback-button next" @click="skipToNextItem()"
+                <button class="playback-button next" @click="skipToNextItem()" :class="isDisabled() && 'disabled'"
                         :title="$root.getLz('term.next')" v-b-tooltip.hover></button>
             </div>
             <div class="app-chrome-item display--large">

src/renderer/views/components/mediaitem-square.ejs

@@ -98,7 +98,7 @@
         async mounted() {
             await this.getBadges()
             if (typeof this.item.attributes.playParams == "object") {
-                if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1 || this.item.attributes.playParams.streamingKind == 2)) {
+                if (this.item.attributes.playParams.kind.includes("radioStation") && (this.item.attributes.playParams.streamingKind == 1)) {
                     this.unavailable = true
                 }
             } else {