{% extends 'base.html' %} {% block scripts %}
<script>
  var volume = 0.85;

  var socket = io();

  function loadNowPlaying() {
    console.log("Loadingn now playing data");
    $.get('{{ url_for("now_playing.now_playing") }}', function (data) {
      handleNowPlaying(JSON.parse(data));
    });
  }

  function handleNowPlaying(np) {
    console.log(np);
    if (np.now_playing) {
      var nowPlayingHtml = `<p style="margin-bottom: 5px">${np.now_playing}</p>
          <p class="has-text-success" style="margin-bottom: 5px"><i class="icon icon-mic-1" title="Current singer"></i>${np.now_playing_user}</p>`;

      if (np.now_playing_transpose != 0) {
        nowPlayingHtml +=
          // {# MSG: Label for display of how many semitones the song has been shifted. #}
          "<span class='is-size-6 has-text-success'><b>Key</b>: " +
          getSemitonesLabel(np.now_playing_transpose) +
          "<span>";
      }

      $("#now-playing").html(nowPlayingHtml);
      $(".control-box").show();
    } else {
      // {# MSG: Message which shows in the "Now Playing" section when there is no song currently playing #}
      $("#now-playing").html("{{ _('Nothing is playing right now.') }}");
      $(".control-box").hide();
    }

    if (np.up_next) {
      $("#up-next").html(`<p style="margin-bottom: 5px">${np.up_next}</p>
          <p class="has-text-success">
            {# MSG: Title text for the icon marking the next person to sing. #}
            <i class="icon icon-mic-1" title="{{ _('Next singer') }}"></i>${np.next_user}</p>`);
    } else {
      // {# MSG: Alternative text for the "Up next" section if no more songs are queued up. #}
      $("#up-next").html("{{ _('No song is queued.') }}");
    }

    if (np.now_playing_transpose != 0) {
      $("#transpose").val(np.now_playing_transpose);
      $("#semitones-label").html(getSemitonesLabel(np.now_playing_transpose));
    } else {
      $("#transpose").val(0);
      $("#semitones-label").html(getSemitonesLabel(np.now_playing_transpose));
    }

    // set the volume slider to the current volume
    if (np.volume != volume) {
      volume = np.volume;
      console.log("setting volume to " + volume);
      $("#volume-slider").val(volume);
    }

    if (np.is_paused) {
      $("#pause-resume").removeClass("icon-pause");
      $("#pause-resume").addClass("icon-play");
      $(".playing_gif").attr(
        "src",
        "{{  url_for('static', filename='images/now-playing.png') }}"
      );
    } else {
      $("#pause-resume").removeClass("icon-play");
      $("#pause-resume").addClass("icon-pause");
      $(".playing_gif").attr(
        "src",
        "{{  url_for('static', filename='images/now-playing.gif') }}"
      );
    }
  }

  $(function () {
    $(".control-box").hide();

    var slider = document.getElementById("transpose");
    var output = document.getElementById("semitones-label");
    if (slider && output) {
      output.innerHTML = getSemitonesLabel(slider.value);
      // Update the current slider value (each time you drag the slider handle)
      slider.oninput = function () {
        output.innerHTML = getSemitonesLabel(slider.value);
      };
    }

    $("#volume-slider").on(
      "input",
      _.debounce(function (event) {
        const value = this.value;
        $.get("/volume/" + value);
        refreshNowPlaying();
      }, 500)
    );

    $("#submit-transpose").click(function () {
      var value;
      if (slider) {
        value = slider.value;
      } else {
        value = 0;
      }
      r = confirm("Transpose this song: " + getSemitonesLabel(value) + "?");
      if (r) {
        $.get("/transpose/" + value);
      }
      slider.value = 0;
      output.innerHTML = getSemitonesLabel(slider.value);
    });

    $("#pause-resume").click(function () {
      $.get("/pause");
      togglePausePlayButton();
      refreshNowPlaying();
    });

    $("#vol-up").click(function () {
      $.get("/vol_up");
      refreshNowPlaying();
    });

    $("#vol-down").click(function () {
      $.get("/vol_down");
      refreshNowPlaying();
    });

    $("#restart").click(function () {
      r = confirm("Are you sure you want to restart this track?");
      if (r) {
        $.get("/restart");
      }
    });

    $("#skip").click(function () {
      r = confirm(
        // {# MSG: Confirmation message when clicking a button to skip a track. #}
        `{{ _("Are you sure you want to skip this track? If you didn't add this song, ask permission first!") }}`
      );
      if (r) {
        $.get("/skip");
      }
    });

    $("#semitones-info").click(function () {
      showNotification(
        "A semitone is also known as a half-step. It is the smallest interval used in classical Western music, equal to a twelfth of an octave or half a tone.",
        "is-info",
        10000
      );
    });

    function togglePausePlayButton() {
      if ($("#pause-resume").hasClass("icon-pause")) {
        $("#pause-resume").removeClass("icon-pause");
        $("#pause-resume").addClass("icon-play");
      } else {
        $("#pause-resume").removeClass("icon-play");
        $("#pause-resume").addClass("icon-pause");
      }
    }

    //for first time load of splash screen
    loadNowPlaying();
    //for pushed updates to now playing state
    socket.on("now_playing", (np) => handleNowPlaying(np));

    document.addEventListener("visibilitychange", function () {
      console.log("on visibility change");

      if (document.visibilityState === "visible") {
        loadNowPlaying();
        console.log(socket);
        if (!socket.connected) {
          console.log("Reconnecting socket...");
          connectSocket();
        }
      }
    });
  });
