From 619effbf77a13acc10fb9218b52b10414ad5e2a9 Mon Sep 17 00:00:00 2001
From: robbevp <robbe@vanpetegem.me>
Date: Sat, 4 Dec 2021 14:16:06 +0100
Subject: [PATCH] Add play stats page (#660)

---
 package.json                            |   1 +
 src/Main.vue                            |   4 +
 src/components/DateRangeSelect.vue      | 139 ++++++++++++++++++++++++
 src/components/PercentagePlayedCard.vue | 109 +++++++++++++++++++
 src/components/TopTracksList.vue        | 132 ++++++++++++++++++++++
 src/filters.js                          |   6 +
 src/locales/en.json                     |  18 +++
 src/locales/nl.json                     |  18 +++
 src/main.js                             |  12 +-
 src/reducers.js                         |  23 ++++
 src/router.js                           |   6 +
 src/views/App.vue                       |  10 ++
 src/views/Stats.vue                     |  87 +++++++++++++++
 yarn.lock                               |   5 +
 14 files changed, 566 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DateRangeSelect.vue
 create mode 100644 src/components/PercentagePlayedCard.vue
 create mode 100644 src/components/TopTracksList.vue
 create mode 100644 src/filters.js
 create mode 100644 src/reducers.js
 create mode 100644 src/views/Stats.vue

diff --git a/package.json b/package.json
index 9ba3fb90..5f1f38fc 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "@mdi/font": "^6.5.95",
     "@mdi/svg": "^6.5.95",
     "fetch-retry": "^5.0.1",
+    "gsap": "^3.8.0",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "roboto-fontface": "^0.10.0",
diff --git a/src/Main.vue b/src/Main.vue
index 63780b7b..610a6702 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -55,6 +55,10 @@ a {
 }
 
 // Additional utility classes
+.break-word {
+  word-break: break-word;
+}
+
 .white-space-nowrap {
   white-space: nowrap;
 }
diff --git a/src/components/DateRangeSelect.vue b/src/components/DateRangeSelect.vue
new file mode 100644
index 00000000..2c792371
--- /dev/null
+++ b/src/components/DateRangeSelect.vue
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <VSelect
+      :items="periodPresets"
+      :label="$t('components.dateRangeSelect.label')"
+      v-model="selectedPreset"
+    >
+      <template v-slot:item="{ item, on, attrs }">
+        <VListItem
+          v-on="on"
+          v-bind="attrs"
+          @click="showCustomRangeModal = item.value === 'customRange'"
+        >
+          {{ item.text }}
+        </VListItem>
+      </template>
+      <template v-slot:selection="{ item }">
+        <span>
+          {{ item.value === "customRange" ? customRangeText : item.text }}
+        </span>
+      </template>
+    </VSelect>
+    <VDialog persistent width="290px" v-model="showCustomRangeModal">
+      <VDatePicker
+        v-model="customRange"
+        scrollable
+        range
+        :first-day-of-week="1"
+        :locale="locale"
+      >
+        <VSpacer></VSpacer>
+        <VBtn
+          text
+          color="primary"
+          class="ma-2"
+          @click="showCustomRangeModal = false"
+        >
+          {{ $t("common.cancel") }}
+        </VBtn>
+        <VBtn text color="primary" class="ma-2" @click="emitSelection">
+          {{ $t("common.ok") }}
+        </VBtn>
+      </VDatePicker>
+    </VDialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+
+export default {
+  name: "DateRangeSelect",
+  data() {
+    return {
+      periodPresets: [
+        {
+          value: "last7Days",
+          text: this.$t("components.dateRangeSelect.options.last7Days"),
+        },
+        {
+          value: "lastMonth",
+          text: this.$t("components.dateRangeSelect.options.lastMonth"),
+        },
+        {
+          value: "thisYear",
+          text: this.$t("components.dateRangeSelect.options.thisYear"),
+        },
+        {
+          value: "allTime",
+          text: this.$t("components.dateRangeSelect.options.allTime"),
+        },
+        {
+          value: "customRange",
+          text: this.$t("components.dateRangeSelect.options.customRange"),
+        },
+      ],
+      selectedPreset: "last7Days",
+      showCustomRangeModal: false,
+      customRange: [],
+    };
+  },
+  computed: {
+    ...mapState("userSettings", ["locale"]),
+    customRangeText() {
+      return this.customRange.join(" - ");
+    },
+    period() {
+      let end = new Date();
+      let start = new Date();
+      switch (this.selectedPreset) {
+        case "last7Days":
+          start.setDate(start.getDate() - 7);
+          break;
+        case "lastMonth":
+          start.setMonth(start.getMonth() - 1);
+          break;
+        case "thisYear":
+          start.setMonth(0, 1);
+          break;
+        case "allTime":
+          start = new Date(0);
+          break;
+        case "customRange": {
+          const range = this.customRange
+            .map((d) => new Date(d))
+            .sort((d1, d2) => d1 > d2);
+          if (range.length) {
+            start = range[0];
+            end = range[1] || new Date(range[0]);
+          }
+          break;
+        }
+      }
+      // Set start and end to beginning and end of day
+      start.setHours(0, 0, 0, 0);
+      end.setHours(23, 59, 59, 999);
+      return { start, end };
+    },
+  },
+  watch: {
+    selectedPreset: {
+      handler(newValue) {
+        if (newValue !== "customRange") {
+          this.emitSelection();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    emitSelection() {
+      this.$emit("input", this.period);
+      this.showCustomRangeModal = false;
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/PercentagePlayedCard.vue b/src/components/PercentagePlayedCard.vue
new file mode 100644
index 00000000..8b51de0c
--- /dev/null
+++ b/src/components/PercentagePlayedCard.vue
@@ -0,0 +1,109 @@
+<template>
+  <VCard class="pa-2">
+    <VCardTitle class="break-word">{{ title }}</VCardTitle>
+    <div class="ma-2">
+      <svg viewBox="0 0 250 250">
+        <circle
+          cx="125"
+          cy="125"
+          r="100"
+          fill="transparent"
+          stroke="currentColor"
+          stroke-width="30"
+          :stroke-dasharray="circumference"
+          class="grey--text text--lighten-2"
+        ></circle>
+        <circle
+          cx="125"
+          cy="125"
+          r="100"
+          fill="transparent"
+          stroke="currentColor"
+          class="primary--text"
+          stroke-width="30"
+          :stroke-dasharray="circumference"
+          :stroke-dashoffset="strokeDashOffset"
+          transform="rotate(-90, 125, 125)"
+        ></circle>
+        <text x="130" y="125" text-anchor="middle" class="text-h6">
+          {{ Math.round(animatedPercentage * 1000) / 10.0 }}%
+        </text>
+      </svg>
+    </div>
+  </VCard>
+</template>
+
+<script>
+import { gsap } from "gsap";
+
+export default {
+  name: "PercentagePlayedCard",
+  props: {
+    plays: {
+      type: Array,
+      required: true,
+    },
+    tracks: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    useTrackLength: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      animatedPercentage: 0,
+    };
+  },
+  computed: {
+    playedTracksInPeriod() {
+      const trackIds = this.plays.map((p) => p.track_id);
+      return [...new Set(trackIds)];
+    },
+    playedTracksLength() {
+      return this.playedTracksInPeriod.reduce((acc, cur) => {
+        return acc + (this.tracks.find((t) => t.id === cur)?.length || 0);
+      }, 0);
+    },
+    totalTracksLength() {
+      return this.tracks.reduce((acc, cur) => {
+        return acc + cur.length;
+      }, 0);
+    },
+    circumference() {
+      // 2πr
+      return 2 * Math.PI * 100;
+    },
+    percentage() {
+      if (!this.tracks.length) {
+        return 0;
+      }
+
+      const playsCount = this.useTrackLength
+        ? this.playedTracksLength
+        : this.playedTracksInPeriod.length;
+      const tracksCount = this.useTrackLength
+        ? this.totalTracksLength
+        : this.tracks.length;
+      return (1.0 * playsCount) / tracksCount;
+    },
+    strokeDashOffset() {
+      const strokeDiff = this.animatedPercentage * this.circumference;
+      return this.circumference - strokeDiff;
+    },
+  },
+  watch: {
+    percentage(newValue) {
+      gsap.to(this.$data, { duration: 0.8, animatedPercentage: newValue });
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/src/components/TopTracksList.vue b/src/components/TopTracksList.vue
new file mode 100644
index 00000000..ad2c6b55
--- /dev/null
+++ b/src/components/TopTracksList.vue
@@ -0,0 +1,132 @@
+<template>
+  <VCard class="pa-2">
+    <VCardTitle> {{ title }}</VCardTitle>
+    <ol class="top-list">
+      <li v-for="(item, index) in listData" :key="index" class="top-item">
+        <span class="top-item__text">
+          <span class="top-item__position font-weight-medium">
+            {{ index + 1 }}.
+          </span>
+          <span class="top-item__name">
+            {{ item.trackArtists.map((a) => a.name).join(" / ") }}
+            - {{ item.title }}
+          </span>
+        </span>
+        <div class="top-item__bg-wrapper">
+          <div
+            class="top-item__bg primary"
+            :style="{ width: `${animatedWidths[index]}%` }"
+          >
+            <span
+              class="top-item__count font-weight-medium white--text"
+              v-if="useTrackLength"
+            >
+              {{ item.count | length }}
+            </span>
+            <span class="top-item__count font-weight-medium white--text" v-else>
+              {{ item.count }}
+            </span>
+          </div>
+        </div>
+      </li>
+    </ol>
+  </VCard>
+</template>
+
+<script>
+import { mapState } from "vuex";
+import { calcPlayCountForTracks, calcPlayTimeForTracks } from "@/reducers";
+
+export default {
+  name: "TopTracksList",
+  props: {
+    plays: {
+      type: Array,
+      required: true,
+    },
+    title: {
+      type: String,
+      required: true,
+    },
+    useTrackLength: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      animatedWidths: Array(10).fill(0),
+    };
+  },
+  computed: {
+    ...mapState("tracks", ["tracks"]),
+    topTracks() {
+      return Object.entries(
+        this.useTrackLength
+          ? calcPlayTimeForTracks(this.plays, this.tracks)
+          : calcPlayCountForTracks(this.plays)
+      )
+        .sort((t1, t2) => t2[1] - t1[1])
+        .slice(0, 10);
+    },
+    listData() {
+      const max = (this.topTracks[0] && this.topTracks[0][1]) || 0;
+      return [...this.topTracks].map((tt) => {
+        const track = this.tracks[tt[0]];
+        return {
+          count: tt[1],
+          title: track?.title,
+          width: (tt[1] * 100.0) / max,
+          trackArtists:
+            track?.track_artists
+              .map((ta) => ta)
+              .sort((a1, a2) => a1.order - a2.order) || [],
+        };
+      });
+    },
+  },
+  watch: {
+    listData() {
+      setTimeout(() => {
+        this.animatedWidths = this.listData.map((i) => i.width);
+      }, 0);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.top-list {
+  list-style: none;
+  padding-left: 0;
+}
+
+.top-item {
+  width: 100%;
+  display: block;
+  padding: 0.375rem 1rem;
+
+  &__bg-wrapper {
+    width: 100%;
+    height: 2rem;
+  }
+
+  &__bg {
+    height: 100%;
+    border-radius: 0.5rem;
+    transition-property: width;
+    transition-timing-function: ease-in-out;
+    transition-duration: 500ms;
+  }
+
+  &__text {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &__count {
+    float: right;
+    padding: 0.25rem 0.5rem;
+  }
+}
+</style>
diff --git a/src/filters.js b/src/filters.js
new file mode 100644
index 00000000..c4682ff6
--- /dev/null
+++ b/src/filters.js
@@ -0,0 +1,6 @@
+export function filterPlaysByPeriod(startDate, endDate) {
+  return function (play) {
+    const playedAt = new Date(play.played_at);
+    return playedAt > startDate && playedAt < endDate;
+  };
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index ce42c54a..7584e4f6 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -62,8 +62,21 @@
 		"replace": "Replace",
 		"search": "Search",
 		"settings": "Settings",
+		"stats": "Stats",
 		"yes": "Yes"
 	},
+	"components": {
+		"dateRangeSelect": {
+			"label": "Select period",
+			"options": {
+				"last7Days": "Last 7 days",
+				"lastMonth": "Last month",
+				"thisYear": "This year",
+				"allTime": "All time",
+				"customRange": "Custom range"
+			}
+		}
+	},
 	"errors": {
 		"album_artists": "Album artists",
 		"albums": {
@@ -346,6 +359,11 @@
 			"original": "Original quality"
 		}
 	},
+	"stats": {
+		"percentageLibraryPlayed": "Percentage of library that you listened to",
+		"topTracks": "Top tracks",
+		"useTrackLength": "Use track length"
+	},
 	"users": {
 		"auth": {
 			"destroy-selected": "Delete selected",
diff --git a/src/locales/nl.json b/src/locales/nl.json
index dd82e381..5ed90ea1 100644
--- a/src/locales/nl.json
+++ b/src/locales/nl.json
@@ -62,8 +62,21 @@
 		"replace": "Vervangen",
 		"search": "Zoeken",
 		"settings": "Instellingen",
+		"stats": "Statistieken",
 		"yes": "Ja"
 	},
+	"components": {
+		"dateRangeSelect": {
+			"label": "Selecteer periode",
+			"options": {
+				"last7Days": "Voorbije 7 dagen",
+				"lastMonth": "Voorbije maand",
+				"thisYear": "Dit jaar",
+				"allTime": "Altijd",
+				"customRange": "Eigen selectie"
+			}
+		}
+	},
 	"errors": {
 		"album_artists": "Album artiesten",
 		"albums": {
@@ -342,6 +355,11 @@
 			"original": "Originele kwaliteit"
 		}
 	},
+	"stats": {
+		"percentageLibraryPlayed": "Percentage van muziekbibliotheek dat je besluisterd hebt:",
+		"topTracks": "Meest besluisterde nummers",
+		"useTrackLength": "Volgens lengte nummers"
+	},
 	"users": {
 		"auth": {
 			"destroy-selected": "Verwijder geselecteerde",
diff --git a/src/main.js b/src/main.js
index 4aef3d40..e8237472 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,10 +11,14 @@ import colors from "vuetify/lib/util/colors";
 
 Vue.config.productionTip = false;
 
-Vue.filter(
-  "length",
-  (l) => `${Math.floor(l / 60)}:${`${l % 60}`.padStart(2, "0")}`
-);
+Vue.filter("length", (l) => {
+  const hours = Math.floor(l / 3600);
+  const minutes = Math.floor((l % 3600) / 60);
+  const seconds = `${l % 60}`.padStart(2, "0");
+  return hours
+    ? `${hours}:${minutes.toString().padStart(2, "0")}:${seconds}`
+    : `${minutes}:${seconds}`;
+});
 
 Vue.use(Vuetify);
 Vue.use(Meta, { refreshOnceOnNavigation: true });
diff --git a/src/reducers.js b/src/reducers.js
new file mode 100644
index 00000000..80f89592
--- /dev/null
+++ b/src/reducers.js
@@ -0,0 +1,23 @@
+export function calcPlayCountForTracks(plays) {
+  const acc = {};
+  for (const play of plays) {
+    if (!(play.track_id in acc)) {
+      acc[play.track_id] = 1;
+    } else {
+      acc[play.track_id]++;
+    }
+  }
+  return acc;
+}
+
+export function calcPlayTimeForTracks(plays, tracks) {
+  const acc = {};
+  for (const play of plays) {
+    if (!(play.track_id in acc)) {
+      acc[play.track_id] = tracks[play.track_id]?.length || 0;
+    } else {
+      acc[play.track_id] += tracks[play.track_id]?.length || 0;
+    }
+  }
+  return acc;
+}
diff --git a/src/router.js b/src/router.js
index 3459a57a..6d2946f8 100644
--- a/src/router.js
+++ b/src/router.js
@@ -13,6 +13,7 @@ import NewArtist from "./views/artists/NewArtist";
 import Home from "./views/Home";
 import Login from "./views/Login";
 import Library from "./views/Library";
+import Stats from "./views/Stats";
 import EditTrack from "./views/tracks/EditTrack";
 import TracksWithoutAudio from "./views/tracks/TracksWithoutAudio";
 import MergeTrack from "./views/tracks/MergeTrack";
@@ -134,6 +135,11 @@ const router = new Router({
           name: "settings",
           component: Settings,
         },
+        {
+          path: "stats",
+          name: "stats",
+          component: Stats,
+        },
         {
           path: "tracks",
           name: "tracks",
diff --git a/src/views/App.vue b/src/views/App.vue
index d8a7d969..06edee0e 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -81,6 +81,16 @@
             </VListItemTitle>
           </VListItemContent>
         </VListItem>
+        <VListItem :to="{ name: 'stats' }">
+          <VListItemAction>
+            <VIcon>mdi-chart-bar</VIcon>
+          </VListItemAction>
+          <VListItemContent>
+            <VListItemTitle>
+              {{ $tc("common.stats", 2) }}
+            </VListItemTitle>
+          </VListItemContent>
+        </VListItem>
         <VListItem :to="{ name: 'library' }" v-if="isModerator">
           <VListItemAction>
             <VIcon>mdi-tune</VIcon>
diff --git a/src/views/Stats.vue b/src/views/Stats.vue
new file mode 100644
index 00000000..ae6f7969
--- /dev/null
+++ b/src/views/Stats.vue
@@ -0,0 +1,87 @@
+<template>
+  <VContainer>
+    <VRow>
+      <VCol>
+        <h1 class="text-h4">{{ $t("common.stats") }}</h1>
+      </VCol>
+      <VCol class="d-flex justify-end">
+        <VSwitch
+          v-model="useTrackLength"
+          :label="$t('stats.useTrackLength')"
+          class="mr-4"
+        />
+        <DateRangeSelect @input="(e) => (period = e)" />
+      </VCol>
+    </VRow>
+    <VRow>
+      <VCol cols="12" md="9">
+        <TopTracksList
+          class="stats__top-tracks"
+          :plays="filteredPlays"
+          :use-track-length="useTrackLength"
+          :title="$t('stats.topTracks')"
+        />
+      </VCol>
+      <VCol cols="12" md="3">
+        <PercentagePlayedCard
+          class="stats__percentage-played"
+          :plays="filteredPlays"
+          :use-track-length="useTrackLength"
+          :tracks="tracks"
+          :title="$t('stats.percentageLibraryPlayed')"
+        />
+      </VCol>
+    </VRow>
+  </VContainer>
+</template>
+
+<script>
+import { mapGetters, mapState } from "vuex";
+import DateRangeSelect from "@/components/DateRangeSelect";
+import PercentagePlayedCard from "@/components/PercentagePlayedCard";
+import TopTracksList from "@/components/TopTracksList";
+import { filterPlaysByPeriod } from "@/filters";
+
+export default {
+  name: "Stats",
+  metaInfo() {
+    return { title: this.$t("common.stats") };
+  },
+  components: {
+    DateRangeSelect,
+    PercentagePlayedCard,
+    TopTracksList,
+  },
+  data() {
+    return {
+      period: {
+        start: null,
+        end: null,
+      },
+      useTrackLength: false,
+    };
+  },
+  created() {
+    this.reloadPlays();
+  },
+  computed: {
+    ...mapGetters({
+      plays: "plays/plays",
+      tracks: "tracks/tracks",
+    }),
+    ...mapState("userSettings", ["locale"]),
+    filteredPlays() {
+      return this.plays.filter(
+        filterPlaysByPeriod(this.period.start, this.period.end)
+      );
+    },
+  },
+  methods: {
+    async reloadPlays() {
+      await this.$store.dispatch("plays/index");
+    },
+  },
+};
+</script>
+
+<style></style>
diff --git a/yarn.lock b/yarn.lock
index cef6c6bc..9e7bbc26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4332,6 +4332,11 @@ graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.6.tgz#ff040b2b0853b23c3d31027523706f1885d76bee"
   integrity sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ==
 
+gsap@^3.8.0:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/gsap/-/gsap-3.8.0.tgz#a404dd6ebbaabc92605539aea9d98e3098688064"
+  integrity sha512-cvpzKkWFePDZCycwXwJnDSpTR3j+a4QLQF/t0c+pXqzRESgAYx5hieaoshzZFjbwsARqr0+5c3GKE7wI273w/g==
+
 gzip-size@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-5.1.1.tgz#cb9bee692f87c0612b232840a873904e4c135274"