Merge pull request #684 from Anarios/develop

Develop

3 files changed, 104 insertions, 1 deletions

diff --git a/Extensions/combined/src/starRating.js b/Extensions/combined/src/starRating.js
new file mode 100644
index 0000000..5d98814
--- /dev/null
+++ b/Extensions/combined/src/starRating.js
@@ -0,0 +1,101 @@
+import { cLog } from "./utils";

+

+function createStarRating(rating, isMobile) {

+    let starRating = document.createElement('label');

+

+    let starSlider = document.createElement("input");

+    starSlider.setAttribute("class", "rating");

+    starSlider.setAttribute("max", "5");

+    starSlider.setAttribute("readonly", "");

+    starSlider.setAttribute("style", `--fill:rgb(255, 215, 0);--value:${rating.toString()};};background-color: transparent;`);

+    starSlider.setAttribute("type", "range");

+    

+    starRating.appendChild(starSlider);

+    

+    let YTLikeButton;

+

+    if (isMobile){

+      YTLikeButton = document.querySelector('#app > div.page-container > ytm-watch > ytm-single-column-watch-next-results-renderer > ytm-slim-video-metadata-section-renderer > ytm-slim-video-action-bar-renderer > div > ytm-slim-metadata-toggle-button-renderer:nth-child(1)');

+    } else {

+      YTLikeButton = document.querySelector('#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1)');

+    }

+    

+    YTLikeButton.insertAdjacentElement('afterend', starRating);

+

+    try {

+      let YTBar = document.querySelector('#ryd-bar-container');

+      YTBar.setAttribute("style", "width: 190%; height: 2px;");

+    }

+    catch(err) {

+      cLog("RateBar Not Present");

+    }

+

+

+

+    let style = `<style>

+

+.rating {

+    --dir: right;

+    --fill: gold;

+    --fillbg: rgba(100, 100, 100, 0.15);

+    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');

+    --stars: 5;

+    --starSize: 2.8rem;

+    --symbol: var(--star);

+    --value: 1;

+    --w: calc(var(--stars) * var(--starSize));

+    --x: calc(100% * (var(--value) / var(--stars)));

+    block-size: var(--starSize);

+    inline-size: var(--w);

+    position: relative;

+    touch-action: manipulation;

+    -webkit-appearance: none;

+}

+

+[dir="rtl"] .rating {

+    --dir: left;

+}

+

+.rating::-moz-range-track {

+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));

+    block-size: 100%;

+    mask: repeat left center/var(--starSize) var(--symbol);

+}

+

+.rating::-webkit-slider-runnable-track {

+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));

+    block-size: 100%;

+    mask: repeat left center/var(--starSize) var(--symbol);

+    -webkit-mask: repeat left center/var(--starSize) var(--symbol);

+}

+

+.rating::-moz-range-thumb {

+    height: var(--starSize);

+    opacity: 0;

+    width: var(--starSize);

+}

+

+.rating::-webkit-slider-thumb {

+    height: var(--starSize);

+    opacity: 0;

+    width: var(--starSize);

+    -webkit-appearance: none;

+}

+

+.rating,

+.rating-label {

+    display: block;

+    font-family: ui-sans-serif, system-ui, sans-serif;

+}

+

+.rating-label {

+    margin-block-end: 1rem;

+}

+

+</style>`;

+

+document.head.insertAdjacentHTML("beforeend", style);

+

+  }

+

+  export { createStarRating };

diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index df9d561..7160903 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -8,6 +8,7 @@ import {
   getColorFromTheme,
 } from "./utils";
 import { localize } from "./utils";
+import { createStarRating } from "./starRating";
 
 //TODO: Do not duplicate here and in ryd.background.js
 const apiUrl = "https://returnyoutubedislikeapi.com";
@@ -199,6 +200,7 @@ function processResponse(response, storedData) {
       getDislikeButton().style.color = getColorFromTheme(false);
     }
   }
+  createStarRating(response.rating, isMobile());
 }
 
 // Tells the user if the API is down
diff --git a/Website/_locales/tr.ts b/Website/_locales/tr.ts
index c5986c1..f064e10 100644
--- a/Website/_locales/tr.ts
+++ b/Website/_locales/tr.ts
@@ -81,7 +81,7 @@ export default {
         bullet4: 'Dislike sayımı sizinle paylaşabilir miyim?',
         bullet4text: 'Çok yakında evet. İçerik üreticilerinin dislike sayıları için doğrulanabilirliğini paylaşabilmeleri amacıyla Oauth ya da sınırlı bir kapsamda farklı bir salt okunur API kullanmayı düşünüyoruz.',
         bullet5: 'Hangi verileri topluyorsunuz ve bunlar nasıl işleniyor?',
-        bullet5text: 'Uzantı, yalnızca izlediğiniz videonun IP adresi veya videonun ID\'si gibi düzgün çalışması için kesinlikle gerekli olan verileri toplar. Verileriniz asla 3. taraflara satılmayacaktır. Güvenliği ve gizliliği nasıl ele aldığımız hakkında daha fazla bilgi için <a href="https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/SECURITY-FAQ.md">security FAQ</a>'ya gidin.',
+        bullet5text: 'Uzantı, yalnızca izlediğiniz videonun IP adresi veya videonun ID\'si gibi düzgün çalışması için kesinlikle gerekli olan verileri toplar. Verileriniz asla 3. taraflara satılmayacaktır. Güvenliği ve gizliliği nasıl ele aldığımız hakkında daha fazla bilgi için <a href="https://github.com/Anarios/return-youtube-dislike/blob/main/Docs/SECURITY-FAQ.md">security FAQ</a>\'ya gidin.',
         bullet6: 'API/Yazılım(Backend) nasıl çalışıyor?',
         bullet6text: 'Yazılım, YouTube API\'sinin dislike sayısını ve uzantı kullanıcılarının like/dislike sayısı sonuçların genişletilmesinin döndürmeye devam ettiği zamana ait arşivlenmiş verileri kullanır. Yakın zamanda içerik üreticilerin dislike sayısını kolay ve güvenli bir şekilde göndermelerine izin vereceğiz ve ArchiveTeam\'in arşivlenmiş verilerini (4,56 milyar video) veri tabanımıza ekleyeceğiz. Ayrıca konu ile ilgili videoyu da izleyebilirsiniz.',
         bullet7: 'Dislike sayısı neden \'DISLIKES DISABLED\'(DISLIKE\'LAR AKTİF DEĞİL) olarak gözüküyor?',