starred/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2026-05-30 23:40:40 +02:00
Code Issues 1.0k Packages Projects Releases 10 Wiki Activity

[PR #4782] move socket toast to top of the page #4346

New Issue
Open
opened 2026-04-25 00:19:22 +02:00 by adam · 0 comments
adam commented 2026-04-25 00:19:22 +02:00
Owner
Copy Link
Copy Source

📋 Pull Request Information

Original PR: https://github.com/advplyr/audiobookshelf/pull/4782
Author: @brandonartner
Created: 10/29/2025
Status: 🔄 Open

Base: master ← Head: move-web-socket-msg

📝 Commits (3)

  • ad12026 move socket toast to top of the page
  • 13845a4 Move error back to bottom; set to dynamically adjust the bottom margin
  • e49e8ce Replace computed with watcher; move css class definitions to app.css

📊 Changes

2 files changed (+24 additions, -1 deletions)

View changed files

📝 client/assets/app.css (+9 -0)
📝 client/layouts/default.vue (+15 -1)

📄 Description

Brief summary

Minor change to move the websocket message/error toast to the top of the screen on the web client.

Which issue is fixed?

Enhancment https://github.com/advplyr/audiobookshelf/issues/4772

In-depth Description

Play/Pause button would become inaccessible when the websocket message or error was displayed.

Screenshot from 2025-10-29 14-55-31

Moving the toast message to the top of the screen is a minimal change to prevent this.

Screenshot from 2025-10-29 15-06-44

How have you tested this?

Opened and played an audiobook.
Turned off dev server to produce websocket disconnect error.
Toast now shows at top of page rather than covering the pause button at the bottom.

Screenshots

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/advplyr/audiobookshelf/pull/4782 **Author:** [@brandonartner](https://github.com/brandonartner) **Created:** 10/29/2025 **Status:** 🔄 Open **Base:** `master` ← **Head:** `move-web-socket-msg` --- ### 📝 Commits (3) - [`ad12026`](https://github.com/advplyr/audiobookshelf/commit/ad12026229bec13da656a6b7882ecaa937e8800d) move socket toast to top of the page - [`13845a4`](https://github.com/advplyr/audiobookshelf/commit/13845a43d6d5d4bd50867e5df1837fb0378172f5) Move error back to bottom; set to dynamically adjust the bottom margin - [`e49e8ce`](https://github.com/advplyr/audiobookshelf/commit/e49e8ce8bc289512c4825cb28a239dce4d042128) Replace computed with watcher; move css class definitions to app.css ### 📊 Changes **2 files changed** (+24 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `client/assets/app.css` (+9 -0) 📝 `client/layouts/default.vue` (+15 -1) </details> ### 📄 Description <!-- For Work In Progress Pull Requests, please use the Draft PR feature, see https://github.blog/2019-02-14-introducing-draft-pull-requests/ for further details. If you do not follow this template, the PR may be closed without review. Please ensure all checks pass. If you are a new contributor, the workflows will need to be manually approved before they run. --> ## Brief summary <!-- Please provide a brief summary of what your PR attempts to achieve. --> Minor change to move the websocket message/error toast to the top of the screen on the web client. ## Which issue is fixed? <!-- Which issue number does this PR fix? Ex: "Fixes #1234" --> Enhancment https://github.com/advplyr/audiobookshelf/issues/4772 ## In-depth Description <!-- Describe your solution in more depth. How does it work? Why is this the best solution? Does it solve a problem that affects multiple users or is this an edge case for your setup? --> Play/Pause button would become inaccessible when the websocket message or error was displayed. <img width="2025" height="254" alt="Screenshot from 2025-10-29 14-55-31" src="https://github.com/user-attachments/assets/b40f44ec-38f5-4f40-9a4e-f4790c33e03e" /> Moving the toast message to the top of the screen is a minimal change to prevent this. <img width="2025" height="254" alt="Screenshot from 2025-10-29 15-06-44" src="https://github.com/user-attachments/assets/bd1a367b-d20a-4cc1-aff4-2e3506ed7b48" /> ## How have you tested this? <!-- Please describe in detail with reproducible steps how you tested your changes. --> Opened and played an audiobook. Turned off dev server to produce websocket disconnect error. Toast now shows at top of page rather than covering the pause button at the bottom. ## Screenshots <!-- If your PR includes any changes to the web client, please include screenshots or a short video from before and after your changes. --> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
adam added the pull-request label 2026-04-25 00:19:22 +02:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
authentication
backlog
bug
chapter editor
config-issue
ebooks
encoding/embedding
enhancement
help wanted
listening sessions & progress
planned
possible plugin
progress sync
pull-request
Mirrored from GitHub Pull Request
 sorting/filtering/searching
unable to reproduce
upload
users & permissions
waiting
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
adam (Adam Melkus)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/audiobookshelf#4346
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?