added indicator for unavailable mediaitems

src/renderer/less/elements.less

@@ -965,6 +965,29 @@
     font-size: 12px;
   }
 
+  .unavailable-overlay {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    bottom: 0;
+    right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+    pointer-events: none;
+    background: rgb(0 0 0 / 40%);
+    margin: 2em;
+    border-radius: 10px;
+
+    >.codicon {
+      font-size: 4em;
+      font-weight: bold;
+      opacity: 0.5;
+    }
+  }
+
   &.mediaitem-video {
     height: 200px;
     width: 240px;

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

@@ -5,6 +5,9 @@
          :style="{'--spcolor': getBgColor()}">
         <template v-if="isVisible">
             <div class="artwork-container">
+                <div class="unavailable-overlay" v-if="unavailable">
+                    <div class="codicon codicon-circle-slash"></div>
+                </div>
                 <div class="artwork" @click='app.routeView(item)'>
                     <mediaitem-artwork
                             :url="getArtworkUrl()"
@@ -73,11 +76,21 @@
                 nomenu: ["artists", "stations", "apple-curators"],
                 app: this.$root,
                 badges: this.$root.socialBadges.badgeMap,
-                itemBadges: []
+                itemBadges: [],
+                unavailable: false
             }
         },
         async mounted() {
             await this.getBadges()
+            if(typeof this.item.attributes.playParams == "object") {
+                if(this.item.attributes.playParams.kind.includes("radioStation") && this.item.attributes.requiresSubscription) {
+                    this.unavailable = true
+                }
+            }else{
+                if(this.item.type == "music-movies") {
+                    this.unavailable = true
+                }
+            }
         },
         methods: {
             getBgColor() {