Hydrogenaudio Forums

Hosted Forums => foobar2000 => 3rd Party Plugins - (fb2k) => Topic started by: hyperblast on 2018-08-25 12:50:42

Title: foo_beefweb - modern web interface
Post by: hyperblast on 2018-08-25 12:50:42
Hi folks,

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

Features:

Screenshots:
Spoiler (click to show/hide)

System requirements:

Browser requirements:

Links: download (https://foobar2000.org/components/view/foo_beefweb), github (https://github.com/hyperblast/beefweb)

Let me know what you think.
Title: Re: foo_beefweb - modern web interface
Post by: nathanial on 2018-09-08 11:38:53
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).


In any case, great work!
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-08 12:46:01
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.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-20 12:45:02
I've uploaded new version.

Changes in v0.3:

Have fun!
Title: Re: foo_beefweb - modern web interface
Post by: Cutter on 2018-09-20 18:13:14
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?
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-20 18:38:01
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.
Title: Re: foo_beefweb - modern web interface
Post by: Cutter on 2018-09-20 18:51:59
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.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-20 19:06:10
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.
Title: Re: foo_beefweb - modern web interface
Post by: Cutter on 2018-09-20 19:20:15
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.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-20 19:31:47
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.
Title: Re: foo_beefweb - modern web interface
Post by: Cutter on 2018-09-20 21:00:03
Here is a screenshot. ;)
I think a smaller text would be too small.
(https://reho.st/preview/self/57903b9f9b5660e63aa502014cdbb0bd555a3f0b.png) (https://reho.st/view/self/57903b9f9b5660e63aa502014cdbb0bd555a3f0b.png)
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-20 21:07:24
Here is a screenshot. ;)
Yeah, that's an expected behavior for now. I'll see what I can do.
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 13:09:19
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
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-29 13:17:44
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.
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 13:18:41
i updated my message ;)
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-29 13:20:35
Should be working still, everything is UTF-8 internally, I'll check it.
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 13:23:03
Should be working still, everything is UTF-8 internally, I'll check it.

Doesn't work in fact. Ok! I would appreciate it.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-29 13:32:45
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.
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 13:42:15
Thank you. And a small interface problem - random folder icons disappear when exploring, and restored after page refresh.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-29 14:09:22
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.
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 14:26:23
I tried on Opera at first, and then on Chrome, the same result
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-29 14:44:58
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 (https://stackoverflow.com/questions/35049842/svgs-in-chrome-sometimes-dont-render). 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

Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-09-29 17:55:26
Thank you!
Title: Re: foo_beefweb - modern web interface
Post by: metal_termite on 2018-09-30 23:29:50
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?
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-09-30 23:36:01
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.


Title: Re: foo_beefweb - modern web interface
Post by: Mitch66 on 2018-10-18 08:51:35
I have a 'stupid question' too.  Just to set the scenario  - I store my music on a dedicated lap top which is situated in my Hi Fi cabinet, and play it using Foobar.  I would like to be able to control Foobar from a tablet (iOS or /Android) remotely so that I do not have to use the lap top mouse pad to change playlist etc.  I understand that the music is played from the device that has foobar installed, but do I have to install Foobar on the tablet as well as I presume the Beefweb plugin is installed on the tablet not the lap top (or is it?).  Sorry if I have missed the point but I am new to this - (not bad at analogue though!)  Grateful for any help - is there a 'for dummies' set-up guide out there?
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-10-18 10:26:04
I understand that the music is played from the device that has foobar installed, but do I have to install Foobar on the tablet as well as I presume the Beefweb plugin is installed on the tablet not the lap top (or is it?).
Actually, it's the opposite. You need to install this component on desktop foobar2000 which actually plays music.
The component has embeded web server that provides clients with web interface for controlling player. On your tablet/phone you only need a web browser.
To access the web UI you need to find out IP address of your laptop, better if it would be a static one,so it does not change over the time,
then just open URL http://X.X.X.X:8880 from your tablet, where X.X.X.X is your IP address, typically something like 192.168.X.X.
See this random guide (https://www.digitalcitizen.life/find-ip-address-windows) found over the internet for information how to find out IP address.
Also make sure that firewall if any is not blocking incoming connections for foobar2000.

Sorry if I have missed the point but I am new to this - (not bad at analogue though!)  Grateful for any help - is there a 'for dummies' set-up guide out there?
Unfortunately there is no such guide yet, I'll make some eventually.
Title: Re: foo_beefweb - modern web interface
Post by: Mitch66 on 2018-10-18 10:43:42
Thank you - that is somewhat clearer - I will now have a go at installing it.

thanks

Mitch
Title: Re: foo_beefweb - modern web interface
Post by: acepace on 2018-10-22 15:49:39
Hey, quick question.

You support adding music files over a URL but in my weird case it doesn't work. I try to add a youtube URL, when I have the foobar Youtube component installed (foo_youtube).
Any chance you can take a look at it or tell me where to check in the source code?


Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-10-22 17:40:47
You support adding music files over a URL but in my weird case it doesn't work. I try to add a youtube URL, when I have the foobar Youtube component installed (foo_youtube).
This depends on how foo_youtube and foobar2000 core interpret the URLs. Probably foo_youtube has it's own URL scheme (e.g. not https://) and its custom UI produces playlist items with that scheme, so foobar2000 core could interpret them correctly.
Adding plain https:// URL likely would be interpreted as a regular HTTP stream source.

Any chance you can take a look at it or tell me where to check in the source code?
I'll take a look at this, probably it could be done on either client or server side, I'm not sure which is better :)
Title: Re: foo_beefweb - modern web interface
Post by: MordredKLB on 2018-10-22 21:58:24
This is pretty great! Issues I've noticed:

1) Volume slider should be logarithmic and not linear. -10dB halves the volume but is still like 90% of your slider. Very difficult to just slightly lower the volume.
2) Music Directories doesn't seem to do anything. That view is always empty for me.

