Improve playlist and library mobile styling
This commit is contained in:
		@@ -45,7 +45,6 @@
 | 
				
			|||||||
}
 | 
					}
 | 
				
			||||||
.library-item{
 | 
					.library-item{
 | 
				
			||||||
   display: flex;
 | 
					   display: flex;
 | 
				
			||||||
   margin-left: 5px;
 | 
					 | 
				
			||||||
   padding: .5rem .5rem .5rem 0;
 | 
					   padding: .5rem .5rem .5rem 0;
 | 
				
			||||||
   height: 72px;
 | 
					   height: 72px;
 | 
				
			||||||
   transition: ease-in-out 200ms;
 | 
					   transition: ease-in-out 200ms;
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -6,17 +6,17 @@
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
    <title>botamusique web interface</title>
 | 
					    <title>botamusique web interface</title>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <link rel="icon" href="static/image/favicon.ico" />
 | 
					    <link rel="icon" href="../static/image/favicon.ico" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css">
 | 
					    <link id="pagestyle" rel="stylesheet" href="../static/css/bootstrap.min.css">
 | 
				
			||||||
    <link rel="stylesheet" href="static/css/custom.css">
 | 
					    <link rel="stylesheet" href="../static/css/custom.css">
 | 
				
			||||||
</head>
 | 
					</head>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
<body>
 | 
					<body>
 | 
				
			||||||
    <div class="container page-header mb-5" id="banner">
 | 
					    <div class="container page-header mb-5" id="banner">
 | 
				
			||||||
        <div class="row">
 | 
					        <div class="row">
 | 
				
			||||||
            <div class="col-auto">
 | 
					            <div class="col-auto">
 | 
				
			||||||
                <img src="static/image/logo.png" height="200px">
 | 
					                <img src="../static/image/logo.png" height="200px">
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
            <div class="col my-auto">
 | 
					            <div class="col my-auto">
 | 
				
			||||||
                <h1>botamusique Web Interface</h1>
 | 
					                <h1>botamusique Web Interface</h1>
 | 
				
			||||||
@@ -25,146 +25,140 @@
 | 
				
			|||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="container mb-5">
 | 
					    <div class="container mb-5">
 | 
				
			||||||
        <div class="row">
 | 
					        <div id="playlist">
 | 
				
			||||||
            <div class="col">
 | 
					            <div class="row">
 | 
				
			||||||
                <div id="playlist" class="col-lg-12">
 | 
					                <div class="col">
 | 
				
			||||||
                    <div>
 | 
					                    <div class="btn-group mb-2">
 | 
				
			||||||
                        <div class="btn-group" style="margin-bottom: 10px;">
 | 
					                        <button type="button" id="play-btn" class="btn btn-info btn-space"
 | 
				
			||||||
                            <button type="button" id="play-btn" class="btn btn-info btn-space"
 | 
					                            onclick="request('post', {action : 'resume'})" disabled>
 | 
				
			||||||
                                onclick="request('post', {action : 'resume'})" disabled>
 | 
					                            <i class="fas fa-play" aria-hidden="true"></i>
 | 
				
			||||||
                                <i class="fas fa-play" aria-hidden="true"></i>
 | 
					                        </button>
 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            <button type="button" id="pause-btn" class="btn btn-warning btn-space"
 | 
					                        <button type="button" id="pause-btn" class="btn btn-warning btn-space"
 | 
				
			||||||
                                onclick="request('post', {action : 'pause'})" disabled>
 | 
					                            onclick="request('post', {action : 'pause'})" disabled>
 | 
				
			||||||
                                <i class="fas fa-pause" aria-hidden="true"></i>
 | 
					                            <i class="fas fa-pause" aria-hidden="true"></i>
 | 
				
			||||||
                            </button>
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                            <button type="button" id="stop-btn" class="btn btn-danger btn-space"
 | 
					                        <button type="button" id="stop-btn" class="btn btn-danger btn-space"
 | 
				
			||||||
                                onclick="request('post', {action : 'stop'})" disabled>
 | 
					                            onclick="request('post', {action : 'stop'})" disabled>
 | 
				
			||||||
                                <i class="fas fa-stop" aria-hidden="true"></i>
 | 
					                            <i class="fas fa-stop" aria-hidden="true"></i>
 | 
				
			||||||
                            </button>
 | 
					                        </button>
 | 
				
			||||||
                        </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                        <div class="btn-group" style="float: right;">
 | 
					 | 
				
			||||||
                            <button type="button" id="oneshot-btn" class="btn btn-primary btn-space"
 | 
					 | 
				
			||||||
                                title="One-shot Mode" onclick="request('post', {action : 'one-shot'})" disabled>
 | 
					 | 
				
			||||||
                                <i class="fas fa-tasks" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <button type="button" id="random-btn" class="btn btn-primary btn-space" title="Random Mode"
 | 
					 | 
				
			||||||
                                onclick="request('post', {action : 'randomize'})" disabled>
 | 
					 | 
				
			||||||
                                <i class="fas fa-random" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <button type="button" id="repeat-btn" class="btn btn-primary btn-space" title="Repeat Mode"
 | 
					 | 
				
			||||||
                                onclick="request('post', {action : 'repeat'})" disabled>
 | 
					 | 
				
			||||||
                                <i class="fas fa-redo" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <button type="button" id="autoplay-btn" class="btn btn-primary btn-space"
 | 
					 | 
				
			||||||
                                title="Autoplay Mode" onclick="request('post', {action : 'autoplay'})" disabled>
 | 
					 | 
				
			||||||
                                <i class="fas fa-robot" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <button type="button" class="btn btn-warning btn-space"
 | 
					 | 
				
			||||||
                                onclick="request('post', {action : 'volume_down'})">
 | 
					 | 
				
			||||||
                                <i class="fa fa-volume-down" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <input type="range" class="custom-range" id="volume-slider" min="0" max="1" step="0.01"
 | 
					 | 
				
			||||||
                                value="0.5" onchange="setVolumeDelayed(this.value)" />
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                            <button type="button" class="btn btn-warning btn-space"
 | 
					 | 
				
			||||||
                                onclick="request('post', {action : 'volume_up'})">
 | 
					 | 
				
			||||||
                                <i class="fa fa-volume-up" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                        </div>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                        <table class="table table-striped table-hover">
 | 
					 | 
				
			||||||
                            <thead>
 | 
					 | 
				
			||||||
                                <tr>
 | 
					 | 
				
			||||||
                                    <th scope="col">#</th>
 | 
					 | 
				
			||||||
                                    <th scope="col" class="playlist-title-td">Title</th>
 | 
					 | 
				
			||||||
                                    <th scope="col">Url/Path</th>
 | 
					 | 
				
			||||||
                                    <th scope="col">Action</th>
 | 
					 | 
				
			||||||
                                </tr>
 | 
					 | 
				
			||||||
                            </thead>
 | 
					 | 
				
			||||||
                            <tbody id="playlist-table" class="playlist-table">
 | 
					 | 
				
			||||||
                                <tr id="playlist-loading">
 | 
					 | 
				
			||||||
                                    <td colspan="4" style="text-align:center;">
 | 
					 | 
				
			||||||
                                        <img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                </tr>
 | 
					 | 
				
			||||||
                                <tr id="playlist-empty" style="display: none;">
 | 
					 | 
				
			||||||
                                    <td colspan="4" style="text-align:center;">
 | 
					 | 
				
			||||||
                                        <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                </tr>
 | 
					 | 
				
			||||||
                                <tr id="playlist-expand" class="table-dark" style="display: none;">
 | 
					 | 
				
			||||||
                                    <td colspan="4" style="text-align:center;">
 | 
					 | 
				
			||||||
                                        <a class="text-muted" href="javascript:">See item <span
 | 
					 | 
				
			||||||
                                                class="playlist-expand-item-range"></span> on the playlist.</a>
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                </tr>
 | 
					 | 
				
			||||||
                                <tr class="playlist-item-template" style="display: none;">
 | 
					 | 
				
			||||||
                                    <th scope="row" class="playlist-item-index"></th>
 | 
					 | 
				
			||||||
                                    <td>
 | 
					 | 
				
			||||||
                                        <input hidden type="text" class="playlist-item-id" value="" />
 | 
					 | 
				
			||||||
                                        <div class="playlist-title">
 | 
					 | 
				
			||||||
                                            <img width="80" class="playlist-item-thumbnail"
 | 
					 | 
				
			||||||
                                                src="static/image/unknown-album.png" />
 | 
					 | 
				
			||||||
                                        </div>
 | 
					 | 
				
			||||||
                                        <div class="playlist-artwork">
 | 
					 | 
				
			||||||
                                            <b class="playlist-item-title"></b>
 | 
					 | 
				
			||||||
                                            <span class="playlist-item-type badge badge-secondary"></span>
 | 
					 | 
				
			||||||
                                            <br />
 | 
					 | 
				
			||||||
                                            <span class="playlist-item-artist"></span>
 | 
					 | 
				
			||||||
                                            <br />
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                                            <div class="playlist-item-tags">
 | 
					 | 
				
			||||||
                                                <a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
 | 
					 | 
				
			||||||
                                                        style="color: #AAAAAA"></i></a>
 | 
					 | 
				
			||||||
                                            </div>
 | 
					 | 
				
			||||||
                                        </div>
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                    <td>
 | 
					 | 
				
			||||||
                                        <small class="playlist-item-path"></small>
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                    <td>
 | 
					 | 
				
			||||||
                                        <div class="btn-group">
 | 
					 | 
				
			||||||
                                            <button type="button"
 | 
					 | 
				
			||||||
                                                class="playlist-item-play btn btn-info btn-sm btn-space">
 | 
					 | 
				
			||||||
                                                <i class="fa fa-play" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                                            </button>
 | 
					 | 
				
			||||||
                                            <button type="button"
 | 
					 | 
				
			||||||
                                                class="playlist-item-trash btn btn-danger btn-sm btn-space">
 | 
					 | 
				
			||||||
                                                <i class="fas fa-trash-alt" aria-hidden="true"></i>
 | 
					 | 
				
			||||||
                                            </button>
 | 
					 | 
				
			||||||
                                        </div>
 | 
					 | 
				
			||||||
                                    </td>
 | 
					 | 
				
			||||||
                                </tr>
 | 
					 | 
				
			||||||
                            </tbody>
 | 
					 | 
				
			||||||
                        </table>
 | 
					 | 
				
			||||||
 | 
					 | 
				
			||||||
                        <div class="btn-group">
 | 
					 | 
				
			||||||
                            <button type="button" class="btn btn-danger btn-space"
 | 
					 | 
				
			||||||
                                onclick="request('post', {action : 'clear'})">
 | 
					 | 
				
			||||||
                                <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
 | 
					 | 
				
			||||||
                            </button>
 | 
					 | 
				
			||||||
                        </div>
 | 
					 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
                </div>
 | 
					                </div>
 | 
				
			||||||
 | 
					                <div class="col text-right">
 | 
				
			||||||
 | 
					                    <div class="btn-group mb-2">
 | 
				
			||||||
 | 
					                        <button type="button" id="oneshot-btn" class="btn btn-primary btn-space" title="One-shot Mode"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'one-shot'})" disabled>
 | 
				
			||||||
 | 
					                            <i class="fas fa-tasks" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <button type="button" id="random-btn" class="btn btn-primary btn-space" title="Random Mode"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'randomize'})" disabled>
 | 
				
			||||||
 | 
					                            <i class="fas fa-random" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <button type="button" id="repeat-btn" class="btn btn-primary btn-space" title="Repeat Mode"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'repeat'})" disabled>
 | 
				
			||||||
 | 
					                            <i class="fas fa-redo" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <button type="button" id="autoplay-btn" class="btn btn-primary btn-space" title="Autoplay Mode"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'autoplay'})" disabled>
 | 
				
			||||||
 | 
					                            <i class="fas fa-robot" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <button type="button" class="btn btn-warning btn-space"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'volume_down'})">
 | 
				
			||||||
 | 
					                            <i class="fa fa-volume-down" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <input type="range" class="custom-range" id="volume-slider" min="0" max="1" step="0.01"
 | 
				
			||||||
 | 
					                            value="0.5" onchange="setVolumeDelayed(this.value)" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                        <button type="button" class="btn btn-warning btn-space"
 | 
				
			||||||
 | 
					                            onclick="request('post', {action : 'volume_up'})">
 | 
				
			||||||
 | 
					                            <i class="fa fa-volume-up" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                        </button>
 | 
				
			||||||
 | 
					                    </div>
 | 
				
			||||||
 | 
					                </div>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="table-responsive">
 | 
				
			||||||
 | 
					                <table class="table table-striped table-hover">
 | 
				
			||||||
 | 
					                    <thead>
 | 
				
			||||||
 | 
					                        <tr>
 | 
				
			||||||
 | 
					                            <th scope="col">#</th>
 | 
				
			||||||
 | 
					                            <th scope="col" class="playlist-title-td">Title</th>
 | 
				
			||||||
 | 
					                            <th scope="col">Url/Path</th>
 | 
				
			||||||
 | 
					                            <th scope="col">Action</th>
 | 
				
			||||||
 | 
					                        </tr>
 | 
				
			||||||
 | 
					                    </thead>
 | 
				
			||||||
 | 
					                    <tbody id="playlist-table" class="playlist-table">
 | 
				
			||||||
 | 
					                        <tr id="playlist-loading">
 | 
				
			||||||
 | 
					                            <td colspan="4" style="text-align:center;">
 | 
				
			||||||
 | 
					                                <img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                        </tr>
 | 
				
			||||||
 | 
					                        <tr id="playlist-empty" style="display: none;">
 | 
				
			||||||
 | 
					                            <td colspan="4" style="text-align:center;">
 | 
				
			||||||
 | 
					                                <img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                        </tr>
 | 
				
			||||||
 | 
					                        <tr id="playlist-expand" class="table-dark" style="display: none;">
 | 
				
			||||||
 | 
					                            <td colspan="4" style="text-align:center;">
 | 
				
			||||||
 | 
					                                <a class="text-muted" href="javascript:">See item <span
 | 
				
			||||||
 | 
					                                        class="playlist-expand-item-range"></span> on the playlist.</a>
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                        </tr>
 | 
				
			||||||
 | 
					                        <tr class="playlist-item-template" style="display: none;">
 | 
				
			||||||
 | 
					                            <th scope="row" class="playlist-item-index"></th>
 | 
				
			||||||
 | 
					                            <td>
 | 
				
			||||||
 | 
					                                <input hidden type="text" class="playlist-item-id" value="" />
 | 
				
			||||||
 | 
					                                <div class="playlist-title">
 | 
				
			||||||
 | 
					                                    <img width="80" class="playlist-item-thumbnail"
 | 
				
			||||||
 | 
					                                        src="../static/image/unknown-album.png" />
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					                                <div class="playlist-artwork">
 | 
				
			||||||
 | 
					                                    <b class="playlist-item-title"></b>
 | 
				
			||||||
 | 
					                                    <span class="playlist-item-type badge badge-secondary"></span>
 | 
				
			||||||
 | 
					                                    <br />
 | 
				
			||||||
 | 
					                                    <span class="playlist-item-artist"></span>
 | 
				
			||||||
 | 
					                                    <br />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                                    <div class="playlist-item-tags">
 | 
				
			||||||
 | 
					                                        <a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
 | 
				
			||||||
 | 
					                                                style="color: #AAAAAA"></i></a>
 | 
				
			||||||
 | 
					                                    </div>
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                            <td>
 | 
				
			||||||
 | 
					                                <small class="playlist-item-path"></small>
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                            <td>
 | 
				
			||||||
 | 
					                                <div class="btn-group">
 | 
				
			||||||
 | 
					                                    <button type="button" class="playlist-item-play btn btn-info btn-sm btn-space">
 | 
				
			||||||
 | 
					                                        <i class="fa fa-play" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                                    </button>
 | 
				
			||||||
 | 
					                                    <button type="button" class="playlist-item-trash btn btn-danger btn-sm btn-space">
 | 
				
			||||||
 | 
					                                        <i class="fas fa-trash-alt" aria-hidden="true"></i>
 | 
				
			||||||
 | 
					                                    </button>
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					                            </td>
 | 
				
			||||||
 | 
					                        </tr>
 | 
				
			||||||
 | 
					                    </tbody>
 | 
				
			||||||
 | 
					                </table>
 | 
				
			||||||
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					            <div class="btn-group">
 | 
				
			||||||
 | 
					                <button type="button" class="btn btn-danger btn-space" onclick="request('post', {action : 'clear'})">
 | 
				
			||||||
 | 
					                    <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
 | 
				
			||||||
 | 
					                </button>
 | 
				
			||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <div class="container mb-3">
 | 
					    <div class="container mb-3">
 | 
				
			||||||
 | 
					        <h2 id="forms">Music Library</h2>
 | 
				
			||||||
        <div class="page-header">
 | 
					 | 
				
			||||||
            <h1 id="forms">Music Library</h1>
 | 
					 | 
				
			||||||
        </div>
 | 
					 | 
				
			||||||
 | 
					
 | 
				
			||||||
        <div id="browser" class="card">
 | 
					        <div id="browser" class="card">
 | 
				
			||||||
            <div class="card-header">
 | 
					            <div class="card-header">
 | 
				
			||||||
