patch of display artist's top listeners · round #1 · pull #5 · rocksky.app/rocksky

+38

apps/api/lexicons/artist/getArtistListeners.json

···

       1
       1
       +
       {

     

       2
       2
       +
         "lexicon": 1,

     

       3
       3
       +
         "id": "app.rocksky.artist.getArtistListeners",

     

       4
       4
       +
         "defs": {

     

       5
       5
       +
           "main": {

     

       6
       6
       +
             "type": "query",

     

       7
       7
       +
             "description": "Get artist listeners",

     

       8
       8
       +
             "parameters": {

     

       9
       9
       +
               "type": "params",

     

       10
       10
       +
               "required": [

     

       11
       11
       +
                 "uri"

     

       12
       12
       +
               ],

     

       13
       13
       +
               "properties": {

     

       14
       14
       +
                 "uri": {

     

       15
       15
       +
                   "type": "string",

     

       16
       16
       +
                   "description": "The URI of the artist to retrieve listeners from",

     

       17
       17
       +
                   "format": "at-uri"

     

       18
       18
       +
                 }

     

       19
       19
       +
               }

     

       20
       20
       +
             },

     

       21
       21
       +
             "output": {

     

       22
       22
       +
               "encoding": "application/json",

     

       23
       23
       +
               "schema": {

     

       24
       24
       +
                 "type": "object",

     

       25
       25
       +
                 "properties": {

     

       26
       26
       +
                   "listeners": {

     

       27
       27
       +
                     "type": "array",

     

       28
       28
       +
                     "items": {

     

       29
       29
       +
                       "type": "ref",

     

       30
       30
       +
                       "ref": "app.rocksky.artist.defs#listenerViewBasic"

     

       31
       31
       +
                     }

     

       32
       32
       +
                   }

     

       33
       33
       +
                 }

     

       34
       34
       +
               }

     

       35
       35
       +
             }

     

       36
       36
       +
           }

     

       37
       37
       +
         }

     

       38
       38
       +
       }

+33

apps/api/pkl/defs/artist/getArtistListeners.pkl

···

       1
       1
       +
       amends  "../../schema/lexicon.pkl"

     

       2
       2
       +
       

     

       3
       3
       +
       lexicon = 1

     

       4
       4
       +
       id = "app.rocksky.artist.getArtistListeners"

     

       5
       5
       +
       defs = new Mapping<String, Query> {

     

       6
       6
       +
         ["main"] {

     

       7
       7
       +
           type = "query"

     

       8
       8
       +
           description = "Get artist listeners"

     

       9
       9
       +
           parameters = new Params {

     

       10
       10
       +
             required = List("uri")

     

       11
       11
       +
             properties {

     

       12
       12
       +
               ["uri"] = new StringType {

     

       13
       13
       +
                 description = "The URI of the artist to retrieve listeners from"

     

       14
       14
       +
                 format = "at-uri"

     

       15
       15
       +
               }

     

       16
       16
       +
             }

     

       17
       17
       +
           }

     

       18
       18
       +
           output {

     

       19
       19
       +
             encoding = "application/json"

     

       20
       20
       +
             schema = new ObjectType {

     

       21
       21
       +
               type = "object"

     

       22
       22
       +
               properties = new Mapping<String, Array> {

     

       23
       23
       +
                 ["listeners"] = new Array {

     

       24
       24
       +
                   type = "array"

     

       25
       25
       +
                   items = new Ref {

     

       26
       26
       +
                     ref = "app.rocksky.artist.defs#listenerViewBasic"

     

       27
       27
       +
                   }

     

       28
       28
       +
                 }

     

       29
       29
       +
               }

     

       30
       30
       +
             }

     

       31
       31
       +
           }

     

       32
       32
       +
         }

     

       33
       33
       +
       }

+12

apps/api/src/lexicon/index.ts

···

       25
       25
        
       import type * as AppRockskyApikeyUpdateApikey from './types/app/rocksky/apikey/updateApikey'

     

       26
       26
        
       import type * as AppRockskyArtistGetArtistAlbums from './types/app/rocksky/artist/getArtistAlbums'

     

       27
       27
        
       import type * as AppRockskyArtistGetArtist from './types/app/rocksky/artist/getArtist'

     

       28
       28
       +
       import type * as AppRockskyArtistGetArtistListeners from './types/app/rocksky/artist/getArtistListeners'

     

       28
       29
        
       import type * as AppRockskyArtistGetArtists from './types/app/rocksky/artist/getArtists'

     

       29
       30
        
       import type * as AppRockskyArtistGetArtistTracks from './types/app/rocksky/artist/getArtistTracks'

     

       30
       31
        
       import type * as AppRockskyChartsGetScrobblesChart from './types/app/rocksky/charts/getScrobblesChart'

     
