播放配置初步

src/pages/dashboard/index.tsx

@@ -134,7 +134,7 @@ export const Dashboard: React.FC<any> = () => {
   };
 
   const compareNum = (today: number, yesterday: number) => {
-    let num = today - yesterday;
+    let num = today - yesterday || 0;
     if (num < 0) {
       return (
         <span className="c-green">
@@ -150,6 +150,7 @@ export const Dashboard: React.FC<any> = () => {
         </span>
       );
     }
+    return 0;
   };
 
   return (
@@ -246,76 +247,238 @@ export const Dashboard: React.FC<any> = () => {
           </div>
           <div className="playedu-main-top mt-24" style={{ minHeight: 376 }}>
             <div className={styles["large-title"]}>今日学习排行</div>
-            {basicData.user_learn_top10 &&
-              basicData.user_learn_top10.length > 0 && (
-                <div className={styles["rank-list"]}>
-                  <div className={styles["half-list"]}>
-                    {basicData.user_learn_top10.map(
-                      (item: any, index: number) =>
-                        index <= 4 && (
-                          <div key={item.id} className={styles["rank-item"]}>
-                            <div className={styles["left-item"]}>
-                              {index === 0 && (
-                                <img
-                                  className={styles["item-icon"]}
-                                  src={iconN1}
-                                  alt=""
-                                />
-                              )}
-                              {index === 1 && (
-                                <img
-                                  className={styles["item-icon"]}
-                                  src={iconN2}
-                                  alt=""
-                                />
-                              )}
-                              {index === 2 && (
-                                <img
-                                  className={styles["item-icon"]}
-                                  src={iconN3}
-                                  alt=""
-                                />
-                              )}
-                              {index > 2 && (
-                                <div className={styles["item-num"]}>
-                                  {index}
-                                </div>
-                              )}
-                              <div className={styles["item-name"]}>
-                                {item.user_id}
-                              </div>
-                            </div>
-                            <div className={styles["item-time"]}>
-                              {timeFormat(Number(item.duration) / 1000)}
-                            </div>
-                          </div>
-                        )
-                    )}
-                  </div>
-                  {basicData.user_learn_top10.length > 5 && (
-                    <div className={styles["half-list"]}>
-                      {basicData.user_learn_top10.map(
-                        (item: any, index: number) =>
-                          index > 4 && (
-                            <div key={item.id} className={styles["rank-item"]}>
-                              <div className={styles["left-item"]}>
-                                <div className={styles["item-num"]}>
-                                  {index}
-                                </div>
-                                <div className={styles["item-name"]}>
-                                  {item.user_id}
-                                </div>
-                              </div>
-                              <div className={styles["item-time"]}>
-                                {timeFormat(Number(item.duration) / 1000)}
-                              </div>
-                            </div>
-                          )
+            <div className={styles["rank-list"]}>
+              {basicData.user_learn_top10 && (
+                <div className={styles["half-list"]}>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <img
+                        className={styles["item-icon"]}
+                        src={iconN1}
+                        alt=""
+                      />
+                      {basicData.user_learn_top10[0] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[0].user_id
+                            ].name
+                          }
+                        </div>
                       )}
                     </div>
-                  )}
+                    {basicData.user_learn_top10[0] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[0].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <img
+                        className={styles["item-icon"]}
+                        src={iconN2}
+                        alt=""
+                      />
+                      {basicData.user_learn_top10[1] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[1].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[1] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[1].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <img
+                        className={styles["item-icon"]}
+                        src={iconN3}
+                        alt=""
+                      />
+                      {basicData.user_learn_top10[2] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[2].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[2] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[2].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>4</div>
+                      {basicData.user_learn_top10[3] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[3].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[3] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[3].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>5</div>
+                      {basicData.user_learn_top10[4] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[4].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[4] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[4].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
                 </div>
               )}
+              {basicData.user_learn_top10 && (
+                <div className={styles["half-list"]}>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>6</div>
+                      {basicData.user_learn_top10[5] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[5].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[5] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[5].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>7</div>
+                      {basicData.user_learn_top10[6] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[6].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[6] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[6].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>8</div>
+                      {basicData.user_learn_top10[7] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[7].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[7] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[7].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>9</div>
+                      {basicData.user_learn_top10[8] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[8].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[8] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[8].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                  <div className={styles["rank-item"]}>
+                    <div className={styles["left-item"]}>
+                      <div className={styles["item-num"]}>10</div>
+                      {basicData.user_learn_top10[9] && (
+                        <div className={styles["item-name"]}>
+                          {
+                            basicData.user_learn_top10_users[
+                              basicData.user_learn_top10[9].user_id
+                            ].name
+                          }
+                        </div>
+                      )}
+                    </div>
+                    {basicData.user_learn_top10[9] && (
+                      <div className={styles["item-time"]}>
+                        {timeFormat(
+                          Number(basicData.user_learn_top10[9].duration) / 1000
+                        )}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              )}
+            </div>
           </div>
         </Col>
         <Col span={12}>

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>
+      ),
     },
   ];
 

src/utils/index.ts

@@ -31,8 +31,13 @@ export function timeFormat(dateStr: number) {
     "秒";
 
   if (Math.floor(d.asDays()) === 0) {
-    value = d.hours() + "时" + d.minutes() + "分" + d.seconds() + "秒";
+    if (d.hours() == 0) {
+      value = d.minutes() + "分" + d.seconds() + "秒";
+    } else {
+      value = d.hours() + "时" + d.minutes() + "分" + d.seconds() + "秒";
+    }
   }
+
   return value;
 }