diff options
Diffstat (limited to 'Extensions/combined')
21 files changed, 1129 insertions, 372 deletions
diff --git a/Extensions/combined/_locales/cs/messages.json b/Extensions/combined/_locales/cs/messages.json new file mode 100644 index 0000000..f80e3ac --- /dev/null +++ b/Extensions/combined/_locales/cs/messages.json @@ -0,0 +1,62 @@ +{ + "extensionName": { + "message": "Return YouTube Dislike" + }, + "extensionNameBeta": { + "message": "Return YouTube Dislike Beta" + }, + "extensionDesc": { + "message": "Navrátí možnost zobrazení počtu disliků" + }, + "textDeveloper": { + "message": "vytvořil Dmitry Selivanov & komunita" + }, + "linkWebsite": { + "message": "Web" + }, + "linkFAQ": { + "message": "FAQ" + }, + "linkDonate": { + "message": "Přispějte" + }, + "linkHelp": { + "message": "Nápověda" + }, + "legendSettings": { + "message": "Nastavení" + }, + "textSettings": { + "message": "Zakázat odesílání like/dislike" + }, + "textLikesDisabled": { + "message": "zakázáno majitelem" + }, + "textSettingsHover": { + "message": "Zastaví počítání vašich liků a disliků." + }, + "textTempUnavailable": { + "message": "dočasně nedostupné" + }, + "textUpdate": { + "message": "aktualizovat na" + }, + "version30installed": { + "message": "Verze 3.0.0.1 nainstalována" + }, + "whatsnew": { + "message": "Co je nového" + }, + "shortsSupport": { + "message": "Podpora YouTube Shorts" + }, + "customColors": { + "message": "Vlastní barvy pro lištu disliků a tlačítka" + }, + "customNumberFormats": { + "message": "Vlastní formáty čísel" + }, + "considerDonating": { + "message": "Jediná věc, díky které rozšíření funguje, jsou vaše příspěvky. Zvažte prosím podpoření projektu." + } +} 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 99deba7..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": "temp n/a" + "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..3d1ffc4 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..6a587cc 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..fac12a2 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." } } 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/content-style.css b/Extensions/combined/content-style.css index e2e5fa2..d8da7db 100644 --- a/Extensions/combined/content-style.css +++ b/Extensions/combined/content-style.css @@ -41,6 +41,6 @@ height: 2px; position: absolute; padding-top: 6px; - padding-bottom: 28px; + padding-bottom: 12px; top: -6px; } diff --git a/Extensions/combined/manifest-chrome.json b/Extensions/combined/manifest-chrome.json index 82ea6ea..d881a75 100644 --- a/Extensions/combined/manifest-chrome.json +++ b/Extensions/combined/manifest-chrome.json @@ -12,9 +12,7 @@ "128": "icons/icon128.png" }, "host_permissions": ["*://*.youtube.com/*"], - "permissions": [ - "storage" - ], + "permissions": ["storage"], "action": { "default_popup": "popup.html" }, diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css index dfe94cb..a5cdb7b 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..aa2e508 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -1,172 +1,223 @@ <!DOCTYPE html> <html> -<head> - <meta content="text/html; charset=utf-8"/> - <title title="__MSG_extensionName__">__MSG_extensionName__</title> - <link rel="stylesheet" href="popup.css"/> - <link rel="preconnect" href="https://fonts.googleapis.com"/> - <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/> - <link - href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" - rel="stylesheet" - /> -</head> -<body> - <center> - <svg width="48" viewBox="0 0 24 24"> - <path - d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" - fill="red" - /> - <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/> - </svg> - <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__"> - __MSG_extensionName__ - </h1> - <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__"> - __MSG_textDeveloper__ - </p> - - <button id="link_website" title="__MSG_linkWebsite__"> - __MSG_linkWebsite__ - </button> - <button style="margin-top: 0.3em; background: #ff0000" id="link_donate" title="__MSG_linkDonate__"> - __MSG_linkDonate__ - </button> - <button id="link_discord">Discord</button> - <br/> - <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__"> - __MSG_linkFAQ__ - </button> - <button id="link_github">GitHub</button> - <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__"> - __MSG_linkHelp__ - </button> - <br> - <button style="margin-top: 0.3em" id="link_changelog" title="__MSG_linkChangelog__"> - Change Log - </button> - - <br/> - <br/> - <p style="display: none">API Status: <b id="status"></b></p> - <img - id="server-status" - style="display: none; width: 0.75rem; height: 0.75rem" - src="./icons/server.svg" - alt="" + <head> + <meta content="text/html; charset=utf-8" /> + <title title="__MSG_extensionName__">__MSG_extensionName__</title> + <link rel="stylesheet" href="popup.css" /> + <link rel="preconnect" href="https://fonts.googleapis.com" /> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> + <link + href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" + rel="stylesheet" /> - - <br/> - <br/> - </center> + </head> + <body> + <center> + <svg width="48" viewBox="0 0 24 24"> + <path + d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z" + fill="red" + /> + <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" /> + </svg> + <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__"> + __MSG_extensionName__ + </h1> + <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__"> + __MSG_textDeveloper__ + </p> -<!-- top-right --> -<button id="advancedToggle"> - <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> -</button> + <button id="link_website" title="__MSG_linkWebsite__"> + __MSG_linkWebsite__ + </button> + <button + style="margin-top: 0.3em; background: #ff0000" + id="link_donate" + title="__MSG_linkDonate__" + > + __MSG_linkDonate__ + </button> + <button id="link_discord">Discord</button> + <br /> + <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__"> + __MSG_linkFAQ__ + </button> + <button id="link_github">GitHub</button> + <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__"> + __MSG_linkHelp__ + </button> + <br /> + <button + style="margin-top: 0.3em" + id="link_changelog" + title="__MSG_linkChangelog__" + > + __MSG_linkChangelog__ + </button> + + <br /> + <br /> + <p style="display: none">API Status: <b id="status"></b></p> + <img + id="server-status" + style="display: none; width: 0.75rem; height: 0.75rem" + src="./icons/server.svg" + alt="" + /> + + <br /> + <br /> + </center> + + <!-- top-right --> + <button id="advancedToggle"> + <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> + </button> -<!-- bottom-right --> -<div id="ext"> - <a - href="https://returnyoutubedislike.com/install" - target="_blank" - id="ext-update" - ></a> - <span id="ext-version"></span> -</div> + <!-- bottom-right --> + <div id="ext"> + <a + href="https://returnyoutubedislike.com/install" + target="_blank" + id="ext-update" + ></a> + <span id="ext-version"></span> + </div> -<!-- dialog box --> -<fieldset id="advancedSettings"> - <legend id="advancedLegend" title="__MSG_legendSettings__"> - __MSG_legendSettings__ - </legend> + <!-- dialog box --> + <fieldset id="advancedSettings"> + <legend id="advancedLegend" title="__MSG_legendSettings__"> + __MSG_legendSettings__ + </legend> - <label class="switch" data-hover="__MSG_textSettingsHover__"> - <input type="checkbox" id="disable_vote_submission"/> - <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)"> - <input type="checkbox" id="number_round_down"/> - <span class="slider"/> - <span class="switchLabel">Show rounded down numbers</span> - </label> - <br/> - <label class="switch" data-hover="Make likes and dislikes format consistent"> - <input type="checkbox" id="number_reformat_likes"/> - <span class="slider"/> - <span class="switchLabel">Re-format like numbers</span> - </label> - <br/> - <div class="custom-select"> - <label for="number_format">Number format:</label> - <select name="number_format" id="number_format"> - <option value="compactShort" id="number_format_compactShort"></option> - <option value="compactLong" id="number_format_compactLong"></option> - <option value="standard" id="number_format_standard"></option> - </select> - </div> - <br/> - <div class="custom-select"> - <label class="switch" data-hover="Use custom colors for ratio bar."> - <input type="checkbox" id="colored_bar"/> - <span class="slider"/> - <span class="switchLabel">Colorize ratio bar</span> - </label> - </div> - <label class="switch" data-hover="Use custom colors for thumb icons."> - <input type="checkbox" id="colored_thumbs"/> - <span class="slider"/> - <span class="switchLabel">Colorize thumbs</span> - </label> - <br/> - <div class="custom-select"> - <label for="color_theme">Color theme:</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> - </select> - <span - id="color_theme_example_like" - style=" + <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> + </label> + <br /> + <label class="switch" data-hover="__MSG_roundNumbersHover__"> + <input type="checkbox" id="number_round_down" /> + <span class="slider" /> + <span class="switchLabel">__MSG_roundNumbers__</span> + </label> + <br /> + <label class="switch" data-hover="__MSG_reformatLikesHover__"> + <input type="checkbox" id="number_reformat_likes" /> + <span class="slider" /> + <span class="switchLabel">__MSG_reformatLikes__</span> + </label> + <br /> + <div class="custom-select"> + <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> + <option value="standard" id="number_format_standard"></option> + </select> + </div> + <br /> + <div class="custom-select"> + <label class="switch" data-hover="__MSG_colorizeRatioHover__"> + <input type="checkbox" id="colored_bar" /> + <span class="slider" /> + <span class="switchLabel">__MSG_colorizeRatio__</span> + </label> + </div> + <label class="switch" data-hover="__MSG_colorizeThumbsHover__"> + <input type="checkbox" id="colored_thumbs" /> + <span class="slider" /> + <span class="switchLabel">__MSG_colorizeThumbs__</span> + </label> + <br /> + <div class="custom-select"> + <label for="color_theme">__MSG_colorTheme__</label> + <select name="color_theme" id="color_theme"> + <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" + style=" display: inline-block; vertical-align: text-top; width: 1em; height: 1em; " - > </span - > - <span - id="color_theme_example_dislike" - style=" + > </span + > + <span + id="color_theme_example_dislike" + style=" display: inline-block; vertical-align: text-top; width: 1em; height: 1em; " - > </span - > - </div> -</fieldset> -</body> -<script src="popup.js"></script> + > </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> + <script src="popup.js"></script> </html> diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js index 2fb0db7..cf72829 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: @@ -20,7 +24,7 @@ const config = { donate: "https://returnyoutubedislike.com/donate", faq: "https://returnyoutubedislike.com/faq", help: "https://returnyoutubedislike.com/help", - changelog: "/changelog/3/changelog_3.0.html" + changelog: "/changelog/3/changelog_3.0.html", }, }; @@ -86,9 +90,23 @@ document.getElementById("number_format").addEventListener("change", (ev) => { chrome.storage.sync.set({ numberDisplayFormat: ev.target.value }); }); -document.getElementById("number_reformat_likes").addEventListener("click", (ev) => { - chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked }); -}); +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 }); + }); /* Advanced Toggle */ const advancedToggle = document.getElementById("advancedToggle"); @@ -99,14 +117,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 +136,8 @@ function initConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -133,7 +152,7 @@ function initializeVersionNumber() { .then((json) => { if (compareVersions(json.version, version)) { document.getElementById("ext-update").innerHTML = - chrome.i18n.getMessage("textUpdate") + " v" + json.version; + chrome.i18n.getMessage("textUpdate") + " v" + json.version; document.getElementById("ext-update").style.padding = ".25rem .5rem"; } }); @@ -190,6 +209,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,8 +274,15 @@ 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); + handleNumberDisplayReformatLikesChangeEvent( + changes.numberDisplayReformatLikes.newValue + ); } } @@ -293,6 +331,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..c416da9 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,16 @@ 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 +304,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 +356,8 @@ function initExtConfig() { initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); initializeNumberDisplayReformatLikes(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); } function initializeDisableVoteSubmission() { @@ -396,6 +421,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..55f21ed 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -1,5 +1,11 @@ import { getButtons } from "./buttons"; -import { extConfig, isMobile, isLikesDisabled } from "./state"; +import { + extConfig, + isMobile, + isLikesDisabled, + isNewDesign, + isShorts, +} from "./state"; import { cLog, getColorFromTheme } from "./utils"; function createRateBar(likes, dislikes) { @@ -14,55 +20,94 @@ 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( + isNewDesign() ? "actions-inner" : "menu-container" + ) || document.querySelector("ytm-slim-video-action-bar-renderer") + ).insertAdjacentHTML( + "beforeend", + ` + <div class="ryd-tooltip" style="width: ${widthPx}px${ + isNewDesign() ? "; margin-bottom: -2px" : "" + }"> + <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> + ` + ); + + // Add border between info and comments + if (isNewDesign()) { + let descriptionAndActionsElement = document.getElementById("top-row"); + descriptionAndActionsElement.style.borderBottom = + "1px solid var(--yt-spec-10-percent-layer)"; + descriptionAndActionsElement.style.paddingBottom = "10px"; + } + } 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 { cLog("removing bar"); let ratebar = document.getElementById("ryd-bar-container"); - if(ratebar) { + if (ratebar) { ratebar.parentNode.removeChild(ratebar); } } diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js index 99c7d14..9b0e78a 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)); + } + } } } } @@ -105,7 +118,9 @@ function storageChangeHandler(changes, area) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } if (changes.numberDisplayReformatLikes !== undefined) { - handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + handleNumberDisplayReformatLikesChangeEvent( + changes.numberDisplayReformatLikes.newValue + ); } } diff --git a/Extensions/combined/src/starRating.js b/Extensions/combined/src/starRating.js index 5d98814..65cf18b 100644 --- a/Extensions/combined/src/starRating.js +++ b/Extensions/combined/src/starRating.js @@ -1,101 +1,104 @@ -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 };
+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 7160903..ec2125a 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -23,6 +23,8 @@ let extConfig = { colorTheme: "classic", numberDisplayFormat: "compactShort", numberDisplayRoundDown: true, + showTooltipPercentage: false, + tooltipPercentageMode: "dash_like", numberDisplayReformatLikes: false, }; @@ -40,6 +42,10 @@ function isShorts() { return location.pathname.startsWith("/shorts"); } +function isNewDesign() { + return document.getElementById("comment-teaser") !== null; +} + let mutationObserver = new Object(); if (isShorts() && mutationObserver.exists !== true) { @@ -151,10 +157,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; @@ -200,7 +206,8 @@ function processResponse(response, storedData) { getDislikeButton().style.color = getColorFromTheme(false); } } - createStarRating(response.rating, isMobile()); + //Temporary disabling this - it breaks all places where getButtons()[1] is used + // createStarRating(response.rating, isMobile()); } // Tells the user if the API is down @@ -254,6 +261,8 @@ function initExtConfig() { initializeColorTheme(); initializeNumberDisplayFormat(); initializeNumberDisplayRoundDown(); + initializeTooltipPercentage(); + initializeTooltipPercentageMode(); initializeNumberDisplayReformatLikes(); } @@ -317,6 +326,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) { @@ -332,6 +361,7 @@ export { isShorts, isVideoDisliked, isVideoLiked, + isNewDesign, getState, setState, setInitialState, diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js index a3fe790..05dafbf 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,29 @@ 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"; @@ -60,16 +58,17 @@ function getNumberFormatter(optionSelect) { formatterCompactDisplay = "short"; } - const formatter = Intl.NumberFormat( - document.documentElement.lang || userLocales || navigator.language, - { - notation: formatterNotation, - compactDisplay: formatterCompactDisplay, - } - ); + const formatter = Intl.NumberFormat(userLocales, { + notation: formatterNotation, + compactDisplay: formatterCompactDisplay, + }); return formatter; } +function localize(localeString) { + return chrome.i18n.getMessage(localeString); +} + function getBrowser() { if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") { return chrome; |