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

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

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

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

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