diff options
Diffstat (limited to 'Extensions/combined')
| -rw-r--r-- | Extensions/combined/_locales/es/messages.json | 2 | ||||
| -rw-r--r-- | Extensions/combined/_locales/ja/messages.json | 36 | ||||
| -rw-r--r-- | Extensions/combined/_locales/pt_BR/messages.json | 2 | ||||
| -rw-r--r-- | Extensions/combined/manifest-chrome.json | 4 | ||||
| -rw-r--r-- | Extensions/combined/popup.css | 30 | ||||
| -rw-r--r-- | Extensions/combined/popup.html | 371 | ||||
| -rw-r--r-- | Extensions/combined/popup.js | 46 | ||||
| -rw-r--r-- | Extensions/combined/ryd.background.js | 12 | ||||
| -rw-r--r-- | Extensions/combined/src/bar.js | 62 | ||||
| -rw-r--r-- | Extensions/combined/src/events.js | 4 | ||||
| -rw-r--r-- | Extensions/combined/src/starRating.js | 205 | ||||
| -rw-r--r-- | Extensions/combined/src/state.js | 3 | ||||
| -rw-r--r-- | Extensions/combined/src/utils.js | 17 |
13 files changed, 430 insertions, 364 deletions
diff --git a/Extensions/combined/_locales/es/messages.json b/Extensions/combined/_locales/es/messages.json index 121c0ee..3d1ffc4 100644 --- a/Extensions/combined/_locales/es/messages.json +++ b/Extensions/combined/_locales/es/messages.json @@ -96,7 +96,7 @@ "message": "Colores personalizados para la barra y los botones que no me gustan" }, "customNumberFormats": { - "message":"Formatos de números personalizados" + "message": "Formatos de números personalizados" }, "considerDonating": { "message": "Lo único que mantiene la extensión en funcionamiento son sus donaciones, considere apoyar el proyecto." diff --git a/Extensions/combined/_locales/ja/messages.json b/Extensions/combined/_locales/ja/messages.json index 9a84fae..6a587cc 100644 --- a/Extensions/combined/_locales/ja/messages.json +++ b/Extensions/combined/_locales/ja/messages.json @@ -59,34 +59,34 @@ "considerDonating": { "message": "この拡張機能を存続させることができるのは,皆様からの寄付だけです。" }, - "roundNumbers":{ - "message":"四捨五入された数値を表示" + "roundNumbers": { + "message": "四捨五入された数値を表示" }, - "roundNumbersHover":{ + "roundNumbersHover": { "message": "カウント値を四捨五入します（これはYouTubeのデフォルトオプションです）。" }, - "reformatLikes":{ - "message":"いいねの数をフォーマットする" + "reformatLikes": { + "message": "いいねの数をフォーマットする" }, - "reformatLikesHover":{ - "message":"統計値の一貫性を高めます。" + "reformatLikesHover": { + "message": "統計値の一貫性を高めます。" }, - "numberFormat":{ - "message":"数値形式" + "numberFormat": { + "message": "数値形式" }, - "colorizeRatio":{ - "message":"嫌いなバーに色を付ける" + "colorizeRatio": { + "message": "嫌いなバーに色を付ける" }, - "colorizeRatioHover":{ - "message":"嫌いなバーをカスタムカラーで色付けします。" + "colorizeRatioHover": { + "message": "嫌いなバーをカスタムカラーで色付けします。" }, - "colorizeThumbs":{ - "message":"ボタンに色を付ける" + "colorizeThumbs": { + "message": "ボタンに色を付ける" }, - "colorizeThumbsHover":{ - "message":"カスタムカラーのボタンの色が好きで嫌いです。" + "colorizeThumbsHover": { + "message": "カスタムカラーのボタンの色が好きで嫌いです。" }, - "colorTheme":{ + "colorTheme": { "message": "配色：" } } diff --git a/Extensions/combined/_locales/pt_BR/messages.json b/Extensions/combined/_locales/pt_BR/messages.json index fa6c75a..fac12a2 100644 --- a/Extensions/combined/_locales/pt_BR/messages.json +++ b/Extensions/combined/_locales/pt_BR/messages.json @@ -59,4 +59,4 @@ "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/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 2ff8516..a5cdb7b 100644 --- a/Extensions/combined/popup.css +++ b/Extensions/combined/popup.css @@ -69,8 +69,8 @@ button:hover { border-radius: 0.25rem; } - -.switch::before, .label-with-hover-tip::before { +.switch::before, +.label-with-hover-tip::before { content: attr(data-hover); visibility: hidden; opacity: 0; @@ -86,27 +86,27 @@ button:hover { top: 160%; } - -.switch:hover::before, .label-with-hover-tip: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; + 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; - } + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } #advancedToggle { diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html index 8318901..aa2e508 100644 --- a/Extensions/combined/popup.html +++ b/Extensions/combined/popup.html @@ -1,184 +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__"> - __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="" + <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="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=" + <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> - <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> + > </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 30741dd..cf72829 100644 --- a/Extensions/combined/popup.js +++ b/Extensions/combined/popup.js @@ -24,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", }, }; @@ -90,17 +90,23 @@ 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("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("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 }); -}); +document + .getElementById("number_reformat_likes") + .addEventListener("click", (ev) => { + chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked }); + }); /* Advanced Toggle */ const advancedToggle = document.getElementById("advancedToggle"); @@ -146,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"; } }); @@ -203,17 +209,17 @@ function initializeNumberDisplayRoundDown() { }); } -function initializeTooltipPercentage(){ +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) => { @@ -269,10 +275,14 @@ function storageChangeHandler(changes, area) { handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue); } if (changes.showTooltipPercentage !== undefined) { - handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + handleShowTooltipPercentageChangeEvent( + changes.showTooltipPercentage.newValue + ); } if (changes.numberDisplayReformatLikes !== undefined) { - handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + handleNumberDisplayReformatLikesChangeEvent( + changes.numberDisplayReformatLikes.newValue + ); } } @@ -324,7 +334,7 @@ function handleNumberDisplayFormatChangeEvent(value) { function handleShowTooltipPercentageChangeEvent(value) { config.showTooltipPercentage = value; document.getElementById("show_tooltip_percentage").checked = value; -}; +} function handleTooltipPercentageModeChangeEvent(value) { if (!value) { @@ -335,7 +345,7 @@ function handleTooltipPercentageModeChangeEvent(value) { document .getElementById("tooltip_percentage_mode") .querySelector('option[value="' + value + '"]').selected = true; -}; +} function handleNumberDisplayReformatLikesChangeEvent(value) { config.numberDisplayReformatLikes = value; diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js index b6b6b67..c416da9 100644 --- a/Extensions/combined/ryd.background.js +++ b/Extensions/combined/ryd.background.js @@ -280,10 +280,14 @@ function storageChangeHandler(changes, area) { ); } if (changes.showTooltipPercentage !== undefined) { - handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue); + handleShowTooltipPercentageChangeEvent( + changes.showTooltipPercentage.newValue + ); } if (changes.numberDisplayReformatLikes !== undefined) { - handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue); + handleNumberDisplayReformatLikesChangeEvent( + changes.numberDisplayReformatLikes.newValue + ); } } @@ -302,14 +306,14 @@ function handleNumberDisplayFormatChangeEvent(value) { function handleShowTooltipPercentageChangeEvent(value) { extConfig.showTooltipPercentage = value; -}; +} function handleTooltipPercentageModeChangeEvent(value) { if (!value) { value = "dash_like"; } extConfig.tooltipPercentageMode = value; -}; +} function handleNumberDisplayRoundDownChangeEvent(value) { extConfig.numberDisplayRoundDown = value; diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 745a797..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, isNewDesign, isShorts } from "./state"; +import { + extConfig, + isMobile, + isLikesDisabled, + isNewDesign, + isShorts, +} from "./state"; import { cLog, getColorFromTheme } from "./utils"; function createRateBar(likes, dislikes) { @@ -18,29 +24,28 @@ function createRateBar(likes, dislikes) { const dislikePercentage = (100 - likePercentage).toLocaleString(); likePercentage = likePercentage.toLocaleString(); - if (extConfig.showTooltipPercentage) { var tooltipInnerHTML; - switch (extConfig.tooltipPercentageMode) { + switch (extConfig.tooltipPercentageMode) { case "dash_dislike": - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%` - break; + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${dislikePercentage}%`; + break; case "both": - tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%` + tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`; break; case "only_like": - tooltipInnerHTML = `${likePercentage}%` + tooltipInnerHTML = `${likePercentage}%`; break; case "only_dislike": - tooltipInnerHTML = `${dislikePercentage}%` + tooltipInnerHTML = `${dislikePercentage}%`; break; default: // dash_like - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%` + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()} - ${likePercentage}%`; } } else { - tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}` - } - + tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`; + } + if (!isShorts()) { if (!rateBar && !isMobile()) { let colorLikeStyle = ""; @@ -51,12 +56,15 @@ function createRateBar(likes, dislikes) { } ( - document.getElementById(isNewDesign() ? "actions-inner" : "menu-container") || - document.querySelector("ytm-slim-video-action-bar-renderer") + 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" style="width: ${widthPx}px${ + isNewDesign() ? "; margin-bottom: -2px" : "" + }"> <div class="ryd-tooltip-bar-container"> <div id="ryd-bar-container" @@ -74,18 +82,20 @@ function createRateBar(likes, dislikes) { </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"; + + // 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-container").style.width = + widthPx + "px"; document.getElementById("ryd-bar").style.width = widthPercent + "%"; - document.querySelector( - "#ryd-dislike-tooltip > #tooltip" - ).innerHTML = tooltipInnerHTML; + document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML = + tooltipInnerHTML; if (extConfig.coloredBar) { document.getElementById("ryd-bar-container").style.backgroundColor = getColorFromTheme(false); @@ -97,7 +107,7 @@ function createRateBar(likes, dislikes) { } 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 019f166..9b0e78a 100644 --- a/Extensions/combined/src/events.js +++ b/Extensions/combined/src/events.js @@ -118,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 8b0c519..ec2125a 100644 --- a/Extensions/combined/src/state.js +++ b/Extensions/combined/src/state.js @@ -206,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 diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js index 53a84d0..05dafbf 100644 --- a/Extensions/combined/src/utils.js +++ b/Extensions/combined/src/utils.js @@ -34,8 +34,10 @@ function getNumberFormatter(optionSelect) { ?.getAttribute("href") )?.searchParams?.get("locale"); } catch { - cLog('Cannot find browser locale. Use en as default for number formatting.'); - userLocales = 'en'; + cLog( + "Cannot find browser locale. Use en as default for number formatting." + ); + userLocales = "en"; } } @@ -56,13 +58,10 @@ function getNumberFormatter(optionSelect) { formatterCompactDisplay = "short"; } - const formatter = Intl.NumberFormat( - userLocales, - { - notation: formatterNotation, - compactDisplay: formatterCompactDisplay, - } - ); + const formatter = Intl.NumberFormat(userLocales, { + notation: formatterNotation, + compactDisplay: formatterCompactDisplay, + }); return formatter; } |