Skip to main content

Notice

Please note that most of the software linked on this forum is likely to be safe to use. If you are unsure, feel free to ask in the relevant topics, or send a private message to an administrator or moderator. To help curb the problems of false positives, or in the event that you do find actual malware, you can contribute through the article linked here.
Topic: foo_beefweb - modern web interface (Read 38937 times) previous topic - next topic
0 Members and 1 Guest are viewing this topic.

foo_beefweb - modern web interface

Hi folks,

this yet another attempt to implement web interface component for foobar2000.

Features:
  • Lightweight web user interface
  • Playback control
  • Playlist management
  • Music directory browser
  • Real-time UI updates
  • Mobile-friendly responsive design
  • REST-like API for controlling player from your application

Screenshots:
Spoiler (click to show/hide)

System requirements:
  • foobar2000 1.3 or later
  • Windows 7 or later

Browser requirements:
  • Any recent browser should work
  • Due to high development effort required Internet Explorer of any version is not supported

Links: download, github

Let me know what you think.

Re: foo_beefweb - modern web interface

Reply #1
Excellent component! This has been particularly useful for me as I tend to do the majority of my work on a different computer to the one on which my music is stored. It was getting tedious having to switch between computers to change songs or adjust the volume.

Although I have only been using this component for a few days, I have a couple of suggestions for improvements that could be made (if they're possible).

  • Synchronise the volume bar in the web interface with the one in the client
  • Implement something like the 'cursor follows playback' option so that when the song changes, the web interface displays the relevant section of the playlist

In any case, great work!

Re: foo_beefweb - modern web interface

Reply #2
Hi, thanks for feedback.

Synchronise the volume bar in the web interface with the one in the client
I'll check this, it should be working already

Implement something like the 'cursor follows playback' option so that when the song changes, the web interface displays the relevant section of the playlist
I've already implemented "locate current track" button in the development version, I think "cursor follows playback" is only half-step ahead now.

I'll add both issues on github.

Re: foo_beefweb - modern web interface

Reply #3
I've uploaded new version.

Changes in v0.3:
  • Added button that locates currently played track
  • Fixed volume and mute state not being synchronized
  • Added "Cursor follows playback" option
  • Implemented proper escaping for array query string parameters
  • Added playlist sort operations
  • Added "Play next/previous artist/album" operations

Have fun!

Re: foo_beefweb - modern web interface

Reply #4
This is exactly what I needed! Thanks for developing this!

A few remarks:
The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
The playback order menu is called the "audio menu", it's confusing.
Could there be a list of playlists in a menu? The horizontal tab list is often too narrow and scrolling through it is not optimal.
In "touch mode" I still have to double tap a track to play it. Maybe this has another purpose?

Re: foo_beefweb - modern web interface

Reply #5
Hello, thank you for your feedback. I really appreciate that.

The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
It should be collapsible to a single button that reveals volume control on narrow screens.
For very small resolution screens even that is not enought, I'll have to switch to small font size in settings.
What is horizontal resolution of your phone? I'll check this. Maybe there is some issue with horizontal size breakpoints.

The playback order menu is called the "audio menu", it's confusing.
Sure, would rename.

Could there be a list of playlists in a menu? The horizontal tab list is often too narrow and scrolling through it is not optimal.
Such issue exist on my list. I will implement this eventually.

In "touch mode" I still have to double tap a track to play it.
Double tap is intentional to prevent accidental playlist item activation when scrolling large playlists.
I think single-tap activation is possible as option.

Maybe this has another purpose?
Currently it affects how playlist tabs work: in mouse mode they are draggable from any point, in touch mode there is a dedicated drag handle to prevent accidental dragging when scrolling.

Re: foo_beefweb - modern web interface

Reply #6
The volume slider isn't entirely visible on my phone: it goes off-screen to the right.
It should be collapsible to a single button that reveals volume control on narrow screens.
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)

Also I just noticed that the slider in the web interface is way more sensitive than the one on foobar's UI. When the web slider is at 50% the UI slider is at 20% or so. Probably a different scale is used.

Another suggestion: since single tap selects a track, show relevant contextual actions in the hamburger menu (such as send track to playlist, add to playback queue etc...)

The total play time at the bottom always shows 00:00:00.

Re: foo_beefweb - modern web interface

Reply #7
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)
Are you sure you are not confusing vertical and horizontal resolutions?
768px is a plenty of space.
338px and wider should look okay with small font size.
Narrower screens cause buttons row to wrap.
I can adjust markup to align buttons in two rows for such screens, but I doubt such old phones would support modern browsers anyway :)