</script>
{% endblock %} {% block header %}
<h1>
  {% block title %} {# MSG: Header showing the currently playing song. #} {%
  trans %}Now Playing{% endtrans %}
  <img
    style="display: none"
    class="playing_gif control-box"
    width="40"
    src="{{  url_for('static', filename='images/now-playing.png') }}"
  />{% endblock %}
</h1>
{% endblock %} {% block content %}

<p class="is-size-4 has-text-warning" id="now-playing">&nbsp;</p>

<hr />
<h3>
  {# MSG: Title for the section displaying the next song to be played. #} {%
  trans %}Next Song{% endtrans %}
</h3>
<p id="up-next" class="has-text-warning"></p>
<hr />

{% if admin %}
<div
  class="has-background-black-bis box control-box"
  style="max-width: 500px; display: none"
>
  {# MSG: Title of the box with controls such as pause and skip. #}
  <h4>{% trans %}Player Control{% endtrans %}</h4>
  <div class="is-size-3" style="display: flex; justify-content: space-between">
    <div class="is-size-3">
      {# MSG: Title attribute on the button to restart the current song. #}
      <a title="{{ _('Restart Song') }}" id="restart"
        ><i class="icon icon-to-start"></i> </a
      >&nbsp;&nbsp; {# MSG: Title attribute on the button to play or pause the
      current song. #}
      <a title="{{ _('Play/Pause') }}"
        ><i id="pause-resume" class="icon icon-pause"></i> </a
      >&nbsp;&nbsp; {# MSG: Title attribute on the button to skip to the next
      song. #}
      <a title="{{ _('Stop Current Song') }}" id="skip"
        ><i class="icon icon-to-end"></i>
      </a>
    </div>
    <div class="is-size-3" style="display: flex; align-items: center">
      <i id="vol-down" class="icon icon-volume-down"></i>
      <input
        type="range"
        min="0"
        max="1"
        value="0.85"
        step="0.025"
        id="volume-slider"
        style="margin: 0 8px 0px 5px; width: 100px"
      />
      <i id="vol-up" class="icon icon-volume-up"></i>
    </div>
  </div>
  <hr />

  {% if is_transpose_enabled %}
  <div class="is-flex" style="justify-content: space-between">
    <div>
      {# MSG: Title of a control to change the key/pitch of the playing song. #}
      <h4>{% trans %}Change Key{% endtrans %}</h4>
    </div>
    <div class="is-flex">
      <h4 id="semitones-label"></h4>
      <a id="semitones-info">
        <i class="icon icon-info-circled-1" title="Info"></i
      ></a>
    </div>
  </div>
  <div style="width: 100%">
    <div class="is-flex">
      <input
        type="range"
        min="-12"
        max="12"
        value="0"
        width="300px"
        class="transpose-slider"
        id="transpose"
        style="width: 100%"
      />
      <button
        id="submit-transpose"
        class="button is-rounded is-small"
        style="margin-left: 10px"
      >
        {# MSG: Label on the button to confirm the change in key/pitch of the
        playing song. #} {% trans %}Change{% endtrans %}
      </button>
    </div>
  </div>
  {% endif %}
</div>
{% endif %}

<div></div>
{% endblock %}
