Replace computed with watcher; move css class definitions to app.css

client/assets/app.css

@@ -250,3 +250,12 @@ Bookshelf Label
 .abs-btn:disabled::before {
   background-color: rgba(0, 0, 0, 0.2);
 }
+
+/* Padding for toastification toasts on the bottom to not cover media player*/
+.media-player .Vue-Toastification__toast.toast-mb-40 {
+  margin-bottom: calc(var(--spacing) * 40);
+}
+
+.media-player .Vue-Toastification__toast.toast-mb-48 {
+  margin-bottom: calc(var(--spacing) * 48);
+}

client/layouts/default.vue

@@ -7,7 +7,7 @@
       <Nuxt :key="currentLang" />
     </div>
 
-    <app-media-player-container ref="mediaPlayerContainer" :class="{ 'media-player': isShowingMediaPlayer }" />
+    <app-media-player-container ref="mediaPlayerContainer" />
 
     <modals-item-edit-modal />
     <modals-collections-add-create-modal />
@@ -49,6 +49,13 @@ export default {
 
       this.$store.commit('globals/resetSelectedMediaItems', [])
       this.updateBodyClass()
+    },
+    '$store.state.streamLibraryItem'(newVal) {
+      if (newVal) {
+        document.body.classList.add('media-player')
+      } else {
+        document.body.classList.remove('media-player')
+      }
     }
   },
   computed: {
@@ -70,14 +77,6 @@ export default {
     },
     appContentMarginLeft() {
       return this.isShowingSideRail ? 80 : 0
-    },
-    isShowingMediaPlayer() {
-      if (this.$store.state.streamLibraryItem) {
-        document.body.classList.add('media-player')
-      } else {
-        document.body.classList.remove('media-player')
-      }
-      return this.$store.state.streamLibraryItem
     }
   },
   methods: {
@@ -659,14 +658,6 @@ export default {
   font-size: 14px;
 }
 
-.media-player .Vue-Toastification__toast.toast-mb-40 {
-  margin-bottom: calc(var(--spacing) * 40);
-}
-
-.media-player .Vue-Toastification__toast.toast-mb-48 {
-  margin-bottom: calc(var(--spacing) * 48);
-}
-
 #app-content {
   width: 100%;
 }