Polish before release (#108)

Author: zhxie

config/example.jsonc

@@ -72,7 +72,8 @@
         // Hides Bilibili provider. If it is unspecified, `false` will be used
         // by default.
         "hidden": false,
-        // Cookie for Bilibili. If it is unspecified, you'll get only 480P when downloading videos.
+        // The cookie of Bilibili. If it is unspecified, Anioke can onl
+        // download videos with resolution less than 480p.
         "cookie": ""
       },
       "ncm": {

src/components/SettingsWindow.css

@@ -14,7 +14,3 @@
 .settings-window-form > .ant-form-item {
   margin: 0 0 8px;
 }
-
-.settings-window-form .ant-form-item-label .icon-info {
-  margin-left: 4px;
-}

src/components/SettingsWindow.js

@@ -8,12 +8,11 @@ import {
   Space,
   Switch,
   Tabs,
-  Tooltip,
 } from "antd";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import InfoCircleOutlined from "@ant-design/icons/InfoCircleOutlined";
 import "./SettingsWindow.css";
+import TooltipLabel from "./TooltipLabel";
 import "./Window.css";
 
 const { TextArea } = Input;
@@ -43,13 +42,6 @@ const SettingsWindow = (props) => {
     form.submit();
   }, [form]);
 
-  const BilibiliCookiesConfigLabel = (
-    <Tooltip title={t("bilibili_cookies_tooltip")}>
-      <span>{t("cookie")}</span>
-      <InfoCircleOutlined className="icon-info" />
-    </Tooltip>
-  );
-
   return (
     <Space
       className={`settings-window-space ${className}`}
@@ -142,10 +134,15 @@ const SettingsWindow = (props) => {
               <Switch />
             </Form.Item>
             <Form.Item
-              label={BilibiliCookiesConfigLabel}
+              label={
+                <TooltipLabel
+                  tooltip={t("bilibili_cookie_tooltip")}
+                  label={t("cookie")}
+                />
+              }
               name={["providers", "mv", "bilibili", "cookie"]}
             >
-              <Input />
+              <Input.Password />
             </Form.Item>
             <Divider plain orientation="left" style={{ marginTop: 0 }}>
               {t("ncm_mv")}
@@ -168,7 +165,12 @@ const SettingsWindow = (props) => {
               <Switch />
             </Form.Item>
             <Form.Item
-              label={t("api_key")}
+              label={
+                <TooltipLabel
+                  tooltip={t("youtube_api_key_tooltip")}
+                  label={t("api_key")}
+                />
+              }
               name={["providers", "mv", "youtube", "key"]}
             >
               <Input.Password />

src/components/TooltipLabel.css

@@ -0,0 +1,3 @@
+.tooltip-label-icon {
+  margin-left: 4px;
+}

src/components/TooltipLabel.js

@@ -0,0 +1,16 @@
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Tooltip } from "antd";
+import "./TooltipLabel.css";
+
+const TooltipLabel = (props) => {
+  const { className, tooltip, label } = props;
+
+  return (
+    <Tooltip className={className} title={tooltip}>
+      <span>{label}</span>
+      <InfoCircleOutlined className="tooltip-label-icon" />
+    </Tooltip>
+  );
+};
+
+export default TooltipLabel;

src/locales/zh.js

@@ -81,18 +81,20 @@ const zh = {
     providers: "数据源",
     mv: "MV",
     bilibili: "哔哩哔哩",
+    cookie: "Cookie",
+    bilibili_cookie_tooltip:
+      "提供哔哩哔哩的 Cookie 后，Anioke 将支持下载分辨率高于 480p 的 MV",
     hidden: "隐藏",
     ncm_mv: "网易云音乐 (MV)",
     youtube: "YouTube",
-    api_key: "API Key",
+    api_key: "API 密钥",
+    youtube_api_key_tooltip:
+      "提供 YouTube 的 API 密钥 后，Anioke 将支持搜索与下载 MV",
     lyrics: "歌词",
     joysound: "JOYSOUND",
     ncm_lyrics: "网易云音乐 (歌词)",
     petit_lyrics: "プチリリ",
     save: "保存",
-    cookie: "Cookie",
-    bilibili_cookies_tooltip:
-      "哔哩哔哩需要提供 Cookie 才能获取 480P 以上的画质",
   },
 };