karitham.dev / listenframe
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

use releases instead of release groups

karitham 0b31bf34 f5be275e

+36 -37
+36 -37
src/App.tsx
··· 34 34 }, 35 35 ); 36 36 const [artistRes] = createResource(settings, artistFetcher); 37 - const [groupsFetcher] = makeCache( 38 - (set: Settings) => 39 - releaseGroups(set.username, undefined, set.range, set.count), 37 + const [releasesFetcher] = makeCache( 38 + (set: Settings) => releases(set.username, undefined, set.range, set.count), 40 39 { 41 40 storage: localStorage, 42 41 sourceHash(source) { ··· 44 43 }, 45 44 }, 46 45 ); 47 - const [groupsRes] = createResource(settings, groupsFetcher); 46 + const [releasesRes] = createResource(settings, releasesFetcher); 48 47 49 48 return ( 50 49 <main class="bg-black min-h-screen text-white p-8"> ··· 94 93 <h2 class="text-2xl font-semibold my-6 text-center"> 95 94 Top Albums 96 95 </h2> 97 - <ReleaseGroups groups={groupsRes()?.release_groups || []} /> 96 + <ReleaseGroups groups={releasesRes()?.releases || []} /> 98 97 </div> 99 98 </div> 100 99 </Suspense> ··· 141 140 <img 142 141 src={ 143 142 image() || 144 - `https://placehold.co/1000x1000/000000/ffffff?text=${props.artist.artist_name}` 143 + `https://placehold.co/100x100/000000/ffffff?text=${props.artist.artist_name}` 145 144 } 146 145 alt={`Thumbnail for ${props.artist.artist_name}`} 147 146 class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105" ··· 162 161 ); 163 162 }; 164 163 165 - const ReleaseGroups: Component<{ groups: ReleaseGroupsGroup[] }> = (props) => { 164 + const ReleaseGroups: Component<{ groups: Release[] }> = (props) => { 166 165 return ( 167 166 <div class="flex flex-wrap justify-center gap-4"> 168 167 <For each={props.groups}> 169 - {(group) => <ReleaseGroupItem group={group} />} 168 + {(group) => <ReleaseGroupItem release={group} />} 170 169 </For> 171 170 </div> 172 171 ); 173 172 }; 174 173 175 - const ReleaseGroupItem: Component<{ group: ReleaseGroupsGroup }> = (props) => { 174 + const ReleaseGroupItem: Component<{ release: Release }> = (props) => { 176 175 const [imageFetcher] = makeCache( 177 - async (group: ReleaseGroupsGroup) => { 178 - if (!group.caa_release_mbid) { 176 + async (release: Release) => { 177 + if (!release.caa_release_mbid) { 179 178 return null; 180 179 } 181 180 const result = await getReleaseImageURL( 182 181 "release", 183 - group.caa_release_mbid, 182 + release.caa_release_mbid, 184 183 ); 185 184 return result[0]?.image.replace("http://", "https://"); 186 185 }, ··· 188 187 storage: localStorage, 189 188 }, 190 189 ); 191 - const [image] = createResource(props.group, imageFetcher); 190 + const [image] = createResource(props.release, imageFetcher); 192 191 193 192 return ( 194 193 <div class="group relative w-40 p-4 rounded-lg bg-gray-900 transition-all duration-300 hover:bg-gray-800 cursor-pointer"> ··· 201 200 <img 202 201 src={ 203 202 image() || 204 - `https://placehold.co/1000x1000/000000/ffffff?text=${props.group.release_group_name}` 203 + `https://placehold.co/100x100/000000/ffffff?text=${props.release.release_name}` 205 204 } 206 - alt={`Cover for ${props.group.release_group_name}`} 205 + alt={`Cover for ${props.release.release_name}`} 207 206 class="w-32 h-32 mx-auto object-cover rounded-full shadow-lg mb-4 transition-all duration-300 group-hover:scale-105" 208 207 /> 209 208 </Show> 210 209 <p class="text-white text-center font-bold text-base truncate mb-1"> 211 210 <a 212 211 target="_blank" 213 - href={`${MB_API_URL}/release/${props.group.caa_release_mbid}`} 212 + href={`${MB_API_URL}/release/${props.release.caa_release_mbid}`} 214 213 > 215 - {props.group.release_group_name} 214 + {props.release.release_name} 216 215 </a> 217 216 </p> 218 217 <p class="text-gray-500 text-base truncate mb-1"> 219 - {props.group.listen_count} listens 218 + {props.release.listen_count} listens 220 219 </p> 221 220 </div> 222 221 ); ··· 243 242 listen_count: number; 244 243 }; 245 244 246 - export type ReleaseGroupsStats = { 245 + export type ReleasesStats = { 247 246 count: number; 248 247 from_ts: number; 249 248 last_updated: number; 250 249 offset: number; 251 250 range: string; 252 - release_groups: ReleaseGroupsGroup[]; 251 + releases: Release[]; 253 252 to_ts: number; 254 - total_release_group_count: number; 253 + total_release_count: number; 255 254 user_id: string; 256 255 }; 257 256 258 - type ReleaseGroupsGroup = { 257 + export interface Release { 259 258 artist_mbids: string[]; 260 259 artist_name: string; 261 - artists: 262 - | { 263 - artist_credit_name: string; 264 - artist_mbid: string; 265 - join_phrase: string; 266 - }[] 267 - | null; 268 - caa_id: number | null; 269 - caa_release_mbid: string | null; 260 + artists?: Artist[]; 261 + caa_id?: number; 262 + caa_release_mbid?: string; 270 263 listen_count: number; 271 - release_group_mbid: string | null; 272 - release_group_name: string; 273 - }; 264 + release_mbid: string; 265 + release_name: string; 266 + } 267 + 268 + export interface Artist { 269 + artist_credit_name: string; 270 + artist_mbid: string; 271 + join_phrase: string; 272 + } 274 273 275 274 async function artists( 276 275 user: string, ··· 287 286 return getPayload(url); 288 287 } 289 288 290 - async function releaseGroups( 289 + async function releases( 291 290 user: string, 292 291 offset: number = 0, 293 292 range: Range = "this_week", 294 293 count: number = 5, 295 - ): Promise<ReleaseGroupsStats> { 296 - const url = new URL(`${LB_API_URL}/1/stats/user/${user}/release-groups`); 294 + ): Promise<ReleasesStats> { 295 + const url = new URL(`${LB_API_URL}/1/stats/user/${user}/releases`); 297 296 298 297 url.searchParams.set("offset", offset.toString()); 299 298 url.searchParams.set("range", range);