Also I just noticed that the slider in the web interface is way more sensitive than the one on foobar's UI. When the web slider is at 50% the UI slider is at 20% or so. Probably a different scale is used.
SDK provides range from -100 to 0 dB, web UI currently just represents this, probably standard UI uses logarithmical scale on top of it. I'll investigate this.

Another suggestion: since single tap selects a track, show relevant contextual actions in the hamburger menu (such as send track to playlist, add to playback queue etc...)
Probably yes, I want to make proper playlist manipulation first, selection and especially multi-selection is somewhat non-existent in web interfaces and this has to be implemented manually.

Re: foo_beefweb - modern web interface

Reply #8
Yes I'm talking about that one. It pops up halfway off-screen when I click the volume button. My phone's screen is 768 px wide. :)
Are you sure you are not confusing vertical and horizontal resolutions?
768px is a plenty of space.
338px and wider should look okay with small font size.
Narrower screens cause buttons row to wrap.
I can adjust markup to align buttons in two rows for such screens, but I doubt such old phones would support modern browsers anyway :)
Definitely 768px (it's a Nexus 4), I'll post a screenshot as soon as it's charged and I can get it to boot again.

Re: foo_beefweb - modern web interface

Reply #9
Definitely 768px (it's a Nexus 4), I'll post a screenshot as soon as it's charged and I can get it to boot again.

I think it's 384x640 from web standpoint (at least this resolution is used by chrome dev tools).
If you change font size to small in settings it should be enought still.

Re: foo_beefweb - modern web interface

Reply #10
Here is a screenshot. ;)
I think a smaller text would be too small.


Re: foo_beefweb - modern web interface

Reply #12
I can't add music derictories. This simply doesn't work. It always reset to С:\ instead of C:\Music for example and I CAN'T access folders from remote control, the C:\ derictory is shown but it doesn't allow me to open it.

upd
i found the problem, it doesn't support folder names in different languages, in russian for example! i renamed it and it works now! nice plugin anyway

Re: foo_beefweb - modern web interface

Reply #13
I can't add music derictories. This simply doesn't work. It always reset to С:\ instead of C:\Music for example and I CAN'T access folders from remote control, the C:\ derictory is shown but it doesn't allow me to open it.

I need more info on this, e.g. OS version/bitness, foobar2000 version.
Also please check if there are any errors in foobar2000 log or browser log.

Re: foo_beefweb - modern web interface

Reply #14
i updated my message ;)

Re: foo_beefweb - modern web interface

Reply #15
Should be working still, everything is UTF-8 internally, I'll check it.


Re: foo_beefweb - modern web interface

Reply #17
Doesn't work in fact. Ok! I would appreciate it.

Okay, I've managed to reproduce this, seems to affect music directory roots only, not some paths under.
Would fix this.

Re: foo_beefweb - modern web interface

Reply #18
Thank you. And a small interface problem - random folder icons disappear when exploring, and restored after page refresh.

Re: foo_beefweb - modern web interface

Reply #19
Would fix this.
Fixed, would be available in the next release.

Thank you. And a small interface problem - random folder icons disappear when exploring, and restored after page refresh.
What browser do you use? There are some issues with chrome refetching icons too frequently I did not manage to find a fix for this yet.

 

Re: foo_beefweb - modern web interface

Reply #20
I tried on Opera at first, and then on Chrome, the same result

Re: foo_beefweb - modern web interface

Reply #21
I tried on Opera at first, and then on Chrome, the same result

I can reproduce your issue. It seems to be pretty similar to this bug. This is reported to be fixed already, but I still can reproduce it on chrome 69. It has something to do with caching, currently all static content is set to refresh immediately, I'll try different options and see if this helps.

Update: switched to caching for 3 seconds, seems fine now. Would be available in the next release


Re: foo_beefweb - modern web interface

Reply #22
Thank you!

Re: foo_beefweb - modern web interface

Reply #23
Probably a stupid question but here goes: Does this control music playback on the host machine or does the music play out of the machine accessing the web interface?

Re: foo_beefweb - modern web interface

Reply #24
Probably a stupid question but here goes: Does this control music playback on the host machine or does the music play out of the machine accessing the web interface?

Music is played on the machine where foobar2000 is installed, web interface allows you to control this player from other machines.

Actually your question isn't that stupid, I thought about supporting local playback, e.g. stream music from foobar2000 to your browser, but currently I have no plans to implement this until all remote control features are fully implemented.