Requests:
1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.

Thanks for your work on this!
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-10-22 22:05:37
Hi, thanks for the feedback.

1) Volume slider should be logarithmic and not linear. -10dB halves the volume but is still like 90% of your slider. Very difficult to just slightly lower the volume.
This is already reported, I've figured out correct formula from sources of foo_ui_columns. Would fix in the next release.

2) Music Directories doesn't seem to do anything. That view is always empty for me.
This needs to be configured manually from foobar2000 preferences screen. Unfortunately I have no idea how to get media library directories via foobar2000 APIs, would love to include them automatically.

1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
This is a large task, but I'm keeping it in mind for future features.

2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.
Would be available in the next release, I'm already working on this.

Thanks for your work on this!
Thank you ;)
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-10-23 12:19:52
i see there is no update still(
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-10-24 00:24:44
i see there is no update still(
I do this project in my spare time, so there is no estimation on the next release.
You can try development build (https://hyperblast.org/beefweb/builds/) if you like.
It has the very recent features and bugfixes, but it might include some broken stuff as well :)
Title: Re: foo_beefweb - modern web interface
Post by: serzh doom on 2018-10-24 14:56:51
Ok :)) Will be waiting
Title: Re: foo_beefweb - modern web interface
Post by: fuffi on 2018-11-26 19:24:14
Hello and thanks for this easy piece of software! Worked out of the box here in f2k141 for me. Not much of hasseling with configuration to get it work, I remember some older components with the same approach, that took me hours to configure and get it working (and their webinterface didn't even looked that good). So thank you!

If have read this thread and have a question:
I'm using foo_preview (http://skipyrich.com/w/index.php/Foobar2000:Preview) and would like to be able to switch it ON or OFF, if possible.
On my local f2k installation, I have a keyboard-shortcut and a button and a menu entry, but it would be very great to have an extra button in the webinterface too.

Do you know, if its possible to trigger the component (or any other with predefined options/parameters) from your fine component?
(Just a simple button to turn the preview ON or OFF)

Thanks.

Furthermore, I'd like to quote the good ideas from others here, just to show how good these are and I like them too :-)

Requests:
1) Search! Let me search my library arbitrarily and send the results to some "Query" playlist or something like that.
2) I'd like to be able to specify columns and even add my own, or modify existing columns to add more data. For example I'd like to add disc numbers to tracknumber column and add a playcount column.
Both requests are mine too.

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?
Yeah, streaming music from a remote f2k to the local browser would be awesome.

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.
I have to scroll endlessly, because I have >40 playlists sometime, so a vertical list could help.
Title: Re: foo_beefweb - modern web interface
Post by: hyperblast on 2018-11-27 20:21:04
Do you know, if its possible to trigger the component (or any other with predefined options/parameters) from your fine component?
(Just a simple button to turn the preview ON or OFF)
I don't know if it is possible to do via foobar2000 SDK, but I'll add feature request, so I could investigate when I have time for it.

Furthermore, I'd like to quote the good ideas from others here, just to show how good these are and I like them too :-)
I have these feature requests on github, feel free to add like there, so I would know which ones are the most wanted.
Title: Re: foo_beefweb - modern web interface
Post by: Vicas on 2018-11-27 22:33:39
Great and simple plugin, works like just plug and play!
Many thanks!

Suggestion: Double tap on status bar to locate currently playing track, just like in foobar on desktop.
Title: Re: foo_beefweb - modern web interface
Post by: Jokanok on 2018-12-26 15:51:02
It works on my laptop where foobar is installed. Via google chrome on this laptop I can acces foobar, but this is not remotely!?
However on a remote PC I get the message "ERR_CONNECTION_REFUSED" when I try to browse in chrome to http://localhost:8880.
In the plugin configuration screen I have allowed the control from remote machines as well!
Can someone advise what is going wrong?
Title: Re: foo_beefweb - modern web interface
Post by: Jokanok on 2018-12-26 16:28:59
It works on my laptop where foobar is installed. Via google chrome on this laptop I can acces foobar, but this is not remotely!?
However on a remote PC I get the message "ERR_CONNECTION_REFUSED" when I try to browse in chrome to http://localhost:8880.
In the plugin configuration screen I have allowed the control from remote machines as well!
Can someone advise what is going wrong?

Solved it myself. I only  had to replace "hostname" with the IP-address of my laptop on which Foobar is running! Hope this may help someone else having the same issue.
SimplePortal 1.0.0 RC1 © 2008-2019