···

       358
       359
        
           return this._server.xrpc.method(nsid, cfg)

     

       359
       360
        
         }

     

       360
       361
        
       

     

       362
       362
       +
         getArtistListeners<AV extends AuthVerifier>(

     

       363
       363
       +
           cfg: ConfigOf<

     

       364
       364
       +
             AV,

     

       365
       365
       +
             AppRockskyArtistGetArtistListeners.Handler<ExtractAuth<AV>>,

     

       366
       366
       +
             AppRockskyArtistGetArtistListeners.HandlerReqCtx<ExtractAuth<AV>>

     

       367
       367
       +
           >,

     

       368
       368
       +
         ) {

     

       369
       369
       +
           const nsid = 'app.rocksky.artist.getArtistListeners' // @ts-ignore

     

       370
       370
       +
           return this._server.xrpc.method(nsid, cfg)

     

       371
       371
       +
         }

     

       372
       372
       +
       

     

       361
       373
        
         getArtists<AV extends AuthVerifier>(

     

       362
       374
        
           cfg: ConfigOf<

     

       363
       375
        
             AV,

+48

apps/api/src/lexicon/types/app/rocksky/artist/getArtistListeners.ts

···

       1
       1
       +
       /**

     

       2
       2
       +
        * GENERATED CODE - DO NOT MODIFY

     

       3
       3
       +
        */

     

       4
       4
       +
       import type express from 'express'

     

       5
       5
       +
       import { ValidationResult, BlobRef } from '@atproto/lexicon'

     

       6
       6
       +
       import { lexicons } from '../../../../lexicons'

     

       7
       7
       +
       import { isObj, hasProp } from '../../../../util'

     

       8
       8
       +
       import { CID } from 'multiformats/cid'

     

       9
       9
       +
       import type { HandlerAuth, HandlerPipeThrough } from '@atproto/xrpc-server'

     

       10
       10
       +
       import type * as AppRockskyArtistDefs from './defs'

     

       11
       11
       +
       

     

       12
       12
       +
       export interface QueryParams {

     

       13
       13
       +
         /** The URI of the artist to retrieve listeners from */

     

       14
       14
       +
         uri: string

     

       15
       15
       +
       }

     

       16
       16
       +
       

     

       17
       17
       +
       export type InputSchema = undefined

     

       18
       18
       +
       

     

       19
       19
       +
       export interface OutputSchema {

     

       20
       20
       +
         listeners?: AppRockskyArtistDefs.ListenerViewBasic[]

     

       21
       21
       +
         [k: string]: unknown

     

       22
       22
       +
       }

     

       23
       23
       +
       

     

       24
       24
       +
       export type HandlerInput = undefined

     

       25
       25
       +
       

     

       26
       26
       +
       export interface HandlerSuccess {

     

       27
       27
       +
         encoding: 'application/json'

     

       28
       28
       +
         body: OutputSchema

     

       29
       29
       +
         headers?: { [key: string]: string }

     

       30
       30
       +
       }

     

       31
       31
       +
       

     

       32
       32
       +
       export interface HandlerError {

     

       33
       33
       +
         status: number

     

       34
       34
       +
         message?: string

     

       35
       35
       +
       }

     

       36
       36
       +
       

     

       37
       37
       +
       export type HandlerOutput = HandlerError | HandlerSuccess | HandlerPipeThrough

     

       38
       38
       +
       export type HandlerReqCtx<HA extends HandlerAuth = never> = {

     

       39
       39
       +
         auth: HA

     

       40
       40
       +
         params: QueryParams

     

       41
       41
       +
         input: HandlerInput

     

       42
       42
       +
         req: express.Request

     

       43
       43
       +
         res: express.Response

     

       44
       44
       +
         resetRouteRateLimits: () => Promise<void>

     

       45
       45
       +
       }

     

       46
       46
       +
       export type Handler<HA extends HandlerAuth = never> = (

     

       47
       47
       +
         ctx: HandlerReqCtx<HA>,

     

       48
       48
       +
       ) => Promise<HandlerOutput> | HandlerOutput

+126 -1

crates/analytics/src/handlers/artists.rs

···

       3
       3
        
       use crate::types::{

     

       4
       4
        
           album::Album,

     

       5
       5
        
           artist::{

     

       6
       6
       -
               Artist, GetArtistAlbumsParams, GetArtistTracksParams, GetArtistsParams, GetTopArtistsParams,

     

       6
       6
       +
               Artist, ArtistListener, GetArtistAlbumsParams, GetArtistListenersParams,

     

       7
       7
       +
               GetArtistTracksParams, GetArtistsParams, GetTopArtistsParams,

     

       7
       8
        
           },

     

       8
       9
        
           track::Track,

     

       9
       10
        
       };

     
···

       364
       365
        
           let albums: Result<Vec<_>, _> = albums.collect();

     

       365
       366
        
           Ok(HttpResponse::Ok().json(albums?))

     

       366
       367
        
       }

     

       368
       368
       +
       

     

       369
       369
       +
       pub async fn get_artist_listeners(

     

       370
       370
       +
           payload: &mut web::Payload,

     

       371
       371
       +
           _req: &HttpRequest,

     

       372
       372
       +
           conn: Arc<Mutex<Connection>>,

     

       373
       373
       +
       ) -> Result<HttpResponse, Error> {

     

       374
       374
       +
           let body = read_payload!(payload);

     

       375
       375
       +
           let params = serde_json::from_slice::<GetArtistListenersParams>(&body)?;

     

       376
       376
       +
           let pagination = params.pagination.unwrap_or_default();

     

       377
       377
       +
           let offset = pagination.skip.unwrap_or(0);

     

       378
       378
       +
           let limit = pagination.take.unwrap_or(10);

     

       379
       379
       +
       

     

       380
       380
       +
           let conn = conn.lock().unwrap();

     

       381
       381
       +
           let mut stmt =

     

       382
       382
       +
               conn.prepare("SELECT id, name, uri FROM artists WHERE id = ? OR uri = ? OR name = ?")?;

     

       383
       383
       +
           let artist = stmt.query_row(

     

       384
       384
       +
               [&params.artist_id, &params.artist_id, &params.artist_id],

     

       385
       385
       +
               |row| {

     

       386
       386
       +
                   Ok(crate::types::artist::ArtistBasic {

     

       387
       387
       +
                       id: row.get(0)?,

     

       388
       388
       +
                       name: row.get(1)?,

     

       389
       389
       +
                       uri: row.get(2)?,

     

       390
       390
       +
                   })

     

       391
       391
       +
               },

     

       392
       392
       +
           )?;

     

       393
       393
       +
       

     

       394
       394
       +
           if artist.id.is_empty() {

     

       395
       395
       +
               return Ok(HttpResponse::Ok().json(Vec::<ArtistListener>::new()));

     

       396
       396
       +
           }

     

       397
       397
       +
       

     

       398
       398
       +
           let mut stmt = conn.prepare(

     

       399
       399
       +
               r#"

     

       400
       400
       +
               WITH user_track_counts AS (

     

       401
       401
       +
               SELECT

     

       402
       402
       +
                   s.user_id,

     

       403
       403
       +
                   s.track_id,

     

       404
       404
       +
                   t.artist,

     

       405
       405
       +
                   t.title as track_title,

     

       406
       406
       +
                   t.uri as track_uri,

     

       407
       407
       +
                   COUNT(*) as play_count

     

       408
       408
       +
               FROM scrobbles s

     

       409
       409
       +
               JOIN tracks t ON s.track_id = t.id

     

       410
       410
       +
               WHERE t.artist = ?

     

       411
       411
       +
               GROUP BY s.user_id, s.track_id, t.artist, t.title, t.uri

     

       412
       412
       +
           ),

     

       413
       413
       +
           user_top_tracks AS (

     

       414
       414
       +
               SELECT

     

       415
       415
       +
                   user_id,

     

       416
       416
       +
                   artist,

     

       417
       417
       +
                   track_id,

     

       418
       418
       +
                   track_title,

     

       419
       419
       +
                   track_uri,

     

       420
       420
       +
                   play_count,

     

       421
       421
       +
                   ROW_NUMBER() OVER (PARTITION BY user_id ORDER BY play_count DESC, track_title) as rn

     

       422
       422
       +
               FROM user_track_counts

     

       423
       423
       +
           ),

     

       424
       424
       +
           artist_listener_counts AS (

     

       425
       425
       +
               SELECT

     

       426
       426
       +
                   user_id,

     

       427
       427
       +
                   artist,

     

       428
       428
       +
                   SUM(play_count) as total_artist_plays

     

       429
       429
       +
               FROM user_track_counts

     

       430
       430
       +
               GROUP BY user_id, artist

     

       431
       431
       +
           ),

     

       432
       432
       +
           top_artist_listeners AS (

     

       433
       433
       +
               SELECT

     

       434
       434
       +
                   user_id,

     

       435
       435
       +
                   artist,

     

       436
       436
       +
                   total_artist_plays,

     

       437
       437
       +
                   ROW_NUMBER() OVER (ORDER BY total_artist_plays DESC) as listener_rank

     

       438
       438
       +
               FROM artist_listener_counts

     

       439
       439
       +
           ),

     

       440
       440
       +
           paginated_listeners AS (

     

       441
       441
       +
               SELECT

     

       442
       442
       +
                   user_id,

     

       443
       443
       +
                   artist,

     

       444
       444
       +
                   total_artist_plays,

     

       445
       445
       +
                   listener_rank

     

       446
       446
       +
               FROM top_artist_listeners

     

       447
       447
       +
               ORDER BY listener_rank

     

       448
       448
       +
               LIMIT ? OFFSET ?

     

       449
       449
       +
           )

     

       450
       450
       +
           SELECT

     

       451
       451
       +
               pl.artist,

     

       452
       452
       +
               pl.listener_rank,

     

       453
       453
       +
               u.id as user_id,

     

       454
       454
       +
               u.display_name,

     

       455
       455
       +
               u.did,

     

       456
       456
       +
               u.handle,

     

       457
       457
       +
               u.avatar,

     

       458
       458
       +
               pl.total_artist_plays,

     

       459
       459
       +
               utt.track_title as most_played_track,

     

       460
       460
       +
               utt.track_uri as most_played_track_uri,

     

       461
       461
       +
               utt.play_count as track_play_count

     

       462
       462
       +
           FROM paginated_listeners pl

     

       463
       463
       +
           JOIN users u ON pl.user_id = u.id

     

       464
       464
       +
           JOIN user_top_tracks utt ON pl.user_id = utt.user_id

     

       465
       465
       +
               AND utt.rn = 1

     

       466
       466
       +
           ORDER BY pl.listener_rank;

     

       467
       467
       +
           "#,

     

       468
       468
       +
           )?;

     

       469
       469
       +
       

     

       470
       470
       +
           let listeners = stmt.query_map(

     

       471
       471
       +
               [&artist.name, &limit.to_string(), &offset.to_string()],

     

       472
       472
       +
               |row| {

     

       473
       473
       +
                   Ok(ArtistListener {

     

       474
       474
       +
                       artist: row.get(0)?,

     

       475
       475
       +
                       listener_rank: row.get(1)?,

     

       476
       476
       +
                       user_id: row.get(2)?,

     

       477
       477
       +
                       display_name: row.get(3)?,

     

       478
       478
       +
                       did: row.get(4)?,

     

       479
       479
       +
                       handle: row.get(5)?,

     

       480
       480
       +
                       avatar: row.get(6)?,

     

       481
       481
       +
                       total_artist_plays: row.get(7)?,

     

       482
       482
       +
                       most_played_track: row.get(8)?,

     

       483
       483
       +
                       most_played_track_uri: row.get(9)?,

     

       484
       484
       +
                       track_play_count: row.get(10)?,

     

       485
       485
       +
                   })

     

       486
       486
       +
               },

     

       487
       487
       +
           )?;

     

       488
       488
       +
       

     

       489
       489
       +
           let listeners: Result<Vec<_>, _> = listeners.collect();

     

       490
       490
       +
           Ok(HttpResponse::Ok().json(listeners?))

     

       491
       491
       +
       }

