From 4231dda4d7357ead93b3413819842f9a4339ae91 Mon Sep 17 00:00:00 2001
From: Corentin SORIANO <csoriano@apache.org>
Date: Sun, 26 Jan 2025 16:19:43 +0100
Subject: [PATCH] GUACAMOLE-2025: Add a button to close the recording video
 player.

---
 .../src/app/player/directives/player.js       | 10 ++++++
 .../frontend/src/app/player/styles/player.css | 31 +++++++++++++++++--
 .../src/app/player/templates/player.html      |  5 +++
 .../main/frontend/src/translations/en.json    |  1 +
 .../main/frontend/src/translations/fr.json    |  1 +
 5 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/guacamole/src/main/frontend/src/app/player/directives/player.js b/guacamole/src/main/frontend/src/app/player/directives/player.js
index 83acb68ae..8b4adb4ef 100644
--- a/guacamole/src/main/frontend/src/app/player/directives/player.js
+++ b/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) {
 
diff --git a/guacamole/src/main/frontend/src/app/player/styles/player.css b/guacamole/src/main/frontend/src/app/player/styles/player.css
index a1566810a..aeb6d0ad8 100644
--- a/guacamole/src/main/frontend/src/app/player/styles/player.css
+++ b/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);
+    /* Make room for the control bar at the bottom and close button at the top */
+    height: calc(100% - 88px);
 
 }
 
diff --git a/guacamole/src/main/frontend/src/app/player/templates/player.html b/guacamole/src/main/frontend/src/app/player/templates/player.html
index f002bd42c..15bac8553 100644
--- a/guacamole/src/main/frontend/src/app/player/templates/player.html
+++ b/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 }}"
diff --git a/guacamole/src/main/frontend/src/translations/en.json b/guacamole/src/main/frontend/src/translations/en.json
index b79f6184e..9d4320edb 100644
--- a/guacamole/src/main/frontend/src/translations/en.json
+++ b/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",
diff --git a/guacamole/src/main/frontend/src/translations/fr.json b/guacamole/src/main/frontend/src/translations/fr.json
index b8915c631..e7beefff5 100644
--- a/guacamole/src/main/frontend/src/translations/fr.json
+++ b/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",