with toastr notifs

css/index.css

@@ -0,0 +1,4 @@
+#toast-container .cool-toast {
+  background-color: #333;
+  opacity: 0.9;
+}

manifest.json

@@ -15,9 +15,14 @@
       "matches": [
         "<all_urls>"
       ],
+      "css": [
+        "css/toastr.min.css",
+        "css/index.css"
+      ],
       "js": [
         "js/jquery-2.2.4.min.js",
         "js/mousetrap.min.js",
+        "js/toastr.min.js",
         "src/inject/index.js"
       ]
     }

src/inject/index.js

@@ -7,38 +7,66 @@ $(() => {
     medias = $('video, audio')
   }, 333)
 
+  const fmtMSS = s => {
+    s = Math.round(s)
+    return (s-(s%=60))/60+(9<s?':':':0')+s
+  }
+  const notify = (msg) => {
+    toastr.remove()
+    toastr.info('', msg, {
+      showDuration: 100,
+      hideDuration: 100,
+      positionClass: 'toast-top-center',
+      toastClass: 'cool-toast',
+      timeOut: 1000,
+      // timeOut: 0,
+      // extendedTimeOut: 0,
+    })
+  }
+
+
   const togglePlayPause = () => async e => {
     let media = lastPlayed || medias[0]
     if(!media) return
-    if(media.paused) await media.play()
-    else media.pause()
+    if(media.paused) {
+      await media.play()
+      notify(`Play (${fmtMSS(media.duration - media.currentTime)} remaining)`)
+    }
+    else {
+      media.pause()
+      notify(`Pause (${fmtMSS(media.duration - media.currentTime)} remaining)`)
+    }
   }
 
   const jump = (sec) => async e => {
     let media = lastPlayed || medias[0]
     if(!media) return
     media.currentTime += sec
+    notify(`Time: ${fmtMSS(media.currentTime)} / ${fmtMSS(media.duration)}`)
   }
 
   const playbackRate = (rate) => async e => {
     let media = lastPlayed || medias[0]
     if(!media) return
     media.playbackRate += rate
+    notify(`Rate: ${media.playbackRate}x`)
   }
 
   const seekPercent = (percent) => async e => {
     let media = lastPlayed || medias[0]
     if(!media) return
     media.currentTime = media.duration * percent / 100
+    notify(`Time: ${fmtMSS(media.currentTime)} / ${fmtMSS(media.duration)}`)
   }
 
   const toggleMute = () => async e => {
     let media = lastPlayed || medias[0]
     if(!media) return
     media.muted = !media.muted
+    notify(media.muted ? 'Muted' : 'Unmuted')
   }
 
-  hotkeys['space'] = togglePlayPause();
+  // hotkeys['space'] = togglePlayPause();
   hotkeys['k'] = togglePlayPause();
   hotkeys['j'] = jump(-10);
   hotkeys['l'] = jump(10);
@@ -54,6 +82,7 @@ $(() => {
   Mousetrap.bind('ctrl+m', () => {
     mm = !mm
     mm ? bindAll() : unbindAll()
+    notify(mm ? 'Media hotkeys on' : 'Media hotkeys off')
   });
 
   const bindAll = () => {