mpc-hc icon indicating copy to clipboard operation
mpc-hc copied to clipboard

[Feature request] New mobile friendly web interface

Open LZZZZ opened this issue 3 years ago • 3 comments

Currently, the available web interface options aren't ideal, specially when used from a smartphone.

That's why I made a simple interface taking the most important commands from "/controls.html" and getting status updates from "/status.html". I'm opening this issue to share this interface with anyone interested in creating a pull request.

My interface features:

  • Simple, responsive interface, good on any screen size, with touch-friendly buttons;
  • Commands sent through Ajax requests, so it doesn't reload the page for every button pressed;
  • No JavaScript libraries, no CSS or icons/image files. It's all in a single HTML file;
  • No loading of remote resources. Works perfectly without internet.

You can get the HTML file from here.

As a side note, since there's no support for authentication, I strongly advise to remove the file browser, for security reasons.

Instructions for using it with MPC-HC:

  • Download the HTML file to an empty folder in your computer, keep the "index.html" filename;
  • Open MPC-HC and press O to open the options window;
  • Select "Player" > "Web Interface";
  • Mark "Listen on port";
  • Mark "Serve pages from" and set the folder to where you downloaded the file;
  • Click "Launch in web browser".

LZZZZ avatar Mar 21 '21 12:03 LZZZZ

Nice work! However, the playback speed button doesn't seem to be working. (Tested with Chrome on Android and Firefox on local Windows PC, with MPC-HC 1.9.10.30) All other buttons are working perfectly.

FX8350 avatar Mar 21 '21 23:03 FX8350

Nice work! However, the playback speed button doesn't seem to be working. (Tested with Chrome on Android and Firefox on local Windows PC, with MPC-HC 1.9.10.30) All other buttons are working perfectly.

Actually, there is no playback speed button. Playback speed is not very useful (at least for me). I'm guessing you're talking about the buttons for next/previous keyframe skip. I took the svg icons from google material icons, but couldn't find a better suited icon for those actions.

LZZZZ avatar Mar 22 '21 01:03 LZZZZ

Based on FX8350 and a friend feedback, I updated the interface.

  • Changed the skip to next/previous key frame icons;
  • Added an "After Playback" button;
  • Increased the status update frequency to 1 second (from 5s);
  • Tweaked the layout a bit to make it prettier.

The updated version is available in the same link. I'll be glad to further improve it if there's more feedback.

LZZZZ avatar Mar 22 '21 04:03 LZZZZ