crates/analytics/src/handlers/mod.rs

···

       12
       12
        
       };

     

       13
       13
        
       use tracks::{get_loved_tracks, get_top_tracks, get_tracks};

     

       14
       14
        
       

     

       15
       15
       +
       use crate::handlers::artists::get_artist_listeners;

     

       16
       16
       +
       

     

       15
       17
        
       pub mod albums;

     

       16
       18
        
       pub mod artists;

     

       17
       19
        
       pub mod scrobbles;

     
···

       58
       60
        
               "library.getAlbumTracks" => get_album_tracks(payload, req, conn.clone()).await,

     

       59
       61
        
               "library.getArtistAlbums" => get_artist_albums(payload, req, conn.clone()).await,

     

       60
       62
        
               "library.getArtistTracks" => get_artist_tracks(payload, req, conn.clone()).await,

     

       63
       63
       +
               "library.getArtistListeners" => get_artist_listeners(payload, req, conn.clone()).await,

     

       61
       64
        
               _ => return Err(anyhow::anyhow!("Method not found")),

     

       62
       65
        
           }

     

       63
       66
        
       }

+83

apps/api/src/xrpc/app/rocksky/artist/getArtistListeners.ts

···

       1
       1
       +
       import type { Context } from "context";

     

       2
       2
       +
       import { Effect, pipe } from "effect";

     

       3
       3
       +
       import type { Server } from "lexicon";

     

       4
       4
       +
       import type { ListenerViewBasic } from "lexicon/types/app/rocksky/artist/defs";

     

       5
       5
       +
       import type { QueryParams } from "lexicon/types/app/rocksky/artist/getArtistListeners";

     

       6
       6
       +
       

     

       7
       7
       +
       export default function (server: Server, ctx: Context) {

     

       8
       8
       +
         const getArtistListeners = (params) =>

     

       9
       9
       +
           pipe(

     

       10
       10
       +
             { params, ctx },

     

       11
       11
       +
             retrieve,

     

       12
       12
       +
             Effect.flatMap(presentation),

     

       13
       13
       +
             Effect.retry({ times: 3 }),

     

       14
       14
       +
             Effect.timeout("10 seconds"),

     

       15
       15
       +
             Effect.catchAll((err) => {

     

       16
       16
       +
               console.error(err);

     

       17
       17
       +
               return Effect.succeed({ listeners: [] });

     

       18
       18
       +
             })

     

       19
       19
       +
           );

     

       20
       20
       +
         server.app.rocksky.artist.getArtistListeners({

     

       21
       21
       +
           handler: async ({ params }) => {

     

       22
       22
       +
             const result = await Effect.runPromise(getArtistListeners(params));

     

       23
       23
       +
             return {

     

       24
       24
       +
               encoding: "application/json",

     

       25
       25
       +
               body: result,

     

       26
       26
       +
             };

     

       27
       27
       +
           },

     

       28
       28
       +
         });

     

       29
       29
       +
       }

     

       30
       30
       +
       

     

       31
       31
       +
       const retrieve = ({

     

       32
       32
       +
         params,

     

       33
       33
       +
         ctx,

     

       34
       34
       +
       }: {

     

       35
       35
       +
         params: QueryParams;

     

       36
       36
       +
         ctx: Context;

     

       37
       37
       +
       }): Effect.Effect<{ data: ArtistListener[] }, Error> => {

     

       38
       38
       +
         return Effect.tryPromise({

     

       39
       39
       +
           try: () =>

     

       40
       40
       +
             ctx.analytics.post("library.getArtistListeners", {

     

       41
       41
       +
               artist_id: params.uri,

     

       42
       42
       +
             }),

     

       43
       43
       +
           catch: (error) =>

     

       44
       44
       +
             new Error(`Failed to retrieve artist's listeners: ${error}`),

     

       45
       45
       +
         });

     

       46
       46
       +
       };

     

       47
       47
       +
       

     

       48
       48
       +
       const presentation = ({

     

       49
       49
       +
         data,

     

       50
       50
       +
       }: {

     

       51
       51
       +
         data: ArtistListener[];

     

       52
       52
       +
       }): Effect.Effect<{ listeners: ListenerViewBasic[] }, never> => {

     

       53
       53
       +
         return Effect.sync(() => ({

     

       54
       54
       +
           listeners: data.map((item) => ({

     

       55
       55
       +
             id: item.user_id,

     

       56
       56
       +
             did: item.did,

     

       57
       57
       +
             handle: item.handle,

     

       58
       58
       +
             displayName: item.display_name,

     

       59
       59
       +
             avatar: item.avatar,

     

       60
       60
       +
             mostListenedSong: {

     

       61
       61
       +
               title: item.most_played_track,

     

       62
       62
       +
               uri: item.most_played_track_uri,

     

       63
       63
       +
               playCount: item.track_play_count,

     

       64
       64
       +
             },

     

       65
       65
       +
             totalPlays: item.total_artist_plays,

     

       66
       66
       +
             rank: item.listener_rank,

     

       67
       67
       +
           })),

     

       68
       68
       +
         }));

     

       69
       69
       +
       };

     

       70
       70
       +
       

     

       71
       71
       +
       type ArtistListener = {

     

       72
       72
       +
         artist: string;

     

       73
       73
       +
         avatar: string;

     

       74
       74
       +
         did: string;

     

       75
       75
       +
         display_name: string;

     

       76
       76
       +
         handle: string;

     

       77
       77
       +
         listener_rank: number;

     

       78
       78
       +
         most_played_track: string;

     

       79
       79
       +
         most_played_track_uri: string;

     

       80
       80
       +
         total_artist_plays: number;

     

       81
       81
       +
         track_play_count: number;

     

       82
       82
       +
         user_id: string;

     

       83
       83
       +
       };

apps/api/src/xrpc/index.ts

···

       16
       16
        
       import updateApikey from "./app/rocksky/apikey/updateApikey";

     

       17
       17
        
       import getArtist from "./app/rocksky/artist/getArtist";

     

       18
       18
        
       import getArtistAlbums from "./app/rocksky/artist/getArtistAlbums";

     

       19
       19
       +
       import getArtistListeners from "./app/rocksky/artist/getArtistListeners";

     

       19
       20
        
       import getArtists from "./app/rocksky/artist/getArtists";

     

       20
       21
        
       import getArtistTracks from "./app/rocksky/artist/getArtistTracks";

     

       21
       22
        
       import getScrobblesChart from "./app/rocksky/charts/getScrobblesChart";

     
···

       91
       92
        
         getArtist(server, ctx);

     

       92
       93
        
         getArtistAlbums(server, ctx);

     

       93
       94
        
         getArtists(server, ctx);

     

       95
       95
       +
         getArtistListeners(server, ctx);

     

       94
       96
        
         getArtistTracks(server, ctx);

     

       95
       97
        
         getScrobblesChart(server, ctx);

     

       96
       98
        
         downloadFileFromDropbox(server, ctx);

