Как настроить интервал времени для кнопок перемотки в веб-интерфейсе управления VLC?

Я запускаю VLC на своем ноутбуке и управляю им через веб-интерфейс на телефоне. В интерфейсе есть кнопка, на которую я могу нажать, чтобы перемотать назад на 30 секунд, которую я обвел красным:

30 секунд — это слишком долго для моих целей; я хочу иметь возможность перематывать назад на 10 секунд. (Я смотрю шоу на иностранном языке и часто мне нужно вернуться на 10 секунд, чтобы повторить последнюю фразу диалога).

Как я могу настроить время, на которое перематывает эта кнопка?

Время перемотки на 30 секунд жестко запрограммировано в файле mobile.html, который является исходным файлом веб-интерфейса удаленного управления. Таким образом, скорее всего, нет настройки для его изменения.

Обходной путь — редактировать файл mobile.html и изменять значения -30S и +30S на, например, -10S и +10S. Я попробовал это, и это сработало. На моей системе (Arch Linux) файл mobile.html находится по пути /usr/share/vlc/lua/http/mobile.html, но это может варьироваться в зависимости от вашей ОС.

У меня была такая же необходимость — с небольшим терпением и помощью от gpt мне удалось изменить как настольный, так и мобильный веб-интерфейсы.

Для справки, вот моя версия VLC:

$ vlc --version
VLC media player 3.0.21 Vetinari (revision 3.0.21-0-gdd8bfdbabe8)
VLC version 3.0.21 Vetinari (3.0.21-0-gdd8bfdbabe8)
Compiled by Debian buildd for bookworm on Debian arm64 buildd (Nov  1 2024 14:13:52)
Compiler: gcc version 12.2.0 (Debian 12.2.0-14)
This program comes with NO WARRANTY, to the extent permitted by law.
You may redistribute it under the terms of the GNU General Public License;
see the file named COPYING for details.
Written by the VideoLAN team; see the AUTHORS file.

Этот дифф-файл добавляет / изменяет функцию кнопок на настольном и мобильном интерфейсе для перемотки вперед и назад на 10 секунд, а также добавляет функциональность с клавишами влево и вправо на рабочем столе.

diff -ruN http_orig/css/main.css http/css/main.css
--- http_orig/css/main.css  2025-01-11 10:37:31.710670268 +0000
+++ http/css/main.css   2025-01-11 10:41:49.267007050 +0000
@@ -122,12 +122,12 @@
 #volumesliderzone{
    position: absolute;
    top: 105px;
-   left: 410px;
+   left: 450px;
    width: 210px;
 }

 #volumeSlider{
-   width: 208px;
+   width: 130px;
 }
 #libraryTree ul li a {
    border:none;
@@ -193,6 +193,12 @@
 #buttonNext{
    background-position: -288px 0px;
 }
+#buttonRewd{
+        background-position: -528px 0px;
+}
+#buttonFwrd{
+        background-position: -96px 0px;
+}
 #buttonFull{
    background-position: -192px 0px;
 }
diff -ruN http_orig/index.html http/index.html
--- http_orig/index.html    2025-01-10 21:32:02.557454189 +0000
+++ http/index.html 2025-01-11 10:32:09.510075680 +0000
@@ -222,7 +222,9 @@
                <div id="controlTable" class="ui-widget-content">
                    <ul id="controlButtons">
                        <li id="buttonPrev" class="button48  ui-corner-all" title="<?vlc gettext("Previous") ?>"></li>
+                       <li id="buttonRewd" class="button48  ui-corner-all" title="Seek Backward 10s"></li>
                        <li id="buttonPlay" class="button48  ui-corner-all paused" title="<?vlc gettext("Play") ?>"></li>
+                       <li id="buttonFwrd" class="button48  ui-corner-all" title="Seek Forward 10s"></li>
                        <li id="buttonNext" class="button48  ui-corner-all" title="<?vlc gettext("Next") ?>"></li>
                        <li id="buttonOpen" class="button48  ui-corner-all" title="<?vlc gettext("Open Media") ?>"></li>
                        <li id="buttonStop" class="button48  ui-corner-all" title="<?vlc gettext("Stop") ?>"></li>
diff -ruN http_orig/js/controllers.js http/js/controllers.js
--- http_orig/js/controllers.js 2025-01-10 21:32:02.553454186 +0000
+++ http/js/controllers.js  2025-01-11 10:23:37.032296466 +0000
@@ -529,4 +529,44 @@
     updateStatus();
     updateStreams();
     updateEQ();
+
+    $('#buttonRewd').click(function () {
+        $.ajax({
+            url: 'requests/status.xml',
+            success: function (data) {
+                var currentTime = parseInt($('time', data).text()); // Current time in seconds
+                var newTime = Math.max(0, currentTime - 10); // Move backward 10 seconds, ensure >= 0
+                sendCommand({ command: 'seek', val: newTime }); // Send seek command
+            }
+        });
+    });
+
+    $('#buttonFwrd').click(function () {
+        $.ajax({
+            url: 'requests/status.xml',
+            success: function (data) {
+                var currentTime = parseInt($('time', data).text()); // Current time in seconds
+                var totalTime = parseInt($('length', data).text()); // Total length in seconds
+                var newTime = Math.min(totalTime, currentTime + 10); // Move forward 10 seconds, ensure <= total
+                sendCommand({ command: 'seek', val: newTime }); // Send seek command
+            }
+        });
+    });
+
 });
+
+document.addEventListener('keydown', function (event) {
+    if (event.key === 'ArrowLeft') { // Left arrow key
+        const buttonRewd = document.getElementById('buttonRewd');
+        if (buttonRewd) {
+            buttonRewd.click(); // Simulate a click on the rewind button
+        }
+    } else if (event.key === 'ArrowRight') { // Right arrow key
+        const buttonFwrd = document.getElementById('buttonFwrd');
+        if (buttonFwrd) {
+            buttonFwrd.click(); // Simulate a click on the forward button
+        }
+    }
+});
+
+
diff -ruN http_orig/mobile.html http/mobile.html
--- http_orig/mobile.html   2025-01-10 21:32:02.557454189 +0000
+++ http/mobile.html    2025-01-11 10:39:24.706829187 +0000
@@ -82,10 +82,9 @@
        <div id="play_controls">
            <div id="buttons">
                <div id="buttonPrev" class="button48  ui-corner-all" title="Previous">
-               </div><div id="buttonRewd" class="button48  ui-corner-all" title="Rewind">
+               </div><div id="buttonRewd" class="button48  ui-corner-all" title="Seek Backward 10s">
                </div><div id="buttonPlay" class="button48  ui-corner-all paused" title="Play">
-               </div><div id="buttonStop" class="button48  ui-corner-all" title="Stop">
-               </div><div id="buttonFwrd" class="button48  ui-corner-all" title="Forward">
+               </div><div id="buttonFwrd" class="button48  ui-corner-all" title="Seek Forward 10s">
                </div><div id="buttonNext" class="button48  ui-corner-all" title="Next"></div>
            </div>
            <div id="seekSlider" title="Seek Time" style="font-size:15px;"></div>
@@ -95,6 +94,7 @@
        <div id="controls">
            <div id="buttons">
                <div id="buttonOpen" class="button48  ui-corner-all" title="Open Media">
+               </div><div id="buttonStop" class="button48  ui-corner-all" title="Stop">
                </div><div id="buttonFull" class="button48  ui-corner-all" title="Full Screen">
                </div><div id="buttonEQ" class="button48 ui-corner-all" title="Equalizer">
                </div><div id="buttonSout" class="button48  ui-corner-all" title="Easy Stream"></div>