美化会话回放样式

web/src/components/session/OfflineSession.js

@@ -475,6 +475,7 @@ class OfflineSession extends Component {
                     />
 
                     <Modal
+                        className='monitor'
                         title="会话回放"
                         centered
                         visible={this.state.playbackVisible}

web/src/components/session/Playback.js

@@ -1,9 +1,22 @@
 import React, {Component} from 'react';
 import Guacamole from "guacamole-common-js";
 import {server} from "../../common/constants";
+import {Button, Col, Row, Slider, Typography} from "antd";
+import {PauseCircleOutlined, PlayCircleOutlined} from '@ant-design/icons';
+import {Tooltip} from "antd/lib/index";
+
+const {Text} = Typography;
 
 class Playback extends Component {
 
+    state = {
+        playPauseIcon: <PlayCircleOutlined/>,
+        playPauseIconTitle: '播放',
+        recording: undefined,
+        percent: 0,
+        max: 0,
+    }
+
     componentDidMount() {
         let sessionId = this.props.sessionId;
         this.initPlayer(sessionId);
@@ -16,12 +29,7 @@ class Playback extends Component {
     initPlayer(sessionId) {
         var RECORDING_URL = `${server}/sessions/${sessionId}/recording`;
 
-        var player = document.getElementById('player');
         var display = document.getElementById('display');
-        var playPause = document.getElementById('play-pause');
-        var position = document.getElementById('position');
-        var positionSlider = document.getElementById('position-slider');
-        var duration = document.getElementById('duration');
 
         var tunnel = new Guacamole.StaticHTTPTunnel(RECORDING_URL);
         var recording = new Guacamole.SessionRecording(tunnel);
@@ -87,22 +95,25 @@ class Playback extends Component {
         recording.connect();
 
         // If playing, the play/pause button should read "Pause"
-        recording.onplay = function () {
+        recording.onplay = () => {
-            playPause.textContent = 'Pause';
+            // 暂停
+            this.setState({
+                playPauseIcon: <PauseCircleOutlined/>,
+                playPauseIconTitle: '暂停',
+            })
         };
 
         // If paused, the play/pause button should read "Play"
-        recording.onpause = function () {
+        recording.onpause = () => {
-            playPause.textContent = 'Play';
+            // 播放
+            this.setState({
+                playPauseIcon: <PlayCircleOutlined/>,
+                playPauseIconTitle: '播放',
+            })
         };
 
         // Toggle play/pause when display or button are clicked
-        display.onclick = playPause.onclick = function () {
+        display.onclick = this.handlePlayPause;
-            if (!recording.isPlaying())
-                recording.play();
-            else
-                recording.pause();
-        };
 
         // Fit display within containing div
         recordingDisplay.onresize = function displayResized(width, height) {
@@ -113,36 +124,59 @@ class Playback extends Component {
 
             // Scale display to fit width of container
             recordingDisplay.scale(display.offsetWidth / width);
-
         };
 
-        // Update slider and status when playback position changes
+        recording.onseek = (millis) => {
-        recording.onseek = function positionChanged(millis) {
+            this.setState({
-            position.textContent = formatTime(millis);
+                percent: millis,
-            positionSlider.value = millis;
+                position: formatTime(millis)
+            })
         };
 
-        // Update slider and status when duration changes
+        recording.onprogress = (millis) => {
-        recording.onprogress = function durationChanged(millis) {
+            this.setState({
-            duration.textContent = formatTime(millis);
+                max: millis,
-            positionSlider.max = millis;
+                duration: formatTime(millis)
+            })
         };
 
-        // Seek within recording if slider is moved
+        this.setState({
-        positionSlider.onchange = function sliderPositionChanged() {
+            recording: recording
+        })
+    }
 
+    handlePlayPause = () => {
+        let recording = this.state.recording;
+        if (recording) {
+            if (this.state.percent === this.state.max) {
+                // 重播
+                console.log('重新播放')
+                this.setState({
+                    percent: 0
+                }, () => {
+                    recording.seek(0, () => {
+                        recording.play();
+                    });
+                });
+            }
+
+            if (!recording.isPlaying()) {
+                recording.play();
+            } else {
+                recording.pause();
+            }
+        }
+    }
+
+    handleProgressChange = (value) => {
+        let recording = this.state.recording;
+        if (recording) {
             // Request seek
-            recording.seek(positionSlider.value, function seekComplete() {
+            recording.seek(value, () => {
-
+                console.log('complete');
-                // Seek has completed
-                player.className = '';
-
             });
+        }
 
-            // Seek is in progress
-            player.className = 'seeking';
-
-        };
     }
 
     render() {
@@ -157,14 +191,21 @@ class Playback extends Component {
                         </div>
                     </div>
 
-                    <div className="controls">
+                    <Row justify="space-around" align="middle" style={{marginLeft: 7, marginRight: 7, marginTop: 3}}
-                        <button id="play-pause">Play</button>
+                         gutter={[5, 5]}>
-                        <input id="position-slider" type="range"/>
+                        <Col flex="none">
-                        <span id="position">00:00</span>
+                            <Tooltip title={this.state.playPauseIconTitle}>
-                        <span>/</span>
+                                <Button size='small' onClick={this.handlePlayPause} icon={this.state.playPauseIcon}/>
-                        <span id="duration">00:00</span>
+                            </Tooltip>
-                    </div>
+                        </Col>
-
+                        <Col flex="auto">
+                            <Slider value={this.state.percent} max={this.state.max} tooltipVisible={false}
+                                    onChange={this.handleProgressChange}/>
+                        </Col>
+                        <Col flex='none'>
+                            <Text>{this.state.position}</Text>/ <Text>{this.state.duration}</Text>
+                        </Col>
+                    </Row>
                 </div>
             </div>
         );