播放配置初步

src/pages/system/index.tsx

@@ -1,10 +1,22 @@
 import React, { useState, useEffect } from "react";
-import { Row, Col, Form, Input, Image, Button, Tabs, message } from "antd";
+import {
+  Row,
+  Col,
+  Form,
+  Input,
+  Image,
+  Button,
+  Tabs,
+  message,
+  Switch,
+  Checkbox,
+} from "antd";
 import styles from "./index.module.less";
 import { appConfig } from "../../api/index";
 import { useParams, useNavigate } from "react-router-dom";
 import { UploadImageButton } from "../../compenents";
 import type { TabsProps } from "antd";
+// import { Colorpicker } from "antd-colorpicker";
 
 export const SystemIndexPage: React.FC = () => {
   const params = useParams();
@@ -12,6 +24,7 @@ export const SystemIndexPage: React.FC = () => {
   const [form] = Form.useForm();
   const [loading, setLoading] = useState<boolean>(false);
   const [logo, setLogo] = useState<string>("");
+  const [thumb, setThumb] = useState<string>("");
   const [tabKey, setTabKey] = useState(1);
 
   useEffect(() => {
@@ -45,11 +58,45 @@ export const SystemIndexPage: React.FC = () => {
           form.setFieldsValue({
             "system.h5_url": configData[i].key_value,
           });
+        } else if (configData[i].key_name === "player.poster") {
+          form.setFieldsValue({
+            "player.poster": configData[i].key_value,
+          });
+        } else if (
+          configData[i].key_name === "player.is_enabled_bullet_secret"
+        ) {
+          let value = 0;
+          if (configData[i].key_value !== "") {
+            value = Number(configData[i].key_value);
+          }
+          form.setFieldsValue({
+            "player.is_enabled_bullet_secret": value,
+          });
+        } else if (configData[i].key_name === "player.bullet_secret_text") {
+          form.setFieldsValue({
+            "player.bullet_secret_text": configData[i].key_value,
+          });
+        } else if (configData[i].key_name === "player.bullet_secret_color") {
+          form.setFieldsValue({
+            "player.bullet_secret_color": configData[i].key_value,
+          });
+        } else if (configData[i].key_name === "player.bullet_secret_opacity") {
+          form.setFieldsValue({
+            "player.bullet_secret_opacity": configData[i].key_value,
+          });
         }
       }
     });
   };
 
