Styling Finishing Touches

music-master/src/components/App.js

@@ -8,6 +8,10 @@ const API_ADDRESS = 'https://spotify-api-wrapper.appspot.com';
 class App extends Component {
   state = { artist: null, tracks: [] };
 
+  componentDidMount() {
+    this.searchArtist('metallica')
+  }
+
   searchArtist = artistQuery => {
     fetch(`${API_ADDRESS}/artist/${artistQuery}`)
       .then(response => response.json())

music-master/src/components/Tracks.js

@@ -21,6 +21,21 @@ class Tracks extends Component {
     }
   }
 
+  trackIcon = track => {
+    if (!track.preview_url) {
+      return <span>N/A</span>;
+    }
+
+    if (
+      this.state.playing &&
+      this.state.playingPreviewUrl === track.preview_url
+    ) {
+      return <span>| |</span>;
+    }
+
+    return <span>&#9654;</span>
+  }
+
   render() {
     const { tracks } = this.props;
 
@@ -31,9 +46,18 @@ class Tracks extends Component {
             const { id, name, album, preview_url } = track;
 
             return (
-              <div key={id} onClick={this.playAudio(preview_url)}>
-                <img src={album.images[0].url} alt='track-image' />
-                <p>{name}</p>
+              <div
+                key={id}
+                onClick={this.playAudio(preview_url)}
+                className='track'
+              >
+                <img
+                  src={album.images[0].url}
+                  alt='track-image'
+                  className='track-image'
+                />
+                <p className='track-text'>{name}</p>
+                <p className='track-icon'>{this.trackIcon(track)}</p>
               </div>
             )
           })

music-master/src/index.css

@@ -20,30 +20,38 @@ h1, h2, h3, h4, h5 {
   font-family: 'EconomicaBold';
 }
 
-.profile {
-  width: 200px;
-  height: 200px;
-  border-radius: 100px;
-}
-
-.title-fade-out {
-  opacity: 0;
-  animation-name: fade-out;
-  animation-duration: 2s;
-}
-
-.title-fade-in {
-  opacity: 100;
-  animation-name: fade-in;
-  animation-duration: 2s;
-}
-
-@keyframes fade-out {
-  from {opacity: 100}
-  to {opacity: 0}
-}
-
-@keyframes fade-in {
-  from {opacity: 0}
-  to {opacity: 100}
-}
+.track {
+  width: 250px;
+  height: 250px;
+  position: relative;
+  display: inline-block;
+  margin: 20px;
+  cursor: pointer;
+}
+
+.track-image {
+  width: 250px;
+  height: 250px;
+}
+
+.track-text {
+  position: absolute;
+  width: 250px;
+  bottom: 0px;
+  background-color: black;
+  color: white;
+  padding: 5px;
+}
+
+.track-icon {
+  position: absolute;
+  bottom: 100px;
+  left: 100px;
+  color: white;
+  background-color: black;
+  width: 50px;
+  height: 50px;
+  border-radius: 25px;
+  padding: 10px;
+  opacity: 0.8;
+}