28. HTML & CSS: Music Player

Note that the code in album.js reverts back to the code from the previous checkpoint because the previous checkpoint’s assignment should NOT have been merged. These lines should not be part of the application from this point on.
Bloc · Sep 29, 2015 · 4cc9103 · 4cc9103
1 parent ca5ad59
commit 4cc9103
Show file tree

Hide file tree

Showing 4 changed files with 236 additions and 18 deletions.
diff --git a/album.html b/album.html
@@ -8,6 +8,7 @@
         <link rel="stylesheet" type="text/css" href="styles/normalize.css">
         <link rel="stylesheet" type="text/css" href="styles/main.css">
         <link rel="stylesheet" type="text/css" href="styles/album.css">
+        <link rel="stylesheet" type="text/css" href="styles/player_bar.css">
     </head>
     <body class="album">
         <nav class="navbar">
@@ -33,6 +34,42 @@ <h5 class="album-view-release-info">1909 Spanish Records</h5>
             <table class="album-view-song-list">
             </table>
         </main>
+
+        <section class="player-bar">
+            <div class="container">
+                <div class="control-group main-controls">
+                    <a class="previous">
+                        <span class="ion-skip-backward"></span>
+                    </a>
+                    <a class="play-pause">
+                        <span class="ion-play"></span>
+                    </a>
+                    <a class="next">
+                        <span class="ion-skip-forward"></span>
+                    </a>
+                </div>
+                <div class="control-group currently-playing">
+                    <h2 class="song-name">My dumb song</h2>
+                    <h2 class="artist-song-mobile">My dumb song - Fallout Boy</h2>
+                    <h3 class="artist-name">Fallout Boy</h3>
+                    <div class="seek-control">
+                        <div class="seek-bar">
+                            <div class="fill"></div>
+                            <div class="thumb"></div>
+                        </div>
+                        <div class="current-time">2:30</div>
+                        <div class="total-time">4:45</div>
+                    </div>
+                </div>
+                <div class="control-group volume">
+                    <span class="icon ion-volume-high"></span>
+                        <div class="seek-bar">
+                            <div class="fill"></div>
+                            <div class="thumb"></div>
+                        </div>
+                </div>
+            </div>
+        </section>
         <script src="scripts/album.js"></script>
     </body>
 </html>
diff --git a/scripts/album.js b/scripts/album.js
@@ -59,29 +59,14 @@ var setCurrentAlbum = function(album) {
     }
 };
 
-var child = document.getElementsByClassName('album-view-title')[0];
-var noParent = document.querySelector('html');
-
 var findParentByClassName = function(element, targetClass) {
     var currentParent = element.parentElement;
-
-    if (currentParent) {
-        while (currentParent.className && currentParent.className != targetClass) {
-            currentParent = currentParent.parentElement;
-        }
-
-        if (currentParent.className == targetClass) {
-            return currentParent;
-        } else {
-            alert("No parent with that class name found.");
-        }
-    } else {
-        alert("No parent found.");
+    while (currentParent.className != targetClass) {
+        currentParent = currentParent.parentElement;
     }
+    return currentParent;
 };
 
-findParentByClassName(child, 'album-view');
-
 var getSongItem = function(element) {  
     switch (element.className) {
         case 'album-song-button':

diff --git a/styles/album.css b/styles/album.css
@@ -4,6 +4,7 @@ body.album {
     background-attachment: fixed;
     background-position: center center;
     background-size: cover;
+    padding-bottom: 200px;
 }
 
 .album-cover-art {

diff --git a/styles/player_bar.css b/styles/player_bar.css
@@ -0,0 +1,195 @@
+.player-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 150px;
+    background: rgba(255, 255, 255, 0.3);
+    z-index: 100;
+}
+
+.player-bar a {
+    font-size: 1.1rem;
+    vertical-align: middle;
+}
+
+.player-bar a,
+.player-bar a:hover {
+    color: white;
+    cursor: pointer;
+    text-decoration: none;
+}
+
+.player-bar .container {
+    display: table;
+    padding: 0;
+    width: 90%;
+    min-height: 100%;
+}
+
+.player-bar .control-group {
+    display: table-cell;
+    vertical-align: middle;
+}
+
+/* === MAIN CONTROLS === */
+
+.player-bar .main-controls {
+    width: 25%;
+    text-align: left;
+    padding-right: 1rem;
+}
+
+.player-bar .main-controls .previous {
+    margin-right: 16.5%;
+}
+
+.player-bar .main-controls .play-pause {
+    margin-right: 15%;
+    font-size: 1.6rem;
+}
+
+/* === CURRENTLY PLAYING === */
+
+.player-bar .currently-playing {
+    width: 50%;
+    text-align: center;
+    position: relative;
+}
+
+.player-bar .currently-playing .song-name,
+.player-bar .currently-playing .artist-name,
+.player-bar .currently-playing .artist-song-mobile {
+    text-align: center;
+    font-size: 0.75rem;
+    margin: 0;
+    position: absolute;
+    width: 100%;
+    font-weight: 300;
+}
+
+.player-bar .currently-playing .song-name,
+.player-bar .currently-playing .artist-song-mobile {
+    top: 1.1rem;
+}
+
+.player-bar .currently-playing .artist-name {
+    bottom: 1.1rem;
+}
+
+.player-bar .currently-playing .artist-song-mobile {
+    display: none;
+}
+
+/* === SEEK BAR === */
+
+.seek-control {
+    position: relative;
+    font-size: 0.8rem;
+}
+
+.seek-control .current-time {
+    position: absolute;
+    top: 0.5rem;
+}
+
+.seek-control .total-time {
+    position: absolute;
+    right: 0;
+    top: 0.5rem;
+}
+
+.seek-bar {
+    height: 0.25rem;
+    background: rgba(255, 255, 255, 0.3);
+    border-radius: 2px;
+    position: relative;
+    cursor: pointer;
+}
+
+.seek-bar .fill {
+    background: white;
+    width: 36%;
+    height: 0.25rem;
+    border-radius: 2px;
+}
+
+.seek-bar .thumb {
+    position: absolute;
+    height: 0.5rem;
+    width: 0.5rem;
+    background: white;
+    left: 36%;
+    margin-left: -0.25rem;
+    top: 50%;
+    margin-top: -0.25rem;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: all 100ms ease-in-out;
+}
+
+.seek-bar:hover .thumb {
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-top: -0.5rem;
+    margin-left: -0.5rem;
+}
+
+/* === VOLUME === */
+
+.player-bar .volume {
+    width: 25%;
+    text-align: right;
+}
+
+.player-bar .volume .icon {
+    font-size: 1.1rem;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.player-bar .volume .seek-bar {
+    display: inline-block;
+    width: 5.75rem;
+    vertical-align: middle;
+}
+
+/* === MOBILE === */
+
+@media (max-width: 40rem) {
+    .player-bar {
+        padding: 1rem;
+        background: rgba(0,0,0,0.6);
+    }
+
+    .player-bar .main-controls,
+    .player-bar .currently-playing,
+    .player-bar .volume {
+        display: block;
+        margin: 0 auto;
+        padding: 0;
+        width: 100%;
+        text-align: center;   
+    }
+
+    .player-bar .main-controls {
+        min-height: 3.5rem;
+    }
+
+    .player-bar .currently-playing {
+        min-height: 2.5rem;
+    }
+
+    .player-bar .volume {
+        min-height: 3.5rem;
+    }
+
+    .artist-name, 
+    .song-name {
+        display: none;
+    }
+
+    .artist-song-mobile {
+        display: block;
+    }
+}