From 6f073ad7188e6907a53d5099b3c52416e2928211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Mon, 8 Oct 2018 02:32:02 +0200
Subject: [PATCH] feat: use icon for play/pause keypress action (#818)

* feat: use icon for play/pause keypress action

* fix: use rectangle layout in svg-single-icon-key
---
 .../svg-single-icon-key/svg-single-icon-key.component.html    | 2 +-
 .../keys/svg-single-icon-key/svg-single-icon-key.component.ts | 4 +++-
 packages/uhk-web/src/app/services/mapper.service.ts           | 1 +
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html b/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html
index 27ca865b..1243170c 100644
--- a/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.html
@@ -1,7 +1,7 @@
 <svg:use [attr.xlink:href]="icon"
          [attr.width]="svgWidth"
          [attr.height]="svgHeight"
-         [attr.x]="svgWidth"
+         [attr.x]="svgX"
          [attr.y]="svgHeight">
 </svg:use>
 <svg:g svg-secondary-role
diff --git a/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts b/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
index 5a4c04f3..5568f15a 100644
--- a/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
+++ b/packages/uhk-web/src/app/components/svg/keys/svg-single-icon-key/svg-single-icon-key.component.ts
@@ -16,6 +16,7 @@ export class SvgSingleIconKeyComponent implements OnChanges {
 
     svgHeight: number;
     svgWidth: number;
+    svgX: number;
     secondaryTextY: number;
     secondaryHeight: number;
 
@@ -34,8 +35,9 @@ export class SvgSingleIconKeyComponent implements OnChanges {
             secondaryYModifier = 5;
         }
 
-        this.svgWidth = this.width / 3;
+        this.svgWidth = this.width / 2.075;
         this.svgHeight = this.height / 3;
+        this.svgX = (this.width - this.svgWidth) / 2;
         this.secondaryHeight = this.height / 4;
         this.secondaryTextY = this.height - this.secondaryHeight - SECONDARY_ROLE_BOTTOM_MARGIN - secondaryYModifier;
     }
diff --git a/packages/uhk-web/src/app/services/mapper.service.ts b/packages/uhk-web/src/app/services/mapper.service.ts
index d9aa0a09..14f5a610 100644
--- a/packages/uhk-web/src/app/services/mapper.service.ts
+++ b/packages/uhk-web/src/app/services/mapper.service.ts
@@ -352,6 +352,7 @@ export class MapperService {
         this.mediaScancodeIcons.set(181, 'icon-kbd__media--next');
         this.mediaScancodeIcons.set(182, 'icon-kbd__media--prev');
         this.mediaScancodeIcons.set(184, 'icon-kbd__fn--eject');
+        this.mediaScancodeIcons.set(205, 'icon-kbd__play-pause');
         this.mediaScancodeIcons.set(226, 'icon-kbd__media--mute');
         this.mediaScancodeIcons.set(233, 'icon-kbd__media--vol-up');
         this.mediaScancodeIcons.set(234, 'icon-kbd__media--vol-down');