Display the latest scrobble under a user's name

changelog.d/show-recent-scrobble.skip

@@ -0,0 +1 @@
+Shows the most recent scrobble under each post when available

src/components/settings_modal/tabs/filtering_tab.vue

@@ -91,6 +91,11 @@
             {{ $t('settings.hide_attachments_in_convo') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="hideScrobbles">
+            {{ $t('settings.hide_scrobbles') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
     <div

src/components/status/status.js

@@ -39,7 +39,8 @@ import {
   faThumbtack,
   faChevronUp,
   faChevronDown,
-  faAngleDoubleRight
+  faAngleDoubleRight,
+  faPlay
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -59,7 +60,8 @@ library.add(
   faThumbtack,
   faChevronUp,
   faChevronDown,
-  faAngleDoubleRight
+  faAngleDoubleRight,
+  faPlay
 )
 
 const camelCase = name => name.charAt(0).toUpperCase() + name.slice(1)
@@ -415,6 +417,12 @@ const Status = {
     },
     shouldDisplayQuote () {
       return this.quotedStatus && this.displayQuote
+    },
+    scrobblePresent () {
+      return !this.mergedConfig.hideScrobbles && this.status.user.latestScrobble && this.status.user.latestScrobble.artist
+    },
+    scrobble () {
+      return this.status.user.latestScrobble
     }
   },
   methods: {

src/components/status/status.vue

@@ -249,6 +249,25 @@
                 </button>
               </span>
             </div>
+            <div class="status-rich-presence" v-if="scrobblePresent">
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="music"
+              />
+              {{ scrobble.artist }} — {{ scrobble.title }}
+              <FAIcon
+                class="fa-scale-110 fa-old-padding"
+                icon="play"
+              />
+              <span class="status-rich-presence-time">
+                <Timeago
+                  template-key="time.in_past"
+                  :time="scrobble.created_at"
+                  :auto-update="60"
+                />
+              </span>
+              </div>
+            </div>
             <div
               v-if="isReply || hasMentionsLine"
               class="heading-reply-row"
@@ -345,7 +364,6 @@
                 </template>
               </i18n-t>
             </div>
-          </div>
 
           <StatusContent
             ref="content"

src/i18n/en.json

@@ -495,6 +495,7 @@
     "hide_muted_posts": "Hide posts of muted users",
     "mute_bot_posts": "Mute bot posts",
     "hide_bot_indication": "Hide bot indication in posts",
+    "hide_scrobbles": "Hide scrobbles",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",

src/modules/config.js

@@ -40,6 +40,7 @@ export const defaultState = {
   padEmoji: true,
   hideAttachments: false,
   hideAttachmentsInConv: false,
+  hideScrobbles: false,
   maxThumbnails: 16,
   hideNsfw: true,
   preloadImage: true,

src/modules/statuses.js

@@ -47,6 +47,7 @@ const emptyNotifications = () => ({
 
 export const defaultState = () => ({
   allStatuses: [],
+  scrobblesNextFetch: {},
   allStatusesObject: {},
   conversationsObject: {},
   maxId: 0,
@@ -120,8 +121,24 @@ const sortTimeline = (timeline) => {
   return timeline
 }
 
+const getLatestScrobble = (state, user) => {
+  if (state.scrobblesNextFetch[user.id] && state.scrobblesNextFetch[user.id] > Date.now()) {
+    return
+  }
+
+  state.scrobblesNextFetch[user.id] = Date.now() + 24 * 60 * 60 * 1000
+  apiService.fetchScrobbles({ accountId: user.id }).then((scrobbles) => {
+    if (scrobbles.length > 0) {
+      user.latestScrobble = scrobbles[0]
+
+      state.scrobblesNextFetch[user.id] = Date.now() + 60 * 1000
+    }
+  })
+}
+
 // Add status to the global storages (arrays and objects maintaining statuses) except timelines
 const addStatusToGlobalStorage = (state, data) => {
+  getLatestScrobble(state, data.user)
   const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data)
   if (result.new) {
     // Add to conversation

src/services/api/api.service.js

@@ -107,6 +107,7 @@ const PLEROMA_ANNOUNCEMENTS_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
+const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
@@ -1765,6 +1766,23 @@ const installFrontend = ({ credentials, payload }) => {
     })
 }
 
+const fetchScrobbles = ({ accountId, limit = 1 }) => {
+  let url = PLEROMA_SCROBBLES_URL(accountId)
+  const params = [['limit', limit]]
+  const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
+  url += `?${queryString}`
+  return fetch(url, {})
+    .then((response) => {
+      if (response.ok) {
+        return response.json()
+      } else {
+        return {
+          error: response
+        }
+      }
+    })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1878,6 +1896,7 @@ const apiService = {
   postAnnouncement,
   editAnnouncement,
   deleteAnnouncement,
+  fetchScrobbles,
   adminFetchAnnouncements,
   fetchInstanceDBConfig,
   fetchInstanceConfigDescriptions,