+13 -5

apps/web/src/api/library.ts

···

       29
       29
        
       

     

       30
       30
        
       export const getArtistTracks = async (

     

       31
       31
        
         uri: string,

     

       32
       32
       -
         limit = 10,

     

       32
       32
       +
         limit = 10

     

       33
       33
        
       ): Promise<

     

       34
       34
        
         {

     

       35
       35
        
           id: string;

     
···

       45
       45
        
       > => {

     

       46
       46
        
         const response = await client.get(

     

       47
       47
        
           "/xrpc/app.rocksky.artist.getArtistTracks",

     

       48
       48
       -
           { params: { uri, limit } },

     

       48
       48
       +
           { params: { uri, limit } }

     

       49
       49
        
         );

     

       50
       50
        
         return response.data.tracks;

     

       51
       51
        
       };

     

       52
       52
        
       

     

       53
       53
        
       export const getArtistAlbums = async (

     

       54
       54
        
         uri: string,

     

       55
       55
       -
         limit = 10,

     

       55
       55
       +
         limit = 10

     

       56
       56
        
       ): Promise<

     

       57
       57
        
         {

     

       58
       58
        
           id: string;

     
···

       65
       65
        
       > => {

     

       66
       66
        
         const response = await client.get(

     

       67
       67
        
           "/xrpc/app.rocksky.artist.getArtistAlbums",

     

       68
       68
       -
           { params: { uri, limit } },

     

       68
       68
       +
           { params: { uri, limit } }

     

       69
       69
        
         );

     

       70
       70
        
         return response.data.albums;

     

       71
       71
        
       };

     
···

       96
       96
        
           "/xrpc/app.rocksky.actor.getActorLovedSongs",

     

       97
       97
        
           {

     

       98
       98
        
             params: { did, limit, offset },

     

       99
       99
       -
           },

     

       99
       99
       +
           }

     

       100
       100
        
         );

     

       101
       101
        
         return response.data.tracks;

     

       102
       102
        
       };

     
···

       114
       114
        
         });

     

       115
       115
        
         return response.data;

     

       116
       116
        
       };

     

       117
       117
       +
       

     

       118
       118
       +
       export const getArtistListeners = async (uri: string, limit: number) => {

     

       119
       119
       +
         const response = await client.get(

     

       120
       120
       +
           "/xrpc/app.rocksky.artist.getArtistListeners",

     

       121
       121
       +
           { params: { uri, limit } }

     

       122
       122
       +
         );

     

       123
       123
       +
         return response.data;

     

       124
       124
       +
       };

+81 -72

apps/web/src/hooks/useLibrary.tsx

···

       1
       1
        
       import { useQuery } from "@tanstack/react-query";

     

       2
       2
        
       import {

     

       3
       3
       -
         getAlbum,

     

       4
       4
       -
         getAlbums,

     

       5
       5
       -
         getArtist,

     

       6
       6
       -
         getArtistAlbums,

     

       7
       7
       -
         getArtists,

     

       8
       8
       -
         getArtistTracks,

     

       9
       9
       -
         getLovedTracks,

     

       10
       10
       -
         getSongByUri,

     

       11
       11
       -
         getTracks,

     

       3
       3
       +
       	getAlbum,

     

       4
       4
       +
       	getAlbums,

     

       5
       5
       +
       	getArtist,

     

       6
       6
       +
       	getArtistAlbums,

     

       7
       7
       +
       	getArtistListeners,

     

       8
       8
       +
       	getArtists,

     

       9
       9
       +
       	getArtistTracks,

     

       10
       10
       +
       	getLovedTracks,

     

       11
       11
       +
       	getSongByUri,

     

       12
       12
       +
       	getTracks,

     

       12
       13
        
       } from "../api/library";

     

       13
       14
        
       

     

       14
       15
        
       export const useSongByUriQuery = (uri: string) =>

     

       15
       15
       -
         useQuery({

     

       16
       16
       -
           queryKey: ["songByUri", uri],

     

       17
       17
       -
           queryFn: () => getSongByUri(uri),

     

       18
       18
       -
           enabled: !!uri,

     

       19
       19
       -
         });

     

       16
       16
       +
       	useQuery({

     

       17
       17
       +
       		queryKey: ["songByUri", uri],

     

       18
       18
       +
       		queryFn: () => getSongByUri(uri),

     

       19
       19
       +
       		enabled: !!uri,

     

       20
       20
       +
       	});

     

       20
       21
        
       

     

       21
       22
        
       export const useArtistTracksQuery = (uri: string, limit = 10) =>

     

       22
       22
       -
         useQuery({

     

       23
       23
       -
           queryKey: ["artistTracks", uri, limit],

     

       24
       24
       -
           queryFn: () => getArtistTracks(uri, limit),

     

       25
       25
       -
           enabled: !!uri,

     

       26
       26
       -
         });

     

       23
       23
       +
       	useQuery({

     

       24
       24
       +
       		queryKey: ["artistTracks", uri, limit],

     

       25
       25
       +
       		queryFn: () => getArtistTracks(uri, limit),

     

       26
       26
       +
       		enabled: !!uri,

     

       27
       27
       +
       	});

     

       27
       28
        
       

     

       28
       29
        
       export const useArtistAlbumsQuery = (uri: string, limit = 10) =>

     

       29
       29
       -
         useQuery({

     

       30
       30
       -
           queryKey: ["artistAlbums", uri, limit],

     

       31
       31
       -
           queryFn: () => getArtistAlbums(uri, limit),

     

       32
       32
       -
           enabled: !!uri,

     

       33
       33
       -
         });

     

       30
       30
       +
       	useQuery({

     

       31
       31
       +
       		queryKey: ["artistAlbums", uri, limit],

     

       32
       32
       +
       		queryFn: () => getArtistAlbums(uri, limit),

     

       33
       33
       +
       		enabled: !!uri,

     

       34
       34
       +
       	});

     

       34
       35
        
       

     

       35
       36
        
       export const useArtistsQuery = (did: string, offset = 0, limit = 30) =>

     

       36
       36
       -
         useQuery({

     

       37
       37
       -
           queryKey: ["artists", did, offset, limit],

     

       38
       38
       -
           queryFn: () => getArtists(did, offset, limit),

     

       39
       39
       -
           enabled: !!did,

     

       40
       40
       -
           select: (data) =>

     

       41
       41
       -
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       42
       42
       -
             data?.artists.map((x: any) => ({

     

       43
       43
       -
               ...x,

     

       44
       44
       -
               scrobbles: x.playCount,

     

       45
       45
       -
             })),

     

       46
       46
       -
         });

     

       37
       37
       +
       	useQuery({

     

       38
       38
       +
       		queryKey: ["artists", did, offset, limit],

     

       39
       39
       +
       		queryFn: () => getArtists(did, offset, limit),

     

       40
       40
       +
       		enabled: !!did,

     

       41
       41
       +
       		select: (data) =>

     

       42
       42
       +
       			// eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       43
       43
       +
       			data?.artists.map((x: any) => ({

     

       44
       44
       +
       				...x,

     

       45
       45
       +
       				scrobbles: x.playCount,

     

       46
       46
       +
       			})),

     

       47
       47
       +
       	});

     

       47
       48
        
       

     

       48
       49
        
       export const useAlbumsQuery = (did: string, offset = 0, limit = 12) =>

     

       49
       49
       -
         useQuery({

     

       50
       50
       -
           queryKey: ["albums", did, offset, limit],

     

       51
       51
       -
           queryFn: () => getAlbums(did, offset, limit),

     

       52
       52
       -
           enabled: !!did,

     

       53
       53
       -
           select: (data) =>

     

       54
       54
       -
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       55
       55
       -
             data?.albums.map((x: any) => ({

     

       56
       56
       -
               ...x,

     

       57
       57
       -
               scrobbles: x.playCount,

     

       58
       58
       -
             })),

     

       59
       59
       -
         });

     

       50
       50
       +
       	useQuery({

     

       51
       51
       +
       		queryKey: ["albums", did, offset, limit],

     

       52
       52
       +
       		queryFn: () => getAlbums(did, offset, limit),

     

       53
       53
       +
       		enabled: !!did,

     

       54
       54
       +
       		select: (data) =>

     

       55
       55
       +
       			// eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       56
       56
       +
       			data?.albums.map((x: any) => ({

     

       57
       57
       +
       				...x,

     

       58
       58
       +
       				scrobbles: x.playCount,

     

       59
       59
       +
       			})),

     

       60
       60
       +
       	});

     

       60
       61
        
       

     

       61
       62
        
       export const useTracksQuery = (did: string, offset = 0, limit = 20) =>

     

       62
       62
       -
         useQuery({

     

       63
       63
       -
           queryKey: ["tracks", did, offset, limit],

     

       64
       64
       -
           queryFn: () => getTracks(did, offset, limit),

     

       65
       65
       -
           enabled: !!did,

     

       66
       66
       -
           select: (data) =>

     

       67
       67
       -
             // eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       68
       68
       -
             data?.tracks.map((x: any) => ({

     

       69
       69
       -
               ...x,

     

       70
       70
       -
               scrobbles: x.playCount,

     

       71
       71
       -
             })),

     

       72
       72
       -
         });

     

       63
       63
       +
       	useQuery({

     

       64
       64
       +
       		queryKey: ["tracks", did, offset, limit],

     

       65
       65
       +
       		queryFn: () => getTracks(did, offset, limit),

     

       66
       66
       +
       		enabled: !!did,

     

       67
       67
       +
       		select: (data) =>

     

       68
       68
       +
       			// eslint-disable-next-line @typescript-eslint/no-explicit-any

     

       69
       69
       +
       			data?.tracks.map((x: any) => ({

     

       70
       70
       +
       				...x,

     

       71
       71
       +
       				scrobbles: x.playCount,

     

       72
       72
       +
       			})),

     

       73
       73
       +
       	});

     

       73
       74
        
       

     

       74
       75
        
       export const useLovedTracksQuery = (did: string, offset = 0, limit = 20) =>

     

       75
       75
       -
         useQuery({

     

       76
       76
       -
           queryKey: ["lovedTracks", did, offset, limit],

     

       77
       77
       -
           queryFn: () => getLovedTracks(did, offset, limit),

     

       78
       78
       -
           enabled: !!did,

     

       79
       79
       -
         });

     

       76
       76
       +
       	useQuery({

     

       77
       77
       +
       		queryKey: ["lovedTracks", did, offset, limit],

     

       78
       78
       +
       		queryFn: () => getLovedTracks(did, offset, limit),

     

       79
       79
       +
       		enabled: !!did,

     

       80
       80
       +
       	});

     

       80
       81
        
       

     

       81
       82
        
       export const useAlbumQuery = (did: string, rkey: string) =>

     

       82
       82
       -
         useQuery({

     

       83
       83
       -
           queryKey: ["album", did, rkey],

     

       84
       84
       -
           queryFn: () => getAlbum(did, rkey),

     

       85
       85
       -
           enabled: !!did && !!rkey,

     

       86
       86
       -
         });

     

       83
       83
       +
       	useQuery({

     

       84
       84
       +
       		queryKey: ["album", did, rkey],

     

       85
       85
       +
       		queryFn: () => getAlbum(did, rkey),

     

       86
       86
       +
       		enabled: !!did && !!rkey,

     

       87
       87
       +
       	});

     

       87
       88
        
       

     

       88
       89
        
       export const useArtistQuery = (did: string, rkey: string) =>

     

       89
       89
       -
         useQuery({

     

       90
       90
       -
           queryKey: ["artist", did, rkey],

     

       91
       91
       -
           queryFn: () => getArtist(did, rkey),

     

       92
       92
       -
           enabled: !!did && !!rkey,

     

       93
       93
       -
         });

     

       90
       90
       +
       	useQuery({

     

       91
       91
       +
       		queryKey: ["artist", did, rkey],

     

       92
       92
       +
       		queryFn: () => getArtist(did, rkey),

     

       93
       93
       +
       		enabled: !!did && !!rkey,

     

       94
       94
       +
       	});

     

       95
       95
       +
       

     

       96
       96
       +
       export const useArtistListenersQuery = (uri: string, limit = 10) =>

     

       97
       97
       +
       	useQuery({

     

       98
       98
       +
       		queryKey: ["artistListeners", uri, limit],

     

       99
       99
       +
       		queryFn: () => getArtistListeners(uri, limit),

     

       100
       100
       +
       		enabled: !!uri,

     

       101
       101
       +
       		select: (data) => data.listeners,

     

       102
       102
       +
       	});

