Display recently added songs/albums on Home screen (resolves #379

app/Models/Album.php

@@ -23,7 +23,7 @@ class Album extends Model
     const UNKNOWN_COVER = 'unknown-album.png';
 
     protected $guarded = ['id'];
-    protected $hidden = ['created_at', 'updated_at'];
+    protected $hidden = ['updated_at'];
     protected $casts = ['artist_id' => 'integer'];
 
     public function artist()

app/Models/Song.php

@@ -31,7 +31,7 @@ class Song extends Model
      *
      * @var array
      */
-    protected $hidden = ['lyrics', 'created_at', 'updated_at', 'path', 'mtime'];
+    protected $hidden = ['lyrics', 'updated_at', 'path', 'mtime'];
 
     /**
      * @var array

resources/assets/js/components/main-wrapper/main-content/home.vue

@@ -5,7 +5,7 @@
     </h1>
 
     <div class="main-scroll-wrap" @scroll="scrolling">
-      <div class="top-sections">
+      <div class="two-cols">
         <section v-show="topSongs.length">
           <h1>Most Played Songs</h1>
 
@@ -34,6 +34,24 @@
         </section>
       </div>
 
+      <section class="recently-added" v-show="showRecentlyAddedSection">
+        <h1>Recently Added</h1>
+
+        <div class="two-cols">
+          <div class="wrapper as-list">
+            <album-item v-for="album in recentlyAdded.albums" :album="album"></album-item>
+            <span class="item filler" v-for="n in 3"></span>
+          </div>
+          <div>
+            <ul class="recently-added-song-list" v-show="recentlyAdded.songs.length">
+              <li v-for="song in recentlyAdded.songs"
+                :song="song"
+                is="song-item"></li>
+            </ul>
+          </div>
+        </div>
+      </section>
+
       <section class="top-artists" v-show="topArtists.length">
         <h1>Top Artists</h1>
 
@@ -93,6 +111,10 @@ export default {
       topSongs: [],
       topAlbums: [],
       topArtists: [],
+      recentlyAdded: {
+        albums: [],
+        songs: [],
+      },
 
       preferences: preferenceStore.state,
     };
@@ -102,6 +124,10 @@ export default {
     greeting() {
       return sample(this.greetings).replace('%s', userStore.current.name);
     },
+
+    showRecentlyAddedSection() {
+      return this.recentlyAdded.albums.length || this.recentlyAdded.songs.length;
+    },
   },
 
   methods: {
@@ -111,6 +137,8 @@ export default {
     refreshDashboard() {
       this.topSongs = songStore.getMostPlayed(7);
       this.topAlbums = albumStore.getMostPlayed(6);
+      this.recentlyAdded.albums = albumStore.getRecentlyAdded(6);
+      this.recentlyAdded.songs = songStore.getRecentlyAdded(10);
       this.topArtists = artistStore.getMostPlayed(6);
       this.recentSongs = songStore.getRecent(7);
     },
@@ -131,10 +159,10 @@ export default {
 @import "../../../../sass/partials/_mixins.scss";
 
 #homeWrapper {
-  .top-sections {
+  .two-cols {
     display: flex;
 
-    > section {
+    > section, > div {
       flex-grow: 1;
       flex-basis: 0;
 
@@ -153,7 +181,17 @@ export default {
     }
   }
 
-  .top-artists .wrapper, .top-albums .wrapper {
+  .recently-added {
+    .song-item-home .details {
+      background: rgba(255, 255, 255, .02);
+    }
+
+    .item {
+      margin-bottom: 8px;
+    }
+  }
+
+  .top-artists .wrapper, .top-albums .wrapper, .recently-added .wrapper {
     @include artist-album-wrapper();
   }
 
@@ -170,10 +208,10 @@ export default {
   }
 
   @media only screen and (max-width: 768px) {
-    .top-sections {
+    .two-cols {
       display: block;
 
-      > section {
+      > section, > div {
         &:first-of-type {
           margin-right: 0;
         }

resources/assets/js/components/shared/home-song-item.vue

@@ -10,12 +10,14 @@
       </a>
     </span>
     <span class="details">
-      <span :style="{ width: song.playCount * 100 / topPlayCount + '%' }"
+      <span v-if="showPlayCount" :style="{ width: song.playCount * 100 / topPlayCount + '%' }"
         class="play-count"></span>
       {{ song.title }}
       <span class="by">
-        <a :href="'/#!/artist/' + song.artist.id">{{ song.artist.name }}</a> -
+        <a :href="'/#!/artist/' + song.artist.id">{{ song.artist.name }}</a>
+        <template v-if="showPlayCount">-
         {{ song.playCount | pluralize('play') }}
+        </template>
       </span>
     </span>
   </li>
@@ -31,6 +33,12 @@ export default {
   props: ['song', 'topPlayCount'],
   filters: { pluralize },
 
+  computed: {
+    showPlayCount() {
+      return this.topPlayCount && this.song.playCount;
+    },
+  },
+
   methods: {
     play() {
       if (!queueStore.contains(this.song)) {

resources/assets/js/stores/album.js

@@ -167,4 +167,17 @@ export const albumStore = {
 
     return take(orderBy(applicable, 'playCount', 'desc'), n);
   },
+
+  /**
+   * Get n most recently added albums.
+   *
+   * @param  {Number} n
+   *
+   * @return {Array.<Object>}
+   */
+  getRecentlyAdded(n = 6) {
+    const applicable = filter(this.all, album => album.id !== 1);
+
+    return take(orderBy(applicable, 'date_created', 'desc'), n);
+  },
 };

resources/assets/js/stores/song.js

@@ -352,6 +352,15 @@ export const songStore = {
     return songs;
   },
 
+  /**
+   * Get n most recently added songs.
+   * @param  {Number} n
+   * @return {Array.<Object>}
+   */
+  getRecentlyAdded(n = 10) {
+    return take(orderBy(this.all, 'date_created', 'desc'), n);
+  },
+
   /**
    * Called when the application is torn down.
    * Reset stuff.