修复进度条短一块，增加倍速

src/pages/ElecEvaluation/Monitor/RoomDetail/index.tsx

@@ -195,6 +195,10 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     const [recordWidthRef, setRecordWidthRef] = useState<any>(1000);
     //进度条大小
     const currentScaleRef = useRef<any>(0);
+    //倍速
+    const [speed, setSpeed] = useState<any>(1);
+    //倍速序号
+    const speedindexRef = useRef<any>(0);
 
     const onCaremaPlay = (item: any) => {
         setCameraSelect(item.serialNumber);
@@ -311,13 +315,12 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                     setDeviceInfo(list[0]);
                     deviceInfoRef.current = list[0];
                     setCameraSelect(list[0].serialNumber);
-                    //setCameraParams(data[0].platform);
-                    //onGetLiveStream(baseData,list[0]);
-                    var i = 0;
-                    playerRefList.current.forEach((element) => {
-                        onGetLiveStream(baseData,list[i]?list[i]:null,element);
-                        i++;
-                    });
+                    onCaremaPlay(list[0]);
+                    // var i = 0;
+                    // playerRefList.current.forEach((element) => {
+                    //     onGetLiveStream(baseData,list[i]?list[i]:null,element);
+                    //     i++;
+                    // });
                     
                  }
             }
@@ -341,7 +344,9 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
         setTimeout(() => {
             player.play(options);
             if(basicInfoRef?.current.status == "2"){
+                setTimeout(() => {
                 jTimeLinePlayer();
+                }, 1000);
             }
           }, 1000);
         
@@ -430,6 +435,10 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
     }
 
     const jTimeLinePlayer = () =>{
+        
+        var container = document.getElementById("container0");
+        setRecordWidthRef(container?.clientWidth);
+
         //初始化回播组件
         jTimeLineRef.current = new JTimeLine();
         jTimeLineRef.current.init({
@@ -437,41 +446,26 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
             onChange: handleTimeChange,
         });
 
-        var container = document.getElementById("container0");
-        console.log("-----------------")
-        console.log(container?.clientWidth)
-        setRecordWidthRef(container?.clientWidth);
-
         jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });  
+        changeTimer();
+    }
 
+    const changeTimer = ()=> {
         if(timeLineTimerRef.current){
             clearInterval(timeLineTimerRef.current);
         }
 
         timeLineTimerRef.current = setInterval(() => {
             jTimeLineRef.current.run({ time: parseInt(playerRefList.current[0].getCurTimestamp()) });
-
-          }, timerMsRef.current);
+        }, timerMsRef.current);
     }
+
     const fullscreen = () => {
         playerRefList.current[0].fullscreen();
       }
     const infoPlayer = () =>{
         for(var i = 0 ; i < 1 ; i ++){
             playerRefList.current[i] = new Player(document.getElementById("container"+i),null);
-
-            
-            // playerRefList.current[i].event.on("GET_DEVICE_RECORD_LIST", (s) => {
-            //     let recordList = s;
-            //     console.log(s, "timelist");
-            //     //通过回调来传递时间轴数据 初始化时间轴
-            //     let recordArr = recordList.rec_file_infos;
-            //     recordArr.forEach((item) => {
-            //       item.startTime = dayjs(item.start_time).valueOf();
-            //       item.endTime = item.startTime + item.duration;
-            //     });
-            //     jTimeLineArr.current = recordArr;
-            //   });
         }
     }
 
@@ -500,6 +494,21 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
         currentScaleRef.current < 3 && (++currentScaleRef.current, mathchDot(currentScaleRef.current));
     }
 
+    const setSpeedFun = () =>{
+        if (playerRefList.current[0].getState() == 2) return;
+        const arr = ["1", "2", "4", "8", "4", "2", "1", "1/2", "1/4", "1/8", "1/4", "1/2"];
+        const arr2 = [1, 2, 4, 8, 4, 2, 1, 0.5, 0.25, 0.125, 0.25, 0.5];
+        speedindexRef.current++;
+        if (speedindexRef.current == 12) {
+            speedindexRef.current=0;
+        }
+        setSpeed(arr[speedindexRef.current]);
+  
+        playerRefList.current[0].setSpeed(arr2[speedindexRef.current] + "");
+        timerMsRef.current = 1000/arr2[speedindexRef.current];
+        changeTimer();
+    }
+
     useEffect(() => {
         if(timeLineTimerRef.current){
             clearInterval(timeLineTimerRef.current);
@@ -615,9 +624,14 @@ const MonitorRoomDetail: React.FC<{}> = (props: any) => {
                                         <i className="ico ico-jia" onClick= {()=>onAdd()}></i></div>:""}
                                     </div>
                                     <div>
-                                    <div className="item" content="全屏" >
+                                    <div className="item"  content="倍速" >
+                                        <button  className="speed" onClick= {()=>setSpeedFun()}>{speed}X</button>
                                         <i className="ico ico-quanping" onClick={() => fullscreen()}></i>
                                     </div>
+                                    
+                                    <div className="item" content="全屏" >
+                                        
+                                    </div>
                                     </div>
                                 </div>
                             </div>