Update genius-lyrics extension (#13432)

* Update genius-lyrics extension

- Added New Command
- Added New Command
- Initial commit

* Removed axios, switched to useFetch; Renamed commands; Changed the formatting of results

* Removed axios from dependencies

* Update CHANGELOG.md

* Update CHANGELOG.md and optimise images

---------

Co-authored-by: Milena Araujo <mil3na@users.noreply.github.com>
Co-authored-by: raycastbot <bot@raycast.com>

extensions/genius-lyrics/CHANGELOG.md

@@ -1,3 +1,7 @@
 # Genius Lyrics Changelog
 
-## [Initial Version] - 2024-05-12
+## [New Command] - 2024-07-12
+
+- Added the `Search with Lyrics` Command
+
+## [Initial Version] - 2024-05-12

extensions/genius-lyrics/README.md

@@ -1,3 +1,3 @@
 # Genius Lyrics
 
-Query and quickly read lyrics for any song from the Genius API.
+Search by song title to instantly view lyrics, or enter remembered lyrics to quickly find the song's title, utilizing the Genius Lyrics API.

extensions/genius-lyrics/package.json

@@ -2,17 +2,20 @@
   "$schema": "https://www.raycast.com/schemas/extension.json",
   "name": "genius-lyrics",
   "title": "Genius Lyrics",
-  "description": "Query and quickly read lyrics for any song from the Genius API.",
+  "description": "Search by song title to instantly view lyrics, or enter remembered lyrics to quickly find the song's title, utilizing the Genius Lyrics API.",
   "icon": "command-icon.png",
   "author": "tkdkid1000",
+  "contributors": [
+    "johnstclair"
+  ],
   "categories": [
     "Media"
   ],
   "license": "MIT",
   "commands": [
     {
       "name": "index",
-      "title": "Search Lyrics",
+      "title": "Search Lyrics by Title",
       "description": "Search lyrics with the Genius API.",
       "mode": "view",
       "arguments": [
@@ -22,6 +25,19 @@
           "type": "text"
         }
       ]
+    },
+    {
+      "name": "lyric-search",
+      "title": "Search Song by Lyrics",
+      "description": "Search for song titles using remembered lyrics with the Genius API.",
+      "mode": "view",
+      "arguments": [
+        {
+          "name": "query",
+          "placeholder": "Query",
+          "type": "text"
+        }
+      ]
     }
   ],
   "dependencies": {

extensions/genius-lyrics/src/lyric-search.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { List, LaunchProps, Action, ActionPanel } from "@raycast/api";
+import { useFetch } from "@raycast/utils";
+
+const GENIUS_SEARCH_URL = "https://genius.com/api/search/lyrics?q=";
+
+interface SearchResults {
+  id: number;
+  title: string;
+  url: string;
+  header_image_url: string;
+  primary_artist: {
+    name: string;
+  };
+}
+
+interface SearchHit {
+  result: SearchResults;
+  highlights: {
+    value: string;
+  }[];
+}
+
+interface SearchSections {
+  hits: SearchHit[];
+}
+
+interface SearchResponse {
+  sections: SearchSections[];
+}
+
+interface SearchData {
+  response: SearchResponse;
+}
+
+export default function Command(props: LaunchProps<{ arguments: { query: string } }>) {
+  const [searchQuery, setSearchQuery] = useState(props.arguments.query || "");
+
+  const { data, isLoading } = useFetch<SearchData>(`${GENIUS_SEARCH_URL}${encodeURIComponent(searchQuery)}`);
+
+  const results = (data?.response?.sections?.[0]?.hits as SearchHit[]) || [];
+
+  return (
+    <List isLoading={isLoading} onSearchTextChange={setSearchQuery} searchBarPlaceholder="Enter lyrics...">
+      {results.map((hit: SearchHit) => (
+        <List.Item
+          key={hit.result.id}
+          title={`${hit.result.title} by ${hit.result.primary_artist.name}`}
+          subtitle={`${hit.highlights[0].value.replace("\n", " ")}`}
+          icon={hit.result.header_image_url}
+          actions={
+            <ActionPanel title="Actions">
+              <Action.OpenInBrowser url={hit.result.url} />
+              <Action.CopyToClipboard
+                title="Copy Song and Artist to Clipboard"
+                content={`${hit.result.title} by ${hit.result.primary_artist.name}`}
+              />
+            </ActionPanel>
+          }
+        />
+      ))}
+    </List>
+  );
+}