GUACAMOLE-2025: Add a button to close the recording video player.

Author: corentin-soriano

guacamole/src/main/frontend/src/app/player/directives/player.js

@@ -83,6 +83,8 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
     const keyEventDisplayService = $injector.get('keyEventDisplayService');
     const playerHeatmapService = $injector.get('playerHeatmapService');
     const playerTimeService = $injector.get('playerTimeService');
+    const $location         = $injector.get('$location');
+    const $routeParams      = $injector.get('$routeParams');
 
     /**
      * The number of milliseconds after the last detected mouse activity after
@@ -406,6 +408,14 @@ angular.module('player').directive('guacPlayer', ['$injector', function guacPlay
             }
         };
 
+        /**
+         * Close recording player and return to history.
+         */
+        $scope.closePlayer = function closePlayer() {
+            const datasource = encodeURIComponent($routeParams.dataSource);
+            $location.path('/settings/' + datasource + '/history');
+        };
+
         // Automatically load the requested session recording
         $scope.$watch('src', function srcChanged(src) {
 

guacamole/src/main/frontend/src/app/player/styles/player.css

@@ -83,6 +83,7 @@ guac-player .guac-player-controls {
     margin: 0;
 }
 
+.guac-player-controls .guac-player-close:hover,
 .guac-player-controls .guac-player-play:hover,
 .guac-player-controls .guac-player-pause:hover {
     background: rgba(255, 255, 255, 0.5);
@@ -113,6 +114,31 @@ guac-player .guac-player-controls {
     align-items: center;
 }
 
+.guac-player-controls .guac-player-close {
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    margin: 0;
+    min-width: 0;
+    padding: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+}
+
+.guac-player-controls .guac-player-close .close-icon {
+    background-image: url('images/x.svg');
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: 50%;
+    content: "";
+    cursor: pointer;
+    display: block;
+    height: 40px;
+    margin: 0;
+    width: 40px;
+}
+
 .guac-player-controls .guac-player-keys {
     margin-left: auto;
     padding-right: 0.5em;
@@ -190,11 +216,12 @@ guac-player-display {
 
 guac-player-text-view {
 
+    margin-top: 40px;
     min-width: 25em;
     flex-basis: 0;
 
     /* Make room for the control bar at the bottom */
-    height: calc(100% - 48px);
+    height: calc(100% - 88px);
 
 }
 

guacamole/src/main/frontend/src/app/player/templates/player.html

@@ -45,6 +45,11 @@
 
     <div class="guac-player-buttons">
 
+        <!-- Close button -->
+        <button class="guac-player-close"
+                ng-attr-title="{{ 'PLAYER.ACTION_CLOSE' | translate }}"
+                ng-click="closePlayer()"><span class="close-icon"></span></button>
+
         <!-- Play button -->
         <button class="guac-player-play"
                 ng-attr-title="{{ 'PLAYER.ACTION_PLAY' | translate }}"

guacamole/src/main/frontend/src/translations/en.json

@@ -486,6 +486,7 @@
     "PLAYER" : {
 
         "ACTION_CANCEL"       : "@:APP.ACTION_CANCEL",
+        "ACTION_CLOSE"        : "Close",
         "ACTION_PAUSE"        : "@:APP.ACTION_PAUSE",
         "ACTION_PLAY"         : "@:APP.ACTION_PLAY",
         "ACTION_SHOW_KEY_LOG" : "Keystroke Log",

guacamole/src/main/frontend/src/translations/fr.json

@@ -481,6 +481,7 @@
     "PLAYER" : {
 
         "ACTION_CANCEL"       : "@:APP.ACTION_CANCEL",
+        "ACTION_CLOSE"        : "Fermer",
         "ACTION_PAUSE"        : "@:APP.ACTION_PAUSE",
         "ACTION_PLAY"         : "@:APP.ACTION_PLAY",
         "ACTION_SHOW_KEY_LOG" : "Journal des frappes",