Merge branch 'apple-music' into apple-music-feb14

package.json

@@ -15,7 +15,7 @@
     "@headlessui/react": "^1.7.2",
     "@next/bundle-analyzer": "^12.2.1",
     "@next/font": "^13.0.3",
-    "@statsfm/statsfm.js": "^2.1.8",
+    "@statsfm/statsfm.js": "https://github.com/statsfm/statsfm.js#apple-music-build",
     "@tailwindcss/line-clamp": "^0.4.0",
     "@tailwindcss/typography": "^0.5.7",
     "@zip.js/zip.js": "^2.7.33",

src/components/Album/AlbumCard/AlbumCard.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 
 import Link from 'next/link';
 import formatter from '@/utils/formatter';

src/components/Artist/ArtistCard/ArtistCard.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 
 // components
 import Link from 'next/link';

src/components/Artist/ArtistList.tsx

@@ -1,4 +1,4 @@
-import type { ArtistSimple } from '@statsfm/statsfm.js';
+import type { ArtistSimple } from '@/utils/statsfm';
 import Link from 'next/link';
 import type { FC } from 'react';
 

src/components/Artist/ArtistRelatedArtists/ArtistRelatedArtists.tsx

@@ -1,5 +1,5 @@
 import { useState, type FC, useEffect } from 'react';
-import { type Artist } from '@statsfm/statsfm.js';
+import { type Artist } from '@/utils/statsfm';
 import { useApi } from '@/hooks';
 import { event } from 'nextjs-google-analytics';
 import {

src/components/Artist/ArtistTopAlbums/ArtistTopAlbums.tsx

@@ -4,7 +4,7 @@ import {
   type Artist,
   type Album,
   type TopAlbum,
-} from '@statsfm/statsfm.js';
+} from '@/utils/statsfm';
 import { useApi, useAuth } from '@/hooks';
 import clsx from 'clsx';
 import { event } from 'nextjs-google-analytics';

src/components/Artist/ArtistTopTracks/ArtistTopTracks.tsx

@@ -4,7 +4,7 @@ import {
   type Artist,
   type TopTrack,
   type Track,
-} from '@statsfm/statsfm.js';
+} from '@/utils/statsfm';
 import { useApi, useAuth } from '@/hooks';
 import clsx from 'clsx';
 import { event } from 'nextjs-google-analytics';

src/components/Artist/RelatedArtistCard/RelatedArtistCard.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 
 // components
 import Link from 'next/link';

src/components/Gift/Coupon.tsx

@@ -1,4 +1,4 @@
-import type { GiftCode } from '@statsfm/statsfm.js';
+import type { GiftCode } from '@/utils/statsfm';
 import dayjs from '@/utils/dayjs';
 import Link from 'next/link';
 import type { FC } from 'react';

src/components/Gift/CouponModal.tsx

@@ -1,5 +1,5 @@
 import { useApi, useToaster } from '@/hooks';
-import type { GiftCode } from '@statsfm/statsfm.js';
+import type { GiftCode } from '@/utils/statsfm';
 import { Dialog } from '@headlessui/react';
 import dayjs from 'dayjs';
 import Link from 'next/link';

src/components/Home/TotalStats.tsx

@@ -1,6 +1,6 @@
 import { useApi, useStatAnimation } from '@/hooks';
 import formatter from '@/utils/formatter';
-import type { DatabaseSizeItem, DatabaseSize } from '@statsfm/statsfm.js';
+import type { DatabaseSizeItem, DatabaseSize } from '@/utils/statsfm';
 import type { FC } from 'react';
 import { useState, useEffect } from 'react';
 import { MdOutlineArrowRightAlt } from 'react-icons/md';

src/components/Import/ImportItem.tsx

@@ -1,5 +1,5 @@
 import { Fragment, type FC } from 'react';
-import type { UserImport } from '@statsfm/statsfm.js';
+import type { UserImport } from '@/utils/statsfm';
 import clsx from 'clsx';
 import {
   IMPORT_STATUS,

src/components/Import/ImportList.tsx

@@ -1,5 +1,5 @@
 import { useApi, useAuth } from '@/hooks';
-import type { UserImport } from '@statsfm/statsfm.js';
+import type { UserImport } from '@/utils/statsfm';
 import { useState, type FC, useEffect } from 'react';
 import { MdWarning } from 'react-icons/md';
 import { ImportItemSkeleton } from './ImportItemSkeleton';

src/components/PrivacyScope/index.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import type { FC, PropsWithChildren } from 'react';
 import { createContext, useContext } from 'react';
 

src/components/RecentStreams/RecentStreams.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import dayjs from 'dayjs';
 import type { RefObject } from 'react';
 import { useState, useEffect, useMemo } from 'react';

src/components/Search/AlbumSearchCard.tsx

@@ -2,7 +2,7 @@ import type { PropsWithChildren } from 'react';
 
 import Link from 'next/link';
 import { Image } from '@/components/Image';
-import type { Album } from '@statsfm/statsfm.js';
+import type { Album } from '@/utils/statsfm';
 
 interface Props extends Album {}
 

src/components/Search/ArtistSearchCard.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Avatar } from '@/components/Avatar';
-import type { Artist } from '@statsfm/statsfm.js';
+import type { Artist } from '@/utils/statsfm';
 
 interface Props extends Artist {}
 

