From ad12026229bec13da656a6b7882ecaa937e8800d Mon Sep 17 00:00:00 2001 From: Brandon A Date: Wed, 29 Oct 2025 21:02:38 +0000 Subject: [PATCH 1/3] move socket toast to top of the page --- client/layouts/default.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/layouts/default.vue b/client/layouts/default.vue index 75753b214..b69c92f4b 100644 --- a/client/layouts/default.vue +++ b/client/layouts/default.vue @@ -96,7 +96,7 @@ export default { timeout: timeout, type: type, closeButton: false, - position: 'bottom-center', + position: 'top-center', onClose: () => { this.socketConnectionToastId = null }, @@ -105,7 +105,7 @@ 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, { position: 'top-center', timeout: timeout, closeButton: false, closeOnClick: timeout !== null }) } }, connect() { From 13845a43d6d5d4bd50867e5df1837fb0378172f5 Mon Sep 17 00:00:00 2001 From: Brandon A Date: Sat, 1 Nov 2025 17:20:27 +0000 Subject: [PATCH 2/3] Move error back to bottom; set to dynamically adjust the bottom margin --- client/layouts/default.vue | 29 ++++++++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/client/layouts/default.vue b/client/layouts/default.vue index b69c92f4b..9396b1ae4 100644 --- a/client/layouts/default.vue +++ b/client/layouts/default.vue @@ -7,7 +7,7 @@ - + @@ -70,6 +70,14 @@ 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: { @@ -93,10 +101,11 @@ export default { const toastUpdateOptions = { content: content, options: { + toastClassName: 'toast-mb-48 lg:toast-mb-40', timeout: timeout, type: type, closeButton: false, - position: 'top-center', + position: 'bottom-center', onClose: () => { this.socketConnectionToastId = null }, @@ -105,7 +114,13 @@ export default { } this.$toast.update(this.socketConnectionToastId, toastUpdateOptions, false) } else { - this.socketConnectionToastId = this.$toast[type](content, { position: 'top-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() { @@ -644,6 +659,14 @@ 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%; } From e49e8ce8bc289512c4825cb28a239dce4d042128 Mon Sep 17 00:00:00 2001 From: Brandon A Date: Sat, 1 Nov 2025 18:35:47 +0000 Subject: [PATCH 3/3] Replace computed with watcher; move css class definitions to app.css --- client/assets/app.css | 9 +++++++++ client/layouts/default.vue | 25 ++++++++----------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/client/assets/app.css b/client/assets/app.css index 36b3b4bad..2c38360fc 100644 --- a/client/assets/app.css +++ b/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); +} \ No newline at end of file diff --git a/client/layouts/default.vue b/client/layouts/default.vue index 9396b1ae4..b44fb245e 100644 --- a/client/layouts/default.vue +++ b/client/layouts/default.vue @@ -7,7 +7,7 @@ - + @@ -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%; }