<!doctype html>
<html lang="en-IE">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>radio waves</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="description" content="">

  <meta property="og:title" content="radio waves">
  <meta property="og:url" content="">

  <link rel="icon" href="/favicon.ico" sizes="any">
  <link rel="icon" href="/icon.svg" type="image/svg+xml">

  <link rel="manifest" href="manifest.json">
  <meta name="theme-color" content="#77B19D">

  <script defer src="assets/font-awesome/js/solid.js"></script>
  <script defer src="assets/font-awesome/js/fontawesome.js"></script>

  <script defer data-domain="radio.byemc.xyz" src="https://analytics.byecorps.com/js/script.js"></script>

</head>

<body>

  <header>
    <div class="start"><h1>waves</h1></div>
  </header>

  <audio id="player">
    <source>
  </audio>

  <nav id="navbar">
    <a href="#tuner" class="nav_active">
      <span class="fa-fw fa-solid fa-radio"></span>
      Tuner
    </a>
    <a href="#station" aria-disabled="true">
      <span class="fa-fw fa-solid fa-play-circle"></span>
      Now Playing
    </a>
    <a href="#settings">
      <span class="fa-fw fa-solid fa-cog"></span>
      Settings
    </a>
  </nav>

  <main>

    <aside id="first">
      <div id="controls">
        <button id="playpause">
          <span class="fa-fw fa-solid fa-play"></span>
          Stopped
        </button>
        <div class="volume">
          <button id="control_mute">
            <span class="fa-fw fa-solid fa-volume-high" title="Mute"></span>
          </button>
          <label for="control_real_volume" style="display: none">Volume</label>
          <input type="number" max="100" min="0" name="real_volume" id="control_real_volume">
        </div>
        <input type="range" max="100" min="0" value="75" name="volume" id="control_volume">
      </div>
    </aside>

    <section id="tuner">
      <h2>Tuner</h2>

      <div class="switcher">
        <a href="#add_station" class="button"><span class="fa-fw fa-solid fa-plus-circle"></span> Add a new station</a>
      </div>

      <div class="stack v" id="tunerStationList">

      </div>

    </section>

    <section id="add_station" hidden="hidden" aria-hidden="true">
      <h2>Add a station manually</h2>

      <div class="switcher">
        <a href="#add_station_from_azuracast">Add stations from AzuraCast</a>
      </div>

      <div class="input"><label for="add_station_name">Station Name</label><input type="text" name="station_name" id="add_station_name"></div>
      <div class="input"><label for="add_station_url">Station audio url</label><input type="url" name="station_url" id="add_station_url"></div>

      <div class="radio">
        <h3>Metadata source</h3>
        <label>
          <input type="radio" name="add_metadata_type" id="add_station_metadata_icecast_option" checked value="icecast">
          Icecast stream
        </label>
        <label>
          <input type="radio" id="add_station_metadata_azuracast_option" name="add_metadata_type" value="azuracast">
          Azuracast server
        </label>
      </div>

      <div hidden id="add_station_manually_azuracast_metadata_options">
        <h3>Azuracast metadata options</h3>
        <div class="input">
          <label for="add_station_azuracast_server">Azuracast server URL</label><input type="url" name="station_azuracast_server" id="add_station_azuracast_server">
        </div>
        <div class="input">
          <label for="add_station_azuracast_shortname">Azuracast station shortname</label><input type="text" name="station_azuracast_shortname" id="add_station_azuracast_shortname">
        </div>
      </div>

      <div class="switcher">
        <button id="add_station_add_station">
          <span class="fa-fw fa-solid fa-plus-circle"></span>
          Add station
        </button>
      </div>
    </section>

    <section id="add_station_from_azuracast" hidden="hidden" aria-hidden="true">
      <h2>Add stations from Azuracast</h2>
      <div class="switcher">
        <a href="#add_station">Add station manually</a>
      </div>

      <label for="add_fromazcast_url">Azuracast Server URL</label>
      <div id="add_azuracast_searcher" class="input_button_hybrid">
        <input type="url" placeholder="https://example.com" name="add_fromazcast_url" id="add_fromazcast_url">
        <button id="add_azcast_search"><span class="fa-fw fa-solid fa-search"></span> Search</button>
      </div>

      <div id="add_azuracast_results">
      </div>

    </section>

    <section id="station" hidden="hidden" aria-hidden="true">

      <h2 id="station_name">Loading...</h2>
      <div id="station_info" class="info"><span class="fa-fw fa-solid fa-headphones"></span> <span id="live_listeners">0</span></div>
      <p id="station_description"></p>

      <div class="stack v">
        <div class="chip song nowplaying stack h">
          <img src="img/radio-icon.png" alt="No album art" class="rounded" id="current-song-art">
          <div class="stack v fw nogap justify-center">
            <span class="subtitle">Now playing:</span>
            <span id="current-song-title" class="title">Loading...</span>
            <span id="current-song-artist" class="artist">Loading...</span>
            <div class="stack hw npgap v">
              <progress id="progress"></progress>
              <div class="stack fw nogap align-space-between h">
                <span id="elapsed">0:00</span>
                <span id="duration">0:00</span>
              </div>
            </div>
          </div>
        </div>

        <div id="nextup" class="ship song compact nextup stack h">
          <img src="img/radio-icon.png" alt="No album art" class="rounded" id="next-song-art">
          <div class="stack v nogap justify-center">
            <span class="subtitle">Next up:</span>
            <span id="next-song-title" class="title">Loading...</span>
            <span id="next-song-artist" class="artist">Loading...</span>
            <span id="next-song-until" class="subtitle">in 3 minutes</span>
          </div>
        </div>
      </div>

      <h2 id="history-title" style="margin: 0.5rem 0">History</h2>
      <div id="history" class="stack v">
        No history :(
      </div>
    </section>


    <section id="settings" hidden="hidden" aria-hidden="true">
      <h2>Settings</h2>

      <div class="stack v">

        <div class="stack h">
          <img src="img/radio-icon.png" alt="Waves icon" class="rounded appicon-settings">
          <div class="stack v nogap">
            <span class="spacer"></span>
            <span class="title">Waves</span>
            <span class="subtitle">(c) byemc 2024</span>
            <span class="spacer"></span>
          </div>
        </div>

      </div>

    </section>

    <section id="fullscreen" hidden="hidden" aria-hidden="true" >
      <div class="stack spacer fh align-center">
        <div class="stack v align-center spacer">
          <img src="img/radio-icon.png" alt="No album art" class="rounded fw" id="full-current-song-art">
          <div class="stack v fw nogap align-center text-align-center">
            <span class="subtitle">Now playing:</span>
            <span id="full-current-song-title" class="title">Loading...</span>
            <span id="full-current-song-artist" class="artist">Loading...</span>
            <div class="stack hw npgap v">
              <div class="stack fw nogap align-space-between h">
                <span id="full-elapsed">0:00</span>
                <span id="full-duration">0:00</span>
              </div>
              <progress id="full-progress"></progress>
            </div>
          </div>
        </div>

        <div class="spacer"></div>

      </div>

    </section>

  </main>


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

</body>

</html>