src/components/Search/TrackSearchCard.tsx

@@ -1,7 +1,7 @@
 import type { PropsWithChildren } from 'react';
 import Link from 'next/link';
 import { Image } from '@/components/Image';
-import type { Track } from '@statsfm/statsfm.js';
+import type { Track } from '@/utils/statsfm';
 
 interface Props extends Track {}
 

src/components/Search/UserSearchCard.tsx

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import { Avatar } from '@/components/Avatar';
-import type { UserPublic } from '@statsfm/statsfm.js';
+import type { UserPublic } from '@/utils/statsfm';
 
 interface Props extends UserPublic {}
 

src/components/Section/Section.tsx

@@ -7,7 +7,7 @@ import type {
   ReactNode,
   RefObject,
 } from 'react';
-import type { UserPrivacySettings } from '@statsfm/statsfm.js';
+import type { UserPrivacySettings } from '@/utils/statsfm';
 import { MdVisibilityOff } from 'react-icons/md';
 import { Popover, Transition } from '@headlessui/react';
 import Link from 'next/link';

src/components/TopListeners/TopListenerCard.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import clsx from 'clsx';
 import Link from 'next/link';
 import formatter from '@/utils/formatter';

src/components/TopListeners/TopListeners.tsx

@@ -1,5 +1,5 @@
 import { useState, type FC, useEffect } from 'react';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { event } from 'nextjs-google-analytics';
 import { useApi, useAuth } from '@/hooks';
 import { supportUrls } from '@/utils/supportUrls';

src/components/Track/TrackCard/TrackCard.tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { Image } from '@/components/Image';
 import Link from 'next/link';
 import formatter from '@/utils/formatter';

src/components/Track/TrackListRow/TrackListRow.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { Image } from '@/components/Image';
 import dayjs from '@/utils/dayjs';
 import { Divider } from '@/components/Divider';

src/components/User/FriendsButton.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
 import { useState } from 'react';
-import type { UserPublic } from '@statsfm/statsfm.js';
-import { FriendStatus } from '@statsfm/statsfm.js';
+import type { UserPublic } from '@/utils/statsfm';
+import { FriendStatus } from '@/utils/statsfm';
 import { useApi } from '@/hooks';
 import { MdInfo } from 'react-icons/md';
 import { FriendsButtonFrame } from './FriendsButtonFrame';

src/components/User/TopAlbums.tsx

@@ -1,6 +1,6 @@
 import { useApi, useAuth } from '@/hooks';
 import formatter from '@/utils/formatter';
-import type { TopAlbum, UserPublic } from '@statsfm/statsfm.js';
+import type { TopAlbum, UserPublic } from '@/utils/statsfm';
 import type { RefObject } from 'react';
 import { useState, type FC, useEffect } from 'react';
 import { event } from 'nextjs-google-analytics';

src/components/User/TopArtists.tsx

@@ -2,6 +2,7 @@ import { useApi, useAuth } from '@/hooks';
 import formatter from '@/utils/formatter';
 import type { TopArtist, UserPublic } from '@statsfm/statsfm.js';
 import { useState, type FC, useEffect, type RefObject } from 'react';
+import type { RefObject } from 'react';
 import { event } from 'nextjs-google-analytics';
 import { Carousel } from '../Carousel';
 import Scope from '../PrivacyScope';

src/components/User/TopGenres.tsx

@@ -1,5 +1,5 @@
 import { useApi, useAuth } from '@/hooks';
-import type { UserPublic, TopGenre } from '@statsfm/statsfm.js';
+import type { UserPublic, TopGenre } from '@/utils/statsfm';
 import clsx from 'clsx';
 import Link from 'next/link';
 import { useEffect, type FC, useState } from 'react';

src/components/User/TopTracks.tsx

@@ -2,6 +2,7 @@ import { useApi, useAuth } from '@/hooks';
 import formatter from '@/utils/formatter';
 import type { TopTrack, UserPublic } from '@statsfm/statsfm.js';
 import { useState, type FC, useEffect, type RefObject } from 'react';
