Version 2.0.0 updates

Added features and updated UI
Aveek-Saha · Nov 1, 2018 · 0363842 · 0363842
1 parent e5e85d2
commit 0363842
Show file tree

Hide file tree

Showing 13 changed files with 1,728 additions and 1,241 deletions.
diff --git a/app/all.js b/app/all.js
diff --git a/app/index.html b/app/index.html
@@ -1,19 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
-    <script defer src="fontawesome-all.min.js"></script>
+    <script src="all.js"></script>
+
+    <!-- <script defer src="fontawesome-all.min.js"></script> -->
     <link rel="stylesheet" href="style/style.css">
-    <title>Music Player</title>
+    <title>Dusk Player</title>
 </head>
+
 <body ng-app="Player">
     <img id="picture">
     <div class="container-fluid">
         <div ng-view></div>
     </div>
+
     <script src="../node_modules/angular/angular.js"></script>
     <script src="../node_modules/angular-route/angular-route.min.js"></script>
     <script src="../node_modules/howler/dist/howler.min.js"></script>
@@ -25,4 +30,5 @@
 
 
 </body>
+
 </html>
diff --git a/app/player/player.html b/app/player/player.html
@@ -1,5 +1,5 @@
 <div class="row">
-    
+
     <!-- <div id="picture"></div> -->
     <div class="col-md-12 text-center">
         <div id="title">
@@ -8,45 +8,72 @@ <h3 id="artist"> {{trackArtist}} </h3><br>
 
         </div>
     </div>
-
-    <div class="col-md-12 text-center">
-        <div id="timer">0:00 &nbsp;</div>
-        <div id="duration">&nbsp; {{timer}} </div>
-        <div id="bar" ng-hide="songPlaying"></div>
-        <!-- <div id="waveform" ng-show="songPlaying" ng-click="seekToTime($event)"></div> -->
 
-        <div class="progress" id="seek" ng-click="seekToTime($event)">
-            <div class="progress-bar bg-danger" role="progressbar" id="progress" aria-valuemin="0" aria-valuemax="100"></div>
-        </div>
-    </div>
-        <!-- <div id="progress"></div> -->
     <div class="col-md-12 text-center">
         <div id="loading"></div>
         <button type="button" id="prevBtn" class="btn btn-primary-outline btn-lg" ng-click="prevSong()">
-                <i class="fas fa-step-backward fa-lg fa-inverse"></i>
+            <i class="fas fa-step-backward fa-2x fa-inverse"></i>
         </button>
         <button type="button" id="playBtn" class="btn btn-primary-outline btn-lg" ng-show="!songPlaying" ng-click="playMusic()">
-            <i class="fas fa-play fa-2x fa-inverse"></i>
+            <!-- <i class="fas fa-play fa-2x fa-inverse"></i> -->
+            <i class="far fa-play-circle fa-4x fa-inverse"></i>
         </button>
         <button type="button" id="pauseBtn" class="btn btn-primary-outline btn-lg" ng-show="songPlaying" ng-click="playMusic()">
-            <i class="fas fa-pause fa-2x fa-inverse"></i>
+            <!-- <i class="fas fa-pause fa-2x fa-inverse"></i> -->
+            <i class="far fa-pause-circle fa-4x fa-inverse"></i>
+
         </button>
         <button type="button" id="nextBtn" class="btn btn-primary-outline btn-lg" ng-click="nextSong()">
-            <i class="fas fa-step-forward fa-lg fa-inverse"></i>
+            <i class="fas fa-step-forward fa-2x fa-inverse"></i>
         </button>
 
-    </div><br>
+    </div>
+
+    <div class="col-md-12 text-center">
+        <div id="timer">0:00 </div>
+        <div id="duration">{{timer}} </div><br>
+        <!-- <div id="bar" ng-hide="songPlaying"></div> -->
+        <!-- <div id="waveform" ng-show="songPlaying" ng-click="seekToTime($event)"></div> -->
+
+        <div class="progress" id="seek" ng-click="seekToTime($event)">
+            <div class="progress-bar bg-danger" role="progressbar" id="progress" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
+    </div>
+    <!-- <div id="progress"></div> -->
+    <br>
     <div class="col-md-12" id="outerCtrl">
-        <button type="button" id="playlistBtn" class="btn btn-primary-outline btn-lg justify-content-start" ng-click="showPlaylist()">
-            <i class="fas fa-list fa-lg fa-inverse"></i>
-        </button>
-        <div class="slidecontainer justify-content-end">
+
+        <div class="slidecontainer justify-content-start">
+            <i class="fas fa-volume-down"></i>
+            <i class="fas fa-volume-up" style="float: right"></i>
             <input type="range" min="0" max="100" value="100" class="slider" id="myRange">
-          </div>
+        </div>
+
+        <button type="button" id="playlistBtn" class="btn btn-primary-outline btn-lg justify-content-end" ng-click="showPlaylist()">
+            <!-- <i class="fas fa-list fa-lg fa-inverse"></i> -->
+            <i class="fas fa-bars fa-lg fa-inverse"></i>
+        </button>
+
+        <button type="button" id="shuffleBtn" ng-show="shuffle" class="btn btn-primary-outline btn-lg justify-content-end"
+            ng-click="toggleShuffle()">
+            <i class="fas fa-random fa-lg fa-inverse"></i>
+        </button>
+
+        <button type="button" id="shuffleBtn" ng-show="!shuffle" class="btn btn-primary-outline btn-lg justify-content-end"
+            ng-click="toggleShuffle()">
+            <i class="fas fa-sync-alt fa-lg fa-inverse"></i>
+        </button>
+
+
     </div>
-    <div id="playlist" ng-show="playListVisible">
+
+    <div id="playlist" ng-show="playListVisible" class="list-group style-3">
+        <a href="" class="list-group-item list-group-item-action list" ng-repeat="song in player.playlist" ng-click="playPlaylistSong($index)">{{song.name}}</a>
+    </div>
+
+    <!-- <div id="playlist" ng-show="playListVisible">
             <div id="list">
                 <div class="list-song" ng-repeat="song in player.playlist" ng-click="playPlaylistSong($index)">{{song.name}}</div>
             </div>
-        </div>
+        </div> -->
 </div>