+191 -188

apps/web/src/pages/artist/Artist.tsx

···

       10
       10
        
       import ArtistIcon from "../../components/Icons/Artist";

     

       11
       11
        
       import Shout from "../../components/Shout/Shout";

     

       12
       12
        
       import {

     

       13
       13
       -
         useArtistAlbumsQuery,

     

       14
       14
       -
         useArtistQuery,

     

       15
       15
       -
         useArtistTracksQuery,

     

       13
       13
       +
       	useArtistAlbumsQuery,

     

       14
       14
       +
       	useArtistListenersQuery,

     

       15
       15
       +
       	useArtistQuery,

     

       16
       16
       +
       	useArtistTracksQuery,

     

       16
       17
        
       } from "../../hooks/useLibrary";

     

       17
       18
        
       import Main from "../../layouts/Main";

     

       18
       19
        
       import Albums from "./Albums";

     

       20
       20
       +
       import ArtistListeners from "./ArtistListeners";

     

       19
       21
        
       import PopularSongs from "./PopularSongs";

     

       20
       22
        
       

     

       21
       23
        
       const Group = styled.div`

     
···

       26
       28
        
       `;

     

       27
       29
        
       

     

       28
       30
        
       const Artist = () => {

     

       29
       29
       -
         const { did, rkey } = useParams({ strict: false });

     

       30
       30
       -
       

     

       31
       31
       -
         const uri = `at://${did}/app.rocksky.artist/${rkey}`;

     

       32
       32
       -
         const artistResult = useArtistQuery(did!, rkey!);

     

       33
       33
       -
         const artistTracksResult = useArtistTracksQuery(uri);

     

       34
       34
       -
         const artistAlbumsResult = useArtistAlbumsQuery(uri);

     

       35
       35
       -
       

     

       36
       36
       -
         const artist = useAtomValue(artistAtom);

     

       37
       37
       -
         const setArtist = useSetAtom(artistAtom);

     

       38
       38
       -
         const [topTracks, setTopTracks] = useState<

     

       39
       39
       -
           {

     

       40
       40
       -
             id: string;

     

       41
       41
       -
             title: string;

     

       42
       42
       -
             artist: string;

     

       43
       43
       -
             albumArtist: string;

     

       44
       44
       -
             albumArt: string;

     

       45
       45
       -
             uri: string;

     

       46
       46
       -
             scrobbles: number;

     

       47
       47
       -
             albumUri?: string;

     

       48
       48
       -
             artistUri?: string;

     

       49
       49
       -
           }[]

     

       50
       50
       -
         >([]);

     

       51
       51
       -
         const [topAlbums, setTopAlbums] = useState<

     

       52
       52
       -
           {

     

       53
       53
       -
             id: string;

     

       54
       54
       -
             title: string;

     

       55
       55
       -
             artist: string;

     

       56
       56
       -
             albumArt: string;

     

       57
       57
       -
             artistUri: string;

     

       58
       58
       -
             uri: string;

     

       59
       59
       -
           }[]

     

       60
       60
       -
         >([]);

     

       61
       61
       -
       

     

       62
       62
       -
         useEffect(() => {

     

       63
       63
       -
           if (artistResult.isLoading || artistResult.isError) {

     

       64
       64
       -
             return;

     

       65
       65
       -
           }

     

       66
       66
       -
       

     

       67
       67
       -
           if (!artistResult.data || !did) {

     

       68
       68
       -
             return;

     

       69
       69
       -
           }

     

       70
       70
       -
       

     

       71
       71
       -
           setArtist({

     

       72
       72
       -
             id: artistResult.data.id,

     

       73
       73
       -
             name: artistResult.data.name,

     

       74
       74
       -
             born: artistResult.data.born,

     

       75
       75
       -
             bornIn: artistResult.data.bornIn,

     

       76
       76
       -
             died: artistResult.data.died,

     

       77
       77
       -
             listeners: artistResult.data.uniqueListeners,

     

       78
       78
       -
             scrobbles: artistResult.data.playCount,

     

       79
       79
       -
             picture: artistResult.data.picture,

     

       80
       80
       -
             tags: artistResult.data.tags,

     

       81
       81
       -
             uri: artistResult.data.uri,

     

       82
       82
       -
             spotifyLink: artistResult.data.spotifyLink,

     

       83
       83
       -
           });

     

       84
       84
       -
           // eslint-disable-next-line react-hooks/exhaustive-deps

     

       85
       85
       -
         }, [artistResult.data, artistResult.isLoading, artistResult.isError, did]);

     

       86
       86
       -
       

     

       87
       87
       -
         useEffect(() => {

     

       88
       88
       -
           if (artistTracksResult.isLoading || artistTracksResult.isError) {

     

       89
       89
       -
             return;

     

       90
       90
       -
           }

     

       91
       91
       -
       

     

       92
       92
       -
           if (!artistTracksResult.data || !did) {

     

       93
       93
       -
             return;

     

       94
       94
       -
           }

     

       95
       95
       -
       

     

       96
       96
       -
           setTopTracks(

     

       97
       97
       -
             artistTracksResult.data.map((track) => ({

     

       98
       98
       -
               ...track,

     

       99
       99
       -
               scrobbles: track.playCount || 1,

     

       100
       100
       -
             })),

     

       101
       101
       -
           );

     

       102
       102
       -
         }, [

     

       103
       103
       -
           artistTracksResult.data,

     

       104
       104
       -
           artistTracksResult.isLoading,

     

       105
       105
       -
           artistTracksResult.isError,

     

       106
       106
       -
           did,

     

       107
       107
       -
         ]);

     

       108
       108
       -
       

     

       109
       109
       -
         useEffect(() => {

     

       110
       110
       -
           if (artistAlbumsResult.isLoading || artistAlbumsResult.isError) {

     

       111
       111
       -
             return;

     

       112
       112
       -
           }

     

       113
       113
       -
       

     

       114
       114
       -
           if (!artistAlbumsResult.data || !did) {

     

       115
       115
       -
             return;

     

       116
       116
       -
           }

     

       117
       117
       -
       

     

       118
       118
       -
           setTopAlbums(artistAlbumsResult.data);

     

       119
       119
       -
         }, [

     

       120
       120
       -
           artistAlbumsResult.data,

     

       121
       121
       -
           artistAlbumsResult.isLoading,

     

       122
       122
       -
           artistAlbumsResult.isError,

     

       123
       123
       -
           did,

     

       124
       124
       -
         ]);

     

       125
       125
       -
       

     

       126
       126
       -
         const loading =

     

       127
       127
       -
           artistResult.isLoading ||

     

       128
       128
       -
           artistTracksResult.isLoading ||

     

       129
       129
       -
           artistAlbumsResult.isLoading;

     

       130
       130
       -
         return (

     

       131
       131
       -
           <Main>

     

       132
       132
       -
             <div className="pb-[100px] pt-[50px]">

     

       133
       133
       -
               <Group>

     

       134
       134
       -
                 <div className="mr-[20px]">

     

       135
       135
       -
                   {artist?.picture && !loading && (

     

       136
       136
       -
                     <Avatar name={artist?.name} src={artist?.picture} size="150px" />

     

       137
       137
       -
                   )}

     

       138
       138
       -
                   {!artist?.picture && !loading && (

     

       139
       139
       -
                     <div className="w-[150px] h-[150px] rounded-[80px] bg-[rgba(243, 243, 243, 0.725)] flex items-center justify-center">

     

       140
       140
       -
                       <div

     

       141
       141
       -
                         style={{

     

       142
       142
       -
                           height: 60,

     

       143
       143
       -
                           width: 60,

     

       144
       144
       -
                         }}

     

       145
       145
       -
                       >

     

       146
       146
       -
                         <ArtistIcon color="rgba(66, 87, 108, 0.65)" />

     

       147
       147
       -
                       </div>

     

       148
       148
       -
                     </div>

     

       149
       149
       -
                   )}

     

       150
       150
       -
                 </div>

     

       151
       151
       -
                 {artist && !loading && (

     

       152
       152
       -
                   <div style={{ flex: 1 }}>

     

       153
       153
       -
                     <HeadingMedium

     

       154
       154
       -
                       marginTop={"20px"}

     

       155
       155
       -
                       marginBottom={0}

     

       156
       156
       -
                       className="!text-[var(--color-text)]"

     

       157
       157
       -
                     >

     

       158
       158
       -
                       {artist?.name}

     

       159
       159
       -
                     </HeadingMedium>

     

       160
       160
       -
                     <div className="mt-[20px] flex flex-row">

     

       161
       161
       -
                       <div className="mr-[20px]">

     

       162
       162
       -
                         <LabelMedium

     

       163
       163
       -
                           margin={0}

     

       164
       164
       -
                           className="!text-[var(--color-text-muted)]"

     

       165
       165
       -
                         >

     

       166
       166
       -
                           Listeners

     

       167
       167
       -
                         </LabelMedium>

     

       168
       168
       -
                         <HeadingXSmall

     

       169
       169
       -
                           margin={0}

     

       170
       170
       -
                           className="!text-[var(--color-text)]"

     

       171
       171
       -
                         >

     

       172
       172
       -
                           {numeral(artist?.listeners).format("0,0")}

     

       173
       173
       -
                         </HeadingXSmall>

     

       174
       174
       -
                       </div>

     

       175
       175
       -
                       <div>

     

       176
       176
       -
                         <LabelMedium

     

       177
       177
       -
                           margin={0}

     

       178
       178
       -
                           className="!text-[var(--color-text-muted)]"

     

       179
       179
       -
                         >

     

       180
       180
       -
                           Scrobbles

     

       181
       181
       -
                         </LabelMedium>

     

       182
       182
       -
                         <HeadingXSmall

     

       183
       183
       -
                           margin={0}

     

       184
       184
       -
                           className="!text-[var(--color-text)]"

     

       185
       185
       -
                         >

     

       186
       186
       -
                           {numeral(artist?.scrobbles).format("0,0")}

     

       187
       187
       -
                         </HeadingXSmall>

     

       188
       188
       -
                       </div>

     

       189
       189
       -
                       <div className="flex items-center justify-end flex-1 mr-[10px]">

     

       190
       190
       -
                         <a

     

       191
       191
       -
                           href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}

     

       192
       192
       -
                           target="_blank"

     

       193
       193
       -
                           className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"

     

       194
       194
       -
                         >

     

       195
       195
       -
                           <ExternalLink

     

       196
       196
       -
                             size={24}

     

       197
       197
       -
                             className="mr-[10px] text-[var(--color-text)]"

     

       198
       198
       -
                           />

     

       199
       199
       -
                           View on PDSls

     

       200
       200
       -
                         </a>

     

       201
       201
       -
                       </div>

     

       202
       202
       -
                     </div>

     

       203
       203
       -
                   </div>

     

       204
       204
       -
                 )}

     

       205
       205
       -
               </Group>

     

       206
       206
       -
       

     

       207
       207
       -
               <PopularSongs topTracks={topTracks} />

     

       208
       208
       -
               <Albums topAlbums={topAlbums} />

     

       209
       209
       -
       

     

       210
       210
       -
               <Shout type="artist" />

     

       211
       211
       -
             </div>

     

       212
       212
       -
           </Main>

     

       213
       213
       -
         );

     

       31
       31
       +
       	const { did, rkey } = useParams({ strict: false });

     

       32
       32
       +
       

     

       33
       33
       +
       	const uri = `at://${did}/app.rocksky.artist/${rkey}`;

     

       34
       34
       +
       	const artistResult = useArtistQuery(did!, rkey!);

     

       35
       35
       +
       	const artistTracksResult = useArtistTracksQuery(uri);

     

       36
       36
       +
       	const artistAlbumsResult = useArtistAlbumsQuery(uri);

     

       37
       37
       +
       	const artistListenersResult = useArtistListenersQuery(uri);

     

       38
       38
       +
       

     

       39
       39
       +
       	const artist = useAtomValue(artistAtom);

     

       40
       40
       +
       	const setArtist = useSetAtom(artistAtom);

     

       41
       41
       +
       	const [topTracks, setTopTracks] = useState<

     

       42
       42
       +
       		{

     

       43
       43
       +
       			id: string;

     

       44
       44
       +
       			title: string;

     

       45
       45
       +
       			artist: string;

     

       46
       46
       +
       			albumArtist: string;

     

       47
       47
       +
       			albumArt: string;

     

       48
       48
       +
       			uri: string;

     

       49
       49
       +
       			scrobbles: number;

     

       50
       50
       +
       			albumUri?: string;

     

       51
       51
       +
       			artistUri?: string;

     

       52
       52
       +
       		}[]

     

       53
       53
       +
       	>([]);

     

       54
       54
       +
       	const [topAlbums, setTopAlbums] = useState<

     

       55
       55
       +
       		{

     

       56
       56
       +
       			id: string;

     

       57
       57
       +
       			title: string;

     

       58
       58
       +
       			artist: string;

     

       59
       59
       +
       			albumArt: string;

     

       60
       60
       +
       			artistUri: string;

     

       61
       61
       +
       			uri: string;

     

       62
       62
       +
       		}[]

     

       63
       63
       +
       	>([]);

     

       64
       64
       +
       

     

       65
       65
       +
       	useEffect(() => {

     

       66
       66
       +
       		if (artistResult.isLoading || artistResult.isError) {

     

       67
       67
       +
       			return;

     

       68
       68
       +
       		}

     

       69
       69
       +
       

     

       70
       70
       +
       		if (!artistResult.data || !did) {

     

       71
       71
       +
       			return;

     

       72
       72
       +
       		}

     

       73
       73
       +
       

     

       74
       74
       +
       		setArtist({

     

       75
       75
       +
       			id: artistResult.data.id,

     

       76
       76
       +
       			name: artistResult.data.name,

     

       77
       77
       +
       			born: artistResult.data.born,

     

       78
       78
       +
       			bornIn: artistResult.data.bornIn,

     

       79
       79
       +
       			died: artistResult.data.died,

     

       80
       80
       +
       			listeners: artistResult.data.uniqueListeners,

     

       81
       81
       +
       			scrobbles: artistResult.data.playCount,

     

       82
       82
       +
       			picture: artistResult.data.picture,

     

       83
       83
       +
       			tags: artistResult.data.tags,

     

       84
       84
       +
       			uri: artistResult.data.uri,

     

       85
       85
       +
       			spotifyLink: artistResult.data.spotifyLink,

     

       86
       86
       +
       		});

     

       87
       87
       +
       		// eslint-disable-next-line react-hooks/exhaustive-deps

     

       88
       88
       +
       	}, [artistResult.data, artistResult.isLoading, artistResult.isError, did]);

     

       89
       89
       +
       

     

       90
       90
       +
       	useEffect(() => {

     

       91
       91
       +
       		if (artistTracksResult.isLoading || artistTracksResult.isError) {

     

       92
       92
       +
       			return;

     

       93
       93
       +
       		}

     

       94
       94
       +
       

     

       95
       95
       +
       		if (!artistTracksResult.data || !did) {

     

       96
       96
       +
       			return;

     

       97
       97
       +
       		}

     

       98
       98
       +
       

     

       99
       99
       +
       		setTopTracks(

     

       100
       100
       +
       			artistTracksResult.data.map((track) => ({

     

       101
       101
       +
       				...track,

     

       102
       102
       +
       				scrobbles: track.playCount || 1,

     

       103
       103
       +
       			})),

     

       104
       104
       +
       		);

     

       105
       105
       +
       	}, [

     

       106
       106
       +
       		artistTracksResult.data,

     

       107
       107
       +
       		artistTracksResult.isLoading,

     

       108
       108
       +
       		artistTracksResult.isError,

     

       109
       109
       +
       		did,

     

       110
       110
       +
       	]);

     

       111
       111
       +
       

     

       112
       112
       +
       	useEffect(() => {

     

       113
       113
       +
       		if (artistAlbumsResult.isLoading || artistAlbumsResult.isError) {

     

       114
       114
       +
       			return;

     

       115
       115
       +
       		}

     

       116
       116
       +
       

     

       117
       117
       +
       		if (!artistAlbumsResult.data || !did) {

     

       118
       118
       +
       			return;

     

       119
       119
       +
       		}

     

       120
       120
       +
       

     

       121
       121
       +
       		setTopAlbums(artistAlbumsResult.data);

     

       122
       122
       +
       	}, [

     

       123
       123
       +
       		artistAlbumsResult.data,

     

       124
       124
       +
       		artistAlbumsResult.isLoading,

     

       125
       125
       +
       		artistAlbumsResult.isError,

     

       126
       126
       +
       		did,

     

       127
       127
       +
       	]);

     

       128
       128
       +
       

     

       129
       129
       +
       	const loading =

     

       130
       130
       +
       		artistResult.isLoading ||

     

       131
       131
       +
       		artistTracksResult.isLoading ||

     

       132
       132
       +
       		artistAlbumsResult.isLoading;

     

       133
       133
       +
       	return (

     

       134
       134
       +
       		<Main>

     

       135
       135
       +
       			<div className="pb-[100px] pt-[50px]">

     

       136
       136
       +
       				<Group>

     

       137
       137
       +
       					<div className="mr-[20px]">

     

       138
       138
       +
       						{artist?.picture && !loading && (

     

       139
       139
       +
       							<Avatar name={artist?.name} src={artist?.picture} size="150px" />

     

       140
       140
       +
       						)}

     

       141
       141
       +
       						{!artist?.picture && !loading && (

     

       142
       142
       +
       							<div className="w-[150px] h-[150px] rounded-[80px] bg-[rgba(243, 243, 243, 0.725)] flex items-center justify-center">

     

       143
       143
       +
       								<div

     

       144
       144
       +
       									style={{

     

       145
       145
       +
       										height: 60,

     

       146
       146
       +
       										width: 60,

     

       147
       147
       +
       									}}

     

       148
       148
       +
       								>

     

       149
       149
       +
       									<ArtistIcon color="rgba(66, 87, 108, 0.65)" />

     

       150
       150
       +
       								</div>

     

       151
       151
       +
       							</div>

     

       152
       152
       +
       						)}

     

       153
       153
       +
       					</div>

     

       154
       154
       +
       					{artist && !loading && (

     

       155
       155
       +
       						<div style={{ flex: 1 }}>

     

       156
       156
       +
       							<HeadingMedium

     

       157
       157
       +
       								marginTop={"20px"}

     

       158
       158
       +
       								marginBottom={0}

     

       159
       159
       +
       								className="!text-[var(--color-text)]"

     

       160
       160
       +
       							>

     

       161
       161
       +
       								{artist?.name}

     

       162
       162
       +
       							</HeadingMedium>

     

       163
       163
       +
       							<div className="mt-[20px] flex flex-row">

     

       164
       164
       +
       								<div className="mr-[20px]">

     

       165
       165
       +
       									<LabelMedium

     

       166
       166
       +
       										margin={0}

     

       167
       167
       +
       										className="!text-[var(--color-text-muted)]"

     

       168
       168
       +
       									>

     

       169
       169
       +
       										Listeners

     

       170
       170
       +
       									</LabelMedium>

     

       171
       171
       +
       									<HeadingXSmall

     

       172
       172
       +
       										margin={0}

     

       173
       173
       +
       										className="!text-[var(--color-text)]"

     

       174
       174
       +
       									>

     

       175
       175
       +
       										{numeral(artist?.listeners).format("0,0")}

     

       176
       176
       +
       									</HeadingXSmall>

     

       177
       177
       +
       								</div>

     

       178
       178
       +
       								<div>

     

       179
       179
       +
       									<LabelMedium

     

       180
       180
       +
       										margin={0}

     

       181
       181
       +
       										className="!text-[var(--color-text-muted)]"

     

       182
       182
       +
       									>

     

       183
       183
       +
       										Scrobbles

     

       184
       184
       +
       									</LabelMedium>

     

       185
       185
       +
       									<HeadingXSmall

     

       186
       186
       +
       										margin={0}

     

       187
       187
       +
       										className="!text-[var(--color-text)]"

     

       188
       188
       +
       									>

     

       189
       189
       +
       										{numeral(artist?.scrobbles).format("0,0")}

     

       190
       190
       +
       									</HeadingXSmall>

     

       191
       191
       +
       								</div>

     

       192
       192
       +
       								<div className="flex items-center justify-end flex-1 mr-[10px]">

     

       193
       193
       +
       									<a

     

       194
       194
       +
       										href={`https://pdsls.dev/at/${uri.replace("at://", "")}`}

     

       195
       195
       +
       										target="_blank"

     

       196
       196
       +
       										className="text-[var(--color-text)] no-underline bg-[var(--color-default-button)] rounded-[10px] p-[16px] pl-[25px] pr-[25px]"

     

       197
       197
       +
       									>

     

       198
       198
       +
       										<ExternalLink

     

       199
       199
       +
       											size={24}

     

       200
       200
       +
       											className="mr-[10px] text-[var(--color-text)]"

     

       201
       201
       +
       										/>

     

       202
       202
       +
       										View on PDSls

     

       203
       203
       +
       									</a>

     

       204
       204
       +
       								</div>

     

       205
       205
       +
       							</div>

     

       206
       206
       +
       						</div>

     

       207
       207
       +
       					)}

     

       208
       208
       +
       				</Group>

     

       209
       209
       +
       

     

       210
       210
       +
       				<PopularSongs topTracks={topTracks} />

     

       211
       211
       +
       				<Albums topAlbums={topAlbums} />

     

       212
       212
       +
       				<ArtistListeners listeners={artistListenersResult.data} />

     

       213
       213
       +
       				<Shout type="artist" />

     

       214
       214
       +
       			</div>

     

       215
       215
       +
       		</Main>

     

       216
       216
       +
       	);

     

       214
       217
        
       };

     

       215
       218
        
       

     

       216
       219
        
       export default Artist;

