safebox/guacamole-client
4
0
Fork 0
mirror of https://github.com/gyurix1968/guacamole-client.git synced 2025-09-06 05:07:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

GUACAMOLE-346: Add "paused" notification to example player.

Browse Source
This commit is contained in:
Michael Jumper
2017-07-15 17:32:03 -07:00
parent be9124d599
commit 768974711c
3 changed files with 35 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
doc/guacamole-playback-example/src/main/webapp/index.html
View File

@@ -28,7 +28,7 @@
<body>
<!-- Guacamole recording player -->
<div class="player">
<div id="player" class="paused">
<!-- Player display -->
<div id="display">
@@ -39,6 +39,9 @@
<button id="cancel-seek">Cancel</button>
</p>
</div>
<div class="paused-notification">
<p>Paused.</p>
</div>
</div>
</div>

32
doc/guacamole-playback-example/src/main/webapp/playback.css
View File

@@ -17,15 +17,15 @@
* under the License.
*/
.player {
#player {
width: 640px;
}
.player #display {
#display {
position: relative;
}
.player .notification-container {
#player .notification-container {
position: absolute;
z-index: 1;
top: 0;
@@ -34,7 +34,8 @@
bottom: 0;
}
.player .seek-notification {
#player .paused-notification,
#player .seek-notification {
color: white;
background: rgba(0, 0, 0, 0.75);
@@ -45,18 +46,23 @@
}
.player #display.seeking .seek-notification {
#player.seeking .seek-notification {
display: table;
}
.player .seek-notification p {
#player.paused .paused-notification {
display: table;
}
#player .paused-notification p,
#player .seek-notification p {
display: table-cell;
text-align: center;
vertical-align: middle;
font-family: sans-serif;
}
.player .controls {
#player .controls {
width: 100%;
@@ -87,11 +93,11 @@
}
.player .controls > * {
#player .controls > * {
margin: 0.25em;
}
.player .controls #position-slider {
#player .controls #position-slider {
-ms-flex: 1 1 auto;
-moz-box-flex: 1;
-webkit-box-flex: 1;
@@ -99,16 +105,16 @@
flex: 1 1 auto;
}
.player .controls #play-pause {
#player .controls #play-pause {
margin-left: 0;
min-width: 5em;
}
.player .controls #position,
.player .controls #duration {
#player .controls #position,
#player .controls #duration {
font-family: monospace;
}
.player .controls #duration {
#player .controls #duration {
margin-right: 0;
}

22
doc/guacamole-playback-example/src/main/webapp/playback.js
View File

@@ -27,6 +27,13 @@
*/
var RECORDING_URL = 'recording.guac';
/**
* The element representing the session recording player.
*
* @type Element
*/
var player = document.getElementById('player');
/**
* The element which will contain the recording display.
*
@@ -155,13 +162,13 @@
// If playing, the play/pause button should read "Pause"
recording.onplay = function() {
playPause.textContent = 'Pause';
display.classList.remove('seeking');
player.className = 'playing';
};
// If paused, the play/pause button should read "Play"
recording.onpause = function() {
playPause.textContent = 'Play';
display.classList.remove('seeking');
player.className = 'paused';
};
// Toggle play/pause when display or button are clicked
@@ -174,7 +181,7 @@
// Cancel seek operation when cancel button is clicked
cancelSeek.onclick = function cancelSeekOperation(e) {
display.classList.remove('seeking');
player.className = 'paused';
recording.pause();
e.stopPropagation();
};
@@ -207,15 +214,10 @@
positionSlider.onchange = function sliderPositionChanged() {
// Request seek
recording.seek(positionSlider.value, function seekComplete() {
// Seek has completed
display.classList.remove('seeking');
});
recording.seek(positionSlider.value);
// Seek is in progress
display.classList.add('seeking');
player.className = 'seeking';
};