Merge e49e8ce8bc into 626596b192

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

@@ -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: {
@@ -93,6 +100,7 @@ export default {
         const toastUpdateOptions = {
           content: content,
           options: {
+            toastClassName: 'toast-mb-48 lg:toast-mb-40',
             timeout: timeout,
             type: type,
             closeButton: false,
@@ -105,7 +113,13 @@ export default {
         }
         this.$toast.update(this.socketConnectionToastId, toastUpdateOptions, false)
       } else {
-        this.socketConnectionToastId = this.$toast[type](content, { position: 'bottom-center', timeout: timeout, closeButton: false, closeOnClick: timeout !== null })
+        this.socketConnectionToastId = this.$toast[type](content, {
+          toastClassName: 'toast-mb-48 lg:toast-mb-40',
+          position: 'bottom-center',
+          timeout: timeout,
+          closeButton: false,
+          closeOnClick: timeout !== null
+        })
       }
     },
     connect() {