feat(ScreenPlayer): 添加tools鼠标事件

src/components/Player/ScreenPlayer.tsx

@@ -4,6 +4,15 @@ import LivePlayer from './index';
 import { Radio } from 'antd';
 import { useFullscreen } from 'ahooks';
 import './index.less';
+import {
+  CaretLeftOutlined,
+  CaretUpOutlined,
+  CaretDownOutlined,
+  CaretRightOutlined,
+  PlusOutlined,
+  MinusOutlined,
+  AudioOutlined,
+} from '@ant-design/icons';
 
 type Player = {
   id?: string;
@@ -15,40 +24,16 @@ interface ScreenProps {
   id?: string;
   /**
    *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
+   * @param id 当前选中播发视频ID
+   * @param type 当前操作动作
    */
-  onLeft?: (id: string, type: boolean) => void;
+  onMouseDown?: (id: string, type: string) => void;
   /**
    *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
+   * @param id 当前选中播发视频ID
+   * @param type 当前操作动作
    */
-  onUp?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onRight?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onDown?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onZoomIn?: (id: string, type: boolean) => void;
-  /**
-   *
-   * @param id 当时播发视频ID
-   * @param type 鼠标按下状态，true 为按下， false 为松开
-   */
-  onZoomOut?: (id: string, type: boolean) => void;
+  onMouseLeave?: (id: string, type: string) => void;
 }
 
 export default (props: ScreenProps) => {
@@ -136,7 +121,117 @@ export default (props: ScreenProps) => {
           </div>
         </div>
       </div>
-      <div className={'live-player-tools'}></div>
+      <div className={'live-player-tools'}>
+        <div className={'direction'}>
+          <div
+            className={'direction-item up'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretUpOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item right'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretRightOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item left'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretLeftOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-item down'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <CaretDownOutlined className={'direction-icon'} />
+          </div>
+          <div
+            className={'direction-audio'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <AudioOutlined />
+          </div>
+        </div>
+        <div className={'zoom'}>
+          <div
+            className={'zoom-item zoom-in'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <PlusOutlined />
+          </div>
+          <div
+            className={'zoom-item zoom-out'}
+            onMouseDown={() => {
+              if (props.onMouseDown && props.id) {
+                props.onMouseDown(props.id, '');
+              }
+            }}
+            onMouseLeave={() => {
+              if (props.onMouseLeave && props.id) {
+                props.onMouseLeave(props.id, '');
+              }
+            }}
+          >
+            <MinusOutlined />
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/components/Player/index.less

@@ -1,4 +1,6 @@
+@import '~antd/es/style/themes/default.less';
 @padding: 20px;
+@grid-gap: 2px;
 
 .live-player-warp {
   display: flex;
@@ -59,6 +61,105 @@
 
   .live-player-tools {
     flex-basis: 290px;
-    padding: 50px 12px 0 12px;
+    padding: 50px 12px 0 40px;
+
+    .direction {
+      position: relative;
+      display: grid;
+      grid-gap: @grid-gap;
+      grid-template-rows: 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+      margin-bottom: 30px;
+      overflow: hidden;
+      border-radius: 50%;
+      transform: rotateZ(45deg);
+
+      .direction-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding-bottom: 100%;
+        font-size: 36px;
+        background-color: rgba(#000, 0.1);
+        transition: background-color 0.3s;
+
+        .direction-icon {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%) rotateZ(-45deg);
+        }
+      }
+
+      .direction-audio {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 45%;
+        height: 45%;
+        font-size: 30px;
+        background-color: #fff;
+        border-radius: 50%;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+
+      .zoom .zoom-item,
+      & .direction-item {
+        &:hover {
+          color: #fff;
+          background-color: @primary-color-hover;
+        }
+
+        &:active {
+          color: #fff;
+          background-color: @primary-color-active;
+        }
+      }
+
+      > div {
+        cursor: pointer;
+        &.disable {
+          color: @disabled-color;
+        }
+      }
+    }
+
+    .zoom {
+      display: grid;
+      grid-gap: @grid-gap;
+      grid-template-columns: 1fr 1fr;
+
+      .zoom-item {
+        padding: 8px 0;
+        font-size: 24px;
+        text-align: center;
+        background-color: rgba(#000, 0.1);
+        cursor: pointer;
+
+        &:hover {
+          color: #fff;
+          background-color: @primary-color-hover;
+        }
+
+        &:active {
+          color: #fff;
+          background-color: @primary-color-active;
+        }
+      }
+
+      .zoom-in {
+        border-top-left-radius: 4px;
+        border-bottom-left-radius: 4px;
+      }
+
+      .zoom-out {
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+    }
   }
 }

src/pages/media/SplitScreen/index.tsx

@@ -13,7 +13,6 @@ const SplitScreen = () => {
           <div className="right-content">
             <ScreenPlayer />
           </div>
-          ;
         </div>
       </Card>
     </PageContainer>