feat: likes stats and visual updates

evaldorcardoso · Jun 23, 2023 · 8bc9cb2 · 8bc9cb2
1 parent 751bc61
commit 8bc9cb2
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 26 deletions.
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
diff --git a/dev-dist/sw.js.map b/dev-dist/sw.js.map
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "myrandomicplaylist",
-  "version": "3.10.1",
+  "version": "3.11.0",
   "scripts": {
     "dev": "vite",
     "build": "vite build",

diff --git a/src/components/FloatMenu.vue b/src/components/FloatMenu.vue
@@ -10,8 +10,7 @@ const emit = defineEmits([
     'refresh-playlist',
     'open-popularity',
     'open-likes',
-    'add-queue',
-    'update-sort'
+    'add-queue'
 ])
 const { addTracksToPlaylist, removeTracksOfPlaylist, getTracks } = useGeneral()
 const { executePlaylist } = useProfile()
@@ -27,6 +26,7 @@ const alert = ref(null)
 const state = reactive({
     playlistsOriginal:[],
     playlists: [],
+    likesAVG: 0
   })
 
 const props = defineProps({
@@ -61,6 +61,8 @@ const menuData = computed(() => {
         menuData.isOwner = props.menuData.playlist.owner.display_name == currentUser.value.display_name
         menuData.visibility = props.menuData.playlist.public ? 'Public' : 'Private'
         menuData.popularity = props.menuData.playlist.popularity
+        menuData.likesStats = props.menuData.playlist.likesStats
+        calcLikesStats()
         return menuData
     }
     if (menuData.type == 'track') {
@@ -82,6 +84,24 @@ const currentUser = computed(() => {
     return props.userData;
 });
 
+const calcLikesStats = () => {
+    const likesStats = props.menuData.playlist.likesStats
+    if (likesStats && likesStats.length > 1) {
+        let last = likesStats[likesStats.length - 1]
+        state.likesAVG = parseInt(last)
+        state.likesAVG = state.likesAVG >= 0 ? '+' : '-'
+        state.likesAVG = state.likesAVG + String(last)
+        return
+    }
+    if (likesStats && likesStats.length > 2) {
+        let beforeLast = likesStats[likesStats.length - 2]
+        let last = likesStats[likesStats.length - 1]
+        state.likesAVG = parseInt(last - beforeLast)
+        state.likesAVG = state.likesAVG >= 0 ? '+' : '-'
+        state.likesAVG = state.likesAVG + String((last - beforeLast))
+    }
+}
+
 const selectPlaylist = async(playlistId) => {
     if (! await verifyDuplicateTrackInPlaylist(playlistId, menuData.value.id)) {
         alert.value.showAlert(
@@ -195,11 +215,6 @@ const doQueue = (track) => {
     closeMenu()
 }
 
-const doUpdateSort = () => {
-    emit('update-sort')
-    closeMenu()
-}
-
 const listPlaylists = async() => {
     state.playlistsOriginal = playlistStore.playlists
     state.playlists = state.playlistsOriginal.filter(
@@ -240,10 +255,38 @@ const closeMenu = () => {
                     Popularity: {{ menuData.popularity }}<br>
                 </div>
                 <div class="menu-item-track-details" v-if="menuData.type == 'playlist'">
-                    Followers: {{ menuData.followers }} <br>
-                    Created by: {{ menuData.owner }} <br>
-                    Visibility: {{ menuData.visibility }} <br>
-                    Popularity: {{ menuData.popularity }}<br>
+                    <div style="display: flex;justify-content:space-around">
+                        <div style="display: flex;flex-direction:column;text-align: center;font-size:24px;color:#3498db">
+                            <font-awesome-icon icon="heart" style="vertical-align:middle;" />
+                            <p class="playlist-subtitle" style="margin-top:10px">{{ menuData.followers }}</p>
+                        </div>
+                        <div style="display: flex;flex-direction:column;text-align: center;font-size:24px;color:#3498db">
+                            <font-awesome-icon v-if="menuData.visibility == 'Public'" icon="unlock-alt" style="vertical-align:middle;" />
+                            <font-awesome-icon v-else icon="lock" style="vertical-align:middle;" />
+                            <p class="playlist-subtitle" style="margin-top:18px;font-size:12px">{{ menuData.visibility }}</p>
+                        </div>
+                        <div style="display: flex;flex-direction:column;text-align: center;font-size:24px;" 
+                            :class="{
+                                'icon-popularity-bad' : (menuData.popularity <= 40),
+                                'icon-popularity-medium' : (menuData.popularity > 40 && menuData.popularity <= 70),
+                                'icon-popularity-good' : (menuData.popularity > 70)
+                            }">
+                            <font-awesome-icon icon="chart-line" />
+                            <p class="playlist-subtitle" style="margin-top:10px">{{menuData.popularity}}%</p>
+                        </div>
+                        <div style="display: flex;flex-direction:column;text-align: center;font-size:24px;"
+                        :class="{
+                            'icon-popularity-bad' : (state.likesAVG < 0),
+                            'icon-popularity-medium' : (state.likesAVG == 0),
+                            'icon-popularity-good' : (state.likesAVG > 0)
+                        }">
+                            <font-awesome-icon v-if="(state.likesAVG < 0)" icon="sad-tear"/>
+                            <font-awesome-icon v-else-if="(state.likesAVG == 0)" icon="meh"/>
+                            <font-awesome-icon v-else-if="(state.likesAVG > 0)" icon="smile"/>
+                            <p class="playlist-subtitle" style="margin-top:10px">{{ state.likesAVG }}</p>
+                        </div>
+                    </div>
+                    Created by: {{ menuData.owner }}
                 </div>
                 <hr class="style-one">
                 <div v-if="menuData.type == 'track'">
@@ -287,10 +330,6 @@ const closeMenu = () => {
                         <font-awesome-icon icon="chart-line" style="vertical-align:middle;margin-right:10px;color: #b3b3b3;" />
                         <h3 class="menu-item-option">Likes chart</h3>
                     </div>
-                    <div class="menu-item" @click="doUpdateSort">
-                        <font-awesome-icon icon="sync" style="vertical-align:middle;margin-right:10px;color: #b3b3b3;" />
-                        <h3 class="menu-item-option">Save sort on Spotify</h3>
-                    </div>
                 </div>
             </div>            
         </div>
@@ -431,4 +470,13 @@ const closeMenu = () => {
         overflow: scroll;
         max-height: 500px;
     }
+    .icon-popularity-bad{
+        color: rgb(255, 23, 23);
+    }
+    .icon-popularity-medium{
+        color: rgb(255, 240, 30);
+    }
+    .icon-popularity-good{
+        color: rgb(117, 255, 24);
+    }
 </style>
diff --git a/src/main.js b/src/main.js
@@ -34,7 +34,12 @@ import {
     faChartBar,
     faChartPie,
     faEllipsisV,
-    faCheck
+    faCheck,
+    faSmile,
+    faSadTear,
+    faMeh,
+    faLock,
+    faUnlockAlt
 } from '@fortawesome/free-solid-svg-icons'
 import {
     faXmarkCircle
@@ -72,7 +77,12 @@ library.add(
     faChartPie,
     faEllipsisV,
     faXmarkCircle,
-    faCheck
+    faCheck,
+    faSmile,
+    faSadTear,
+    faMeh,
+    faLock,
+    faUnlockAlt
 )
 
 const updateSW = registerSW({

diff --git a/src/views/Playlist.vue b/src/views/Playlist.vue
@@ -104,9 +104,11 @@
   const getPlaylistTracks = async(force = false) => {
     state.tracks = await playlistStore.getTracks(playlistId.value)
     if ((state.tracks.length === 0) || force) {
+      showNotification(NOTIFICATIONS_TYPE.info, 'Please, wait', 'Loading songs...')
       playlistStore.loadTracks(playlistId.value, await getTracks(playlistId.value))
       state.tracks = await playlistStore.getTracks(playlistId.value)
-    }
+      showNotification(NOTIFICATIONS_TYPE.success, 'Success', 'Songs loaded!', false, true)
+    }    
   }
 
   const saveStatistics = async() => {
@@ -137,7 +139,7 @@
       if (error && status !== 406) throw error
   }
 
-  const getLikesStats = async() => {
+  const getLikesStats = async(save = true) => {
     try {
       let { data, error, status } = await supabase
         .from(import.meta.env.VITE_SUPABASE_PLAYLISTS_TABLE)
@@ -169,7 +171,9 @@
           }
         }
       }
-      await saveStatistics()
+      if (save) {
+        await saveStatistics()
+      }
     } catch (error) {
       console.log(error.message)
       showNotification(NOTIFICATIONS_TYPE.danger, 'Ops', error.message)
@@ -335,7 +339,7 @@
     isMenuOpened.value = true
   }
 
-  const openMenuPlaylist = () => {
+  const openMenuPlaylist = async() => {
     let menuData = {
       type: 'playlist',
       playlist: state.playlist
@@ -346,6 +350,10 @@
     })
     menuData.playlist.isOwner = state.playlist.owner.display_name == currentUser.value.display_name
     menuData.playlist.popularity = (popularity / state.tracks.length).toFixed(2)
+    if (! state.chartData.datasets[0]?.data) {
+      await getLikesStats(false)
+    }
+    menuData.playlist.likesStats = state.chartData.datasets[0]?.data
     menuDataReactive.value = menuData
     isMenuOpened.value = true
   }
@@ -388,7 +396,7 @@
         continue
       }
       changes++
-      showNotification(NOTIFICATIONS_TYPE.info, 'Aguarde', 'organizando músicas... (' + changes + '/' + state.tracks.length + ')')
+      showNotification(NOTIFICATIONS_TYPE.info, 'Please, wait', 'Sorting songs... (' + changes + '/' + state.tracks.length + ')')
       const formData = {
         'range_start': id,
         'insert_before': i
@@ -461,7 +469,6 @@
         @open-popularity="mountPopularityStatsChart"
         @open-likes="getLikesStats"
         @add-queue="addToQueue"
-        @update-sort="updateTracksOrder"
     />
   <div class="page">    
     <vue-basic-alert :duration="300" :closeIn="3000" ref="alert" />