remote_mpv/static/index.html at main · wpdevelopment11/remote_mpv · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>mpv</title>
    <meta name="color-scheme" content="light dark" />
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link id="icon" rel="icon" href="icon.svg" />
</head>

<body>
    <p>mpv control</p>

    <div class="container-vertical">
        <div class="container">
            <button id="pause"><i class="fa-solid fa-pause"></i><i class="fa-solid fa-play"></i></button>

            <button id="playlist-prev" title="Playlist Previous"><i class="fa-solid fa-chevron-left"></i></button>
            <button id="playlist-next" title="Playlist Next"><i class="fa-solid fa-chevron-right"></i></button>

            <button id="speed-decr" title="Playback speed -"><i class="fa-solid fa-gauge-high fa-flip-horizontal"></i></button>
            <button id="speed-incr" title="Playback speed +"><i class="fa-solid fa-gauge-high"></i></button>
        </div>

        <div class="container">
            <button id="file-open" title="Open a file"><i class="fa-solid fa-folder"></i></button>
            <button id="volume-decr" title="Volume -"><i class="fa-solid fa-volume-low"></i></button>
            <button id="volume-incr" title="Volume +"><i class="fa-solid fa-volume-high"></i></button>
            <button id="mute"><i class="fa-solid fa-volume-xmark"></i></button>
        </div>

        <form id="loadfile-form">
            <div id="filename">
                <input type="text" name="filename" placeholder="Absolute path to the file or URL" required/>
                <div>
                    <input type="checkbox" id="playlist-append" name="playlist_append"/>
                    <label for="playlist-append">Append to the playlist</label>
                </div>
            </div>
            <button>Open</button>
        </form>

        <div class="container">
            <button data-seek="-10" class="seek" title="Seek Backward 10 sec">-10sec</button>
            <button data-seek="10" class="seek" title="Seek Forward 10 sec">+10sec</button>
            <button data-seek="-60" class="seek" title="Seek Backward 1 min">-1min</button>
            <button data-seek="60" class="seek" title="Seek Forward 1 min">+1min</button>
        </div>

        <div class="container volume">
            <i class="fa-solid fa-volume-xmark"></i>
            <input id="volume" type="range" value="100"/>
            <i class="fa-solid fa-volume-high"></i>
        </div>

        <div class="container">
            <input id="seek" step="any" type="range" value="0"/>
        </div>

        <div class="container tracks">
            <select id="audio-tracks"></select>
            <select id="sub-tracks"></select>
        </div>
    </div>

    <table id="playlist"></table>

    <script src="script.js"></script>
</body>

</html>