From 40c8925193ffcfc38ad58915281bdde11d8f073f Mon Sep 17 00:00:00 2001
From: booploops <49113086+booploops@users.noreply.github.com>
Date: Thu, 10 Mar 2022 00:30:24 -0800
Subject: [PATCH] unreleased songs will now display properly

---
 src/renderer/less/elements.css                | 1538 +++++++++++++++++
 src/renderer/less/elements.less               |    5 +
 .../views/components/mediaitem-list-item.ejs  |   39 +-
 3 files changed, 1570 insertions(+), 12 deletions(-)
 create mode 100644 src/renderer/less/elements.css

diff --git a/src/renderer/less/elements.css b/src/renderer/less/elements.css
new file mode 100644
index 00000000..4c1a2bb1
--- /dev/null
+++ b/src/renderer/less/elements.css
@@ -0,0 +1,1538 @@
+.md-select {
+  padding: 6px;
+  border-radius: 6px;
+  border: 1px solid rgba(200, 200, 200, 0.1);
+  border-top: 1px solid rgba(100, 100, 100, 0.5);
+  font-family: inherit;
+  font-size: 14px;
+  background: rgba(100, 100, 100, 0.25);
+  color: #eee;
+}
+.md-select option {
+  font-size: 1em;
+  font-family: inherit;
+  padding: 8px 16px;
+  background: #404040;
+}
+.md-select optgroup {
+  background: #2c2c2c;
+}
+.md-select:focus {
+  outline: solid 1px var(--selected);
+}
+.md-btn {
+  font-family: inherit;
+  background: rgba(100, 100, 100, 0.25);
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 14px;
+  border: 1px solid rgba(100, 100, 100, 0.35);
+  border-top: 1px solid rgba(100, 100, 100, 0.5);
+  color: #eee;
+  white-space: nowrap;
+  transition: transform 0.2s var(--appleEase), box-shadow 0.2s var(--appleEase);
+}
+.md-btn.md-btn-block {
+  display: block;
+  width: 100%;
+}
+.md-btn.md-btn-glyph {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.md-btn.md-btn-primary {
+  background: #ff2b52a6;
+  color: white;
+  border: 1px solid rgba(220, 53, 69, 0.25);
+  border-top: 1px solid rgba(220, 53, 69, 0.5);
+}
+.md-btn.md-btn-small {
+  padding: 6px 8px;
+  font-size: 13px;
+}
+.md-btn:hover {
+  filter: brightness(125%);
+}
+.md-btn:active {
+  filter: brightness(75%);
+  transform: scale(0.98);
+  transition: transform 0s var(--appleEase), box-shadow 0.2s var(--appleEase);
+}
+.md-btn.md-btn-icon {
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+}
+.md-btn.md-btn-icon > img {
+  margin: 0px 16px 0px 0px;
+  pointer-events: none;
+}
+.md-btn.md-btn-icon > .md-btn-text {
+  margin: 0px;
+}
+.btn-group {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.btn-group > .md-btn {
+  border-radius: 0px;
+  width: 100%;
+}
+.btn-group > .md-btn:first-child {
+  border-top-left-radius: 6px;
+  border-bottom-left-radius: 6px;
+}
+.btn-group > .md-btn:last-child {
+  border-top-right-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+.btn-group > .md-btn:not(:first-child):not(:last-child) {
+  border-radius: 0px;
+}
+.md-close-btn {
+  -webkit-mask-image: url("ameres://icons/webui/close.svg");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  background-color: white;
+  opacity: 0.75;
+  -webkit-mask-size: contain;
+  height: 18px;
+  width: 18px;
+}
+.md-ico-play {
+  content: url("assets/play.svg");
+  width: 10px;
+  height: 12px;
+  margin-right: 1px;
+  align-self: center;
+}
+.md-ico-shuffle {
+  content: url("assets/shuffle.svg");
+  width: 1em;
+  height: 1em;
+  margin-right: 1px;
+  margin-bottom: -2px;
+  align-self: center;
+}
+.md-ico-remove {
+  content: url("assets/feather/x-circle-white.svg");
+  width: 16px;
+  height: 16px;
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+.md-ico-add {
+  content: url("assets/feather/plus-circle-white.svg");
+  width: 1em;
+  height: 1em;
+  margin-right: 1px;
+  margin-bottom: -1.5px;
+  align-self: center;
+}
+.reload-btn {
+  background: rgba(86, 86, 86, 0.52);
+  border-radius: 100%;
+  width: 32px;
+  height: 32px;
+  border: 0px;
+  appearance: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.reload-btn:hover {
+  background: rgba(86, 86, 86, 0.8);
+  cursor: pointer;
+}
+.reload-btn > svg {
+  height: 50%;
+  color: #eee;
+}
+.wr-btn {
+  font-family: inherit;
+  appearance: none;
+  border: 0px;
+  border-radius: 6px;
+  padding: 8px;
+  font-weight: 600;
+  background: rgba(80, 80, 80, 0.7);
+  color: white;
+}
+.cd-btn-seeall {
+  background: transparent;
+  border: 0px;
+  color: var(--keyColor);
+  font-family: inherit;
+  font-weight: 500;
+  font-size: 16px;
+  border-radius: 4px;
+  padding: 6px;
+}
+.cd-btn-seeall:hover {
+  cursor: pointer;
+  background: rgba(200, 200, 200, 0.1);
+}
+.mediaitem-artwork {
+  border-radius: var(--mediaItemRadius);
+  overflow: hidden;
+  flex: 0 0 auto;
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url("https://beta.music.apple.com/assets/product/MissingArtworkMusic.svg");
+  background-size: cover;
+  background-position: center;
+}
+.mediaitem-artwork .animatedartwork-view-box {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.mediaitem-artwork .animatedartwork-view-box .animated {
+  position: absolute;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.mediaitem-artwork .animatedartwork-view-box .animated video {
+  width: 100%;
+  height: 100%;
+}
+.mediaitem-artwork.rounded {
+  border-radius: 100%;
+}
+.mediaitem-artwork.rounded::after {
+  border-radius: 100%;
+}
+.mediaitem-artwork::after {
+  content: "";
+  box-shadow: var(--mediaItemShadow);
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-radius: inherit;
+}
+.mediaitem-artwork img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: -webkit-optimize-contrast;
+  pointer-events: none;
+}
+.mediaitem-artwork.no-shadow {
+  box-shadow: none;
+}
+.mediaitem-artwork.no-shadow::after {
+  display: none;
+}
+.mediaitem-artwork.subtle-shadow {
+  box-shadow: var(--mediaItemShadow-ShadowSubtle);
+}
+.mediaitem-artwork.shadow {
+  box-shadow: var(--mediaItemShadow-Shadow);
+}
+/* queue item */
+.cd-queue-item {
+  border-bottom: 1px solid rgba(200, 200, 200, 0.1);
+  padding: 8px;
+}
+.cd-queue-item .row,
+.cd-queue-item .col {
+  padding: 0px;
+  margin: 0px;
+}
+.cd-queue-item .artwork {
+  width: 32px;
+  height: 32px;
+  flex: 0 0 auto;
+}
+.cd-queue-item.selected {
+  background: var(--selected);
+}
+.cd-queue-item:active {
+  background: var(--selected-click);
+  color: #eee;
+}
+.cd-queue-item .queue-info {
+  display: flex;
+  flex-direction: column;
+}
+.cd-queue-item .queue-info .queue-title {
+  font-size: 14px;
+}
+.cd-queue-item .queue-info .queue-subtitle {
+  font-size: 13px;
+  opacity: 0.85;
+}
+/* horizontal media scroller */
+.cd-hmedia-scroller::-webkit-scrollbar-thumb {
+  box-shadow: none;
+}
+.cd-hmedia-scroller:hover::-webkit-scrollbar-thumb {
+  box-shadow: inset 0px 0px 10px 10px rgba(200, 200, 200, 0.5);
+}
+.cd-hmedia-scroller.hmedia-scroller-card .mediaitem-card {
+  margin: 16px;
+}
+/* mediaitem-list-item */
+.cd-mediaitem-list-item {
+  width: 100%;
+  height: 60px;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: center-between;
+  align-items: center;
+  border-radius: var(--mediaItemRadius);
+  /* CSS.gg
+  */
+}
+.cd-mediaitem-list-item .artwork {
+  height: 42px;
+  width: 42px;
+  border-radius: var(--mediaItemRadius);
+  object-fit: cover;
+  object-position: center;
+  flex: 0 0 auto;
+  background-repeat: no-repeat;
+  margin: 12px;
+  border: 0px;
+  outline: none;
+  position: relative;
+  overflow: hidden;
+}
+.cd-mediaitem-list-item .artwork .overlay-play {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  appearance: none;
+  border: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0px;
+  z-index: 5;
+  cursor: pointer;
+}
+.cd-mediaitem-list-item .artwork .overlay-play:hover {
+  opacity: 1;
+}
+.cd-mediaitem-list-item .artwork .overlay-play:active {
+  background: var(--selected-click);
+}
+.cd-mediaitem-list-item .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-list-item .info-rect {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  flex-grow: 1;
+}
+.cd-mediaitem-list-item .title {
+  width: 100%;
+}
+.cd-mediaitem-list-item .subtitle {
+  width: 90%;
+  font-size: 0.8em;
+  opacity: 0.7;
+}
+.cd-mediaitem-list-item .duration {
+  min-width: 60px;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cd-mediaitem-list-item .metainfo {
+  min-width: 145px;
+  text-align: center;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cd-mediaitem-list-item .explicit-icon {
+  background-image: url("assets/explicit.svg");
+  height: 12px;
+  width: 36px;
+  filter: contrast(0);
+  background-repeat: no-repeat;
+}
+@keyframes load-bar {
+  10% {
+    box-shadow: inset 0 -4px 0;
+  }
+  20% {
+    box-shadow: inset 0 -10px 0;
+  }
+  30% {
+    box-shadow: inset 0 -12px 0;
+  }
+  40% {
+    box-shadow: inset 0 -8px 0;
+  }
+  50% {
+    box-shadow: inset 0 -4px 0;
+  }
+  60% {
+    box-shadow: inset 0 -6px 0;
+  }
+  80% {
+    box-shadow: inset 0 -12px 0;
+  }
+  90% {
+    box-shadow: inset 0 -6px 0;
+  }
+  to {
+    box-shadow: inset 0 -2px 0;
+  }
+}
+.cd-mediaitem-list-item .loadbar-sound,
+.cd-mediaitem-list-item .loadbar-sound::after,
+.cd-mediaitem-list-item .loadbar-sound::before {
+  animation: load-bar 1.3s ease infinite alternate;
+  box-sizing: border-box;
+  width: 3px;
+  height: 28px;
+  box-shadow: inset 0 -12px 0;
+}
+.cd-mediaitem-list-item .loadbar-sound {
+  margin-left: 22px;
+  margin-top: -16px;
+  position: relative;
+  transform: scale(var(--load-bar, 1));
+  color: var(--keyColor);
+  display: block;
+}
+.cd-mediaitem-list-item .loadbar-sound::after,
+.cd-mediaitem-list-item .loadbar-sound::before {
+  content: "";
+  position: absolute;
+  bottom: 0;
+}
+.cd-mediaitem-list-item .loadbar-sound::before {
+  left: -4.5px;
+  animation-delay: -2.4s;
+}
+.cd-mediaitem-list-item .loadbar-sound::after {
+  right: -4.2px;
+  animation-delay: -3.7s;
+}
+.cd-mediaitem-list-item .isLibrary {
+  flex: 0 0 auto;
+  width: 40px;
+  text-align: center;
+}
+.cd-mediaitem-list-item .isLibrary button {
+  appearance: none;
+  border: 0px;
+  background: transparent;
+  cursor: pointer;
+  filter: contrast(0.8);
+}
+.cd-mediaitem-list-item:hover {
+  background: rgba(200, 200, 200, 0.1);
+  box-shadow: var(--mediaItemShadow);
+}
+.cd-mediaitem-list-item:hover .overlay-play {
+  opacity: 1;
+}
+.cd-mediaitem-list-item.mediaitem-selected {
+  background: var(--selected);
+  box-shadow: var(--mediaItemShadow);
+}
+.cd-mediaitem-list-item:active {
+  background: var(--selected-click);
+  box-shadow: var(--mediaItemShadow);
+  color: #eee;
+}
+.cd-mediaitem-list-item.disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+.cd-mediaitem-list-item.compact {
+  height: 40px;
+  font-size: 13px;
+}
+.cd-mediaitem-list-item.compact .artwork {
+  display: none;
+}
+.cd-mediaitem-list-item.compact .info-rect {
+  padding-left: 1em;
+}
+/* mediaitem-hrect */
+.cd-mediaitem-hrect {
+  background: rgba(255, 255, 255, 0.18);
+  width: 264px;
+  height: 100px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.cd-mediaitem-hrect .artwork {
+  height: 70px;
+  width: 70px;
+  background: blue;
+  border-radius: var(--mediaItemRadius);
+  background: var(--artwork);
+  background-size: contain;
+  flex: 0 0 auto;
+  background-repeat: no-repeat;
+  margin: 18px;
+}
+.cd-mediaitem-hrect .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-hrect .info-rect {
+  width: 100%;
+}
+.cd-mediaitem-hrect .title {
+  width: 100%;
+  text-align: center;
+}
+.cd-mediaitem-hrect .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+/* mediaitem-square-sp */
+.cd-mediaitem-square-sp {
+  --spcolor: var("");
+  width: 190px;
+  height: 245px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 6px;
+  margin-left: 10px;
+  cursor: pointer;
+  background-color: var(--spcolor);
+}
+.cd-mediaitem-square-sp .artwork {
+  height: 190px;
+  width: 190px;
+  background: blue;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: var(--artwork);
+  background-size: cover;
+  flex: 0 0 auto;
+  margin: 6px;
+  margin-top: 0px;
+}
+.cd-mediaitem-square-sp .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-square-sp .artwork:hover {
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset;
+}
+.cd-mediaitem-square-sp .title {
+  width: 90%;
+  text-align: center;
+}
+.cd-mediaitem-square-sp .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay {
+  z-index: 3;
+}
+.cd-mediaitem-square-sp > .cd-mediaitem-square-large-overlay:hover {
+  opacity: 1;
+}
+.cd-mediaitem-square-sp + .cd-mediaitem-square-large-overlay {
+  pointer-events: none;
+}
+.cd-mediaitem-square-sp:hover + .cd-mediaitem-square-large-overlay {
+  opacity: 1;
+}
+.cd-mediaitem-square-sp:hover {
+  box-shadow: rgba(0, 0, 0, 0.5) 0 0 0 1000000px inset;
+}
+/* mediaitem-square-large */
+.cd-mediaitem-square-large {
+  width: 190px;
+  height: 250px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 6px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.cd-mediaitem-square-large > * {
+  z-index: inherit;
+}
+.cd-mediaitem-square-large .artwork {
+  height: 190px;
+  width: 190px;
+  background: blue;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: var(--artwork);
+  background-size: cover;
+  flex: 0 0 auto;
+  margin: 6px;
+  margin-top: 0px;
+}
+.cd-mediaitem-square-large-overlay {
+  position: absolute;
+  width: 190px;
+  float: right;
+  height: 250px;
+  top: 0px;
+  margin: 10px;
+  margin-top: 0px;
+  opacity: 0;
+}
+.cd-mediaitem-square-large-overlay > * {
+  pointer-events: auto;
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay {
+  z-index: 3;
+}
+.cd-mediaitem-square-large > .cd-mediaitem-square-large-overlay:hover {
+  opacity: 1;
+}
+.cd-mediaitem-square-large + .cd-mediaitem-square-large-overlay {
+  pointer-events: none;
+}
+.cd-mediaitem-square-large:hover + .cd-mediaitem-square-large-overlay {
+  opacity: 1;
+}
+.cd-mediaitem-square-large .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-square-large .title {
+  width: 90%;
+  text-align: center;
+}
+.cd-mediaitem-square-large .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+/* mediaitem-mvview */
+/* mediaitem-mvview */
+.cd-mediaitem-mvview {
+  width: 300px;
+  height: 250px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: flex-start;
+  align-items: center;
+  border-radius: 6px;
+  margin-left: 10px;
+  cursor: pointer;
+}
+.cd-mediaitem-mvview > * {
+  z-index: inherit;
+}
+.cd-mediaitem-mvview .artwork {
+  height: 172px;
+  width: 300px;
+  background: blue;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  background: var(--artwork);
+  background-size: cover;
+  flex: 0 0 auto;
+  margin: 6px;
+  margin-top: 0px;
+}
+.cd-mediaitem-mvview-overlay {
+  position: absolute;
+  width: 300px;
+  float: right;
+  height: 250px;
+  top: 0px;
+  margin: 10px;
+  margin-top: 0px;
+  opacity: 0;
+}
+.cd-mediaitem-mvview-overlay > * {
+  pointer-events: auto;
+}
+.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay {
+  z-index: 3;
+}
+.cd-mediaitem-mvview > .cd-mediaitem-mvview-overlay:hover {
+  opacity: 1;
+}
+.cd-mediaitem-mvview + .cd-mediaitem-mvview-overlay {
+  pointer-events: none;
+}
+.cd-mediaitem-mvview:hover + .cd-mediaitem-mvview-overlay {
+  opacity: 1;
+}
+.cd-mediaitem-mvview .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-mvview .title {
+  width: 90%;
+  text-align: center;
+}
+.cd-mediaitem-mvview .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+/* mediaitem-square */
+.cd-mediaitem-square {
+  width: 220px;
+  height: 238px;
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+}
+.cd-mediaitem-square .artwork-container {
+  position: relative;
+}
+.cd-mediaitem-square .artwork-container .artwork {
+  height: 190px;
+  width: 190px;
+  background: blue;
+  border-radius: var(--mediaItemRadius);
+  background: var(--artwork);
+  background-size: cover;
+  flex: 0 0 auto;
+  margin: 6px;
+  cursor: pointer;
+}
+.cd-mediaitem-square .artwork-container .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.cd-mediaitem-square .artwork-container .badge-container {
+  transition: opacity 0.1s var(--appleEase);
+  opacity: 1;
+}
+.cd-mediaitem-square .artwork-container .badge-container .socialBadge {
+  width: 32px;
+  height: 32px;
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  border-radius: 100%;
+  overflow: hidden;
+  z-index: 2;
+  pointer-events: none;
+}
+.cd-mediaitem-square .artwork-container > .play-btn,
+.cd-mediaitem-square .artwork-container > .menu-btn {
+  opacity: 0;
+  appearance: none;
+  padding: 0px;
+  border: 0px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  background: rgba(50, 50, 50, 0.7);
+  cursor: pointer;
+  transition: opacity 0.1s var(--appleEase);
+}
+.cd-mediaitem-square .artwork-container > .play-btn :hover,
+.cd-mediaitem-square .artwork-container > .menu-btn :hover {
+  border-radius: 50%;
+  background: rgba(250, 0, 0, 0.7);
+}
+.cd-mediaitem-square .artwork-container > .play-btn {
+  position: absolute;
+  bottom: 14px;
+  left: 14px;
+  z-index: 2;
+}
+.cd-mediaitem-square .artwork-container > .menu-btn {
+  position: absolute;
+  bottom: 14px;
+  right: 14px;
+  z-index: 2;
+}
+.cd-mediaitem-square .artwork-container:hover > .badge-container {
+  opacity: 0;
+}
+.cd-mediaitem-square .artwork-container:hover > .play-btn,
+.cd-mediaitem-square .artwork-container:hover > .menu-btn {
+  opacity: 1;
+}
+.cd-mediaitem-square .info-rect {
+  width: 90%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.cd-mediaitem-square .title {
+  width: 100%;
+  text-align: center;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.cd-mediaitem-square .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+}
+.cd-mediaitem-square .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: rgba(0, 0, 0, 0.4);
+  margin: 2em;
+  border-radius: 10px;
+}
+.cd-mediaitem-square .unavailable-overlay > .codicon {
+  font-size: 4em;
+  font-weight: bold;
+  opacity: 0.5;
+}
+.cd-mediaitem-square.mediaitem-video {
+  height: 200px;
+  width: 240px;
+}
+.cd-mediaitem-square.mediaitem-video .artwork {
+  height: 120px;
+  width: 212px;
+}
+.cd-mediaitem-square.mediaitem-brick {
+  height: 200px;
+  width: 240px;
+}
+.cd-mediaitem-square.mediaitem-brick .artwork {
+  height: 123px;
+  width: 220px;
+}
+.cd-mediaitem-square.mediaitem-small {
+  width: 140px;
+  height: 180px;
+}
+.cd-mediaitem-square.mediaitem-small .artwork {
+  height: 128px;
+  width: 128px;
+}
+.cd-mediaitem-square.mediaitem-card {
+  background: #ccc;
+  background: var(--spcolor);
+  height: 298px;
+  width: 230px;
+  max-width: 250px;
+  max-height: 500px;
+  overflow: hidden;
+  position: relative;
+  border-radius: calc(var(--mediaItemRadius) * 2);
+  box-shadow: var(--mediaItemShadow-ShadowSubtle);
+}
+.cd-mediaitem-square.mediaitem-card .artwork {
+  width: 230px;
+  height: 230px;
+  overflow: hidden;
+  border-radius: 0px;
+  margin: 0;
+}
+.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork {
+  border-radius: 0px;
+}
+.cd-mediaitem-square.mediaitem-card .artwork .mediaitem-artwork::after {
+  box-shadow: unset;
+}
+.cd-mediaitem-square.mediaitem-card .info-rect-card {
+  padding: 10px 10px 14px;
+  position: relative;
+  width: 100%;
+}
+.cd-mediaitem-square.mediaitem-card .info-rect-card::before {
+  background: var(--bgartwork);
+  content: "";
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  position: absolute;
+  background-size: cover;
+  background-position: bottom;
+  z-index: 0;
+  opacity: 1;
+  filter: brightness(0.5) blur(50px) saturate(180%);
+}
+.cd-mediaitem-square.mediaitem-card .title {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.9em;
+  font-weight: 500;
+  z-index: 1;
+}
+.cd-mediaitem-square.mediaitem-card .subtitle {
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.75em;
+  width: 100%;
+  display: flex;
+  z-index: 1;
+}
+.cd-mediaitem-square.mediaitem-card::after {
+  box-shadow: var(--mediaItemShadow);
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  border-radius: inherit;
+}
+/* mediaitem-square */
+.albums-square-containeru > * > .cd-mediaitem-square {
+  --frame: max(220px, 15vw);
+  width: var(--frame);
+  height: calc(var(--frame) * 13 / 11);
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  font-size: calc(var(--frame) / 220 * 14);
+  justify-content: center;
+  align-items: center;
+  border-radius: calc(var(--frame) / 220 * 6);
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container {
+  position: relative;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork {
+  height: calc(var(--frame) * 19 / 22);
+  width: calc(var(--frame) * 19 / 22);
+  background: blue;
+  border-radius: var(--mediaItemRadius);
+  background: var(--artwork);
+  background-size: cover;
+  flex: 0 0 auto;
+  margin: calc(var(--frame) / 220 * 6);
+  cursor: pointer;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container .artwork.round {
+  border-radius: var(--mediaItemRadiusRound);
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn,
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn {
+  opacity: 0;
+  appearance: none;
+  padding: 0px;
+  border: 0px;
+  width: calc(var(--frame) / 220 * 30);
+  height: calc(var(--frame) / 220 * 30);
+  border-radius: 50%;
+  background: rgba(50, 50, 50, 0.7);
+  cursor: pointer;
+  backdrop-filter: blur(32px) saturate(180%);
+  transition: opacity 0.1s var(--appleEase);
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .play-btn {
+  position: absolute;
+  bottom: calc(var(--frame) / 220 * 14);
+  left: calc(var(--frame) / 220 * 14);
+  z-index: 2;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container > .menu-btn {
+  position: absolute;
+  bottom: calc(var(--frame) / 220 * 14);
+  right: calc(var(--frame) / 220 * 14);
+  z-index: 2;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .play-btn,
+.albums-square-containeru > * > .cd-mediaitem-square .artwork-container:hover > .menu-btn {
+  opacity: 1;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .title {
+  width: 90%;
+  text-align: center;
+}
+.albums-square-containeru > * > .cd-mediaitem-square .subtitle {
+  width: 100%;
+  text-align: center;
+  font-size: calc(var(--frame) / 220 * 12);
+}
+.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video {
+  height: calc(var(--frame) / 220 * 200);
+  width: calc(var(--frame) / 220 * 240);
+}
+.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-video .artwork {
+  height: calc(var(--frame) / 220 * 120);
+  width: calc(var(--frame) / 220 * 212);
+}
+.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick {
+  height: calc(var(--frame) / 220 * 200);
+  width: calc(var(--frame) / 220 * 240);
+}
+.albums-square-containeru > * > .cd-mediaitem-square.mediaitem-brick .artwork {
+  height: calc(var(--frame) / 220 * 123);
+  width: calc(var(--frame));
+}
+.listitem-horizontal .cd-mediaitem-list-item {
+  width: 350px;
+  height: 60px;
+}
+.mediaitem-list-item__grid {
+  background: rgba(200, 200, 200, 0.05);
+  border-radius: 10px;
+  padding: var(--contentInnerPadding);
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+  width: 100%;
+}
+.mediaitem-list-item__grid .cd-mediaitem-list-item {
+  width: 350px;
+  height: 60px;
+}
+.mediaitem-list-item__grid::-webkit-scrollbar {
+  display: none;
+}
+.mediaitem-list-item__grid:hover::-webkit-scrollbar {
+  display: initial;
+}
+.svg-icon {
+  --color: #aaa;
+  --url: url("assets/feather/share.svg");
+  -webkit-mask-image: var(--url);
+  -webkit-mask-size: cover;
+  height: 18px;
+  width: 18px;
+  background: var(--color);
+}
+.svg-icon.inline {
+  display: inline-block;
+}
+.sidebar-icon {
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+.sidebar-icon > .svg-icon {
+  width: 100%;
+  height: 100%;
+  --color: #aaa;
+}
+.sidebar-icon > svg {
+  width: 100%;
+  height: 100%;
+  color: #aaa;
+}
+/* Switch Checkbox */
+input[type=checkbox][switch] {
+  width: 38px;
+  appearance: none;
+  border-radius: 32px;
+  height: 24px;
+  zoom: 1;
+  top: 0;
+  cursor: pointer;
+  left: 0;
+  position: relative;
+  transform: scale(1);
+  background: #8e8e93;
+  padding: 0;
+  margin: 0;
+}
+input[type=checkbox][switch]:focus,
+input[type=checkbox][switch]:active {
+  outline: none;
+}
+input[type=checkbox][switch]:checked {
+  background: var(--keyColor);
+  border: 0 solid var(--keyColor);
+  mix-blend-mode: unset;
+}
+input[type=checkbox][switch]:checked:hover {
+  background: var(--keyColor-rollover);
+}
+input[type=checkbox][switch]:checked:active {
+  background: var(--keyColor-pressed);
+}
+input[type=checkbox][switch]::before {
+  background: white;
+  width: 26px;
+  height: 26px;
+  top: -1px;
+  left: -1px;
+  position: absolute;
+  content: ' ';
+  border-radius: 32px;
+  transition: 0.1s left var(--appleEase);
+  transform: scale(0.75);
+}
+input[type=checkbox][switch]:checked::before {
+  background: white;
+  top: -1px;
+  left: 13px;
+  transition: 0.1s left var(--appleEase);
+  transform: scale(0.75);
+}
+input[type=checkbox][switch]:disabled::before {
+  opacity: 0.5;
+}
+input[type=checkbox][switch]:active::before {
+  left: 13px;
+}
+input[type=checkbox][switch]:checked:active::before {
+  left: -1px;
+}
+/* End Switch Checkbox */
+.header-text {
+  margin: 0px;
+}
+.media-item--small {
+  background: rgba(0, 0, 0, 0.25);
+  height: 162px;
+  width: 132px;
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+}
+.media-item--small .artwork {
+  background: red;
+  margin: 6px;
+  border-radius: 100%;
+  width: 90px;
+  height: 90px;
+  box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.3);
+}
+.playlist-artwork {
+  height: 190px;
+  width: 190px;
+  background: blue;
+  border-radius: 6px;
+  background: var(--artwork);
+  background-size: cover;
+  box-shadow: var(--mediaItemShadow);
+  flex: 0 0 auto;
+  margin: 6px;
+  margin-top: 0px;
+}
+.media-item--small .text {
+  font-weight: 600;
+  font-size: 0.9em;
+}
+.media-item--small .subtext {
+  font-size: 0.75em;
+}
+.player-duration-time {
+  opacity: 0.5;
+}
+.player-artwork-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.player-duration-container {
+  font-size: 0.85em;
+  font-weight: 500;
+}
+.media-artwork {
+  --artwork: url("");
+  width: 80vw;
+  height: 80vw;
+  max-height: 500px;
+  max-width: 500px;
+  background: black;
+  background-image: var(--artwork);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 8px;
+  box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55);
+  transition: transform 0.1s var(--appleEase);
+}
+.media-artwork.paused {
+  transition: transform 0.35s var(--appleEase);
+  transform: scale(0.85);
+}
+.playback-slider {
+  width: 90%;
+}
+.volume-slider {
+  width: 100%;
+}
+.volume-slider-container {
+  width: 90%;
+  margin: 0 auto;
+  padding: 0px;
+}
+.volume-slider-container .col-auto,
+.volume-slider-container .col {
+  display: flex;
+  align-items: center;
+  justify-self: center;
+  padding: 0px;
+  margin: 0px;
+}
+.playback-button {
+  font-size: 2em;
+  width: 40px;
+  height: 36px;
+  padding: 0px;
+  background: transparent;
+  border: 0px;
+  border-radius: 0px;
+  box-shadow: unset;
+  background-size: 12px;
+  background-position: center;
+  background-repeat: no-repeat;
+  opacity: 0.7;
+  border-radius: 6px;
+}
+.playback-button:active {
+  transform: scale(0.95);
+}
+.playback-button--small {
+  border-radius: 6px;
+  font-size: 1em;
+  color: inherit;
+  background-size: 14px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: transparent;
+  width: 40px;
+  height: 32px;
+  border: 0px;
+  box-shadow: unset;
+  opacity: 0.7;
+}
+.playback-button:hover,
+.playback-button--small:hover {
+  background-color: rgba(200, 200, 200, 0.1);
+}
+.playback-button:active,
+.playback-button--small:active {
+  transform: scale(0.9);
+}
+.playback-button--small.active {
+  background-color: rgba(200, 200, 200, 0.25);
+}
+.playback-button--small.search {
+  background-image: url("assets/search.svg");
+}
+.playback-button--small.cast {
+  background-image: url("assets/cast_white.svg");
+}
+.playback-button--small.miniplayer {
+  background-image: url("assets/pip.svg");
+}
+.playback-button--small.queue {
+  background-image: url("assets/list.svg");
+}
+.playback-button--small.lyrics {
+  background-image: url("assets/quote-right.svg");
+}
+.playback-button--small.shuffle {
+  background-image: url("assets/shuffle.svg");
+}
+.playback-button--small.repeat {
+  background-image: url("assets/repeat.svg");
+}
+.playback-button--small.repeat.repeatOne {
+  background-color: rgba(200, 200, 200, 0.25);
+  background-image: url("assets/repeatOne.svg");
+}
+.playback-button.pause {
+  background-image: url('assets/pause.svg');
+}
+.playback-button.play {
+  background-image: url('assets/play.svg');
+}
+.playback-button.next {
+  background-image: url('assets/forward.svg');
+}
+.playback-button.previous {
+  background-image: url('assets/backward.svg');
+}
+.playback-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.player-volume-glyph {
+  width: 32px;
+  height: 16px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: center;
+}
+.player-volume-glyph.decrease {
+  background-image: url("assets/volume.svg");
+  opacity: 0.5;
+}
+.player-volume-glyph.increase {
+  background-image: url("assets/volume-2.svg");
+  opacity: 0.5;
+}
+.player-track-info {
+  width: 90%;
+  margin: 0 auto;
+}
+.player-song-title {
+  font-size: 1.25em;
+  text-align: left;
+  margin: 0 auto;
+  font-weight: 500;
+}
+.player-song-artist {
+  font-size: 1em;
+  text-align: left;
+  margin: 0 auto;
+  color: var(--keyColor);
+  font-weight: 400;
+}
+.player-song-artist:hover {
+  cursor: pointer;
+  text-decoration: underline;
+}
+.player-more-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.player-more-button {
+  appearance: none;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 0px;
+  background: var(--keyColor);
+  cursor: pointer;
+  box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16);
+  color: white;
+  font-weight: bold;
+  padding: 0px;
+  font-size: 16px;
+}
+.back-button {
+  width: 40px;
+  height: 40px;
+  background-color: transparent;
+  background-size: 16px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: url("assets/arrow-left.svg");
+  border: 0px;
+  border-radius: 0px;
+}
+.header-text {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}
+.list-entry-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  font-size: 1em;
+  font-family: inherit;
+}
+.list-entry {
+  display: flex;
+  align-items: center;
+  /* justify-content: space-between; */
+  padding: 12px;
+  font-size: 1em;
+  font-family: inherit;
+  border-bottom: 1px solid rgba(255 255 255 / 0.1);
+  cursor: pointer;
+}
+.list-entry-image {
+  --artwork: url("");
+  width: 64px;
+  height: 64px;
+  background: var(--artwork);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 8px;
+  box-shadow: inset 0px 0px 0px 1px rgba(200, 200, 200, 0.16), 0 8px 40px rgba(0, 0, 0, 0.55);
+}
+.list-entry-image.artist {
+  border-radius: 50%;
+}
+.list-entry-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  margin-left: 12px;
+}
+.list-entry-name {
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+  width: 100%;
+}
+.list-entry-artist {
+  font-size: 12px;
+  overflow: hidden;
+  width: 100%;
+}
+.list-entry .handle {
+  height: 100%;
+  width: 28px;
+  background: var(--keyColor);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.artist-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px 0px;
+  border-radius: 4px;
+  color: white;
+  font-size: 1em;
+  font-weight: 500;
+  cursor: pointer;
+  padding: 8px;
+}
+.artist-chip:hover {
+  background: var(--selected);
+}
+.artist-chip .artist-chip__follow {
+  appearance: none;
+  border: 0;
+  height: 32px;
+  width: 32px;
+  background: #ffffff0f;
+  margin: 0px 0px 0px 10px;
+  font-weight: bold;
+  color: white;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  cursor: pointer;
+  flex: 0 0 32px;
+}
+.artist-chip .artist-chip__follow:hover {
+  background: var(--selected);
+}
+.artist-chip .artist-chip__image {
+  width: 32px;
+  height: 32px;
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+  border-radius: 100%;
+  overflow: hidden;
+  margin: 0px 12px 0px 0px;
+  pointer-events: none;
+  flex: 0 0 32px;
+}
+.artist-chip .artist-chip__image .mediaitem-artwork {
+  border-radius: inherit;
+}
+.artist-chip .artist-chip__name {
+  pointer-events: none;
+}
+.search-panel {
+  background: rgba(0, 0, 0, 0.5);
+}
+.search-header {
+  position: absolute;
+  width: 100%;
+  z-index: 1;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-bottom: 1px solid rgba(200, 200, 200, 0.08);
+}
+.connection-error-panel {
+  background: rgba(0, 0, 0, 0.5);
+}
+.search-type-container {
+  display: flex;
+}
+.search-type-button {
+  background: rgba(20, 20, 20, 0.85);
+  border-radius: 50px;
+  color: white;
+  border: 0px;
+  box-shadow: unset;
+  font-family: inherit;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  margin: 8px;
+  margin-top: 0px;
+  margin-bottom: 0px;
+}
+.search-type-button.active {
+  background: var(--keyColor);
+}
+.search-tab-container {
+  overflow: auto;
+  white-space: nowrap;
+  overflow-y: hidden;
+}
+.search-body-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.search-body {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding-top: 220px;
+}
+.search-tab {
+  background: rgba(20, 20, 20, 0.85);
+  border-radius: 50px;
+  color: white;
+  border: 0px;
+  box-shadow: unset;
+  font-family: inherit;
+  padding: 8px 16px;
+  font-size: 14px;
+  font-weight: 500;
+}
+.search-tab.active {
+  background: var(--keyColor);
+}
diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index afed7b74..fd2176fc 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -547,6 +547,11 @@
     color: #eee;
   }
 
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
   //  list item compact
   &.compact {
     height: 40px;
diff --git a/src/renderer/views/components/mediaitem-list-item.ejs b/src/renderer/views/components/mediaitem-list-item.ejs
index 8625e392..2053b41a 100644
--- a/src/renderer/views/components/mediaitem-list-item.ejs
+++ b/src/renderer/views/components/mediaitem-list-item.ejs
@@ -2,12 +2,12 @@
     <div v-observe-visibility="{callback: visibilityChanged}"
          @contextmenu="contextMenu"
          @click="select"
-         :data-id="item.attributes.playParams.id ?? item.id"
+         :data-id="itemId"
          :data-type="getDataType()"
          :data-index="index"
          :data-guid="guid"
-         :data-islibrary="this.item.attributes.playParams.isLibrary ?? false"
-         :key="item.attributes.playParams.id ?? item.id"
+         :data-islibrary="isLibrary"
+         :key="itemId"
          class="cd-mediaitem-list-item"
          @mouseenter="checkLibrary"
          @mouseover="showInLibrary = true"
@@ -26,12 +26,12 @@
                         <%- include("../svg/play.svg") %>
                     </button>
                 </div>
-                <div v-if="!(app.mk.isPlaying && (((app.mk.nowPlayingItem._songId ?? (app.mk.nowPlayingItem.songId ?? app.mk.nowPlayingItem.id ))  == item.attributes.playParams.id) || (app.mk.nowPlayingItem.id  == item.id ))) && showIndex" :style="{display: ((showIndex && !showInLibrary) ? 'block' : 'none'), 'margin-left':'11px'}">
+                <div v-if="!(app.mk.isPlaying && (((app.mk.nowPlayingItem._songId ?? (app.mk.nowPlayingItem.songId ?? app.mk.nowPlayingItem.id ))  == itemId) || (app.mk.nowPlayingItem.id  == item.id ))) && showIndex" :style="{display: ((showIndex && !showInLibrary) ? 'block' : 'none'), 'margin-left':'11px'}">
                     <div>
                         <div>{{ (item.attributes && !showIndexPlaylist) ? (item.attributes.trackNumber ?? '') : ((index * 1 + 1 ) ?? '')}}</div>
                     </div>
                 </div>
-                <div v-if="app.mk.isPlaying && (((app.mk.nowPlayingItem._songId ?? (app.mk.nowPlayingItem.songId ?? app.mk.nowPlayingItem.id ))  == item.attributes.playParams.id) || (app.mk.nowPlayingItem.id == item.id))" :style="{display: (showInLibrary ? 'none' : 'block')}">
+                <div v-if="app.mk.isPlaying && (((app.mk.nowPlayingItem._songId ?? (app.mk.nowPlayingItem.songId ?? app.mk.nowPlayingItem.id ))  == itemId) || (app.mk.nowPlayingItem.id == item.id))" :style="{display: (showInLibrary ? 'none' : 'block')}">
                     <div class="loadbar-sound"></div>
                 </div>
             </div>
@@ -95,7 +95,9 @@
                 guid: this.uuidv4(),
                 app: this.$root,
                 displayDuration: true,
-                addClasses: {}
+                addClasses: {},
+                itemId: 0,
+                isLibrary: false
             }
         },
         props: {
@@ -112,6 +114,12 @@
             'class-list': { type: String, required: false, default: "" },
         },
         mounted() {
+            if (this.item.attributes.playParams) {
+                this.itemId = this.item.attributes.playParams.id ?? this.item.id;
+                this.isLibrary = this.item.attributes.playParams.isLibrary ?? false;
+            } else {
+                this.itemId = this.item.id;
+            }
             let duration = this.item.attributes.durationInMillis ?? 0
             if (duration == 0 || !this.showDuration) {
                 this.displayDuration = false
@@ -135,8 +143,11 @@
                 return this.addedToLibrary
             },
             getClasses() {
+                this.addClasses = {}
+                if(typeof this.item.attributes.playParams == "undefined") {
+                    this.addClasses["disabled"] = true
+                }
                 if (this.classList) {
-                    this.addClasses = {}
                     let classList = this.classList.split(' ')
                     for (let i = 0; i < classList.length; i++) {
                         this.addClasses[classList[i]] = true
@@ -160,10 +171,14 @@
                 return minutes + ":" + (seconds < 10 ? '0' : '') + seconds;
             },
             getDataType() {
-                if (this.item.attributes.playParams.isLibrary) {
+                if (typeof this.item.attributes.playParams != "undefined") {
+                    if (this.item.attributes.playParams.isLibrary) {
+                        return this.item.type
+                    } else {
+                        return this.item.attributes.playParams.kind
+                    }
+                }else{
                     return this.item.type
-                } else {
-                    return this.item.attributes.playParams.kind
                 }
             },
             select(e) {
@@ -537,7 +552,7 @@
                                 array[j] = temp;
                             }
                         }
-                        app.mk.setQueue({ [truekind]: [item.attributes.playParams.id ?? item.id] , parameters : {l : this.app.mklang} }).then(function () {
+                        app.mk.setQueue({ [truekind]: [item.attributes.playParams.id ?? item.id], parameters: { l: this.app.mklang } }).then(function () {
                             app.mk.play().then(function () {
                                 var playlistId = id
                                 function getPlaylist(id, isLibrary) {
@@ -597,4 +612,4 @@
             }
         }
     });
-</script>
+</script>
\ No newline at end of file