542 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
			
		
		
	
	
			542 lines
		
	
	
		
			30 KiB
		
	
	
	
		
			HTML
		
	
	
	
	
	
<!DOCTYPE html>
 | 
						|
 | 
						|
<html lang="en">
 | 
						|
 | 
						|
<head>
 | 
						|
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 | 
						|
    <meta charset="UTF-8">
 | 
						|
 | 
						|
    <title>{{ tr('page_title') }}</title>
 | 
						|
 | 
						|
    <link rel="icon" href="static/image/favicon.ico" />
 | 
						|
 | 
						|
    <link id="pagestyle" rel="stylesheet" href="static/css/main.css">
 | 
						|
</head>
 | 
						|
 | 
						|
<body>
 | 
						|
    <header class="container page-header mb-5" id="banner">
 | 
						|
        <div class="row">
 | 
						|
            <div class="col-auto">
 | 
						|
                <img src="static/image/logo.png" height="200px"
 | 
						|
                                                 alt="{{ tr('aria_botamusique_logo') }}">
 | 
						|
            </div>
 | 
						|
            <div class="col my-auto">
 | 
						|
                <h1>{{ tr('page_title') }}</h1>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </header>
 | 
						|
 | 
						|
    <main id="playlist" class="container mb-5">
 | 
						|
        <div class="btn-toolbar mb-2" role="toolbar" aria-label="{{ tr('playlist_controls') }}">
 | 
						|
            <button type="button" id="play-pause-btn" class="btn btn-info mb-2 btn-space" aria-label="{{ tr('play') }}">
 | 
						|
                <i class="fas fa-play"></i>
 | 
						|
            </button>
 | 
						|
            <button type="button" id="fast-forward-btn" class="btn btn-info mb-2" aria-label="{{ tr('skip_track') }}">
 | 
						|
                <i class="fas fa-fast-forward"></i>
 | 
						|
            </button>
 | 
						|
            <div class="ml-auto">
 | 
						|
                <div class="dropdown mr-2">
 | 
						|
                    <button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
 | 
						|
                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
 | 
						|
                        aria-label="{{ tr('change_playback_mode') }}">
 | 
						|
                        <i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
 | 
						|
                    </button>
 | 
						|
                    <div class="dropdown-menu" aria-labelledby="play-mode">
 | 
						|
                        <a class="dropdown-item" href="#" id="one-shot-mode-btn">
 | 
						|
                            <i class="fas fa-tasks mr-2" aria-hidden="true"></i> {{ tr('oneshot') }}
 | 
						|
                        </a>
 | 
						|
                        <a class="dropdown-item" href="#" id="random-mode-btn">
 | 
						|
                            <i class="fas fa-random mr-2" aria-hidden="true"></i> {{ tr('random') }}
 | 
						|
                        </a>
 | 
						|
                        <a class="dropdown-item" href="#" id="repeat-mode-btn">
 | 
						|
                            <i class="fas fa-redo mr-2" aria-hidden="true"></i> {{ tr('repeat') }}
 | 
						|
                        </a>
 | 
						|
                        <a class="dropdown-item" href="#" id="autoplay-mode-btn">
 | 
						|
                            <i class="fas fa-robot mr-2" aria-hidden="true"></i> {{ tr('autoplay') }}
 | 
						|
                        </a>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
                <button type="button" id="volume-popover-btn" class="btn btn-warning ml-1"
 | 
						|
                                                              aria-label="{{ tr('open_volume_controls') }}">
 | 
						|
                    <i class="fa fa-volume-up" aria-hidden="true"></i>
 | 
						|
                </button>
 | 
						|
 | 
						|
                <div id="volume-popover">
 | 
						|
                    <a id="volume-down-btn">
 | 
						|
                        <i class="fa fa-volume-down" aria-hidden="true"></i>
 | 
						|
                    </a>
 | 
						|
 | 
						|
                    <input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
 | 
						|
                                                                                                     value="0.5" aria-label="{{ tr('volume_slider') }}" />
 | 
						|
 | 
						|
                    <a id="volume-up-btn">
 | 
						|
                        <i class="fa fa-volume-up" aria-hidden="true"></i>
 | 
						|
                    </a>
 | 
						|
                    <div id="volume-popover-arrow"></div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
 | 
						|
        <div class="table-responsive">
 | 
						|
            <table class="table table-striped table-hover">
 | 
						|
                <thead>
 | 
						|
                    <tr>
 | 
						|
                        <th scope="col" class="d-none d-md-table-cell">{{ tr('index') }}</th>
 | 
						|
                        <th scope="col" class="w-50">{{ tr('title') }}</th>
 | 
						|
                        <th scope="col" class="d-none d-md-table-cell">{{ tr('url_path') }}</th>
 | 
						|
                        <th scope="col">{{ tr('action') }}</th>
 | 
						|
                    </tr>
 | 
						|
                </thead>
 | 
						|
                <tbody id="playlist-table" class="playlist-table">
 | 
						|
                    <tr id="playlist-loading">
 | 
						|
                        <td colspan="4" class="text-center">
 | 
						|
                            <img style="margin: auto; width: 35px;" src="static/image/loading.svg"
 | 
						|
                                                                    alt="{{ tr('aria_spinner') }}" />
 | 
						|
                        </td>
 | 
						|
                    </tr>
 | 
						|
                    <tr id="playlist-empty" class="d-none">
 | 
						|
                        <td colspan="4" class="text-center">
 | 
						|
                            <img style="margin: auto; width: 35px;" src="static/image/empty_box.svg"
 | 
						|
                                                                    alt="{{ tr('aria_empty_box') }}" />
 | 
						|
                        </td>
 | 
						|
                    </tr>
 | 
						|
                    <tr class="playlist-expand table-dark d-none">
 | 
						|
                        <td colspan="4" class="text-center">
 | 
						|
                            <a class="text-muted" href="javascript:">{{ tr('expand_playlist') }}</a>
 | 
						|
                        </td>
 | 
						|
                    </tr>
 | 
						|
                    <tr class="playlist-item-template d-none" aria-hidden="true">
 | 
						|
                        <th scope="row" class="playlist-item-index d-none d-md-table-cell">1</th>
 | 
						|
                        <td>
 | 
						|
                            <input hidden type="hidden" class="playlist-item-id" value="" />
 | 
						|
                            <div class="float-left">
 | 
						|
                                <img width="80" class="playlist-item-thumbnail" src="static/image/unknown-album.png"
 | 
						|
                                                                                alt="{{ tr('aria_default_cover') }}" />
 | 
						|
                            </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 class="d-none d-md-table-cell">
 | 
						|
                            <small class="playlist-item-path"></small>
 | 
						|
                        </td>
 | 
						|
                        <td>
 | 
						|
                            <div class="btn-group">
 | 
						|
                                <button type="button" class="playlist-item-play btn btn-info btn-sm"
 | 
						|
                                                      aria-label="{{ tr('aria_skip_current_song') }}">
 | 
						|
                                    <i class="fas fa-play" aria-hidden="true"></i>
 | 
						|
                                </button>
 | 
						|
                                <button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1"
 | 
						|
                                                      aria-label="{{ tr('aria_remove_this_song') }}">
 | 
						|
                                    <i class="fas fa-trash-alt" aria-hidden="true"></i>
 | 
						|
                                </button>
 | 
						|
                            </div>
 | 
						|
                        </td>
 | 
						|
                    </tr>
 | 
						|
                </tbody>
 | 
						|
            </table>
 | 
						|
        </div>
 | 
						|
 | 
						|
        <div class="btn-group">
 | 
						|
            <button type="button" id="clear-playlist-btn" class="btn btn-danger mr-1">
 | 
						|
                <i class="fas fa-trash-alt" aria-hidden="true"></i> {{ tr('clear_playlist') }}</button>
 | 
						|
        </div>
 | 
						|
    </main>
 | 
						|
 | 
						|
    <div class="container mb-3">
 | 
						|
        <h2 id="forms">{{ tr('music_library') }}</h2>
 | 
						|
 | 
						|
        <div class="card mb-3">
 | 
						|
            <div class="card-header">
 | 
						|
                <h3 class="card-title">{{ tr('filters') }}</h3>
 | 
						|
                <hr>
 | 
						|
                <div class="row">
 | 
						|
                    <div class="col">
 | 
						|
                        <fieldset id="filter-type" class="mb-2">
 | 
						|
                            <legend>{{ tr('type') }}</legend>
 | 
						|
                            <div class="btn-group btn-group-sm btn-group-toggle">
 | 
						|
                                <label id="filter-type-file" class="btn btn-secondary">
 | 
						|
                                    <input type="checkbox" name="options">{{ tr('file') }}
 | 
						|
                                </label>
 | 
						|
                                <label id="filter-type-url" class="btn btn-secondary">
 | 
						|
                                    <input type="checkbox" name="options">{{ tr('url') }}
 | 
						|
                                </label>
 | 
						|
                                <label id="filter-type-radio" class="btn btn-secondary">
 | 
						|
                                    <input type="checkbox" name="options">{{ tr('radio') }}
 | 
						|
                                </label>
 | 
						|
                            </div>
 | 
						|
                        </fieldset>
 | 
						|
 | 
						|
                        <label for="filter-dir">{{ tr('directory') }}</label>
 | 
						|
                        <div id="filter-path" class="input-group mb-2">
 | 
						|
                            <select class="form-control form-control-sm" id="filter-dir" disabled>
 | 
						|
                            </select>
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <label for="filter-keywords">{{ tr('keywords') }}</label>
 | 
						|
                        <div id="filter-path" class="input-group mb-2">
 | 
						|
                            <input class="form-control form-control-sm" id="filter-keywords" name="keywords"
 | 
						|
                                                                                             placeholder="{{ tr('keywords_placeholder') }}" style="margin-top:5px;" />
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
 | 
						|
                    <div class="col">
 | 
						|
                        <fieldset id="filter-tags">
 | 
						|
                            <legend>{{ tr('tags') }}</legend>
 | 
						|
                            <span class="filter-tag tag-unclicked tag-click badge"></span>
 | 
						|
                        </fieldset>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
            <div class="card-body">
 | 
						|
                <div id="library-group" class="list-group library-group" style="overflow: auto;">
 | 
						|
                    <input type="hidden" id="deleteAllowed" value="true" />
 | 
						|
                    <div id="library-item-loading" class="list-group-item library-item">
 | 
						|
                        <img style="margin: auto; width: 35px;" src="static/image/loading.svg"
 | 
						|
                                                                alt="{{ tr('aria_spinner') }}" />
 | 
						|
                    </div>
 | 
						|
                    <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"
 | 
						|
                                                                alt="{{ tr('aria_empty_box') }}" />
 | 
						|
                    </div>
 | 
						|
                    <div id="library-item" style="display: none;" class="list-group-item library-item">
 | 
						|
                        <input hidden type="hidden" class="library-item-id" value="" />
 | 
						|
 | 
						|
                        <div class="library-thumb-col">
 | 
						|
                            <div class="library-thumb-img">
 | 
						|
                                <img class="library-item-thumb library-thumb-img" src="static/image/unknown-album.png"
 | 
						|
                                                                                  alt="{{ tr('aria_default_cover') }}" />
 | 
						|
                            </div>
 | 
						|
                            <div class="btn-group-vertical library-thumb-grp">
 | 
						|
                                <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="{{ tr('play') }}">
 | 
						|
                                    <i class="fas fa-play" aria-hidden="true"></i>
 | 
						|
                                </div>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
 | 
						|
                            <div>
 | 
						|
                                <span class="library-item-type lead text-muted btn-space">[File]</span>
 | 
						|
                                <span class="library-item-title lead btn-space">This is my title</span>
 | 
						|
                                <span class="library-item-artist text-muted"> - Artist</span>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <div class="library-info-col col-4 d-none d-md-flex" style="padding: 3px;">
 | 
						|
                            <span class="library-item-path text-muted path">Path/to/the/file</span>
 | 
						|
                            <div class="library-item-tags">
 | 
						|
                                <a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
 | 
						|
                                        style="color: #AAAAAA"></i></a>
 | 
						|
                                <span class="library-item-notag badge badge-light text-muted font-italic">{{ tr('no_tag') }}</span>
 | 
						|
                                <span class="library-item-tag tag-space badge">Tag</span>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
 | 
						|
                        <div class="btn-group library-action">
 | 
						|
                            <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
 | 
						|
                                                                                                title="{{ tr('next_to_play') }}" aria-label="{{ tr('add_to_playlist_next') }}">
 | 
						|
                                <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;"
 | 
						|
                                    viewBox="5 5 17 17">
 | 
						|
                                    <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z">
 | 
						|
                                    </path>
 | 
						|
                                    <path
 | 
						|
                                        d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z">
 | 
						|
                                    </path>
 | 
						|
                                </svg>
 | 
						|
                            </button>
 | 
						|
                            <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space"
 | 
						|
                                    type="button" title="{{ tr('add_to_bottom') }}" aria-label="{{ tr('add_to_bottom_of_current_playlist') }}">
 | 
						|
                                <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;"
 | 
						|
                                    viewBox="2 2 20 20">
 | 
						|
                                    <path
 | 
						|
                                        d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z">
 | 
						|
                                    </path>
 | 
						|
                                </svg>
 | 
						|
                            </button>
 | 
						|
                            <button class="library-item-download btn btn-primary btn-sm btn-space" type="button"
 | 
						|
                                                                                                   aria-label="{{ tr('download_song_from_library') }}">
 | 
						|
                                <i class="fas fa-download" aria-hidden="true"></i>
 | 
						|
                            </button>
 | 
						|
                            <button class="library-item-trash btn btn-danger btn-sm btn-space library-delete" type="button"
 | 
						|
                                                                                               aria-label="{{ tr('remove_song_from_library') }}">
 | 
						|
                                <i class="fas fa-trash-alt"></i>
 | 
						|
                            </button>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="list-group">
 | 
						|
                    <div id="library-pagination" style="margin-left: auto; margin-top: 10px;">
 | 
						|
                        <ul id="library-page-ul" class="pagination pagination">
 | 
						|
                            <li class="library-page-li page-item ctive">
 | 
						|
                                <a class="library-page-no page-link">1</a>
 | 
						|
                            </li>
 | 
						|
                        </ul>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="btn-group mb-2" role="group">
 | 
						|
                    <button id="add-to-playlist-btn" type="button" class="btn btn-secondary mr-1">
 | 
						|
                        <i class="fas fa-plus" aria-hidden="true"></i>{{ tr('add_all') }}
 | 
						|
                    </button>
 | 
						|
                    <button id="library-rescan-btn" type="button" class="btn btn-secondary mr-1">
 | 
						|
                        <i class="fas fa-sync-alt" aria-hidden="true"></i>{{ tr('rescan_files') }}
 | 
						|
                    </button>
 | 
						|
                    <button id="library-download-btn" type="button" class="btn btn-secondary mr-1">
 | 
						|
                        <i class="fas fa-download" aria-hidden="true"></i>{{ tr('download_all') }}
 | 
						|
                    </button>
 | 
						|
                    <button type="button" class="btn btn-danger mr-1 library-delete" data-toggle="modal"
 | 
						|
                        data-target="#deleteWarningModal">
 | 
						|
                        <i class="fas fa-trash-alt" aria-hidden="true"></i>{{ tr('delete_all') }}
 | 
						|
                    </button>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
 | 
						|
                                                                              aria-label="{{ tr('aria_warning_of_deletion') }}" aria-hidden="true">
 | 
						|
                    <div class="modal-dialog" role="document">
 | 
						|
                        <div class="modal-content">
 | 
						|
                            <div class="modal-header">
 | 
						|
                                <h3 class="modal-title" id="deleteWarningModalLabel">{{ tr('are_you_really_sure') }}</h3>
 | 
						|
                                <button type="button" class="close" data-dismiss="modal" aria-label="{{ tr('close') }}">
 | 
						|
                                    <span aria-hidden="true">×</span>
 | 
						|
                                </button>
 | 
						|
                            </div>
 | 
						|
                            <div class="modal-body">
 | 
						|
                                {{ tr('delete_file_warning') }}</div>
 | 
						|
                            <div class="modal-footer">
 | 
						|
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ tr('close') }}</button>
 | 
						|
                                <button id="library-delete-btn" type="button" class="btn btn-danger"
 | 
						|
                                                                              data-dismiss="modal">{{ tr('delete_all_files') }}</button>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div id="upload" class="container mb-3">
 | 
						|
        <input type="hidden" id="uploadDisabled" value="false" />
 | 
						|
        <div class="card">
 | 
						|
            <div class="card-header">
 | 
						|
                <h3 class="card-title">{{ tr('upload_file') }}</h3>
 | 
						|
            </div>
 | 
						|
            <div class="card-body">
 | 
						|
                <form action="./upload" method="post" enctype="multipart/form-data">
 | 
						|
                    <div class="row">
 | 
						|
                        <div id="uploadBox" class="col-lg-7">
 | 
						|
                            <div class="input-group mb-3">
 | 
						|
                                <div id="uploadField" style="display: flex; width: 100%">
 | 
						|
                                    <div class="custom-file">
 | 
						|
                                        <input type="file" name="file[]" class="custom-file-input" id="uploadSelectFile" aria-describedby="uploadSubmit" value="{{ tr('browse_music_file') }}" multiple />
 | 
						|
                                        <label class="custom-file-label" for="uploadSelectFile">{{ tr('choose_file') }}</label>
 | 
						|
                                    </div>
 | 
						|
                                </div>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                        <div class="col-lg-5">
 | 
						|
                            <div class="row">
 | 
						|
                                <div class="col">
 | 
						|
                                    <div class="input-group mb-3">
 | 
						|
                                        <div class="input-group-prepend">
 | 
						|
                                            <label for="uploadTargetDir" class="input-group-text">{{ tr('upload_to') }}</label>
 | 
						|
                                        </div>
 | 
						|
                                        <input class="form-control" list="upload-target-dirs" id="uploadTargetDir" name="upload-target-dirs" placeholder="uploads" />
 | 
						|
                                        <datalist id="upload-target-dirs">
 | 
						|
                                        </datalist>
 | 
						|
                                    </div>
 | 
						|
                                </div>
 | 
						|
                                <div class="col-auto">
 | 
						|
                                    <button class="btn btn-primary" type="button" id="uploadSubmit"><i class="fas fa-upload mr-1"></i>{{ tr('upload_submit') }}</button>
 | 
						|
                                </div>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </form>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div class="container mb-5">
 | 
						|
        <div class="card-deck">
 | 
						|
            <div id="add-music-url" class="card">
 | 
						|
                <div class="card-header">
 | 
						|
                    <h3 class="card-title">{{ tr('add_url') }}</h3>
 | 
						|
                </div>
 | 
						|
                <div class="card-body">
 | 
						|
                    <label for="music-url-input">{{ tr('add_youtube_or_soundcloud_url') }}</label>
 | 
						|
                    <div class="input-group mb-2">
 | 
						|
                        <input class="form-control" type="text" id="music-url-input" placeholder="{{ tr('url_placeholder') }}">
 | 
						|
                    </div>
 | 
						|
                    <button type="submit" class="btn btn-primary">
 | 
						|
                        {{ tr('add_url') }}
 | 
						|
                    </button>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
            <div id="add-radio-url" class="card">
 | 
						|
                <div class="card-header">
 | 
						|
                    <h3 class="card-title">{{ tr('add_radio') }}</h3>
 | 
						|
                </div>
 | 
						|
                <div class="card-body">
 | 
						|
                    <label for="radio-url-input">{{ tr('add_radio_url') }}</label>
 | 
						|
                    <div class="input-group mb-2">
 | 
						|
                        <input id="radio-url-input" class="form-control" type="text" placeholder="{{ tr('radio_url_placeholder') }}">
 | 
						|
                    </div>
 | 
						|
                    <button type="submit" class="btn btn-primary">
 | 
						|
                        {{ tr('add_radio') }}
 | 
						|
                    </button>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div id="player-toast" class="floating-button" style="bottom: 120px;">
 | 
						|
        <i class="fas fa-play" aria-hidden="true"></i>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div id="theme-switch-btn" class="floating-button" style="bottom: 50px;">
 | 
						|
        <i class="fas fa-lightbulb" aria-hidden="true"></i>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div id="playerToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-autohide="false">
 | 
						|
        <div class="toast-header">
 | 
						|
            <i class="fas fa-play-circle mr-2 text-primary"></i>
 | 
						|
            <strong class="mr-auto">{{ tr('mini_player_title') }}</strong>
 | 
						|
            <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
 | 
						|
                <span aria-hidden="true">×</span>
 | 
						|
            </button>
 | 
						|
        </div>
 | 
						|
        <div class="toast-body" id="playerContainer">
 | 
						|
            <img id="playerArtworkIdle" src="static/image/empty_box.svg" alt="{{ tr('aria_empty_box') }}" />
 | 
						|
            <img id="playerArtwork" src="static/image/unknown-album.png" style="display: none;"
 | 
						|
                                                                         alt="{{ tr('aria_default_cover') }}" />
 | 
						|
            <div id="playerInfo">
 | 
						|
                <div id="playerActionBox">
 | 
						|
                    <button id="playerPlayBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
 | 
						|
                                                                                        aria-label="{{ tr('play') }}">
 | 
						|
                        <i class="fas fa-play"></i>
 | 
						|
                    </button>
 | 
						|
                    <button id="playerPauseBtn" class="btn btn-primary btn-sm btn-space" style="display: none"
 | 
						|
                                                                                         aria-label="{{ tr('pause') }}">
 | 
						|
                        <i class="fas fa-pause"></i>
 | 
						|
                    </button>
 | 
						|
                    <button id="playerSkipBtn" class="btn btn-primary btn-sm" aria-label="{{ tr('aria_skip_to_next_track') }}">
 | 
						|
                        <i class="fas fa-fast-forward"></i>
 | 
						|
                    </button>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div style="overflow: hidden; max-width: 320px;">
 | 
						|
                    <strong id="playerTitle">Song Title</strong>
 | 
						|
                </div>
 | 
						|
                <span id="playerArtist">Artist</span>
 | 
						|
                <div id="playerBarBox" class="progress">
 | 
						|
                    <div id="playerBar" class="progress-bar pr-2" role="progressbar" aria-valuenow="50"
 | 
						|
                        aria-valuemin="0" aria-valuemax="100"
 | 
						|
                        style="width: 100%; text-align: right; transform: translateX(-100%);"></div>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <div id="footer" style="height:50px; width: 100%; margin-top: 100px;"></div>
 | 
						|
 | 
						|
    <form id="download-form" action="download" method="GET" target="_blank">
 | 
						|
        <input hidden type="hidden" name="id" value="">
 | 
						|
        <input hidden type="hidden" name="type" value="">
 | 
						|
        <input hidden type="hidden" name="dir" value="">
 | 
						|
        <input hidden type="hidden" name="tags" value="">
 | 
						|
        <input hidden type="hidden" name="keywords" value="">
 | 
						|
    </form>
 | 
						|
 | 
						|
    <!-- Add tags modal -->
 | 
						|
    <div class="modal fade" id="addTagModal" tabindex="-1" role="dialog">
 | 
						|
        <div class="modal-dialog" role="document">
 | 
						|
            <div class="modal-content">
 | 
						|
                <div class="modal-header">
 | 
						|
                    <h3 class="modal-title">{{ tr('edit_tags_for') }} <span id="addTagModalTitle">?</span></h3>
 | 
						|
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 | 
						|
                        <span aria-hidden="true">×</span>
 | 
						|
                    </button>
 | 
						|
                </div>
 | 
						|
                <div id="addTagModalBody" class="modal-body">
 | 
						|
                    <input hidden type="hidden" id="addTagModalItemId" name="id" value="">
 | 
						|
                    <div class="modal-tag" style="display: none; width: 100%;">
 | 
						|
                        <span class="modal-tag-text tag-space badge badge-pill badge-dark">Tag</span>
 | 
						|
                        <a class="modal-tag-remove tag-click small"><i
 | 
						|
                                class="fas fa-times-circle btn-outline-danger"></i></a>
 | 
						|
                    </div>
 | 
						|
                    <div id="addTagModalTags" style="margin-left: 5px; margin-bottom: 10px;">
 | 
						|
                    </div>
 | 
						|
                    <div class="input-group">
 | 
						|
                        <input class="form-control form-control-sm btn-space" type="text" id="addTagModalInput"
 | 
						|
                                                                                          placeholder="tag1,tag2,..." aria-label="{{ tr('tags_to_add') }}">
 | 
						|
                        <button id="addTagModalAddBtn" type="button" class="btn btn-primary btn-sm">
 | 
						|
                            <i class="fas fa-plus" aria-hidden="true"></i>
 | 
						|
                            {{ tr('add') }}
 | 
						|
                        </button>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
                <div class="modal-footer">
 | 
						|
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ tr('close') }}</button>
 | 
						|
                    <button id="addTagModalSubmit" type="button" class="btn btn-success"
 | 
						|
                                                                 data-dismiss="modal">{{ tr('edit_submit') }}</button>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <!-- Upload files modal -->
 | 
						|
    <div class="modal fade" id="uploadModal" tabindex="-1" role="dialog">
 | 
						|
        <div class="modal-dialog" role="document">
 | 
						|
            <div class="modal-content">
 | 
						|
                <div class="modal-header">
 | 
						|
                    <h3 class="modal-title" id="uploadTitle"><i class="fas fa-upload mr-1"></i>{{ tr('uploading_files') }}</h3>
 | 
						|
                </div>
 | 
						|
                <div id="uploadModalBody" class="modal-body">
 | 
						|
                    <div id="uploadSuccessAlert" class="alert alert-success" role="alert" style="display: none">
 | 
						|
                        <i class="fas fa-check mr-1"></i>
 | 
						|
                        {{ tr('uploaded_finished') }}
 | 
						|
                    </div>
 | 
						|
                    <div id="uploadModalList" style="margin-left: 5px; margin-bottom: 10px;">
 | 
						|
                        <div class="uploadItem" style="display: none; width: 100%; padding-bottom: 8px;">
 | 
						|
                            <i class="far fa-file-alt mr-1"></i>
 | 
						|
                            <span class="uploadItemTitle mr-3"></span>
 | 
						|
                            <span class="uploadItemError text-danger"></span>
 | 
						|
                            <div class="progress" style="margin-top: 5px; height: 10px;">
 | 
						|
                                <div class="uploadProgress progress-bar pr-2" role="progressbar" aria-valuenow="0"
 | 
						|
                                    aria-valuemin="0" aria-valuemax="100"
 | 
						|
                                    style="width: 100%; text-align: right; transform: translateX(-100%);"></div>
 | 
						|
                            </div>
 | 
						|
                        </div>
 | 
						|
                    </div>
 | 
						|
                </div>
 | 
						|
                <div class="modal-footer">
 | 
						|
                    <button type="button" id="uploadClose" class="btn btn-success" data-dismiss="modal">
 | 
						|
                        <i class="fas fa-times mr-1"></i> {{ tr('close') }}</button>
 | 
						|
                    <button type="button" id="uploadCancel" class="btn btn-danger" data-toggle="tooltip"
 | 
						|
                        data-html="true"
 | 
						|
                        title="{{ tr('cancel_upload_warning') }}">
 | 
						|
                        <i class="fas fa-trash-alt mr-1" aria-hidden="true"></i> {{ tr('cancel') }}</button>
 | 
						|
                </div>
 | 
						|
            </div>
 | 
						|
        </div>
 | 
						|
    </div>
 | 
						|
 | 
						|
    <input type="hidden" id="maxUploadFileSize" value="" />
 | 
						|
 | 
						|
    <script src="static/js/main.js"></script>
 | 
						|
</body>
 | 
						|
 | 
						|
</html>
 |