From 034fc50ae7a7549d383fc35c8e4cb0ea905a91dc Mon Sep 17 00:00:00 2001
From: Fabio Ambauen <1833932+open-dynaMIX@users.noreply.github.com>
Date: Sat, 14 Aug 2021 14:23:50 +0200
Subject: [PATCH] fix: button text should not be selectable

---
 webui-page/index.html | 46 +++++++++++++++++++++----------------------
 webui-page/webui.css  |  9 +++++++++
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/webui-page/index.html b/webui-page/index.html
index 9aab1ce..6189756 100644
--- a/webui-page/index.html
+++ b/webui-page/index.html
@@ -26,27 +26,27 @@
       <table class="playlist-control">
         <tr>
           <td>
-              <div onClick="send('toggle_pause')" class="button green content icon-content playPauseButton playlist-controls">
+              <div onClick="send('toggle_pause')" class="button unselectable green content icon-content playPauseButton playlist-controls">
                 <i class="fas fa-play"></i><i class="fas fa-pause"></i>
               </div>
           </td>
           <td>
-              <div onClick="playlist_loop_cycle()" class="button blue content icon-content playlist-controls playlistLoopButton">
+              <div onClick="playlist_loop_cycle()" class="button unselectable blue content icon-content playlist-controls playlistLoopButton">
                 <i class="fas fa-redo-alt"></i>
               </div>
           </td>
           <td>
-              <div onClick="send('playlist_shuffle')" class="button blue content icon-content playlist-controls">
+              <div onClick="send('playlist_shuffle')" class="button unselectable blue content icon-content playlist-controls">
                 <i class="fas fa-random"></i>
               </div>
           </td>
           <td>
-              <div onClick="send('quit')" class="button violet content icon-content playlist-controls">
+              <div onClick="send('quit')" class="button unselectable violet content icon-content playlist-controls">
                 <i class="fas fa-power-off"></i>
               </div>
           </td>
           <td>
-              <div onClick="toggleOverlay('playlist-overlay')" class="button violet content icon-content playlist-controls">
+              <div onClick="toggleOverlay('playlist-overlay')" class="button unselectable violet content icon-content playlist-controls">
                 <i class="fas fa-times-circle"></i>
               </div>
           </td>
@@ -138,100 +138,100 @@ <h3 id="album">Album</h3>
       </div>
     </div>
 
-    <div onClick="send('toggle_pause')" class="button full-width green" title="Play/Pause (Space)">
+    <div onClick="send('toggle_pause')" class="button unselectable full-width green" title="Play/Pause (Space)">
       <div class="content icon-content playPauseButton">
         <i class="fas fa-play"></i><i class="fas fa-pause"></i>
       </div>
     </div>
 
-    <div onClick="send('seek', '-10')" class="button left blue" title="Rewind 10 sec (ArrowLeft)">
+    <div onClick="send('seek', '-10')" class="button unselectable left blue" title="Rewind 10 sec (ArrowLeft)">
       <div class="content icon-content">
         <i class="fas fa-backward"></i>
       </div>
     </div>
-    <div onClick="send('seek', '10')" class="button right blue" title="Forward 10 sec (ArrowRight)">
+    <div onClick="send('seek', '10')" class="button unselectable right blue" title="Forward 10 sec (ArrowRight)">
       <div class="content icon-content">
         <i class="fas fa-forward"></i>
       </div>
     </div>
 
-    <div onClick="send('add_chapter', '-1')" class="button left blue chapter" title="Previous chapter">
+    <div onClick="send('add_chapter', '-1')" class="button unselectable left blue chapter" title="Previous chapter">
       <div class="content icon-content">
         <i class="fas fa-step-backward"></i>
       </div>
     </div>
-    <div onClick="send('add_chapter', '1')" class="button right blue chapter" title="Next chapter">
+    <div onClick="send('add_chapter', '1')" class="button unselectable right blue chapter" title="Next chapter">
       <div class="content icon-content">
         <i class="fas fa-step-forward"></i>
       </div>
     </div>
 
