player: improve volume slider, fix native player button

4 files changed, 53 insertions, 5 deletions

diff --git a/server/src/routes/ui/player.rs b/server/src/routes/ui/player.rs
index 1ef0149..80386ad 100644
--- a/server/src/routes/ui/player.rs
+++ b/server/src/routes/ui/player.rs
@@ -39,6 +39,7 @@ pub struct PlayerConfig {
     pub v: Option<TrackID>,
     pub s: Option<TrackID>,
     pub t: Option<f64>,
+    pub kind: Option<PlayerKind>,
 }
 
 impl PlayerConfig {
@@ -93,7 +94,7 @@ pub fn r_player<'a>(
         ))))
     };
 
-    match sess.user.player_preference {
+    match conf.kind.unwrap_or(sess.user.player_preference) {
         PlayerKind::Browser => (),
         PlayerKind::Native => {
             return native_session("player");
diff --git a/web/script/player/mod.ts b/web/script/player/mod.ts
index fa83a2b..7a0e8fd 100644
--- a/web/script/player/mod.ts
+++ b/web/script/player/mod.ts
@@ -81,7 +81,13 @@ function initialize_player(el: HTMLElement, node_id: string) {
             slider.valueAsNumber = player.video.volume
             slider.onchange = () => player.video.volume = slider.valueAsNumber
             slider.onmousemove = () => player.video.volume = slider.valueAsNumber
-            return [e("div", { class: "jsp-controlgroup" }, e("label", "Volume", slider))]
+            return [e("div", { class: ["jsp-controlgroup", "jsp-volumecontrol"] },
+                e("label", `Volume`),
+                e("span", { class: "jsp-volume" }, player.volume.map(v =>
+                    `${(v * 100).toFixed(2)}% | ${v == 0 ? "-∞" : (Math.log2(v) * 10).toFixed(2)}dB` as string
+                )),
+                slider
+            )]
         }
 
         new Popup(button, popups, () =>
@@ -119,7 +125,7 @@ function initialize_player(el: HTMLElement, node_id: string) {
             playersync_controls(sync_state, player),
             e("button", "Launch Native Player", {
                 onclick: () => {
-                    window.location.href = `jellynative://player-fullscreen/${window.location.protocol}//${window.location.host}/n/${encodeURIComponent(node_id)}/stream?format=hlsmaster`
+                    window.location.href = `?kind=nativefullscreen`
                 }
             })
         ))
@@ -257,4 +263,4 @@ function show_profile(profile: EncodingProfile): string {
     if (profile.video) return `codec=${profile.video.codec} br=${show.metric(profile.video.bitrate, "b/s")} w=${profile.video.width} preset=${profile.video.preset}`
     if (profile.subtitles) return `codec=${profile.subtitles.codec}`
     return `???`
-}
+}
\ No newline at end of file
diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index a5bccdb..367ae04 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -23,6 +23,7 @@ export class Player {
 
     public position = new OVar(0)
     public duration = new OVar(1)
+    public volume = new OVar(0)
     public playing = new OVar(false)
     public canplay = new OVar(false)
     public error = new OVar<string | undefined>(undefined)
@@ -34,6 +35,17 @@ export class Player {
     }
 
     constructor(public node_id: string, public logger?: Logger<string>) {
+        this.volume.value = this.video.volume
+        let skip_change = false;
+        this.volume.onchange(v => {
+            if (!skip_change) this.video.volume = v
+            skip_change = false
+        })
+        this.video.onvolumechange = () => {
+            skip_change = true;
+            this.volume.value = this.video.volume
+        }
+
         this.video.onloadedmetadata = () => { }
         this.video.ondurationchange = () => { }
         this.video.ontimeupdate = () => {
@@ -129,7 +141,7 @@ export class Player {
             this.set_pers()
         })
     }
-    
+
     async update(newt?: number) {
         await Promise.all(this.active_tracks.value.map(t => t.update(newt ?? this.video.currentTime)))
     }
diff --git a/web/style/js-player.css b/web/style/js-player.css
index 1d205a8..e2c5c10 100644
--- a/web/style/js-player.css
+++ b/web/style/js-player.css
@@ -207,3 +207,32 @@ ul.jsp-track-list {
 ul.jsp-track-list li.active {
     background-color: #047a0073;
 }
+
+.jsp-volumecontrol input {
+    appearance: none;
+    width: 100%;
+    height: 24px;
+    background-color: black;
+    opacity: 0.5;
+    outline: none;
+}
+.jsp-volumecontrol input:hover {
+    opacity: 1;
+}
+.jsp-volumecontrol input::-webkit-slider-thumb,
+.jsp-volumecontrol input::-moz-range-thumb {
+    width: 24px;
+    height: 24px;
+    border-radius: 0px;
+    background-color: #06ad00;
+    cursor: ew-resize;
+    border: 0px solid transparent;
+}
+
+.jsp-volume {
+    display: inline-block;
+    margin-left: 2em;
+    font-family: monospace;
+    font-size: large;
+    width: 20em;
+}