Clickable sliders for progress and volume

.vscode/settings.json

@@ -9,6 +9,7 @@
     "Spotify",
     "asynchrome",
     "bestzip",
+    "elem",
     "unsave"
   ]
 }

src/amazon/agent.ts

@@ -79,7 +79,7 @@ class Agent {
   }
 
   public Rewind(target: number) {
-    let elem = (this._player.querySelector(".progress-bar") as HTMLElement);
+    let elem = (this._player.querySelector(".sliderTrack") as HTMLElement);
     this._logger.info(elem);
     this._logger.info("rewinding to target" + target);
     this._clickAt(elem, elem.offsetWidth * target);
@@ -214,11 +214,15 @@ class Agent {
   }
 
   private _clickAt = (elem: HTMLElement, x: number) => {
+    let box = elem.getBoundingClientRect() as DOMRect;
     this._logger.info("rewinding to width" + x);
-    this._logger.info("rewinding to offset" + (elem.offsetLeft + x));
-    let evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window, 0, elem.offsetLeft + x, 0, x, 6, false, false, false, false, 0, undefined);
-    elem.dispatchEvent(evt);
+    this._logger.info("rewinding to offset" + (box.x + x));
+    let down = document.createEvent("MouseEvents");
+    let up = document.createEvent("MouseEvents");
+    down.initMouseEvent("mousedown", true, true, window, null, 0, 0, box.x + x, box.y, false, false, false, false, 0, undefined);
+    up.initMouseEvent("mouseup", true, true, window, null, 0, 0, box.x + x, box.y, false, false, false, false, 0, undefined);
+    elem.dispatchEvent(down);
+    elem.dispatchEvent(up);
   }
 }
 

src/amazon/popup.css

@@ -160,7 +160,7 @@ i.fa {
   border-radius: 3px;
   background-color: #3e3e40;
   margin-bottom: 10px;
-  /*cursor: pointer;*/
+  cursor: pointer;
 }
 
 #track-elapsed {

src/background.ts

@@ -78,10 +78,18 @@ class Process {
       }
     });
 
+    console.info("Setting up notification listeners")
     chrome.notifications.onClicked.addListener((evt: any) => {
-      console.log(evt);
+      console.info("Notification clicked", evt);
       this._bus.send("idea.cmd.player.next");
     });
