Fixes to track uploading

client/src/components/Header/HeaderSearch.tsx

@@ -1,42 +1,49 @@
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { Link, useLocation } from "react-router-dom";
+import { Link } from "react-router-dom";
 import api from "services/api";
 import AutoComplete from "components/common/AutoComplete";
+import { debounce } from "lodash";
 
 const HeaderSearch: React.FC = () => {
   const { t } = useTranslation("translation", { keyPrefix: "headerSearch" });
 
-  const getOptions = React.useCallback(async (searchString: string) => {
-    const artists = await api.getMany<Artist>(`artists`, {
-      name: searchString,
-    });
-    const trackGroups = await api.getMany<TrackGroup>(`trackGroups`, {
-      title: searchString,
-    });
-    const tracks = await api.getMany<Track>(`tracks`, {
-      title: searchString,
-    });
-    return [
-      ...artists.results.map((r) => ({
-        artistId: r.urlSlug ?? r.id,
-        id: r.id,
-        name: r.name,
-      })),
-      ...trackGroups.results.map((t) => ({
-        id: t.urlSlug ?? t.id,
-        artistId: t.artist?.urlSlug ?? t.artistId,
-        trackGroupId: t.urlSlug ?? t.id,
-        name: t.title,
-      })),
-      ...tracks.results.map((t) => ({
-        id: t.id,
-        trackGroupId: t.trackGroup.urlSlug ?? t.trackGroupId,
-        artistId: t.trackGroup.artist.urlSlug ?? t.trackGroup.artistId,
-        name: t.title,
-      })),
-    ];
-  }, []);
+  const getOptions = React.useCallback(
+    debounce(async (searchString: string) => {
+      const artists = await api.getMany<Artist>(`artists`, {
+        name: searchString,
+      });
+      const trackGroups = await api.getMany<TrackGroup>(`trackGroups`, {
+        title: searchString,
+      });
+      const tracks = await api.getMany<Track>(`tracks`, {
+        title: searchString,
+      });
+      return [
+        ...artists.results.map((r) => ({
+          artistId: r.urlSlug ?? r.id,
+          id: r.id,
+          name: r.name,
+          isArtist: true,
+        })),
+        ...trackGroups.results.map((t) => ({
+          id: t.urlSlug ?? t.id,
+          artistId: t.artist?.urlSlug ?? t.artistId,
+          trackGroupId: t.urlSlug ?? t.id,
+          name: t.title,
+          isTrackGroup: true,
+        })),
+        ...tracks.results.map((t) => ({
+          id: t.id,
+          trackGroupId: t.trackGroup.urlSlug ?? t.trackGroupId,
+          artistId: t.trackGroup.artist.urlSlug ?? t.trackGroup.artistId,
+          name: t.title,
+          isTrack: true,
+        })),
+      ];
+    }, 500),
+    []
+  );
 
   return (
     <AutoComplete

client/src/components/ManageArtist/BulkTrackUpload.tsx

@@ -8,7 +8,7 @@ import { BulkTrackUploadRow } from "./BulkTrackUploadRow";
 
 import { Buffer } from "buffer";
 import process from "process";
-import { pick, pickBy } from "lodash";
+import { pick } from "lodash";
 import {
   TrackData,
   UploadField,
@@ -19,6 +19,7 @@ import {
   produceNewStatus,
 } from "./utils";
 import { useAuthContext } from "state/AuthContext";
+import { useSnackbar } from "state/SnackbarContext";
 
 if (typeof window !== "undefined" && typeof window.Buffer === "undefined") {
   window.Buffer = Buffer;
@@ -46,6 +47,7 @@ export const BulkTrackUpload: React.FC<{
   trackgroup: TrackGroup;
   reload: () => Promise<unknown>;
 }> = ({ trackgroup, reload }) => {
+  const snackbar = useSnackbar();
   const { t } = useTranslation("translation", { keyPrefix: "manageAlbum" });
   const methods = useForm<FormData>();
   const { register, watch, reset } = methods;
@@ -65,10 +67,12 @@ export const BulkTrackUpload: React.FC<{
       if (firstTrack) {
         const packet = {
           title: firstTrack.t.title,
-          metadata: pick(firstTrack.t.metadata, ["format", "common", "native"]),
+          metadata: pick(firstTrack.t.metadata, ["format", "common"]),
           artistId: trackgroup.artistId,
           isPreview: firstTrack.t.status === "preview",
           order: firstTrack.order,
+          lyrics: firstTrack.t.lyrics,
+          isrc: firstTrack.t.isrc,
           trackGroupId: trackgroup.id,
           trackArtists: firstTrack.t.trackArtists.map((a) => ({
             ...a,
@@ -81,17 +85,25 @@ export const BulkTrackUpload: React.FC<{
           produceNewStatus(queue, firstTrack.t.title, 15)
         );
 
-        const response = await api.post<Partial<Track>, { result: Track }>(
-          `manage/tracks`,
-          packet
-        );
-
-        setUploadQueue((queue) =>
-          produceNewStatus(queue, firstTrack.t.title, 25)
-        );
-        await api.uploadFile(`manage/tracks/${response.result.id}/audio`, [
-          firstTrack.t.file,
-        ]);
+        try {
+          const response = await api.post<Partial<Track>, { result: Track }>(
+            `manage/tracks`,
+            packet
+          );
+          setUploadQueue((queue) =>
+            produceNewStatus(queue, firstTrack.t.title, 25)
+          );
+          await api.uploadFile(`manage/tracks/${response.result.id}/audio`, [
+            firstTrack.t.file,
+          ]);
+        } catch (e) {
+          snackbar(
+            `Something went wrong uploading track ${packet.title}. Please report this incident to [email protected]`,
+            {
+              type: "warning",
+            }
+          );
+        }
 
         if (remainingTracks.length !== 0) {
           setUploadQueue((queue) =>
@@ -194,7 +206,7 @@ export const BulkTrackUpload: React.FC<{
               disabled={disableUploadButton}
               multiple
               {...register("trackFiles")}
-              accept="audio/flac,audio/wav,audio/x-flac,audio/aac,audio/aiff,audio/x-m4a"
+              accept="audio/flac,audio/wav,audio/x-wav,audio/x-flac,audio/aac,audio/aiff,audio/x-m4a"
             />
           </UploadLabelWrapper>
         </FormComponent>

client/src/components/ManageArtist/utils.ts

@@ -50,6 +50,8 @@ export interface TrackData {
   title: string;
   status: Track["status"];
   order: string;
+  lyrics?: string;
+  isrc?: string;
   metadata: { [key: string]: any };
   trackArtists: {
     artistName?: string;
@@ -75,6 +77,7 @@ export const convertMetaData = (
     title = p.file.name ?? "";
     title = title.replace(/\.wav$/, "");
   }
+  console.log("title", title);
 
   return {
     metadata: p.metadata,
@@ -87,6 +90,8 @@ export const convertMetaData = (
     file: p.file,
     title: p.metadata.common.title,
     status: "preview",
+    lyrics: p.metadata.common.lyricist,
+    isrc: p.metadata.common.isrc,
     trackArtists:
       p.metadata.common.artists?.map((artist) => ({
         artistName: artist ?? "",

client/src/components/Profile/UserNotificationFeed/UserBoughtYourAlbum.tsx

@@ -3,7 +3,11 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { FaChevronRight } from "react-icons/fa";
 import { Link } from "react-router-dom";
-import { getArtistUrl, getTrackGroupUrlReference } from "utils/artist";
+import {
+  getArtistUrl,
+  getReleaseUrl,
+  getTrackGroupUrlReference,
+} from "utils/artist";
 
 const UserBoughtYourAlbum: React.FC<{ notification: Notification }> = ({
   notification,
@@ -25,7 +29,10 @@ const UserBoughtYourAlbum: React.FC<{ notification: Notification }> = ({
         : <strong>{notification.trackGroup.title}</strong>
       </div>
       <Link
-        to={getTrackGroupUrlReference(notification.trackGroup)}
+        to={getReleaseUrl(
+          notification.trackGroup.artist,
+          notification.trackGroup
+        )}
         className={css`
           display: flex;
           align-items: center;

client/src/components/common/AutoComplete.tsx

@@ -81,7 +81,8 @@ const AutoComplete: React.FC<{
     val: string
   ) =>
     | Promise<{ id: number | string; name: string; isNew?: boolean }[]>
-    | { id: number | string; name: string; isNew?: boolean }[];
+    | { id: number | string; name: string; isNew?: boolean }[]
+    | undefined;
   resultsPrefix?: string;
   onSelect?: (value: string | number) => void;
   optionDisplay?: (result: {
@@ -133,14 +134,14 @@ const AutoComplete: React.FC<{
           (result) =>
             result.name.toLowerCase().replaceAll(/\-| /g, "") === searchString
         );
-        if (allowNew && !searchResultsMatchSearch) {
+        if (allowNew && !searchResultsMatchSearch && results) {
           results.push({
             id: searchString,
             name: searchString,
             isNew: true,
           });
         }
-        setSearchResults(results);
+        setSearchResults(results ?? []);
         setIsSearching(false);
         setNavigationIndex(0);
       } else {

src/routers/v1/artists/index.ts

@@ -10,7 +10,7 @@ export default function () {
   };
 
   async function GET(req: Request, res: Response, next: NextFunction) {
-    const { skip: skipQuery, take, name } = req.query;
+    const { skip: skipQuery, take = 10, name } = req.query;
 
     try {
       let where: Prisma.ArtistWhereInput = {

src/routers/v1/trackGroups/index.ts

@@ -12,7 +12,14 @@ export default function () {
   };
 
   async function GET(req: Request, res: Response, next: NextFunction) {
-    const { skip: skipQuery, take, orderBy, tag, artistId, title } = req.query;
+    const {
+      skip: skipQuery,
+      take = 10,
+      orderBy,
+      tag,
+      artistId,
+      title,
+    } = req.query;
     const distinctArtists = req.query.distinctArtists === "true";
 
     try {

src/routers/v1/tracks/index.ts

@@ -9,7 +9,7 @@ export default function () {
   };
 
   async function GET(req: Request, res: Response, next: NextFunction) {
-    const { skip: skipQuery, take, title } = req.query;
+    const { skip: skipQuery, take = 10, title } = req.query;
 
     try {
       let where: Prisma.TrackWhereInput = {