diff options
Diffstat (limited to 'src/templates')
| -rw-r--r-- | src/templates/main.template.html | 11 | ||||
| -rw-r--r-- | src/templates/player.template.html | 53 |
2 files changed, 63 insertions, 1 deletions
diff --git a/src/templates/main.template.html b/src/templates/main.template.html index 0f3081c..4f9bd70 100644 --- a/src/templates/main.template.html +++ b/src/templates/main.template.html @@ -1 +1,10 @@ -This is the mediaplayer
\ No newline at end of file +<div class="container-fluid"> + <div class="row"> + <div class="col-lg-6 col-md-12 playlistContainer" id="PlaylistContainer"> + + </div> + <div class="col-lg-6 col-md-12 playerContainer" id="PlayerContainer"> + + </div> + </div> +</div> diff --git a/src/templates/player.template.html b/src/templates/player.template.html new file mode 100644 index 0000000..5b5a7ab --- /dev/null +++ b/src/templates/player.template.html @@ -0,0 +1,53 @@ +<div class="container-fluid"> + <div class="row align-items-center mt-3"> + <div class="col-2 text-left"> + <button type="button" class="btn btn-light"> + <i class="fas fa-retweet"></i> + </button> + </div> + <div class="col-8 text-center"> + {{ metadata.track.title }} + </div> + <div class="col-2"> + + </div> + </div> + <div class="row"> + <div class="col-2 text-left"> + {{ getPosition }} + </div> + <div class="col-8 text-center"> + {{ metadata.track.artist }} + </div> + <div class="col-2 text-right"> + {{ getDuration }} + </div> + </div> + <div class="row"> + <div class="col-12"> + <div class="progress"> + <div class="progress-bar" role="progressbar" style="width: {{getPercentage}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div> + </div> + </div> + </div> + <div class="row my-3"> + <div class="col-12 text-center"> + <button type="button" class="btn btn-primary" onclick="player.previous()"> + <i class="fas fa-arrow-left"></i> + </button> + {{ #isPlaying }} + <button type="button" class="btn btn-primary" onclick="player.pause()"> + <i class="fas fa-pause"></i> + </button> + {{ /isPlaying }} + {{ ^isPlaying }} + <button type="button" class="btn btn-primary" onclick="player.play()"> + <i class="fas fa-play"></i> + </button> + {{ /isPlaying }} + <button type="button" class="btn btn-primary" onclick="player.next()"> + <i class="fas fa-arrow-right"></i> + </button> + </div> + </div> +</div>
\ No newline at end of file |