Includes RTL support

src/components/chat/index.scss

@@ -48,15 +48,29 @@ $avatar-size: 2.25rem;
   .message {
     box-sizing: border-box;
     display: flex;
-    padding: 0 0 $padding $padding;
     width: 100%;
+
+    [dir="ltr"] & {
+      padding: 0 0 $padding $padding;
+    }
+
+    [dir="rtl"] & {
+      padding: 0 $padding $padding 0;
+    }
   }
 }
 
 .avatar-wrapper {
   display: flex;
   height: 100%;
-  margin: 0 $margin 0 0;
+
+  [dir="ltr"] & {
+    margin: 0 $margin 0 0;
+  }
+
+  [dir="rtl"] & {
+    margin: 0 0 0 $margin;
+  }
 
   .inactive {
     filter: opacity(50%);
@@ -112,14 +126,28 @@ $avatar-size: 2.25rem;
     color: $gray-light;
     display: flex;
     font-size: x-small;
-    margin: 0 0 0 $margin;
+
+    [dir="ltr"] & {
+      margin: 0 0 0 $margin;
+    }
+
+    [dir="rtl"] & {
+      margin: 0 $margin 0 0;
+    }
   }
 
   .text {
     box-sizing: border-box;
-    padding: 0 $padding-extra-small 0 0;
     width: 100%;
     word-break: break-word;
+
+    [dir="ltr"] & {
+      padding: 0 $padding-extra-small 0 0;
+    }
+
+    [dir="rtl"] & {
+      padding: 0 0 0 $padding-extra-small;
+    }
   }
 
   .inactive {

src/components/thumbnails/index.scss

@@ -13,12 +13,19 @@ $thumbnail-height: 90px;
   overflow-y: auto;
   padding: $padding-extra-small $padding-extra-small 0 $padding-extra-small;
   position: fixed;
-  right: 0;
   scroll-behavior: smooth;
   top: $thumbnails-wrapper-top;
   width: auto;
   z-index: 1;
 
+  [dir="ltr"] & {
+    right: 0;
+  }
+
+  [dir="rtl"] & {
+    left: 0;
+  }
+
   .active {
     filter: opacity(50%);
   }

src/locales/index.js

@@ -2,9 +2,21 @@ import messages from './messages';
 
 const DEFAULT_LOCALE = 'en';
 
+const RTL_LOCALES = ['ar'];
+
+const setDirection = (locale) => {
+  if (RTL_LOCALES.includes(locale)) {
+    document.body.parentNode.setAttribute('dir', 'rtl');
+  } else {
+    document.body.parentNode.setAttribute('dir', 'ltr');
+  }
+};
+
 const getLocale = () => {
   const locale = navigator.language.split(/[-_]/)[0];
 
+  setDirection(locale);
+
   if (!messages[locale]) return DEFAULT_LOCALE;
 
   return locale;

src/locales/messages/ar.json

@@ -0,0 +1,10 @@
+{
+  "error.wrapper.aria": "منطقة الخطأ",
+  "loader.wrapper.aria": "منطقة اللودر",
+  "player.wrapper.aria": "منطقة لاعب",
+  "player.chat.wrapper.aria": "منطقة الدردشة",
+  "player.presentation.wrapper.aria": "منطقة العرض",
+  "player.screenshare.wrapper.aria": "منطقة مشاركة الشاشة",
+  "player.thumbnails.wrapper.aria": "منطقة المصغرات",
+  "player.video.wrapper.aria": "منطقة الفيديو"
+}

src/locales/messages/index.js

@@ -1,3 +1,4 @@
+import ar from './ar.json';
 import de from './de.json';
 import en from './en.json';
 import es from './es.json';
@@ -8,6 +9,7 @@ import pt from './pt.json';
 import ru from './ru.json';
 
 export default {
+  ar,
   de,
   en,
   es,