+74

apps/web/src/pages/artist/ArtistListeners/ArtistListeners.tsx

···

       1
       1
       +
       import { Link } from "@tanstack/react-router";

     

       2
       2
       +
       import { Avatar } from "baseui/avatar";

     

       3
       3
       +
       import { HeadingSmall } from "baseui/typography";

     

       4
       4
       +
       

     

       5
       5
       +
       interface ArtistListenersProps {

     

       6
       6
       +
       	listeners: {

     

       7
       7
       +
       		id: string;

     

       8
       8
       +
       		did: string;

     

       9
       9
       +
       		handle: string;

     

       10
       10
       +
       		displayName: string;

     

       11
       11
       +
       		avatar: string;

     

       12
       12
       +
       		mostListenedSong: {

     

       13
       13
       +
       			title: string;

     

       14
       14
       +
       			uri: string;

     

       15
       15
       +
       			playCount: number;

     

       16
       16
       +
       		};

     

       17
       17
       +
       		totalPlays: number;

     

       18
       18
       +
       		rank: number;

     

       19
       19
       +
       	}[];

     

       20
       20
       +
       }

     

       21
       21
       +
       

     

       22
       22
       +
       function ArtistListeners(props: ArtistListenersProps) {

     

       23
       23
       +
       	return (

     

       24
       24
       +
       		<>

     

       25
       25
       +
       			<HeadingSmall

     

       26
       26
       +
       				marginBottom={"15px"}

     

       27
       27
       +
       				className="!text-[var(--color-text)] !mb-[30px]"

     

       28
       28
       +
       			>

     

       29
       29
       +
       				Listeners

     

       30
       30
       +
       			</HeadingSmall>

     

       31
       31
       +
       			{props.listeners?.map((item) => (

     

       32
       32
       +
       				<div

     

       33
       33
       +
       					key={item.id}

     

       34
       34
       +
       					className="mb-[30px] flex flex-row items-center gap-[20px]"

     

       35
       35
       +
       				>

     

       36
       36
       +
       					<Link

     

       37
       37
       +
       						to={`/profile/${item.handle}` as string}

     

       38
       38
       +
       						className="no-underline"

     

       39
       39
       +
       					>

     

       40
       40
       +
       						<Avatar src={item.avatar} name={item.displayName} size={"60px"} />

     

       41
       41
       +
       					</Link>

     

       42
       42
       +
       					<div>

     

       43
       43
       +
       						<Link

     

       44
       44
       +
       							to={`/profile/${item.handle}` as string}

     

       45
       45
       +
       							className="text-[var(--color-text)] hover:underline no-underline"

     

       46
       46
       +
       							style={{ fontWeight: 600 }}

     

       47
       47
       +
       						>

     

       48
       48
       +
       							@{item.handle}

     

       49
       49
       +
       						</Link>

     

       50
       50
       +
       						<div className="!text-[14px] mt-[5px]">

     

       51
       51
       +
       							Listens to{" "}

     

       52
       52
       +
       							{item.mostListenedSong.uri && (

     

       53
       53
       +
       								<Link

     

       54
       54
       +
       									to={`${item.mostListenedSong.uri?.split("at:/")[1].replace("app.rocksky.", "")}`}

     

       55
       55
       +
       									className="text-[var(--color-primary)] hover:underline no-underline"

     

       56
       56
       +
       								>

     

       57
       57
       +
       									{item.mostListenedSong.title}

     

       58
       58
       +
       								</Link>

     

       59
       59
       +
       							)}

     

       60
       60
       +
       							{!item.mostListenedSong.uri && (

     

       61
       61
       +
       								<div style={{ fontWeight: 600 }}>

     

       62
       62
       +
       									{item.mostListenedSong.title}

     

       63
       63
       +
       								</div>

     

       64
       64
       +
       							)}{" "}

     

       65
       65
       +
       							a lot

     

       66
       66
       +
       						</div>

     

       67
       67
       +
       					</div>

     

       68
       68
       +
       				</div>

     

       69
       69
       +
       			))}

     

       70
       70
       +
       		</>

     

       71
       71
       +
       	);

     

       72
       72
       +
       }

     

       73
       73
       +
       

     

       74
       74
       +
       export default ArtistListeners;

apps/web/src/pages/artist/ArtistListeners/index.tsx

···

       1
       1
       +
       import ArtistListeners from "./ArtistListeners";

     

       2
       2
       +
       

     

       3
       3
       +
       export default ArtistListeners;