From 4cb50b346d13d25b5aef0fe62c16e6407bb43d54 Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Mon, 9 Dec 2019 13:54:44 +0100
Subject: FUNCT Added player

---
 src/templates/main.template.html   | 11 +++++++-
 src/templates/player.template.html | 53 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 src/templates/player.template.html

(limited to 'src/templates')

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
-- 
cgit 1.2.3-korg