Proper volume control slider support

vicwomg · Dec 13, 2023 · e550a18 · e550a18
1 parent 535226b
commit e550a18
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 43 deletions.
diff --git a/app.py b/app.py
@@ -134,6 +134,7 @@ def nowplaying():
             "now_playing_url": k.now_playing_url,
             "is_paused": k.is_paused,
             "transpose_value": k.now_playing_transpose,
+            "volume": k.volume,
         }
         rc["hash"] = hash_dict(rc) # used to detect changes in the now playing data
         return json.dumps(rc)
@@ -241,6 +242,10 @@ def restart():
     k.restart()
     return redirect(url_for("home"))
 
+@app.route("/volume/<volume>")
+def volume(volume):
+    k.volume_change(float(volume))
+    return redirect(url_for("home"))
 
 @app.route("/vol_up")
 def vol_up():
@@ -647,7 +652,7 @@ def get_default_dl_dir(platform):
     platform = get_platform()
     default_port = 5555
     default_ffmpeg_port = 5556
-    default_volume = 0
+    default_volume = 0.85
     default_splash_delay = 3
     default_screensaver_delay = 300
     default_log_level = logging.INFO
@@ -690,7 +695,7 @@ def get_default_dl_dir(platform):
     parser.add_argument(
         "-v",
         "--volume",
-        help="Set initial player volume (default: %s)" % default_volume,
+        help="Set initial player volume. A value between 0 and 1. (default: %s)" % default_volume,
         default=default_volume,
         required=False,
     )
@@ -781,7 +786,7 @@ def get_default_dl_dir(platform):
     ),
     parser.add_argument(
         "--developer-mode",
-        help="Run in flask developer mode. Only useful for tweaking the web UI in real time. Will disable the splash screen due to pygame main thread conflicts and may require FLASK_ENV=development env variable for full dev mode features.",
+        help="Run in flask developer mode. Only useful for tweaking the web UI in real time. May require FLASK_ENV=development env variable for full dev mode features.",
         action="store_true",
         required=False,
     ),
@@ -807,9 +812,11 @@ def get_default_dl_dir(platform):
         print("Creating download path: " + dl_path)
         os.makedirs(dl_path)
 
-    if (args.developer_mode):
-        logging.warning("Splash screen is disabled in developer mode due to main thread conflicts")
-        args.hide_splash_screen = True
+    parsed_volume = float(args.volume)
+    if parsed_volume > 1 or parsed_volume < 0:
+        # logging.warning("Volume must be between 0 and 1. Setting to default: %s" % default_volume)
+        print(f"[ERROR] Volume: {args.volume} must be between 0 and 1. Setting to default: {default_volume}")
+        parsed_volume = default_volume
 
     # Configure karaoke process
     global k
@@ -820,7 +827,7 @@ def get_default_dl_dir(platform):
         youtubedl_path=args.youtubedl_path,
         splash_delay=args.splash_delay,
         log_level=args.log_level,
-        volume=args.volume,
+        volume=parsed_volume,
         hide_url=args.hide_url,
         hide_raspiwifi_instructions=args.hide_raspiwifi_instructions,
         hide_splash_screen=args.hide_splash_screen,

diff --git a/karaoke.py b/karaoke.py
@@ -51,7 +51,7 @@ class Karaoke:
     process = None
     qr_code_path = None
     base_path = os.path.dirname(__file__)
-    volume_offset = 0
+    volume = None
     loop_interval = 500  # in milliseconds
     default_logo_path = os.path.join(base_path, "logo.png")
     screensaver_timeout = 300 # in seconds
