From eb97c0153624827317fd6bd82d1fb03244a8535e Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 24 Feb 2022 01:06:23 -0800
Subject: [PATCH] added indicator for unavailable mediaitems

---
 src/renderer/less/elements.less               | 23 +++++++++++++++++++
 .../views/components/mediaitem-square.ejs     | 15 +++++++++++-
 2 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index fa8c617d..54126356 100644
--- a/src/renderer/less/elements.less
+++ b/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;
diff --git a/src/renderer/views/components/mediaitem-square.ejs b/src/renderer/views/components/mediaitem-square.ejs
index ed3b5ad7..637df971 100644
--- a/src/renderer/views/components/mediaitem-square.ejs
+++ b/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() {