miniplayer | A small audio player , powered by electron | Audio Utils library

I'm having a bit of a rough time figuring out how to structure my project. I have this MiniPlayer (see 2. pic) that I would like to overlay over all other screens whenever a song is playing. So far I solved it this way:

However, adding it like that I can't find a way to navigate from it to another screen since it's not part of any navigator. And I can't really add it to any of the navigators I have. If I add it to the TabsNav I get an additional tab that I don't want, if I add it to the stack, it's hidden when I open another tab. Can anyone give me a hint on how to move forward here or what I'm overlooking? Thanks a lot in advance :)

If I watch a YouTube video and try to drag the player down, it's doing this:

Sometimes it doesn't do this. Sometimes it's only doing this in fullscreen. Sometimes it's also doing this in theatre mode. It started happening not so long ago.

I've tried document.addEventListener('mousemove', (e) => { e.stopImmediatePropagation(); e.stopPropagation(); e.preventDefault();}, true) in Tampermonkey, but it disables all the other mousemoves except the drag down for miniplayer. I've tried user-select: none, but it doesn't solve this issue either.

I've tried in Incognito mode, with extensions disabled. Nothing helped.

I'm running latest Chrome. 95.0.4638.54

This doesn't happen in Chromium for some reason: version 94.0.4606.81

I'm not the only one with this problem: https://www.reddit.com/r/youtube/comments/l4falt/is_there_a_way_to_turn_off_the_drag_down_to/

I haven't found any other forum posts about it.

Is there any way to disable this functionality?

Update: this code seems to work: https://pastebin.com/n093g9Ur

I am trying to show a pause button if a sound file is playing, i have a uniform source of truth for the sound file, which i can access via ViewModel, now all works well on other Views, but on parent View where all navigation links are, when i go back to it using the back button from other Views, the miniplayer that shows pause disappears...

So i decided that on the .onAppear of NavigationView or text view of parent View i will implement the logic that can detect if a sound file is playing and if so , show a button at bottom to pause the sound file.

Now i can use print and it shows correct value on onAppear in terms of sound file playing or not, but the moment i try to use HStack or any other View to be added i get warning -

I have a MainFooter components that contains the footer and mini player which animates to full-view when clicked. I have a problem that whenever we click on one of the footer Tabs, the player maximizes and then got stuck there only, being unresponsive.

Also the down arrow icon inside player when clicked do not minimizes it, neither clicking on MiniPlayer maximizes it, but we can maximizes MiniPlayer by clicking and dragging it to full-view and same for maximized Player.

Here is the MainFooter component:

My project is created programmatically without using storyboard. And it is like Apple Music's miniPlayer, when clicking a row in tableView, will update the data of miniPlayer(which is in containerView).

I see some examples with storyboard and segue like below code: call child viewController's method in parent viewController to update data by using protocol & delegate.

But I don't use storyboard, so what is the alternative code to prepare()?

In react native, I use some component like audio player, header etc. Also, I use console.log() for debugging for component I put log in start of components :

My friend and I are almost done with our project. It's basically a now playing/miniplayer app for Spotify. When I was checking the render process console, I had one more warning that I wanted to clear. It was about worldSafeExecuteJavaScript being true and how it's unsafe. I looked farther in to it and it turns out I need to turn on contextIsolation too. I researched more and found out I have that I can't use require in my render process. I tried looking up the documentation and I am confused. We want to make our app secure for the long run, especially since I'm in college and my friend working on it might get busy as his school ramps up; and also since contextIsolation will be true by default in Electron 12.

In our render processes javascript, we just need to require jQuery and ipcRenderer. How would we incorporate contextBridge (I think that's what its called), to import jQuery and ipcRenderer into our javascript for the render process?

I'm using MediaPlayerElement, and I want to add Play/Pause/Next....button to taskbar preview window, as the following picture shows.

I tried the following answer, sadly it doesn't work. I also tried doc, doesn't work either.

My following code is