-    <div onClick="send('playlist_prev')" class="button left blue" title="Previous playlist (p)">
+    <div onClick="send('playlist_prev')" class="button unselectable left blue" title="Previous playlist (p)">
       <div class="content icon-content">
         <i class="fas fa-fast-backward"></i>
       </div>
     </div>
-    <div onClick="send('playlist_next')" class="button right blue" title="Next playlist (n)">
+    <div onClick="send('playlist_next')" class="button unselectable right blue" title="Next playlist (n)">
       <div class="content icon-content">
         <i class="fas fa-fast-forward"></i>
       </div>
     </div>
 
-    <div onClick="send('speed_adjust', '0.9091')" class="button button-x3 left blue" title="Slower playback speed ([)">
+    <div onClick="send('speed_adjust', '0.9091')" class="button unselectable button-x3 left blue" title="Slower playback speed ([)">
       <div class="content text-content slant-left">
         Slower
       </div>
     </div>
-    <div onClick="send('speed_set')" class="button button-x3 center blue" title="Normal playback speed (Backspace)">
+    <div onClick="send('speed_set')" class="button unselectable button-x3 center blue" title="Normal playback speed (Backspace)">
       <div class="content text-content">
         Normal
       </div>
     </div>
-    <div onClick="send('speed_adjust', '1.1')" class="button button-x3 right blue" title="Faster playback speed (])">
+    <div onClick="send('speed_adjust', '1.1')" class="button unselectable button-x3 right blue" title="Faster playback speed (])">
       <div class="content text-content slant-right">
         Faster
       </div>
     </div>
 
-    <div onClick="send('cycle_sub')" class="button left violet" title="Cycle subtitles (j)">
+    <div onClick="send('cycle_sub')" class="button unselectable left violet" title="Cycle subtitles (j)">
       <div id="nextSub" class="content text-content">
         Next sub
       </div>
     </div>
-    <div onClick="send('cycle_audio')" class="button right violet">
+    <div onClick="send('cycle_audio')" class="button unselectable right violet">
       <div id="nextAudio" class="content text-content">
         Next audio
       </div>
     </div>
 
-    <div onClick="send('add_sub_delay', '-0.05')" class="button left yellow">
+    <div onClick="send('add_sub_delay', '-0.05')" class="button unselectable left yellow">
       <div class="content text-content">
         Sub delay -
       </div>
     </div>
-    <div onClick="send('add_sub_delay', '0.05')" class="button right yellow">
+    <div onClick="send('add_sub_delay', '0.05')" class="button unselectable right yellow">
       <div class="content text-content">
         Sub delay +
       </div>
     </div>
 
-    <div onClick="send('add_audio_delay', '-0.05')" class="button left yellow">
+    <div onClick="send('add_audio_delay', '-0.05')" class="button unselectable left yellow">
       <div class="content text-content">
         Audio delay -
       </div>
     </div>
-    <div onClick="send('add_audio_delay', '0.05')" class="button right yellow">
+    <div onClick="send('add_audio_delay', '0.05')" class="button unselectable right yellow">
       <div class="content text-content">
         Audio delay +
       </div>
     </div>
 
-    <div onClick="send('fullscreen')" class="button left gray" title="Toggle fullscreen (f)">
+    <div onClick="send('fullscreen')" class="button unselectable left gray" title="Toggle fullscreen (f)">
       <div id="fullscreenButton" class="content text-content">
         Fullscreen
       </div>
     </div>
-    <div onClick="send('cycle_audio_device')" class="button right gray">
+    <div onClick="send('cycle_audio_device')" class="button unselectable right gray">
       <div class="content text-content">
         Audio device
       </div>
diff --git a/webui-page/webui.css b/webui-page/webui.css
index 55b40e6..8569089 100644
--- a/webui-page/webui.css
+++ b/webui-page/webui.css
@@ -94,6 +94,15 @@ h4 {
   white-space: nowrap;
 }
 
+.unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 .button-x3 {
   width: 32%;
 }