feat: add embeds for youtube and spotify

toiki-org · Feb 9, 2025 · 1f1344e · 1f1344e
1 parent 0ff6c8f
commit 1f1344e
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 12 deletions.
diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -4,6 +4,7 @@ import { isYoutubeOrSpotify } from './utils/isYoutubeOrSpotify';
 
 export function App() {
   const [loading, setLoading] = useState<boolean>(false);
+  const [copied, setCopied] = useState<boolean>(false);
   const [result, setResult] = useState<null | {
     url: string;
     embedUrl: string;
@@ -92,7 +93,7 @@ export function App() {
             <button
               type="submit"
               disabled={loading}
-              className="inline-flex items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-70"
+              className="inline-flex cursor-pointer items-center gap-x-1.5 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:opacity-70"
             >
               <ArrowPathIcon
                 className={`-ml-0.5 h-5 w-5 ${loading ? 'animate-spin' : ''}`}
@@ -117,19 +118,27 @@ export function App() {
                   {result.url}
                 </a>
               </div>
-              <div className="mt-5">
+              <div className="mt-5 flex items-center gap-x-2">
                 <button
                   type="button"
-                  className="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm text-gray-900 font-semibold shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+                  className={`inline-flex cursor-pointer transition-colors duration-200 items-center gap-x-1.5 rounded-md px-3 py-2 text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 ${
+                    copied ? 'bg-green-400' : 'bg-white hover:bg-gray-50'
+                  }`}
                   onClick={() => {
                     navigator.clipboard.writeText(result.url);
+                    if (!copied) {
+                      setCopied(true);
+                      setTimeout(() => {
+                        setCopied(false);
+                      }, 2000);
+                    }
                   }}
                 >
                   <ClipboardIcon
                     className="-ml-0.5 h-5 w-5"
                     aria-hidden="true"
                   />
-                  Copy
+                  {copied ? 'Copied!' : 'Copy'}
                 </button>
               </div>
               <iframe

diff --git a/server/src/controllers/convert.ts b/server/src/controllers/convert.ts
@@ -32,7 +32,7 @@ export default class ConvertController extends BaseController {
         return next(new HttpException(400, 'Invalid request params.'))
       }
 
-      let result: string
+      let result: { url: string; embedUrl: string }
 
       const id = matchResult.id
 
@@ -49,9 +49,7 @@ export default class ConvertController extends BaseController {
           result = await this.conversionService.convertYoutubeTrack(id)
         }
       }
-      JSONResponse.success(res, {
-        url: result,
-      })
+      JSONResponse.success(res, result)
     } catch (e) {
       if (e instanceof HttpException) {
         next(e)

diff --git a/server/src/services/conversion_service.ts b/server/src/services/conversion_service.ts
@@ -53,8 +53,12 @@ export class ConversionService {
     const spotifyTrackId = spotifyTrack.id
 
     const spotifyTrackUrl = `https://open.spotify.com/track/${spotifyTrackId}`
+    const spotifyEmbedUrl = `https://open.spotify.com/embed/track/${spotifyTrackId}`
 
-    return spotifyTrackUrl
+    return {
+      url: spotifyTrackUrl,
+      embedUrl: spotifyEmbedUrl,
+    }
   }
 
   async convertYoutubeAlbum(id: string) {
@@ -93,8 +97,12 @@ export class ConversionService {
     const spotifyAlbumId = spotifyAlbum.id
 
     const spotifyAlbumUrl = `https://open.spotify.com/album/${spotifyAlbumId}`
+    const spotifyEmbedUrl = `https://open.spotify.com/embed/album/${spotifyAlbumId}`
 
-    return spotifyAlbumUrl
+    return {
+      url: spotifyAlbumUrl,
+      embedUrl: spotifyEmbedUrl,
+    }
   }
 
   async convertSpotifyTrack(id: string) {
@@ -119,8 +127,12 @@ export class ConversionService {
     }
 
     const youtubeVideoUrl = `https://www.youtube.com/watch?v=${youtubeVideo?.videoId}`
+    const youtubeEmbedUrl = `https://www.youtube.com/embed/${youtubeVideo?.videoId}`
 
-    return youtubeVideoUrl
+    return {
+      url: youtubeVideoUrl,
+      embedUrl: youtubeEmbedUrl,
+    }
   }
 
   async convertSpotifyAlbum(id: string) {
@@ -145,7 +157,11 @@ export class ConversionService {
     }
 
     const youtubePlaylistUrl = `https://www.youtube.com/playlist?list=${youtubePlaylistId}`
+    const youtubeEmbedUrl = `https://www.youtube.com/embed?listType=playlist&list=${youtubePlaylistId}`
 
-    return youtubePlaylistUrl
+    return {
+      url: youtubePlaylistUrl,
+      embedUrl: youtubeEmbedUrl,
+    }
   }
 }