~hristoast/mousikofidi

mousikofidi/mousikofidi/templates/audio_player.html -rw-r--r-- 4.8 KiB
60039fd3Hristos N. Triantafillou Don't blow up when there's no cover art 27 days ago
                                                                                
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
<div class="center{% if page_name == "Your Queue" %} hidden{% endif %}" id="player">
  <p id="now-playing" title="The status of the current track.  Click the track title to jump to it in the playlist.">Paused: <span class="bold" id="playing-title" title="The title of the current track; click to jump to it">( Loading ... )</span></p>
  <div data-nowplaying-num="0" id="now-playing-num"></div>
  <div data-randorder="none" id="randorder"></div>
  <div data-playback-ended="false" id="audio-playback-ended"></div>
  <audio{% if autoplay %} autoplay{% endif %}{% if preload_audio %} preload="auto"{% endif %} src="" id="audio" controls title="The audio player, it is provided by your web browser">
    Your browser does not support the <code>audio</code> element.
  </audio>
  <div class="mobile-hide">
    <input type="checkbox" id="follow-track" name="follow-track" checked title="When this box is checked, the page will scroll to the currently playing track once playback is started">
    <label id="follow" for="follow-track" title="When this box is checked, the page will scroll to the currently playing track once playback is started">Follow</label>
    {% if icons %}
      <button data-cmd="prev" id="prev" title="Click to skip to the previous track in the list.">
        <i class="fas fa-step-backward"></i> Previous
      </button>
      <button class="with-icons" data-stat="off" id="repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">
        No Repeat<span class="fa-stack"><i class="fas fa-redo fa-stack-1x"></i><i class="fas fa-slash fa-stack-1x"></i></span>
      </button>
      <button class="with-icons" data-stat="off" id="shuffle" title="Click to toggle between a shuffled track order on and off.">
        Shuffle Off<span class="fa-stack"><i class="fas fa-random fa-stack-1x"></i><i class="fas fa-slash fa-stack-1x"></i></span>
      </button>
      <button data-cmd="fwd" id="next" title="Click to skip to the next track in the list.">
        Next <i class="fas fa-step-forward"></i>
      </button>

    {% else %}
      <button data-cmd="prev" id="prev" title="Click to skip to the previous track in the list.">Previous</button>
      <button data-stat="off" id="repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">No Repeat</button>
      <button data-stat="off" id="shuffle" title="Click to toggle between a shuffled track order on and off.">Shuffle Off</button>
      <button data-cmd="fwd" id="next" title="Click to skip to the next track in the list.">Next</button>
    {% endif %}

    <div>
      <button id="audio-volume-minus" title="Click this to raise the player volume.">Vol-</button>
      <div class="vol-meter">
        <input id="audio-volume-meter" type="range" step="1" min="0" max="100" title="The player's volume level. Click or drag to adjust, or use the control buttons.">
      </div>
      <button id="audio-volume-plus" title="Click this to lower the player volume.">Vol+</button>
      {% if page_name != "Your Queue" %}<button id="audio-time-link" title="Click this button to have a link to this track at the current time put into your clipboard.">
        {% if icons %}<i class="fas fa-link"></i> {% endif %}Link to current time
      </button>{% endif %}
    </div>

  </div>
  <div class="mobile-show">
    <div>
      <button data-cmd="prev" id="mobile-prev" title="Click to skip to the previous track in the list.">{% if icons %}<i class="fas fa-step-backward"></i> {% endif %}Previous</button>
      <button data-cmd="fwd" id="mobile-next" title="Click to skip to the next track in the list.">Next{% if icons %} <i class="fas fa-step-forward"></i>{% endif %}</button>
    </div>
    <div id="mobile-controls">
      {% if icons %}
        <button class="with-icons" data-stat="off" id="mobile-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">
          No Repeat<span class="fa-stack"><i class="fas fa-redo fa-stack-1x"></i><i class="fas fa-slash fa-stack-1x"></i></span>
        </button>
        <button class="with-icons" data-stat="off" id="mobile-shuffle" title="Click to toggle between a shuffled track order on and off.">
          Shuffle Off<span class="fa-stack"><i class="fas fa-random fa-stack-1x"></i><i class="fas fa-slash fa-stack-1x"></i></span>
        </button>

      {% else %}
        <button data-stat="off" id="mobile-repeat" title="Click to toggle between no repeat, repeat one track, and repeat all tracks.">
          No Repeat
        </button>
        <button data-stat="off" id="mobile-shuffle" title="Click to toggle between a shuffled track order on and off.">
          Shuffle Off
        </button>
      {% endif %}
    </div>
    <input type="checkbox" id="mobile-follow-track" name="mobile-follow-track" checked>
    <label id="mobile-follow" for="mobile-follow-track">Follow</label>
  </div>
</div>