feat(player): redesign

Author: Garrett Downs

package-lock.json

@@ -48,6 +48,7 @@
     "dexie": "^3.2.1",
     "kaios-lib": "^1.6.0",
     "lodash.throttle": "^4.1.1",
+    "numeral": "^2.0.6",
     "onyx-ui": "^0.5.2",
     "sirv-cli": "^1.0.0",
     "svelte-icons": "^2.1.0",

package.json

@@ -5,7 +5,7 @@ export type Track = {
   id: number;
   duration: number;
   commentable: true;
-  comment_count: 3;
+  comment_count: number;
   sharing: 'public';
   tag_list: string;
   streamable: boolean;

src/models/Track.ts

@@ -1,15 +1,21 @@
 <script lang="ts">
   import KaiOS from 'kaios-lib';
+  import numeral from 'numeral';
   import Card from 'onyx-ui/components/card/Card.svelte';
   import CardContent from 'onyx-ui/components/card/CardContent.svelte';
   import CardHeader from 'onyx-ui/components/card/CardHeader.svelte';
+  import Icon from 'onyx-ui/components/icon/Icon.svelte';
   import Typography from 'onyx-ui/components/Typography.svelte';
   import View from 'onyx-ui/components/view/View.svelte';
   import ViewContent from 'onyx-ui/components/view/ViewContent.svelte';
   import { Priority } from 'onyx-ui/enums';
   import { KeyManager } from 'onyx-ui/services';
   import { registerView, view } from 'onyx-ui/stores/view';
   import { onDestroy } from 'svelte';
+  import MdComment from 'svelte-icons/md/MdComment.svelte';
+  import MdFavorite from 'svelte-icons/md/MdFavorite.svelte';
+  import MdPlayArrow from 'svelte-icons/md/MdPlayArrow.svelte';
+  import MdRepeat from 'svelte-icons/md/MdRepeat.svelte';
   import { replace } from 'svelte-spa-router';
   import { pause, play, skip, skipTo } from '../components/AudioPlayer.svelte';
   import Waveform from '../components/Waveform.svelte';
@@ -96,6 +102,20 @@
           <Typography type="titleSmall" align="center"
             >{$player.track.user.full_name || $player.track.user.username}</Typography
           >
+          <div class="stats">
+            <div class="item">
+              <Icon><MdPlayArrow /></Icon>{numeral($player.track.playback_count).format('0.0a')}
+            </div>
+            <div class="item">
+              <Icon><MdFavorite /></Icon>{numeral($player.track.favoritings_count).format('0.0a')}
+            </div>
+            <div class="item">
+              <Icon><MdRepeat /></Icon>{numeral($player.track.reposts_count).format('0a')}
+            </div>
+            <div class="item">
+              <Icon><MdComment /></Icon>{numeral($player.track.comment_count).format('0a')}
+            </div>
+          </div>
         </CardContent>
       </Card>
     {/if}
@@ -109,4 +129,15 @@
     font-weight: 600;
     color: var(--accent-color);
   }
+
+  .stats {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px;
+  }
+  .stats > .item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 </style>