Add when it was played for spotify in recent mode (#104)

package-lock.json

@@ -2107,6 +2107,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.10.4",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.10.4.tgz",
+      "integrity": "sha512-RI/Hh4kqRc1UKLOAf/T5zdMMX5DQIlDxwUe3wSyMMnEbGunnpENCdbUgM+dW7kXidZqCttBrmw7BhN4TMddkCw=="
+    },
     "debug": {
       "version": "2.6.9",
       "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",

package.json

@@ -27,6 +27,7 @@
     "@octokit/rest": "^18.0.15",
     "axios": "^0.21.1",
     "compression": "^1.7.4",
+    "dayjs": "^1.10.4",
     "ejs": "^3.1.5",
     "express": "^4.17.1",
     "express-rate-limit": "^5.2.3",
@@ -46,8 +47,8 @@
     "libxmljs": "^0.19.7"
   },
   "jest": {
-    "testEnvironment":"node",
-    "testTimeout":60000,
-    "transform":{}
+    "testEnvironment": "node",
+    "testTimeout": 60000,
+    "transform": {}
   }
 }

source/app/metrics/utils.mjs

@@ -8,8 +8,11 @@
   import axios from "axios"
   import puppeteer from "puppeteer"
   import imgb64 from "image-to-base64"
+  import dayjs from 'dayjs';
+  import utc from 'dayjs/plugin/utc.js';
+  dayjs.extend(utc);
 
-  export {fs, os, paths, url, util, processes, axios, puppeteer, imgb64}
+  export {fs, os, paths, url, util, processes, axios, puppeteer, imgb64, dayjs};
 
 /** Returns module __dirname */
   export function __module(module) {

source/plugins/music/README.md

@@ -181,6 +181,7 @@ Register your API key to finish setup.
     plugin_music_mode: recent      # Set plugin mode
     plugin_music_limit: 4          # Limit to 4 entries
     plugin_music_token: "${{ secrets.SPOTIFY_CLIENT_ID }}, ${{ secrets.SPOTIFY_CLIENT_SECRET }}, ${{ secrets.SPOTIFY_REFRESH_TOKEN }}"
+    plugin_music_played_at: yes # Only works with spotify.
 ```
 
 ```yaml

source/plugins/music/index.mjs

@@ -13,7 +13,6 @@
       embed:/^\b$/,
     },
   }
-
 //Supported modes
   const modes = {
     playlist:"Suggested tracks",
@@ -36,7 +35,7 @@
           let tracks = null
 
         //Load inputs
-          let {provider, mode, playlist, limit, user} = imports.metadata.plugins.music.inputs({data, account, q})
+          let {provider, mode, playlist, limit, user, played_at} = imports.metadata.plugins.music.inputs({data, account, q})
           //Auto-guess parameters
             if ((playlist)&&(!mode))
               mode = "playlist"
@@ -144,10 +143,11 @@
                                 "Accept":"application/json",
                                 "Content-Type":"application/json",
                                 "Authorization":`Bearer ${access}`}
-                              })).data.items.map(({track}) => ({
+                              })).data.items.map(({track, played_at}) => ({
                                 name:track.name,
                                 artist:track.artists[0].name,
                                 artwork:track.album.images[0].url,
+                                played_at: played_at ? imports.dayjs(played_at).format('[played at] HH:MM on DD/MM/YYYY') : ''
                               }))
                           }
                         //Handle errors

source/plugins/music/metadata.yml

@@ -55,6 +55,10 @@ inputs:
     default: 4
     min: 1
     max: 100
+  plugin_music_played_at:
+    description: Display when the track was played
+    type: boolean
+    default: no
 
   # Username on music provider service
   plugin_music_user:

source/templates/classic/partials/music.ejs

@@ -20,12 +20,15 @@
         <% } else { %>
           <% if (plugins.music.tracks.length) { %>
             <div class="tracklist">
-              <% for (const {name = "", artist = "", artwork = ""} of plugins.music.tracks) { %>
+              <% for (const {name = "", artist = "", artwork = "", played_at = ""} of plugins.music.tracks) { %>
                 <div class="track">
-                  <img src="data:image/png;base64,<%= artwork %>" width="32" height="32" alt=""/>
+                  <img src="data:image/png;base64,<%= artwork %>" width="<%= !!played_at.length ? 48 : 32 %>" height="<%= !!played_at.length ? 48 : 32 %>" alt=""/>
                   <div class="infos">
-                    <div class="name"><%= name %></div>
+                    <div class="name"><b><%= name %><b></div>
                     <div class="artist"><%= artist %></div>
+                    <% if (played_at.length) { %>
+                        <div class="played_at"><%= played_at %></div>
+                    <% } %>
                   </div>
                 </div>
               <% } %>