format

packages/app/src/components/MusicStudio/EnhancedLyricsEditor/components/LyricsEditor/index.jsx

@@ -10,88 +10,92 @@ import Languages from "@config/languages"
 import "./index.less"
 
 const LanguagesMap = Object.entries(Languages).map(([key, value]) => {
-    return {
-        label: value,
-        value: key,
-    }
+	return {
+		label: value,
+		value: key,
+	}
 })
 
 const LyricsEditor = (props) => {
-    const { langs = {} } = props
-    const [selectedLang, setSelectedLang] = React.useState("original")
+	const { langs = {} } = props
+	const [selectedLang, setSelectedLang] = React.useState("original")
 
-    function handleChange(key, value) {
-        if (typeof props.onChange !== "function") {
-            return false
-        }
+	function handleChange(key, value) {
+		if (typeof props.onChange !== "function") {
+			return false
+		}
 
-        props.onChange(key, value)
-    }
+		props.onChange(key, value)
+	}
 
-    function updateCurrentLang(url) {
-        handleChange("langs", {
-            ...langs,
-            [selectedLang]: url
-        })
-    }
+	function updateCurrentLang(url) {
+		handleChange("langs", {
+			...langs,
+			[selectedLang]: url,
+		})
+	}
 
-    return <div className="lyrics-editor">
-        <div className="flex-row align-center justify-space-between gap-10">
-            <h1>
-                <Icons.MdOutlineMusicNote />
-                Lyrics
-            </h1>
+	return (
+		<div className="lyrics-editor">
+			<div className="flex-row align-center justify-space-between gap-10">
+				<h1>
+					<Icons.MdOutlineMusicNote />
+					Lyrics
+				</h1>
 
-            <div className="flex-row aling-center gap-5">
-                <span>
-                    Language:
-                </span>
+				<div className="flex-row aling-center gap-5">
+					<span>Language:</span>
 
-                <antd.Select
-                    showSearch
-                    style={{ width: "220px" }}
-                    placeholder="Select a language"
-                    value={selectedLang}
-                    options={[
-                        ...LanguagesMap,
-                        {
-                            label: "Original",
-                            value: "original",
-                        }
-                    ]}
-                    optionFilterProp="children"
-                    filterOption={(input, option) => (option?.label.toLowerCase() ?? '').includes(input.toLowerCase())}
-                    filterSort={(optionA, optionB) =>
-                        (optionA?.label.toLowerCase() ?? '').toLowerCase().localeCompare((optionB?.label.toLowerCase() ?? '').toLowerCase())
-                    }
-                    onChange={setSelectedLang}
-                />
+					<antd.Select
+						showSearch
+						style={{ width: "220px" }}
+						placeholder="Select a language"
+						value={selectedLang}
+						options={[
+							...LanguagesMap,
+							{
+								label: "Original",
+								value: "original",
+							},
+						]}
+						optionFilterProp="children"
+						filterOption={(input, option) =>
+							(option?.label.toLowerCase() ?? "").includes(
+								input.toLowerCase(),
+							)
+						}
+						filterSort={(optionA, optionB) =>
+							(optionA?.label.toLowerCase() ?? "")
+								.toLowerCase()
+								.localeCompare(
+									(
+										optionB?.label.toLowerCase() ?? ""
+									).toLowerCase(),
+								)
+						}
+						onChange={setSelectedLang}
+					/>
 
-                {
-                    selectedLang && <UploadButton
-                        onSuccess={(file_uid, data) => {
-                            updateCurrentLang(data.url)
-                        }}
-                        accept={[
-                            "text/*"
-                        ]}
-                    />
-                }
-            </div>
-        </div>
+					{selectedLang && (
+						<UploadButton
+							onSuccess={(file_uid, data) => {
+								updateCurrentLang(data.url)
+							}}
+							accept={["text/*"]}
+						/>
+					)}
+				</div>
+			</div>
 
-        {
-            !langs[selectedLang] && <span>
-                No lyrics uploaded for this language
-            </span>
-        }
+			{!langs[selectedLang] && (
+				<span>No lyrics uploaded for this language</span>
+			)}
 
-        {
-            langs[selectedLang] && <LyricsTextView
-                lrcURL={langs[selectedLang]}
-            />
-        }
-    </div>
+			{langs[selectedLang] && (
+				<LyricsTextView lrcURL={langs[selectedLang]} />
+			)}
+		</div>
+	)
 }
 
-export default LyricsEditor
+export default LyricsEditor