@@ -68,7 +68,7 @@ def __init__(
         hide_splash_screen=False,
         dual_screen=False,
         high_quality=False,
-        volume=0,
+        volume=0.85,
         log_level=logging.DEBUG,
         splash_delay=2,
         youtubedl_path="/usr/local/bin/yt-dlp",
@@ -89,7 +89,7 @@ def __init__(
         self.dual_screen = dual_screen
         self.high_quality = high_quality
         self.splash_delay = int(splash_delay)
-        self.volume_offset = volume
+        self.volume = volume
         self.youtubedl_path = youtubedl_path
         self.logo_path = self.default_logo_path if logo_path == None else logo_path
         self.hide_overlay = hide_overlay
@@ -121,7 +121,7 @@ def __init__(
     dual screen: {self.dual_screen}
     high quality video: {self.high_quality}
     download path: {self.download_path}
-    default volume: {self.volume_offset}
+    default volume: {self.volume}
     youtube-dl path: {self.youtubedl_path}
     logo path: {self.logo_path}
     log_level: {log_level}
@@ -579,8 +579,17 @@ def pause(self):
         else:
             logging.warning("Tried to pause, but no file is playing!")
             return False
+
+    def volume_change(self, vol_level):
+        self.volume = vol_level
+        logging.debug(f"Setting volume to: {self.volume}")
+        if self.is_file_playing():
+            self.now_playing_command = f"volume_change: {self.volume}"
+        return True
 
     def vol_up(self):
+        self.volume += 0.1
+        logging.debug(f"Increasing volume by 10%: {self.volume}")
         if self.is_file_playing():
             self.now_playing_command = "vol_up"
             return True
@@ -589,6 +598,8 @@ def vol_up(self):
             return False
 
     def vol_down(self):
+        self.volume -= 0.1
+        logging.debug(f"Decreasing volume by 10%: {self.volume}")
         if self.is_file_playing():
             self.now_playing_command = "vol_down"
             return True

diff --git a/templates/files.html b/templates/files.html
@@ -108,7 +108,7 @@ <h1>
     <td
       id="{{filename_from_path(song)[0].lower()}}"
       width="20px"
-      style="padding: 5px 0px"
+      style="padding: 5px 0px 5px 4px"
     >
       <a
         class="add-song-link has-text-weight-bold has-text-success"

diff --git a/templates/home.html b/templates/home.html
@@ -1,6 +1,7 @@
 {% extends 'base.html' %} {% block scripts %}
 <script>
   var nowPlayingHash = null;
+  var volume = 0.85;
 
   function getNowPlaying() {
     $.get('{{ url_for("nowplaying") }}', function (data) {
@@ -38,6 +39,21 @@
           $("#up-next").html("{{ _('No song is queued.') }}");
         }
 
+        if (obj.transpose_value != 0) {
+          $("#transpose").val(obj.transpose_value);
+          $("#semitones-label").html(getSemitonesLabel(obj.transpose_value));
+        } else {
+          $("#transpose").val(0);
+          $("#semitones-label").html(getSemitonesLabel(obj.transpose_value));
+        }
+
+        // set the volume slider to the current volume
+        if (obj.volume != volume) {
+          volume = obj.volume;
+          console.log("setting volume to " + volume);
+          $("#volume-slider").val(volume);
+        }
+
         if (obj.is_paused) {
           $("#pause-resume").removeClass("icon-pause");
           $("#pause-resume").addClass("icon-play");
@@ -75,6 +91,15 @@
       };
     }
 
+    $("#volume-slider").on(
+      "input",
+      _.debounce(function (event) {
+        const value = this.value;
+        $.get("/volume/" + value);
+        refreshNowPlaying();
+      }, 500)
+    );
+
     $("#submit-transpose").click(function () {
       var value;
       if (slider) {
@@ -98,10 +123,12 @@
 
     $("#vol-up").click(function () {
       $.get("/vol_up");
+      refreshNowPlaying();
     });
 
     $("#vol-down").click(function () {
       $.get("/vol_down");
+      refreshNowPlaying();
     });
 
     $("#restart").click(function () {
@@ -173,33 +200,35 @@ <h3>
 >
   {# MSG: Title of the box with controls such as pause and skip. #}
   <h4>{% trans %}Player Control{% endtrans %}</h4>
-  <p class="is-size-3">
-    {# MSG: Title attribute on the button to restart the current song. #}
-    <a title="{{ _('Restart Song') }}" id="restart"
-      ><i class="icon icon-to-start"></i> </a
-    >&nbsp;&nbsp; {# MSG: Title attribute on the button to play or pause the
-    current song. #}
-    <a title="{{ _('Play/Pause') }}"
-      ><i id="pause-resume" class="icon icon-pause"></i> </a
-    >&nbsp;&nbsp; {# MSG: Title attribute on the button to skip to the next
-    song. #}
-    <a title="{{ _('Stop Current Song') }}" id="skip"
-      ><i class="icon icon-to-end"></i> </a
-    >&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
-    <span class="is-pulled-right">
-      {# MSG: Title attribute on the button to adjust volume down. #}
-      <a title="{{ _('Volume Down') }}" id="vol-down"
-        ><i class="icon icon-volume-down"></i> </a
-      >&nbsp;&nbsp; {# MSG: Title attribute on the button to adjust volume up.
-      #}
-      <a title="{{ _('Volume Up') }}" id="vol-up"
-        ><i class="icon icon-volume-up"></i>
+  <div class="is-size-3" style="display: flex; justify-content: space-between">
+    <div class="is-size-3">
+      {# MSG: Title attribute on the button to restart the current song. #}
+      <a title="{{ _('Restart Song') }}" id="restart"
+        ><i class="icon icon-to-start"></i> </a
+      >&nbsp;&nbsp; {# MSG: Title attribute on the button to play or pause the
+      current song. #}
+      <a title="{{ _('Play/Pause') }}"
+        ><i id="pause-resume" class="icon icon-pause"></i> </a
+      >&nbsp;&nbsp; {# MSG: Title attribute on the button to skip to the next
+      song. #}
+      <a title="{{ _('Stop Current Song') }}" id="skip"
+        ><i class="icon icon-to-end"></i>
       </a>
-    </span>
-  </p>
-  <!-- </div> -->
-
-  <!-- <div class="has-background-black-bis box control-box" style="max-width: 500px"> -->
+    </div>
+    <div class="is-size-3" style="display: flex; align-items: center">
+      <i id="vol-down" class="icon icon-volume-down"></i>
+      <input
+        type="range"
+        min="0"
+        max="1"
+        value="0.85"
+        step="0.025"
+        id="volume-slider"
+        style="margin: 0 8px 0px 5px; width: 100px"
+      />
+      <i id="vol-up" class="icon icon-volume-up"></i>
+    </div>
+  </div>
   <hr />
   <div class="is-flex" style="justify-content: space-between">
     <div>

diff --git a/templates/splash.html b/templates/splash.html
@@ -20,6 +20,7 @@
   var showMenu = false;
   var menuButtonVisible = false;
   var confirmationDismissed = false;
+  var volume = 0.85;
 
   const url = `http://${window.location.host}`;
 
@@ -57,19 +58,16 @@
         console.log(obj);
 
         if (obj.now_playing) {
-          var nowPlayingHtml = `<div class="has-text-right"><b class="has-text-white">${obj.now_playing}</b></div><p class="has-text-success has-text-right">`;
+          var nowPlayingHtml = `<span>${obj.now_playing}</span> `;
 
           if (obj.transpose_value != 0) {
             nowPlayingHtml +=
-              // {# MSG: Label for display of how many semitones the song has been shifted. #}
               `<span class='is-size-6 has-text-success'><b>Key</b>: ` +
               getSemitonesLabel(obj.transpose_value) +
               "<span>";
           }
 
-          nowPlayingHtml += `<i class="icon icon-mic-1" title="Current singer"></i>${obj.now_playing_user}</p>`;
-
-          $("#now-playing-song").html(obj.now_playing);
+          $("#now-playing-song").html(nowPlayingHtml);
           $("#now-playing-singer").html(obj.now_playing_user);
           $("#now-playing").addClass("visible").removeClass("hidden");
         } else {
@@ -97,6 +95,10 @@
           isPlaying = true;
           $("#video-source").attr("src", obj.now_playing_url);
           video.load();
+          if (volume != obj.volume) {
+            volume = obj.volume;
+            video.volume = volume;
+          }
           video.play();
         }
 
@@ -138,6 +140,18 @@
             video.currentTime = 0;
           });
         }
+
+        // Handle volume change
+        if (
+          obj.now_playing_command &&
+          obj.now_playing_command.startsWith("volume_change:") &&
+          isPlaying
+        ) {
+          executeCommand(() => {
+            const volLevel = parseFloat(obj.now_playing_command.split(":")[1]);
+            video.volume = volLevel;
+          });
+        }
       }
 
       //handle screensaver