@@ -172,73 +166,83 @@
 | 
				
			|||||||
            </div>
 | 
					            </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
            <div class="card-body">
 | 
					            <div class="card-body">
 | 
				
			||||||
                <div class="alert alert-secondary">
 | 
					                <div class="card mb-3" style="background-color: #e2e3e5;">
 | 
				
			||||||
                    <h4 class="alert-heading">Filters</h4>
 | 
					                    <div class="card-body">
 | 
				
			||||||
                    <div class="row">
 | 
					                        <h4>Filters</h4>
 | 
				
			||||||
                        <div class="col-6">
 | 
					                        
 | 
				
			||||||
                            <div id="filter-type" class="form-group row">
 | 
					                        <div class="row">
 | 
				
			||||||
                                <label class="col-sm-2 col-form-label">Type</label>
 | 
					                            <div class="col">
 | 
				
			||||||
                                <div class="btn-group btn-group-toggle" data-toggle="buttons"
 | 
					                                <div id="filter-type" class="form-group row">
 | 
				
			||||||
                                    style="height: 35px; padding-top:5px;">
 | 
					                                    <label class="col-auto col-form-label">Type</label>
 | 
				
			||||||
                                    <button type="button" id="filter-type-file" class="btn btn-secondary btn-sm"
 | 
					
 | 
				
			||||||
                                        onclick="setFilterType('file')">File</button>
 | 
					                                    <div class="col btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
 | 
				
			||||||
                                    <button type="button" id="filter-type-url" class="btn btn-secondary btn-sm"
 | 
					                                        <button type="button" id="filter-type-file" class="btn btn-secondary btn-sm"
 | 
				
			||||||
                                        onclick="setFilterType('url')">URL</button>
 | 
					                                            onclick="setFilterType('file')">File
 | 
				
			||||||
                                    <button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm"
 | 
					                                        </button>
 | 
				
			||||||
                                        onclick="setFilterType('radio')">Radio</button>
 | 
					                                        <button type="button" id="filter-type-url" class="btn btn-secondary btn-sm"
 | 
				
			||||||
 | 
					                                            onclick="setFilterType('url')">URL
 | 
				
			||||||
 | 
					                                        </button>
 | 
				
			||||||
 | 
					                                        <button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm"
 | 
				
			||||||
 | 
					                                            onclick="setFilterType('radio')">Radio
 | 
				
			||||||
 | 
					                                        </button>
 | 
				
			||||||
 | 
					                                    </div>
 | 
				
			||||||
                                </div>
 | 
					                                </div>
 | 
				
			||||||
                            </div>
 | 
					                                <div id="filter-path" class="form-group row">
 | 
				
			||||||
                            <div id="filter-path" class="form-group row">
 | 
					                                    <label class="col-auto col-form-label" for="filter-dir">Directory</label>
 | 
				
			||||||
                                <label class="col-sm-2 col-form-label" for="filter-dir"
 | 
					
 | 
				
			||||||
                                    style="max-width: none">Directory</label>
 | 
					                                    <div class="col">
 | 
				
			||||||
                                <div class="col-sm-8">
 | 
					                                        <select class="form-control form-control-sm" id="filter-dir"
 | 
				
			||||||
                                    <select class="form-control form-control-sm" id="filter-dir" style="margin-top:5px;"
 | 
					                                            style="margin-top:5px;" disabled>
 | 
				
			||||||
                                        disabled>
 | 
					                                            <option value="">.</option>
 | 
				
			||||||
                                        <option value="">.</option>
 | 
					                                            {% for dir in dirs %}
 | 
				
			||||||
                                        {% for dir in dirs %}
 | 
					                                            <option value="{{ dir }}">{{ dir }}</option>
 | 
				
			||||||
                                        <option value="{{ dir }}">{{ dir }}</option>
 | 
					                                            {% endfor %}
 | 
				
			||||||
                                        {% endfor %}
 | 
					                                        </select>
 | 
				
			||||||
                                    </select>
 | 
					                                    </div>
 | 
				
			||||||
 | 
					                                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                                <div id="filter-path" class="form-group row">
 | 
				
			||||||
 | 
					                                    <label class="col-auto col-form-label" for="filter-keywords">Keywords</label>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					                                    <div class="col">
 | 
				
			||||||
 | 
					                                        <input class="form-control form-control-sm" id="filter-keywords" name="keywords"
 | 
				
			||||||
 | 
					                                            placeholder="Keywords..." style="margin-top:5px;" />
 | 
				
			||||||
 | 
					                                    </div>
 | 
				
			||||||
                                </div>
 | 
					                                </div>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            
 | 
					                            
 | 
				
			||||||
                            <div id="filter-path" class="form-group row">
 | 
					                            <div class="col">
 | 
				
			||||||
                                <label class="col-sm-2 col-form-label" for="filter-keywords"
 | 
					                                <div class="row">
 | 
				
			||||||
                                    style="max-width: none">Keywords</label>
 | 
					                                    <div class="col-auto">
 | 
				
			||||||
                                <div class="col-sm-8">
 | 
					                                        <label for="filter-tag">Tags</label>
 | 
				
			||||||
                                    <input class="form-control form-control-sm" id="filter-keywords" name="keywords"
 | 
					                                    </div>
 | 
				
			||||||
                                        placeholder="Keywords..." style="margin-top:5px;" />
 | 
					
 | 
				
			||||||
                                </div>
 | 
					                                    <div id="filter-type" class="col">
 | 
				
			||||||
                            </div>
 | 
					                                        {% for tag in tags_color_lookup.keys() %}
 | 
				
			||||||
                        </div>
 | 
					                                        <span id="filter-tag"
 | 
				
			||||||
                        <div class="col-6">
 | 
					                                            class="filter-tag tag-unclicked tag-click badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
 | 
				
			||||||
                            <div id="filter-type" class="form-group row">
 | 
					                                        {% endfor %}
 | 
				
			||||||
                                <label class="col-sm-2 col-form-label">Tags</label>
 | 
					                                    </div>
 | 
				
			||||||
                                <div class="col-sm-10" style="padding-top:5px;">
 | 
					 | 
				
			||||||
                                    {% for tag in tags_color_lookup.keys() %}
 | 
					 | 
				
			||||||
                                    <span id="filter-tag"
 | 
					 | 
				
			||||||
                                        class="filter-tag tag-unclicked tag-click badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
 | 
					 | 
				
			||||||
                                    {% endfor %}
 | 
					 | 
				
			||||||
                                </div>
 | 
					                                </div>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                        </div>
 | 
					                        </div>
 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
 | 
					 | 
				
			||||||
                </div>
 | 
					                </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                <div id="library-group" class="list-group library-group">
 | 
					                <div id="library-group" class="list-group library-group">
 | 
				
			||||||
                    <div id="library-item-loading" class="list-group-item library-item">
 | 
					                    <div id="library-item-loading" class="list-group-item library-item">
 | 
				
			||||||
                        <img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
 | 
					                        <img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
                    <div id="library-item-empty" style="display: none" class="list-group-item library-item">
 | 
					                    <div id="library-item-empty" style="display: none" class="list-group-item library-item">
 | 
				
			||||||
                        <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
 | 
					                        <img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
 | 
				
			||||||
                    </div>
 | 
					                    </div>
 | 
				
			||||||
                    <div id="library-item" style="display: none;" class="list-group-item library-item">
 | 
					                    <div id="library-item" style="display: none;" class="list-group-item library-item">
 | 
				
			||||||
                        <input hidden type="text" class="library-item-id" value="" />
 | 
					                        <input hidden type="text" class="library-item-id" value="" />
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        <div class="library-thumb-col">
 | 
					                        <div class="library-thumb-col">
 | 
				
			||||||
                            <div class="library-thumb-img">
 | 
					                            <div class="library-thumb-img">
 | 
				
			||||||
                                <img class="library-item-thumb library-thumb-img"
 | 
					                                <img class="library-item-thumb library-thumb-img"
 | 
				
			||||||
                                    src="static/image/unknown-album.png" />
 | 
					                                    src="../static/image/unknown-album.png" />
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                            <div class="btn-group-vertical library-thumb-grp">
 | 
					                            <div class="btn-group-vertical library-thumb-grp">
 | 
				
			||||||
                                <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
 | 
					                                <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
 | 
				
			||||||
