From 45189c91634513a8c12e3ac74ce3c8eaa3317c2f Mon Sep 17 00:00:00 2001
From: yosilevy <37745463+yosilevy@users.noreply.github.com>
Date: Sat, 23 Mar 2019 20:06:35 +0200
Subject: [PATCH] Media player RTL fixes (#3001)

---
 src/cards/ha-media_player-card.js                     |  6 +++++-
 src/components/ha-paper-slider.js                     |  5 +++++
 .../more-info/controls/more-info-media_player.js      | 11 +++++++++++
 3 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/cards/ha-media_player-card.js b/src/cards/ha-media_player-card.js
index cb068c3afe..d54176a832 100644
--- a/src/cards/ha-media_player-card.js
+++ b/src/cards/ha-media_player-card.js
@@ -132,6 +132,10 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           height: 44px;
         }
 
+        .playback-controls {
+          direction: ltr;
+        }
+
         paper-icon-button {
           opacity: var(--dark-primary-opacity);
         }
@@ -186,7 +190,7 @@ class HaMediaPlayerCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
           class="self-center secondary"
         ></paper-icon-button>
 
-        <div>
+        <div class="playback-controls">
           <paper-icon-button
             icon="hass:skip-previous"
             invisible$="[[!playerObj.supportsPreviousTrack]]"
diff --git a/src/components/ha-paper-slider.js b/src/components/ha-paper-slider.js
index f7cad5fec2..6a088208de 100644
--- a/src/components/ha-paper-slider.js
+++ b/src/components/ha-paper-slider.js
@@ -58,6 +58,11 @@ class HaPaperSlider extends PaperSliderClass {
         -webkit-transform: scale(1) translate(0, -10px);
         transform: scale(1) translate(0, -10px);
       }
+
+      :host([dir="rtl"]) .pin.expand > .slider-knob > .slider-knob-inner::after {
+        -webkit-transform: scale(1) translate(0, -17px) scaleX(-1) !important;
+        transform: scale(1) translate(0, -17px) scaleX(-1) !important;
+        }
     `;
     tpl.content.appendChild(styleEl);
     return tpl;
diff --git a/src/dialogs/more-info/controls/more-info-media_player.js b/src/dialogs/more-info/controls/more-info-media_player.js
index 0ce7af7a71..d78540d0c4 100644
--- a/src/dialogs/more-info/controls/more-info-media_player.js
+++ b/src/dialogs/more-info/controls/more-info-media_player.js
@@ -14,6 +14,7 @@ import attributeClassNames from "../../../common/entity/attribute_class_names";
 import isComponentLoaded from "../../../common/config/is_component_loaded";
 import EventsMixin from "../../../mixins/events-mixin";
 import LocalizeMixin from "../../../mixins/localize-mixin";
+import { computeRTLDirection } from "../../../common/util/compute_rtl";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -137,6 +138,7 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
             on-change="volumeSliderChanged"
             class="flex"
             ignore-bar-touch=""
+            dir="{{rtl}}"
           >
           </ha-paper-slider>
         </div>
@@ -233,6 +235,11 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
         type: String,
         value: "",
       },
+
+      rtl: {
+        type: String,
+        computed: "_computeRTLDirection(hass)",
+      },
     };
   }
 
@@ -425,6 +432,10 @@ class MoreInfoMediaPlayer extends LocalizeMixin(EventsMixin(PolymerElement)) {
     this.ttsMessage = "";
     this.$.ttsInput.focus();
   }
+
+  _computeRTLDirection(hass) {
+    return computeRTLDirection(hass);
+  }
 }
 
 customElements.define("more-info-media_player", MoreInfoMediaPlayer);