Bidi support

.github/CONTRIBUTING.md

@@ -163,6 +163,14 @@ and the web server is automatically restarted.
 $ npm run dev
 ```
 
+### RTL layout
+
+To test RTL layout using `ar` locale:
+
+```
+$ npm run dev -- --ar-locale
+```
+
 ### Testing
 
 Your code contributions must pass the tests before they can be merged. Tests ensure most of the application behaves

client/angular.json

@@ -202,6 +202,21 @@
                 }
               ]
             },
+            "ar-locale": {
+              "localize": ["ar"],
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.hmr.ts"
+                }
+              ]
+            },
             "hmr": {
               "localize": false,
               "budgets": [
@@ -247,6 +262,9 @@
             "hmr": {
               "browserTarget": "PeerTube:build:hmr"
             },
+            "ar-locale": {
+              "browserTarget": "PeerTube:build:ar-locale"
+            },
             "e2e": {
               "browserTarget": "PeerTube:build:e2e",
               "proxyConfig": "e2e/proxy.config.json"

client/proxy.config.json

@@ -28,6 +28,10 @@
     "target": "http://localhost:9000",
     "secure": false
   },
+  "/client/locales": {
+    "target": "http://localhost:9000",
+    "secure": false
+  },
   "/!(client)**": {
     "target": "http://localhost:3000/client/index.html",
     "secure": false,

client/src/app/+about/about-instance/about-instance.component.scss

@@ -23,9 +23,10 @@
   margin-bottom: 20px;
 
   .badge {
+    @include margin-right(5px);
+
     font-size: 12px;
     font-weight: $font-semibold;
-    margin-right: 5px;
 
     &.category {
       background-color: pvar(--mainColor);
@@ -66,9 +67,10 @@
   &:hover,
   &:active {
     &::after {
+      @include margin-left(0.2em);
+
       content: '#';
       display: inline-block;
-      margin-left: 0.2em;
     }
   }
 

client/src/app/+about/about-peertube/about-peertube-contributors.component.scss

@@ -22,8 +22,9 @@
     text-align: center;
 
     li {
+      @include margin-right(10px);
+
       display: inline-block;
-      margin-right: 10px;
     }
   }
 }

client/src/app/+accounts/account-video-channels/account-video-channels.component.scss

@@ -29,10 +29,10 @@
 
   my-actor-avatar {
     @include actor-avatar-size(75px);
+    @include margin-right(15px);
 
     grid-column: 1;
     grid-row: 1 / 3;
-    margin-right: 15px;
   }
 
   a {
@@ -51,13 +51,14 @@
   }
 
   .actor-counters {
+    @include margin-left(15px);
+
     grid-row: 1;
     grid-column: 3;
     color: pvar(--greyForegroundColor);
     font-size: 16px;
     display: flex;
     align-items: center;
-    margin-left: 15px;
   }
 
   .actor-counters > *:not(:last-child)::after {
@@ -92,7 +93,7 @@ my-subscribe-button {
   overflow: hidden;
 
   my-video-miniature {
-    margin-right: 15px;
+    @include margin-right(15px);
     min-width: $video-thumbnail-medium-width;
     max-width: $video-thumbnail-medium-width;
   }

client/src/app/+accounts/accounts.component.scss

@@ -23,13 +23,13 @@
   max-width: $max-channels-width;
 
   simple-search-input {
-    margin-left: auto;
+    @include margin-left(auto);
   }
 }
 
 my-user-moderation-dropdown,
 .badge {
-  margin-left: 10px;
+  @include margin-left(10px);
 
   position: relative;
   top: 3px;

client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.scss

@@ -14,6 +14,7 @@ form {
 
 input[type=text] {
   @include peertube-input-text($form-base-input-width);
+
   display: block;
 }
 
@@ -53,13 +54,14 @@ my-select-checkbox {
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
+  @include margin-left(auto);
 
   display: flex;
-  margin-left: auto;
 
   + .form-error {
+    @include margin-left(5px);
+
     display: inline;
-    margin-left: 5px;
   }
 }
 

client/src/app/+admin/follows/followers-list/followers-list.component.scss

@@ -18,6 +18,6 @@ a {
 
 .action-cell {
   my-button:first-child {
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 }

client/src/app/+admin/follows/follows.component.scss

@@ -1,8 +1,9 @@
 @import 'mixins';
 
 .form-sub-title {
+  @include margin-right(30px);
+
   flex-grow: 0;
-  margin-right: 30px;
 }
 
 .badge {

client/src/app/+admin/follows/video-redundancies-list/video-redundancies-list.component.scss

@@ -25,7 +25,7 @@ a {
 
   .select-filter-block {
     &:not(:last-child) {
-      margin-right: 10px;
+      @include margin-right(10px);
     }
 
     label {

client/src/app/+admin/moderation/video-comment-list/video-comment-list.component.scss

@@ -1,7 +1,7 @@
 @import 'mixins';
 
 my-feed {
-  margin-left: 5px;
+  @include margin-left(5px);
   display: inline-block;
   width: 15px;
 }

client/src/app/+admin/plugins/plugin-search/plugin-search.component.scss

@@ -18,12 +18,13 @@
   margin-bottom: 15px;
 
   my-global-icon {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 }
 
 .badge {
+  @include margin-left(15px);
+
   font-size: 13px;
   font-weight: $font-semibold;
-  margin-left: 15px;
 }

client/src/app/+admin/plugins/shared/plugin-list.component.scss

@@ -12,8 +12,9 @@
   margin-bottom: 10px;
 
   .plugin-name {
+    @include margin-right(10px);
+
     font-size: 16px;
-    margin-right: 10px;
     font-weight: $font-semibold;
   }
 
@@ -22,7 +23,7 @@
   }
 
   .plugin-icon {
-    margin-left: 10px;
+    @include margin-left(10px);
 
     my-global-icon {
       @include apply-svg-color(pvar(--greyForegroundColor));
@@ -34,11 +35,11 @@
   }
 
   .buttons {
-    margin-left: auto;
+    @include margin-left(auto);
     width: max-content;
 
     > *:not(:last-child) {
-      margin-right: 10px;
+      @include margin-right(10px);
     }
   }
 }

client/src/app/+admin/system/jobs/jobs.component.scss

@@ -25,7 +25,7 @@
 
   .select-filter-block {
     &:not(:last-child) {
-      margin-right: 10px;
+      @include margin-right(10px);
     }
 
     label {
@@ -43,7 +43,7 @@
 }
 
 td .glyphicon {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 pre {

client/src/app/+admin/system/logs/logs.component.scss

@@ -19,8 +19,9 @@
   }
 
   .log-level {
+    @include margin-right(5px);
+
     font-weight: $font-semibold;
-    margin-right: 5px;
   }
 
   .log-by {
@@ -54,7 +55,7 @@
   my-button,
   .peertube-select-container,
   ng-select {
-    margin-left: 10px;
+    @include margin-left(10px);
   }
 }
 
@@ -65,8 +66,9 @@
     .peertube-select-container,
     ng-select,
     my-button {
+      @include margin-left(0 !important);
+
       width: 100% !important;
-      margin-left: 0 !important;
       margin-bottom: 10px !important;
     }
 
@@ -84,8 +86,9 @@
       .peertube-select-container,
       ng-select,
       my-button {
+        @include margin-left(0 !important);
+
         width: 100% !important;
-        margin-left: 0 !important;
         margin-bottom: 10px !important;
       }
 

client/src/app/+admin/system/system.component.scss

@@ -1,4 +1,8 @@
+@import '_variables';
+@import '_mixins';
+
 .form-sub-title {
+  @include margin-right(30px);
+
   flex-grow: 0;
-  margin-right: 30px;
 }

client/src/app/+admin/users/user-list/user-list.component.scss

@@ -24,9 +24,10 @@ tr.banned > td {
 }
 
 .user-table-primary-text .glyphicon {
+  @include margin-left(0.1rem);
+
   font-size: 80%;
   color: #808080;
-  margin-left: 0.1rem;
 }
 
 p-tableCheckbox {

client/src/app/+login/login.component.scss

@@ -14,7 +14,7 @@ input[type=email] {
 }
 
 .modal-body {
-  text-align: left;
+  text-align: start;
 
   .forgot-password-instructions {
     margin-bottom: 20px;
@@ -55,13 +55,14 @@ input[type=email] {
   }
 
   .login-form-and-externals {
+    @include margin-left(10px);
+    @include margin-right(10px);
+
     display: flex;
     flex-wrap: wrap;
     font-size: 15px;
     max-width: 450px;
     margin-bottom: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
 
     form {
       margin: 0;
@@ -125,11 +126,12 @@ input[type=email] {
   }
 
   .instance-information {
+    @include margin-left(10px);
+    @include margin-right(10px);
+
     max-width: 600px;
     min-width: 350px;
     margin-bottom: 40px;
-    margin-left: 10px;
-    margin-right: 10px;
   }
 
   .terms-anchor {
@@ -146,9 +148,10 @@ input[type=email] {
 
   .login-form-and-externals,
   .instance-information {
+    @include margin-left(0);
+    @include margin-right(0);
+
     width: 100%;
-    margin-left: 0;
-    margin-right: 0;
     max-width: 450px;
     min-width: unset;
     align-self: center;

client/src/app/+my-account/my-account-applications/my-account-applications.component.scss

@@ -17,12 +17,13 @@ label {
 input[type=submit] {
   @include peertube-button;
   @include orange-button;
+  @include margin-left(auto);
 
   display: flex;
-  margin-left: auto;
 
   + .form-error {
+    @include margin-left(5px);
+
     display: inline;
-    margin-left: 5px;
   }
 }

client/src/app/+my-account/my-account-notifications/my-account-notifications.component.scss

@@ -38,7 +38,7 @@ my-user-notifications {
     }
 
     .peertube-select-container {
-      margin-left: 0 !important;
+      @include margin-left(0 !important);
     }
   }
 }

client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.scss

@@ -43,7 +43,7 @@ input {
   &[type=submit] {
     @include peertube-button;
     @include orange-button;
-    margin-left: auto;
+    @include margin-left(auto);
   }
 }
 

client/src/app/+my-library/+my-video-channels/my-video-channels.component.scss

@@ -15,7 +15,7 @@ input[type=text] {
 }
 
 my-edit-button {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 .video-channel {
@@ -25,8 +25,7 @@ my-edit-button {
 
   my-actor-avatar {
     @include actor-avatar-size(80px);
-
+    @include margin-right(10px);
-    margin-right: 10px;
   }
 }
 
@@ -49,9 +48,10 @@ my-edit-button {
 }
 
 .video-channel-name {
+  @include margin-left(5px);
+
   font-size: 14px;
   color: $grey-actor-name;
-  margin-left: 5px;
 }
 
 .video-channel-buttons {
@@ -77,7 +77,7 @@ my-edit-button {
     padding-bottom: 10px;
 
     img {
-      margin-right: 0;
+      @include margin-right(0);
     }
 
     .video-channel-buttons {
@@ -97,7 +97,7 @@ my-edit-button {
   }
 
   .video-channel-name {
-    margin-left: 0 !important;
+    @include margin-left(0 !important);
   }
 }
 

client/src/app/+my-library/my-history/my-history.component.scss

@@ -24,11 +24,11 @@
   }
 
   .history-switch {
-    grid-column: 3;
+    @include margin-left(auto);
+    @include margin-right(15px);
 
+    grid-column: 3;
     display: flex;
-    margin-left: auto;
-    margin-right: 15px;
 
     label {
       margin: 0 0 0 5px;

client/src/app/+my-library/my-ownership/my-ownership.component.scss

@@ -16,10 +16,10 @@
     $image-height: 45px;
 
     @include miniature-thumbnail;
+    @include margin-right(0.5rem);
 
     height: $image-height;
     width: #{(16/9) * $image-height};
-    margin-right: 0.5rem;
     border-radius: 2px;
     border: 0;
     background: transparent;
@@ -59,9 +59,10 @@
     line-height: 1rem;
 
     div .glyphicon {
+      @include margin-left(0.1rem);
+
       font-size: 80%;
       color: #808080;
-      margin-left: 0.1rem;
     }
 
     div + div {

client/src/app/+my-library/my-subscriptions/my-subscriptions.component.scss

@@ -11,7 +11,7 @@ input[type=text] {
   > my-actor-avatar {
     @include actor-avatar-size(80px);
 
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 }
 
@@ -32,9 +32,10 @@ input[type=text] {
     }
 
     .video-channel-name {
+      @include margin-left(5px);
+
       font-size: 14px;
       color: $grey-actor-name;
-      margin-left: 5px;
     }
   }
 }
@@ -50,7 +51,7 @@ input[type=text] {
   }
 
   my-actor-avatar {
-    margin-left: 7px;
+    @include margin-left(7px);
     display: inline-block;
     vertical-align: top;
   }
@@ -78,6 +79,6 @@ input[type=text] {
   }
 
   img {
-    margin-right: 0;
+    @include margin-right(0);
   }
 }

client/src/app/+my-library/my-video-playlists/my-video-playlist-elements.component.scss

@@ -8,9 +8,10 @@
 }
 
 .playlist-info {
+  @include margin-left(calc(#{pvar(--horizontalMarginContent)} * -1));
+
   grid-column: 1;
   background-color: pvar(--submenuBackgroundColor);
-  margin-left: calc(#{pvar(--horizontalMarginContent)} * -1);
   margin-top: -$sub-menu-margin-bottom;
 
   padding: 15px;
@@ -34,7 +35,7 @@
     @include grey-button;
     @include apply-svg-color(pvar(--actionButtonColor));
 
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 }
 
@@ -91,8 +92,8 @@ my-video-playlist-miniature {
 
   my-video-playlist-miniature,
   .playlist-buttons {
-    margin-left: auto;
+    @include margin-left(auto);
-    margin-right: auto;
+    @include margin-right(auto);
   }
 
   ::ng-deep my-video-playlist-element-miniature {
@@ -102,7 +103,7 @@ my-video-playlist-miniature {
     }
 
     .position {
-      margin-right: 5px !important;
+      @include margin-right(5px !important);
     }
   }
 }

client/src/app/+my-library/my-video-playlists/my-video-playlists.component.scss

@@ -18,8 +18,9 @@ input[type=text] {
 }
 
 .video-playlist-buttons {
+  @include margin-left(10px);
+
   display: flex;
-  margin-left: 10px;
   align-self: flex-end;
 }
 
@@ -33,7 +34,7 @@ my-video-playlist-miniature {
 }
 
 my-delete-button {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 @include on-small-main-col {
@@ -46,8 +47,9 @@ my-delete-button {
   }
 
   .video-playlist-buttons {
+    @include margin-left(auto);
+
     margin-top: 10px;
-    margin-left: auto;
   }
 }
 
@@ -62,6 +64,6 @@ my-delete-button {
   }
 
   .action-button {
-    margin-left: 0;
+    @include margin-left(0);
   }
 }

client/src/app/+my-library/my-videos/my-videos.component.scss

@@ -7,7 +7,7 @@ input[type=text] {
 
 .peertube-select-container {
   @include peertube-select-container(auto);
-  margin-left: 0.5rem;
+  @include margin-left(0.5rem);
 }
 
 h1 {
@@ -20,7 +20,7 @@ h1 {
     @include button-with-icon(18px, 3px, -1px);
 
     &:not(:last-child) {
-      margin-right: 10px;
+      @include margin-right(10px);
     }
   }
 }
@@ -38,13 +38,14 @@ h1 {
 }
 
 .action-button {
+  @include margin-left(10px);
+
   display: flex;
-  margin-left: 10px;
   align-self: flex-end;
 }
 
 my-edit-button {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 @include on-small-main-col {
@@ -58,8 +59,9 @@ my-edit-button {
   }
 
   .action-button {
+    @include margin-left(auto);
+
     margin-top: 10px;
-    margin-left: auto;
   }
 }
 
@@ -72,11 +74,11 @@ my-edit-button {
       margin-bottom: 12px;
     }
     .peertube-select-container {
-      margin-left: 0;
+      @include margin-left(0);
     }
   }
 
   .action-button {
-    margin-left: 0;
+    @include margin-left(0);
   }
 }

client/src/app/+page-not-found/page-not-found.component.scss

@@ -2,9 +2,10 @@
 @import '_mixins';
 
 .root {
+  @include margin-left(auto);
+  @include margin-right(auto);
+
   height: 100%;
-  margin-left: auto;
-  margin-right: auto;
   text-align: center;
   padding-top: 150px;
   display: flex;
@@ -12,20 +13,21 @@
   flex-direction: column-reverse;
 
   .box {
-    text-align: left;
+    text-align: start;
     font-size: 120%;
     padding: 0 15px;
   }
 
   img {
-    margin-left: auto;
+    @include margin-left(auto);
+
     width: 220px;
     height: auto;
   }
 
   @media screen and (max-width: $mobile-view) {
     img {
-      margin-right: auto;
+      @include margin-right(auto);
     }
   }
 

client/src/app/+search/search-filters.component.scss

@@ -12,9 +12,9 @@ form {
 
 .peertube-radio-container {
   @include peertube-radio-container;
+  @include margin-right(30px);
 
   display: inline-block;
-  margin-right: 30px;
 }
 
 .peertube-select-container {
@@ -38,19 +38,18 @@ input[type=submit] {
 }
 
 .submit-button {
-  text-align: right;
+  text-align: end;
 }
 
 .reset-button {
   @include peertube-button;
+  @include margin-right(1rem);
 
   font-weight: $font-semibold;
   display: inline-block;
   padding: 0 10px;
   white-space: nowrap;
   background: transparent;
-
-  margin-right: 1rem;
 }
 
 .reset-button-small {

client/src/app/+search/search.component.scss

@@ -37,10 +37,10 @@
 
       .icon.icon-filter {
         @include icon(20px);
+        @include margin-right(5px);
 
         position: relative;
         top: -1px;
-        margin-right: 5px;
         background-image: url('../../assets/images/feather/filter.svg');
       }
     }
@@ -78,9 +78,10 @@
 }
 
 .video-channel-name {
+  @include margin-left(5px);
+
   font-size: $video-miniature-row-info-font-size;
   color: pvar(--greyForegroundColor);
-  margin-left: 5px;
 }
 
 // Use the same breakpoints than in video-miniature

client/src/app/+signup/+register/custom-stepper.component.scss

@@ -5,8 +5,8 @@ $grey-color: #9CA3AB;
 $index-block-height: 32px;
 
 .container {
-  padding-left: 0;
+  @include padding-left(0);
-  padding-right: 0;
+  @include padding-right(0);
   max-width: unset !important;
 }
 

client/src/app/+video-channels/video-channel-playlists/video-channel-playlists.component.scss

@@ -8,7 +8,7 @@
   justify-content: center;
 
   .playlist-wrapper {
-    margin-right: 15px;
+    @include margin-right(15px);
     padding-bottom: 15px;
   }
 }
@@ -24,9 +24,9 @@
   }
 
   .playlists {
-    justify-content: left;
+    @include margin-left(pvar(--horizontalMarginContent) !important);
+    @include margin-right(pvar(--horizontalMarginContent) !important);
 
-    margin-left: pvar(--horizontalMarginContent) !important;
+    justify-content: left;
-    margin-right: pvar(--horizontalMarginContent) !important;
   }
 }

client/src/app/+video-channels/video-channels.component.scss

@@ -71,12 +71,12 @@
   flex-wrap: wrap;
 
   > *:not(:last-child) {
-    margin-right: 15px;
+    @include margin-right(15px);
   }
 }
 
 .channel-buttons.right {
-  margin-left: 45px;
+  @include margin-left(45px);
 }
 
 // Only used by mobile
@@ -85,7 +85,7 @@
 }
 
 .owner-card {
-  margin-left: 105px;
+  @include margin-left(105px);
   grid-column: 2;
   // Takes all the column
   grid-row: 1 / 3;
@@ -112,7 +112,7 @@
     }
 
     .actor-info {
-      margin-left: 15px;
+      @include margin-left(15px);
     }
 
     h4 {
@@ -160,8 +160,9 @@
   }
 
   .owner-card {
+    @include margin-left(60px);
+
     grid-row: 2;
-    margin-left: 60px;
   }
 }
 
@@ -215,8 +216,9 @@
     padding: 0;
 
     .avatar-row {
+      @include margin-right(30px);
+
       grid-column: 1;
-      margin-right: 30px;
     }
 
     .owner-description {
@@ -233,7 +235,7 @@
 
   .view-account.complete {
     display: block;
-    text-align: right;
+    text-align: end;
     margin-top: 10px;
     color: pvar(--mainColor);
   }

client/src/app/+videos/+video-edit/shared/video-edit.component.scss

@@ -52,7 +52,7 @@ my-peertube-checkbox {
 }
 
 .captions-header {
-  text-align: right;
+  text-align: end;
   margin-bottom: 1rem;
 }
 
@@ -77,10 +77,10 @@ my-peertube-checkbox {
   }
 
   .caption-entry-label {
+    @include margin-right(20px);
+
     font-size: 15px;
     font-weight: bold;
-
-    margin-right: 20px;
     width: 150px;
   }
 
@@ -108,12 +108,12 @@ my-peertube-checkbox {
 }
 
 .submit-container {
-  text-align: right;
+  text-align: end;
 
   .message-submit {
-    display: inline-block;
+    @include margin-right(25px);
-    margin-right: 25px;
 
+    display: inline-block;
     color: pvar(--greyForegroundColor);
     font-size: 15px;
   }

client/src/app/+videos/+video-edit/video-add-components/video-upload.component.scss

@@ -23,6 +23,7 @@
 
   .progress {
     @include progressbar;
+
     flex-grow: 1;
     height: 30px;
     font-size: 14px;
@@ -31,12 +32,13 @@
     .progress-bar {
       background-color: $green;
       line-height: 30px;
-      text-align: left;
+      text-align: start;
       font-weight: $font-semibold;
 
       span {
+        @include margin-left(13px);
+
         color: pvar(--mainBackgroundColor);
-        margin-left: 13px;
       }
     }
   }
@@ -44,7 +46,6 @@
   input {
     @include peertube-button;
     @include grey-button;
-
+    @include margin-left(10px);
-    margin-left: 10px;
   }
 }

client/src/app/+videos/+video-watch/comment/video-comment-add.component.html

@@ -10,7 +10,10 @@
                 (keyup.control.enter)="onValidKey()" (keyup.meta.enter)="onValidKey()" #textarea>
       </textarea>
 
-      <my-help class="markdown-guide" helpType="custom" iconName="markdown" tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible">
+      <my-help
+        [ngClass]="{ 'is-rtl': isRTL() }" class="markdown-guide" helpType="custom" iconName="markdown"
+        tooltipPlacement="left auto" autoClose="true" i18n-title title="Markdown compatible"
+      >
         <ng-template ptTemplate="customHtml">
           <span i18n>Markdown compatible that supports:</span>
 

client/src/app/+videos/+video-watch/comment/video-comment-add.component.scss

@@ -14,7 +14,7 @@ form {
   margin-bottom: 10px;
 
   my-actor-avatar {
-    margin-right: 10px;
+    @include margin-right(10px);
   }
 
   .form-group {
@@ -26,12 +26,12 @@ form {
   textarea {
     @include peertube-textarea(100%, $peertube-textarea-height);
     @include button-focus(pvar(--mainColorLightest));
+    @include padding-right($markdown-icon-width + 15px !important);
 
     min-height: calc(#{$peertube-textarea-height} - 15px * 2);
-    padding-right: $markdown-icon-width + 15px !important;
 
     @media screen and (max-width: 600px) {
-      padding-right: $markdown-icon-width + 19px !important;
+      @include padding-right($markdown-icon-width + 19px !important);
     }
 
     &:focus::placeholder {
@@ -45,6 +45,12 @@ form {
   top: 5px;
   right: 9px;
 
+  // inset-inline is not well supported by web browsers
+  &.is-rtl {
+    right: unset;
+    left: 9px;
+  }
+
   ::ng-deep .help-tooltip-button {
     my-global-icon {
       height: $markdown-icon-height;
@@ -86,9 +92,10 @@ form {
     flex: 1;
 
     code {
+      @include margin-left(5px);
+
       display: inline-block;
       vertical-align: middle;
-      margin-left: 5px;
     }
   }
 }

client/src/app/+videos/+video-watch/comment/video-comment-add.component.ts

@@ -1,5 +1,18 @@
 import { Observable } from 'rxjs'
-import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { getLocaleDirection } from '@angular/common'
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  Input,
+  LOCALE_ID,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
+  ViewChild
+} from '@angular/core'
 import { Router } from '@angular/router'
 import { Notifier, User } from '@app/core'
 import { VIDEO_COMMENT_TEXT_VALIDATOR } from '@app/shared/form-validators/video-comment-validators'
@@ -37,7 +50,8 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     private notifier: Notifier,
     private videoCommentService: VideoCommentService,
     private modalService: NgbModal,
-    private router: Router
+    private router: Router,
+    @Inject(LOCALE_ID) private localeId: string
   ) {
     super()
   }
@@ -153,6 +167,10 @@ export class VideoCommentAddComponent extends FormReactive implements OnChanges,
     this.form.value['text'] = this.textareaElement.nativeElement.value = ''
   }
 
+  isRTL () {
+    return getLocaleDirection(this.localeId) === 'rtl'
+  }
+
   private addCommentReply (commentCreate: VideoCommentCreate) {
     return this.videoCommentService
       .addCommentReply(this.video.id, this.parentComment.id, commentCreate)

client/src/app/+videos/+video-watch/comment/video-comment.component.scss

@@ -6,10 +6,11 @@
   display: flex;
 
   .left {
+    @include margin-right(10px);
+
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin-right: 10px;
 
     .vertical-border {
       width: 2px;
@@ -51,6 +52,9 @@ my-actor-avatar {
 }
 
 .video-author {
+  @include padding-right(6px);
+  @include padding-left(6px);
+
   height: 20px;
   background-color: #888888;
   border-radius: 12px;
@@ -60,8 +64,6 @@ my-actor-avatar {
   flex-direction: row;
   align-items: center;
   display: inline-flex;
-  padding-right: 6px;
-  padding-left: 6px;
   color: #fff !important;
 }
 
@@ -86,9 +88,10 @@ my-actor-avatar {
 }
 
 .comment-date {
+  @include margin-left(5px);
+
   font-size: 90%;
   color: pvar(--greyForegroundColor);
-  margin-left: 5px;
   text-decoration: none;
 
   &:hover {
@@ -129,9 +132,10 @@ my-actor-avatar {
 
   ::ng-deep .dropdown-toggle,
   .comment-action-reply {
+    @include margin-right(10px);
+
     color: pvar(--greyForegroundColor);
     cursor: pointer;
-    margin-right: 10px;
 
     &:hover,
     &:active,
@@ -162,25 +166,25 @@ my-video-comment-add {
   }
 
   .left {
-    margin-right: 6px;
+    @include margin-right(6px);
   }
 }
 
 @media screen and (max-width: 1200px) {
   .children {
-    margin-left: -10px;
+    @include margin-left(-10px);
   }
 }
 
 @media screen and (max-width: 600px) {
   .children {
-    margin-left: -20px;
+    @include margin-left(-20px);
 
     .left {
       align-items: flex-start;
 
       .vertical-border {
-        margin-left: 2px;
+        @include margin-left(2px);
       }
     }
   }
@@ -189,7 +193,7 @@ my-video-comment-add {
     flex-direction: column;
 
     .comment-date {
-      margin-left: 0;
+      @include margin-left(0);
     }
   }
 }

client/src/app/+videos/+video-watch/comment/video-comments.component.scss

@@ -13,19 +13,21 @@
 
 .glyphicon,
 .comment-thread-loading {
-  margin-right: 5px;
+  @include margin-right(5px);
+
   display: inline-block;
   font-size: 13px;
 }
 
 .title-block {
   .title-page {
-    margin-right: 0;
+    @include margin-right(0);
   }
 
   my-feed {
+    @include margin-left(5px);
+
     display: inline-block;
-    margin-left: 5px;
     opacity: 0;
     transition: ease-in .2s opacity;
     width: 12px;
@@ -47,7 +49,7 @@
 
 @media screen and (max-width: 600px) {
   .view-replies {
-    margin-left: 46px;
+    @include margin-left(46px);
   }
 }
 

client/src/app/+videos/+video-watch/recommendations/recommended-videos.component.scss

@@ -10,8 +10,9 @@
 
   .title-page.active,
   .title-page.title-page-single {
+    @include margin-right(.5rem !important);
+
     margin-bottom: unset;
-    margin-right: .5rem !important;
   }
 }
 
@@ -20,14 +21,16 @@
 }
 
 .title-page-autoplay {
+  @include margin-left(auto);
+
   display: flex;
   width: max-content;
   height: max-content;
   align-items: center;
-  margin-left: auto;
 
   span {
-    margin-right: 0.3rem;
+    @include margin-right(0.3rem);
+
     text-transform: uppercase;
     font-size: 85%;
     font-weight: 600;

client/src/app/+videos/+video-watch/video-avatar-channel.component.scss

@@ -15,9 +15,9 @@
 
 .wrapper {
   @include actor-avatar-size(35px);
+  @include margin-right(5px);
 
   position: relative;
-  margin-right: 5px;
   margin-bottom: 5px;
 
   &.generic-channel {

client/src/app/+videos/+video-watch/video-watch-playlist.component.scss

@@ -26,7 +26,7 @@
       display: flex;
 
       .playlist-by {
-        margin-right: 5px;
+        @include margin-right(5px);
       }
 
       .playlist-index span:first-child::after {
@@ -40,7 +40,7 @@
       margin: 10px 0;
 
       my-global-icon:not(:last-child) {
-        margin-right: .5rem;
+        @include margin-right(.5rem);
       }
 
       my-global-icon {
@@ -59,7 +59,7 @@
     ::ng-deep {
       .video {
         .position {
-          margin-right: 0;
+          @include margin-right(0);
         }
 
         .video-info {

client/src/app/+videos/+video-watch/video-watch.component.scss

@@ -152,7 +152,7 @@ $video-info-margin-left: 44px;
       .video-info-name {
         @include peertube-word-wrap;
 
-        margin-right: 30px;
+        @include margin-right(30px);
         min-height: 40px; // Align with the action buttons
         font-size: 27px;
         font-weight: $font-semibold;
@@ -167,9 +167,10 @@ $video-info-margin-left: 44px;
       }
 
       .video-info-date-views {
-        align-self: start;
+        @include margin-right(10px);
+
         margin-bottom: 10px;
-        margin-right: 10px;
+        align-self: start;
         font-size: 1em;
       }
 
@@ -209,15 +210,19 @@ $video-info-margin-left: 44px;
         }
 
         my-subscribe-button {
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
 
       .video-actions-rates {
-        margin: 0 0 10px;
+        @include margin-left(auto);
+        @include margin-right(0);
+
+        margin-top: 0;
+        margin-bottom: 10px;
+
         align-items: start;
         width: max-content;
-        margin-left: auto;
 
         .video-actions {
           height: 40px; // Align with the title
@@ -227,7 +232,7 @@ $video-info-margin-left: 44px;
           .action-button:not(:first-child),
           .action-dropdown,
           my-video-actions-dropdown {
-            margin-left: 5px;
+            @include margin-left(5px);
           }
 
           ::ng-deep.action-button {
@@ -305,7 +310,7 @@ $video-info-margin-left: 44px;
             }
 
             .icon-text {
-              margin-left: 3px;
+              @include margin-left(3px);
             }
           }
         }
@@ -341,8 +346,11 @@ $video-info-margin-left: 44px;
     }
 
     .video-info-description {
-      margin: 20px 0;
+      @include margin-left($video-info-margin-left);
-      margin-left: $video-info-margin-left;
+      @include margin-right(0);
+
+      margin-top: 20px;
+      margin-bottom: 20px;
       font-size: 15px;
 
       .video-info-description-html {
@@ -355,7 +363,7 @@ $video-info-margin-left: 44px;
 
       .glyphicon,
       .description-loading {
-        margin-left: 3px;
+        @include margin-left(3px);
       }
 
       .description-loading {
@@ -376,7 +384,7 @@ $video-info-margin-left: 44px;
     }
 
     .video-attributes {
-      margin-left: $video-info-margin-left;
+      @include margin-left($video-info-margin-left);
     }
 
     .video-attributes .video-attribute {
@@ -385,8 +393,9 @@ $video-info-margin-left: 44px;
       margin-bottom: 12px;
 
       .video-attribute-label {
+        @include padding-right(5px);
+
         min-width: 142px;
-        padding-right: 5px;
         display: inline-block;
         color: pvar(--greyForegroundColor);
         font-weight: $font-bold;
@@ -413,8 +422,9 @@ $video-info-margin-left: 44px;
 }
 
 my-recommended-videos {
+  @include padding-left(15px);
+
   display: block;
-  padding-left: 15px;
   min-width: 250px;
 }
 
@@ -432,14 +442,15 @@ my-video-comments {
 
 @media screen and (max-width: $small-view) {
   .privacy-concerns {
-    margin-left: $menu-width - 15px; // Menu is absolute
+    @include margin-left($menu-width - 15px); // Menu is absolute
   }
 }
 
 :host-context(.expanded) {
   .privacy-concerns {
+    @include margin-left(-15px);
+
     width: 100%;
-    margin-left: -15px;
   }
 }
 
@@ -473,8 +484,9 @@ my-video-comments {
   }
 
   .privacy-concerns-button {
+    @include margin-left(auto);
+
     padding: 5px 8px 5px 7px;
-    margin-left: auto;
     border-radius: 3px;
     white-space: nowrap;
     cursor: pointer;
@@ -487,8 +499,9 @@ my-video-comments {
   }
 
   .privacy-concerns-okay {
+    @include margin-left(10px);
+
     background-color: pvar(--mainColor);
-    margin-left: 10px;
   }
 }
 
@@ -525,7 +538,7 @@ my-video-comments {
   }
 
   my-recommended-videos {
-    padding-left: 0;
+    @include padding-left(0);
   }
 }
 

client/src/app/+videos/video-list/overview/video-overview.component.scss

@@ -53,17 +53,18 @@
 
         my-actor-avatar {
           @include actor-avatar-size(28px);
+          @include margin-right(8px);
 
           font-size: initial;
-          margin-right: 8px;
         }
       }
 
       .followers {
+        @include margin-left(10px);
+
         color: pvar(--greyForegroundColor);
         font-weight: normal;
         font-size: 14px;
-        margin-left: 10px;
         position: relative;
         top: 2px;
       }
@@ -87,8 +88,9 @@
     overflow: initial;
 
     .section-title {
+      @include margin-left(10px);
+
       font-size: 17px;
-      margin-left: 10px;
     }
   }
 }

client/src/app/+videos/video-list/trending/video-trending-header.component.scss

@@ -1,3 +1,5 @@
+@import '_mixins';
+
 .btn-group label {
   border: 1px solid transparent;
   border-radius: 9999px !important;
@@ -5,13 +7,14 @@
   opacity: .8;
 
   &:not(:first-child) {
-    margin-left: .5rem;
+    @include margin-left(.5rem);
   }
 
   my-global-icon {
+    @include margin-right(.1rem);
+
     position: relative;
     top: -2px;
     height: 1rem;
-    margin-right: .1rem;
   }
 }

client/src/app/app.component.scss

@@ -83,10 +83,11 @@
   }
 
   .icon.icon-logo {
+    @include margin-right(0.5rem);
+
     display: inline-block;
     width: 23px;
     height: 24px;
-    margin-right: 0.5rem;
   }
 }
 

client/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { filter, map, pairwise, switchMap } from 'rxjs/operators'
-import { DOCUMENT, PlatformLocation, ViewportScroller } from '@angular/common'
+import { DOCUMENT, getLocaleDirection, PlatformLocation, ViewportScroller } from '@angular/common'
 import { AfterViewInit, Component, Inject, LOCALE_ID, OnInit, ViewChild } from '@angular/core'
 import { DomSanitizer, SafeHtml } from '@angular/platform-browser'
 import { Event, GuardsCheckStart, NavigationEnd, RouteConfigLoadEnd, RouteConfigLoadStart, Router, Scroll } from '@angular/router'
@@ -107,6 +107,7 @@ export class AppComponent implements OnInit, AfterViewInit {
     this.openModalsIfNeeded()
 
     this.document.documentElement.lang = getShortLocale(this.localeId)
+    this.document.documentElement.dir = getLocaleDirection(this.localeId)
   }
 
   ngAfterViewInit () {

client/src/app/core/hotkeys/hotkeys.component.scss

@@ -51,24 +51,25 @@
 
 .cfp-hotkeys-keys {
   padding: 5px;
-  text-align: right;
+  text-align: end;
 }
 
 .cfp-hotkeys-key {
+  @include margin-right(5px);
+
   display: inline-block;
   color: #fff;
   background-color: #333;
   border: 1px solid #333;
   border-radius: 5px;
   text-align: center;
-  margin-right: 5px;
   box-shadow: inset 0 1px 0 #666, 0 1px 0 #bbb;
   padding: 5px 9px;
   font-size: 1em;
 }
 
 .cfp-hotkeys-text {
-  padding-left: 10px;
+  @include padding-left(10px);
   font-size: 1em;
 }
 

client/src/app/header/header.component.scss

@@ -2,22 +2,22 @@
 @import '_mixins';
 
 my-search-typeahead {
-  margin-right: 15px;
+  @include margin-right(15px);
 }
 
 .publish-button {
   @include peertube-button-link;
   @include orange-button;
   @include button-with-icon(22px, 3px, -1px);
-
+  @include margin-right(25px);
-  margin-right: 25px;
 
   @media screen and (max-width: 600px) {
-    margin-right: 10px;
+    @include margin-right(10px);
+
     padding: 0 10px;
 
     .icon.icon-upload {
-      margin-right: 0;
+      @include margin-right(0);
     }
 
     .publish-button-label {

client/src/app/header/search-typeahead.component.scss

@@ -6,8 +6,9 @@
 #search-video {
   @include peertube-input-text($search-input-width);
 
-  padding-left: 10px;
+  @include padding-left(10px);
-  padding-right: 40px; // For the search icon
+  @include padding-right(40px); // For the search icon
+
   font-size: 14px;
 
   &::placeholder {
@@ -17,11 +18,12 @@
 
 .icon-search {
   @include icon(25px);
+  @include margin-left(-35px);
+
   height: 18px;
 
   // yolo
   position: absolute;
-  margin-left: -35px;
   margin-top: 3.5px;
   right: 10px;
 }
@@ -65,8 +67,9 @@ li.suggestion {
     margin-bottom: .5rem;
 
     em {
+      @include margin-right(0.2rem);
+
       font-weight: 600;
-      margin-right: 0.2rem;
       font-style: normal;
     }
   }
@@ -81,7 +84,7 @@ li.suggestion {
   }
 
   @media screen and (min-width: $mobile-view) {
-    margin-left: 10px;
+    @include margin-left(10px);
   }
 
   @media screen and (max-width: $small-view) {

client/src/app/menu/menu.component.html

@@ -3,7 +3,10 @@
     <div class="top-menu">
       <div *ngIf="isLoggedIn" class="logged-in-block">
         <div>
-          <div class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left" [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside">
+          <div
+            class="logged-in-more" ngbDropdown #dropdown="ngbDropdown" placement="bottom-left auto"
+            [container]="dropdownContainer" (openChange)="onDropdownOpenChange($event)" autoClose="outside"
+          >
             <div ngbDropdownToggle>
               <my-actor-avatar [account]="user.account" size="34"></my-actor-avatar>
               <div class="logged-in-info">
@@ -18,8 +21,10 @@
             </div>
 
             <div ngbDropdownMenu>
-              <a *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
+              <a
-                #profile (click)="onActiveLinkScrollToAnchor(profile)">
+                *ngIf="user.account" ngbDropdownItem ngbDropdownToggle class="dropdown-item" [routerLink]="[ '/a', user.account.nameWithHost ]"
+                #profile (click)="onActiveLinkScrollToAnchor(profile)"
+              >
                 <my-global-icon iconName="go" aria-hidden="true"></my-global-icon> <ng-container i18n>Public profile</ng-container>
               </a>
 

client/src/app/menu/menu.component.scss

@@ -7,16 +7,17 @@ $footer-links-base-opacity: .8;
 
 .menu-link {
   @include disable-default-a-behaviour;
+  @include padding-left($menu-lateral-padding);
+  @include padding-right(20px);
 
   display: flex;
   align-items: center;
-  padding-left: $menu-lateral-padding;
+
   color: pvar(--menuForegroundColor);
   cursor: pointer;
   font-size: 16px;
   white-space: normal;
   word-break: break-word;
-  padding-right: 20px;
   transition: background-color .1s ease-in-out;
   line-height: $line-height-normal;
 
@@ -31,11 +32,11 @@ $footer-links-base-opacity: .8;
 
   my-global-icon {
     @include apply-svg-color(#808080);
+    @include margin-right($menu-link-icon-margin-right);
 
     display: flex;
     width: $menu-link-icon-size;
     height: $menu-link-icon-size;
-    margin-right: $menu-link-icon-margin-right;
   }
 }
 
@@ -99,8 +100,8 @@ menu {
 }
 
 my-notification {
-  margin-left: auto;
+  @include margin-left(auto);
-  margin-right: 15px;
+  @include margin-right(15px);
 }
 
 .logged-in-more {
@@ -111,16 +112,18 @@ my-notification {
       .dropdown-toggle-indicator {
         display: inherit !important;
       }
+
       .dropdown-toggle:first-child {
-        padding-right: 30px !important;
+        @include padding-left(30px !important);
       }
     }
   }
 
   $main-radius: 25px;
 
+  @include margin-left(13px);
+
   flex: 1;
-  margin-left: 13px;
   border-radius: $main-radius;
   transition: all .1s ease-in-out;
   cursor: pointer;
@@ -180,7 +183,7 @@ my-notification {
 }
 
 my-actor-avatar {
-  margin-right: 10px;
+  @include margin-right(10px);
 }
 
 .logged-in-info {
@@ -224,11 +227,11 @@ my-actor-avatar {
     min-height: 35px;
 
     my-global-icon {
+      // Keep aligned with other icons
+      @include margin-left($additional-margin);
+
       width: $icon-size;
       height: $icon-size;
-
-      // Keep aligned with other icons
-      margin-left: $additional-margin;
     }
 
     &.active,
@@ -246,7 +249,7 @@ my-actor-avatar {
       border-left: $border-left-width solid var(--mainColor);
 
       my-global-icon {
-        margin-left: $additional-margin - $border-left-width;
+        @include margin-left($additional-margin - $border-left-width);
       }
     }
   }
@@ -280,13 +283,13 @@ my-actor-avatar {
 
   .block-title {
     @include ellipsis;
+    @include margin-left(26px);
+    @include margin-right(30px);
 
     text-transform: uppercase;
     font-weight: $font-bold; // Bold
     font-size: 13px;
     margin-bottom: 25px;
-    margin-left: 26px;
-    margin-right: 30px;
   }
 
   a {
@@ -314,6 +317,8 @@ my-actor-avatar {
 
   a,
   span[role=button] {
+    @include margin-right(8px);
+
     display: inline-block;
     text-decoration: none;
     color: pvar(--menuForegroundColor);
@@ -322,7 +327,6 @@ my-actor-avatar {
     font-size: 90%;
     font-weight: 500;
     line-height: 1.4rem;
-    margin-right: 8px;
   }
 }
 
@@ -397,10 +401,10 @@ my-actor-avatar {
 
 my-global-icon {
   &[iconName=playlists] {
+    @include margin-right(16px);
+
     height: 24px;
     width: 24px;
-
-    margin-right: 16px;
   }
 
   &[iconName=videos] {

client/src/app/menu/menu.component.ts

@@ -94,6 +94,7 @@ export class MenuComponent implements OnInit {
     this.htmlServerConfig = this.serverService.getHTMLConfig()
     this.currentInterfaceLanguage = this.languageChooserModal.getCurrentLanguage()
 
+    this.isLoggedIn = this.authService.isLoggedIn()
     this.updateUserState()
     this.buildMenuSections()
 

client/src/app/menu/notification.component.scss

@@ -141,7 +141,7 @@
   position: relative;
 
   .unread-notifications {
-    margin-left: 20px;
+    @include margin-left(20px);
   }
 
   .unread-notifications {

client/src/app/modal/welcome-modal.component.scss

@@ -17,9 +17,10 @@
 }
 
 .mascot {
+  @include margin-right(2rem);
+
   display: block;
   min-width: 170px;
-  margin-right: 2rem;
 }
 
 .subtitle {

client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss

@@ -1,3 +1,6 @@
+@import '_mixins';
+@import '_variables';
+
 .comment-flagged-account,
 .account-flagged-handle {
   font-size: 11px;
@@ -5,13 +8,14 @@
 }
 
 .abuse-states .glyphicon-comment {
-  margin-left: 0.5rem;
+  @include margin-left(0.5rem);
 }
 
 .abuse-messages {
   my-global-icon {
+    @include margin-left(3px);
+
     width: 22px;
-    margin-left: 3px;
     position: relative;
     top: -2px;
   }

client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.scss

@@ -5,7 +5,7 @@
   display: flex;
 
   my-actor-avatar {
-    margin-right: 15px;
+    @include margin-right(15px);
   }
 
   .actor-info {

client/src/app/shared/shared-custom-markup/peertube-custom-tags/videos-list-markup.component.scss

@@ -2,7 +2,7 @@
 @import '_mixins';
 
 my-video-miniature {
-  margin-right: 15px;
+  @include margin-right(15px);
   display: inline-block;
   min-width: $video-thumbnail-width;
   max-width: $video-thumbnail-width;

client/src/app/shared/shared-forms/input-toggle-hidden.component.scss

@@ -3,11 +3,11 @@
 
 input {
   @include peertube-input-text(auto);
+  @include padding-left(15px !important);
+  @include padding-right(15px !important);
 
   // set again properties of peertube-input-text that are overriden by .input-group
   font-size: 15px !important;
-  padding-left: 15px !important;
-  padding-right: 15px !important;
 }
 
 .eye-button {

client/src/app/shared/shared-forms/markdown-textarea.component.scss

@@ -24,12 +24,13 @@ $input-border-radius: 3px;
     }
 
     .nav-preview {
+      @include padding-left(10px);
+      @include padding-right(10px);
+
       display: block;
-      text-align: right;
+      text-align: end;
       padding-top: 10px;
       padding-bottom: 10px;
-      padding-left: 10px;
-      padding-right: 10px;
       border-top: 1px dashed $input-border-color;
       border-left: 1px solid $input-border-color;
       border-right: 1px solid $input-border-color;
@@ -77,7 +78,7 @@ $input-border-radius: 3px;
   border-bottom: 2px solid pvar(--mainColor);
 
   :first-child {
-    margin-left: auto;
+    @include margin-left(auto);
   }
 
   ::ng-deep {
@@ -91,7 +92,7 @@ $input-border-radius: 3px;
     }
 
     .maximize-button {
-      margin-left: 5px;
+      @include margin-left(5px);
     }
   }
 }
@@ -120,10 +121,11 @@ $input-border-radius: 3px;
 
   .nav-preview {
     @include nav-preview-medium();
+    @include padding-right(0);
+    @include padding-left(0);
+
     padding-top: #{$nav-preview-vertical-padding / 2};
     padding-bottom: #{$nav-preview-vertical-padding / 2};
-    padding-left: 0;
-    padding-right: 0;
     position: absolute;
     background-color: pvar(--mainBackgroundColor);
     width: 100% !important;
@@ -132,7 +134,7 @@ $input-border-radius: 3px;
     border-right: 0;
 
     :last-child {
-      margin-right: pvar(--horizontalMarginContent);
+      @include margin-right(pvar(--horizontalMarginContent));
     }
   }
 
@@ -181,11 +183,11 @@ $input-border-radius: 3px;
     .nav-preview {
       ::ng-deep .nav-link {
         @include ellipsis();
+        @include margin-right(10px !important);
 
         display: block !important;
         max-width: 45% !important;
         padding: 5px 0 !important;
-        margin-right: 10px !important;
         text-align: center;
 
         &:not(.active) {

client/src/app/shared/shared-forms/peertube-checkbox.component.scss

@@ -36,7 +36,8 @@
   }
 
   .recommended {
-    margin-left: .5rem;
+    @include margin-left(.5rem);
+
     align-self: baseline;
     display: inline-block;
     padding: 4px 6px;

client/src/app/shared/shared-forms/reactive-file.component.scss

@@ -16,7 +16,8 @@
   }
 
   .filename {
+    @include margin-left(5px);
+
     font-weight: $font-semibold;
-    margin-left: 5px;
   }
 }

client/src/app/shared/shared-forms/select/select-shared.component.scss

@@ -43,10 +43,10 @@ ng-select ::ng-deep {
 my-select-options + input {
   @include peertube-input-text($form-base-input-width);
 
-  margin-left: 5px;
+  @include margin-left(5px);
   display: block;
 }
 
 .input-suffix {
-  margin-left: 5px;
+  @include margin-left(5px);
 }

client/src/app/shared/shared-instance/instance-features-table.component.scss

@@ -12,8 +12,9 @@ table {
     }
 
     &.sub-label {
+      @include padding-left(30px);
+
       font-weight: $font-regular;
-      padding-left: 30px;
     }
 
     .more-info {

client/src/app/shared/shared-main/buttons/button.component.scss

@@ -24,7 +24,7 @@ my-small-loader ::ng-deep .root {
 a[class$=-button],
 span[class$=-button] {
   > span {
-    margin-left: 5px;
+    @include margin-left(5px);
   }
 }
 

client/src/app/shared/shared-main/misc/help.component.scss

@@ -24,7 +24,7 @@
 
     .popover-body {
       font-family: $main-fonts;
-      text-align: left;
+      text-align: start;
       padding: 10px;
       font-size: 13px;
       background-color: pvar(--mainBackgroundColor);
@@ -36,7 +36,7 @@
       }
 
       ul {
-        padding-left: 20px;
+        @include padding-left(20px);
         margin-bottom: 0;
       }
     }

client/src/app/shared/shared-main/misc/simple-search-input.component.scss

@@ -6,9 +6,10 @@
 }
 
 my-global-icon {
+  @include margin-left(10px);
+
   height: 28px;
   width: 28px;
-  margin-left: 10px;
   cursor: pointer;
 
   &:hover {

client/src/app/shared/shared-main/users/user-notifications.component.scss

@@ -22,19 +22,20 @@
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(11px);
+    @include margin-left(3px);
 
     width: 24px;
-    margin-right: 11px;
-    margin-left: 3px;
   }
 
   .avatar {
+    @include margin-right(10px);
+
     width: 30px;
     height: 30px;
     min-width: 30px;
     min-height: 30px;
     border-radius: 5px;
-    margin-right: 10px;
   }
 
   .message {
@@ -46,11 +47,12 @@
   }
 
   .from-date {
+    @include padding-left(5px);
+    @include margin-left(auto);
+
     font-size: 0.85em;
     color: pvar(--greyForegroundColor);
-    padding-left: 5px;
     min-width: 70px;
-    text-align: right;
+    text-align: end;
-    margin-left: auto;
   }
 }

client/src/app/shared/shared-main/users/user-quota.component.scss

@@ -8,7 +8,7 @@ label {
 
 .user-quota {
   label {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 
   &,

client/src/app/shared/shared-moderation/moderation.scss

@@ -9,7 +9,7 @@
     font-weight: $font-semibold;
     display: inline-block;
     vertical-align: top;
-    text-align: right;
+    text-align: end;
   }
 
   .moderation-expanded-text {
@@ -79,10 +79,10 @@ my-action-dropdown.show {
     $image-height: 45px;
 
     @include miniature-thumbnail;
+    @include margin-right(0.5rem);
 
     height: $image-height;
     width: #{(16/9) * $image-height};
-    margin-right: 0.5rem;
     border-radius: 2px;
     border: 0;
     background: transparent;
@@ -121,9 +121,10 @@ my-action-dropdown.show {
     line-height: 1rem;
 
     div .glyphicon {
+      @include margin-left(0.1rem);
+
       font-size: 80%;
       color: #808080;
-      margin-left: 0.1rem;
     }
 
     div + div {

client/src/app/shared/shared-moderation/report-modals/report.component.scss

@@ -16,7 +16,7 @@ textarea {
   align-items: center;
 
   my-timestamp-input {
-    margin-left: 10px;
+    @include margin-left(10px);
   }
 }
 

client/src/app/shared/shared-share-modal/video-share.component.scss

@@ -50,7 +50,7 @@ my-input-toggle-hidden {
     cursor: pointer;
 
     .glyphicon {
-      margin-right: 5px;
+      @include margin-right(5px);
     }
   }
 
@@ -66,7 +66,7 @@ my-input-toggle-hidden {
     align-items: center;
 
     .peertube-select-container {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 
@@ -77,7 +77,7 @@ my-input-toggle-hidden {
     align-items: center;
 
     my-timestamp-input {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 }

client/src/app/shared/shared-user-subscription/subscribe-button.component.scss

@@ -38,15 +38,15 @@
 
   // Unlogged
   > .dropdown > .dropdown-toggle span {
-    padding-right: 3px;
+    @include padding-right(3px);
   }
 
   // Logged
   > .btn {
-    padding-right: 4px;
+    @include padding-right(4px);
 
     + .dropdown > button {
-      padding-left: 2px;
+      @include padding-left(2px);
 
       &::after {
         position: relative;
@@ -62,7 +62,7 @@
     }
 
     span.followers-count {
-      padding-left: 5px;
+      @include padding-left(5px);
     }
   }
   &.unsubscribe-button {
@@ -108,6 +108,6 @@
 
   span:not(:first-child) {
     font-size: 60%;
-    text-align: left;
+    text-align: start;
   }
 }

client/src/app/shared/shared-video-miniature/abstract-video-list.scss

@@ -21,7 +21,8 @@ $icon-size: 16px;
   }
 
   .moderation-block {
-    margin-left: .4rem;
+    @include margin-left(.4rem);
+
     display: flex;
     justify-content: flex-end;
     align-items: center;
@@ -54,8 +55,8 @@ $icon-size: 16px;
 }
 
 .display-as-row.videos {
-  margin-left: pvar(--horizontalMarginContent);
+  @include margin-left(pvar(--horizontalMarginContent));
-  margin-right: pvar(--horizontalMarginContent);
+  @include margin-right(pvar(--horizontalMarginContent));
 
   .video-wrapper {
     margin-bottom: 15px;
@@ -70,8 +71,9 @@ $icon-size: 16px;
     margin-bottom: 10px;
 
     .title-page {
+      @include margin-right(0);
+
       margin-bottom: 10px;
-      margin-right: 0;
     }
   }
 }

client/src/app/shared/shared-video-miniature/video-download.component.scss

@@ -19,7 +19,7 @@
   }
 
   .glyphicon {
-    margin-right: 5px;
+    @include margin-right(5px);
   }
 }
 
@@ -46,9 +46,9 @@
 
   .peertube-radio-container {
     @include peertube-radio-container;
+    @include margin-right(30px);
 
     display: inline-block;
-    margin-right: 30px;
   }
 }
 
@@ -66,8 +66,9 @@
   margin-bottom: 12px;
 
   .metadata-attribute-label {
+    @include padding-right(5px);
+
     min-width: 142px;
-    padding-right: 5px;
     display: inline-block;
     color: pvar(--greyForegroundColor);
     font-weight: $font-bold;
@@ -75,6 +76,7 @@
 
   a.metadata-attribute-value {
     @include disable-default-a-behaviour;
+
     color: pvar(--mainForegroundColor);
 
     &:hover {

client/src/app/shared/shared-video-miniature/video-miniature.component.scss

@@ -13,7 +13,7 @@ $more-button-width: 40px;
 }
 
 my-actor-avatar {
-  margin: 10px 10px 0 0;
+  @include margin(10px, 10px, 0, 0);
 }
 
 .video-miniature-created-at-views {
@@ -155,10 +155,11 @@ my-actor-avatar {
   }
 
   my-video-thumbnail {
+    @include margin-right(10px);
+
     min-width: var(--rowThumbnailWidth);
     max-width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 
   .video-miniature-name {

client/src/app/shared/shared-video-miniature/videos-selection.component.scss

@@ -11,8 +11,9 @@
   position: fixed;
 
   .action-button {
+    @include margin-left(55px);
+
     display: block;
-    margin-left: 55px;
   }
 }
 
@@ -29,10 +30,11 @@
   }
 
   .checkbox-container {
+    @include margin-right(20px);
+    @include margin-left(12px);
+
     display: flex;
     align-items: center;
-    margin-right: 20px;
-    margin-left: 12px;
   }
 
   my-video-miniature {

client/src/app/shared/shared-video-playlist/video-add-to-playlist.component.scss

@@ -44,7 +44,7 @@ $timestamp-margin-right: 10px;
   }
 
   > .optional-rows {
-    padding-left: 24px;
+    @include padding-left(24px);
   }
 
   &.has-optional-row:hover {
@@ -57,7 +57,7 @@ $timestamp-margin-right: 10px;
   display: flex;
 
   my-peertube-checkbox {
-    margin-right: 10px;
+    @include margin-right(10px);
     align-self: center;
   }
 
@@ -78,15 +78,15 @@ $timestamp-margin-right: 10px;
 
     my-global-icon {
       @include apply-svg-color(#333);
+      @include margin-right(0);
 
       width: 19px;
       height: 19px;
-      margin-right: 0;
     }
   }
 
   my-timestamp-input {
-    margin-right: $timestamp-margin-right;
+    @include margin-right($timestamp-margin-right);
 
     ::ng-deep .ui-inputtext {
       padding: 0;
@@ -101,20 +101,23 @@ $timestamp-margin-right: 10px;
   }
 
   my-peertube-checkbox {
+    @include margin-right(0 !important);
+
     display: block;
     width: $optional-rows-checkbox-width;
-    margin-right: 0 !important;
   }
 
   .labels {
-    margin-left: $optional-rows-checkbox-width;
+    @include margin-left($optional-rows-checkbox-width);
+
     font-size: 13px;
     color: pvar(--greyForegroundColor);
     padding-top: 5px;
     padding-bottom: 0;
 
     div {
-      margin-right: $timestamp-margin-right;
+      @include margin-right($timestamp-margin-right);
+
       width: $timestamp-width;
     }
   }
@@ -131,11 +134,11 @@ $timestamp-margin-right: 10px;
 
   my-global-icon {
     @include apply-svg-color(#333);
+    @include margin-right(4px);
 
     position: relative;
     left: -1px;
     top: -1px;
-    margin-right: 4px;
     width: 21px;
     height: 21px;
   }

client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss

@@ -17,8 +17,9 @@ my-video-thumbnail {
 
 my-video-thumbnail,
 .fake-thumbnail {
+  @include margin-right(10px);
+
   display: flex; // Avoids an issue with line-height that adds space below the element
-  margin-right: 10px;
 }
 
 .video {
@@ -60,8 +61,9 @@ my-video-thumbnail,
     cursor: pointer;
 
     .position {
+      @include margin-right(10px);
+
       font-weight: $font-semibold;
-      margin-right: 10px;
       color: pvar(--greyForegroundColor);
       min-width: 25px;
 
@@ -101,8 +103,9 @@ my-video-thumbnail,
 
   .more,
   my-edit-button {
+    @include margin-left(auto);
+
     justify-self: flex-end;
-    margin-left: auto;
     cursor: pointer;
     min-width: 24px;
   }
@@ -135,8 +138,9 @@ my-video-thumbnail,
   }
 
   .timestamp-options {
+    @include padding-left(35px);
+
     padding-top: 0;
-    padding-left: 35px;
     margin-bottom: 15px;
 
     > div {
@@ -146,7 +150,7 @@ my-video-thumbnail,
     }
 
     my-peertube-checkbox {
-      margin-right: 5px;
+      @include margin-right(5px);
     }
 
     input {

client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.scss

@@ -88,9 +88,10 @@
   display: flex;
 
   .miniature-thumbnail {
+    @include margin-right(10px);
+
     width: var(--rowThumbnailWidth);
     height: var(--rowThumbnailHeight);
-    margin-right: 10px;
   }
 }
 

client/src/sass/application.scss

@@ -65,6 +65,9 @@ body {
   // Allow to disable the scrollbar instead of hide it when the content fit the body
   // And not move the content and header horizontally sticked to right when the content is updating
   overflow-y: scroll;
+
+  // Fix "reboot" style that set text-align: left
+  text-align: start;
 }
 
 ::selection {
@@ -130,8 +133,7 @@ my-input-toggle-hidden ::ng-deep input {
 
 .full-width {
   width: 100%;
-  margin-left: auto;
+  margin: 0 auto;
-  margin-right: auto;
   max-width: initial;
 }
 
@@ -144,13 +146,13 @@ my-input-toggle-hidden ::ng-deep input {
 }
 
 .main-col {
-  margin-left: $menu-width;
+  @include margin-left($menu-width);
+
   width: calc(100% - #{$menu-width});
   outline: none;
 
   .margin-content {
-    margin-left: pvar(--horizontalMarginContent);
+    margin: 0 pvar(--horizontalMarginContent);
-    margin-right: pvar(--horizontalMarginContent);
     flex-grow: 1;
   }
 
@@ -159,8 +161,7 @@ my-input-toggle-hidden ::ng-deep input {
     width: 100%;
     display: flex;
     align-items: center;
-    padding-left: pvar(--horizontalMarginContent);
+    padding: 0 pvar(--horizontalMarginContent);
-    padding-right: pvar(--horizontalMarginContent);
     height: $sub-menu-height;
     margin-bottom: $sub-menu-margin-bottom;
     overflow-x: auto;
@@ -182,7 +183,7 @@ my-input-toggle-hidden ::ng-deep input {
     --horizontalMarginContent: #{$expanded-horizontal-margins};
     --mainColWidth: 100vw;
 
-    margin-left: 0;
+    @include margin-left(0);
     width: 100%;
   }
 
@@ -199,12 +200,12 @@ my-input-toggle-hidden ::ng-deep input {
 
 .title-page {
   @include disable-default-a-behaviour;
+  @include margin-right(55px);
 
   opacity: 0.6;
   color: pvar(--mainForegroundColor);
   font-size: 16px;
   display: inline-block;
-  margin-right: 55px;
   font-weight: $font-semibold;
   border-bottom: 2px solid transparent;
 
@@ -237,7 +238,7 @@ my-input-toggle-hidden ::ng-deep input {
   }
 
   @media screen and (max-width: $mobile-view) {
-    margin-right: 15px;
+    @include margin-left(15px);
   }
 }
 
@@ -365,8 +366,7 @@ ngx-loading-bar {
     --horizontalMarginContent: #{$expanded-horizontal-margins / 3};
 
     .sub-menu {
-      padding-left: 50px;
+      padding: 0 50px;
-      padding-right: 50px;
 
       .title-page {
         font-size: 17px;
@@ -386,12 +386,11 @@ ngx-loading-bar {
   .main-col.expanded {
     --horizontalMarginContent: 15px;
 
-    margin-left: 0;
+    @include margin-left(0);
 
     .sub-menu {
       width: 100vw;
-      padding-left: 15px;
+      padding: 0 15px;
-      padding-right: 15px;
       margin-bottom: $sub-menu-margin-bottom-small-view;
       overflow-x: auto;
     }
@@ -405,7 +404,8 @@ ngx-loading-bar {
       flex-direction: column;
 
       .form-sub-title {
-        margin-right: 0 !important;
+        @include margin-right(0 !important);
+
         margin-bottom: 10px;
         text-align: center;
       }
@@ -419,7 +419,7 @@ ngx-loading-bar {
         width: 100%;
 
         a {
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
     }

client/src/sass/bootstrap.scss

@@ -62,7 +62,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   font-size: 15px;
 
   .dropdown-header {
-    padding-left: 1rem;
+    @include padding-left(1rem);
   }
 
   .dropdown-item {
@@ -105,7 +105,7 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   }
 
   .modal-dialog {
-    text-align: left;
+    text-align: start;
 
     &:not(.modal-lg):not(.modal-xl) {
       min-width: 500px;
@@ -153,10 +153,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
 
   .inputs {
     margin-bottom: 0;
-    text-align: right;
+    text-align: end;
 
     > .peertube-button:not(:first-child) {
-      margin-left: 10px;
+      @include margin-left(10px);
     }
   }
 }
@@ -342,7 +342,7 @@ ngb-tooltip-window {
   position: relative;
 
   input {
-    padding-right: 1.5rem !important;
+    @include padding-right(1.5rem !important);
   }
 
   .form-control-clear {
@@ -392,3 +392,22 @@ ngb-tooltip-window {
     border-left-color: pvar(--mainColor);
   }
 }
+
+// Override these properties for Bidi support
+@each $size, $length in $spacers {
+  .ml-#{$size} {
+    @include margin-left($length);
+  }
+
+  .mr-#{$size} {
+    @include margin-right($length);
+  }
+
+  .pl-#{$size} {
+    @include padding-left($length);
+  }
+
+  .pr-#{$size} {
+    @include padding-right($length);
+  }
+}

client/src/sass/include/_actor.scss

@@ -30,7 +30,8 @@
   }
 
   > div {
-    margin-left: $img-margin;
+    @include margin-left($img-margin);
+
     min-width: 1px;
   }
 

client/src/sass/include/_miniature.scss

@@ -14,8 +14,9 @@
   }
 
   &.blur-filter {
+    @include padding-left(4px);
+
     filter: blur(3px);
-    padding-left: 4px;
   }
 }
 
@@ -102,11 +103,11 @@
   --gridVideosMiniatureMargins: #{pvar(--videosHorizontalMarginContent)};
 
   @if $margin {
-    margin-left: var(--gridVideosMiniatureMargins) !important;
+    @include margin-left(var(--gridVideosMiniatureMargins) !important);
-    margin-right: var(--gridVideosMiniatureMargins) !important;
+    @include margin-right(var(--gridVideosMiniatureMargins) !important);
   } @else {
-    padding-left: var(--gridVideosMiniatureMargins) !important;
+    @include padding-left(var(--gridVideosMiniatureMargins) !important);
-    padding-right: var(--gridVideosMiniatureMargins) !important;
+    @include padding-right(var(--gridVideosMiniatureMargins) !important);
   }
 
   @media screen and (max-width: $mobile-view) {

client/src/sass/include/_mixins.scss

@@ -84,6 +84,7 @@
 }
 
 @mixin peertube-input-text($width) {
+  padding: 0 15px;
   display: inline-block;
   height: $button-height;
   width: $width;
@@ -91,8 +92,6 @@
   background-color: pvar(--inputBackgroundColor);
   border: 1px solid #C6C6C6;
   border-radius: 3px;
-  padding-left: 15px;
-  padding-right: 15px;
   font-size: 15px;
 
   &::placeholder {
@@ -257,6 +256,8 @@
 }
 
 @mixin peertube-button {
+  @include padding(0, 17px, 0, 13px);
+
   border: 0;
   font-weight: $font-semibold;
   font-size: 15px;
@@ -265,7 +266,6 @@
   // FIXME: because of primeng that redefines border-radius of all input[type="..."]
   border-radius: 3px !important;
   text-align: center;
-  padding: 0 17px 0 13px;
   cursor: pointer;
 }
 
@@ -290,9 +290,10 @@
   line-height: normal !important;
 
   my-global-icon {
+    @include margin-right($margin-right);
+
     position: relative;
     width: $width;
-    margin-right: $margin-right;
     top: $top;
   }
 }
@@ -310,7 +311,7 @@
     width: 100%;
     height: 100%;
     font-size: 100px;
-    text-align: right;
+    text-align: end;
     filter: alpha(opacity=0);
     opacity: 0;
     outline: none;
@@ -428,6 +429,8 @@
       cursor: pointer;
 
       &::before {
+        @include margin-right(10px);
+
         position: relative;
         top: -2px;
         content: '';
@@ -440,7 +443,6 @@
         vertical-align: middle;
         cursor: pointer;
         text-align: center;
-        margin-right: 10px;
       }
     }
 
@@ -500,9 +502,10 @@
   }
 
   + span + span {
+    @include margin-left(5px);
+
     font-size: 15px;
     font-weight: $font-regular;
-    margin-left: 5px;
     cursor: pointer;
     display: inline;
   }
@@ -635,10 +638,10 @@
   padding: 6px 15px;
 
   my-global-icon {
+    @include margin-right(10px);
+
     width: 22px;
     opacity: .7;
-
-    margin-right: 10px;
     position: relative;
     top: -2px;
   }
@@ -705,10 +708,12 @@
     }
 
     + .breadcrumb-item {
-      padding-left: 0.5rem;
+      @include padding-left(0.5rem);
+
       &::before {
+        @include padding-right(0.5rem);
+
         display: inline-block;
-        padding-right: 0.5rem;
         color: #6c757d;
         content: '/';
       }
@@ -822,8 +827,8 @@
   }
 
   my-actor-avatar {
-    margin-left: -.4rem;
+    @include margin-left(-.4rem);
-    margin-right: .2rem;
+    @include margin-right(.2rem);
   }
 
   &.two-lines {
@@ -836,11 +841,11 @@
     }
 
     div {
+      margin: 0 .1rem;
+
       display: flex;
       flex-direction: column;
       height: $avatar-height;
-      margin-left: .1rem;
-      margin-right: .1rem;
       justify-content: center;
     }
   }
@@ -875,14 +880,14 @@
 
     > span > my-global-icon,
     > my-global-icon {
-      margin-right: 10px;
+      @include margin-right(10px);
       width: 24px;
       height: 24px;
       vertical-align: top;
     }
 
     .badge {
-      margin-left: 7px;
+      @include margin-left(7px);
       vertical-align: top;
     }
   }
@@ -930,3 +935,59 @@
     }
   }
 }
+
+@mixin margin ($block-start, $inline-end, $block-end, $inline-start) {
+  @include margin-left($inline-start);
+  @include margin-right($inline-end);
+
+  margin-top: $block-start;
+  margin-bottom: $block-end;
+}
+
+@mixin padding ($block-start, $inline-end, $block-end, $inline-start) {
+  @include padding-left($inline-start);
+  @include padding-right($inline-end);
+
+  padding-top: $block-start;
+  padding-bottom: $block-end;
+}
+
+@mixin margin-left ($value) {
+  @supports (margin-inline-start: $value) {
+    margin-inline-start: $value;
+  }
+
+  @supports not (margin-inline-start: $value) {
+    margin-left: $value;
+  }
+}
+
+@mixin margin-right ($value) {
+  @supports (margin-inline-end: $value) {
+    margin-inline-end: $value;
+  }
+
+  @supports not (margin-inline-end: $value) {
+    margin-right: $value;
+  }
+}
+
+@mixin padding-left ($value) {
+  @supports (padding-inline-start: $value) {
+    padding-inline-start: $value;
+  }
+
+  @supports not (padding-inline-start: $value) {
+    padding-left: $value;
+  }
+}
+
+@mixin padding-right ($value) {
+  @supports (padding-inline-end: $value) {
+    padding-inline-end: $value;
+  }
+
+  @supports not (padding-inline-end: $value) {
+    padding-right: $value;
+  }
+}

client/src/sass/ng-select.scss

@@ -31,7 +31,7 @@ $ng-select-value-font-size: 15px;
   }
 
   .ng-arrow-wrapper {
-    padding-right: 12px;
+    @include padding-right(12px);
   }
 
   &.ng-select-single .ng-value-container .ng-value {
@@ -44,10 +44,10 @@ $ng-select-value-font-size: 15px;
   }
 
   &.ng-select-multiple .ng-select-container .ng-value-container {
-    padding-left: 12px;
+    @include padding-left(12px);
 
     .ng-value { /* stylelint-disable-line */
-      margin-left: 3px;
+      @include margin-left(12px);
     }
   }
 }

client/src/sass/player/bezels.scss

@@ -9,13 +9,14 @@
 }
 
 .vjs-bezel {
+  @include margin-left(-26px);
+
   position: absolute;
   left: 50%;
   top: 50%;
   width: 52px;
   height: 52px;
   z-index: 19;
-  margin-left: -26px;
   margin-top: -26px;
   background: rgba(0, 0, 0, .5);
   border-radius: 26px;

client/src/sass/player/context-menu.scss

@@ -25,7 +25,7 @@ $context-menu-width: 350px;
     cursor: pointer;
     font-size: 1em;
     padding: 8px 16px;
-    text-align: left;
+    text-align: start;
     text-transform: none;
 
     &:hover {
@@ -35,6 +35,8 @@ $context-menu-width: 350px;
     [class^='vjs-icon-'] {
       $icons: 'link-2', 'repeat', 'code', 'tick-white', 'info';
 
+      @include margin-right(0.8rem !important);
+
       display: inline-flex;
       position: relative;
       top: 2px;
@@ -43,7 +45,6 @@ $context-menu-width: 350px;
       height: 14px;
       background-color: #fff;
       mask-size: cover;
-      margin-right: 0.8rem !important;
 
       @each $icon in $icons {
         &[class$="-#{$icon}"] {

client/src/sass/player/peertube-skin.scss

@@ -20,8 +20,9 @@ body {
   color: pvar(--embedForegroundColor);
 
   .vjs-dock-text {
+    @include padding-right(60px);
+
     padding: $dock-padding;
-    padding-right: 60px;
     background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
   }
 
@@ -34,11 +35,11 @@ body {
     font-size: 11px;
 
     .text::before {
-      margin-right: 4px;
+      @include margin-right(4px);
     }
 
     .text::after {
-      margin-left: 4px;
+      @include margin-left(4px);
       transform: scale(-1, 1);
     }
   }
@@ -55,6 +56,8 @@ body {
     $big-play-width: 1.2em;
     $big-play-height: 1.2em;
 
+    @include margin-left(-($big-play-width / 2));
+
     outline: 0;
     font-size: 6em;
 
@@ -66,7 +69,6 @@ body {
     width: $big-play-width;
     height: $big-play-height;
     line-height: $big-play-height;
-    margin-left: -($big-play-width / 2);
     margin-top: -($big-play-height / 2);
     transition: 0.4s opacity;
 
@@ -157,7 +159,7 @@ body {
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 
     > button:first-child {
-      margin-left: $first-control-bar-element-margin-left;
+      @include margin-left($first-control-bar-element-margin-left);
     }
 
     .vjs-progress-control,
@@ -188,11 +190,12 @@ body {
     }
 
     .vjs-progress-control {
+      @include margin-left($progress-margin);
+
       position: absolute;
       z-index: 100; // On top of the progress bar
       bottom: 29px;
       width: calc(100% - (2 * #{$progress-margin}));
-      margin-left: $progress-margin;
       height: 14px;
 
       .vjs-slider {
@@ -261,17 +264,19 @@ body {
       line-height: inherit;
 
       &.vjs-current-time {
+        @include margin-left(.5em);
+
         font-size: $font-size;
         display: inline-block;
         padding: 0;
-        margin-left: .5em;
 
         .vjs-current-time-display {
           line-height: calc(#{$control-bar-height} - 1px);
 
           &::after {
+            @include margin(0, 1px, 0, 2px);
+
             content: '/';
-            margin: 0 1px 0 2px;
           }
         }
       }
@@ -298,10 +303,11 @@ body {
     }
 
     .vjs-peertube {
+      @include margin-right(6px);
+
       width: 100%;
       line-height: $control-bar-height;
-      text-align: right;
+      text-align: end;
-      margin-right: 6px;
       overflow: hidden;
 
       .vjs-peertube-displayed {
@@ -323,7 +329,7 @@ body {
       .upload-speed-text,
       .peers-text,
       .http-fallback {
-        margin-right: 15px;
+        @include margin-right(15px);
       }
 
       .icon {
@@ -340,7 +346,7 @@ body {
     .vjs-next-video,
     .vjs-previous-video {
       line-height: $control-bar-height;
-      text-align: right;
+      text-align: end;
 
       .icon {
         &.icon-next,
@@ -415,8 +421,9 @@ body {
     }
 
     .vjs-volume-control {
+      @include margin(0, 5px, 0, 0);
+
       width: 30px;
-      margin: 0 5px 0 0;
     }
 
     .vjs-volume-bar {
@@ -490,9 +497,9 @@ body {
 
     .vjs-theater-control {
       @include disable-outline;
+      @include margin-right(1px);
 
       width: 37px;
-      margin-right: 1px;
       cursor: pointer;
 
       .vjs-icon-placeholder {
@@ -512,9 +519,9 @@ body {
 
     .vjs-fullscreen-control {
       @include disable-outline;
+      @include margin-left($first-control-bar-element-margin-left);
 
       width: 37px;
-      margin-right: $first-control-bar-element-margin-left;
 
       .vjs-icon-placeholder {
         display: inline-block;
@@ -641,12 +648,12 @@ body {
 
     .vjs-control-bar {
       > button:first-child {
-        margin-left: $first-control-bar-element-margin-left-small-width;
+        @include margin-left($first-control-bar-element-margin-left-small-width);
       }
     }
 
     .vjs-fullscreen-control {
-      margin-right: $first-control-bar-element-margin-left-small-width;
+      @include margin-right($first-control-bar-element-margin-left-small-width);
     }
 
     &.vjs-live {

client/src/sass/player/settings-menu.scss

@@ -56,13 +56,13 @@ $setting-transition-easing: ease-out;
     }
 
     .vjs-settings-sub-menu-title {
-      text-align: left;
+      text-align: start;
       font-weight: $font-semibold;
     }
 
     .vjs-settings-sub-menu-value {
       width: 100%;
-      text-align: right;
+      text-align: end;
 
       small {
         font-size: 0.85em;
@@ -132,7 +132,7 @@ $setting-transition-easing: ease-out;
         .vjs-settings-sub-menu-value::after {
           @include chevron-right(9px, 2px);
 
-          margin-left: 5px;
+          @include margin-left(5px);
         }
       }
 
@@ -142,7 +142,7 @@ $setting-transition-easing: ease-out;
         .vjs-menu-item {
           outline: 0;
           font-weight: $font-semibold;
-          text-align: right;
+          text-align: end;
           padding: 5px 8px;
 
           &.vjs-back-button {
@@ -150,12 +150,12 @@ $setting-transition-easing: ease-out;
             padding: 8px 8px 13px 12px;
             margin-bottom: 5px;
             border-bottom: 1px solid #808080;
-            text-align: left;
+            text-align: start;
 
             &::before {
               @include chevron-left(9px, 2px);
 
-              margin-right: 5px;
+              @include margin-right(5px);
             }
           }
 
@@ -182,10 +182,10 @@ $setting-transition-easing: ease-out;
           width: 200px;
 
           .vjs-menu-item {
-            text-align: left;
+            text-align: start;
 
             .vjs-menu-item-text {
-              margin-left: 25px;
+              @include margin-left(25px);
               text-transform: capitalize;
             }
           }

client/src/sass/player/stats.scss

@@ -34,7 +34,7 @@ $contextmenu-background-color: rgba(0, 0, 0, 0.6);
     display: inline-block;
     font-weight: 600;
     padding: 0 .5em;
-    text-align: right;
+    text-align: end;
     width: 11.5em;
     white-space: nowrap;
   }

client/src/sass/player/upnext.scss

@@ -23,19 +23,17 @@ $browser-context: 16;
   }
 
   .vjs-upnext-top {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     bottom: 50%;
     margin-bottom: 60px;
   }
 
   .vjs-upnext-bottom {
+    margin: 0 auto;
     width: 100%;
     position: absolute;
-    margin-left: auto;
-    margin-right: auto;
     top: 50%;
     margin-top: 52px;
   }

client/src/sass/primeng-custom.scss

@@ -139,7 +139,8 @@ body .p-paginator .p-paginator-pages .p-paginator-page:focus {
   box-shadow: 0 0 0 0.2em pvar(--mainColorLightest);
 }
 body .p-paginator .p-dropdown {
-  margin-left: 0.5em;
+  @include margin-left(0.5em);
+
   height: 2.286em;
   min-width: auto;
 }
@@ -161,7 +162,7 @@ body .p-dropdown:not(.p-disabled).p-focus {
   border-color: pvar(--mainColor);
 }
 body .p-dropdown .p-dropdown-label {
-  padding-right: 2em;
+  @include padding-right(2em);
 }
 body .p-dropdown .p-dropdown-trigger {
   background-color: #ffffff;
@@ -175,7 +176,7 @@ body .p-dropdown .p-dropdown-clear-icon {
   color: #848484;
 }
 body .p-dropdown.p-dropdown-clearable .p-dropdown-label {
-  padding-right: 4em;
+  @include padding-right(4em);
 }
 body .p-dropdown-panel {
   padding: 0;
@@ -191,8 +192,9 @@ body .p-dropdown-panel .p-dropdown-filter-container {
   margin: 0;
 }
 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter {
+  @include padding-right(2em);
+
   width: 100%;
-  padding-right: 2em;
 }
 body .p-dropdown-panel .p-dropdown-filter-container .p-dropdown-filter-icon {
   top: 50%;
@@ -368,17 +370,18 @@ body .p-datepicker.p-datepicker-timeonly .p-timepicker {
   border-top: 0 none;
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group {
+  @include padding-right(0.857em);
+  @include padding-left(0.857em);
+
   border-right: 1px solid #d8dae2;
-  padding-right: 0.857em;
-  padding-left: 0.857em;
   padding-top: 0;
   padding-bottom: 0;
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:first-child {
-  padding-left: 0;
+  @include padding-left(0);
 }
 body .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
-  padding-right: 0;
+  @include padding-right(0);
   border-right: 0 none;
 }
 body .p-calendar.p-calendar-w-btn .p-inputtext {
@@ -402,7 +405,7 @@ body p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border: 1px solid #a80000;
 }
 body .p-timepicker .p-separator {
-  margin-left: 0;
+  @include margin-left(0);
   min-width: 0.75rem;
 }
 
@@ -514,7 +517,7 @@ p-table {
       align-items: center;
 
       .left-buttons {
-        padding-left: 15px;
+        @include padding-left(15px);
       }
     }
   }
@@ -534,7 +537,7 @@ p-table {
   }
 
   td {
-    padding-left: 15px !important;
+    @include padding-left(15px !important);
 
     &.expand-cell {
       padding: 10px 15px;
@@ -646,10 +649,10 @@ p-table {
     my-delete-button,
     my-button {
       display: inline-block !important;
-      margin-left: 5px;
+      @include margin-left(5px);
 
       &:first-child {
-        margin-left: 0
+        @include margin-left(0)
       }
     }
   }
@@ -714,13 +717,13 @@ p-table {
         &.p-paginator-prev {
           @extend .glyphicon-chevron-left;
 
-          margin-right: 10px;
+          @include margin-right(10px);
         }
 
         &.p-paginator-next {
           @extend .glyphicon-chevron-right;
 
-          margin-left: 10px;
+          @include margin-left(10px);
         }
 
         &.p-paginator-last {
@@ -799,7 +802,7 @@ p-calendar .p-datepicker {
   .p-datepicker-header {
 
     .p-datepicker-year {
-      margin-left: 5px;
+      @include margin-left(5px);
     }
 
     .p-datepicker-next {
@@ -807,7 +810,7 @@ p-calendar .p-datepicker {
       @include glyphicon-light;
 
       color: #000 !important;
-      text-align: right;
+      text-align: end;
 
       .pi.pi-chevron-right {
         display: none !important;
@@ -819,7 +822,7 @@ p-calendar .p-datepicker {
       @include glyphicon-light;
 
       color: #000 !important;
-      text-align: left;
+      text-align: start;
 
       .pi.pi-chevron-left {
         display: none !important;
@@ -945,7 +948,7 @@ p-toast {
 
       .message {
         flex-grow: 1;
-        margin-right: 20px;
+        @include margin-right(20px);
 
         h3 {
           font-size: 21px;
@@ -959,7 +962,7 @@ p-toast {
 
       .glyphicon {
         font-size: 32px;
-        margin-right: 5px;
+        @include margin-right(5px);
       }
     }
   }

client/src/standalone/videos/test-embed.scss

@@ -1,3 +1,5 @@
+@import '_variables';
+@import '_mixins';
 
 * {
   font-family: sans-serif;
@@ -30,21 +32,23 @@ aside {
 }
 
 .logo {
+  @include margin-right(0.5em);
+
   font-size: 150%;
   height: 100%;
   font-weight: bold;
   display: flex;
   flex-direction: row;
   align-items: center;
-  margin-right: 0.5em;
 
   .icon {
+    @include margin-right(0.5em);
+
     height: 100%;
     padding: 0 18px 0 32px;
     background: #fff;
     display: flex;
     align-items: center;
-    margin-right: 0.5em;
   }
 }
 
@@ -59,6 +63,8 @@ main {
 }
 
 header {
+  @include padding-right(1em);
+
   width: 100%;
   height: 3.2em;
   background-color: #F1680D;
@@ -71,7 +77,6 @@ header {
   box-shadow: 1px 0 10px rgba(0, 0, 0, 0.6);
   background-size: 50%;
   background-position: top left;
-  padding-right: 1em;
 
   h1 {
     margin: 0;

scripts/dev/client.sh

@@ -2,7 +2,13 @@
 
 set -eu
 
-clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration hmr --host 0.0.0.0 --disable-host-check --port 3000"
+clientConfiguration="hmr"
+
+if [ ! -z ${2+x} ] && [ "$2" = "--ar-locale" ]; then
+  clientConfiguration="ar-locale"
+fi
+
+clientCommand="cd client && node node_modules/.bin/ng serve --proxy-config proxy.config.json --hmr --configuration $clientConfiguration --host 0.0.0.0 --disable-host-check --port 3000"
 serverCommand="npm run build:server && NODE_ENV=test node dist/server"
 
 if [ ! -z ${1+x} ] && [ "$1" = "--skip-server" ]; then

scripts/dev/index.sh

@@ -3,5 +3,5 @@
 set -eu
 
 NODE_ENV=test npm run concurrently -- -k \
-  "sh scripts/dev/client.sh --skip-server" \
+  "sh scripts/dev/client.sh --skip-server ${1:-}" \
   "sh scripts/dev/server.sh --skip-client"