From b4bb9a660374df836322ecfb2f6a409bb4cee55d Mon Sep 17 00:00:00 2001
From: Feross Aboukhadijeh <feross@feross.org>
Date: Mon, 23 May 2016 14:47:02 -0700
Subject: [PATCH] Fix rate UX for new design

---
 main/menu.js             | 42 ++++++++++++++++++++--------------------
 renderer/index.css       | 10 ++--------
 renderer/views/player.js |  2 +-
 3 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/main/menu.js b/main/menu.js
index 48a316d0..664774a1 100644
--- a/main/menu.js
+++ b/main/menu.js
@@ -134,10 +134,10 @@ function onPlayerOpen () {
   getMenuItem('Increase Volume').enabled = true
   getMenuItem('Decrease Volume').enabled = true
   getMenuItem('Add Subtitles File...').enabled = true
-  getMenuItem('Skip forward 10 seconds').enabled = true
-  getMenuItem('Skip back 10 seconds').enabled = true
-  getMenuItem('Increase video speed').enabled = true
-  getMenuItem('Decrease video speed').enabled = true
+  getMenuItem('Step Forward').enabled = true
+  getMenuItem('Step Backward').enabled = true
+  getMenuItem('Increase Speed').enabled = true
+  getMenuItem('Decrease Speed').enabled = true
 }
 
 function onPlayerClose () {
@@ -146,10 +146,10 @@ function onPlayerClose () {
   getMenuItem('Increase Volume').enabled = false
   getMenuItem('Decrease Volume').enabled = false
   getMenuItem('Add Subtitles File...').enabled = false
-  getMenuItem('Skip forward 10 seconds').enabled = false
-  getMenuItem('Skip back 10 seconds').enabled = false
-  getMenuItem('Increase video speed').enabled = false
-  getMenuItem('Decrease video speed').enabled = false
+  getMenuItem('Step Forward').enabled = false
+  getMenuItem('Step Backward').enabled = false
+  getMenuItem('Increase Speed').enabled = false
+  getMenuItem('Decrease Speed').enabled = false
 }
 
 function onToggleFullScreen (isFullScreen) {
@@ -340,21 +340,13 @@ function getAppMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Add Subtitles File...',
-          click: openSubtitles,
-          enabled: false
-        },
-        {
-          type: 'separator'
-        },
-        {
-          label: 'Skip forward 10 seconds',
+          label: 'Step Forward',
           accelerator: 'CmdOrCtrl+Alt+Right',
           click: skipForward,
           enabled: false
         },
         {
-          label: 'Skip back 10 seconds',
+          label: 'Step Backward',
           accelerator: 'CmdOrCtrl+Alt+Left',
           click: skipBack,
           enabled: false
@@ -363,16 +355,24 @@ function getAppMenuTemplate () {
           type: 'separator'
         },
         {
-          label: 'Increase video speed',
-          accelerator: 'CmdOrCtrl+plus',
+          label: 'Increase Speed',
+          accelerator: 'CmdOrCtrl+=',
           click: increasePlaybackRate,
           enabled: false
         },
         {
-          label: 'Decrease video speed',
+          label: 'Decrease Speed',
           accelerator: 'CmdOrCtrl+-',
           click: decreasePlaybackRate,
           enabled: false
+        },
+        {
+          type: 'separator'
+        },
+        {
+          label: 'Add Subtitles File...',
+          click: openSubtitles,
+          enabled: false
         }
       ]
     },
diff --git a/renderer/index.css b/renderer/index.css
index b1ad7177..9ad7fd5f 100644
--- a/renderer/index.css
+++ b/renderer/index.css
@@ -739,7 +739,8 @@ body.drag .app::after {
   vertical-align: sub;
 }
 
-.player .controls .time {
+.player .controls .time,
+.player .controls .rate {
   font-weight: 100;
   font-size: 13px;
   margin: 9px 8px 8px 8px;
@@ -819,13 +820,6 @@ body.drag .app::after {
   color: #9af;
 }
 
-.player-controls .rate {
-  display: inline;
-  height: 30px;
-  padding: 5px;
-  margin-left: 20px;
-}
-
 .player .controls .volume-slider::-webkit-slider-thumb {
   -webkit-appearance: none;
   -webkit-app-region: no-drag;
diff --git a/renderer/views/player.js b/renderer/views/player.js
index bf5b6bbe..94304da6 100644
--- a/renderer/views/player.js
+++ b/renderer/views/player.js
@@ -452,7 +452,7 @@ function renderPlayerControls (state) {
   if (state.playing.playbackRate !== 1) {
     elements.push(hx`
       <span class='rate float-left'>
-        speed: ${state.playing.playbackRate}X
+        ${state.playing.playbackRate}x
       </span>
     `)
   }