diff options
author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-07-20 01:58:20 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-20 01:58:20 +0300 |
commit | 3fe2a78757687128f9fc02f91d9dc8cbfd908027 (patch) | |
tree | 363a41bc367a98afd32591f93007602f0deeed8f /Extensions | |
parent | 10f4da6c5ce2f6414e32f143f8bf93887e7aede9 (diff) | |
parent | 4bf4d1a1e64a71bb4478837c12d39a011f165c3e (diff) |
Merge branch 'develop' into revert-683-revert-644-patch-1
Diffstat (limited to 'Extensions')
-rw-r--r-- | Extensions/UserScript/Return Youtube Dislike.user.js | 89 | ||||
-rw-r--r-- | Extensions/combined/_locales/de/messages.json | 34 | ||||
-rw-r--r-- | Extensions/combined/_locales/en/messages.json | 78 | ||||
-rw-r--r-- | Extensions/combined/_locales/es/messages.json | 106 | ||||
-rw-r--r-- | Extensions/combined/_locales/fr/messages.json | 48 | ||||
-rw-r--r-- | Extensions/combined/_locales/gr/messages.json | 33 | ||||
-rw-r--r-- | Extensions/combined/_locales/it/messages.json | 41 | ||||
-rw-r--r-- | Extensions/combined/_locales/ja/messages.json | 32 | ||||
-rw-r--r-- | Extensions/combined/_locales/pt_BR/messages.json | 44 | ||||
-rw-r--r-- | Extensions/combined/_locales/ru/messages.json | 30 | ||||
-rw-r--r-- | Extensions/combined/popup.css | 67 | ||||
-rw-r--r-- | Extensions/combined/popup.html | 70 | ||||
-rw-r--r-- | Extensions/combined/popup.js | 50 | ||||
-rw-r--r-- | Extensions/combined/ryd.background.js | 41 | ||||
-rw-r--r-- | Extensions/combined/src/bar.js | 113 | ||||
-rw-r--r-- | Extensions/combined/src/events.js | 13 | ||||
-rw-r--r-- | Extensions/combined/src/starRating.js | 101 | ||||
-rw-r--r-- | Extensions/combined/src/state.js | 30 | ||||
-rw-r--r-- | Extensions/combined/src/utils.js | 46 |
19 files changed, 916 insertions, 150 deletions
diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js index 476561b..453c56e 100644 --- a/Extensions/UserScript/Return Youtube Dislike.user.js +++ b/Extensions/UserScript/Return Youtube Dislike.user.js @@ -33,6 +33,7 @@ const extConfig = { colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan) numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered) numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers) + tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip. numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent) // END USER OPTIONS }; @@ -203,10 +204,10 @@ function getLikeCountFromButton() { if (isShorts()) { //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results. //It should be possible to fix this function, but it's not critical to showing the dislike count. - return 0; + return false; } let likesStr = getLikeButton() - .querySelector("button") + .querySelector("yt-formatted-string#text") .getAttribute("aria-label") .replace(/\D/g, ""); return likesStr.length > 0 ? parseInt(likesStr) : false; @@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); + + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_like": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + break; + case "dash_dislike": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%` + break; + case "both": + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%` + break; + case "only_like": + tooltipInnerHTML = `${likePercentage}%` + break; + case "only_dislike": + tooltipInnerHTML = `${dislikePercentage}%` + break; + default: + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` + } + + if (!rateBar && !isMobile) { let colorLikeStyle = ""; let colorDislikeStyle = ""; @@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) { colorLikeStyle = "; background-color: " + getColorFromTheme(true); colorDislikeStyle = "; background-color: " + getColorFromTheme(false); } - + document.getElementById("menu-container").insertAdjacentHTML( "beforeend", ` @@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) { </div> </div> <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> - <!--css-build:shady-->${likes.toLocaleString()} / ${dislikes.toLocaleString()} + <!--css-build:shady-->${tooltipInnerHTML} </tp-yt-paper-tooltip> </div> ` @@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) { document.querySelector( "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - + ).innerHTML = tooltipInnerHTML; + if (extConfig.coloredBar) { document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor = getColorFromTheme(false); @@ -372,6 +399,12 @@ function likeClicked() { createRateBar(likesvalue, dislikesvalue); previousState = 1; } + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } @@ -393,6 +426,12 @@ function dislikeClicked() { setDislikes(numberFormat(dislikesvalue)); createRateBar(likesvalue, dislikesvalue); previousState = 2; + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } } @@ -434,32 +473,38 @@ function roundDown(num) { } function numberFormat(numberState) { - let userLocales; - try { - userLocales = new URL( - Array.from(document.querySelectorAll("head > link[rel='search']")) - ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) - ?.getAttribute("href") - )?.searchParams?.get("locale"); - } catch { - userLocales = document.documentElement.lang; - } - let numberDisplay; if (extConfig.numberDisplayRoundDown === false) { numberDisplay = numberState; } else { numberDisplay = roundDown(numberState); } - return getNumberFormatter(extConfig.numberDisplayFormat, userLocales).format( + return getNumberFormatter(extConfig.numberDisplayFormat).format( numberDisplay ); } -function getNumberFormatter(optionSelect, userLocales) { +function getNumberFormatter(optionSelect) { + let userLocales; + if (document.documentElement.lang) { + userLocales = document.documentElement.lang; + } else if (navigator.language) { + userLocales = navigator.language; + } else { + try { + userLocales = new URL( + Array.from(document.querySelectorAll("head > link[rel='search']")) + ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) + ?.getAttribute("href") + )?.searchParams?.get("locale"); + } catch { + cLog('Cannot find browser locale. Use en as default for number formatting.'); + userLocales = 'en'; + } + } + let formatterNotation; let formatterCompactDisplay; - switch (optionSelect) { case "compactLong": formatterNotation = "compact"; @@ -476,7 +521,7 @@ function getNumberFormatter(optionSelect, userLocales) { } const formatter = Intl.NumberFormat( - document.documentElement.lang || userLocales || navigator.language, + userLocales, { notation: formatterNotation, compactDisplay: formatterCompactDisplay, @@ -516,7 +561,7 @@ function getColorFromTheme(voteIsLike) { function setEventListeners(evt) { let jsInitChecktimer; - function checkForJS_Finish(check) { + function checkForJS_Finish() { console.log(); if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) { const buttons = getButtons(); diff --git a/Extensions/combined/_locales/de/messages.json b/Extensions/combined/_locales/de/messages.json index 9250528..9b0a7ba 100644 --- a/Extensions/combined/_locales/de/messages.json +++ b/Extensions/combined/_locales/de/messages.json @@ -2,7 +2,6 @@ "extensionName": { "message": "Return YouTube Dislike" }, - "extensionNameBeta": { "message": "Return YouTube Dislike Beta" }, @@ -50,5 +49,38 @@ }, "customNumberFormats": { "message": "Benutzerdefinierte Zahlenformate" + }, + "considerDonating": { + "message": "Das Einzige, was die Erweiterung am Laufen hält, sind Ihre Spenden, bitte erwägen Sie, das Projekt zu unterstützen." + }, + "roundNumbers": { + "message": "Zeige abgerundete Zahlen" + }, + "roundNumbersHover": { + "message": "Zahlen abrunden (Standardverhalten von YouTube)." + }, + "reformatLikes": { + "message": "Wie Zahlen neu formatieren" + }, + "reformatLikesHover": { + "message": "Machen Sie das Format der Vorlieben und Abneigungen konsistent." + }, + "numberFormat": { + "message": "Zahlenformat:" + }, + "colorizeRatio": { + "message": "Verhältnisbalken einfärben" + }, + "colorizeRatioHover": { + "message": "Benutzerdefinierte Farben für die Verhältnisleiste verwenden." + }, + "colorizeThumbs": { + "message": "Buttons einfärben" + }, + "colorizeThumbsHover": { + "message": "Benutzerdefinierte Farben für die Schaltflächensymbole verwenden." + }, + "colorTheme": { + "message": "Farbschema:" } } diff --git a/Extensions/combined/_locales/en/messages.json b/Extensions/combined/_locales/en/messages.json index 28c476c..a5ba9c0 100644 --- a/Extensions/combined/_locales/en/messages.json +++ b/Extensions/combined/_locales/en/messages.json @@ -23,6 +23,9 @@ "linkHelp": { "message": "Help" }, + "linkChangelog": { + "message": "Change Log" + }, "legendSettings": { "message": "Settings" }, @@ -30,16 +33,55 @@ "message": "Disable like/dislike submission" }, "textLikesDisabled": { - "message": "disabled by owner" + "message": "Disabled by Owner" }, "textSettingsHover": { "message": "Stops counting your likes and dislikes." }, + "textRoundingNumbers": { + "message": "Round down like/dislike stats (default YouTube behavior)" + }, + "textRoundingNumbersHover": { + "message": "Show rounded down stats." + }, + "textConsistentFormat": { + "message": "Make likes and dislikes format consistent" + }, + "textConsistentFormatHover": { + "message": "Re-format like numbers." + }, + "textNumberFormat": { + "message": "Number format:" + }, + "textColorizeRatioBar": { + "message": "Colorize ratio bar" + }, + "textColorizeRatioBarHover": { + "message": "Use custom colors for ratio bar." + }, + "textColorizeThumbs": { + "message": "Colorize thumbs" + }, + "textColorizeThumbsHover": { + "message": "Use custom colors for thumb icons." + }, + "textColorTheme": { + "message": "Color theme:" + }, + "textColorTheme1": { + "message": "Classic" + }, + "textColorTheme2": { + "message": "Accessible" + }, + "textColorTheme3": { + "message": "Neon" + }, "textTempUnavailable": { - "message": "temporarily unavailable" + "message": "Temporarily Unavailable" }, "textUpdate": { - "message": "update to" + "message": "Update to" }, "version30installed": { "message": "Version 3.0.0.1 installed" @@ -58,5 +100,35 @@ }, "considerDonating": { "message": "The only thing that keeps the extension running is your donations, please consider supporting the project." + }, + "roundNumbers": { + "message": "Show rounded down numbers" + }, + "roundNumbersHover": { + "message": "Round down numbers (default YouTube behavior)." + }, + "reformatLikes": { + "message": "Re-format like numbers" + }, + "reformatLikesHover": { + "message": "Make likes and dislikes format consistent." + }, + "numberFormat": { + "message": "Number format:" + }, + "colorizeRatio": { + "message": "Colorize ratio bar" + }, + "colorizeRatioHover": { + "message": "Use custom colors for the ratio bar." + }, + "colorizeThumbs": { + "message": "Colorize thumbs" + }, + "colorizeThumbsHover": { + "message": "Use custom colors for the thumb icons." + }, + "colorTheme": { + "message": "Color theme:" } } diff --git a/Extensions/combined/_locales/es/messages.json b/Extensions/combined/_locales/es/messages.json index efb95da..121c0ee 100644 --- a/Extensions/combined/_locales/es/messages.json +++ b/Extensions/combined/_locales/es/messages.json @@ -1,15 +1,15 @@ { "extensionName": { - "message": "Regresar los Dislikes de YouTube" + "message": "Return YouTube Dislike" }, "extensionNameBeta": { "message": "Return YouTube Dislike Beta" }, "extensionDesc": { - "message": "Regresa la posibilidad de ver los dislikes" + "message": "Recupera la característica de los «dislikes» («No me gusta»)" }, "textDeveloper": { - "message": "por Dmitry Selivanov y la Comunidad" + "message": "por Dmitry Selivanov y la comunidad" }, "linkWebsite": { "message": "Página web" @@ -23,16 +23,112 @@ "linkHelp": { "message": "Ayuda" }, + "linkChangelog": { + "message": "Historial de cambios" + }, "legendSettings": { "message": "Ajustes" }, "textSettings": { - "message": "Desactivar los dislikes" + "message": "Desactivar envío de votos" + }, + "textLikesDisabled": { + "message": "desactivado por el propietario" }, "textSettingsHover": { - "message": "Dejar de contar los dislikes." + "message": "Deja de contar tus «Me gusta» y «No me gusta»." + }, + "textRoundingNumbers": { + "message": "Redondear cifras (comportamiento original de YouTube)" + }, + "textRoundingNumbersHover": { + "message": "Muestra las estadísticas redondeadas." + }, + "textConsistentFormat": { + "message": "Unificar formato de votos" + }, + "textConsistentFormatHover": { + "message": "Cambia el formato de las cifras de «Me gusta» y «No me gusta»." + }, + "textNumberFormat": { + "message": "Formato de cifras:" + }, + "textColorizeRatioBar": { + "message": "Cambiar color de barra de votos" + }, + "textColorizeRatioBarHover": { + "message": "Utiliza colores personalizados para la barra de votos." + }, + "textColorizeThumbs": { + "message": "Cambiar color de iconos de pulgares" + }, + "textColorizeThumbsHover": { + "message": "Utiliza colores personalizados para los iconos de los pulgares." + }, + "textColorTheme": { + "message": "Esquema de colores:" + }, + "textColorTheme1": { + "message": "Clásico" + }, + "textColorTheme2": { + "message": "Accesible" + }, + "textColorTheme3": { + "message": "Neón" + }, + "textTempUnavailable": { + "message": "no disponible temporalmente" }, "textUpdate": { "message": "actualizar a" + }, + "version30installed": { + "message": "Versión 3.0.0.1 instalada" + }, + "whatsnew": { + "message": "Novedades" + }, + "shortsSupport": { + "message": "Soporte de YouTube Shorts" + }, + "customColors": { + "message": "Colores personalizados para la barra y los botones que no me gustan" + }, + "customNumberFormats": { + "message":"Formatos de números personalizados" + }, + "considerDonating": { + "message": "Lo único que mantiene la extensión en funcionamiento son sus donaciones, considere apoyar el proyecto." + }, + "roundNumbers": { + "message": "Mostrar números redondeados hacia abajo" + }, + "roundNumbersHover": { + "message": "Redondear números hacia abajo (comportamiento predeterminado de YouTube)." + }, + "reformatLikes": { + "message": "Reformatear como números" + }, + "reformatLikesHover": { + "message": "Haz que el formato de like y dislike sea consistente." + }, + "numberFormat": { + "message": "Formato de número:" + }, + "colorizeRatio": { + "message": "Colorear barra de relación" + }, + "colorizeRatioHover": { + "message": "Usar colores personalizados para la barra de proporción." + }, + "colorizeThumbs": { + "message": "Colorear los botones likes y dislike" + }, + "colorizeThumbsHover": { + "message": "Usar colores personalizados para los íconos de los botones." + }, + "colorTheme": { + "message": "Combinación de colores:" } } diff --git a/Extensions/combined/_locales/fr/messages.json b/Extensions/combined/_locales/fr/messages.json index 46105d0..95d6193 100644 --- a/Extensions/combined/_locales/fr/messages.json +++ b/Extensions/combined/_locales/fr/messages.json @@ -40,5 +40,53 @@ }, "textUpdate": { "message": "mettre à jour vers" + }, + "version30installed": { + "message": "Version 3.0.0.1 installée" + }, + "whatsnew": { + "message": "Quoi de neuf" + }, + "shortsSupport": { + "message": "Prise en charge des YouTube Shorts" + }, + "customColors": { + "message": "Couleurs personnalisées pour la barre du dislike et les boutons" + }, + "customNumberFormats": { + "message": "Formats numériques personnalisés" + }, + "considerDonating": { + "message": "La seule chose qui permet à l'extension de fonctionner est vos dons, veuillez envisager de soutenir le projet." + }, + "roundNumbers": { + "message": "Afficher les nombres arrondis" + }, + "roundNumbersHover": { + "message": "Arrondir les nombres à la baisse (comportement par défaut de YouTube)." + }, + "reformatLikes": { + "message": "Formater le nombre de likes" + }, + "reformatLikesHover": { + "message": "Rend la valeur des statistiques plus cohérente." + }, + "numberFormat": { + "message": "Format numérique:" + }, + "colorizeRatio": { + "message": "Coloriser la barre de ratio" + }, + "colorizeRatioHover": { + "message": "Utilisez des couleurs personnalisées pour la barre de ratio." + }, + "colorizeThumbs": { + "message": "Mettre en couleur les boutons like et dislike" + }, + "colorizeThumbsHover": { + "message": "Utiliser des couleurs personnalisées pour les boutons like et dislike." + }, + "colorTheme": { + "message": "Schéma de couleur:" } } diff --git a/Extensions/combined/_locales/gr/messages.json b/Extensions/combined/_locales/gr/messages.json index dc548e6..269504c 100644 --- a/Extensions/combined/_locales/gr/messages.json +++ b/Extensions/combined/_locales/gr/messages.json @@ -49,5 +49,38 @@ }, "customNumberFormats": { "message": "Προσαρμοζόμενη μορφή αριθμών." + }, + "considerDonating": { + "message": "Το μόνο πράγμα που διατηρεί την επέκταση σε λειτουργία είναι οι δωρεές σας, σκεφτείτε να υποστηρίξετε το έργο." + }, + "roundNumbers": { + "message": "Εμφάνιση στρογγυλεμένων αριθμών" + }, + "roundNumbersHover": { + "message": "Στρογγυλοποιήστε την τιμή μέτρησης (αυτή είναι η προεπιλεγμένη επιλογή του YouTube)." + }, + "reformatLikes": { + "message": "Μορφοποίηση του αριθμού των likes" + }, + "reformatLikesHover": { + "message": "Κάνει την αξία των στατιστικών πιο συνεπή." + }, + "numberFormat": { + "message": "Αριθμητική μορφή" + }, + "colorizeRatio": { + "message": "Χρωματίστε τη γραμμή dislikes" + }, + "colorizeRatioHover": { + "message": "Χρωματίστε τη γραμμή dislikes με προσαρμοσμένα χρώματα." + }, + "colorizeThumbs": { + "message": "Χρωματίστε τα κουμπιά" + }, + "colorizeThumbsHover": { + "message": "Χρωματίστε τα κουμπιά likes και dislikes με προσαρμοσμένα χρώματα." + }, + "colorTheme": { + "message": "Χρωματικός συνδυασμός:" } } diff --git a/Extensions/combined/_locales/it/messages.json b/Extensions/combined/_locales/it/messages.json index dbcca07..adf6dcb 100644 --- a/Extensions/combined/_locales/it/messages.json +++ b/Extensions/combined/_locales/it/messages.json @@ -9,7 +9,7 @@ "message": "Ripristina la possibilità di vedere i dislikes" }, "textDeveloper": { - "message": "di Dmitry Selivanov e la Community" + "message": "grazie a Dmitry Selivanov e alla Comunità" }, "linkWebsite": { "message": "Sito web" @@ -27,10 +27,10 @@ "message": "Impostazioni" }, "textSettings": { - "message": "Disabilita l'invio di like/dislike" + "message": "Disabilita l'invio dei like e dei dislike" }, "textSettingsHover": { - "message": "Interrompe il conteggio dei tuoi likes e dislikes." + "message": "Interrompe il conteggio dei tuoi likes e dislikes da parte dell'estensione." }, "textUpdate": { "message": "aggiorna a" @@ -39,7 +39,7 @@ "message": "Versione 3.0.0.1 installata" }, "whatsnew": { - "message": "Cosa c'è di nuovo" + "message": "Quali sono le novità" }, "shortsSupport": { "message": "Supporto per YouTube Shorts" @@ -49,5 +49,38 @@ }, "customNumberFormats": { "message": "Formati numerici personalizzati" + }, + "considerDonating": { + "message": "Le uniche cosa che tengono in piedi il progetto sono le vostre donazioni. Per favore, considera di effettuare una donazione per supportarci. Grazie." + }, + "roundNumbers": { + "message": "Mostra i numeri arrotondati" + }, + "roundNumbersHover": { + "message": "Arrotonda il valore del conteggio (questa è l'opzione predefinita di YouTube)." + }, + "reformatLikes": { + "message": "Formatta il numero di like" + }, + "reformatLikesHover": { + "message": "Rende il valore delle statistiche più consistente." + }, + "numberFormat": { + "message": "Formato numerico" + }, + "colorizeRatio": { + "message": "Colora la barra dei dislike" + }, + "colorizeRatioHover": { + "message": "Colora la barra dei dislike con colori personalizzati." + }, + "colorizeThumbs": { + "message": "Colora i pulsanti" + }, + "colorizeThumbsHover": { + "message": "Colora i pulsanti dei like e dei dislike con colori personalizzati." + }, + "colorTheme": { + "message": "Schema colori:" } } diff --git a/Extensions/combined/_locales/ja/messages.json b/Extensions/combined/_locales/ja/messages.json index baf7d7f..9a84fae 100644 --- a/Extensions/combined/_locales/ja/messages.json +++ b/Extensions/combined/_locales/ja/messages.json @@ -57,6 +57,36 @@ "message": "評価数の表示形式のカスタマイズ" }, "considerDonating": { - "message": "この拡張機能を存続させることができるのは、皆様からの寄付だけです。" + "message": "この拡張機能を存続させることができるのは,皆様からの寄付だけです。" + }, + "roundNumbers":{ + "message":"四捨五入された数値を表示" + }, + "roundNumbersHover":{ + "message": "カウント値を四捨五入します(これはYouTubeのデフォルトオプションです)。" + }, + "reformatLikes":{ + "message":"いいねの数をフォーマットする" + }, + "reformatLikesHover":{ + "message":"統計値の一貫性を高めます。" + }, + "numberFormat":{ + "message":"数値形式" + }, + "colorizeRatio":{ + "message":"嫌いなバーに色を付ける" + }, + "colorizeRatioHover":{ + "message":"嫌いなバーをカスタムカラーで色付けします。" + }, + "colorizeThumbs":{ + "message":"ボタンに色を付ける" + }, + "colorizeThumbsHover":{ + "message":"カスタムカラーのボタンの色が好きで嫌いです。" + }, + "colorTheme":{ + "message": "配色:" } } diff --git a/Extensions/combined/_locales/pt_BR/messages.json b/Extensions/combined/_locales/pt_BR/messages.json index 26f40f3..fa6c75a 100644 --- a/Extensions/combined/_locales/pt_BR/messages.json +++ b/Extensions/combined/_locales/pt_BR/messages.json @@ -1,21 +1,21 @@ { "extensionName": { - "message": "Devolver Dislikes do YouTube" + "message": "Voltar Dislikes do YouTube" }, "extensionNameBeta": { - "message": "Return YouTube Dislike Beta" + "message": "Voltar Dislikes do YouTube Beta" }, "extensionDesc": { - "message": "A capacidade de ver os retornos de não gostos" + "message": "Voltar os Deslikes do YouTube" }, "textDeveloper": { - "message": "por Dmitry Selivanov e a Comunidade" + "message": "por Dmitry Selivanov e Comunidade" }, "linkWebsite": { "message": "Website" }, "linkFAQ": { - "message": "FAQ" + "message": "Perguntas Frequentes" }, "linkDonate": { "message": "Doe" @@ -24,15 +24,39 @@ "message": "Ajuda" }, "legendSettings": { - "message": "Ajustes" + "message": "Configurações" }, "textSettings": { - "message": "Desaproveitar as aversões" + "message": "Desativar envio de Curtidas/Não Curtidas" + }, + "textLikesDisabled": { + "message": "Desativado pelo proprietário" }, "textSettingsHover": { - "message": "Pare de contar as antipatias." + "message": "Parar de contar suas curtidas e não curtidas." + }, + "textTempUnavailable": { + "message": "Temporariamente indisponível" }, "textUpdate": { - "message": "atualização para" + "message": "Atualizar para" + }, + "version30installed": { + "message": "Versão 3.0.0.1 instalada" + }, + "whatsnew": { + "message": "O que há de novo?" + }, + "shortsSupport": { + "message": "Suporte para Shorts" + }, + "customColors": { + "message": "Cores personalizadas para barra de não curtidas e botões" + }, + "customNumberFormats": { + "message": "Formato de números personalizados" + }, + "considerDonating": { + "message": "A única coisa que mantém a extensão funcionando são suas doações, considere apoiar o projeto." } -} +}
\ No newline at end of file diff --git a/Extensions/combined/_locales/ru/messages.json b/Extensions/combined/_locales/ru/messages.json index 6af9141..c275bf9 100644 --- a/Extensions/combined/_locales/ru/messages.json +++ b/Extensions/combined/_locales/ru/messages.json @@ -52,5 +52,35 @@ }, "considerDonating": { "message": "Единственный источник доходов позволяющий расширению продолжать работу - ваши пожертвования. Пожалуйста, поддержите нас и помогите нам развиваться." + }, + "roundNumbers": { + "message": "Показывать округленные числа" + }, + "roundNumbersHover": { + "message": "Округлить значение счетчика (это параметр YouTube по умолчанию)." + }, + "reformatLikes": { + "message": "Форматировать количество лайков" + }, + "reformatLikesHover": { + "message": "Делает значение статистики более последовательным." + }, + "numberFormat": { + "message": "Числовой формат" + }, + "colorizeRatio": { + "message": "Раскрасьте полосу неприязни" + }, + "colorizeRatioHover": { + "message": "Раскрасьте полосу неприязни собственными цветами." + }, + "colorizeThumbs": { + "message": "Раскрасьте кнопки" + }, + "colorizeThumbsHover": { + "message": "Раскрасьте кнопки нравится и не нравится с помощью пользовательских цветов." + }, + "colorTheme": { + "message": "Цветовая схема:" } } diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index dfe94cb..2ff8516 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -15,7 +15,8 @@ html, body { background-color: var(--background); color: var(--white); - min-width: 300px; + min-width: 310px; + min-height: 350px; padding: 0.5em; font-family: "Roboto", Arial, Helvetica, sans-serif; font-size: 14px; @@ -68,9 +69,12 @@ button:hover { border-radius: 0.25rem; } -.switch:before { + +.switch::before, .label-with-hover-tip::before { content: attr(data-hover); visibility: hidden; + opacity: 0; + transition: visibility 0.1s linear, opacity 0.1s linear; width: 250px; background-color: var(--secondary); border-radius: 0.5rem; @@ -82,8 +86,27 @@ button:hover { top: 160%; } -.switch:hover:before { + +.switch:hover::before, .label-with-hover-tip:hover::before { visibility: visible; + opacity: 1; +} + +.fade-in { + opacity: 1; + animation-name: fadeInOpacity; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: 2s; +} + +@keyframes fadeInOpacity { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } #advancedToggle { @@ -123,6 +146,32 @@ button:hover { border: 2px solid var(--secondary); border-radius: 0.5rem; padding: 1rem; + overflow-y: auto; + overflow-x: hidden; +} + +::-webkit-scrollbar { + width: 1rem; +} + +::-webkit-scrollbar-track { + background: #111; /* color of the tracking area */ +} + +::-webkit-scrollbar-thumb { + background-color: #333; /* color of the scroll thumb */ + border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */ + border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-left: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-top: 0.25rem solid #111; /* creates padding around scroll thumb */ +} + +::-webkit-scrollbar-thumb:hover { + background-color: #f22; /* color of the scroll thumb */ + border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */ + border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-left: 0.25rem solid #111; /* creates padding around scroll thumb */ + border-top: 0.25rem solid #111; /* creates padding around scroll thumb */ } #advancedLegend { @@ -142,6 +191,14 @@ button:hover { margin-bottom: 1rem; } +.label-with-hover-tip { + position: relative; + display: inline-block; + width: 80px; + height: 17px; + margin-bottom: 1rem; +} + .switch:last-of-type { margin-bottom: 0; } @@ -162,7 +219,7 @@ button:hover { border-radius: 34px; } -.slider:before { +.slider::before { position: absolute; content: ""; height: 13px; @@ -178,7 +235,7 @@ input:checked + .slider { background: var(--accent); } -input:checked + .slider:before { +input:checked + .slider::before { transform: translateX(13px); background: var(--primary); } diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 7d39246..8318901 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -44,7 +44,7 @@ </button> <br> <button style="margin-top: 0.3em" id="link_changelog" title="__MSG_linkChangelog__"> - Change Log + __MSG_linkChangelog__ </button> <br/> @@ -94,28 +94,28 @@ __MSG_legendSettings__ </legend> - <label class="switch" data-hover="__MSG_textSettingsHover__"> + <label class="switch" data-hover="Stop counting your likes and dislikes"> <input type="checkbox" id="disable_vote_submission"/> - <span class="slider"/> - <span class="switchLabel" title="__MSG_textSettings__" - >__MSG_textSettings__</span - > + <span class="slider" /> + <span class="switchLabel" title="__MSG_textSettings__"> + __MSG_textSettings__ + </span> </label> <br/> - <label class="switch" data-hover="Round down numbers (default YouTube behavior)"> + <label class="switch" data-hover="__MSG_roundNumbersHover__"> <input type="checkbox" id="number_round_down"/> - <span class="slider"/> - <span class="switchLabel">Show rounded down numbers</span> + <span class="slider" /> + <span class="switchLabel">__MSG_roundNumbers__</span> </label> <br/> - <label class="switch" data-hover="Make likes and dislikes format consistent"> + <label class="switch" data-hover="__MSG_reformatLikesHover__"> <input type="checkbox" id="number_reformat_likes"/> - <span class="slider"/> - <span class="switchLabel">Re-format like numbers</span> + <span class="slider" /> + <span class="switchLabel">__MSG_reformatLikes__</span> </label> <br/> <div class="custom-select"> - <label for="number_format">Number format:</label> + <label for="number_format">__MSG_numberFormat__</label> <select name="number_format" id="number_format"> <option value="compactShort" id="number_format_compactShort"></option> <option value="compactLong" id="number_format_compactLong"></option> @@ -124,26 +124,24 @@ </div> <br/> <div class="custom-select"> - <label class="switch" data-hover="Use custom colors for ratio bar."> + <label class="switch" data-hover="__MSG_colorizeRatioHover__"> <input type="checkbox" id="colored_bar"/> - <span class="slider"/> - <span class="switchLabel">Colorize ratio bar</span> + <span class="slider" /> + <span class="switchLabel">__MSG_colorizeRatio__</span> </label> </div> - <label class="switch" data-hover="Use custom colors for thumb icons."> + <label class="switch" data-hover="__MSG_colorizeThumbsHover__"> <input type="checkbox" id="colored_thumbs"/> - <span class="slider"/> - <span class="switchLabel">Colorize thumbs</span> + <span class="slider" /> + <span class="switchLabel">__MSG_colorizeThumbs__</span> </label> <br/> <div class="custom-select"> - <label for="color_theme">Color theme:</label> + <label for="color_theme">__MSG_colorTheme__</label> <select name="color_theme" id="color_theme"> - <option value="classic" id="color_theme_classic">Classic</option> - <option value="accessible" id="color_theme_accessible"> - Accessible - </option> - <option value="neon" id="color_theme_neon">Neon</option> + <option value="classic" id="color_theme_classic">"__MSG_textColorTheme1__"</option> + <option value="accessible" id="color_theme_accessible">"__MSG_textColorTheme2__"</option> + <option value="neon" id="color_theme_neon">"__MSG_textColorTheme3__"</option> </select> <span id="color_theme_example_like" @@ -153,8 +151,7 @@ width: 1em; height: 1em; " - > </span - > + > </span> <span id="color_theme_example_dislike" style=" @@ -163,8 +160,23 @@ width: 1em; height: 1em; " - > </span - > + > </span> + </div> + <br/> + <label class="switch" data-hover="Display percentage in like/dislike bar tooltip."> + <input type="checkbox" id="show_tooltip_percentage"/> + <span class="slider"/> + <span class="switchLabel">Percentage in like/dislike bar tooltip.</span> + </label> + <div class="custom-select"> + <label for="tooltip_percentage_mode" data-hover="Use custom percentage display on hover.">Percent mode:</label> + <select name="tooltip_percentage_mode" id="tooltip_percentage_mode"> + <option value="dash_like" id="tooltip_percentage_mode_dash_like">190 / 10 - 95%</option> + <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">190 / 10 - 5%</option> + <option value="both" id="tooltip_percentage_mode_both">95% / 5%</option> + <option value="only_like" id="tooltip_percentage_mode_only_like">95%</option> + <option value="only_dislike" id="tooltip_percentage_mode_only_dislike">5%</option> + </select> </div> </fieldset> </body> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 2fb0db7..30741dd 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -1,3 +1,5 @@ +import { cLog } from "./src/utils"; + /* Config */ const config = { advanced: false, @@ -7,7 +9,9 @@ const config = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, - numberDisplayReformatLikes: false, + showTooltipPercentage: false, + tooltipPercentageMode: "dash_like", + numberDisplayReformatLikes: false, showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>', hideAdvancedMessage: @@ -86,6 +90,14 @@ document.getElementById("number_format").addEventListener("change", (ev) => { chrome.storage.sync.set({ numberDisplayFormat: ev.target.value }); }); +document.getElementById("show_tooltip_percentage").addEventListener("click", (ev) => { + chrome.storage.sync.set({ showTooltipPercentage: ev.target.checked }); +}); + +document.getElementById("tooltip_percentage_mode").addEventListener("change", (ev) => { + chrome.storage.sync.set({ tooltipPercentageMode: ev.target.value }); +}); + document.getElementById("number_reformat_likes").addEventListener("click", (ev) => { chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked }); }); @@ -99,14 +111,13 @@ advancedToggle.addEventListener("click", () => { adv.style.pointerEvents = "none"; adv.style.opacity = "0"; advancedToggle.innerHTML = config.showAdvancedMessage; - config.advanced = false; } else { adv.style.transform = "scale(1)"; adv.style.pointerEvents = "auto"; adv.style.opacity = "1"; advancedToggle.innerHTML = config.hideAdvancedMessage; - config.advanced = true; } + config.advanced = !config.advanced; }); initConfig(); @@ -119,6 +130,8 @@ function initConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -190,6 +203,18 @@ function initializeNumberDisplayRoundDown() { }); } +function initializeTooltipPercentage(){ + chrome.storage.sync.get(["showTooltipPercentage"], (res) => { + handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage); + }); +}; + +function initializeTooltipPercentageMode() { + chrome.storage.sync.get(["tooltipPercentageMode"], (res) => { + handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode); + }); +}; + function initializeNumberDisplayFormat() { chrome.storage.sync.get(["numberDisplayFormat"], (res) => { handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat); @@ -243,6 +268,9 @@ function storageChangeHandler(changes, area) { if (changes.numberDisplayFormat !== undefined) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } + if (changes.showTooltipPercentage !== undefined) { + handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + } if (changes.numberDisplayReformatLikes !== undefined) { handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); } @@ -293,6 +321,22 @@ function handleNumberDisplayFormatChangeEvent(value) { .querySelector('option[value="' + value + '"]').selected = true; } +function handleShowTooltipPercentageChangeEvent(value) { + config.showTooltipPercentage = value; + document.getElementById("show_tooltip_percentage").checked = value; +}; + +function handleTooltipPercentageModeChangeEvent(value) { + if (!value) { + value = "dash_like"; + } + config.tooltipPercentageMode = value; + + document + .getElementById("tooltip_percentage_mode") + .querySelector('option[value="' + value + '"]').selected = true; +}; + function handleNumberDisplayReformatLikesChangeEvent(value) { config.numberDisplayReformatLikes = value; document.getElementById("number_reformat_likes").checked = value; diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index 75f22ae..b6b6b67 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -77,6 +77,8 @@ api.runtime.onInstalled.addListener((details) => { if ( // No need to show changelog if its was a browser update (and not extension update) details.reason === "browser_update" || + // Chromium (e.g., Google Chrome Cannary) uses this name instead of the one above for some reason + details.reason === "chrome_update" || // No need to show changelog if developer just reloaded the extension details.reason === "update" ) @@ -277,6 +279,12 @@ function storageChangeHandler(changes, area) { changes.numberDisplayReformatLikes.newValue ); } + if (changes.showTooltipPercentage !== undefined) { + handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + } + if (changes.numberDisplayReformatLikes !== undefined) { + handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + } } function handleDisableVoteSubmissionChangeEvent(value) { @@ -292,6 +300,17 @@ function handleNumberDisplayFormatChangeEvent(value) { extConfig.numberDisplayFormat = value; } +function handleShowTooltipPercentageChangeEvent(value) { + extConfig.showTooltipPercentage = value; +}; + +function handleTooltipPercentageModeChangeEvent(value) { + if (!value) { + value = "dash_like"; + } + extConfig.tooltipPercentageMode = value; +}; + function handleNumberDisplayRoundDownChangeEvent(value) { extConfig.numberDisplayRoundDown = value; } @@ -333,6 +352,8 @@ function initExtConfig() { initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); initializeNumberDisplayReformatLikes(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); } function initializeDisableVoteSubmission() { @@ -396,6 +417,26 @@ function initializeNumberDisplayFormat() { }); } +function initializeTooltipPercentage() { + api.storage.sync.get(["showTooltipPercentage"], (res) => { + if (res.showTooltipPercentage === undefined) { + api.storage.sync.set({ showTooltipPercentage: false }); + } else { + extConfig.showTooltipPercentage = res.showTooltipPercentage; + } + }); +} + +function initializeTooltipPercentageMode() { + api.storage.sync.get(["tooltipPercentageMode"], (res) => { + if (res.tooltipPercentageMode === undefined) { + api.storage.sync.set({ tooltipPercentageMode: "dash_like" }); + } else { + extConfig.tooltipPercentageMode = res.tooltipPercentageMode; + } + }); +} + function initializeNumberDisplayReformatLikes() { api.storage.sync.get(["numberDisplayReformatLikes"], (res) => { if (res.numberDisplayReformatLikes === undefined) { diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index c56ab57..6267ce6 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -1,5 +1,5 @@ import { getButtons } from "./buttons"; -import { extConfig, isMobile, isLikesDisabled } from "./state"; +import { extConfig, isMobile, isLikesDisabled, isShorts } from "./state"; import { cLog, getColorFromTheme } from "./utils"; function createRateBar(likes, dislikes) { @@ -14,49 +14,78 @@ function createRateBar(likes, dislikes) { const widthPercent = likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50; - if (!rateBar && !isMobile()) { - let colorLikeStyle = ""; - let colorDislikeStyle = ""; - if (extConfig.coloredBar) { - colorLikeStyle = "; background-color: " + getColorFromTheme(true); - colorDislikeStyle = "; background-color: " + getColorFromTheme(false); - } + var likePercentage = parseFloat(widthPercent.toFixed(1)); + const dislikePercentage = (100 - likePercentage).toLocaleString(); + likePercentage = likePercentage.toLocaleString(); - ( - document.getElementById("menu-container") || - document.querySelector("ytm-slim-video-action-bar-renderer") - ).insertAdjacentHTML( - "beforeend", - ` - <div class="ryd-tooltip" style="width: ${widthPx}px"> - <div class="ryd-tooltip-bar-container"> - <div - id="ryd-bar-container" - style="width: 100%; height: 2px;${colorDislikeStyle}" - > - <div - id="ryd-bar" - style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" - ></div> - </div> - </div> - <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> - <!--css-build:shady-->${likes.toLocaleString()} / ${dislikes.toLocaleString()} - </tp-yt-paper-tooltip> - </div> - ` - ); + if (extConfig.showTooltipPercentage) { + var tooltipInnerHTML; + switch (extConfig.tooltipPercentageMode) { + case "dash_dislike": + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%` + break; + case "both": + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%` + break; + case "only_like": + tooltipInnerHTML = `${likePercentage}%` + break; + case "only_dislike": + tooltipInnerHTML = `${dislikePercentage}%` + break; + default: // dash_like + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + } } else { - document.getElementById("ryd-bar-container").style.width = widthPx + "px"; - document.getElementById("ryd-bar").style.width = widthPercent + "%"; - document.querySelector( - "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; - if (extConfig.coloredBar) { - document.getElementById("ryd-bar-container").style.backgroundColor = - getColorFromTheme(false); - document.getElementById("ryd-bar").style.backgroundColor = - getColorFromTheme(true); + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` + } + + + if (!isShorts()) { + if (!rateBar && !isMobile()) { + let colorLikeStyle = ""; + let colorDislikeStyle = ""; + if (extConfig.coloredBar) { + colorLikeStyle = "; background-color: " + getColorFromTheme(true); + colorDislikeStyle = "; background-color: " + getColorFromTheme(false); + } + + ( + document.getElementById("menu-container") || + document.querySelector("ytm-slim-video-action-bar-renderer") + ).insertAdjacentHTML( + "beforeend", + ` + <div class="ryd-tooltip" style="width: ${widthPx}px"> + <div class="ryd-tooltip-bar-container"> + <div + id="ryd-bar-container" + style="width: 100%; height: 2px;${colorDislikeStyle}" + > + <div + id="ryd-bar" + style="width: ${widthPercent}%; height: 100%${colorLikeStyle}" + ></div> + </div> + </div> + <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1"> + <!--css-build:shady-->${tooltipInnerHTML} + </tp-yt-paper-tooltip> + </div> + ` + ); + } else { + document.getElementById("ryd-bar-container").style.width = widthPx + "px"; + document.getElementById("ryd-bar").style.width = widthPercent + "%"; + document.querySelector( + "#ryd-dislike-tooltip > #tooltip" + ).innerHTML = tooltipInnerHTML; + if (extConfig.coloredBar) { + document.getElementById("ryd-bar-container").style.backgroundColor = + getColorFromTheme(false); + document.getElementById("ryd-bar").style.backgroundColor = + getColorFromTheme(true); + } } } } else { diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js index 99c7d14..019f166 100644 --- a/Extensions/combined/src/events.js +++ b/Extensions/combined/src/events.js @@ -8,6 +8,7 @@ import { extConfig, storedData, setLikes, + getLikeCountFromButton, } from "./state"; import { createRateBar } from "./bar"; @@ -41,6 +42,12 @@ function likeClicked() { createRateBar(storedData.likes, storedData.dislikes); storedData.previousState = NEUTRAL_STATE; } + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } @@ -65,6 +72,12 @@ function dislikeClicked() { setDislikes(numberFormat(storedData.dislikes)); createRateBar(storedData.likes, storedData.dislikes); storedData.previousState = DISLIKED_STATE; + if (extConfig.numberDisplayReformatLikes === true) { + const nativeLikes = getLikeCountFromButton(); + if (nativeLikes !== false) { + setLikes(numberFormat(nativeLikes)); + } + } } } } 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..52f68d4 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"; @@ -22,6 +23,8 @@ let extConfig = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, + showTooltipPercentage: false, + tooltipPercentageMode: "dash_like", numberDisplayReformatLikes: false, }; @@ -150,10 +153,10 @@ function getLikeCountFromButton() { if (isShorts()) { //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results. //It should be possible to fix this function, but it's not critical to showing the dislike count. - return 0; + return false; } let likesStr = getLikeButton() - .querySelector("button") + .querySelector("yt-formatted-string#text") .getAttribute("aria-label") .replace(/\D/g, ""); return likesStr.length > 0 ? parseInt(likesStr) : false; @@ -199,6 +202,7 @@ function processResponse(response, storedData) { getDislikeButton().style.color = getColorFromTheme(false); } } + createStarRating(response.rating, isMobile()); } // Tells the user if the API is down @@ -252,6 +256,8 @@ function initExtConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -315,6 +321,26 @@ function initializeNumberDisplayFormat() { }); } +function initializeTooltipPercentage() { + getBrowser().storage.sync.get(["showTooltipPercentage"], (res) => { + if (res.showTooltipPercentage === undefined) { + getBrowser().storage.sync.set({ showTooltipPercentage: false }); + } else { + extConfig.showTooltipPercentage = res.showTooltipPercentage; + } + }); +} + +function initializeTooltipPercentageMode() { + getBrowser().storage.sync.get(["tooltipPercentageMode"], (res) => { + if (res.tooltipPercentageMode === undefined) { + getBrowser().storage.sync.set({ tooltipPercentageMode: "dash_like" }); + } else { + extConfig.tooltipPercentageMode = res.tooltipPercentageMode; + } + }); +} + function initializeNumberDisplayReformatLikes() { getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => { if (res.numberDisplayReformatLikes === undefined) { diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js index a3fe790..53a84d0 100644 --- a/Extensions/combined/src/utils.js +++ b/Extensions/combined/src/utils.js @@ -9,15 +9,6 @@ function roundDown(num) { } function numberFormat(numberState) { - let userLocales; - try { - userLocales = new URL( - Array.from(document.querySelectorAll("head > link[rel='search']")) - ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) - ?.getAttribute("href") - )?.searchParams?.get("locale"); - } catch {} - let numberDisplay; if (extConfig.numberDisplayRoundDown === false) { numberDisplay = numberState; @@ -29,22 +20,27 @@ function numberFormat(numberState) { ); } -function localize(localeString) { - return chrome.i18n.getMessage(localeString); -} - function getNumberFormatter(optionSelect) { - let formatterNotation; - let formatterCompactDisplay; let userLocales; - try { - userLocales = new URL( - Array.from(document.querySelectorAll("head > link[rel='search']")) - ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) - ?.getAttribute("href") - )?.searchParams?.get("locale"); - } catch {} + if (document.documentElement.lang) { + userLocales = document.documentElement.lang; + } else if (navigator.language) { + userLocales = navigator.language; + } else { + try { + userLocales = new URL( + Array.from(document.querySelectorAll("head > link[rel='search']")) + ?.find((n) => n?.getAttribute("href")?.includes("?locale=")) + ?.getAttribute("href") + )?.searchParams?.get("locale"); + } catch { + cLog('Cannot find browser locale. Use en as default for number formatting.'); + userLocales = 'en'; + } + } + let formatterNotation; + let formatterCompactDisplay; switch (optionSelect) { case "compactLong": formatterNotation = "compact"; @@ -61,7 +57,7 @@ function getNumberFormatter(optionSelect) { } const formatter = Intl.NumberFormat( - document.documentElement.lang || userLocales || navigator.language, + userLocales, { notation: formatterNotation, compactDisplay: formatterCompactDisplay, @@ -70,6 +66,10 @@ function getNumberFormatter(optionSelect) { return formatter; } +function localize(localeString) { + return chrome.i18n.getMessage(localeString); +} + function getBrowser() { if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") { return chrome; |