Add links to Spotify and attribution

fyrk · Sep 8, 2023 · f940bfd · f940bfd
1 parent 1e974f3
commit f940bfd
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 26 deletions.
diff --git a/public/img/spotify_logo_green.svg b/public/img/spotify_logo_green.svg
diff --git a/src/app/playlisteditor/PlaylistEditor.tsx b/src/app/playlisteditor/PlaylistEditor.tsx
@@ -2,6 +2,7 @@ import { SpotifyApi } from "@spotify/web-api-ts-sdk"
 import { useState } from "preact/hooks"
 import { ScannedPlaylist } from "../../types"
 import PlaylistView from "./PlaylistView"
+import spotifyLogoGreen from "/img/spotify_logo_green.svg?url"
 
 export default function PlaylistEditor({
   playlists,
@@ -23,7 +24,7 @@ export default function PlaylistEditor({
     <div class="w-full grow p-5">
       <div class="mx-auto w-full max-w-4xl">
         {/* TODO: add button */}
-        <div class="mb-10 text-center text-xl">
+        <div class="mb-10 text-center text-lg sm:text-xl">
           You can also choose which songs you would like to replace.
           <br />
           Tap on a playlist to select individual tracks.
@@ -72,6 +73,15 @@ export default function PlaylistEditor({
             />
           ))}
         </div>
+        <div class="mb-8 mt-16 text-center">
+          {/* see https://developer.spotify.com/documentation/design#using-our-content */}
+          <div>Music data from the official API of</div>
+          <img
+            src={spotifyLogoGreen}
+            class="mt-[35px] inline h-[70px]"
+            alt="Spotify Green Logo"
+          />
+        </div>
       </div>
     </div>
   )

diff --git a/src/app/playlisteditor/PlaylistView.tsx b/src/app/playlisteditor/PlaylistView.tsx
@@ -1,6 +1,6 @@
 import { SpotifyApi, Track } from "@spotify/web-api-ts-sdk"
 import { useEffect, useRef, useState } from "preact/hooks"
-import { Checkbox } from "../../components"
+import { Checkbox, ExternalLink } from "../../components"
 import { PlaylistPlaceholderIcon } from "../../icons"
 import { ScannedPlaylist } from "../../types"
 import ReplacementView from "./ReplacementView"
@@ -64,8 +64,20 @@ export default function PlaylistView({
           <PlaylistPlaceholderIcon class="h-24 w-24" />
         )}
 
-        <div class="self-center text-2xl font-semibold sm:text-4xl">
-          {playlist.name}
+        <div class="flex h-full flex-col justify-between self-center">
+          <div></div>
+          <div class="text-2xl font-semibold sm:text-4xl">{playlist.name}</div>
+          <div class="text-sm text-neutral-400">
+            <span class="mr-1">
+              {playlist.replacements.length} tracks found
+            </span>{" "}
+            •{" "}
+            <span class="ml-1">
+              <ExternalLink href={playlist.external_urls.spotify}>
+                Open in Spotify
+              </ExternalLink>
+            </span>
+          </div>
         </div>
         <div class="flex items-center justify-start self-center">
           <Checkbox
@@ -78,7 +90,7 @@ export default function PlaylistView({
         </div>
       </div>
       {isExtended && (
-        <div class="p-4">
+        <div class="p-4 pt-6">
           {playlist.replacements.map((r, i) => {
             return (
               <ReplacementView

diff --git a/src/app/playlisteditor/ReplacementView.tsx b/src/app/playlisteditor/ReplacementView.tsx
@@ -1,8 +1,38 @@
 import { Track } from "@spotify/web-api-ts-sdk"
-import { Checkbox } from "../../components"
+import { Checkbox, ExternalLink } from "../../components"
 import { TrackPlaceholderIcon } from "../../icons"
 import { TrackReplacements } from "../../types"
 
+const TrackView = ({ track }: { track: Track | null }) => (
+  <div class="grid min-w-0 grid-cols-[3rem_1fr] gap-3">
+    {track && track.album.images[0] ? (
+      <a href={track && track.external_urls.spotify} target="_blank">
+        <img src={track.album.images[0].url} />
+      </a>
+    ) : (
+      <TrackPlaceholderIcon />
+    )}
+    <div class="min-w-0">
+      <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+        <ExternalLink
+          href={track && track.external_urls.spotify}
+          class="hover:underline"
+        >
+          {track && track.name}
+        </ExternalLink>
+      </div>
+      <div class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-400">
+        <ExternalLink
+          href={track && track.album.external_urls.spotify}
+          class="hover:underline"
+        >
+          {track && track.album.name}
+        </ExternalLink>
+      </div>
+    </div>
+  </div>
+)
+
 export default function ReplacementView({
   replacement,
   taylorsTrack,
@@ -14,24 +44,6 @@ export default function ReplacementView({
   selected: boolean
   onSelect: (selected: boolean) => void
 }) {
-  const TrackView = ({ track }: { track: Track | null }) => (
-    <div class="flex min-w-0 gap-3">
-      {track && track.album.images[0] ? (
-        <img src={track.album.images[0].url} class="h-12 w-12" />
-      ) : (
-        <TrackPlaceholderIcon class="h-12 w-12" />
-      )}
-      <div class="min-w-0">
-        <div class="overflow-hidden text-ellipsis whitespace-nowrap">
-          {track && track.name}
-        </div>
-        <div class="overflow-hidden text-ellipsis whitespace-nowrap text-neutral-400">
-          {track && track.album.name}
-        </div>
-      </div>
-    </div>
-  )
-
   return (
     // grid  <sm: position (1), stolen (2-3), arrow (4), tv (5-6), checkbox (7)
     // grid >=sm: position (1), stolen (2-7)\ arrow (2), tv (3-6), checkbox (7-7)

diff --git a/src/app/scan.tsx b/src/app/scan.tsx
@@ -49,7 +49,7 @@ export async function scanUserPlaylists(
         const playlistWithTracks = await getPlaylistWithTracks(
           spotify,
           playlist,
-          "track(album(images,name),external_ids.isrc,external_urls(spotify),href,id,name,type)",
+          "track(album(external_urls.spotify,images,name),external_ids.isrc,external_urls.spotify,href,id,name,type)",
         )
         const replacements = getTrackReplacements(playlistWithTracks.tracks)
         if (replacements.length > 0) {

diff --git a/src/components.tsx b/src/components.tsx
@@ -5,7 +5,7 @@ import { HeartIcon } from "./icons"
 export const Scaffold = ({ children }) => (
   <main class="flex h-full flex-col items-center justify-between">
     {children}
-    <div class="mt-16 pb-4 text-center">
+    <div class="mt-16 pb-8 text-center">
       <p class="mb-2">
         Made with <HeartIcon class="inline h-6 w-6 text-accent" /> by{" "}
         <ExternalLink href="https://github.com/FlorianRaediker">