<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="myMPD - fast and lightweight MPD webclient">
  <meta name="author" content="mail@jcgames.de">
  <title>myMPD</title>

  <link href="css/bootstrap.css" rel="stylesheet">
  <link href="css/bootstrap-slider.css" rel="stylesheet">
  <link href="css/mpd.css" rel="stylesheet">
  <link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
  <script src="js/modernizr-custom.js"></script>
  
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <link rel="apple-touch-icon" href="assets/appicon.png"/>
</head>
<body>
  <header>
    <nav class="navbar navbar-expand navbar-dark fixed-top bg-dark">
        <div class="dropdown col-auto mr-auto" id="mainMenu">
          <a class="dropdown-toggle navbar-brand" data-toggle="dropdown" href="#">
            <span class="material-icons header-logo">play_circle_outline</span>myMPD
          </a>
          <div class="dropdown-menu bg-dark">
            <form id="search" class="px-4 py-3" role="search">
              <input type="text" class="form-control" placeholder="Search">
            </form>
            <div class="dropdown-divider"></div>
            <a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
            <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a>
            <a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html','LocalPlayer');">Local Player</a>
            <a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
            <a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
          </div>
        </div>
        <div class="btn-toolbar col-auto" role="toolbar">
          <div class="btn-group mr-2" role="group">
            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_PREV');">
              <span class="material-icons">skip_previous</span>
            </button>
            <button type="button" class="btn btn-secondary" onclick="clickPlay();">
              <span id="play-icon" class="material-icons">pause</span>
            </button>
            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SET_NEXT');">
              <span class="material-icons">skip_next</span>
            </button>
          </div>
          <div class="btn-group" role="group">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">
              <span id="volume-icon" class="material-icons">volume_up</span>
            </button>
            <div class="dropdown-menu dropdown-menu-right bg-dark">
              <h1 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h1>
              <form class="px-4 py-3" style="padding-top:0px !important;" id="volumeControl">
                <div class="btn-group" role="group">
                  <input type="button" class="btn btn-secondary" value="&minus;" onclick="chVolume(-5)"/>
                  <div class="btn btn-secondary">
                    <input id="volumebar" data-slider-id="volumebar" data-slider-handle="custom" type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
                  </div>
                  <input type="button" class="btn btn-secondary" value="+" onclick="chVolume(5)"/>
                </div>
              </form>
              <div class="dropdown-divider"></div>
              <form id="btn-outputs-block" class="px-4 py-3"></form>              
            </div>
          </div>
      </div>
    </nav>
  </header>
  <main role="main" class="container">
    <noscript>
      <div class="alert alert-danger" role="alert">JavaScript is disabled!</div>
    </noscript>
    <div class="card" id="cardPlayback">
      <div class="card-header">Now playing</div>
      <div class="card-body">
        <div id="album-cover"></div>
        <h1 id="currenttrack"></h1>
        <h3 id="artist"></h3>
        <h4 id="album"></h4>
        <div class="row">
          <div class="col-8">
            <input id="progressbar" data-slider-id='progressbar' data-slider-handle='custom' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="0"/>
          </div>
          <div class="col-4">
            <p id="counter" class="text">&nbsp;&nbsp;</p>
          </div>
        </div>          
      </div>
    </div>
    
    
    <div class="card hide" id="cardQueue">
      <div class="card-header">
        <a href="#" data-toggle="collapse" data-target="#queue-buttons" style="color:black;">Queue</a>
        <span id="panel-heading-queue" class="text pull-right"></span>
      </div>
      <div class="card-body">
        <div class="btn-toolbar collapse show" id="queue-buttons" role="toolbar">
          <div id="trashmode" class="btn-group mr-2">
            <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">delete</span></button>
            <div class="dropdown-menu bg-dark px-2" id="trashmodebtns">
              <h6 class="dropdown-header text-light">Trashmode</h6>
              <button id="btntrashmodeup" type="button" class="btn btn-secondary btn-block">
                <span class="material-icons" style="float:left;">vertical_align_top</span>
                <span style="margin-left:1rem;">Delete upward</span>
              </button>
              <button id="btntrashmodesingle" type="button" class="btn btn-success btn-block">
                <span class="material-icons" style="float:left;">delete</span>
                <span style="margin-left:1rem;">Delete single</span>
              </button>
              <button id="btntrashmodedown" type="button" class="btn btn-secondary btn-block">
                <span class="material-icons" style="float:left;">vertical_align_bottom</span>
                <span style="margin-left:1rem;">Delete downward</span>
              </button>
            </div>
          </div>
          <div id="queue-actions" class="btn-group mr-2">
            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_SEND_SHUFFLE');" title="Shuffle queue">
              <span class="material-icons">shuffle</span>
            </button>
            <button type="button" class="btn btn-secondary" onclick="socket.send('MPD_API_RM_ALL');" title="Clear queue">
              <span class="material-icons">clear_all</span>
            </button>
            <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#savequeue" title="Save queue">
              <span class="material-icons">save</span>
            </button>
          </div>
          <form id="searchqueue" role="search">
            <div class="input-group mr-2">
              <input type="text" class="form-control" placeholder="Search Queue" id="searchqueuestr"/>
              <div class="input-group-append">
                <button title="Select tags to search" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown"><span class="material-icons">search</span></button>
                <div class="dropdown-menu bg-dark dropdown-menu-right px-2" id="searchqueuetag">
                  <h6 class="dropdown-header text-light">Search in Tag</h6>
                  <button type="button" class="btn btn-success btn-block">Any Tag</button>
                  <button type="button" class="btn btn-secondary btn-block">Title</button>
                  <button type="button" class="btn btn-secondary btn-block">Artist</button>
                  <button type="button" class="btn btn-secondary btn-block">Album</button>
                </div>
              </div>
            </div>
          </form>
          <div id="queuePaginationTop" class="btn-group mr-2">
            <button onclick="gotoPage('prev',this,event)" id="queuePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
              <div class="input-group-append">
                <button id="queuePaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
                <div class="dropdown-menu bg-dark px-2" id="queuePaginationTopPages">
                </div>
              </div>            
            <button onclick="gotoPage('next',this,event)" id="queuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
          </div>
        </div>

        <div class="table-responsive-md">
          <table id="queueList" class="table table-hover table-sm">
            <col class="tblnum"/>
            <col class="tbltitle"/>
            <col class="tblartist"/>
            <col class="tblalbum"/>
            <col class="tbllength"/>
            <col class="tblaction"/>
            <thead>
              <tr>
                <th>#</th>
                <th>Title</th>              
                <th>Artist</th>
                <th>Album</th>
                <th>Duration</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="btn-toolbar" id="queueButtonsBottom" role="toolbar">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
              <span class="material-icons">keyboard_arrow_up</span>
            </button>
          </div>        
          <div id="queuePaginationBottom" class="btn-group mr-2 dropup">
            <button onclick="gotoPage('prev',this,event)" id="queuePaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
              <div class="input-group-append">
                <button id="queuePaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
                <div class="dropdown-menu bg-dark px-2" id="queuePaginationBottomPages">
                </div>
              </div>            
            <button onclick="gotoPage('next',this,event)" id="queuePaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
          </div>
        </div>
      </div>
    </div>
    
    <div class="card hide" id="cardBrowse">
      <div class="card-header" id="panel-heading-browse">
        <ul class="nav nav-tabs card-header-tabs">
          <li class="nav-item">
            <a class="nav-link text-dark" href="#/browse/filesystem/0/" id="cardBrowseNavFilesystem">Filesystem</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#/browse/playlists/0" id="cardBrowseNavPlaylists">Playlists</a>
          </li>
          <li class="nav-item">
            <a class="nav-link text-dark" href="#/browse/database/0" id="cardBrowseNavDatabase">Database</a>
          </li>
        </ul>
      </div>
      <div class="card-body hide" id="cardBrowsePlaylists">
        <div class="btn-toolbar collapse show" id="browsePlaylistsButtons" role="toolbar">
          <div id="browsePlaylistsPaginationTop" class="btn-group mr-2">
            <button onclick="gotoPage('prev',this,event)" id="browsePlaylistsPaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
              <div class="input-group-append">
                <button id="browsePlaylistsPaginationTopPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
                <div class="dropdown-menu bg-dark px-2" id="browsePlaylistsPaginationTopPages">
                </div>
              </div>            
            <button onclick="gotoPage('next',this,event)" id="browsePlaylistsPaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
          </div>
        </div>

        <div class="table-responsive-md">
          <table id="browsePlaylistsList" class="table table-hover table-sm">
            <col class="tblnum"/>
            <col class="tbltitle"/>  
            <col class="tbllastmodified"/>          
            <col class="tblaction"/>
            <thead>
              <tr>
                <th></th>
                <th>Playlist</th>
                <th>Last modified</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <div class="btn-toolbar" id="browsePlaylistsButtonsBottom" role="toolbar">
          <div class="btn-group mr-2">
            <button type="button" class="btn btn-secondary" onclick="scrollToTop()" title="To top">
              <span class="material-icons">keyboard_arrow_up</span>
            </button>
          </div>        
          <div id="browsePlaylistsPaginationBottom" class="btn-group mr-2 dropup">
            <button onclick="gotoPage('prev',this,event)" id="browsePlaylistsPaginationBottomPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
              <div class="input-group-append">
                <button id="browsePlaylistsPaginationBottomPage" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Page 1 / 1</button>
                <div class="dropdown-menu bg-dark px-2" id="browsePlaylistsPaginationBottomPages">
                </div>
              </div>            
            <button onclick="gotoPage('next',this,event)" id="browsePlaylistsPaginationBottomNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
          </div>
        </div>
      </div>
      <div class="card-body hide" id="cardBrowseDatabase">
      </div>
      <div class="card-body hide" id="cardBrowseFilesystem">
        <ol id="browseBreadcrumb" class="breadcrumb">
        </ol>

        <div class="btn-toolbar" id="filter-toolbar">
          <div class="btn-group mr-2 flex-wrap" data-toggle="radio" id="filter"></div>
          <div class="btn-group mr-2 pull-right">
            <button id="add-all-songs" class="btn btn-secondary">Add all</button>
          </div>
        </div>

        <div class="table-responsive-md">
          <table id="browseFilesystemList" class="table table-hover table-sm">
            <col class="tblnum"/>
            <col class="tbltitle"/>            
            <col class="tblartist"/>
            <col class="tblalbum"/>
            <col class="tbllength"/>
            <col class="tblaction"/>
            <thead>
              <tr>
                <th></th>
                <th>Title</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Duration</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
        <ul id="browsePagination" class="pagination justify-content-center hide">
          <li id="browsePrev" class="page-item disabled"><a class="page-link text-secondary" href="">Previous</a></li>
          <li id="browseNext" class="page-item disabled"><a class="page-link text-secondary" href="">Next</a></li>
        </ul>
      </div>
    </div>        

    <div class="card hide" id="cardSearch">
      <div class="card-header" id="panel-heading-search">Search</div>
      <div class="card-body">
        <div class="table-responsive-md">
          <table id="searchList" class="table table-hover table-sm">
            <col class="tblnum"/>
            <col class="tbltitle"/>
            <col class="tblartist"/>
            <col class="tblalbum"/>
            <col class="tbllength"/>
            <col class="tblaction"/>
            <thead>
              <tr>
                <th></th>
                <th>Title</th>                
                <th>Artist</th>
                <th>Album</th>
                <th>Duration</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>
        </div>
      </div>
    </div>    
    
  <footer class="footer">
    <nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
      <div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
        <div class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#/playing/">Playback</a></div>
        <div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#/queue/0">Queue</a></div>
        <div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#/browse/filesystem/0/">Browse</a></div>
      </div>
    </nav>
  </footer>

  <!-- Modal -->
  <div class="modal" id="modalConnectionError" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title"><span class="material-icons">error</span> Connection Error</h5>
        </div>
        <div class="modal-body">
          <p>Connection to myMPD failed. Trying to reconnect.</p>
        </div>
      </div>
      </div>
  </div>

  <!-- Modal -->
  <div class="modal fade" id="settings" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="form-group col-md-6">
              <button id="btnrandom" type="button" class="btn btn-secondary btn-block" title="Random">
                Random
              </button>
            </div>
            <div class="form-group col-md-6" data-toggle="buttons">          
              <button id="btnconsume" type="button" class="btn btn-secondary btn-block" title="Consume">
                Consume
              </button>
            </div>
          </div>
          <div class="row">
            <div class="form-group col-md-6" data-toggle="buttons">
              <button id="btnsingle" type="button" class="btn btn-secondary btn-block" title="Single">
                Single
              </button>
            </div>
            <div class="form-group col-md-6" data-toggle="buttons">
              <button id="btnrepeat" type="button" class="btn btn-secondary btn-block" title="Repeat">
                Repeat
              </button>
            </div>
          </div>
          <div class="row">
            <div class="form-group input-group col-md-6 border-secondary">
              <div class="input-group-prepend">
                <div class="input-group-text bg-secondary text-light border-secondary">Crossfade</div>
              </div>
              <input id="inputCrossfade" type="text" class="form-control border-secondary" value="">
            </div>
          </div>
          <div class="row">
            <div class="form-group input-group col-md-6 border-secondary">
              <div class="input-group-prepend">
                <div class="input-group-text bg-secondary text-light border-secondary">Mixramp DB</div>
              </div>
              <input id="inputMixrampdb" type="text" class="form-control border-secondary" value="">
            </div>
            <div class="form-group input-group col-md-6 border-secondary">
              <div class="input-group-prepend">
                <div class="input-group-text bg-secondary text-light border-secondary">Mixramp Delay</div>
              </div>
              <input id="inputMixrampdelay" type="text" class="form-control border-secondary" value="">
            </div>            
          </div>
          <hr/>
          <div class="row">
            <div class="form-group col-md-6" data-toggle="buttons">
              <button type="button" class="btn btn-secondary btn-block" id="btnnotifyPage">
                Page Notifications
              </button>
            </div>
            <div class="form-group col-md-6" data-toggle="buttons">
              <button type="button" class="btn btn-secondary btn-block" id="btnnotifyWeb">
                Web Notifications
              </button>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success" onclick="confirmSettings();">Save</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->
  
    <!-- Modal -->
  <div class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="settingsLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="settingsLabel"><span class="material-icons">play_circle_outline</span> About</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <h4><a class="text-success" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
          <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a style="color:#28a745" href="http://www.ympd.org">ympd</a>.</p>
          <ul>
            <li>Version: 2.1.1</li>
            <li>Homepage: <a class="text-success" target="_blank" href="https://github.com/jcorporation/mympd">https://github.com/jcorporation/mympd</a></li>
            <li>Autor: Juergen Mang &lt;<a class="text-success" href="mailto:mail@jcgames.de">mail@jcgames.de</a>&gt;</li>
          </ul>
          <hr/>
          <h5>Database Statistics</h5>
          <table class="table table-sm">
            <tbody>
              <tr><th>Artists</th><td id="mpdstats_artists"></td></tr>
              <tr><th>Albums</th><td id="mpdstats_albums"></td></tr>
              <tr><th>Songs</th><td id="mpdstats_songs"></td></tr>
              <tr><th>DB Play Time</th><td id="mpdstats_dbplaytime"></td></tr>
              <tr><th>DB Updated</th><td id="mpdstats_dbupdated"></td></tr>
            </tbody>
          </table>
          <hr/>
          <h5>Play Statistics</h5>
          <table class="table table-sm">
            <tbody>
              <tr><th>Uptime</th><td id="mpdstats_uptime"></td></tr>
              <tr><th>Play Time</th><td id="mpdstats_playtime"></td></tr>
            </tbody>
          </table>          
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <!-- Modal -->
  <div class="modal fade" id="addstream" tabindex="-1" role="dialog" aria-labelledby="addstreamLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="row">
              <div class="form-group col-md-12">
                <label class="control-label" for="streamurl">Stream URL</label>
                <input type="text" class="form-control" id="streamurl" />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success" onclick="addStream();">Add Stream</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>          
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="row">
              <div class="form-group col-md-9">
                <label class="control-label" for="playlistname">Playlist Name</label>
                <input type="text" class="form-control" id="playlistname" />
              </div>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-success" onclick="saveQueue();">Save Queue</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

  <script src="js/jquery-3.3.1.min.js"></script>
  <script src="js/js.cookie.js"></script>
  <script src="js/bootstrap.bundle.min.js"></script>
  <script src="js/bootstrap-slider.min.js"></script>
  <script src="js/bootstrap-notify.min.js"></script>
  <script src="js/sammy.js"></script>
  <script src="js/mpd.js"></script>
</html>