Add support to windows thumbBar

mtsgeneroso · Dec 30, 2017 · 2764488 · 2764488
1 parent 288d3a5
commit 2764488
Show file tree

Hide file tree

Showing 8 changed files with 96 additions and 37 deletions.
diff --git a/icon.png b/icon.png
diff --git a/icons/pause.png b/icons/pause.png
diff --git a/icons/play.png b/icons/play.png
diff --git a/icons/skipback.png b/icons/skipback.png
diff --git a/icons/skipforward.png b/icons/skipforward.png
diff --git a/index.html b/index.html
@@ -1,42 +1,43 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="UTF-8">
-    <title>Pocket Casts</title>
-        <style>
-        html,
-        body {
-            margin: 0;
-            padding: 0;
-            height: 100%;
-        }
 
-        #pocket {
-            width: 100%;
-            height: 100%;
-        }
-    </style>
-  </head>
-  <body>
-    <div class="indicator"></div>
-    <webview id="pocket" src="https://playbeta.pocketcasts.com/web/" disablewebsecurity></webview>
-    <script>
-      const {ipcRenderer} = require('electron')
-      ipcRenderer.on('play-pause', (event, arg) => {
-        const webview = document.querySelector('webview')
-        webview.executeJavaScript("$('.play_pause_button')[0].click()");;
-      })
+<head>
+  <meta charset="UTF-8">
+  <title>Pocket Casts</title>
+  <style>
+    html,
+    body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+    }
 
-      ipcRenderer.on('forward', (event, arg) => {
-        const webview = document.querySelector('webview')
-        webview.executeJavaScript("$('.skip_forward_button')[0].click()");;
-      })
+    webview {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
 
-      ipcRenderer.on('backward', (event, arg) => {
-        const webview = document.querySelector('webview')
-        webview.executeJavaScript("$('.skip_back_button')[0].click()");;
-      })
+<body>
+  <div class="indicator"></div>
+  <webview src="https://playbeta.pocketcasts.com/web/" disablewebsecurity></webview>
+  <script>
+    const {ipcRenderer} = require('electron')
+    const webview = document.querySelector('webview')
+
+    ipcRenderer.on('play-pause', (event, arg) => {
+      webview.executeJavaScript("document.querySelector('.play_pause_button').click()")
+    })
+
+    ipcRenderer.on('forward', (event, arg) => {
+      webview.executeJavaScript("document.querySelector('.skip_forward_button').click()");
+    })
+
+    ipcRenderer.on('backward', (event, arg) => {
+      webview.executeJavaScript("document.querySelector('.skip_back_button').click()");
+    })
+  </script>
+</body>
 
-    </script>
-  </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,6 +1,5 @@
 const {app, BrowserWindow, globalShortcut} = require('electron')
 
-
 const path = require('path')
 
 const url = require('url')
@@ -13,6 +12,7 @@ let win
 function createWindow () {
   // Create the browser window.
   win = new BrowserWindow({
+    icon: path.join(__dirname, '/icon.png'),  
     width: 1200,
     title: "Pocketcasts",
     height: 750,
@@ -31,10 +31,12 @@ function createWindow () {
     protocol: 'file:',
     slashes: true
   }))
-
   const touchBar = require('./touchbar')(win)
   win.setTouchBar(touchBar)
 
+  const thumbar = require('./thumbar')(win)
+  win.setThumbarButtons(thumbar)
+
   globalShortcut.register('MediaPlayPause', () => {
     win.webContents.send('play-pause')
   })

diff --git a/thumbar.js b/thumbar.js
@@ -0,0 +1,56 @@
+const path = require("path");
+
+module.exports = function(win) {
+  let pauseButtons = [
+    {
+      tooltip: "Skip Back",
+      icon: path.join(__dirname, "icons", "skipback.png"),
+      click() {
+        win.webContents.send("backward");
+      }
+    },
+    {
+      tooltip: "Pause",
+      icon: path.join(__dirname, "icons", "pause.png"),
+      click() {
+        win.setThumbarButtons(playButtons);
+        win.webContents.send("play-pause");
+      }
+    },
+    {
+      tooltip: "Skip Forward",
+      icon: path.join(__dirname, "icons", "skipforward.png"),
+      click() {
+        win.webContents.send("forward");
+      }
+    }
+  ];
+
+  let playButtons = [
+    {
+      tooltip: "Skip Back",
+      icon: path.join(__dirname, "icons", "skipback.png"),
+      click() {
+        win.webContents.send("backward");
+      }
+    },
+    {
+      tooltip: "Play",
+      icon: path.join(__dirname, "icons", "play.png"),
+      click() {
+        win.setThumbarButtons(pauseButtons);
+        win.webContents.send("play-pause");
+      }
+    },
+    {
+      tooltip: "Skip Forward",
+      icon: path.join(__dirname, "icons", "skipforward.png"),
+      click() {
+        win.webContents.send("forward");
+      }
+    }
+  ];
+
+  return playButtons;
+};
+