+  const onSwitchChange = (checked: boolean) => {
+    if (checked) {
+      form.setFieldsValue({ "player.is_enabled_bullet_secret": 1 });
+    } else {
+      form.setFieldsValue({ "player.is_enabled_bullet_secret": 0 });
+    }
+  };
+
   const onFinish = (values: any) => {
     if (loading) {
       return;
@@ -83,41 +130,82 @@ export const SystemIndexPage: React.FC = () => {
             onFinishFailed={onFinishFailed}
             autoComplete="off"
           >
-            <Form.Item
-              label="网站Logo"
-              name="system.logo"
-              labelCol={{ style: { marginTop: 8, marginLeft: 61 } }}
-            >
-              <div className="d-flex">
-                {logo && (
+            {logo && (
+              <Form.Item
+                style={{ marginBottom: 30 }}
+                label="网站Logo"
+                name="system.logo"
+                labelCol={{ style: { marginTop: 8, marginLeft: 61 } }}
+              >
+                <div className="d-flex">
                   <Image preview={false} width={150} height={50} src={logo} />
-                )}
-                <div className="d-flex ml-24">
-                  <UploadImageButton
-                    onSelected={(url) => {
-                      setLogo(url);
-                      form.setFieldsValue({ "system.logo": url });
-                    }}
-                  ></UploadImageButton>
+                  <div className="d-flex ml-24">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setLogo(url);
+                        form.setFieldsValue({ "system.logo": url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
+                  <div className="helper-text ml-24">
+                    （推荐尺寸:240x80px，支持JPG、PNG）
+                  </div>
                 </div>
-                <div className="helper-text ml-24">
-                  （推荐尺寸:240x80px，支持JPG、PNG）
+              </Form.Item>
+            )}
+            {!logo && (
+              <Form.Item
+                style={{ marginBottom: 30 }}
+                label="网站Logo"
+                name="system.logo"
+              >
+                <div className="d-flex">
+                  <div className="d-flex ml-24">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setLogo(url);
+                        form.setFieldsValue({ "system.logo": url });
+                      }}
+                    ></UploadImageButton>
+                  </div>
+                  <div className="helper-text ml-24">
+                    （推荐尺寸:240x80px，支持JPG、PNG）
+                  </div>
                 </div>
-              </div>
-            </Form.Item>
-            <Form.Item label="网站标题" name="system.name">
+              </Form.Item>
+            )}
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="网站标题"
+              name="system.name"
+            >
               <Input style={{ width: 274 }} placeholder="请填写网站标题" />
             </Form.Item>
-            <Form.Item label="API访问地址" name="system.api_url">
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="API访问地址"
+              name="system.api_url"
+            >
               <Input style={{ width: 274 }} placeholder="请填写API访问地址" />
             </Form.Item>
-            <Form.Item label="PC端访问地址" name="system.pc_url">
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="PC端访问地址"
+              name="system.pc_url"
+            >
               <Input style={{ width: 274 }} placeholder="请填写PC端访问地址" />
             </Form.Item>
-            <Form.Item label="H5端访问地址" name="system.h5_url">
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="H5端访问地址"
+              name="system.h5_url"
+            >
               <Input style={{ width: 274 }} placeholder="请填写H5端访问地址" />
             </Form.Item>
-            <Form.Item wrapperCol={{ offset: 4, span: 18 }}>
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              wrapperCol={{ offset: 4, span: 18 }}
+            >
               <Button type="primary" htmlType="submit" loading={loading}>
                 保存
               </Button>
@@ -129,7 +217,110 @@ export const SystemIndexPage: React.FC = () => {
     {
       key: "2",
       label: `播放设置`,
-      children: <div className="float-left mt-24"></div>,
+      children: (
+        <div className="float-left mt-24">
+          <Form
+            form={form}
+            name="basic"
+            labelCol={{ span: 3 }}
+            wrapperCol={{ span: 21 }}
+            style={{ width: 1000 }}
+            initialValues={{ remember: true }}
+            onFinish={onFinish}
+            onFinishFailed={onFinishFailed}
+            autoComplete="off"
+          >
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="启用跑马灯"
+              name="player.is_enabled_bullet_secret"
+              valuePropName="checked"
+            >
+              <div className="d-flex">
+                <Switch onChange={onSwitchChange} />
+                <div className="helper-text ml-24">
+                  （打开后播放器会随机出现跑马灯水印，以防录屏传播）
+                </div>
+              </div>
+            </Form.Item>
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="跑马灯内容"
+              name="player.bullet_secret_text"
+            >
+              <div className="d-flex">
+                <Input style={{ width: 274 }} placeholder="自定义跑马灯内容" />
+                <Checkbox className="ml-24">姓名</Checkbox>
+                <Checkbox className="ml-24">邮箱</Checkbox>
+                <Checkbox className="ml-24">身份证号</Checkbox>
+              </div>
+            </Form.Item>
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="跑马灯颜色"
+              name="player.bullet_secret_color"
+            >
+              {/* <Colorpicker /> */}
+            </Form.Item>
+            <Form.Item
+              style={{ marginBottom: 30 }}
+              label="跑马灯透明度"
+              name="player.bullet_secret_opacity"
+            >
+              {/* <Colorpicker /> */}
+            </Form.Item>
+            {thumb && (
+              <Form.Item
+                style={{ marginBottom: 30 }}
+                label="播放器封面"
+                name="player.poster"
+                labelCol={{ style: { marginTop: 75, marginLeft: 42 } }}
+              >
+                <div className="d-flex">
+                  <Image preview={false} width={320} height={180} src={thumb} />
+                  <div className="d-flex ml-24">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setThumb(url);
+                        form.setFieldsValue({ "player.poster": url });
+                      }}
+                    ></UploadImageButton>
+                    <div className="helper-text ml-24">
+                      （推荐尺寸:19200x1080px，视频播放未开始时展示）
+                    </div>
+                  </div>
+                </div>
+              </Form.Item>
+            )}
+            {!thumb && (
+              <Form.Item
+                style={{ marginBottom: 30 }}
+                label="播放器封面"
+                name="player.poster"
+              >
+                <div className="d-flex">
+                  <div className="d-flex">
+                    <UploadImageButton
+                      onSelected={(url) => {
+                        setThumb(url);
+                        form.setFieldsValue({ "player.poster": url });
+                      }}
+                    ></UploadImageButton>
+                    <div className="helper-text ml-24">
+                      （推荐尺寸:19200x1080px，视频播放未开始时展示）
+                    </div>
+                  </div>
+                </div>
+              </Form.Item>
+            )}
+            <Form.Item wrapperCol={{ offset: 3, span: 21 }}>
+              <Button type="primary" htmlType="submit" loading={loading}>
+                保存
+              </Button>
+            </Form.Item>
+          </Form>
+        </div>
+      ),
     },
   ];