0.0.28

- Fix mobile view on user pages
- Fix favicon issue
- Return Artist UUID with scrobble list

web/src/Components/ScrobbleTable.js

@@ -3,37 +3,32 @@ import { Link } from 'react-router-dom';
 
 const ScrobbleTable = (props) => {
     return (
-        <div style={{width: `100%`, maxWidth: `900px`}}>
-        <table style={{width: `100%`}} border={1} cellPadding={5}>
-           <thead>
-              <tr>
-                <td>Timestamp</td>
-                <td>Track</td>
-                <td>Artist</td>
-                <td>Album</td>
-              </tr>
-           </thead>
-           <tbody>
-              {
-                  props.data &&
-                  props.data.map(function (element) {
-                     let localTime = new Date(element.time);
-                     return <tr key={element.uuid}>
-                        <td>{localTime.toLocaleString()}</td>
-                        <td>
-                           <Link
-                               key={element.track.uuid}
-                              to={"/track/"+element.track.uuid}
-                               >{element.track.name}
-                           </Link>
-                        </td>
-                        <td>{element.artist}</td>
-                        <td>{element.album}</td>
-                     </tr>;
-                  })
-              }
-           </tbody>
-        </table>
+        <div style={{
+         border: `1px solid #FFFFFF`,
+         width: `100%`,
+         display: `flex`,
+         flexWrap: `wrap`,
+         minWidth: `300px`,
+         maxWidth: `900px`,
+        }}>
+         {
+            props.data &&
+            props.data.map(function (element) {
+               let localTime = new Date(element.time);
+               return <div style={{borderBottom: `1px solid #CCC`, width: `100%`, padding: `2px`}} key={"box" + element.time}>
+                    {localTime.toLocaleString()}<br/>
+                    <Link
+                        key={"artist" + element.time}
+                        to={"/artist/"+element.artist.uuid}
+                     >{element.artist.name}</Link> -
+                     <Link
+                        key={"track" + element.time}
+                        to={"/track/"+element.track.uuid}
+                     > {element.track.name}</Link>
+               </div>;
+
+            })
+         }
       </div>
     );
 }

web/src/Components/TopTable.css

@@ -1,6 +1,8 @@
 .biggestWrapper {
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
 }
 
 .biggestBox {

web/src/Components/TopTable.js

@@ -12,7 +12,7 @@ const TopTable = (props) => {
    let tracks = props.items;
 
     return (
-      <div>
+      <div style={{textAlign: `center`}}>
          <span>Top {props.type}s</span>
          <div className="biggestWrapper">
             <div className="biggestBox">

web/src/Pages/Album.js

@@ -49,8 +49,8 @@ const Album = (route) => {
         {album.name}
       </h1>
       <div className="pageBody">
-        MusicBrainzId: {album.mbid}<br/>
-        SpotifyID: {album.spotify_id}
+        {album.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/album/" + album.mbid}>Open on MusicBrainz<br/></a>}
+        {album.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/album/" + album.spotify_id}>Open on Spotify<br/></a>}
       </div>
     </div>
   );

web/src/Pages/Artist.js

@@ -48,9 +48,10 @@ const Artist = (route) => {
       <h1>
         {artist.name}
       </h1>
-      <div className="pageBody">
-        MusicBrainzId: {artist.mbid}<br/>
-        SpotifyID: {artist.spotify_id}
+      <div className="pageBody" style={{textAlign: `center`}}>
+        <img src={artist.img} alt={artist.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/><br/><br/>
+        {artist.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/artist/" + artist.mbid}>Open on MusicBrainz<br/></a>}
+        {artist.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/artist/" + artist.spotify_id}>Open on Spotify<br/></a>}
       </div>
     </div>
   );

web/src/Pages/Track.js

@@ -43,6 +43,7 @@ const Track = (route) => {
     )
   }
 
+  console.log(track)
   let length = "0";
   if (track.length && track.length !== '') {
     length = new Date(track.length * 1000).toISOString().substr(11, 8)
@@ -54,9 +55,11 @@ const Track = (route) => {
       <h1>
         {track.name}
       </h1>
-      <div className="pageBody">
-        MusicBrainzId: {track.mbid}<br/>
-        SpotifyID: {track.spotify_id}<br/>
+
+      <div className="pageBody" style={{textAlign: `center`}}>
+        <img src={track.img} alt={track.name} style={{maxWidth: `300px`, maxHeight: `300px`}}/><br/><br/>
+        {track.mbid && <a rel="noreferrer" target="_blank" href={"https://musicbrainz.org/track/" + track.mbid}>Open on MusicBrainz<br/></a>}
+        {track.spotify_id && <a rel="noreferrer" target="_blank" href={"https://open.spotify.com/track/" + track.spotify_id}>Open on Spotify<br/></a>}
         Track Length: {length && length}
       </div>
     </div>