@@ -246,6 +250,7 @@
 | 
				
			|||||||
                                </div>
 | 
					                                </div>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                        </div>
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
 | 
					                        <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
 | 
				
			||||||
                            <div>
 | 
					                            <div>
 | 
				
			||||||
                                <span class="library-item-type lead text-muted btn-space">[File]</span>
 | 
					                                <span class="library-item-type lead text-muted btn-space">[File]</span>
 | 
				
			||||||
@@ -253,6 +258,7 @@
 | 
				
			|||||||
                                <span class="library-item-artist text-muted"> - Artist</span>
 | 
					                                <span class="library-item-artist text-muted"> - Artist</span>
 | 
				
			||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                        </div>
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
                        <div class="library-info-col col-4" style="padding: 3px;">
 | 
					                        <div class="library-info-col col-4" style="padding: 3px;">
 | 
				
			||||||
                            <span class="library-item-path text-muted path">Path/to/the/file</span>
 | 
					                            <span class="library-item-path text-muted path">Path/to/the/file</span>
 | 
				
			||||||
                            <div class="library-item-tags">
 | 
					                            <div class="library-item-tags">
 | 
				
			||||||
@@ -264,7 +270,6 @@
 | 
				
			|||||||
                            </div>
 | 
					                            </div>
 | 
				
			||||||
                        </div>
 | 
					                        </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					 | 
				
			||||||
                        <div class="btn-group library-action">
 | 
					                        <div class="btn-group library-action">
 | 
				
			||||||
                            <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
 | 
					                            <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
 | 
				
			||||||
                                title="Next to play">
 | 
					                                title="Next to play">
 | 
				
			||||||
@@ -479,10 +484,10 @@
 | 
				
			|||||||
        </div>
 | 
					        </div>
 | 
				
			||||||
    </div>
 | 
					    </div>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
    <script src="static/js/jquery-3.4.1.min.js"></script>
 | 
					    <script src="../static/js/jquery-3.4.1.min.js"></script>
 | 
				
			||||||
    <script src="static/js/bootstrap.bundle.min.js"></script>
 | 
					    <script src="../static/js/bootstrap.bundle.min.js"></script>
 | 
				
			||||||
    <script src="static/js/fontawesome.all.js"></script>
 | 
					    <script src="../static/js/fontawesome.all.js"></script>
 | 
				
			||||||
    <script src="static/js/custom.js"></script>
 | 
					    <script src="../static/js/custom.js"></script>
 | 
				
			||||||
</body>
 | 
					</body>
 | 
				
			||||||
 | 
					
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
		Reference in New Issue
	
	Block a user