aboutsummaryrefslogtreecommitdiffstats
path: root/src/templates
diff options
context:
space:
mode:
Diffstat (limited to 'src/templates')
-rw-r--r--src/templates/main.template.html11
-rw-r--r--src/templates/player.template.html53
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