Merge pull request #3743 from hadicharara/hadicharara/added-support-for-rtl-layouts

Add Initial support for RTL layouts

src/assets/css/dashboard.scss

@@ -117,10 +117,17 @@ div[data-role=controlgroup] a[data-role=button]:last-child {
 }
 
 div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
+    [dir="ltr"] & {
         border-left-width: 0 !important;
         margin: 0 0 0 -0.4em !important;
     }
 
+    [dir="rtl"] & {
+        border-right-width: 0 !important;
+        margin: 0 -0.4em 0 0 !important;
+    }
+}
+
 div[data-role=controlgroup] a.ui-btn-active {
     background: #00a4dc !important;
     color: #292929 !important;

src/assets/css/librarybrowser.scss

@@ -32,6 +32,39 @@
     }
 }
 
+@mixin header-poster-padding-rtl() {
+    padding-left: unset;
+    padding-right: 37.5%;
+
+    @media all and (min-width: 43.75em) {
+        padding-right: 25%;
+    }
+
+    @media all and (min-width: 50em) {
+        padding-right: 20%;
+    }
+
+    @media all and (min-width: 75em) {
+        padding-right: 16.666666666666666666666666666667%;
+    }
+
+    @media all and (min-width: 87.5em) {
+        padding-right: 14.285714285714285714285714285714%;
+    }
+
+    @media all and (min-width: 100em) {
+        padding-right: 12.5%;
+    }
+
+    @media all and (min-width: 120em) {
+        padding-right: 11.111111111111111111111111111111%;
+    }
+
+    @media all and (min-width: 131.25em) {
+        padding-right: 10%;
+    }
+}
+
 .headerUserImage,
 .navMenuOption,
 .pageTitle {
@@ -137,10 +170,17 @@
 
 .pageTitle {
     display: inline-flex;
-    margin: 0 0 0 0.5em;
     height: 1.7em;
     align-items: center;
     flex-shrink: 1;
+
+    [dir="ltr"] & {
+        margin: 0 0 0 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.5em 0 0;
+    }
 }
 
 .pageTitleWithDefaultLogo {
@@ -162,6 +202,10 @@
     background-size: contain;
     background-repeat: no-repeat;
     width: 13.2em;
+
+    [dir='rtl'] & {
+        background-position: right center;
+    }
 }
 
 .skinHeader {
@@ -211,16 +255,30 @@
     align-items: center;
     text-decoration: none;
     color: inherit;
-    padding: 0.9em 0 0.9em 2.4em !important;
     flex-grow: 1;
     font-weight: 400 !important;
     margin: 0 !important;
     border-radius: 0 !important;
+
+    [dir="ltr"] & {
+        padding: 0.9em 0 0.9em 2.4em !important;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.9em 2.4em 0.9em 0 !important;
+    }
 }
 
 .navMenuOptionIcon {
-    margin-right: 1.2em;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-right: 1.2em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1.2em;
+    }
 }
 
 .navMenuOptionText {
@@ -229,8 +287,15 @@
 }
 
 .sidebarHeader {
-    padding-left: 1.2em;
     margin: 1em 0 0.5em;
+
+    [dir="ltr"] & {
+        padding-left: 1.2em;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 1.2em;
+    }
 }
 
 .dashboardDocument .skinBody {
@@ -240,6 +305,10 @@
     right: 0;
     bottom: 0;
     left: 0;
+
+    [dir="rtl"] & {
+        transition: right ease-in-out 0.3s, padding ease-in-out 0.3s;
+    }
 }
 
 .centerMessage {
@@ -267,6 +336,14 @@
         box-shadow: none !important;
         width: 20.205em !important;
         font-size: 94%;
+
+        [dir="ltr"] & {
+            left: 0 !important;
+        }
+
+        [dir="rtl"] & {
+            right: 0 !important;
+        }
     }
 
     .dashboardDocument .mainDrawer-scrollContainer {
@@ -274,8 +351,14 @@
     }
 
     .dashboardDocument .skinBody {
+        [dir="ltr"] & {
             left: 20em;
         }
+
+        [dir="rtl"] & {
+            right: 20em;
+        }
+    }
 }
 
 @media all and (max-width: 100em) {
@@ -340,9 +423,16 @@
 
 .headerArrowImage {
     height: 20px;
+
+    [dir="ltr"] & {
         margin-left: 0.5em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 0.5em;
+    }
+}
+
 .backdropContainer {
     position: fixed;
     top: 0;
@@ -370,15 +460,28 @@
 }
 
 .viewControls + .listTopPaging {
+    [dir="ltr"] & {
         margin-left: 0.5em !important;
     }
 
+    [dir="rtl"] & {
+        margin-right: 0.5em !important;
+    }
+}
+
 .criticReview {
     margin: 1.5em 0;
     background: #222;
-    padding: 0.8em 0.8em 0.8em 3em;
     border-radius: 0.3em;
     position: relative;
+
+    [dir="ltr"] & {
+        padding: 0.8em 0.8em 0.8em 3em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.8em 3em 0.8em 0.8em;
+    }
 }
 
 .detailLogo {
@@ -431,14 +534,27 @@
 }
 
 .reviewDate {
+    [dir="ltr"] & {
         margin-left: 1em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
 .reviewScore {
     position: absolute;
+
+    [dir="ltr"] & {
         left: 0.8em;
     }
 
+    [dir="rtl"] & {
+        right: 0.8em;
+    }
+}
+
 .itemBackdrop {
     background-size: cover;
     background-repeat: no-repeat;
@@ -473,8 +589,6 @@
 .detailPageContent {
     display: flex;
     flex-direction: column;
-    padding-left: 32.45vw;
-    padding-right: 2%;
 
     .layout-mobile & {
         padding-left: 5%;
@@ -484,8 +598,24 @@
     .layout-desktop &,
     .layout-tv & {
         .emby-scroller {
+            [dir="ltr"] & {
                 margin-left: 0;
             }
+
+            [dir="rtl"] & {
+                margin-right: 0;
+            }
+        }
+    }
+
+    [dir="ltr"] & {
+        padding-left: 32.45vw;
+        padding-right: 2%;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 32.45vw;
+        padding-left: 2%;
     }
 }
 
@@ -613,7 +743,6 @@
 .layout-mobile .mainDetailButtons {
     margin-top: 1em;
     margin-bottom: 0.5em;
-    margin-left: 0;
 
     @include header-poster-padding;
 
@@ -622,6 +751,21 @@
         margin-bottom: 0;
         padding-left: 0;
     }
+
+    [dir="ltr"] & {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+        padding-left: unset !important;
+
+        @include header-poster-padding-rtl;
+
+        @media all and (max-width: 32em) {
+            padding-right: 0 !important;
+        }
+    }
 }
 
 .subtitle {
@@ -651,15 +795,21 @@
 
     .layout-desktop & {
         position: relative;
-        padding-left: 32.45vw;
     }
 
     .layout-tv & {
         display: block;
-        padding-left: 32.45vw;
     }
 }
 
+.layout-desktop [dir="rtl"] .detailPagePrimaryContainer {
+    padding-right: 32.45vw;
+}
+
+.layout-desktop [dir="ltr"] .detailPagePrimaryContainer {
+    padding-left: 32.45vw;
+}
+
 .layout-desktop .detailRibbon {
     margin-top: -7.2em;
     height: 7.2em;
@@ -676,7 +826,13 @@
     flex: 1 0 0;
 
     .layout-mobile & {
+        [dir="ltr"] {
             @include header-poster-padding;
+        }
+
+        [dir="rtl"] & {
+            @include header-poster-padding-rtl;
+        }
 
         @media all and (max-width: 32em) {
             position: relative;
@@ -685,9 +841,16 @@
 }
 
 .infoText {
-    text-align: left;
     min-width: 0;
     max-width: 100%;
+
+    [dir="ltr"] & {
+        text-align: left;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+    }
 }
 
 .detailPageSecondaryContainer {
@@ -749,6 +912,19 @@
         width: 25vw;
         transform: translateY(-50%);
     }
+
+    [dir="rtl"] & {
+        left: unset;
+
+        .layout-mobile &,
+        .layout-tv & {
+            right: 5%;
+        }
+
+        .layout-desktop & {
+            right: 3.3%;
+        }
+    }
 }
 
 .detailPagePrimaryContent {
@@ -768,6 +944,10 @@
 .itemDetailImage {
     width: 100% !important;
     box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.75);
+
+    [dir="rtl"] & {
+        box-shadow: 0 0 0.5em 0.1em rgba(0, 0, 0, 0.75);
+    }
 }
 
 div.itemDetailGalleryLink.defaultCardBackground {
@@ -871,9 +1051,17 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .recordingFields button {
+    flex-shrink: 0;
+
+    [dir="ltr"] & {
         margin-left: 0;
         margin-right: 0.5em;
-    flex-shrink: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+        margin-left: 0.5em;
+    }
 }
 
 .mainDetailButtons.hide + .recordingFields {
@@ -1016,8 +1204,15 @@ div.itemDetailGalleryLink.defaultCardBackground {
 }
 
 .mediaInfoLabel {
-    margin-right: 1em;
     font-weight: 600;
+
+    [dir="ltr"] & {
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1em;
+    }
 }
 
 .recordingProgressBar::-moz-progress-bar {
@@ -1107,19 +1302,39 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .sectionTitleButton {
-    margin-left: 1.5em !important;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-left: 1.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1.5em !important;
+    }
 }
 
 .sectionTitleButton + .sectionTitleButton {
+    [dir="ltr"] & {
         margin-left: 0.5em !important;
     }
 
+    [dir="rtl"] & {
+        margin-right: 0.5em !important;
+    }
+}
+
 .sectionTitleIconButton {
-    margin-left: 1.5em !important;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: 0.5em !important;
+
+    [dir="ltr"] & {
+        margin-left: 1.5em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1.5em !important;
+    }
 }
 
 .horizontalItemsContainer {
@@ -1148,14 +1363,28 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .padded-left {
+    [dir="ltr"] & {
         padding-left: 3.3%;
         padding-left: max(env(safe-area-inset-left), 3.3%);
     }
 
-.padded-right {
+    [dir="rtl"] & {
         padding-right: 3.3%;
         padding-right: max(env(safe-area-inset-right), 3.3%);
     }
+}
+
+.padded-right {
+    [dir="ltr"] & {
+        padding-right: 3.3%;
+        padding-right: max(env(safe-area-inset-right), 3.3%);
+    }
+
+    [dir="rtl"] & {
+        padding-left: 3.3%;
+        padding-left: max(env(safe-area-inset-left), 3.3%);
+    }
+}
 
 .padded-top {
     padding-top: 1em;

src/assets/css/metadataeditor.scss

@@ -7,9 +7,15 @@
 }
 
 .libraryTree {
+    [dir="ltr"] & {
         margin-left: 0.25em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
+}
+
 .offlineEditorNode {
     color: #c33;
 }
@@ -56,15 +62,30 @@
         position: fixed;
         top: 5.2em;
         bottom: 0;
-        left: 0;
         width: 30%;
-        border-right: 1px solid #555;
         display: block;
+
+        [dir="ltr"] & {
+            left: 0;
+            border-right: 1px solid #555;
+        }
+
+        [dir="rtl"] & {
+            right: 0;
+            border-left: 1px solid #555;
+        }
     }
 
     .editPageInnerContent {
-        float: right;
         width: 68.5%;
+
+        [dir="ltr"] & {
+            float: right;
+        }
+
+        [dir="rtl"] & {
+            float: left;
+        }
     }
 }
 

src/assets/css/videoosd.scss

@@ -125,6 +125,10 @@
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
+
+    [dir="rtl"] & {
+        flex-direction: row-reverse;
+    }
 }
 
 .osdVolumeSliderContainer {

src/components/actionSheet/actionSheet.scss

@@ -45,9 +45,15 @@
 }
 
 .actionsheetListItemBody {
+    [dir="ltr"] & {
         padding: 0.4em 1em 0.4em 0.6em !important;
     }
 
+    [dir="rtl"] & {
+        padding: 0.4em 0.6em 0.4em 1em !important;
+    }
+}
+
 .actionSheetItemText {
     white-space: nowrap;
     overflow: hidden;
@@ -64,10 +70,18 @@
     display: flex;
     justify-content: flex-end;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
         margin-left: 5em;
         margin-right: 0.5em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 5em;
+        margin-left: 0.5em;
+    }
+}
+
 .actionSheetScroller {
     /* Override default style being applied by polymer */
     margin-bottom: 0 !important;
@@ -101,8 +115,15 @@
 }
 
 .actionsheetMenuItemIcon {
-    margin: 0 0.85em 0 0.45em !important;
     padding: 0 !important;
+
+    [dir="ltr"] & {
+        margin: 0 0.85em 0 0.45em !important;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.45em 0 0.85em !important;
+    }
 }
 
 .actionsheet-xlargeFont {
@@ -112,5 +133,12 @@
 .btnCloseActionSheet {
     position: fixed;
     top: 0.75em;
+
+    [dir="ltr"] & {
         left: 0.5em;
     }
+
+    [dir="rtl"] & {
+        right: 0.5em;
+    }
+}

src/components/alphaPicker/style.scss

@@ -110,15 +110,29 @@
 }
 
 .alphaPicker-fixed-right {
+    [dir="ltr"] & {
         right: 0.4em;
         right: max(env(safe-area-inset-right), 0.4em);
     }
 
+    [dir="rtl"] & {
+        left: 0.4em;
+        left: max(env(safe-area-inset-left), 0.4em);
+    }
+}
+
 @media all and (min-width: 62.5em) {
     .alphaPicker-fixed-right {
+        [dir="ltr"] & {
             right: 1em;
             right: max(env(safe-area-inset-right), 1em);
         }
+
+        [dir="rtl"] & {
+            left: 1em;
+            left: max(env(safe-area-inset-left), 1em);
+        }
+    }
 }
 
 @media all and (max-height: 31.25em) {

src/components/cardbuilder/card.scss

@@ -302,9 +302,16 @@ button::-moz-focus-inner {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    [dir="ltr"] & {
         text-align: left;
     }
 
+    [dir="rtl"] & {
+        text-align: right;
+    }
+}
+
 .dialog .cardText {
     text-overflow: initial;
 }
@@ -364,7 +371,7 @@ button::-moz-focus-inner {
 
 .cardTextCentered,
 .cardTextCentered > .textActionButton {
-    text-align: center;
+    text-align: center !important;
 }
 
 .cardText-rightmargin {
@@ -396,21 +403,35 @@ button::-moz-focus-inner {
 }
 
 .cardIndicators {
-    right: 0.225em;
     top: 0.225em;
     position: absolute;
     display: flex;
     align-items: center;
     contain: layout style;
+
+    [dir="ltr"] & {
+        right: 0.225em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.225em;
+    }
 }
 
 .cardProgramAttributeIndicators {
     top: 0;
-    left: 0;
     position: absolute;
     display: flex;
     text-transform: uppercase;
     font-size: 92%;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .programAttributeIndicator {
@@ -430,9 +451,16 @@ button::-moz-focus-inner {
 .cardOverlayButton-br {
     position: absolute;
     bottom: 0;
+
+    [dir="ltr"] & {
         right: 0;
     }
 
+    [dir="rtl"] & {
+        left: 0;
+    }
+}
+
 .cardOverlayButtonIcon {
     background-color: rgba(0, 0, 0, 0.7) !important;
     border-radius: 100em;

src/components/cardbuilder/cardBuilder.js

@@ -705,7 +705,7 @@ import { appRouter } from '../appRouter';
 
                 if (text) {
                     html += "<div class='" + currentCssClass + "'>";
-                    html += text;
+                    html += '<bdi>' + text + '</bdi>';
                     html += '</div>';
                     valid++;
 
@@ -908,19 +908,20 @@ import { appRouter } from '../appRouter';
                 }
 
                 if (options.showYear || options.showSeriesYear) {
+                    const productionYear = item.ProductionYear && datetime.toLocaleString(item.ProductionYear, {useGrouping: false});
                     if (item.Type === 'Series') {
                         if (item.Status === 'Continuing') {
-                            lines.push(globalize.translate('SeriesYearToPresent', item.ProductionYear || ''));
+                            lines.push(globalize.translate('SeriesYearToPresent', productionYear || ''));
                         } else {
                             if (item.EndDate && item.ProductionYear) {
-                                const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
+                                const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false});
-                                lines.push(item.ProductionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
+                                lines.push(productionYear + ((endYear === item.ProductionYear) ? '' : (' - ' + endYear)));
                             } else {
-                                lines.push(item.ProductionYear || '');
+                                lines.push(productionYear || '');
                             }
                         }
                     } else {
-                        lines.push(item.ProductionYear || '');
+                        lines.push(productionYear || '');
                     }
                 }
 

src/components/dialog/dialog.template.html

@@ -1,5 +1,5 @@
 <div class="formDialogHeader formDialogHeader-clear justify-content-center">
-    <h1 class="formDialogHeaderTitle" style="margin-left:0;margin-top: .5em;padding: 0 1em;"></h1>
+    <h1 class="formDialogHeaderTitle" style="margin-top: .5em;padding: 0 1em;"></h1>
 </div>
 
 <div class="formDialogContent smoothScrollY">

src/components/formdialog.scss

@@ -12,17 +12,29 @@
 }
 
 .formDialogHeaderTitle {
-    margin-left: 0.25em;
-
     /* In case of h1, h2, h3 */
     margin-top: 0;
     margin-bottom: 0;
+
+    [dir="ltr"] & {
+        margin-left: 0.25em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
 }
 
 .formDialogHeaderTitle:first-child {
+    [dir="ltr"] & {
         margin-left: 1em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
 .formDialogContent:not(.no-grow) {
     flex-grow: 1;
 }
@@ -98,8 +110,8 @@
 .formDialogFooterItem-autosize {
     flex-basis: initial;
     flex-grow: initial;
-    padding-left: 2em;
     padding-right: 2em;
+    padding-left: 2em;
 }
 
 @media all and (min-width: 50em) {

src/components/guide/guide.scss

@@ -307,13 +307,20 @@
 }
 
 .programIcon {
-    margin-left: 0.5em;
     height: 1em;
     width: 1em;
     font-size: 1.6em;
     color: #ddd;
     flex-shrink: 0;
     flex-grow: 0;
+
+    [dir="ltr"] & {
+        margin-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em;
+    }
 }
 
 .guide-programTextIcon {
@@ -340,11 +347,19 @@
 }
 
 .guideChannelName {
-    margin-left: auto;
-    margin-right: 1em;
     text-overflow: ellipsis;
     overflow: hidden;
     max-width: 70%;
+
+    [dir="ltr"] & {
+        margin-left: auto;
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: auto;
+        margin-left: 1em;
+    }
 }
 
 .guideChannelImage {

src/components/imageUploader/imageUploader.template.html

@@ -13,7 +13,7 @@
             <div class="flex align-items-center" style="margin:1.5em 0;">
                 <h2 style="margin:0;">${HeaderAddUpdateImage}</h2>
 
-                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse">
                     <span class="material-icons folder" aria-hidden="true"></span>
                     <span>${Browse}</span>
                 </button>

src/components/imageUploader/style.scss

@@ -10,3 +10,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.raised.raised-mini.btnBrowse {
+    margin-left: 1.5em;
+}

src/components/imageeditor/imageeditor.scss

@@ -7,3 +7,23 @@
 .first-imageEditor-buttons {
     margin-top: 2em;
 }
+
+.btnBrowseAllImages {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
+.btnOpenUploadMenu {
+    [dir="ltr"] & {
+        margin-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0.5em;
+    }
+}

src/components/imageeditor/imageeditor.template.html

@@ -11,10 +11,10 @@
         <div id="imagesContainer">
             <div class="imageEditor-buttons first-imageEditor-buttons">
                 <h2 style="margin:0;">${Images}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>
@@ -26,10 +26,10 @@
         <div id="backdropsContainer" class="hide">
             <div class="imageEditor-buttons">
                 <h2 style="margin:0;">${Backdrops}</h2>
-                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" style="margin-left: 1em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnBrowseAllImages fab mini autoSize" data-imagetype="Backdrop">
                     <span class="material-icons search" aria-hidden="true"></span>
                 </button>
-                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" style="margin-left: .5em;" data-imagetype="Backdrop">
+                <button type="button" is="emby-button" class="btnOpenUploadMenu fab mini hide" data-imagetype="Backdrop">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/indicators/indicators.js

@@ -78,7 +78,7 @@ export function getPlayedIndicatorHtml(item) {
     if (enablePlayedIndicator(item)) {
         const userData = item.UserData || {};
         if (userData.UnplayedItemCount) {
-            return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
+            return '<div class="countIndicator indicator">' + datetime.toLocaleString(userData.UnplayedItemCount) + '</div>';
         }
 
         if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
@@ -93,7 +93,7 @@ export function getChildCountIndicatorHtml(item, options) {
     const minCount = options && options.minCount ? options.minCount : 0;
 
     if (item.ChildCount && item.ChildCount > minCount) {
-        return '<div class="countIndicator indicator">' + item.ChildCount + '</div>';
+        return '<div class="countIndicator indicator">' + datetime.toLocaleString(item.ChildCount) + '</div>';
     }
 
     return '';

src/components/indicators/indicators.scss

@@ -8,8 +8,15 @@
 .itemProgressBarForeground {
     position: absolute;
     top: 0;
-    left: 0;
     bottom: 0;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .indicator {
@@ -32,9 +39,15 @@
 }
 
 .indicator + .indicator {
+    [dir="ltr"] & {
         margin-left: 0.25em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 0.25em;
+    }
+}
+
 .indicatorIcon {
     width: auto;
     height: auto;

src/components/itemMediaInfo/itemMediaInfo.js

@@ -66,7 +66,7 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
             html += `${createAttribute(globalize.translate('MediaInfoFormat'), version.Formats.join(','))}<br/>`;
         }
         if (version.Path && user && user.Policy.IsAdministrator) {
-            html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path)}<br/>`;
+            html += `${createAttribute(globalize.translate('MediaInfoPath'), version.Path, true)}<br/>`;
         }
         if (version.Size) {
             const size = `${(version.Size / (1024 * 1024)).toFixed(0)} MB`;
@@ -212,8 +212,9 @@ const attributeDelimiterHtml = layoutManager.tv ? '' : '<span class="hide">: </s
         return html;
     }
 
-    function createAttribute(label, value) {
+    // File Paths should be always ltr. The isLtr parameter allows this.
-        return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute">${escapeHtml(value)}</span>\n`;
+    function createAttribute(label, value, isLtr) {
+        return `<span class="mediaInfoLabel">${label}</span>${attributeDelimiterHtml}<span class="mediaInfoAttribute" ${isLtr && 'dir="ltr"'}>${escapeHtml(value)}</span>\n`;
     }
 
     function loadMediaInfo(itemId, serverId) {

src/components/itemidentifier/itemidentifier.js

@@ -22,6 +22,7 @@ import '../cardbuilder/card.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import template from './itemidentifier.template.html';
+import datetime from '../../scripts/datetime';
 
     const enableFocusTransform = !browser.slow && !browser.edge;
 
@@ -166,7 +167,7 @@ import template from './itemidentifier.template.html';
         lines.push(escapeHtml(identifyResult.Name));
 
         if (identifyResult.ProductionYear) {
-            lines.push(identifyResult.ProductionYear);
+            lines.push(datetime.toLocaleString(identifyResult.ProductionYear, {useGrouping: false}));
         }
 
         let resultHtml = lines.join('<br/>');

src/components/libraryoptionseditor/libraryoptionseditor.js

@@ -11,6 +11,7 @@ import dom from '../../scripts/dom';
 import '../../elements/emby-checkbox/emby-checkbox';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-input/emby-input';
+import './style.scss';
 import template from './libraryoptionseditor.template.html';
 
     function populateLanguages(parent) {
@@ -231,7 +232,7 @@ import template from './libraryoptionseditor.template.html';
         html += '<h3 class="checkboxListLabel" style="margin:0;">' + globalize.translate('HeaderTypeImageFetchers', globalize.translate('TypeOptionPlural' + availableTypeOptions.Type)) + '</h3>';
         const supportedImageTypes = availableTypeOptions.SupportedImageTypes || [];
         if (supportedImageTypes.length > 1 || supportedImageTypes.length === 1 && supportedImageTypes[0] !== 'Primary') {
-            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="margin-left:1.5em;font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
+            html += '<button is="emby-button" class="raised btnImageOptionsForType" type="button" style="font-size:90%;"><span>' + globalize.translate('HeaderFetcherSettings') + '</span></button>';
         }
         html += '</div>';
         html += '<div class="checkboxList paperList checkboxList-paperList">';

src/components/libraryoptionseditor/style.scss

@@ -0,0 +1,9 @@
+.raised.btnImageOptionsForType {
+    [dir="ltr"] & {
+        margin-left: 1.5em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1.5em;
+    }
+}

src/components/listview/listview.js

@@ -149,7 +149,7 @@ import ServerConnections from '../ServerConnections';
 
             elem.classList.add('listItemBodyText');
 
-            elem.innerText = text;
+            elem.innerHTML = '<bdi>' + text + '</bdi>';
 
             html += elem.outerHTML;
         }
@@ -414,7 +414,7 @@ import ServerConnections from '../ServerConnections';
 
             if (enableOverview && item.Overview) {
                 html += '<div class="secondary listItem-overview listItemBodyText">';
-                html += item.Overview;
+                html += '<bdi>' + item.Overview + '</bdi>';
                 html += '</div>';
             }
 
@@ -477,7 +477,7 @@ import ServerConnections from '../ServerConnections';
 
                 if (enableOverview && item.Overview) {
                     html += '<div class="listItem-bottomoverview secondary">';
-                    html += item.Overview;
+                    html += '<bdi>' + item.Overview + '</bdi>';
                     html += '</div>';
                 }
             }

src/components/listview/listview.scss

@@ -1,3 +1,10 @@
+.listItem,
+.listItemBody,
+.listItemMediaInfo {
+    display: flex;
+    contain: layout style;
+}
+
 .listItem {
     background: transparent;
     border: 0;
@@ -9,10 +16,18 @@
     margin: 0;
     display: block;
     align-items: center;
-    text-align: left;
-    padding: 0.25em 0.25em 0.25em 0.5em;
     cursor: pointer;
     overflow: hidden;
+
+    [dir="ltr"] & {
+        text-align: left;
+        padding: 0.25em 0.25em 0.25em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+        padding: 0.25em 0.5em 0.25em 0.25em;
+    }
 }
 
 .listItem-withContentWrapper {
@@ -75,8 +90,15 @@
 }
 
 .listViewDragHandle {
-    margin-left: -0.25em !important;
     touch-action: none;
+
+    [dir="ltr"] & {
+        margin-left: -0.25em !important;
+    }
+
+    [dir="rtl"] & {
+        margin-right: -0.25em !important;
+    }
 }
 
 .listItemBody {
@@ -89,13 +111,6 @@
     justify-content: center;
 }
 
-.listItem,
-.listItemBody,
-.listItemMediaInfo {
-    display: flex;
-    contain: layout style;
-}
-
 .layout-tv .listItemBody {
     padding: 0.35em 0.75em;
 }
@@ -211,7 +226,14 @@
     width: 1em !important;
     height: 1em !important;
     font-size: 143%;
-    padding: 0 0.25em 0 0;
+
+    [dir="ltr"] & {
+        margin: 0 0.25em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 0 0.25em;
+    }
 }
 
 .listItemIcon:not(.listItemIcon-transparent) {
@@ -219,9 +241,16 @@
     color: #fff;
     padding: 0.5em;
     border-radius: 100em;
+
+    [dir="ltr"] & {
         margin: 0 0.2em 0 0.4em;
     }
 
+    [dir="rtl"] & {
+        margin: 0 0.4em 0 0.2em;
+    }
+}
+
 .listItemProgressBar {
     position: absolute;
     bottom: 0;

src/components/loading/loading.js

@@ -13,6 +13,7 @@ export function show() {
 
     if (!elem) {
         elem = document.createElement('div');
+        elem.setAttribute('dir', 'ltr');
         loadingElem = elem;
 
         elem.classList.add('docspinner');

src/components/mediaLibraryCreator/mediaLibraryCreator.js

@@ -20,6 +20,7 @@ import '../../elements/emby-toggle/emby-toggle';
 import '../listview/listview.scss';
 import '../formdialog.scss';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import toast from '../toast/toast';
 import alert from '../alert';
 import template from './mediaLibraryCreator.template.html';
@@ -119,12 +120,12 @@ import template from './mediaLibraryCreator.template.html';
 
     function getFolderHtml(pathInfo, index) {
         let html = '';
-        html += '<div class="listItem listItem-border lnkPath" style="padding-left:.5em;">';
+        html += '<div class="listItem listItem-border lnkPath">';
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
-        html += `<div class="listItemBodyText">${escapeHtml(pathInfo.Path)}</div>`;
+        html += `<div class="listItemBodyText" dir="ltr">${escapeHtml(pathInfo.Path)}</div>`;
 
         if (pathInfo.NetworkPath) {
-            html += `<div class="listItemBodyText secondary">${escapeHtml(pathInfo.NetworkPath)}</div>`;
+            html += `<div class="listItemBodyText secondary" dir="ltr">${escapeHtml(pathInfo.NetworkPath)}</div>`;
         }
 
         html += '</div>';

src/components/mediaLibraryCreator/mediaLibraryCreator.template.html

@@ -19,7 +19,7 @@
         <div class="folders">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/mediaLibraryCreator/style.scss

@@ -0,0 +1,19 @@
+.fab.btnAddFolder.submit {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
+.listItem.listItem-border.lnkPath {
+    [dir="ltr"] & {
+        padding-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 0.5em;
+    }
+}

src/components/mediaLibraryEditor/mediaLibraryEditor.js

@@ -18,6 +18,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.scss';
 import '../../elements/emby-toggle/emby-toggle';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import toast from '../toast/toast';
 import confirm from '../confirm/confirm';
 import template from './mediaLibraryEditor.template.html';
@@ -109,7 +110,7 @@ import template from './mediaLibraryEditor.template.html';
 
     function getFolderHtml(pathInfo, index) {
         let html = '';
-        html += `<div class="listItem listItem-border lnkPath" data-index="${index}" style="padding-left:.5em;">`;
+        html += `<div class="listItem listItem-border lnkPath" data-index="${index}">`;
         html += `<div class="${pathInfo.NetworkPath ? 'listItemBody two-line' : 'listItemBody'}">`;
         html += '<h3 class="listItemBodyText">';
         html += escapeHtml(pathInfo.Path);

src/components/mediaLibraryEditor/mediaLibraryEditor.template.html

@@ -12,7 +12,7 @@
         <div class="folders hide">
             <div style="display: flex; align-items: center;">
                 <h1 style="margin: .5em 0;">${Folders}</h1>
-                <button is="emby-button" type="button" class="fab btnAddFolder submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddFolder submit" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
             </div>

src/components/mediaLibraryEditor/style.scss

@@ -0,0 +1,19 @@
+.fab.btnAddFolder.submit {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
+.listItem.listItem-border.lnkPath {
+    [dir="ltr"] & {
+        padding-left: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 0.5em;
+    }
+}

src/components/mediainfo/mediainfo.js

@@ -176,16 +176,16 @@ import '../../elements/emby-button/emby-button';
 
         if (options.year !== false && item.ProductionYear && item.Type === 'Series') {
             if (item.Status === 'Continuing') {
-                miscInfo.push(globalize.translate('SeriesYearToPresent', item.ProductionYear));
+                miscInfo.push(globalize.translate('SeriesYearToPresent', datetime.toLocaleString(item.ProductionYear, {useGrouping: false})));
             } else if (item.ProductionYear) {
-                text = item.ProductionYear;
+                text = datetime.toLocaleString(item.ProductionYear, {useGrouping: false});
 
                 if (item.EndDate) {
                     try {
-                        const endYear = datetime.parseISO8601Date(item.EndDate).getFullYear();
+                        const endYear = datetime.toLocaleString(datetime.parseISO8601Date(item.EndDate).getFullYear(), {useGrouping: false});
 
                         if (endYear !== item.ProductionYear) {
-                            text += `-${datetime.parseISO8601Date(item.EndDate).getFullYear()}`;
+                            text += `-${endYear}`;
                         }
                     } catch (e) {
                         console.error('error parsing date:', item.EndDate);
@@ -247,7 +247,7 @@ import '../../elements/emby-button/emby-button';
                 miscInfo.push(item.ProductionYear);
             } else if (item.PremiereDate) {
                 try {
-                    text = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
+                    text = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false});
                     miscInfo.push(text);
                 } catch (e) {
                     console.error('error parsing date:', item.PremiereDate);

src/components/mediainfo/mediainfo.scss

@@ -1,6 +1,13 @@
 .mediaInfoItem {
-    margin: 0 1em 0 0;
     padding: 0;
+
+    [dir="ltr"] & {
+        margin: 0 1em 0 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 0 1em;
+    }
 }
 
 .mediaInfoText {
@@ -25,9 +32,15 @@
 }
 
 .mediaInfoItem:last-child {
+    [dir="ltr"] & {
         margin-right: 0;
     }
 
+    [dir="rtl"] & {
+        margin-left: 0;
+    }
+}
+
 .starRatingContainer {
     display: flex;
     align-items: center;
@@ -46,13 +59,21 @@
 }
 
 .mediaInfoCriticRating {
-    padding-left: 1.5em;
-    background-position: left center;
     background-repeat: no-repeat;
     background-size: auto 1.2em;
     min-height: 1.2em;
     display: flex;
     align-items: center;
+
+    [dir="ltr"] & {
+        padding-left: 1.5em;
+        background-position: left center;
+    }
+
+    [dir="rtl"] & {
+        padding-right: 1.5em;
+        background-position: right center;
+    }
 }
 
 .mediaInfoCriticRatingFresh {

src/components/metadataEditor/metadataEditor.js

@@ -17,6 +17,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../formdialog.scss';
 import '../../assets/css/clearbutton.scss';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import ServerConnections from '../ServerConnections';
 import toast from '../toast/toast';
 import { appRouter } from '../appRouter';

src/components/metadataEditor/metadataEditor.template.html

@@ -3,7 +3,7 @@
     <h3 class="formDialogHeaderTitle">
         ${Edit}
     </h3>
-    <div style="margin-left: auto;" class="flex align-items-center justify-content-center">
+    <div class="dialogHeader flex align-items-center justify-content-center">
         <button is="emby-button" type="button" class="btnHeaderSave button-accent-flat button-flat hide" tabindex="-1">
             <span class="material-icons check" aria-hidden="true"></span>
             <span>${Save}</span>
@@ -29,7 +29,7 @@
                 <div id="fldPath" class="inputContainer">
                     <div class="align-items-center flex">
                         <div class="flex-grow">
-                            <input is="emby-input" id="txtPath" type="text" label="${LabelPath}" class="flex-grow" readonly />
+                            <input is="emby-input" id="txtPath" type="text" label="${LabelPath}" class="flex-grow" readonly dir="ltr"/>
                         </div>
                     </div>
                 </div>
@@ -194,7 +194,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Genres}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listGenres"></div>
@@ -203,7 +203,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${People}
                 </h2>
-                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" id="btnAddPerson" class="fab btnAddPerson marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div id="peopleList" class="paperList">
@@ -213,7 +213,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Studios}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listStudios"></div>
@@ -222,7 +222,7 @@
                 <h2 style="margin:.6em 0;vertical-align:middle;display:inline-block;">
                     ${Tags}
                 </h2>
-                <button is="emby-button" type="button" class="fab btnAddTextItem submit" style="margin-left:1em;" title="${Add}">
+                <button is="emby-button" type="button" class="fab btnAddTextItem submit marginStart" title="${Add}">
                     <span class="material-icons add" aria-hidden="true"></span>
                 </button>
                 <div class="paperList" id="listTags"></div>

src/components/metadataEditor/style.scss

@@ -0,0 +1,19 @@
+.dialogHeader {
+    [dir="ltr"] & {
+        margin-left: auto;
+    }
+
+    [dir="rtl"] & {
+        margin-right: auto;
+    }
+}
+
+.metadataFormFields .marginStart {
+    [dir="ltr"] & {
+        margin-left: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}

src/components/multiSelect/multiSelect.js

@@ -9,6 +9,7 @@ import alert from '../alert';
 import playlistEditor from '../playlisteditor/playlisteditor';
 import confirm from '../confirm/confirm';
 import itemHelper from '../itemHelper';
+import datetime from '../../scripts/datetime';
 
 /* eslint-disable indent */
 
@@ -78,7 +79,7 @@ import itemHelper from '../itemHelper';
         if (selectedItems.length) {
             const itemSelectionCount = document.querySelector('.itemSelectionCount');
             if (itemSelectionCount) {
-                itemSelectionCount.innerHTML = selectedItems.length;
+                itemSelectionCount.innerHTML = datetime.toLocaleString(selectedItems.length);
             }
         } else {
             hideSelections();
@@ -129,7 +130,7 @@ import itemHelper from '../itemHelper';
             html += '<h1 class="itemSelectionCount"></h1>';
 
             const moreIcon = 'more_vert';
-            html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize" style="margin-left:auto;"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
+            html += `<button is="paper-icon-button-light" class="btnSelectionPanelOptions autoSize"><span class="material-icons ${moreIcon}" aria-hidden="true"></span></button>`;
 
             selectionCommandsPanel.innerHTML = html;
 

src/components/multiSelect/multiSelect.scss

@@ -40,3 +40,7 @@
 .withMultiSelect {
     position: relative;
 }
+
+.btnSelectionPanelOptions {
+    margin-left: auto;
+}

src/components/nowPlayingBar/nowPlayingBar.js

@@ -48,7 +48,7 @@ import { appRouter } from '../appRouter';
         html += '<div class="nowPlayingBar hide nowPlayingBar-hidden">';
 
         html += '<div class="nowPlayingBarTop">';
-        html += '<div class="nowPlayingBarPositionContainer sliderContainer">';
+        html += '<div class="nowPlayingBarPositionContainer sliderContainer" dir="ltr">';
         html += '<input type="range" is="emby-slider" pin step=".01" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarPositionSlider" data-slider-keep-progress="true"/>';
         html += '</div>';
 
@@ -58,7 +58,7 @@ import { appRouter } from '../appRouter';
         html += '</div>';
 
         // The onclicks are needed due to the return false above
-        html += '<div class="nowPlayingBarCenter">';
+        html += '<div class="nowPlayingBarCenter" dir="ltr">';
 
         html += '<button is="paper-icon-button-light" class="previousTrackButton mediaButton"><span class="material-icons skip_previous" aria-hidden="true"></span></button>';
 

src/components/nowPlayingBar/nowPlayingBar.scss

@@ -54,13 +54,22 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     vertical-align: middle;
-    text-align: left;
     flex-grow: 1;
     font-size: 92%;
+
+    [dir="ltr"] & {
+        text-align: left;
         margin-right: 1em;
         margin-left: 0.5em;
     }
 
+    [dir="rtl"] & {
+        text-align: right;
+        margin-left: 1em;
+        margin-right: 0.5em;
+    }
+}
+
 .nowPlayingBarCenter {
     vertical-align: middle;
     text-align: center;
@@ -92,7 +101,6 @@
 
 .nowPlayingBarRight {
     position: relative;
-    margin: 0 0.5em 0 auto;
 
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
@@ -100,6 +108,14 @@
     justify-content: flex-end;
     align-items: center;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin: 0 0.5em 0 auto;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 auto 0 0.5em;
+    }
 }
 
 .nowPlayingBarCurrentTime {
@@ -110,9 +126,15 @@
 }
 
 .nowPlayingBarVolumeSliderContainer {
+    [dir="ltr"] & {
         margin-right: 2em;
     }
 
+    [dir="rtl"] & {
+        margin-left: 2em;
+    }
+}
+
 .nowPlayingBarUserDataButtons {
     display: inline-block;
 }

src/components/playerstats/playerstats.scss

@@ -2,9 +2,16 @@
     background: rgba(28, 28, 28, 0.8);
     border-radius: 0.3em;
     color: #fff;
-    left: 1.5em;
     position: absolute;
     top: 5em;
+
+    [dir="ltr"] & {
+        left: 1.5em;
+    }
+
+    [dir="rtl"] & {
+        right: 1.5em;
+    }
 }
 
 .playerStats-tv {
@@ -31,25 +38,52 @@
 .playerStats-stats {
     display: flex;
     flex-direction: column;
-    padding: 0 3em 1em 1em;
     max-width: 50em;
     overflow: hidden;
+
+    [dir="ltr"] & {
+        padding: 0 3em 1em 1em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0 1em 1em 3em;
+    }
 }
 
 .playerStats-stat {
     display: flex;
+
+    [dir="ltr"] & {
         margin-left: 1em;
     }
 
+    [dir="rtl"] & {
+        margin-right: 1em;
+    }
+}
+
 .playerStats-stat-label {
     font-weight: 500;
+
+    [dir="ltr"] & {
         margin: 0 0.5em 0 0;
     }
 
+    [dir="rtl"] & {
+        margin: 0 0 0 0.5em;
+    }
+}
+
 .playerStats-stat-header {
+    [dir="ltr"] & {
         margin: 1em 1em 0 0;
     }
 
+    [dir="rtl"] & {
+        margin: 1em 0 0 1em;
+    }
+}
+
 .playerStats-stat-value {
     color: #ddd;
 }

src/components/recordingcreator/recordingfields.scss

@@ -1,6 +1,13 @@
 .recordingButton {
-    margin-left: 0;
     min-width: 10em;
+
+    [dir="ltr"] & {
+        margin-left: 0;
+    }
+
+    [dir="rtl"] & {
+        margin-right: 0;
+    }
 }
 
 .recordingIcon-active {

src/components/remotecontrol/remotecontrol.scss

@@ -39,9 +39,15 @@
 }
 
 .nowPlayingPageTitle {
+    [dir="ltr"] & {
         margin: 0 0 0.5em 0.5em;
     }
 
+    [dir="rtl"] & {
+        margin: 0 0.5em 0.5em 0;
+    }
+}
+
 .nowPlayingAlbum a,
 .nowPlayingArtist a {
     font-weight: normal;
@@ -51,6 +57,10 @@
 
 .nowPlayingButtonsContainer {
     display: flex;
+
+    [dir="rtl"] & {
+        flex-direction: row-reverse;
+    }
 }
 
 .infoContainer,
@@ -94,10 +104,17 @@
 
 .nowPlayingPageImageContainer {
     width: 16%;
-    margin-right: 1em;
     position: relative;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
+
+    [dir="ltr"] & {
+        margin-right: 1em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 1em;
+    }
 }
 
 .nowPlayingPageImageContainerNoAlbum {
@@ -268,8 +285,14 @@
 
 @media all and (min-width: 80em) {
     .nowPlayingPageImageContainer {
+        [dir="ltr"] & {
             margin-right: 0.75em;
         }
+
+        [dir="rtl"] & {
+            margin-left: 0.75em;
+        }
+    }
 }
 
 @media all and (orientation: portrait) and (max-width: 43em) {
@@ -365,24 +388,49 @@
 
     .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
         padding-top: 0;
+        border-radius: 0;
+
+        [dir="ltr"] & {
             padding-right: 0;
             margin-right: 0;
             float: right;
-        border-radius: 0;
+        }
+
+        [dir="rtl"] & {
+            padding-left: 0;
+            margin-left: 0;
+            float: left;
+        }
     }
 
     .nowPlayingInfoButtons .btnRepeat,
     .nowPlayingInfoButtons .btnRewind {
+        font-size: smaller;
+
+        [dir="ltr"] & {
             margin-left: 0;
             margin-right: auto;
-        font-size: smaller;
+        }
+
+        [dir="rtl"] & {
+            margin-right: 0;
+            margin-left: auto;
+        }
     }
 
     .nowPlayingInfoButtons .btnShuffleQueue,
     .nowPlayingInfoButtons .btnFastForward {
+        font-size: smaller;
+
+        [dir="ltr"] & {
             margin-left: auto;
             margin-right: 0;
-        font-size: smaller;
+        }
+
+        [dir="rtl"] & {
+            margin-right: auto;
+            margin-left: 0;
+        }
     }
 
     .paper-icon-button-light {
@@ -413,7 +461,7 @@
 
     .nowPlayingButtonsContainer {
         display: flex;
-        flex-direction: column;
+        flex-direction: column !important;
     }
 }
 

src/components/subtitleuploader/style.scss

@@ -9,3 +9,7 @@
     align-items: center;
     justify-content: center;
 }
+
+.raised.raised-mini.btnBrowse {
+    margin-left: 1.5em;
+}

src/components/subtitleuploader/subtitleuploader.template.html

@@ -13,7 +13,7 @@
             <div class="flex align-items-center" style="margin:1.5em 0;">
                 <h2 style="margin:0;">${HeaderAddUpdateSubtitle}</h2>
 
-                <button is="emby-button" type="button" class="raised raised-mini btnBrowse" style="margin-left:1.5em;">
+                <button is="emby-button" type="button" class="raised raised-mini btnBrowse">
                     <span class="material-icons folder" aria-hidden="true"></span>
                     <span>${Browse}</span>
                 </button>

src/components/toast/toast.scss

@@ -1,6 +1,5 @@
 .toastContainer {
     position: fixed;
-    left: 0;
     bottom: 0;
     pointer-events: none;
     z-index: 9999999;
@@ -12,6 +11,14 @@
     padding-bottom: max(env(safe-area-inset-bottom), 1em);
     display: flex;
     flex-direction: column;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .toast {

src/components/tvproviders/schedulesdirect.js

@@ -8,6 +8,7 @@ import '../../elements/emby-button/paper-icon-button-light';
 import '../../elements/emby-select/emby-select';
 import '../../elements/emby-button/emby-button';
 import '../../assets/css/flexstyles.scss';
+import './style.scss';
 import Dashboard from '../../utils/dashboard';
 import Events from '../../utils/events.ts';
 

src/components/tvproviders/schedulesdirect.template.html

@@ -37,7 +37,7 @@
         <h2 style="background-color:rgba(82,181,75,.8);color:#fff;margin: 0;border-radius:100em;height:1.7em;width:1.7em;" class="flex align-items-center justify-content-center">
             2
         </h2>
-        <h3 style="margin:0 0 0 .5em;">
+        <h3 class="guideProviderSelectListings">
             ${GuideProviderSelectListings}
         </h3>
     </div>

src/components/tvproviders/style.scss

@@ -0,0 +1,9 @@
+.guideProviderSelectListings {
+    [dir="ltr"] & {
+        margin: 0 0 0 0.5em;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0.5em 0 0;
+    }
+}

src/components/upnextdialog/upnextdialog.scss

@@ -4,7 +4,6 @@
     bottom: 0;
     width: 30em;
     padding: 1em;
-    margin: 0 2em 2em 0;
     display: flex;
     flex-direction: column;
     will-change: transform, opacity;
@@ -13,6 +12,14 @@
     color: #fff;
     user-select: none;
     -webkit-touch-callout: none;
+
+    [dir="ltr"] & {
+        margin: 0 2em 2em 0;
+    }
+
+    [dir="rtl"] & {
+        margin: 0 0 2em 2em;
+    }
 }
 
 .upNextDialog-hidden {

src/controllers/dashboard/dashboard.html

@@ -80,31 +80,31 @@
                         <div class="listItem listItem-border">
                             <div class="listItemBody two-line">
                                 <div class="listItemBodyText secondary" style="margin:0;">${LabelCache}</div>
-                                <div class="listItemBodyText" id="cachePath"></div>
+                                <div class="listItemBodyText" id="cachePath" dir="ltr" style="text-align: left;"></div>
                             </div>
                         </div>
                         <div class="listItem listItem-border">
                             <div class="listItemBody two-line">
                                 <div class="listItemBodyText secondary" style="margin:0;">${LabelLogs}</div>
-                                <div class="listItemBodyText" id="logPath"></div>
+                                <div class="listItemBodyText" id="logPath" dir="ltr" style="text-align: left;"></div>
                             </div>
                         </div>
                         <div class="listItem listItem-border">
                             <div class="listItemBody two-line">
                                 <div class="listItemBodyText secondary" style="margin:0;">${LabelMetadata}</div>
-                                <div class="listItemBodyText" id="metadataPath"></div>
+                                <div class="listItemBodyText" id="metadataPath" dir="ltr" style="text-align: left;"></div>
                             </div>
                         </div>
                         <div class="listItem listItem-border">
                             <div class="listItemBody two-line">
                                 <div class="listItemBodyText secondary" style="margin:0;">${LabelTranscodes}</div>
-                                <div class="listItemBodyText" id="transcodePath"></div>
+                                <div class="listItemBodyText" id="transcodePath" dir="ltr" style="text-align: left;"></div>
                             </div>
                         </div>
                         <div class="listItem listItem-border">
                             <div class="listItemBody two-line">
                                 <div class="listItemBodyText secondary" style="margin:0;">${LabelWeb}</div>
-                                <div class="listItemBodyText" id="webPath"></div>
+                                <div class="listItemBodyText" id="webPath" dir="ltr" style="text-align: left;"></div>
                             </div>
                         </div>
                     </div>

src/controllers/dashboard/dashboard.js

@@ -280,7 +280,7 @@ import confirm from '../../components/confirm/confirm';
                     html += clientImage;
                 }
 
-                html += '<div class="sessionAppName" style="display:inline-block;">';
+                html += '<div class="sessionAppName" style="display:inline-block; text-align:left;"  dir="ltr" >';
                 html += '<div class="sessionDeviceName">' + escapeHtml(session.DeviceName) + '</div>';
                 html += '<div class="sessionAppSecondaryText">' + escapeHtml(DashboardPage.getAppSecondaryText(session)) + '</div>';
                 html += '</div>';

src/controllers/dashboard/devices/devices.js

@@ -115,6 +115,9 @@ import confirm from '../../../components/confirm/confirm';
             deviceHtml += '<div class="cardFooter">';
 
             if (canEdit || canDelete(device.Id)) {
+                if (globalize.getIsRTL())
+                    deviceHtml += '<div style="text-align:left; float:left;padding-top:5px;">';
+                else
                     deviceHtml += '<div style="text-align:right; float:right;padding-top:5px;">';
                 deviceHtml += '<button type="button" is="paper-icon-button-light" data-id="' + device.Id + '" title="' + globalize.translate('Menu') + '" class="btnDeviceMenu"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
                 deviceHtml += '</div>';

src/controllers/dashboard/encodingsettings.html

@@ -220,7 +220,7 @@
                 <div class="inputContainer fldEncoderPath">
                     <div style="display: flex; align-items: center;">
                         <div style="flex-grow:1;">
-                            <input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" />
+                            <input is="emby-input" class="txtEncoderPath" label="${LabelffmpegPath}" autocomplete="off" dir="ltr" />
                         </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectEncoderPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                     </div>
@@ -231,7 +231,7 @@
                 <div class="inputContainer">
                     <div style="display: flex; align-items: center;">
                         <div style="flex-grow:1;">
-                            <input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" />
+                            <input is="emby-input" id="txtTranscodingTempPath" label="${LabelTranscodePath}" autocomplete="off" dir="ltr" />
                         </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectTranscodingTempPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                     </div>
@@ -240,7 +240,7 @@
                 <div class="inputContainer">
                     <div style="display: flex; align-items: center;">
                         <div style="flex-grow:1;">
-                            <input is="emby-input" id="txtFallbackFontPath" label="${LabelFallbackFontPath}" autocomplete="off" />
+                            <input is="emby-input" id="txtFallbackFontPath" label="${LabelFallbackFontPath}" autocomplete="off" dir="ltr" />
                         </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectFallbackFontPath" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                     </div>

src/controllers/dashboard/general.html

@@ -30,7 +30,7 @@
                     <div class="inputContainer">
                         <div style="display: flex; align-items: center;">
                             <div style="flex-grow:1;">
-                                <input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" />
+                                <input is="emby-input" id="txtCachePath" label="${LabelCachePath}" autocomplete="off" dir="ltr" />
                             </div>
                             <button type="button" is="paper-icon-button-light" id="btnSelectCachePath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                         </div>
@@ -40,7 +40,7 @@
                     <div class="inputContainer">
                         <div style="display: flex; align-items: center;">
                             <div style="flex-grow:1;">
-                                <input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" />
+                                <input is="emby-input" id="txtMetadataPath" label="${LabelMetadataPath}" autocomplete="off" dir="ltr" />
                             </div>
                             <button type="button" is="paper-icon-button-light" id="btnSelectMetadataPath" title="${ButtonSelectDirectory}" class="emby-input-iconbutton"><span class="material-icons search" aria-hidden="true"></span></button>
                         </div>

src/controllers/dashboard/library.js

@@ -310,7 +310,10 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
         html += '<div class="cardFooter visualCardBox-cardFooter">'; // always show menu unless explicitly hidden
 
         if (virtualFolder.showMenu !== false) {
-            html += '<div style="text-align:right; float:right;padding-top:5px;">';
+            let dirTextAlign = 'right';
+            if (globalize.getIsRTL())
+                dirTextAlign = 'left';
+            html += '<div style="text-align:' + dirTextAlign + '; float:' + dirTextAlign + ';padding-top:5px;">';
             html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
             html += '</div>';
         }
@@ -343,7 +346,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
             html += '&nbsp;';
             html += '</div>';
         } else if (virtualFolder.Locations.length && virtualFolder.Locations.length === 1) {
-            html += "<div class='cardText cardText-secondary'>";
+            html += "<div class='cardText cardText-secondary' dir='ltr' style='text-align:left;'>";
             html += virtualFolder.Locations[0];
             html += '</div>';
         } else {

src/controllers/dashboard/logs.js

@@ -42,7 +42,7 @@ import alert from '../../components/alert';
                     let logHtml = '';
                     logHtml += '<a is="emby-linkbutton" href="' + logUrl + '" target="_blank" class="listItem listItem-border" style="color:inherit;">';
                     logHtml += '<div class="listItemBody two-line">';
-                    logHtml += "<h3 class='listItemBodyText'>" + log.Name + '</h3>';
+                    logHtml += "<h3 class='listItemBodyText' dir='ltr' style='text-align: left'>" + log.Name + '</h3>';
                     const date = datetime.parseISO8601Date(log.DateModified, true);
                     let text = datetime.toLocaleDateString(date);
                     text += ' ' + datetime.getDisplayTime(date);

src/controllers/dashboard/plugins/installed/index.js

@@ -83,6 +83,9 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
     html += '<div class="cardFooter">';
 
     if (configPage || plugin.CanUninstall) {
+        if (globalize.getIsRTL())
+            html += '<div style="text-align:left; float:left;padding-top:5px;">';
+        else
             html += '<div style="text-align:right; float:right;padding-top:5px;">';
         html += '<button type="button" is="paper-icon-button-light" class="btnCardMenu autoSize"><span class="material-icons more_vert" aria-hidden="true"></span></button>';
         html += '</div>';

src/controllers/dashboard/scheduledtasks/scheduledtasks.js

@@ -59,7 +59,10 @@ import '../../../elements/emby-button/emby-button';
             html += '<span class="material-icons listItemIcon schedule" aria-hidden="true"></span>';
             html += '</a>';
             html += '<div class="listItemBody two-line">';
-            html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:left;' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
+            let textAlignStyle = 'left';
+            if (globalize.getIsRTL())
+                textAlignStyle = 'right';
+            html += "<a class='clearLink' style='margin:0;padding:0;display:block;text-align:" + textAlignStyle + ";' is='emby-linkbutton' href='scheduledtask.html?id=" + task.Id + "'>";
             html += "<h3 class='listItemBodyText'>" + task.Name + '</h3>';
             html += "<div class='secondary listItemBodyText' id='taskProgress" + task.Id + "'>" + getTaskProgressHtml(task) + '</div>';
             html += '</a>';

src/controllers/itemDetails/index.js

@@ -476,7 +476,7 @@ function renderName(item, container, context) {
                 html = '<h3 class="parentName musicParentName focuscontainer-x">' + parentNameHtml.join(' - ') + '</h3>';
             }
         } else {
-            html = '<h1 class="parentName focuscontainer-x">' + tvShowHtml + '</h1>';
+            html = '<h1 class="parentName focuscontainer-x"><bdi>' + tvShowHtml + '</bdi></h1>';
         }
     }
 
@@ -486,14 +486,14 @@ function renderName(item, container, context) {
 
     if (html && !parentNameLast) {
         if (tvSeasonHtml) {
-            html += '<h3 class="itemName infoText subtitle focuscontainer-x">' + tvSeasonHtml + ' - ' + name + '</h3>';
+            html += '<h3 class="itemName infoText subtitle focuscontainer-x"><bdi>' + tvSeasonHtml + ' - ' + name + '</bdi></h3>';
         } else {
-            html += '<h3 class="itemName infoText subtitle">' + name + '</h3>';
+            html += '<h3 class="itemName infoText subtitle"><bdi>' + name + '</bdi></h3>';
         }
     } else if (item.OriginalTitle && item.OriginalTitle != item.Name) {
-        html = '<h1 class="itemName infoText parentNameLast withOriginalTitle">' + name + '</h1>' + html;
+        html = '<h1 class="itemName infoText parentNameLast withOriginalTitle"><bdi>' + name + '</bdi></h1>' + html;
     } else {
-        html = '<h1 class="itemName infoText parentNameLast">' + name + '</h1>' + html;
+        html = '<h1 class="itemName infoText parentNameLast"><bdi>' + name + '</bdi></h1>' + html;
     }
 
     if (item.OriginalTitle && item.OriginalTitle != item.Name) {
@@ -915,7 +915,7 @@ function renderOverview(page, item) {
 
         if (overview) {
             for (const overviewElemnt of overviewElements) {
-                overviewElemnt.innerHTML = overview;
+                overviewElemnt.innerHTML = '<bdi>' + overview + '</bdi>';
                 overviewElemnt.classList.remove('hide');
                 overviewElemnt.classList.add('detail-clamp-text');
 
@@ -1068,7 +1068,7 @@ function renderTagline(page, item) {
 
     if (item.Taglines && item.Taglines.length) {
         taglineElement.classList.remove('hide');
-        taglineElement.innerText = item.Taglines[0];
+        taglineElement.innerHTML = '<bdi>' + item.Taglines[0] + '</bdi>';
     } else {
         taglineElement.classList.add('hide');
     }

src/controllers/playback/queue/index.html

@@ -18,7 +18,7 @@
 
                 </div>
 
-                <div class="sliderContainer flex">
+                <div class="sliderContainer flex" dir="ltr">
                     <div class="positionTime"></div>
                         <div class="nowPlayingPositionSliderContainer">
                             <input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="nowPlayingPositionSlider" data-slider-keep-progress="true" />
@@ -28,7 +28,7 @@
 
                 <div class="nowPlayingButtonsContainer focuscontainer-x justify-content-space-between">
 
-                    <div class="nowPlayingInfoButtons">
+                    <div class="nowPlayingInfoButtons" dir="ltr">
 
                         <button is="paper-icon-button-light" class="btnCommand btnRepeat repeatToggleButton autoSize" title="${Repeat}"
                             data-command="SetRepeatMode">

src/controllers/playback/video/index.html

@@ -18,7 +18,7 @@
 
             <div class="osdTextContainer osdSecondaryMediaInfo"></div>
 
-            <div class="flex flex-direction-row align-items-center">
+            <div class="flex flex-direction-row align-items-center" dir="ltr">
                 <div class="osdTextContainer startTimeText osdPositionText" style="margin: 0 .25em 0 0;"></div>
                 <div class="sliderContainer flex-grow" style="margin: .5em 0 .25em;">
                     <div class="sliderMarkerContainer"></div>
@@ -28,6 +28,7 @@
             </div>
 
             <div class="buttons focuscontainer-x">
+                <div dir="ltr">
                     <button is="paper-icon-button-light" class="btnRecord autoSize hide">
                         <span class="xlargePaperIconButton material-icons fiber_manual_record" aria-hidden="true"></span>
                     </button>
@@ -59,6 +60,7 @@
                     <button is="paper-icon-button-light" class="btnNextTrack autoSize hide" title="${NextTrack}">
                         <span class="xlargePaperIconButton material-icons skip_next" aria-hidden="true"></span>
                     </button>
+                </div>
 
                 <div class="osdTimeText">
                     <span class="endsAtText"></span>

src/controllers/playback/video/index.js

@@ -216,7 +216,7 @@ import { setBackdropTransparency, TRANSPARENCY_LEVEL } from '../../../components
             let title = itemName;
             if (item.PremiereDate) {
                 try {
-                    const year = datetime.parseISO8601Date(item.PremiereDate).getFullYear();
+                    const year = datetime.toLocaleString(datetime.parseISO8601Date(item.PremiereDate).getFullYear(), {useGrouping: false});
                     title += ` (${year})`;
                 } catch (e) {
                     console.error(e);

src/elements/emby-collapse/emby-collapse.scss

@@ -17,20 +17,36 @@
     align-items: center;
     text-transform: none;
     width: 100%;
-    text-align: left;
     border-width: 0 0 0.1em 0;
     border-style: solid;
     padding-left: 0.1em;
     background: transparent;
     box-shadow: none;
+
+    [dir="ltr"] & {
+        text-align: left;
+        padding-left: 0.1em;
+    }
+
+    [dir="rtl"] & {
+        text-align: right;
+        padding-right: 0.1em;
+    }
 }
 
 .emby-collapse-expandIcon {
     transform-origin: 50% 50%;
     transition: transform 180ms ease-out;
     position: absolute;
-    right: 0.5em;
     font-size: 1.5em;
+
+    [dir="ltr"] & {
+        right: 0.5em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.5em;
+    }
 }
 
 .emby-collapse-expandIconExpanded {

src/elements/emby-input/emby-input.scss

@@ -45,13 +45,17 @@
     margin: 0 0.5em 1.8em;
 }
 
-.inlineForm .inputContainer:first-child,
+[dir="rtl"] .inlineForm .inputContainer:last-child,
-.inlineForm .selectContainer:first-child {
+[dir="rtl"] .inlineForm .selectContainer:last-child,
+[dir="ltr"] .inlineForm .inputContainer:first-child,
+[dir="ltr"] .inlineForm .selectContainer:first-child {
     margin-left: 0;
 }
 
-.inlineForm .inputContainer:last-child,
+[dir="ltr"] .inlineForm .inputContainer:last-child,
-.inlineForm .selectContainer:last-child {
+[dir="ltr"] .inlineForm .selectContainer:last-child,
+[dir="rtl"] .inlineForm .inputContainer:first-child,
+[dir="rtl"] .inlineForm .selectContainer:first-child {
     margin-right: 0;
 }
 

src/elements/emby-progressring/emby-progressring.js

@@ -1,6 +1,7 @@
 import './emby-progressring.scss';
 import 'webcomponents.js/webcomponents-lite';
 import template from './emby-progressring.template.html';
+import { getCurrentDateTimeLocale } from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -8,6 +9,7 @@ import template from './emby-progressring.template.html';
 
     EmbyProgressRing.createdCallback = function () {
         this.classList.add('progressring');
+        this.setAttribute('dir', 'ltr');
         const instance = this;
 
         instance.innerHTML = template;
@@ -70,7 +72,10 @@ import template from './emby-progressring.template.html';
             this.querySelector('.animate-75-100-b').style.transform = 'rotate(' + angle + 'deg)';
         }
 
-        this.querySelector('.progressring-text').innerHTML = progress + '%';
+        this.querySelector('.progressring-text').innerHTML = new Intl.NumberFormat(getCurrentDateTimeLocale(), {
+            style: 'percent',
+            maximumFractionDigits: 0
+        }).format(progress / 100);
     };
 
     EmbyProgressRing.attachedCallback = function () {

src/elements/emby-radio/emby-radio.scss

@@ -32,11 +32,18 @@
 
 .mdl-radio__circles {
     position: relative;
-    margin-right: 0.54em;
     width: 1.08em;
     height: 1.08em;
     border-radius: 50%;
     cursor: pointer;
+
+    [dir="ltr"] & {
+        margin-right: 0.54em;
+    }
+
+    [dir="rtl"] & {
+        margin-left: 0.54em;
+    }
 }
 
 .mdl-radio__circles svg {
@@ -44,9 +51,16 @@
     height: 100%;
     position: absolute;
     top: 0;
-    left: 0;
     z-index: 1;
     overflow: visible;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-radio__button:disabled + .mdl-radio__circles {

src/elements/emby-scrollbuttons/emby-scrollbuttons.js

@@ -40,6 +40,11 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
     }
 
     function updateScrollButtons(scrollButtons, scrollSize, scrollPos, scrollWidth) {
+        let localeAwarePos = scrollPos;
+        if (globalize.getIsElementRTL(scrollButtons)) {
+            localeAwarePos *= -1;
+        }
+
         // TODO: Check if hack is really needed
         // hack alert add twenty for rounding errors
         if (scrollWidth <= scrollSize + 20) {
@@ -50,13 +55,13 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
             scrollButtons.scrollButtonsRight.classList.remove('hide');
         }
 
-        if (scrollPos > 0) {
+        if (localeAwarePos > 0) {
             scrollButtons.scrollButtonsLeft.disabled = false;
         } else {
             scrollButtons.scrollButtonsLeft.disabled = true;
         }
 
-        const scrollPosEnd = scrollPos + scrollSize;
+        const scrollPosEnd = localeAwarePos + scrollSize;
         if (scrollWidth > 0 && scrollPosEnd >= scrollWidth) {
             scrollButtons.scrollButtonsRight.disabled = true;
         } else {
@@ -138,6 +143,12 @@ const EmbyScrollButtonsPrototype = Object.create(HTMLDivElement.prototype);
             newPos = scrollPos + scrollSize;
         }
 
+        if (globalize.getIsRTL() && direction === 'left') {
+            newPos = scrollPos + scrollSize;
+        } else if (globalize.getIsRTL()) {
+            newPos = Math.min(0, scrollPos - scrollSize);
+        }
+
         scroller.scrollToPosition(newPos, false);
     }
 

src/elements/emby-scrollbuttons/emby-scrollbuttons.scss

@@ -1,7 +1,6 @@
 .emby-scrollbuttons {
     position: absolute;
     top: 0;
-    right: 0;
     align-items: center;
     justify-content: center;
     min-width: 104px;
@@ -10,6 +9,14 @@
     z-index: 1;
     color: #fff;
     display: flex;
+
+    [dir="ltr"] & {
+        right: 0;
+    }
+
+    [dir="rtl"] & {
+        left: 0;
+    }
 }
 
 .emby-scrollbuttons-button > .material-icons {

src/elements/emby-scroller/emby-scroller.scss

@@ -9,15 +9,22 @@
     margin-right: max(env(safe-area-inset-right), 3.3%);
 }
 
+.servers > .card > .cardBox {
+    margin-left: 0.6em;
+    margin-right: 0.6em;
+}
+
 /* align first card in scroller to heading */
 .itemsContainer > .card > .cardBox {
+    [dir="ltr"] & {
         margin-left: 0;
         margin-right: 1.2em;
     }
 
-.servers > .card > .cardBox {
+    [dir="rtl"] & {
-    margin-left: 0.6em;
+        margin-right: 0;
-    margin-right: 0.6em;
+        margin-left: 1.2em;
+    }
 }
 
 .layout-tv .emby-scroller,

src/elements/emby-select/emby-select.scss

@@ -11,13 +11,20 @@
     /* General select styles: change as needed */
     font-family: inherit;
     font-weight: inherit;
-    padding: 0.5em 1.9em 0.5em 0.5em;
 
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
+
+    [dir="ltr"] & {
+        padding: 0.5em 1.9em 0.5em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.5em 0.5em 0.5em 1.9em;
+    }
 }
 
 .emby-select[disabled] {
@@ -34,8 +41,15 @@
 }
 
 .selectContainer-inline > .emby-select {
-    padding: 0.3em 1.9em 0.3em 0.5em;
     font-size: inherit;
+
+    [dir="ltr"] & {
+        padding: 0.3em 1.9em 0.3em 0.5em;
+    }
+
+    [dir="rtl"] & {
+        padding: 0.3em 0.5em 0.3em 1.9em;
+    }
 }
 
 .selectContainer-inline > .emby-select[disabled] {
@@ -92,10 +106,17 @@
 
 .selectArrowContainer {
     position: absolute;
-    right: 0.3em;
     top: 0.2em;
     color: inherit;
     pointer-events: none;
+
+    [dir="ltr"] & {
+        right: 0.3em;
+    }
+
+    [dir="rtl"] & {
+        left: 0.3em;
+    }
 }
 
 .selectContainer-inline > .selectArrowContainer {

src/elements/emby-slider/emby-slider.js

@@ -5,6 +5,7 @@ import keyboardnavigation from '../../scripts/keyboardNavigation';
 import './emby-slider.scss';
 import 'webcomponents.js/webcomponents-lite';
 import '../emby-input/emby-input';
+import globalize from '../../scripts/globalize';
 
 /* eslint-disable indent */
 
@@ -31,6 +32,8 @@ import '../emby-input/emby-input';
         const rect = range.sliderBubbleTrack.getBoundingClientRect();
 
         let fraction = (clientX - rect.left) / rect.width;
+        if (globalize.getIsElementRTL(range))
+            fraction = (rect.right - clientX) / rect.width;
 
         // Snap to step
         const valueRange = range.max - range.min;
@@ -118,6 +121,9 @@ import '../emby-input/emby-input';
             const bubbleRect = bubble.getBoundingClientRect();
 
             let bubblePos = bubbleTrackRect.width * value / 100;
+            if (globalize.getIsElementRTL(range)) {
+                bubblePos = bubbleTrackRect.width - bubblePos;
+            }
             bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
 
             bubble.style.left = bubblePos + 'px';
@@ -484,6 +490,9 @@ import '../emby-input/emby-input';
 
     function setRange(elem, startPercent, endPercent) {
         const style = elem.style;
+        if (globalize.getIsRTL())
+            style.right = Math.max(startPercent, 0) + '%';
+        else
             style.left = Math.max(startPercent, 0) + '%';
 
         const widthPercent = endPercent - startPercent;

src/elements/emby-slider/emby-slider.scss

@@ -151,9 +151,16 @@
     width: 100%;
     box-sizing: border-box;
     top: 50%;
-    left: 0;
     position: absolute;
     padding: 0 0.54em; /* half of slider thumb size */
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-flex {
@@ -162,11 +169,18 @@
     margin-top: -0.1em;
     width: 100%;
     top: 50%;
-    left: 0;
     display: flex;
     overflow: hidden;
     border: 0;
     padding: 0;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-flex-inner {
@@ -177,11 +191,18 @@
 .mdl-slider-background-lower {
     /* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
     position: absolute;
-    left: 0;
     width: 0;
     top: 0;
     bottom: 0;
     background-color: #00a4dc;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-slider-background-lower-clear {

src/elements/emby-toggle/emby-toggle.scss

@@ -59,7 +59,6 @@
 .mdl-switch__thumb {
     background: #999;
     position: absolute;
-    left: 0;
     top: -0.25em;
     height: 1.44em;
     width: 1.44em;
@@ -72,6 +71,14 @@
     display: flex;
     align-items: center;
     justify-content: center;
+
+    [dir="ltr"] & {
+        left: 0;
+    }
+
+    [dir="rtl"] & {
+        right: 0;
+    }
 }
 
 .mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {

src/index.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html class="preload">
+<html class="preload" dir="ltr">
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
@@ -112,13 +112,20 @@
         .mainDrawerHandle {
             position: fixed;
             top: 0;
-            left: 0;
             bottom: 0;
             z-index: 1;
             width: 0.8em;
             padding-left: env(safe-area-inset-left);
         }
 
+        [dir="ltr"] .mainDrawerHandle {
+            left: 0;
+        }
+
+        [dir="rtl"] .mainDrawerHandle {
+            left: 0;
+        }
+
         @-webkit-keyframes fadein {
             from {
                 opacity: 0;
@@ -163,7 +170,7 @@
         }
     </style>
 </head>
-<body>
+<body dir="ltr">
     <div class="backdropContainer"></div>
     <div class="backgroundContainer"></div>
     <div class="mainDrawer hide">

src/libraries/navdrawer/navdrawer.js

@@ -7,6 +7,7 @@ import browser from '../../scripts/browser';
 import dom from '../../scripts/dom';
 import './navdrawer.scss';
 import '../../assets/css/scrollstyles.scss';
+import globalize from '../../scripts/globalize';
 
 function getTouches(e) {
     return e.changedTouches || e.targetTouches || e.touches;
@@ -73,7 +74,10 @@ class NavDrawer {
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
         const endY = touch.clientY || 0;
-        const deltaX = endX - (this.menuTouchStartX || 0);
+        let deltaX = endX - (this.menuTouchStartX || 0);
+        if (globalize.getIsRTL()) {
+            deltaX *= -1;
+        }
         const deltaY = endY - (this.menuTouchStartY || 0);
         this.setVelocity(deltaX);
 
@@ -106,7 +110,10 @@ class NavDrawer {
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
         const endY = touch.clientY || 0;
-        const deltaX = endX - (this.menuTouchStartX || 0);
+        let deltaX = endX - (this.menuTouchStartX || 0);
+        if (globalize.getIsRTL()) {
+            deltaX *= -1;
+        }
         const deltaY = endY - (this.menuTouchStartY || 0);
         this.currentPos = deltaX;
         this.checkMenuState(deltaX, deltaY);
@@ -161,7 +168,10 @@ class NavDrawer {
 
         if (endX <= options.width && this.isVisible) {
             this.countStart++;
-            const deltaX = endX - (this.backgroundTouchStartX || 0);
+            let deltaX = endX - (this.backgroundTouchStartX || 0);
+            if (globalize.getIsRTL()) {
+                deltaX *= -1;
+            }
 
             if (this.countStart == 1) {
                 this.startPoint = deltaX;
@@ -183,7 +193,10 @@ class NavDrawer {
         const touches = getTouches(e);
         const touch = touches[0] || {};
         const endX = touch.clientX || 0;
-        const deltaX = endX - (this.backgroundTouchStartX || 0);
+        let deltaX = endX - (this.backgroundTouchStartX || 0);
+        if (globalize.getIsRTL()) {
+            deltaX *= -1;
+        }
         this.checkMenuState(deltaX);
         this.countStart = 0;
     };
@@ -193,6 +206,9 @@ class NavDrawer {
 
         options.target.classList.add('touch-menu-la');
         options.target.style.width = options.width + 'px';
+        if (globalize.getIsRTL())
+            options.target.style.right = -options.width + 'px';
+        else
             options.target.style.left = -options.width + 'px';
 
         if (!options.disableMask) {
@@ -204,8 +220,9 @@ class NavDrawer {
 
     animateToPosition(pos) {
         const options = this.options;
+        const languageAwarePos = globalize.getIsRTL() ? -pos : pos;
         requestAnimationFrame(function () {
-            options.target.style.transform = pos ? 'translateX(' + pos + 'px)' : 'none';
+            options.target.style.transform = pos ? 'translateX(' + languageAwarePos + 'px)' : 'none';
         });
     }
 

src/libraries/navdrawer/navdrawer.scss

@@ -17,6 +17,13 @@
     -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
     -o-transition: transform ease-out 40ms, left ease-out 260ms;
     transition: transform ease-out 40ms, left ease-out 260ms;
+
+    [div="rtl"] & {
+        -webkit-transition: -webkit-transform ease-out 40ms, right ease-out 260ms;
+        -o-transition: transform ease-out 40ms, right ease-out 260ms;
+        transition: transform ease-out 40ms, right ease-out 260ms;
+    }
+
     z-index: 1099;
 }
 
@@ -24,6 +31,12 @@
     -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
     -o-transition: transform ease-out 240ms, left ease-out 260ms;
     transition: transform ease-out 240ms, left ease-out 260ms;
+
+    [div="rtl"] & {
+        -webkit-transition: -webkit-transform ease-out 240ms, right ease-out 260ms;
+        -o-transition: transform ease-out 240ms, right ease-out 260ms;
+        transition: transform ease-out 240ms, right ease-out 260ms;
+    }
 }
 
 .drawer-open {

src/libraries/scroller.js

@@ -9,6 +9,7 @@ import dom from '../scripts/dom';
 import focusManager from '../components/focusManager';
 import ResizeObserver from 'resize-observer-polyfill';
 import '../assets/css/scrollstyles.scss';
+import globalize from '../scripts/globalize';
 
 /**
 * Return type of the value.
@@ -52,7 +53,14 @@ function disableOneEvent(event) {
  *
  * @return {Number}
  */
-function within(number, min, max) {
+function within(number, num1, num2) {
+    if (num2 === undefined && globalize.getIsRTL()) {
+        return number > num1 ? num1 : number;
+    } else if (num2 === undefined) {
+        return number < num1 ? num1 : number;
+    }
+    const min = Math.min(num1, num2);
+    const max = Math.max(num1, num2);
     if (number < min) {
         return min;
     } else if (number > max) {
@@ -173,6 +181,8 @@ const scrollerFactory = function (frame, options) {
 
             // Set position limits & relativess
             self._pos.end = Math.max(slideeSize - frameSize, 0);
+            if (globalize.getIsRTL())
+                self._pos.end *= -1;
         }
     }
 
@@ -262,7 +272,9 @@ const scrollerFactory = function (frame, options) {
         ensureSizeInfo();
         const pos = self._pos;
 
-        if (layoutManager.tv) {
+        if (layoutManager.tv && globalize.getIsRTL()) {
+            newPos = within(-newPos, pos.start);
+        } else if (layoutManager.tv) {
             newPos = within(newPos, pos.start);
         } else {
             newPos = within(newPos, pos.start, pos.end);
@@ -354,7 +366,12 @@ const scrollerFactory = function (frame, options) {
         const slideeOffset = getBoundingClientRect(scrollElement);
         const itemOffset = getBoundingClientRect(item);
 
-        let offset = o.horizontal ? itemOffset.left - slideeOffset.left : itemOffset.top - slideeOffset.top;
+        let horizontalOffset = itemOffset.left - slideeOffset.left;
+        if (globalize.getIsRTL()) {
+            horizontalOffset = slideeOffset.right - itemOffset.right;
+        }
+
+        let offset = o.horizontal ? horizontalOffset : itemOffset.top - slideeOffset.top;
 
         let size = o.horizontal ? itemOffset.width : itemOffset.height;
         if (!size && size !== 0) {
@@ -375,17 +392,21 @@ const scrollerFactory = function (frame, options) {
         ensureSizeInfo();
 
         const currentStart = self._pos.cur;
-        const currentEnd = currentStart + frameSize;
+        let currentEnd = currentStart + frameSize;
+        if (globalize.getIsRTL()) {
+            currentEnd = currentStart - frameSize;
+        }
 
         console.debug('offset:' + offset + ' currentStart:' + currentStart + ' currentEnd:' + currentEnd);
-        const isVisible = offset >= currentStart && (offset + size) <= currentEnd;
+        const isVisible = offset >= Math.min(currentStart, currentEnd)
+            && (globalize.getIsRTL() ? (offset - size) : (offset + size)) <= Math.max(currentStart, currentEnd);
 
         return {
             start: offset,
             center: offset + centerOffset - (frameSize / 2) + (size / 2),
             end: offset - frameSize + size,
-            size: size,
+            size,
-            isVisible: isVisible
+            isVisible
         };
     };
 

src/plugins/htmlVideoPlayer/plugin.js

@@ -1347,6 +1347,7 @@ function tryRemoveElement(elem) {
                         loading.show();
 
                         const dlg = document.createElement('div');
+                        dlg.setAttribute('dir', 'ltr');
 
                         dlg.classList.add('videoPlayerContainer');
 

src/scripts/datetime.js

@@ -84,7 +84,7 @@ import globalize from './globalize';
         hours = Math.floor(hours);
 
         if (hours) {
-            parts.push(hours);
+            parts.push(hours.toLocaleString(globalize.getCurrentDateTimeLocale()));
         }
 
         ticks -= (hours * ticksPerHour);
@@ -95,7 +95,9 @@ import globalize from './globalize';
         ticks -= (minutes * ticksPerMinute);
 
         if (minutes < 10 && hours) {
-            minutes = '0' + minutes;
+            minutes = (0).toLocaleString(globalize.getCurrentDateTimeLocale()) + minutes.toLocaleString(globalize.getCurrentDateTimeLocale());
+        } else {
+            minutes = minutes.toLocaleString(globalize.getCurrentDateTimeLocale());
         }
         parts.push(minutes);
 
@@ -103,7 +105,9 @@ import globalize from './globalize';
         seconds = Math.floor(seconds);
 
         if (seconds < 10) {
-            seconds = '0' + seconds;
+            seconds = (0).toLocaleString(globalize.getCurrentDateTimeLocale()) + seconds.toLocaleString(globalize.getCurrentDateTimeLocale());
+        } else {
+            seconds = seconds.toLocaleString(globalize.getCurrentDateTimeLocale());
         }
         parts.push(seconds);
 

src/scripts/globalize.js

@@ -3,13 +3,20 @@ import isEmpty from 'lodash-es/isEmpty';
 import { currentSettings as userSettings } from './settings/userSettings';
 import Events from '../utils/events.ts';
 
+const Direction = {
+    rtl: 'rtl',
+    ltr: 'ltr'
+};
+
 /* eslint-disable indent */
 
     const fallbackCulture = 'en-us';
+    const RTL_LANGS = ['ar', 'fa', 'ur', 'he'];
 
     const allTranslations = {};
     let currentCulture;
     let currentDateTimeCulture;
+    let isRTL = false;
 
     export function getCurrentLocale() {
         return currentCulture;
@@ -38,6 +45,37 @@ import Events from '../utils/events.ts';
         return fallbackCulture;
     }
 
+    export function getIsRTL() {
+        return isRTL;
+    }
+
+    function checkAndProcessDir(culture) {
+        isRTL = false;
+        console.log(culture);
+        for (const lang of RTL_LANGS) {
+            if (culture.includes(lang)) {
+                isRTL = true;
+                break;
+            }
+        }
+
+        setDocumentDirection(isRTL ? Direction.rtl : Direction.ltr);
+    }
+
+    function setDocumentDirection(direction) {
+        document.getElementsByTagName('body')[0].setAttribute('dir', direction);
+        document.getElementsByTagName('html')[0].setAttribute('dir', direction);
+        if (direction === Direction.rtl)
+            import('../styles/rtl.scss');
+    }
+
+    export function getIsElementRTL(element) {
+        if (window.getComputedStyle) { // all browsers
+            return window.getComputedStyle(element, null).getPropertyValue('direction') == 'rtl';
+        }
+        return element.currentStyle.direction == 'rtl';
+    }
+
     export function updateCurrentCulture() {
         let culture;
         try {
@@ -46,6 +84,7 @@ import Events from '../utils/events.ts';
             console.error('no language set in user settings');
         }
         culture = culture || getDefaultLanguage();
+        checkAndProcessDir(culture);
 
         currentCulture = normalizeLocaleName(culture);
 
@@ -200,7 +239,7 @@ import Events from '../utils/events.ts';
     export function translate(key) {
         let val = translateKey(key);
         for (let i = 1; i < arguments.length; i++) {
-            val = replaceAll(val, '{' + (i - 1) + '}', arguments[i]);
+            val = replaceAll(val, '{' + (i - 1) + '}', arguments[i].toLocaleString(currentCulture));
         }
         return val;
     }
@@ -257,7 +296,9 @@ export default {
     getCurrentLocale,
     getCurrentDateTimeLocale,
     register,
-    updateCurrentCulture
+    updateCurrentCulture,
+    getIsRTL,
+    getIsElementRTL
 };
 
 /* eslint-enable indent */

src/scripts/libraryBrowser.js

@@ -88,7 +88,7 @@ export function getQueryPagingHtml (options) {
 
     if (showControls) {
         html += '<span style="vertical-align:middle;">';
-        html += globalize.translate('ListPaging', (totalRecordCount ? startIndex + 1 : 0), recordsEnd, totalRecordCount);
+        html += globalize.translate('ListPaging', totalRecordCount ? startIndex + 1 : 0, recordsEnd, totalRecordCount);
         html += '</span>';
     }
 

src/styles/rtl.scss

@@ -0,0 +1,18 @@
+.chevron_right,
+.chevron_left,
+.arrow_back,
+.arrow_forward,
+.playlist_add,
+.shuffle,
+.input,
+.dvr,
+.shopping_cart,
+.vpn_key,
+.volume_up,
+.volume_off,
+.message,
+.clear_all {
+    [dir='rtl'] & {
+        transform: scale(-1, 1);
+    }
+}