beefweb icon indicating copy to clipboard operation
beefweb copied to clipboard

Double-click broken on iOS web browsers

Open reasonableperson opened this issue 6 years ago • 1 comments

Hi hyperblast, thanks for this great component! I had a quick look around and I couldn't seem to figure out how to change tracks on iOS. The web interface works great on my desktop, but that's what I'm using to host foobar2000 – I really want to use this component to control foobar2000 from my phone.

From what I can tell, the problem is that 'double-clicking' on a track to start playing isn't possible on iOS, as double-tap is normally reserved for zooming. There's some more information, as well as some suggested solutions and workarounds which I haven't tried, on this StackOverflow question.

I had hoped that setting the 'Input mode' to 'Force touch' would fix the problem, but I still wasn't able to change tracks. So, I got the desired behaviour by unzipping foo_beefweb-0.3.fb2k-component and adding the following to the end of beefweb.root/bundle.js:

document.addEventListener('DOMContentLoaded', _ => {
  // create a double-click event,
  var dc = document.createEvent('MouseEvents'); dc.initEvent('dblclick', true, true);
  // and when the user clicks on the main table,
  document.getElementById('dtable-id0').addEventListener('click', e =>
    // dispatch a double-click on their behalf.
    {e.target.dispatchEvent(dc)})});

This gist is a shell script which patches the .fb2k-component file with the above code.

I wonder if the easiest long-term solution might be just to set the 'Force touch' option to toggle whether this function is triggered by a click or a double click. What do you think?

reasonableperson avatar Dec 22 '18 10:12 reasonableperson

From what I can tell, the problem is that 'double-clicking' on a track to start playing isn't possible on iOS, as double-tap is normally reserved for zooming

This is a very unfortunate "feature", because this operation is bound to a double-click for a reason. It prevents activating track, while scrolling a large playlist. Answers to mentioned SO question suggest to emulate double-click manually. This is probably what I will do, when I have enough time for this project and some iOS device to test with.

I wonder if the easiest long-term solution might be just to set the 'Force touch' option to toggle whether this function is triggered by a click or a double click. What do you think?

I didn't spent much time on playlist items manipulation stuff due to time constraints. Generally, idea is to emulate in the web interface what desktop / mobile application would do in such situation.

Typical desktop or mobile application would use single click / tap for selecting playlist item and double click / tap is for playlist activation. I think this is a sane default.

There is a feature request for changing that default behavior, which might be useful, but it has nothing to do with touch capabilities.

Web interface has built-in detection of touch devices, option "Force touch" merely overrides detection results, it should not change behavior on its own.

hyperblast avatar Dec 28 '18 14:12 hyperblast