+import type { RefObject } from 'react';
 import { event } from 'nextjs-google-analytics';
 import { Carousel } from '../Carousel';
 import Scope from '../PrivacyScope';

src/components/User/utils.ts

@@ -2,7 +2,7 @@ import {
   Range,
   type QueryWithDates,
   type QueryWithRange,
-} from '@statsfm/statsfm.js';
+} from '@/utils/statsfm';
 
 export const ranges: Record<Range, string | null> = {
   weeks: 'from the past 4 weeks',

src/context/auth.tsx

@@ -1,7 +1,7 @@
 // TODO: fix dependency cycle
 // eslint-disable-next-line import/no-cycle
 import { useApi } from '@/hooks';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { decodeJwt } from 'jose';
 import Cookies from 'js-cookie';
 import { useRouter } from 'next/router';

src/hooks/use-api.ts

@@ -1,4 +1,4 @@
-import * as statsfm from '@statsfm/statsfm.js';
+import * as statsfm from '@/utils/statsfm';
 import Cookies from 'js-cookie';
 
 let apiUrl = 'https://beta-api.stats.fm/api';

src/hooks/use-stat-animation.ts

@@ -1,4 +1,4 @@
-import type { DatabaseSizeItem } from '@statsfm/statsfm.js';
+import type { DatabaseSizeItem } from '@/utils/statsfm';
 import { useState, useEffect } from 'react';
 
 // rerender time in ms

src/pages/_app.tsx

@@ -9,7 +9,7 @@ import { GoogleAnalytics } from 'nextjs-google-analytics';
 import { ToasterContainer } from '@/context/toaster';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import type { UserPrivate } from '@statsfm/statsfm.js';
+import type { UserPrivate } from '@/utils/statsfm';
 import localFont from '@next/font/local';
 import clsx from 'clsx';
 import ErrorBoundary from '@/components/ErrorBoundary';

src/pages/album/[id].tsx

@@ -1,6 +1,6 @@
 import type { GetServerSideProps, NextPage } from 'next';
 import { useEffect, useMemo, useState } from 'react';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 
 import Link from 'next/link';
 import { Image } from '@/components/Image';

src/pages/artist/[id].tsx

@@ -1,4 +1,4 @@
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { useAuth, useApi } from '@/hooks';
 import type { GetServerSideProps, NextPage } from 'next';
 import type { FC } from 'react';

src/pages/genre/[tag].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from 'next';
 import { Chip, ChipGroup } from '@/components/Chip';
 import { Container } from '@/components/Container';
-import type { Artist, Genre } from '@statsfm/statsfm.js';
+import type { Artist, Genre } from '@/utils/statsfm';
 import { Section } from '@/components/Section/Section';
 import { Avatar } from '@/components/Avatar';
 import Link from 'next/link';

src/pages/gift/index.tsx

@@ -8,11 +8,7 @@ import type { Plan } from '@/types/gift';
 import { Coupon } from '@/components/Gift/Coupon';
 import { Title } from '@/components/Title';
 import Link from 'next/link';
-import type {
-  ItemResponse,
-  ItemsResponse,
-  GiftCode,
-} from '@statsfm/statsfm.js';
+import type { ItemResponse, ItemsResponse, GiftCode } from '@/utils/statsfm';
 import { useRemoteValue } from '@/hooks/use-remote-config';
 import { MdInfo } from 'react-icons/md';
 import type { SSRProps } from '@/utils/ssrUtils';

src/pages/plus/index.tsx

@@ -3,8 +3,8 @@ import { CrownIcon } from '@/components/Icons';
 import { Image } from '@/components/Image';
 import { Title } from '@/components/Title';
 import { useApi, useAuth, useToaster } from '@/hooks';
-import { Range } from '@statsfm/statsfm.js';
-import type { TopArtist, ItemResponse } from '@statsfm/statsfm.js';
+import { Range } from '@/utils/statsfm';
+import type { TopArtist, ItemResponse } from '@/utils/statsfm';
 import clsx from 'clsx';
 import { gsap, Power0, Power1 } from 'gsap';
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger';

src/pages/redeem/[code].tsx

@@ -3,7 +3,7 @@ import { Container } from '@/components/Container';
 import { useApi, useAuth, useToaster } from '@/hooks';
 import type { SSRProps } from '@/utils/ssrUtils';
 import { fetchUser } from '@/utils/ssrUtils';
-import type { GiftCode } from '@statsfm/statsfm.js';
+import type { GiftCode } from '@/utils/statsfm';
 import JSConfetti from 'js-confetti';
 import type { GetServerSideProps, NextPage } from 'next';
 import Link from 'next/link';

src/pages/search.tsx

@@ -19,7 +19,7 @@ import {
   type Artist,
   type Track,
   type UserPublic,
-} from '@statsfm/statsfm.js';
+} from '@/utils/statsfm';
 import type { GetServerSideProps, NextPage } from 'next';
 import { useRouter } from 'next/router';
 import type { FC } from 'react';

