From e1e77a29310e5e240b0997a7ef69d2bfeba98f4e Mon Sep 17 00:00:00 2001 From: Lawrence Hook Date: Tue, 17 Dec 2024 19:38:40 -0500 Subject: [PATCH 1/5] Version 4.3.62 Squashed commit of the following: commit 5078750703d436e474316421b5b90cc1427756ce Author: Lawrence Hook Date: Sun Dec 15 12:33:23 2024 -0500 add semicolon commit 8dd10345db8e6ec152d089716cecf7908c149024 Author: Lawrence Hook Date: Sun Dec 15 12:30:50 2024 -0500 Abbreviate anon donors commit 5b47e2e636ac01ea2d14bc92ea86d084bfb55fe6 Author: Lawrence Hook Date: Sun Dec 15 12:13:07 2024 -0500 Squashed commit of the following: commit 42f6ef437a4054f2aed6467d8c85a8c1ec7f03c2 Author: Lawrence Hook Date: Sun Dec 15 12:12:01 2024 -0500 Implement password removal. Fix button styling commit 6503b2ac8460b148a17e42015a732b248048fa40 Author: Lawrence Hook Date: Sun Dec 15 11:38:32 2024 -0500 Convert to password attributes to snake_case and add them to import/export. commit 5f6f0e95e693a3ba8c2c59dc7311e30cd9af096d Merge: 06edb5a e9b2af8 Author: Lawrence Hook Date: Sat Dec 14 19:27:49 2024 -0500 Merge branch 'main' into feature/password commit 06edb5a13151e6228723ecae409c75fea74ede37 Author: Lawrence Hook Date: Sat Dec 14 19:26:54 2024 -0500 push progress on password feature commit e9b2af8f873d17c99113f618e2363bdca687c49e Author: Lawrence Hook Date: Sat Dec 14 11:19:29 2024 -0500 Add an option to shrink thumbnails commit bb5f4331eff2b47612f61538be9de710cef8f881 Author: Lawrence Hook Date: Sat Dec 14 11:08:16 2024 -0500 Add an option to remove the clip button commit 615cfad3001da1e931bdc9a2946d10ba95a4a25f Author: Lawrence Hook Date: Sat Dec 14 10:43:28 2024 -0500 Fix the click on the "skip ad" button commit f7cefd61618df3094c9e413df7c23b966521bf6a Author: Lawrence Hook Date: Sat Dec 14 10:31:11 2024 -0500 Fix the 'center contents' option commit 016194e31dc9a56a996e3a17151650f90e5d8fcf Author: Lawrence Hook Date: Sat Dec 14 10:24:25 2024 -0500 Fix subs page option for 'upcoming' videos. Fix toggles in the video player page. commit b5b7895afed2c7f2befcde4a91ced2fc9585b3f6 Author: Lawrence Hook Date: Sat Dec 14 09:55:16 2024 -0500 Disable copy/paste for code entry commit 0bf3cc95fca87dba6965e07be5b88f3314aa1e8f Author: Lawrence Hook Date: Fri Dec 13 21:56:13 2024 -0500 Update manifest versions commit 71dfef04ccc6c7c4730be4b0aa6f0ffb44868951 Merge: eb3ca2e fe4e2bd Author: Lawrence Hook Date: Fri Dec 13 21:55:35 2024 -0500 Merge branch 'released' commit eb3ca2e13e7c17365e8e560e93e1ec1882718007 Author: Lawrence Hook Date: Fri Dec 13 21:55:06 2024 -0500 Fix permissions commit 4cec2ebe854907b103f02a26cb2828ad83580d90 Author: Lawrence Hook Date: Fri Jun 7 17:40:18 2024 -0400 update manifest versions --- make_firefox.sh | 0 src/chrome_manifest.json | 2 +- src/content-script/main.css | 14 ++- src/content-script/main.js | 15 ++- src/firefox_manifest.json | 2 +- src/options/body.css | 122 ++++++++++++++++++++++- src/options/donors/donors.js | 18 +++- src/options/main.html | 34 +++++++ src/options/settings-menu.js | 123 ++++++++++++++++++++--- src/shared/main.js | 35 ++++--- src/shared/md5.js | 186 +++++++++++++++++++++++++++++++++++ src/shared/utils.js | 4 +- 12 files changed, 519 insertions(+), 36 deletions(-) mode change 100644 => 100755 make_firefox.sh create mode 100644 src/shared/md5.js diff --git a/make_firefox.sh b/make_firefox.sh old mode 100644 new mode 100755 diff --git a/src/chrome_manifest.json b/src/chrome_manifest.json index ecbd04a..1c0447d 100644 --- a/src/chrome_manifest.json +++ b/src/chrome_manifest.json @@ -3,7 +3,7 @@ "description": "Spend less time on YouTube. Customize YouTube's user interface to be less engaging.", "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions", "manifest_version": 3, - "version": "4.3.61", + "version": "4.3.62", "icons": { "16": "/images/16.png", diff --git a/src/content-script/main.css b/src/content-script/main.css index 0ea1903..73071cf 100644 --- a/src/content-script/main.css +++ b/src/content-script/main.css @@ -71,6 +71,7 @@ html[global_enable="true"][remove_info_cards="true"] .ytp-ce-element.ytp-ce-elem html[global_enable="true"][remove_vid_description="true"] ytd-watch-metadata #description, html[global_enable="true"][remove_menu_buttons="true"] #menu-container, html[global_enable="true"][remove_menu_buttons="true"] #actions, +html[global_enable="true"][remove_clip_button="true"] #menu button[scissor_button], html[global_enable="true"][remove_video_likes="true"] like-button-view-model .yt-spec-button-shape-next__button-text-content, html[global_enable="true"][remove_channel_subscribers="true"] #owner-sub-count, html[global_enable="true"][remove_embedded_more_videos="true"] div.ytp-pause-overlay, @@ -147,7 +148,9 @@ html[global_enable="true"][search_engine_mode="true"] ytd-watch-flexy[flexy][is- html[foobar] { --ytd-watch-flexy-max-player-width: calc(var(--ytd-watch-flexy-chat-max-height)*var(--ytd-watch-flexy-width-ratio)/var(--ytd-watch-flexy-height-ratio)) !important; } - +html[global_enable="true"][remove_entire_sidebar="true"] #columns { + justify-content: center; +} /* Reverse channel videos list */ html[global_enable="true"][reverse_channel_video_list="true"] ytd-browse[page-subtype="channels"] #contents.ytd-rich-grid-renderer { @@ -163,6 +166,15 @@ html[global_enable="true"][blur_video_thumbnails="true"] .video-thumbnail-img { } +/* Shrink thumbnails */ +html[global_enable="true"][shrink_video_thumbnails="true"] ytd-thumbnail, +html[global_enable="true"][shrink_video_thumbnails="true"] ytd-playlist-thumbnail, +html[global_enable="true"][shrink_video_thumbnails="true"] ytd-channel-renderer #avatar-section, +html[global_enable="true"][shrink_video_thumbnails="true"] ytd-movie-renderer .thumbnail-container { + max-width: 0 !important; +} + + /* Subs page */ html[global_enable="true"] ytd-rich-grid-row[empty="false"], html[global_enable="true"] ytd-rich-grid-row[empty="false"] #contents { diff --git a/src/content-script/main.js b/src/content-script/main.js index dbc8460..130ce14 100644 --- a/src/content-script/main.js +++ b/src/content-script/main.js @@ -180,7 +180,7 @@ function runDynamicSettings() { const upcomingBadgeSelector = 'ytd-thumbnail-overlay-time-status-renderer[overlay-style="UPCOMING"]'; const shortsBadgeSelector = 'ytd-thumbnail-overlay-time-status-renderer[overlay-style="SHORTS"]'; const addBadgeTextToVideo = badge => { - const badgeText = badge.innerText.trim().toLowerCase(); + const badgeText = badge.innerText.trim().split(' ')[0].trim().toLowerCase(); if (badgeText) { const gridVideo = badge.closest('ytd-grid-video-renderer'); const updatedGridVideo = badge.closest('ytd-rich-item-renderer'); @@ -292,7 +292,7 @@ function runDynamicSettings() { const menuItems = qsa('.ytp-settings-menu .ytp-panel .ytp-panel-menu > div'); const checkBoxes = menuItems.filter(n => n.getAttribute('aria-checked')); - const [ ambientToggle, annotationsToggle ] = checkBoxes; + const [ stableVolumeToggle, ambientToggle, annotationsToggle ] = checkBoxes; // Disable ambient mode if (cache['disable_ambient_mode'] === true) { @@ -302,6 +302,7 @@ function runDynamicSettings() { } // Disable annotations + // Note: I don't see a toggle for "annotations" anymore if (cache['disable_annotations'] === true) { if (annotationsToggle?.getAttribute('aria-checked') === 'true') { qs('.ytp-menuitem-toggle-checkbox', annotationsToggle)?.click(); @@ -332,7 +333,9 @@ function runDynamicSettings() { // Click on "Skip ad" button const skipButtons = qsa('.ytp-ad-skip-button'). concat(qsa('.ytp-ad-skip-button-modern')). - concat(qsa('.ytp-skip-ad-button')); + concat(qsa('.ytp-skip-ad-button')). + concat(qsa(CSS.escape("button#skip-button:2"))); + const skippableAd = skipButtons?.some(button => button.offsetParent); if (skippableAd) { skipButtons?.forEach(e => { @@ -530,6 +533,12 @@ function runDynamicSettings() { } } + // Video Player: hide the 'clip' button. + // The path[d=...] selector selects scissor SVGs. + qsa('path[d^="M8 7c0 .55-.45 1-1 1s-1-.45-1-1"]'). + map(path => path.closest('#menu button')). + forEach(b => b.setAttribute('scissor_button', '')); + } catch (error) { console.log(error); } diff --git a/src/firefox_manifest.json b/src/firefox_manifest.json index c67a32f..05237b8 100644 --- a/src/firefox_manifest.json +++ b/src/firefox_manifest.json @@ -3,7 +3,7 @@ "description": "Spend less time on YouTube. Customize YouTube's user interface to be less engaging.", "homepage_url": "https://github.com/lawrencehook/remove-youtube-suggestions", "manifest_version": 2, - "version": "4.3.61", + "version": "4.3.62", "icons": { "16": "/images/16.png", diff --git a/src/options/body.css b/src/options/body.css index bb9fb1e..b19d143 100644 --- a/src/options/body.css +++ b/src/options/body.css @@ -57,7 +57,7 @@ html[foo="bar"] { margin-right: auto; padding: 5px 20px; - z-index: 11; + z-index: 110; color: var(--body-background-color); background-color: var(--body-color); @@ -275,6 +275,121 @@ html[schedule="false"] #schedule_container > *:not(#schedule_modal_header) { cursor: pointer; } + +/* Password lock screen */ +html:not([password='true']) #password_lock_container, +html[passwordentered='true'] #password_lock_container, +html[foo=bar] { + display: none; +} +#password_lock_container { + position: fixed; + top: 0; + left: 0; + bottom: calc(var(--footer-height) + 3px); + width: 100vw; + z-index: 100; + font-size: 1rem; + + background-color: var(--body-background-color); + + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 15px; +} +#password_lock_container button { + color: black; +} + +/* Password Modal */ +#password_container_background { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + z-index: 100; + + background-color: rgba(0, 0, 0, 0.6); + + display: flex; +} + +#password_container_background button { + color: black; +} + +#enable_password_container, #enable_password_container * { + color: var(--body-color); +} + +#enable_password_container, #disable_password_container { + position: relative; + + height: fit-content; + width: min(90vw, 450px); + margin-top: calc(1.2 * var(--header-height)); + margin-right: auto; + margin-left: auto; + padding: 20px 10px; + + text-align: center; + + background-color: var(--body-background-color); + box-shadow: 0px 0px .5px .5px var(--box-shadow-color); + box-sizing: border-box; + + border: 1px solid var(--box-shadow-color); + border-radius: 2px; + + display: flex; + gap: 20px; + flex-direction: column; + align-items: center; +} + +#password_modal_header { + display: flex; + gap: 15px; + flex-direction: column; + align-items: center; +} + +#password_modal_header div:first-child { + font-size: 1.1rem; + font-weight: bold; +} + +#enable-password { + display: flex; + flex-direction: row; + gap: 10px; +} + +#password-entries { + font-size: 0.85rem; + + display: grid; + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(2, 1fr); + grid-gap: 10px; +} + +#password-entries > * { + justify-self: start; +} + +#password-button button { + color: var(--body-background-color); +} + +#disable_password_container a:first-child { + font-weight: bold; +} + + /* Menu Timer */ #timer_container { position: fixed; @@ -285,7 +400,7 @@ html[schedule="false"] #schedule_container > *:not(#schedule_modal_header) { z-index: 100; font-size: 1rem; - background-color: rgba(255, 255, 255, 0.97); + background-color: var(--body-background-color); display: flex; flex-direction: column; @@ -304,6 +419,9 @@ html[schedule="false"] #schedule_container > *:not(#schedule_modal_header) { z-index: 100; font-size: 1rem; + /* Disable text selection */ + user-select: none; + background-color: var(--body-background-color); display: flex; diff --git a/src/options/donors/donors.js b/src/options/donors/donors.js index 3826deb..80831ff 100644 --- a/src/options/donors/donors.js +++ b/src/options/donors/donors.js @@ -72,12 +72,24 @@ sendGetDonorsRequest().then(x => { // Sort in descending order, by timestamp donors.sort((a, b) => Number(b.timestamp) - Number(a.timestamp)); - donors.forEach(donor => { + const appendDonorNode = name => { const donorNode = templateDonor.cloneNode(true); const pNode = donorNode.querySelector('p'); - pNode.innerText = donor.showName ? (donor.name || 'anonymous') : 'anonymous'; + pNode.innerText = name; donorList.appendChild(donorNode); - }); + } + + const anonCondition = d => !d.showName || !d.name.trim().length > 0; + const namedDonors = donors.filter(d => !anonCondition(d)); + namedDonors.forEach(d => appendDonorNode(d.name)); + const anonDonors = donors.filter(anonCondition); + const anonCount = anonDonors.length; + if (anonCount > 0) { + const useAnd = anonCount != donors.length; + const plural = anonCount > 1; + const message = (useAnd ? 'and ' : '') + `${anonCount} anonymous donor` + (plural ? 's' : '') + '.'; + appendDonorNode(message); + } }); } catch (error) { diff --git a/src/options/main.html b/src/options/main.html index 2f45603..7eb5fdd 100644 --- a/src/options/main.html +++ b/src/options/main.html @@ -15,6 +15,7 @@ + @@ -93,6 +94,32 @@ + +
Menu Timer
@@ -105,6 +132,7 @@
+
+ Enter Password. + + +
+
diff --git a/src/options/footer.css b/src/options/footer.css index d116cce..e3a6a75 100644 --- a/src/options/footer.css +++ b/src/options/footer.css @@ -12,29 +12,33 @@ html[dark_mode='true'] #donate_button .footer-path { position: relative; text-align: center; height: var(--footer-height); + padding: 0 8px; - border-top: 1.5px solid var(--box-shadow-color); - /*border: 1px groove gray;*/ + border-top: 1px solid var(--box-shadow-color); + background-color: var(--body-background-color); display: flex; align-items: center; - /*justify-content: center;*/ + gap: 4px; } #footer svg { width: 20px; - /*height: 90%;*/ cursor: pointer; } #footer a { flex: 1; - flex-shrink: 1; - flex-grow: 1; + padding: 4px 8px; + border-radius: var(--border-radius); + font-size: 0.85rem; + font-weight: 500; + transition: background-color 0.15s ease; } #footer a:hover { - cursor: pointer; + cursor: pointer; + background-color: var(--box-shadow-color); } #donate_button:hover > svg > .footer-path { diff --git a/src/options/general.css b/src/options/general.css index 64c6289..ff6e358 100644 --- a/src/options/general.css +++ b/src/options/general.css @@ -2,9 +2,9 @@ --header-height: 30px; --header-padding: 5px; --body-height: 400px; - --footer-height: 25px; + --footer-height: 28px; - --border-radius: 1px; + --border-radius: 4px; --red-color: hsl(358 100% 49%); --blue-color: hsl(238 100% 49%); @@ -70,7 +70,7 @@ body { } body, body * { - font-family: Helvetica; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; } .hidden { diff --git a/src/options/header.css b/src/options/header.css index 967e3bc..ee75725 100644 --- a/src/options/header.css +++ b/src/options/header.css @@ -16,16 +16,17 @@ html[dark_mode='false'] #header-light { display: none } #header { height: var(--header-height); - padding: var(--header-padding); + padding: var(--header-padding) 8px; - border-bottom: 1.5px solid var(--box-shadow-color); + border-bottom: 1px solid var(--box-shadow-color); + background-color: var(--body-background-color); display: flex; justify-content: space-between; align-items: center; - gap: 7px; + gap: 10px; - --icon-dim: 30px; + --icon-dim: 28px; } #header-logo-link { @@ -47,15 +48,18 @@ html[dark_mode='false'] #header-light { display: none } margin-right: auto; } #search_bar input { - padding: 3px 10px; - font-size: 1rem; + padding: 4px 12px; + font-size: 0.9rem; background-color: var(--body-background-color); border: 1px solid var(--box-shadow-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 0px 0px var(--box-shadow-color); - + border-radius: 6px; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +#search_bar input:focus { + border-color: var(--light-blue); + box-shadow: 0 0 0 2px rgba(117, 102, 204, 0.15); } #power-icon { @@ -99,36 +103,39 @@ html[schedule='true'] #power-icon:hover #power-pop-up { max-width: var(--power-icon-dim); } #power-options { - font-size: 16px; + font-size: 14px; position: fixed; z-index: 10; top: calc(5px + var(--header-height) + 2 * var(--header-padding)); - padding: 3px 1px; + padding: 6px; user-select: none; background-color: var(--body-background-color); color: var(--body-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 6px 3px var(--box-shadow-color); + border-radius: 8px; + border: 1px solid var(--box-shadow-color); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } #power-options hr { - width: 92%; - margin: 3px auto; + width: 100%; + margin: 4px 0; + border: none; + border-top: 1px solid var(--box-shadow-color); } #power-options > *:not(hr) { - border-radius: var(--border-radius); - margin: 1px 3px; - padding: 4px 6px; + border-radius: 6px; + padding: 6px 10px; cursor: default; + transition: background-color 0.15s ease; } #power-options > *:not(hr):hover, #power-options > *:not(hr):hover * { - background-color: #0600FB; + background-color: var(--blue-color); color: white !important; } #power-options a, #power-options span { @@ -167,35 +174,38 @@ html[foo=bar] max-width: var(--icon-dim); } #settings-menu { - font-size: 16px; + font-size: 14px; position: fixed; z-index: 10; top: calc(5px + var(--header-height) + 2 * var(--header-padding)); - padding: 3px 1px; + padding: 6px; user-select: none; background-color: var(--body-background-color); color: var(--body-color); - border-radius: var(--border-radius); - box-shadow: 0px 0px 6px 3px var(--box-shadow-color); + border-radius: 8px; + border: 1px solid var(--box-shadow-color); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); display: flex; flex-direction: column; } #settings-menu hr { - width: 92%; - margin: 3px auto; + width: 100%; + margin: 4px 0; + border: none; + border-top: 1px solid var(--box-shadow-color); } #settings-menu > *:not(hr) { - border-radius: var(--border-radius); - margin: 1px 3px; - padding: 4px 6px; + border-radius: 6px; + padding: 6px 10px; cursor: default; + transition: background-color 0.15s ease; } #settings-menu > *:not(hr):hover { - background-color: #0600FB; + background-color: var(--blue-color); color: white; } #settings-menu a { diff --git a/src/options/options.css b/src/options/options.css index aa83ad0..3012f5c 100644 --- a/src/options/options.css +++ b/src/options/options.css @@ -1,24 +1,24 @@ #primary_options .section_container { - margin: 0px 2px; - padding: 5px; + margin: 0px 4px; + padding: 4px 6px; box-sizing: border-box; background-color: var(--body-background-color); - border-radius: 1px; -/* box-shadow: 0px 0px 0.5px 0.5px var(--box-shadow-color);*/ + border-radius: 6px; display: flex; flex-direction: column; - gap: 1px; + gap: 0px; } #primary_options .section_label { - margin-bottom: 3px; - margin-left: 35px; + margin-bottom: 2px; + margin-left: 33px; width: fit-content; - font-size: 1rem; + font-size: 0.9rem; + font-weight: 600; text-align: left; color: var(--label-color); @@ -34,7 +34,17 @@ div.option { cursor: default; display: flex; align-items: flex-start; - padding-left: 2px; + padding: 1px 4px; + border-radius: 4px; + transition: background-color 0.1s ease; +} + +div.option:hover { + background-color: rgba(0, 0, 0, 0.03); +} + +html[dark_mode='true'] div.option:hover { + background-color: rgba(255, 255, 255, 0.03); } /* Visual cues when the extension is enabled vs. disabled */ @@ -56,7 +66,7 @@ div.option { position: relative; top: 2px; margin-left: 8px; - font-size: 0.95rem; + font-size: 0.9rem; } .noselect {