Merge branch 'development' into feature/playlist-2023-05

* development: (46 commits) Translated using Weblate (Hebrew) Translated using Weblate (Hebrew) Translated using Weblate (Chinese (Simplified)) Add subscribed icon to comments (FreeTubeApp#4007) Translated using Weblate (Icelandic) Translated using Weblate (Czech) Translated using Weblate (Bulgarian) Translated using Weblate (Polish) Translated using Weblate (Arabic) Translated using Weblate (Greek) Translated using Weblate (Italian) Translated using Weblate (Chinese (Simplified)) Translated using Weblate (Hungarian) Translated using Weblate (Portuguese (Brazil)) Translated using Weblate (Ukrainian) Translated using Weblate (Spanish) Translated using Weblate (Hebrew) Translated using Weblate (Turkish) Search: Add hashtags to results (FreeTubeApp#3780) Implement right-to-left interface (FreeTubeApp#3970) ... # Conflicts: # src/renderer/components/ft-element-list/ft-element-list.vue # src/renderer/components/ft-prompt/ft-prompt.css # src/renderer/components/ft-toast/ft-toast.css # src/renderer/scss-partials/_ft-list-item.scss # src/renderer/views/Playlist/Playlist.scss
PikachuEXE · Sep 11, 2023 · 85eb2af · 85eb2af
2 parents 402af7a + 1c016bb
commit 85eb2af
Show file tree

Hide file tree

Showing 102 changed files with 1,372 additions and 788 deletions.
diff --git a/README.md b/README.md
@@ -97,7 +97,7 @@ These builds are maintained by the community. While they should be safe, downloa
 
 * Scoop (Windows Only): [Usage](https://github.com/ScoopInstaller/Scoop)
 
-* Snap: [Download](https://snapcraft.io/freetube-snap) and [Source Code](https://launchpad.net/freetube)
+* Snap: [Download](https://snapcraft.io/freetube) and [Source Code](https://git.launchpad.net/freetube)
 
 * Windows Package Manager (winget): [Usage](https://docs.microsoft.com/en-us/windows/package-manager/winget/)
 

diff --git a/package.json b/package.json
@@ -90,15 +90,15 @@
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "electron": "^22.3.18",
+    "electron": "^22.3.21",
     "electron-builder": "^24.6.4",
     "eslint": "^8.48.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
     "eslint-plugin-jsonc": "^2.9.0",
     "eslint-plugin-n": "^16.0.2",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-unicorn": "^48.0.1",
     "eslint-plugin-vue": "^9.17.0",

diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -12,16 +12,19 @@
 
 .routerView {
   flex: 1 1 0%;
-  margin: 18px 10px;
+  margin-block: 18px;
+  margin-inline: 10px;
 }
 
 .banner {
   width: 85%;
-  margin: 20px auto 0;
+  margin-block: 20px;
+  margin-inline: auto;
 }
 
 .banner-wrapper {
-  margin: 0 10px;
+  margin-block: 0;
+  margin-inline: 10px;
 }
 
 .flexBox {
@@ -45,16 +48,17 @@
 
 @media only screen and (max-width: 680px) {
   .routerView {
-    margin: 68px 8px 68px;
+    margin-block: 68px;
+    margin-inline: 8px;
   }
 
   .banner {
     width: 80%;
-    margin-top: 20px;
+    margin-block-start: 20px;
   }
 
   .flexBox {
-    margin-top: 60px;
-    margin-bottom: -75px;
+    margin-block-start: 60px;
+    margin-block-end: -75px;
   }
 }
diff --git a/src/renderer/App.js b/src/renderer/App.js
@@ -63,8 +63,9 @@ export default defineComponent({
     showProgressBar: function () {
       return this.$store.getters.getShowProgressBar
     },
-    isRightAligned: function () {
-      return this.locale === 'ar' || this.locale === 'he'
+    isLocaleRightToLeft: function () {
+      return this.locale === 'ar' || this.locale === 'fa' || this.locale === 'he' ||
+        this.locale === 'ur' || this.locale === 'yi' || this.locale === 'ku'
     },
     checkForUpdates: function () {
       return this.$store.getters.getCheckForUpdates
@@ -519,6 +520,11 @@ export default defineComponent({
 
     setLocale: function() {
       document.documentElement.setAttribute('lang', this.locale)
+      if (this.isLocaleRightToLeft) {
+        document.body.dir = 'rtl'
+      } else {
+        document.body.dir = 'ltr'
+      }
     },
 
     /**

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
@@ -4,7 +4,7 @@
     id="app"
     :class="{
       hideOutlines: hideOutlines,
-      rightAligned: isRightAligned
+      isLocaleRightToLeft: isLocaleRightToLeft
     }"
   >
     <top-nav ref="topNav" />

diff --git a/src/renderer/components/channel-about/channel-about.css b/src/renderer/components/channel-about/channel-about.css
@@ -1,6 +1,6 @@
 .about {
   background-color: var(--card-bg-color);
-  margin-top: 0;
+  margin-block-start: 0;
   padding: 10px;
   position: relative;
   z-index: 1;
@@ -34,9 +34,9 @@
 }
 
 .aboutDetails {
-  text-align: left;
+  text-align: start;
 }
 
 .aboutDetails th {
-  padding-right: 10px;
+  padding-inline-end: 10px;
 }
diff --git a/src/renderer/components/experimental-settings/experimental-settings.css b/src/renderer/components/experimental-settings/experimental-settings.css
@@ -1,6 +1,6 @@
 .experimental-warning {
   text-align: center;
   font-weight: bold;
-  padding-left: 4%;
-  padding-right: 4%
+  padding-inline-start: 4%;
+  padding-inline-end: 4%
 }
diff --git a/src/renderer/components/ft-age-restricted/ft-age-restricted.scss b/src/renderer/components/ft-age-restricted/ft-age-restricted.scss
@@ -3,7 +3,8 @@
 
   h2 {
     background-color: var(--card-bg-color);
-    padding: 10px 0;
+    padding-block: 10px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }
@@ -12,7 +13,8 @@
     background-color: var(--card-bg-color);
     font-size: 10em;
     height: 100%;
-    padding: 20px 0;
+    padding-block: 20px;
+    padding-inline: 0;
     text-align: center;
     width: 100%;
   }

diff --git a/src/renderer/components/ft-button/ft-button.css b/src/renderer/components/ft-button/ft-button.css
@@ -2,7 +2,8 @@
   font-family: 'Roboto', sans-serif;
   min-width: 100px;
   font-size: 0.9rem;
-  padding: 10px 20px;
+  padding-block: 10px;
+  padding-inline: 20px;
   box-sizing: border-box;
   cursor: pointer;
   display: inline-block;
@@ -36,8 +37,8 @@
   position: absolute;
   width: 100%;
   height: 100%;
-  top: 0;
-  left: 0;
+  inset-block-start: 0;
+  inset-inline-start: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
   background-repeat: no-repeat;

diff --git a/src/renderer/components/ft-card/ft-card.css b/src/renderer/components/ft-card/ft-card.css
@@ -1,8 +1,7 @@
 .ft-card {
   background-color: var(--card-bg-color);
   margin: 8px;
-	padding: 16px;
-	padding-top: 3px;
-	padding-bottom: 16px;
+  padding-block: 3px 16px;
+  padding-inline: 16px;
   box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }
diff --git a/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css b/src/renderer/components/ft-channel-bubble/ft-channel-bubble.css
@@ -34,16 +34,16 @@
 
 .selected {
   position: absolute;
-  top: 10px;
+  inset-block-start: 10px;
   background-color: rgba(0, 0, 0, 0.5);
 }
 
 .icon {
   color: #EEEEEE;
   font-size: 25px;
   position: absolute;
-  top: 12px;
-  left: 12px;
+  inset-block-start: 12px;
+  inset-inline-start: 12px;
 }
 
 .channelName {

diff --git a/src/renderer/components/ft-community-poll/ft-community-poll.css b/src/renderer/components/ft-community-poll/ft-community-poll.css
@@ -1,5 +1,5 @@
 .vote-count {
-  padding-bottom: 6px;
+  padding-block-end: 6px;
   font-size: smaller;
 }
 
@@ -9,21 +9,21 @@
   border-style: solid;
   border-width: 2px;
   display: block;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 10px;
-  left: 5px;
+  inset-inline-start: 5px;
   position: relative;
-  top: 8px;
+  inset-block-start: 8px;
   width: 10px;
 }
-  
+
 .filled-circle {
   border-radius: 50%;
   background-color: black;
-  float: left;
+  float: var(--float-left-ltr-rtl-value);
   height: 6px;
-  left: 2px;
-  top: 2px;
+  inset-inline-start: 2px;
+  inset-block-start: 2px;
   position: relative;
   width: 6px;
 }
@@ -32,11 +32,12 @@
   border-radius: 5px;
   border-style: solid;
   border-width: 2px;
-  padding: 5px 25px;
+  padding-block: 5px;
+  padding-inline: 25px;
 }
 
 .option {
-  padding-bottom: 10px;
+  padding-block-end: 10px;
 }
 
 .correct-option {

diff --git a/src/renderer/components/ft-community-post/ft-community-post.scss b/src/renderer/components/ft-community-post/ft-community-post.scss
@@ -22,7 +22,7 @@
   -webkit-border-radius: 50%;
   border-radius: 50%;
   height: 55px;
-  margin-right: 5px;
+  margin-inline-end: 5px;
   width: 55px;
 }
 
@@ -32,12 +32,14 @@
   .authorName {
     font-size: 15px;
     font-weight: bold;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 
   .publishedText {
     font-size: 15px;
-    margin: 5px 6px 0 5px;
+    margin-block: 5px 0;
+    margin-inline: 5px 6px;
   }
 }
 
@@ -51,24 +53,24 @@
   display: block;
   flex-direction: column;
   font-size: 15px;
-  margin-top: 4px;
+  margin-block-start: 4px;
   max-width: 210px;
-  text-align: left;
+  text-align: start;
 
   @media screen and (max-width: 680px) {
-    margin-left: 0;
-    text-align: left;
+    margin-inline-start: 0;
+    text-align: start;
   }
 
   .likeBar {
     border-radius: 4px;
     height: 8px;
-    margin-bottom: 4px;
+    margin-block-end: 4px;
   }
 
   .likeCount {
-    margin-left: 5px;
-    margin-right: 6px;
+    margin-inline-start: 5px;
+    margin-inline-end: 6px;
   }
 }
 
@@ -77,8 +79,8 @@
 
   .videoThumbnail {
     display: flex;
-    margin-bottom: auto;
-    margin-top: auto;
+    margin-block-end: auto;
+    margin-block-start: auto;
     position: relative;
     width: fit-content;
 
@@ -91,7 +93,7 @@
   }
 
   .playlistText {
-    margin-left: 10px;
+    margin-inline-start: 10px;
     width: 50%;
     word-wrap: break-word;
 
@@ -111,7 +113,7 @@
       color: var(--primary-text-color);
       display: flex;
       font-size: small;
-      padding-top: 10px;
+      padding-block-start: 10px;
       text-decoration-line: none;
       width: 100%;
     }
@@ -128,5 +130,5 @@
 
 .ft-list-item.grid {
   min-height: 0 !important;
-  padding-bottom: 20px;
+  padding-block-end: 20px;
 }
diff --git a/src/renderer/components/ft-element-list/ft-element-list.vue b/src/renderer/components/ft-element-list/ft-element-list.vue
@@ -4,7 +4,7 @@
   >
     <ft-list-lazy-wrapper
       v-for="(result, index) in data"
-      :key="`${dataType || result.type}-${result.videoId || result.playlistId || result.postId || result.id || result._id || result.authorId}-${index}-${result.lastUpdatedAt || 0}`"
+      :key="`${dataType || result.type}-${result.videoId || result.playlistId || result.postId || result.id || result._id || result.authorId || result.title}-${index}-${result.lastUpdatedAt || 0}`"
       appearance="result"
       :data="result"
       :data-type="dataType || result.type"