fix: reload track if title changes, highlight title is missing

funmusicplace · Dec 16, 2024 · aee1915 · aee1915
1 parent 440ccac
commit aee1915
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 deletions.
diff --git a/client/src/components/ManageArtist/AlbumFormComponents/ClickToEditInput.tsx b/client/src/components/ManageArtist/AlbumFormComponents/ClickToEditInput.tsx
@@ -10,7 +10,8 @@ const ClickToEditInput: React.FC<{
   defaultValue: string;
   url: string;
   formKey: string;
-}> = ({ url, formKey, defaultValue }) => {
+  reload?: () => void;
+}> = ({ url, formKey, defaultValue, reload }) => {
   const [isEditing, setIsEditing] = React.useState(false);
   const methods = useForm({
     defaultValues: {
@@ -19,15 +20,11 @@ const ClickToEditInput: React.FC<{
   });
 
   const currentValue = methods.getValues(formKey);
+
   return (
     <>
       {!isEditing && (
-        <div
-        // className={css`
-        //   display: flex;
-        //   justify-content: space-between;
-        // `}
-        >
+        <div>
           {currentValue}
           <Button
             type="button"
@@ -47,7 +44,7 @@ const ClickToEditInput: React.FC<{
           `}
         >
           <FormProvider {...methods}>
-            <SavingInput formKey="title" url={url} />
+            <SavingInput formKey="title" url={url} reload={reload} />
             <Button
               type="button"
               variant="dashed"

diff --git a/client/src/components/ManageArtist/AlbumFormComponents/SavingInput.tsx b/client/src/components/ManageArtist/AlbumFormComponents/SavingInput.tsx
@@ -22,6 +22,7 @@ const SavingInput: React.FC<{
   step?: string;
   type?: string;
   clearQueryKey?: string;
+  reload?: () => void;
 }> = ({
   formKey,
   url,
@@ -31,6 +32,7 @@ const SavingInput: React.FC<{
   rows,
   step,
   clearQueryKey,
+  reload,
 }) => {
   const { register, getValues } = useFormContext();
   const errorHandler = useErrorHandler();
@@ -83,6 +85,7 @@ const SavingInput: React.FC<{
         const timeout = setTimeout(() => {
           setIsSaving(false);
           setSaveSuccess(true);
+          reload?.();
           timeout2 = setTimeout(() => {
             setSaveSuccess(false);
           }, 1000);

diff --git a/client/src/components/ManageArtist/ManageTrackRow.tsx b/client/src/components/ManageArtist/ManageTrackRow.tsx
@@ -1,6 +1,6 @@
 import { css } from "@emotion/css";
 import React from "react";
-import { FaPen, FaTrash } from "react-icons/fa";
+import { FaExclamationTriangle, FaPen, FaTrash } from "react-icons/fa";
 import useDraggableTrack from "utils/useDraggableTrack";
 
 import api from "services/api";
@@ -108,6 +108,8 @@ const ManageTrackRow: React.FC<{
     reload();
   }, [reload]);
 
+  console.log("track.audio", track.title, !track.title);
+
   if (isEditing) {
     return (
       <EditTrackRow
@@ -149,31 +151,54 @@ const ManageTrackRow: React.FC<{
           overflow: hidden;
           whitespace: nowrap;
           text-overflow: ellipsis;
+          background-color: ${!track.title
+            ? "var(--mi-warning-background-color)"
+            : "transparent"};
           &:hover {
-            background-color: transparent !important;
+            background-color: ${!track.title
+              ? "var(--mi-warning-background-color)"
+              : "transparent"};
           }
 
           &:before {
             content: "${t("titleColumn")}: ";
           }
         `}
       >
-        <div>
-          <ClickToEditInput
-            defaultValue={track.title}
-            url={`manage/tracks/${track.id}`}
-            formKey="title"
-          />
-          <small>
-            {uploadState === "SUCCESS" && t("doneUploadingTrack")}
-            {uploadState === "STARTED" && (
-              <>
-                <LoadingSpinner />
-                {t("stillProcessing")}
-              </>
-            )}
-            {uploadState === "ERROR" && t("thereWasAnError")}
-          </small>
+        <div
+          className={css`
+            display: flex;
+            align-items: center;
+
+            > svg {
+              margin-right: 1rem;
+            }
+          `}
+        >
+          {!track.title && <FaExclamationTriangle />}
+          <div>
+            <ClickToEditInput
+              defaultValue={track.title}
+              url={`manage/tracks/${track.id}`}
+              formKey="title"
+              reload={reload}
+            />
+            <small>
+              {t("originalFilename", {
+                filename: track.audio?.originalFilename,
+              })}
+              <div>
+                {uploadState === "SUCCESS" && t("doneUploadingTrack")}
+                {uploadState === "STARTED" && (
+                  <>
+                    <LoadingSpinner />
+                    {t("stillProcessing")}
+                  </>
+                )}
+                {uploadState === "ERROR" && t("thereWasAnError")}
+              </div>
+            </small>
+          </div>
         </div>
       </td>
       <td

diff --git a/client/src/translation/en.json b/client/src/translation/en.json
@@ -642,6 +642,7 @@
     "delete": "Delete",
     "edit": "Edit",
     "listedArtists": "Listed artists",
+    "originalFilename": "Original file name: {{ filename }}",
     "status": "Can be played without purchase?",
     "statusPreview": "Preview",
     "statusMustOwn": "Must own",
@@ -671,7 +672,6 @@
     "imagesInPost": "Manage images in post",
     "imageIsFeatured": "Which image should be featured?",
     "confirmDelete": "Are you sure you want to delete this post?",
-    "newBlogPostFor": "New blog post for {{ artistName }}",
     "title": "Title:",
     "publicationDate": "Publication date:",
     "content": "Content",

diff --git a/client/src/types/index.d.ts b/client/src/types/index.d.ts
@@ -35,6 +35,7 @@ interface Track {
     createdAt: string;
     duration: number; // in seconds
     uploadState: "STARTED" | "SUCCESS" | "ERROR";
+    originalFilename: string;
   };
   isPreview: boolean;
   trackArtists?: {