src/pages/settings/connections.tsx

@@ -2,7 +2,7 @@ import { AccountLayout } from '@/components/settings/Layout';
 import { SettingsHeader } from '@/components/settings/SettingsHeader';
 import { Button } from '@/components/Button';
 import { useApi, useAuth } from '@/hooks';
-import type { UserSocialMediaConnection } from '@statsfm/statsfm.js';
+import type { UserSocialMediaConnection } from '@/utils/statsfm';
 import type { GetServerSideProps, NextPage } from 'next';
 import { useEffect, useState } from 'react';
 import type { SSRProps } from '@/utils/ssrUtils';

src/pages/settings/privacy.tsx

@@ -5,7 +5,7 @@ import { Divider } from '@/components/Divider';
 import { Overlay } from '@/components/Overlay';
 import { useApi, useAuth } from '@/hooks';
 import { Switch } from '@headlessui/react';
-import type { UserPrivacySettings, UserPrivate } from '@statsfm/statsfm.js';
+import type { UserPrivacySettings, UserPrivate } from '@/utils/statsfm';
 import clsx from 'clsx';
 import type { GetServerSideProps, NextPage } from 'next';
 import type { FC } from 'react';

src/pages/settings/profile.tsx

@@ -8,7 +8,7 @@ import { Overlay } from '@/components/Overlay';
 import { Section } from '@/components/Section/Section';
 import { Textarea } from '@/components/Textarea';
 import { useApi, useAuth, useToaster } from '@/hooks';
-import type { UserPrivate } from '@statsfm/statsfm.js';
+import type { UserPrivate } from '@/utils/statsfm';
 import clsx from 'clsx';
 import type { GetServerSideProps, NextPage } from 'next';
 import { useRouter } from 'next/router';

src/pages/track/[id].tsx

@@ -1,7 +1,7 @@
 import type { GetServerSideProps, NextPage } from 'next';
 import type { FC } from 'react';
 import { useEffect, useMemo, useState } from 'react';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { AlbumCard } from '@/components/Album';
 import { Carousel } from '@/components/Carousel';
 import { Image } from '@/components/Image';

src/pages/user/[id]/[[...deeplink]].tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import type { FC, PropsWithChildren, RefObject } from 'react';
 import dayjs from 'dayjs';
 import type { GetServerSideProps, NextPage } from 'next';
-import * as statsfm from '@statsfm/statsfm.js';
+import * as statsfm from '@/utils/statsfm';
 import Linkify from 'linkify-react';
 
 // components
@@ -22,7 +22,7 @@ import { Button } from '@/components/Button';
 import clsx from 'clsx';
 import type { SSRProps } from '@/utils/ssrUtils';
 import { getApiInstance, fetchUser } from '@/utils/ssrUtils';
-import { FriendStatus } from '@statsfm/statsfm.js';
+import { FriendStatus } from '@/utils/statsfm';
 import { event } from 'nextjs-google-analytics';
 import { useScrollPercentage } from '@/hooks/use-scroll-percentage';
 import formatter from '@/utils/formatter';

src/pages/user/[id]/friends.tsx

@@ -4,7 +4,7 @@ import { Title } from '@/components/Title';
 import type { SSRProps } from '@/utils/ssrUtils';
 import { getApiInstance, fetchUser } from '@/utils/ssrUtils';
 import type { GetServerSideProps, NextPage } from 'next';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { useApi, useAuth } from '@/hooks';
 import { useEffect, useState } from 'react';
 import { Avatar } from '@/components/Avatar';

src/pages/user/[id]/streams.tsx

@@ -4,7 +4,7 @@ import { getApiInstance, fetchUser } from '@/utils/ssrUtils';
 import type { GetServerSideProps, NextPage } from 'next';
 import Link from 'next/link';
 import { MdChevronLeft, MdDiscFull, MdVisibilityOff } from 'react-icons/md';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 import { Title } from '@/components/Title';
 import { Section } from '@/components/Section/Section';
 import { useApi } from '@/hooks';

src/utils/clocks.ts

@@ -1,5 +1,5 @@
 import { type Props } from 'react-apexcharts';
-import type * as statsfm from '@statsfm/statsfm.js';
+import type * as statsfm from '@/utils/statsfm';
 
 export const listeningClockTimes = [
   '00:00 - 01:00',