+    chrome.notifications.onButtonClicked.addListener((notificationId: string, buttonIndex: number) => {
+      console.info("Notification button clicked", { notificationId, buttonIndex });
+      this._bus.send("idea.cmd.player.next");
+    });
+    chrome.notifications.onClosed.addListener(function (notificationId: string, byUser: boolean) {
+      console.info("onClosed", { notificationId, byUser });
+    });
   }
 
   private subscribe() {
@@ -90,8 +98,27 @@ class Process {
     type InstalledEvent = { reason: "install" | "update" | "chrome_update" | "shared_module_update", previousVersion?: string, id?: string };
     chrome.runtime.onInstalled.addListener((e: InstalledEvent) => {
       this._logger.info("onInstalled event received", e);
+
+
+      console.info("Setting up notification listeners")
+      chrome.notifications.onClicked.addListener((evt: any) => {
+        console.info("Notification clicked", evt);
+        this._bus.send("idea.cmd.player.next");
+      });
+      chrome.notifications.onButtonClicked.addListener((notificationId: string, buttonIndex: number) => {
+        console.info("Notification button clicked", { notificationId, buttonIndex });
+        this._bus.send("idea.cmd.player.next");
+      });
     });
 
+    this._bus.on("idea.cmd.player.rewind", async (evt: any) => {
+      if (!this.tabId) return;
+      await Tabs.executeScript(this.tabId, { code: `agent.Rewind(${evt.location})` });
+    });
+    this._bus.on("idea.cmd.player.volume", async (evt: any) => {
+      if (!this.tabId) return;
+      await Tabs.executeScript(this.tabId, { code: `agent.SetVolume(${evt.level})` });
+    });
     this._bus.on("idea.cmd.player.toggle", async (evt: any) => {
       if (!this.tabId) return;
       await Tabs.executeScript(this.tabId, { code: "agent.Toggle()" });
@@ -130,14 +157,14 @@ class Process {
       let tracks = await Tabs.executeScript<Track>(this.tabId, { code: "agent.GetTrackInfo()" });
       if (!tracks || tracks.length < 1 || !tracks[0]) return;
 
-      let options = {
+      let options: chrome.notifications.NotificationOptions = {
         type: "progress",
         iconUrl: tracks[0].art,
         title: tracks[0].title,
         message: tracks[0].artist,
         contextMessage: "(click to skip)",
-        isClickable: true,
-        progress: Math.round(tracks[0].progress * 100)
+        progress: Math.round(tracks[0].progress * 100),
+        // buttons: [{ title: "previous" }, { title: "next" }]
       };
 
       await Notifications.create("progress", options);
@@ -150,7 +177,7 @@ class Process {
         title: evt.title,
         message: evt.artist,
         contextMessage: "(click to skip)",
-        isClickable: true
+        // buttons: [{ title: "previous" }, { title: "next" }]
       };
 
       if (await Storage.Get<boolean>("notifications-disabled")) {
@@ -165,15 +192,15 @@ class Process {
       if (!this.tabId) return;
       let tracks = await Tabs.executeScript<Track>(this.tabId, { code: "agent.GetTrackInfo()" });
       if (!tracks || tracks.length < 1 || !tracks[0]) return;
-     
+
       let options = {
         type: "progress",
         iconUrl: tracks[0].art,
         title: tracks[0].title,
         message: tracks[0].artist,
         contextMessage: "(click to skip)",
-        isClickable: true,
-        progress: Math.round(tracks[0].progress * 100)
+        progress: Math.round(tracks[0].progress * 100),
+        // buttons: [{ title: "previous" }, { title: "next" }]
       };
 
       if (await Storage.Get<boolean>("notifications-play-disabled")) {
@@ -195,7 +222,7 @@ class Process {
         title: evt.feedback,
         message: evt.song,
         contextMessage: "(click to skip)",
-        isClickable: true
+        // buttons: [{ title: "previous" }, { title: "next" }]
       };
       Notifications.create("saved", options);
     });

src/logger.ts

@@ -1,6 +1,6 @@
 export class Logger {
     get _level(): LogLevel {
-        return (window as any).logLevel || LogLevel.Debug;
+        return (window as any).logLevel || LogLevel.Info;
     }
 
     private _name: string;

src/popup.ts

@@ -113,6 +113,22 @@ class Main {
       });
     }
 
+    document.querySelector("#track-bar").addEventListener("click", (evt: MouseEvent) => {
+      var box = document.querySelector("#track-bar").getBoundingClientRect();
+      this._logger.debug("click: track bar", { cx: evt.clientX, ox: evt.offsetX, lx: evt.layerX, x: evt.x, sx: evt.screenX, px: evt.pageX, loc: (evt.offsetX / box.width) });
+      this._bus.send("idea.cmd.player.rewind", {
+        location: evt.offsetX / box.width
+      });
+    });
+
+    document.querySelector("#volume-bar").addEventListener("click", (evt: MouseEvent) => {
+      this._logger.debug("click: volume bar");
+      var box = document.querySelector("#volume-bar").getBoundingClientRect();
+      this._bus.send("idea.cmd.player.volume", {
+        level: evt.offsetX / box.width
+      });
+    });
+
     document.querySelector("#notification a").addEventListener("click", (evt: MouseEvent) => {
       this._logger.debug("click: notification");
       chrome.tabs.create({ url: __CONFIG__.openPlayerUrl });

src/spotify/agent.ts

@@ -84,7 +84,14 @@ class Agent {
   }
 
   public Rewind(target: number) {
-    let elem = (this._player.querySelector(".progress-bar") as HTMLElement);
+    let elem = (this._player.querySelector(".playback-bar .progress-bar") as HTMLElement);
+    this._logger.info(elem);
+    this._logger.info("rewinding to target" + target);
+    this._clickAt(elem, elem.offsetWidth * target);
+  }
+
+  public SetVolume(target: number) {
+    let elem = (this._player.querySelector(".volume-bar .progress-bar") as HTMLElement);
     this._logger.info(elem);
     this._logger.info("rewinding to target" + target);
     this._clickAt(elem, elem.offsetWidth * target);
@@ -148,7 +155,9 @@ class Agent {
 
   public GetVolume() {
     try {
-      return ~~((this._player.querySelector(".volume-bar .progress-bar__slider") as HTMLElement).style.left.replace("%", "")) / 100;
+      var bar = this._player.querySelector(".volume-bar .progress-bar__fg_wrapper").getBoundingClientRect() as DOMRect;
+      var prog = this._player.querySelector(".volume-bar .progress-bar__fg").getBoundingClientRect() as DOMRect;
+      return 1 - (bar.x - prog.x) / bar.width
     } catch (error) {
       return undefined;
     }
@@ -199,11 +208,15 @@ class Agent {
   }
 
   private _clickAt = (elem: HTMLElement, x: number) => {
+    let box = elem.getBoundingClientRect() as DOMRect;
     this._logger.info("rewinding to width" + x);
-    this._logger.info("rewinding to offset" + (elem.offsetLeft + x));
-    let evt = document.createEvent("MouseEvents");
-    evt.initMouseEvent("click", true, true, window, 0, elem.offsetLeft + x, 0, x, 6, false, false, false, false, 0, undefined);
-    elem.dispatchEvent(evt);
+    this._logger.info("rewinding to offset" + (box.x + x));
+    let down = document.createEvent("MouseEvents");
+    let up = document.createEvent("MouseEvents");
+    down.initMouseEvent("mousedown", true, true, window, null, 0, 0, box.x + x, box.y, false, false, false, false, 0, undefined);
+    up.initMouseEvent("mouseup", true, true, window, null, 0, 0, box.x + x, box.y, false, false, false, false, 0, undefined);
+    elem.dispatchEvent(down);
+    elem.dispatchEvent(up);
   }
 }
 

src/spotify/popup.css

@@ -119,6 +119,7 @@ i.fa {
   background-color: #3e3e40;
   margin-bottom: 10px;
   display: inline-table;
+  cursor: pointer;
 }
 
 #volume-level {
@@ -160,7 +161,7 @@ i.fa {
   border-radius: 3px;
   background-color: #3e3e40;
   margin-bottom: 10px;
-  /*cursor: pointer;*/
+  cursor: pointer;
 }
 
 #track-elapsed {