(null);
+ return (
+
+ ) => setFilter(e.target.value)}
+ placeholder={t("settings.sections.settingSearch.placeholder")}
+ ref={inputRef}
+ type="text"
+ value={filter}
+ />
+ inputRef.current?.focus()}
+ />
+
+ );
+}
diff --git a/src/components/Settings/components/SettingSection.tsx b/src/components/Settings/components/SettingSection.tsx
index e3a2b775..d0fd0daa 100644
--- a/src/components/Settings/components/SettingSection.tsx
+++ b/src/components/Settings/components/SettingSection.tsx
@@ -1,9 +1,35 @@
-import { cn } from "@/src/utils/utilities";
+import { SectionTitleProvider } from "@/src/hooks/useSectionTitle/provider";
+import useSettingsFilter from "@/src/hooks/useSettingsFilter";
interface SettingSectionProps {
- children: React.ReactNode;
+ children: React.ReactNode[];
className?: string;
+ title: string;
}
-export default function SettingSection({ children, className }: SettingSectionProps) {
- return ;
+export default function SettingSection({ children, className = "", title: sectionTitle = "" }: SettingSectionProps) {
+ const { filter } = useSettingsFilter();
+ if (children.length === 0) return null;
+ if (filter === "")
+ return (
+
+ {children}
+
+ );
+ const shouldSectionBeVisible =
+ (sectionTitle && sectionTitle.toLowerCase().includes(filter.toLowerCase())) ||
+ (children as React.ReactElement<{ label?: string; title?: string }>[]).filter((child) => {
+ if (!child) return false;
+ if (!child.props) return false;
+ return (
+ (child.props.label !== undefined && child.props.label.toLowerCase().includes(filter.toLowerCase())) ||
+ (child.props.title !== undefined && child.props.title.toLowerCase().includes(filter.toLowerCase()))
+ );
+ }).length > 0;
+ return (
+ shouldSectionBeVisible && (
+
+ {children}
+
+ )
+ );
}
diff --git a/src/components/Settings/components/SettingTitle.tsx b/src/components/Settings/components/SettingTitle.tsx
index 0bf9de22..58ac1d0c 100644
--- a/src/components/Settings/components/SettingTitle.tsx
+++ b/src/components/Settings/components/SettingTitle.tsx
@@ -1,6 +1,9 @@
-interface SettingTitleProps {
- title: string;
-}
-export default function SettingTitle({ title }: SettingTitleProps) {
- return ;
+import useSectionTitle from "@/src/hooks/useSectionTitle";
+import useSettingsFilter from "@/src/hooks/useSettingsFilter";
+
+export default function SettingTitle() {
+ const { filter } = useSettingsFilter();
+ const { title } = useSectionTitle();
+ const shouldSettingTitleBeVisible = filter === "" ? true : title.toLowerCase().includes(filter.toLowerCase());
+ return shouldSettingTitleBeVisible && ;
}
diff --git a/src/deepDarkMaterialCSS.ts b/src/deepDarkMaterialCSS.ts
index 3facd007..52c0352a 100644
--- a/src/deepDarkMaterialCSS.ts
+++ b/src/deepDarkMaterialCSS.ts
@@ -1,5 +1,5 @@
/**
- * Version 4.1.8
+ * Version 4.2.6
* Author: https://github.com/RaitaroH
* Co-authors: https://github.com/MechaLynx
* Repository: https://github.com/RaitaroH/YouTube-DeepDark
@@ -55,6 +55,16 @@ export const deepDarkMaterial = `
--iron-icon-fill-color: var(--main-text) !important;
--yt-spec-base-background: var(--second-background) !important;
+
+
+ /*unlock special perks and other such dialogs*/
+ --yt-spec-raised-background: var(--hover-background) !important;
+
+ /*2024-05-31 logo*/
+ /*--yt-spec-wordmark-text: var(--main-text) !important;*/
+
+ /*2024-06-12 new layout*/
+ --yt-spec-outline-inverse-medium: var(--second-background) !important;
}
/*Scrollbar fix for chrome*/
@@ -118,6 +128,18 @@ a:hover {
outline: none !important;
}
+
+/*3 dot dropdown menu*/
+/*2024-06-02*/
+ytd-menu-renderer .ytd-menu-renderer[style-target="button"] yt-icon {
+ color: var(--main-text) !important;
+}
+
+ytd-menu-renderer .ytd-menu-renderer[style-target="button"] yt-icon:hover {
+ color: var(--main-color) !important;
+}
+
+
/*Placeholder image on pages that need an account - such as Subscriptions*/
ytd-background-promo-renderer .image.ytd-background-promo-renderer,
ytd-message-renderer yt-icon.ytd-message-renderer {
@@ -129,8 +151,7 @@ ytd-masthead,
#yt-masthead-container,
#masthead-positioner-height-offset
-/*account page*/
- {
+/*account page*/ {
background-color: var(--second-background) !important;
border-bottom-color: var(--hover-background) !important;
}
@@ -146,8 +167,7 @@ yt-icon-button:hover svg {
#logo-icon-container.ytd-topbar-logo-renderer #youtube-paths.ytd-topbar-logo-renderer path.ytd-topbar-logo-renderer,
#youtube-red-paths
-/*premium*/
- {
+/*premium*/ {
fill: var(--main-text) !important;
}
@@ -172,7 +192,7 @@ yt-icon-button:hover svg {
filter: invert(1) brightness(720%);
}
-#sections.ytd-multi-page-menu-renderer>.ytd-multi-page-menu-renderer:not(:last-child) {
+#sections.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer:not(:last-child) {
border-color: var(--hover-background) !important;
}
@@ -256,21 +276,21 @@ ytd-guide-entry-renderer[active] {
background-color: var(--hover-background) !important;
}
-#sections.ytd-guide-renderer>.ytd-guide-renderer:not(:last-child),
+#sections.ytd-guide-renderer > .ytd-guide-renderer:not(:last-child),
#guide-links-primary.ytd-guide-renderer,
#guide-content.ytd-app {
border-color: var(--hover-background) !important;
}
-#guide-links-primary.ytd-guide-renderer>a,
-#guide-links-secondary.ytd-guide-renderer>a,
-#footer.ytd-guide-renderer>#copyright,
+#guide-links-primary.ytd-guide-renderer > a,
+#guide-links-secondary.ytd-guide-renderer > a,
+#footer.ytd-guide-renderer > #copyright,
yt-formatted-string.ytd-guide-signin-promo-renderer {
color: var(--dimmer-text) !important;
}
-#guide-links-primary.ytd-guide-renderer>a:hover,
-#guide-links-secondary.ytd-guide-renderer>a:hover {
+#guide-links-primary.ytd-guide-renderer > a:hover,
+#guide-links-secondary.ytd-guide-renderer > a:hover {
color: var(--main-color) !important;
}
@@ -325,9 +345,23 @@ ytd-post-renderer[uses-compact-lockup] ytd-button-renderer.style-suggestive[is-p
background-color: var(--main-color) !important;
}
+/*Youtube Premium ad*/
+#background-content.ytd-statement-banner-renderer {
+ background-color: var(--second-background) !important;
+}
+
/*Main page video hover preview*/
#video-preview-container.ytd-video-preview {
background: var(--second-background) !important;
+ color: var(--main-text) !important;
+}
+
+#text.yt-dynamic-sizing-formatted-string {
+ color: var(--main-text) !important;
+}
+
+#video-preview-container.ytd-video-preview .yt-spec-touch-feedback-shape--touch-response .yt-spec-touch-feedback-shape__fill {
+ background-color: var(--main-color) !important;
}
/*Feed filter*/
@@ -418,6 +452,12 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
}
/*Channel page*/
+/*cover art background*/
+#page-header-container.ytd-tabbed-page-header,
+#tabs-container.ytd-tabbed-page-header {
+ background-color: var(--main-background) !important;
+}
+
/*header*/
#channel-header.ytd-c4-tabbed-header-renderer,
#tabs-inner-container.ytd-c4-tabbed-header-renderer {
@@ -432,6 +472,15 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
color: var(--dimmer-text) !important;
}
+.truncated-text-wiz {
+ color: var(--dimmer-text) !important;
+}
+
+/*show more*/
+.truncated-text-wiz__absolute-button {
+ color: var(--main-color) !important;
+}
+
.tab-content.paper-tab,
.tab-content.tp-yt-paper-tab,
.yt-tab-shape-wiz__tab {
@@ -439,7 +488,7 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
}
paper-tab:hover .tab-content.paper-tab,
-tp-yt-paper-tab:hover>.tab-content.tp-yt-paper-tab,
+tp-yt-paper-tab:hover > .tab-content.tp-yt-paper-tab,
.yt-tab-shape-wiz__tab--tab-selected {
color: var(--main-color) !important;
}
@@ -494,7 +543,7 @@ iron-icon:hover {
color: var(--main-color) !important;
}
-#contents>.ytd-browse-secondary-contents-renderer:not(:first-child) {
+#contents > .ytd-browse-secondary-contents-renderer:not(:first-child) {
border-color: var(--hover-background) !important;
}
@@ -543,8 +592,7 @@ paper-menu-button.yt-dropdown-menu:hover #icon-label.yt-dropdown-menu {
/*normal video, but in cards on home page*/
#content-attachment.ytd-post-renderer ytd-playlist-renderer.ytd-post-renderer
-/*playlist, but in cards on home page*/
- {
+/*playlist, but in cards on home page*/ {
background: var(--hover-background) !important;
}
@@ -571,11 +619,11 @@ paper-item[selected].ytd-backstage-poll-renderer #progress-bar.ytd-backstage-pol
#description:not([class*="yt-music"]),
#bio,
-#right-column>yt-formatted-string {
+#right-column > yt-formatted-string {
color: var(--dimmer-text) !important;
}
-#right-column>yt-formatted-string,
+#right-column > yt-formatted-string,
#description-container.ytd-channel-about-metadata-renderer,
#bio-container.ytd-channel-about-metadata-renderer,
#photos-container.ytd-channel-about-metadata-renderer,
@@ -667,6 +715,22 @@ yt-formatted-string.yt-start-at-renderer,
color: var(--main-text) !important;
}
+/*icons*/
+yt-icon.ytd-unified-share-panel-renderer>span>div,
+/*close icon*/
+yt-icon.ytd-unified-share-panel-renderer>yt-icon-shape>icon-shape>div,
+#scroll-button-forward>button>yt-icon>span>div,
+/*next arrow*/
+#scroll-button-forward>button>yt-icon>yt-icon-shape>icon-shape>div,
+#scroll-button-back>button>yt-icon>span>div,
+#scroll-button-back>button>yt-icon>yt-icon-shape>icon-shape>div,
+yt-share-target-renderer.style-scope:nth-child(5)>button>yt-icon>span>div
+
+/*email icon*/
+ {
+ color: var(--main-text) !important;
+}
+
/*share embed*/
#embed-panel.yt-sharing-embed-renderer {
background: var(--second-background) !important;
@@ -706,22 +770,19 @@ yt-formatted-string.yt-start-at-renderer,
input.yt-clip-creation-scrubber-renderer
-/*time*/
- {
+/*time*/ {
border-color: var(--dimmer-text) !important;
}
#handles.yt-clip-creation-scrubber-view
-/*preview*/
- {
+/*preview*/ {
border-color: var(--main-color) !important;
}
.handle.yt-clip-creation-scrubber-view
-/*preview*/
- {
+/*preview*/ {
background-color: var(--main-color) !important;
}
@@ -783,7 +844,7 @@ h3.ytd-playlist-renderer,
color: var(--main-text) !important;
}
-#items.yt-horizontal-list-renderer>.yt-horizontal-list-renderer:hover a.ytd-grid-video-renderer,
+#items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover a.ytd-grid-video-renderer,
ytd-compact-video-renderer:hover #video-title.ytd-compact-video-renderer,
ytd-video-renderer:hover #video-title.ytd-video-renderer,
ytd-playlist-renderer:hover h3.ytd-playlist-renderer,
@@ -815,25 +876,72 @@ yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
/*2022 Nov like button*/
/*not liked yet*/
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(2)>path:nth-child(1),
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(4)>path:nth-child(1) {
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > path:nth-child(1),
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(4)
+ > path:nth-child(1) {
stroke: var(--main-text) !important;
}
/*liked*/
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(1)>path:nth-child(1),
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(3)>path:nth-child(1) {
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(1)
+ > path:nth-child(1),
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(3)
+ > path:nth-child(1) {
fill: var(--main-color) !important;
}
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(1)>path:nth-child(2),
-yt-animated-icon[animated-icon-type="LIKE"]>ytd-lottie-player>lottie-component>svg>g:nth-child(2)>g:nth-child(2)>g:nth-child(3)>path:nth-child(2) {
- stroke: var(--main-color) !important
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(1)
+ > path:nth-child(2),
+yt-animated-icon[animated-icon-type="LIKE"]
+ > ytd-lottie-player
+ > lottie-component
+ > svg
+ > g:nth-child(2)
+ > g:nth-child(2)
+ > g:nth-child(3)
+ > path:nth-child(2) {
+ stroke: var(--main-color) !important;
}
/*on shorts - so here is filled by default, thus above I am using main-color instead to keep it consistent*/
-.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled>div>yt-icon>svg>g>path {
- fill: var(--main-color) !important;
+.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled .style-scope.yt-icon {
+ color: var(--main-color) !important;
+}
+
+.yt-spec-button-shape-next--overlay-dark.yt-spec-button-shape-next--filled {
+ color: var(--main-color) !important;
+ background-color: var(--second-background) !important;
}
/*description and other metadata*/
@@ -868,16 +976,17 @@ ytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata .yt-simple-
color: var(--dimmer-text) !important;
}
-a.yt-simple-endpoint.yt-formatted-string:only-of-type:hover {
- color: var(--main-color) !important;
-}
-
a.yt-simple-endpoint.yt-formatted-string:only-of-type {
color: var(--main-text) !important;
}
+a.yt-simple-endpoint.yt-formatted-string:only-of-type:hover,
+#text.ytd-channel-name a.yt-simple-endpoint.yt-formatted-string:only-of-type {
+ color: var(--main-color) !important;
+}
+
/*Borders*/
-#contents.ytd-section-list-renderer>.ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer) {
+#contents.ytd-section-list-renderer > .ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer) {
border-color: var(--hover-background) !important;
}
@@ -888,8 +997,7 @@ a.yt-simple-endpoint.yt-formatted-string:only-of-type {
.ytd-horizontal-card-list-renderer[arrow],
.scroll-button.yt-third-party-share-target-section-renderer
-/*share link*/
- {
+/*share link*/ {
background-color: var(--hover-background) !important;
}
@@ -930,8 +1038,7 @@ ytd-survey-follow-up-renderer[dialog][dialog][dialog],
ytd-survey-follow-up-renderer,
ytd-checkbox-survey-renderer[dialog][dialog][dialog]
-/*TODO: forgot to test if the [dialog] is even needed*/
- {
+/*TODO: forgot to test if the [dialog] is even needed*/ {
background-color: var(--hover-background) !important;
box-shadow: var(--shadow) !important;
}
@@ -1152,8 +1259,7 @@ button.ytd-button-renderer[is="paper-icon-button-light"][disabled] {
.ytp-sb-subscribe,
a.ytp-sb-subscribe
-/*in cards... why yt why*/
- {
+/*in cards... why yt why*/ {
background-color: var(--second-background) !important;
border-color: var(--second-background) !important;
box-shadow: var(--shadow) !important;
@@ -1161,12 +1267,12 @@ a.ytp-sb-subscribe
}
/*2024 March*/
-ytd-live-chat-frame #show-hide-button.ytd-live-chat-frame>ytd-button-renderer.ytd-live-chat-frame {
+ytd-live-chat-frame #show-hide-button.ytd-live-chat-frame > ytd-button-renderer.ytd-live-chat-frame {
background-color: transparent !important;
}
/*fix black "personalized" icon*/
-.yt-spec-button-shape-next--icon-leading-trailing svg>g:nth-child(2)>g>g:nth-child(2)>path:nth-child(2) {
+.yt-spec-button-shape-next--icon-leading-trailing svg > g:nth-child(2) > g > g:nth-child(2) > path:nth-child(2) {
fill: var(--main-text) !important;
}
@@ -1189,8 +1295,7 @@ ytd-live-chat-frame #show-hide-button.ytd-live-chat-frame>ytd-button-renderer.yt
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
.yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled
-/*in window*/
- {
+/*in window*/ {
background-color: var(--second-background) !important;
border-color: var(--second-background) !important;
}
@@ -1212,8 +1317,12 @@ ytd-button-renderer#submit-button.ytd-commentbox .yt-spec-button-shape-next--cal
/*download panel > get trial button*/
/*share panel > copy button*/
-ytd-offline-promo-renderer.ytd-popup-container yt-button-renderer#action-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
-yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer yt-button-renderer#copy-button .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
+ytd-offline-promo-renderer.ytd-popup-container
+ yt-button-renderer#action-button
+ .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled,
+yt-third-party-network-section-renderer.ytd-unified-share-panel-renderer
+ yt-button-renderer#copy-button
+ .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--filled {
background-color: var(--main-color) !important;
color: var(--main-text) !important;
}
@@ -1227,22 +1336,24 @@ yt-button-renderer#confirm-button.yt-confirm-dialog-renderer .yt-spec-button-sha
}
/*Toast notification*/
-yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text {
+yt-notification-action-renderer
+ yt-button-renderer.yt-notification-action-renderer
+ .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text {
color: var(--main-color) !important;
}
/*Toast notification hover*/
-yt-notification-action-renderer yt-button-renderer.yt-notification-action-renderer .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
+yt-notification-action-renderer
+ yt-button-renderer.yt-notification-action-renderer
+ .yt-spec-button-shape-next--call-to-action-inverse.yt-spec-button-shape-next--text:hover {
background-color: var(--main-background) !important;
}
if join-color
-/*overwriting the above*/
- {
-
+/*overwriting the above*/ {
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal[aria-label="Join this channel"],
- yt-button-shape:nth-child(1)>.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--outline {
+ yt-button-shape:nth-child(1) > .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--outline {
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
}
@@ -1250,8 +1361,7 @@ if join-color
if subscribe-color
-/*overwriting the above*/
- {
+/*overwriting the above*/ {
.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled,
.yt-spec-button-shape-next--overlay.yt-spec-button-shape-next--filled:hover,
@@ -1259,8 +1369,7 @@ if subscribe-color
.ytp-sb-subscribe,
a.ytp-sb-subscribe
- /*in cards*/
- {
+ /*in cards*/ {
background-color: var(--main-color) !important;
border-color: var(--main-color) !important;
}
@@ -1388,7 +1497,7 @@ yt-icon.ytd-badge-supported-renderer {
background: transparent !important;
color: var(--main-color) !important;
padding-left: 0px !important;
- opacity: .7 !important;
+ opacity: 0.7 !important;
}
.badge-style-type-simple-strikethrough.ytd-badge-supported-renderer {
@@ -1415,7 +1524,7 @@ ytd-author-comment-badge-renderer:not(.creator) #icon.ytd-author-comment-badge-r
/*Premium*/
.badge-style-type-red.ytd-badge-supported-renderer {
- color: #DA4453 !important;
+ color: #da4453 !important;
background: transparent !important;
border-color: var(--main-color) !important;
}
@@ -1441,7 +1550,7 @@ tp-yt-paper-dialog.ytd-popup-container .yt-simple-endpoint.style-scope.yt-format
}
/*Dropdown*/
-.dropdown-content.style-scope.ytd-popup-container>*,
+.dropdown-content.style-scope.ytd-popup-container > *,
tp-yt-paper-listbox,
ytd-menu-popup-renderer {
background: var(--second-background) !important;
@@ -1469,7 +1578,7 @@ tp-yt-paper-listbox a.yt-simple-endpoint.yt-dropdown-menu:hover .item.yt-dropdow
#owner-name.ytd-video-owner-renderer a {
color: var(--main-color) !important;
- opacity: .9;
+ opacity: 0.9;
}
/*share*/
@@ -1510,13 +1619,13 @@ img.yt-img-shadow:hover {
/*Very specific hover for thumbnails*/
#dismissable.ytd-compact-video-renderer:hover img.yt-img-shadow,
-#items.yt-horizontal-list-renderer>.yt-horizontal-list-renderer:hover img.yt-img-shadow,
-#items.ytd-grid-renderer>ytd-grid-video-renderer.ytd-grid-renderer:hover img.yt-img-shadow,
+#items.yt-horizontal-list-renderer > .yt-horizontal-list-renderer:hover img.yt-img-shadow,
+#items.ytd-grid-renderer > ytd-grid-video-renderer.ytd-grid-renderer:hover img.yt-img-shadow,
ytd-video-renderer.ytd-item-section-renderer:hover img.yt-img-shadow,
.style-scope.ytd-channel-featured-content-renderer:hover img.yt-img-shadow,
-#grid-container.ytd-expanded-shelf-contents-renderer>.ytd-expanded-shelf-contents-renderer:hover img.yt-img-shadow,
+#grid-container.ytd-expanded-shelf-contents-renderer > .ytd-expanded-shelf-contents-renderer:hover img.yt-img-shadow,
ytd-playlist-video-renderer:hover img.yt-img-shadow,
-iron-list:not([grid]) #items.iron-list>*:hover img.yt-img-shadow {
+iron-list:not([grid]) #items.iron-list > *:hover img.yt-img-shadow {
opacity: 1 !important;
}
@@ -1542,8 +1651,7 @@ iron-list:not([grid]) #items.iron-list>*:hover img.yt-img-shadow {
.ytp-swatch-background-color-secondary,
.PlayerControlsProgressBarHostProgressBarPlayheadDot
-/*shorts*/
- {
+/*shorts*/ {
background: var(--main-color) !important;
}
@@ -1553,8 +1661,7 @@ iron-list:not([grid]) #items.iron-list>*:hover img.yt-img-shadow {
.progress-bar-played.ytd-progress-bar-line,
.PlayerControlsProgressBarHostProgressBarPlayed
-/* on shorts*/
- {
+/* on shorts*/ {
background: var(--main-color) !important;
}
@@ -1608,7 +1715,7 @@ iron-list:not([grid]) #items.iron-list>*:hover img.yt-img-shadow {
/*Video menu - might have issues with lighter colors*/
.ytp-popup {
background: var(--second-background) !important;
- opacity: .9 !important;
+ opacity: 0.9 !important;
}
.ytp-menuitem:hover:not([aria-disabled="true"]) {
@@ -1671,11 +1778,26 @@ ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] #next-vid
ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .byline-title.ytd-playlist-panel-renderer,
ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer,
-ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .publisher.ytd-playlist-panel-renderer:not([is-empty]).ytd-playlist-panel-renderer+.index-message-wrapper.ytd-playlist-panel-renderer::before,
+ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette]
+ .publisher.ytd-playlist-panel-renderer:not([is-empty]).ytd-playlist-panel-renderer
+ + .index-message-wrapper.ytd-playlist-panel-renderer::before,
ytd-playlist-panel-renderer[collapsible][collapsed][use-color-palette] .index-message-wrapper.ytd-playlist-panel-renderer {
color: var(--main-color) !important;
}
+/*download button*/
+ytd-menu-service-item-download-renderer yt-icon {
+ color: var(--main-text) !important;
+}
+
+tp-yt-paper-item.ytd-menu-service-item-download-renderer:hover {
+ background-color: var(--hover-background) !important;
+}
+
+tp-yt-paper-item.ytd-menu-service-item-download-renderer:hover yt-formatted-string.ytd-menu-service-item-download-renderer {
+ color: var(--main-color) !important;
+}
+
/*Watch later svg*/
.style-scope.ytd-thumbnail-overlay-toggle-button-renderer:hover {
fill: var(--main-color) !important;
@@ -1744,19 +1866,25 @@ ytd-consent-bump-renderer {
/*New logo*/
#logo-icon-container.ytd-topbar-logo-renderer svg g path[fill*="#FF0000"],
ytd-topbar-logo-renderer.style-scope>a>div>ytd-logo>yt-icon>yt-icon-shape>icon-shape>div>svg>svg:nth-child(1)>g:nth-child(1)>path:nth-child(1),
+#yt-logo-updated_yt2>g:nth-child(1)>path:nth-child(1),
/*cookie version*/
-svg.ytd-consent-bump-v2-lightbox>g:nth-child(1)>g:nth-child(1)>path:nth-child(1) {
+svg.ytd-consent-bump-v2-lightbox>g:nth-child(1)>g:nth-child(1)>path:nth-child(1),
+/*2024-06-15*/
+#yt-logo-updated_yt3>g:nth-child(1)>path:nth-child(1),
+#yt-logo-updated_yt4>g:nth-child(1)>path:nth-child(1) {
fill: var(--main-color) !important;
}
-ytd-topbar-logo-renderer.style-scope>a>div>ytd-logo>yt-icon>yt-icon-shape>icon-shape>div>svg>svg:nth-child(1)>g:nth-child(2)
-
+ytd-topbar-logo-renderer.style-scope>a>div>ytd-logo>yt-icon>yt-icon-shape>icon-shape>div>svg>svg:nth-child(1)>g:nth-child(2),
+#youtube-paths_yt2,
/*cookie version*/
-g.ytd-consent-bump-v2-lightbox:nth-child(2)>g:nth-child(1)>* {
+g.ytd-consent-bump-v2-lightbox:nth-child(2)>g:nth-child(1)>*,
+/*2024-06-15*/
+ytd-topbar-logo-renderer.style-scope>a:nth-child(1)>div:nth-child(1)>ytd-logo:nth-child(1)>yt-icon:nth-child(1)>span:nth-child(1)>div:nth-child(1) {
fill: var(--main-text) !important;
}
-ytd-topbar-logo-renderer.style-scope a svg>g>g:nth-child(2)>g,
+ytd-topbar-logo-renderer.style-scope a svg > g > g:nth-child(2) > g,
#country-code.ytd-topbar-logo-renderer {
color: var(--main-text) !important;
}
@@ -1791,7 +1919,7 @@ ytd-playlist-sidebar-renderer {
color: var(--dimmer-text) !important;
}
-#items.ytd-playlist-sidebar-renderer>.ytd-playlist-sidebar-renderer:not(:last-child) {
+#items.ytd-playlist-sidebar-renderer > .ytd-playlist-sidebar-renderer:not(:last-child) {
border-color: var(--hover-background) !important;
}
@@ -1817,7 +1945,7 @@ ytd-playlist-sidebar-renderer paper-button.ytd-toggle-button-renderer {
a.yt-simple-endpoint.ytd-button-renderer:hover *,
ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover,
-ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover>yt-formatted-string.ytd-button-renderer {
+ytd-playlist-sidebar-renderer ytd-button-renderer #button.ytd-button-renderer:hover > yt-formatted-string.ytd-button-renderer {
color: var(--main-color) !important;
}
@@ -1894,12 +2022,12 @@ ytd-transcript-segment-list-renderer {
.cue.ytd-transcript-body-renderer:hover,
ytd-transcript-body-renderer:not([refresh]) .cue.active.ytd-transcript-body-renderer {
background-color: transparent !important;
- color: var(--main-color) !important
+ color: var(--main-color) !important;
}
.segment-timestamp.ytd-transcript-segment-renderer {
background-color: var(--hover-background) !important;
- color: var(--main-color) !important
+ color: var(--main-color) !important;
}
/*search transcript*/
@@ -1931,8 +2059,7 @@ ytd-transcript-search-box-renderer {
#index.ytd-playlist-panel-video-renderer,
.badge-style-type-medium-grey.ytd-badge-supported-renderer
-/*unlisted*/
- {
+/*unlisted*/ {
color: var(--dimmer-text) !important;
}
@@ -2014,7 +2141,8 @@ ytd-macro-markers-list-item-renderer[active][layout="MACRO_MARKERS_LIST_ITEM_REN
ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer:not(:first-child),
ytd-metadata-row-container-renderer.ytd-structured-description-content-renderer:not(:first-child),
-ytd-structured-description-content-renderer[inline-structured-description] ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
+ytd-structured-description-content-renderer[inline-structured-description]
+ ytd-horizontal-card-list-renderer.ytd-structured-description-content-renderer {
border-color: var(--hover-background) !important;
}
@@ -2049,8 +2177,7 @@ ytd-searchbox[mode="legacy-centered"] #container.ytd-searchbox,
#container.ytd-searchbox,
#masthead-search-terms
-/*account settings page*/
- {
+/*account settings page*/ {
background: var(--main-background) !important;
border-color: var(--main-background) !important;
box-shadow: none !important;
@@ -2063,8 +2190,7 @@ ytd-searchbox.style-scope[has-focus=""] #container.ytd-searchbox,
ytd-searchbox[mode="material-centered"]:hover #container.ytd-searchbox,
#masthead-search-terms.masthead-search-terms-border
-/*error page*/
- {
+/*error page*/ {
border: 1px solid var(--main-color) !important;
box-shadow: none !important;
}
@@ -2074,8 +2200,7 @@ ytd-searchbox[mode="legacy"] #container.ytd-searchbox input.ytd-searchbox,
ytd-searchbox input,
#masthead-search-terms.masthead-search-terms-border input
-/*error page*/
- {
+/*error page*/ {
color: var(--main-text) !important;
}
@@ -2084,8 +2209,7 @@ ytd-searchbox input,
#masthead-search .search-btn-component,
#masthead-search .search-btn-component .start
-/*account*/
- {
+/*account*/ {
background: var(--hover-background) !important;
border-color: var(--hover-background) !important;
}
@@ -2096,8 +2220,7 @@ ytd-searchbox input,
#masthead-search .search-btn-component .yt-uix-button-content
-/*account*/
- {
+/*account*/ {
filter: invert(1);
}
@@ -2169,7 +2292,10 @@ ytd-voice-search-dialog-renderer[dialog] {
#header-text.ytd-voice-search-dialog-renderer,
#microphone-label.ytd-voice-search-dialog-renderer,
-#microphone.ytd-voice-search-dialog-renderer[state="try-again"] #microphone-circle.ytd-voice-search-dialog-renderer yt-icon.ytd-voice-search-dialog-renderer .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {
+#microphone.ytd-voice-search-dialog-renderer[state="try-again"]
+ #microphone-circle.ytd-voice-search-dialog-renderer
+ yt-icon.ytd-voice-search-dialog-renderer
+ .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--text {
color: var(--main-text) !important;
}
@@ -2209,7 +2335,7 @@ paper-item:hover {
}
#img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer {
- opacity: .9;
+ opacity: 0.9;
}
#img-endpoint.ytd-watch-card-collage-renderer #overlay-button.ytd-watch-card-collage-renderer:hover {
@@ -2423,7 +2549,7 @@ ytd-author-comment-badge-renderer {
}
#content-text.ytd-comment-renderer,
-ytd-expander[should-use-number-of-lines][collapsed]>#content.ytd-expander {
+ytd-expander[should-use-number-of-lines][collapsed] > #content.ytd-expander {
color: var(--dimmer-text) !important;
}
@@ -2504,7 +2630,7 @@ paper-button.yt-next-continuation {
#published-time-text.ytd-comment-renderer a {
--yt-endpoint-color: var(--dimmer-text) !important;
color: var(--dimmer-text) !important;
- opacity: .8;
+ opacity: 0.8;
}
#content.ytd-expander a:hover,
@@ -2551,8 +2677,7 @@ yt-icon.ytd-pinned-comment-badge-renderer {
/*comment window background*/
ytd-item-section-renderer[static-comments-header] #header.ytd-item-section-renderer
-/*add comment background*/
- {
+/*add comment background*/ {
background-color: var(--second-background) !important;
}
@@ -2602,8 +2727,7 @@ yt-live-chat-renderer {
yt-live-chat-toast-renderer[is-showing-message]
-/*info for show mode*/
- {
+/*info for show mode*/ {
background: var(--hover-background) !important;
}
@@ -2704,7 +2828,7 @@ yt-live-chat-message-input-renderer {
}
/*hide chat*/
-#show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame {
+#show-hide-button.ytd-live-chat-frame > ytd-toggle-button-renderer.ytd-live-chat-frame {
background: var(--hover-background) !important;
}
@@ -2757,7 +2881,7 @@ yt-formatted-string.yt-emoji-picker-category-renderer {
}
#header-section.ytd-donation-shelf-renderer .style-scope.ytd-donation-shelf-renderer.no-transition {
- filter: invert(.8);
+ filter: invert(0.8);
}
#donate-section.ytd-donation-shelf-renderer,
@@ -2832,22 +2956,28 @@ yt-formatted-string.yt-emoji-picker-category-renderer {
}
/*amount buttons*/
-#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
+#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer
+ ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button]
+ paper-button.ytd-button-renderer {
background-color: var(--second-background) !important;
}
-#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button] paper-button.ytd-button-renderer {
+#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer
+ ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button]
+ paper-button.ytd-button-renderer {
background-color: var(--second-background) !important;
border-color: var(--second-background) !important;
}
-#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button][selected] paper-button.ytd-button-renderer,
+#suggested-amount-buttons-row.ytd-donation-amount-picker-renderer
+ ytd-button-renderer.ytd-donation-amount-picker-renderer[is-paper-button][selected]
+ paper-button.ytd-button-renderer,
.ytd-donation-amount-picker-renderer ytd-button-renderer.style-primary[is-paper-button] {
background-color: var(--main-color) !important;
}
/*curency for other amount*/
-span.prefix.style-scope.paper-input-container>div.ytd-donation-amount-picker-renderer {
+span.prefix.style-scope.paper-input-container > div.ytd-donation-amount-picker-renderer {
color: var(--main-text) !important;
}
@@ -2888,8 +3018,8 @@ span.prefix.style-scope.paper-input-container>div.ytd-donation-amount-picker-ren
.b3-input.populated .b3-input-label,
.b3-input.invalid .b3-input-label,
.b3-input.autofilled .b3-input-label,
-.b3-input-field>.b3-input-label,
-.b3-input-field>.b3-input-label.accessible,
+.b3-input-field > .b3-input-label,
+.b3-input-field > .b3-input-label.accessible,
.b3-collapsing-form-placeholder-text {
color: var(--main-text) !important;
}
@@ -2974,10 +3104,18 @@ span.prefix.style-scope.paper-input-container>div.ytd-donation-amount-picker-ren
border: none !important;
}
-button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge {
+/*bell icon itself*/
+button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spec-icon-badge-shape__badge,
+/*2024-06-01 - why do they use a mask now*/
+div.yt-spec-icon-badge-shape.yt-spec-icon-badge-shape--type-notification div.yt-spec-icon-badge-shape__icon yt-icon yt-icon-shape.style-scope.yt-icon icon-shape.yt-spec-icon-shape div {
color: var(--main-text) !important;
}
+/*2024-06-01*/
+button.yt-icon-button:hover div.yt-spec-icon-badge-shape.yt-spec-icon-badge-shape--type-notification div.yt-spec-icon-badge-shape__icon yt-icon yt-icon-shape.style-scope.yt-icon icon-shape.yt-spec-icon-shape div {
+ color: var(--main-color) !important;
+}
+
/*load spinner - also for comments*/
.spinner-layer.layer-1.tp-yt-paper-spinner,
.spinner-layer.layer-2.tp-yt-paper-spinner,
@@ -2990,8 +3128,7 @@ button.yt-icon-button:hover .yt-spec-icon-badge-shape--type-notification .yt-spe
ytd-notification-renderer.unread #new.ytd-notification-renderer,
.yt-lockup-notification .unread-dot
-/*account settings*/
- {
+/*account settings*/ {
background: var(--main-color) !important;
border-color: var(--main-color) !important;
}
@@ -3002,8 +3139,7 @@ ytd-notification-renderer.unread #new.ytd-notification-renderer,
/*account settings*/
h2.yt-multi-page-menu-section-renderer
-/*comments and notifications headers*/
- {
+/*comments and notifications headers*/ {
color: var(--main-text) !important;
}
@@ -3019,8 +3155,7 @@ ytd-simple-menu-header-renderer .yt-spec-button-shape-next--mono.yt-spec-button-
.metadata.ytd-notification-renderer,
.exp-responsive .yt-lockup-tile .yt-lockup-byline
-/*account settings*/
- {
+/*account settings*/ {
color: var(--dimmer-text) !important;
}
@@ -3048,8 +3183,7 @@ ytd-multi-page-menu-renderer,
/*account settings*/
#yt-masthead-notifications-content
-/*bottom thing - account settings*/
- {
+/*bottom thing - account settings*/ {
background: var(--second-background) !important;
border-color: var(--second-background) !important;
}
@@ -3073,40 +3207,35 @@ ytd-multi-page-menu-renderer,
.yt-uix-clickcard-card-reverse .yt-uix-card-body-arrow-vertical,
.yt-uix-hovercard-card-reverse .yt-uix-card-body-arrow-vertical
-/*account settings*/
- {
+/*account settings*/ {
border-bottom-color: var(--hover-background) !important;
}
/*menu*/
.yt-ui-menu-content
-/*account settings*/
- {
+/*account settings*/ {
background-color: var(--hover-background) !important;
border-color: var(--hover-background) !important;
}
.yt-ui-menu-item
-/*account settings*/
- {
+/*account settings*/ {
background-color: var(--hover-background) !important;
color: var(--main-text) !important;
}
.yt-ui-menu-item:hover
-/*account settings*/
- {
+/*account settings*/ {
color: var(--main-color) !important;
}
/*gear icon*/
.yt-uix-button-icon-icon-account-settings
-/*account settings*/
- {
+/*account settings*/ {
filter: brightness(250%) invert(1);
}
@@ -3123,7 +3252,7 @@ ytd-multi-page-menu-renderer,
border: 0px !important;
}
-.iv-card-content> :first-child,
+.iv-card-content > :first-child,
.html5-video-player a,
.iv-card h2,
.ytp-cards-teaser .ytp-cards-teaser-text {
@@ -3220,7 +3349,7 @@ tp-yt-paper-item.ytd-compact-link-renderer:hover #subtitle.ytd-compact-link-rend
color: var(--main-color) !important;
}
-#footer.ytd-multi-page-menu-renderer>.ytd-multi-page-menu-renderer {
+#footer.ytd-multi-page-menu-renderer > .ytd-multi-page-menu-renderer {
border-color: var(--hover-background) !important;
}
@@ -3290,12 +3419,11 @@ yt-icon.ytd-toggle-theme-compact-link-renderer {
color: var(--main-color) !important;
}
-
/*Autoplay text*/
#upnext.ytd-compact-autoplay-renderer,
#autoplay.ytd-compact-autoplay-renderer {
color: var(--dimmer-text) !important;
- opacity: .8;
+ opacity: 0.8;
}
ytd-compact-autoplay-renderer {
@@ -3316,7 +3444,7 @@ yt-notification-action-renderer[ui-refresh] #sub-text.yt-notification-action-ren
/*Links in video description*/
.description.ytd-video-secondary-info-renderer a {
color: var(--main-color) !important;
- opacity: .9;
+ opacity: 0.9;
}
/*Game cards*/
@@ -3383,10 +3511,9 @@ ytd-ticket-shelf-renderer {
border-color: var(--hover-background) !important;
}
-
/*Author name*/
#owner-name.ytd-video-owner-renderer {
- opacity: .9;
+ opacity: 0.9;
}
#owner-name.ytd-video-owner-renderer:hover {
@@ -3403,7 +3530,7 @@ ytd-toggle-button-renderer.style-compact-gray[is-paper-button] {
.super-title.ytd-video-primary-info-renderer a,
#additional-metadata-line.ytd-video-meta-block {
color: var(--dimmer-text) !important;
- opacity: .8;
+ opacity: 0.8;
}
#selectionBar.paper-tabs {
@@ -3429,7 +3556,7 @@ body.yt-new-promo-page-use-launched-copy .yt-new-promo-page-header {
.yt-new-promo-page-button {
background-color: var(--main-color) !important;
color: var(--main-text) !important;
- opacity: .9;
+ opacity: 0.9;
}
.yt-new-promo-page-button:hover {
@@ -3513,8 +3640,7 @@ html[dark] .skeleton-light-border-bottom {
ytd-alert-with-button-renderer[type="INFO"],
#content-wrapper.yt-alert-with-actions-renderer
-/*TOS*/
- {
+/*TOS*/ {
background-color: var(--hover-background) !important;
}
@@ -3616,7 +3742,9 @@ ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-desti
color: var(--main-text) !important;
}
-ytd-destination-shelf-renderer[is-show-more-visible] #show-more-button.ytd-destination-shelf-renderer:hover #show-more-button-icon.ytd-destination-shelf-renderer {
+ytd-destination-shelf-renderer[is-show-more-visible]
+ #show-more-button.ytd-destination-shelf-renderer:hover
+ #show-more-button-icon.ytd-destination-shelf-renderer {
color: var(--main-color) !important;
}
@@ -3642,6 +3770,20 @@ h3.ytd-compact-station-renderer {
color: var(--dimmer-text) !important;
}
+/*Music info under videos*/
+.yt-video-attribute-view-model__title {
+ color: var(--main-text) !important;
+}
+
+.yt-video-attribute-view-model__subtitle,
+.yt-video-attribute-view-model:hover .yt-video-attribute-view-model__title {
+ color: var(--main-color) !important;
+}
+
+.yt-video-attribute-view-model__secondary-subtitle {
+ color: var(--dimmer-text) !important;
+}
+
/*Gaming*/
#live-viewers-count.ytd-game-details-renderer {
color: var(--dimmer-text) !important;
@@ -3840,8 +3982,8 @@ ytd-settings-sidebar-renderer {
color: var(--dimmer-text) !important;
}
-.exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected>a,
-.exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected>a:hover,
+.exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a,
+.exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item.selected > a:hover,
.exp-kevlar-settings .account-page #creator-sidebar .creator-sidebar-item:hover a {
background-color: var(--hover-background) !important;
color: var(--main-color) !important;
@@ -3875,8 +4017,7 @@ ytd-compact-link-renderer[compact-link-style="compact-link-style-type-settings-s
.guide-section-separator
-/*divider*/
- {
+/*divider*/ {
border-color: var(--hover-background) !important;
}
@@ -3916,30 +4057,26 @@ ytd-settings-options-renderer .yt-formatted-string:not(a).bold {
/*playback*/
#text.ytd-connected-app-renderer
-/*connected accounts*/
- {
+/*connected accounts*/ {
color: var(--dimmer-text) !important;
}
.yt-horizontal-rule
-/*divider*/
- {
+/*divider*/ {
border-color: var(--hover-background) !important;
}
.account-info .account-photo .yt-thumb
-/*avatar*/
- {
+/*avatar*/ {
border-radius: 100%;
}
.account-content a,
.account-header a
-/*various links*/
- {
+/*various links*/ {
color: var(--main-color) !important;
}
@@ -3953,7 +4090,7 @@ h3.account-section-header {
color: var(--main-text) !important;
}
-.yt-uix-form-input-checkbox-container input:checked+.yt-uix-form-input-checkbox-element {
+.yt-uix-form-input-checkbox-container input:checked + .yt-uix-form-input-checkbox-element {
border-color: #000;
filter: invert(1);
}
@@ -3970,8 +4107,7 @@ h3.account-section-header {
.undo-setting-button-section,
.resume-all-settings-button
-/*turn off*/
- {
+/*turn off*/ {
background: var(--main-background) !important;
border-color: var(--main-background) !important;
color: var(--main-color) !important;
@@ -3979,8 +4115,7 @@ h3.account-section-header {
.yt-uix-form-input-select
-/*dropdowns*/
- {
+/*dropdowns*/ {
background: var(--hover-background) !important;
border-color: var(--hover-background) !important;
color: var(--main-text) !important;
@@ -4034,12 +4169,11 @@ label.label-is-floating.tp-yt-paper-dropdown-menu-light,
.exp-kevlar-settings .account-page .yt-uix-button
-/*save buttons*/
- {
+/*save buttons*/ {
background: var(--main-color) !important;
border-color: var(--main-color) !important;
color: var(--main-text) !important;
- opacity: .9;
+ opacity: 0.9;
}
.exp-kevlar-settings .account-page .yt-uix-button:hover {
@@ -4068,7 +4202,7 @@ label.label-is-floating.tp-yt-paper-dropdown-menu-light,
}
h3.pairing-section-header {
- color: var(--main-text)
+ color: var(--main-text);
}
.yt-uix-form-input-select,
@@ -4099,8 +4233,7 @@ body #footer-container {
#footer-main
-/*divider*/
- {
+/*divider*/ {
border-color: var(--hover-background) !important;
}
@@ -4154,8 +4287,7 @@ body #footer-container {
.yt-picker-header,
#safety-form p.safety-submit
-/*divider*/
- {
+/*divider*/ {
border-color: var(--hover-background) !important;
}
@@ -4177,12 +4309,11 @@ p.yt-notes,
#yt-picker-safetymode-footer button
-/*save*/
- {
+/*save*/ {
background: var(--main-color) !important;
border-color: var(--main-color) !important;
color: var(--main-text) !important;
- opacity: .9;
+ opacity: 0.9;
}
/*Notification buttom corner - for settings, watch later etc*/
@@ -4207,7 +4338,6 @@ ytd-hotkey-dialog-section-option-renderer {
border-color: var(--hover-background) !important;
}
-
/*SponsorBlock*/
/*logo change*/
#sponsorBlockPopupLogo,
@@ -4241,8 +4371,7 @@ ytd-hotkey-dialog-section-option-renderer {
/*seems like youtube will never update this page so, yeah*/
#invalid-token-redirect-warning-text
-/*h1*/
- {
+/*h1*/ {
color: var(--main-text) !important;
}
@@ -4273,7 +4402,8 @@ ytd-hotkey-dialog-section-option-renderer {
/*🔍 is missing, nice*/
.search-button-content {
- background: no-repeat url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNy4zOTE3IDE2LjgwODNMMTIuNzMzMyAxMi4xNUMxMy42MjUgMTEuMTI1IDE0LjE2NjcgOS43OTE2NyAxNC4xNjY3IDguMzMzMzNDMTQuMTY2NyA1LjEwODMzIDExLjU1ODMgMi41IDguMzMzMzMgMi41QzUuMTA4MzMgMi41IDIuNSA1LjEwODMzIDIuNSA4LjMzMzMzQzIuNSAxMS41NTgzIDUuMTA4MzMgMTQuMTY2NyA4LjMzMzMzIDE0LjE2NjdDOS43OTE2NyAxNC4xNjY3IDExLjEyNSAxMy42MjUgMTIuMTUgMTIuNzQxN0wxNi44MDgzIDE3LjRMMTcuMzkxNyAxNi44MDgzWk04LjMzMzMzIDEzLjMzMzNDNS41NzUgMTMuMzMzMyAzLjMzMzMzIDExLjA5MTcgMy4zMzMzMyA4LjMzMzMzQzMuMzMzMzMgNS41NzUgNS41NzUgMy4zMzMzMyA4LjMzMzMzIDMuMzMzMzNDMTEuMDkxNyAzLjMzMzMzIDEzLjMzMzMgNS41NzUgMTMuMzMzMyA4LjMzMzMzQzEzLjMzMzMgMTEuMDkxNyAxMS4wOTE3IDEzLjMzMzMgOC4zMzMzMyAxMy4zMzMzWiIgZmlsbD0iIzAzMDMwMyIvPjwvc3ZnPg==") !important;
+ background: no-repeat
+ url("data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNy4zOTE3IDE2LjgwODNMMTIuNzMzMyAxMi4xNUMxMy42MjUgMTEuMTI1IDE0LjE2NjcgOS43OTE2NyAxNC4xNjY3IDguMzMzMzNDMTQuMTY2NyA1LjEwODMzIDExLjU1ODMgMi41IDguMzMzMzMgMi41QzUuMTA4MzMgMi41IDIuNSA1LjEwODMzIDIuNSA4LjMzMzMzQzIuNSAxMS41NTgzIDUuMTA4MzMgMTQuMTY2NyA4LjMzMzMzIDE0LjE2NjdDOS43OTE2NyAxNC4xNjY3IDExLjEyNSAxMy42MjUgMTIuMTUgMTIuNzQxN0wxNi44MDgzIDE3LjRMMTcuMzkxNyAxNi44MDgzWk04LjMzMzMzIDEzLjMzMzNDNS41NzUgMTMuMzMzMyAzLjMzMzMzIDExLjA5MTcgMy4zMzMzMyA4LjMzMzMzQzMuMzMzMzMgNS41NzUgNS41NzUgMy4zMzMzMyA4LjMzMzMzIDMuMzMzMzNDMTEuMDkxNyAzLjMzMzMzIDEzLjMzMzMgNS41NzUgMTMuMzMzMyA4LjMzMzMzQzEzLjMzMzMgMTEuMDkxNyAxMS4wOTE3IDEzLjMzMzMgOC4zMzMzMyAxMy4zMzMzWiIgZmlsbD0iIzAzMDMwMyIvPjwvc3ZnPg==") !important;
filter: invert(1);
}
@@ -4295,4 +4425,5 @@ ytd-hotkey-dialog-section-option-renderer {
#logo-container .content-region {
color: var(--main-text) !important;
-}`;
+}
+`;
diff --git a/src/features/buttonPlacement/index.ts b/src/features/buttonPlacement/index.ts
index d093cfee..97627ba4 100644
--- a/src/features/buttonPlacement/index.ts
+++ b/src/features/buttonPlacement/index.ts
@@ -13,11 +13,12 @@ export async function addFeatureButton,
listener: ListenerType,
- isToggle: boolean
+ isToggle: boolean,
+ initialChecked: boolean = false
) {
switch (placement) {
case "feature_menu": {
- if (icon instanceof SVGSVGElement) await addFeatureItemToMenu(buttonName, label, icon, listener, isToggle);
+ if (icon instanceof SVGSVGElement) await addFeatureItemToMenu(buttonName, label, icon, listener, isToggle, initialChecked);
break;
}
case "below_player":
@@ -25,7 +26,7 @@ export async function addFeatureButton,
listener: ListenerType,
- isToggle: boolean
+ isToggle: boolean,
+ initialChecked: boolean = false
) {
const featureName = findKeyByValue(buttonName as MultiButtonNames) ?? (buttonName as SingleButtonFeatureNames);
if (placement === "feature_menu") throw new Error("Cannot make a feature button for the feature menu");
@@ -49,7 +50,6 @@ export function makeFeatureButton("button.ytp-settings-button");
if (!settingsButton) return;
- const playerContainer = isWatchPage() ? document.querySelector("div#player-container.ytd-watch-flexy") : null;
+ const playerContainer =
+ isWatchPage() ?
+ document.querySelector(
+ isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
+ )
+ : null;
if (!playerContainer) return;
// Insert the feature menu button and feature menu itself
settingsButton.insertAdjacentElement("beforebegin", featureMenuButton);
@@ -105,7 +112,12 @@ export function setupFeatureMenuEventListeners(featureMenuOpenType: FeatureMenuO
eventManager.removeEventListeners("featureMenu");
const settingsButton = document.querySelector("button.ytp-settings-button");
if (!settingsButton) return;
- const playerContainer = isWatchPage() ? document.querySelector("div#player-container.ytd-watch-flexy") : null;
+ const playerContainer =
+ isWatchPage() ?
+ document.querySelector(
+ isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
+ )
+ : null;
if (!playerContainer) return;
const bottomControls = document.querySelector("div.ytp-chrome-bottom");
if (!bottomControls) return;
diff --git a/src/features/featureMenu/utils.ts b/src/features/featureMenu/utils.ts
index 017e3151..f3cec0be 100644
--- a/src/features/featureMenu/utils.ts
+++ b/src/features/featureMenu/utils.ts
@@ -31,13 +31,15 @@ function featureMenuClickListener(menuItem: HTML
* @param icon The icon for the feature
* @param listener The listener for the feature
* @param isToggle Whether the feature is a toggle
+ * @param initialChecked The initial checked state of the feature
*/
export async function addFeatureItemToMenu(
buttonName: Name,
label: string,
icon: BasicIcon,
listener: ListenerType,
- isToggle: boolean
+ isToggle: boolean,
+ initialChecked: boolean = false
) {
const featureName = findKeyByValue(buttonName as MultiButtonNames) ?? (buttonName as SingleButtonFeatureNames);
// Add the feature name to the set of features in the menu
@@ -95,7 +97,7 @@ export async function addFeatureItemToMenu {
+ // Get the player element
+ const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ // If player element is not available, return
+ if (!playerContainer) return;
+ if (!playerContainer.seekTo) return;
+ const currentTime = await playerContainer.getCurrentTime();
+ await playerContainer.seekTo(currentTime + timeAdjustment * (direction === "forward" ? 1 : -1), true);
+};
+export const addForwardButton: AddButtonFunction = async () => {
+ const {
+ data: {
+ options: {
+ button_placements: { forwardButton: forwardButtonPlacement },
+ enable_forward_rewind_buttons,
+ forward_rewind_buttons_time
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_forward_rewind_buttons) return;
+ // Get the player element
+ const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ // If player element is not available, return
+ if (!playerContainer) return;
+ const playerVideoData = await playerContainer.getVideoData();
+ // If the video is live return
+ if (playerVideoData.isLive) return;
+ await addFeatureButton(
+ "forwardButton",
+ forwardButtonPlacement,
+ window.i18nextInstance.t("pages.content.features.forwardRewindButtons.buttons.forwardButton.label", {
+ TIME: Measure.of(forward_rewind_buttons_time, seconds).toString()
+ }),
+ getFeatureIcon("forwardButton", forwardButtonPlacement),
+ () => void speedButtonListener("forward", forward_rewind_buttons_time),
+ false
+ );
+};
+export const addRewindButton: AddButtonFunction = async () => {
+ const {
+ data: {
+ options: {
+ button_placements: { rewindButton: rewindButtonPlacement },
+ enable_forward_rewind_buttons,
+ forward_rewind_buttons_time
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_forward_rewind_buttons) return;
+ // Get the player element
+ const playerContainer = isWatchPage() ? document.querySelector("div#movie_player") : null;
+ // If player element is not available, return
+ if (!playerContainer) return;
+ const playerVideoData = await playerContainer.getVideoData();
+ // If the video is live return
+ if (playerVideoData.isLive) return;
+ await addFeatureButton(
+ "rewindButton",
+ rewindButtonPlacement,
+ window.i18nextInstance.t("pages.content.features.forwardRewindButtons.buttons.rewindButton.label", {
+ TIME: Measure.of(forward_rewind_buttons_time, seconds).toString()
+ }),
+ getFeatureIcon("rewindButton", rewindButtonPlacement),
+ () => void speedButtonListener("backward", forward_rewind_buttons_time),
+ false
+ );
+};
+
+export const removeForwardButton: RemoveButtonFunction = async (placement) => {
+ await removeFeatureButton("forwardButton", placement);
+ eventManager.removeEventListeners("forwardRewindButtons");
+};
+export const removeRewindButton: RemoveButtonFunction = async (placement) => {
+ await removeFeatureButton("rewindButton", placement);
+ eventManager.removeEventListeners("forwardRewindButtons");
+};
diff --git a/src/features/hideEndScreenCards/index.ts b/src/features/hideEndScreenCards/index.ts
index 3117155d..5cc9964f 100644
--- a/src/features/hideEndScreenCards/index.ts
+++ b/src/features/hideEndScreenCards/index.ts
@@ -1,3 +1,10 @@
+import type { AddButtonFunction, RemoveButtonFunction } from "@/src/features";
+import type { ButtonPlacement } from "@/src/types";
+
+import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
+import { updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureIcon } from "@/src/icons";
+import eventManager from "@/src/utils/EventManager";
import { modifyElementsClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
import "./index.css";
@@ -8,8 +15,58 @@ export async function enableHideEndScreenCards() {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enableHideEndScreenCards) return;
+ await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ hideEndScreenCards();
+}
+export async function disableHideEndScreenCards() {
+ await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ showEndScreenCards();
+}
+export const addHideEndScreenCardsButton: AddButtonFunction = async () => {
+ const {
+ data: {
+ options: {
+ button_placements: { hideEndScreenCardsButton: hideEndScreenCardsButtonPlacement },
+ enable_hide_end_screen_cards_button: enableHideEndScreenCardsButton
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enableHideEndScreenCardsButton) return;
await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+ const endScreenCardsAreHidden = isEndScreenCardsHidden();
+ const handleButtonClick = (placement: ButtonPlacement, checked?: boolean) => {
+ if (placement === "feature_menu") {
+ if (checked && !isEndScreenCardsHidden()) hideEndScreenCards();
+ else if (!checked && isEndScreenCardsHidden()) showEndScreenCards();
+ } else {
+ updateFeatureButtonTitle(
+ "hideEndScreenCardsButton",
+ window.i18nextInstance.t(`pages.content.features.hideEndScreenCardsButton.button.toggle.${checked ? "on" : "off"}`)
+ );
+ if (checked && isEndScreenCardsHidden()) showEndScreenCards();
+ else if (!checked && !isEndScreenCardsHidden()) hideEndScreenCards();
+ }
+ };
+ await addFeatureButton(
+ "hideEndScreenCardsButton",
+ hideEndScreenCardsButtonPlacement,
+ window.i18nextInstance.t(
+ hideEndScreenCardsButtonPlacement === "feature_menu" ?
+ "pages.content.features.hideEndScreenCardsButton.button.label"
+ : `pages.content.features.hideEndScreenCardsButton.button.toggle.${!endScreenCardsAreHidden ? "on" : "off"}`
+ ),
+ getFeatureIcon("hideEndScreenCardsButton", hideEndScreenCardsButtonPlacement),
+ (checked) => handleButtonClick(hideEndScreenCardsButtonPlacement, checked),
+ true,
+ hideEndScreenCardsButtonPlacement !== "feature_menu" ? !endScreenCardsAreHidden : endScreenCardsAreHidden
+ );
+};
+export const removeHideEndScreenCardsButton: RemoveButtonFunction = async (placement) => {
+ await removeFeatureButton("hideEndScreenCardsButton", placement);
+ eventManager.removeEventListeners("hideEndScreenCardsButton");
+};
+function hideEndScreenCards() {
modifyElementsClassList(
"add",
Array.from(document.querySelectorAll(".ytp-ce-element")).map((element) => ({
@@ -18,9 +75,7 @@ export async function enableHideEndScreenCards() {
}))
);
}
-
-export async function disableHideEndScreenCards() {
- await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
+function showEndScreenCards() {
modifyElementsClassList(
"remove",
Array.from(document.querySelectorAll(".ytp-ce-element")).map((element) => ({
@@ -29,3 +84,7 @@ export async function disableHideEndScreenCards() {
}))
);
}
+export function isEndScreenCardsHidden(): boolean {
+ const endCards = document.querySelectorAll(".ytp-ce-element.yte-hide-end-screen-cards");
+ return endCards.length > 0;
+}
diff --git a/src/features/hidePaidPromotionBanner/index.css b/src/features/hidePaidPromotionBanner/index.css
new file mode 100644
index 00000000..4d2753fe
--- /dev/null
+++ b/src/features/hidePaidPromotionBanner/index.css
@@ -0,0 +1,3 @@
+.yte-hide-paid-promotion-banner {
+ display: none !important;
+}
\ No newline at end of file
diff --git a/src/features/hidePaidPromotionBanner/index.ts b/src/features/hidePaidPromotionBanner/index.ts
new file mode 100644
index 00000000..377e3cf3
--- /dev/null
+++ b/src/features/hidePaidPromotionBanner/index.ts
@@ -0,0 +1,23 @@
+import { modifyElementClassList, waitForSpecificMessage } from "@/src/utils/utilities";
+
+import "./index.css";
+
+export async function enableHidePaidPromotionBanner() {
+ const {
+ data: {
+ options: { enable_hide_paid_promotion_banner }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_hide_paid_promotion_banner) return;
+ modifyElementClassList("add", {
+ className: "yte-hide-paid-promotion-banner",
+ element: document.querySelector(".ytp-paid-content-overlay")
+ });
+}
+
+export function disableHidePaidPromotionBanner() {
+ modifyElementClassList("remove", {
+ className: "yte-hide-paid-promotion-banner",
+ element: document.querySelector(".ytp-paid-content-overlay")
+ });
+}
diff --git a/src/features/hideTranslateComment/index.ts b/src/features/hideTranslateComment/index.ts
index 01b78174..c09a669f 100644
--- a/src/features/hideTranslateComment/index.ts
+++ b/src/features/hideTranslateComment/index.ts
@@ -1,10 +1,37 @@
import type { Nullable } from "@/src/types";
-import { observeTranslateComment, translateButtonSelector } from "@/src/features/hideTranslateComment/utils";
-import { modifyElementClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
+import {
+ type EngagementPanelVisibility,
+ observeCommentsPanelVisibilityChange,
+ observeTranslateComment,
+ translateButtonSelector
+} from "@/src/features/hideTranslateComment/utils";
+import { isNewYouTubeVideoLayout, modifyElementClassList, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
import "./index.css";
+export const commentsPanelSelector = "ytd-engagement-panel-section-list-renderer[target-id='engagement-panel-comments-section']";
+export const commentsHeaderSelector = "ytd-item-section-renderer.ytd-comments div#header div#leading-section";
let translateCommentObserver: Nullable = null;
+let commentsPanelObserver: Nullable = null;
+type ObserverType = "commentsPanel" | "translateComment";
+export function setHideTranslateCommentObserver(observerType: ObserverType, observer: MutationObserver) {
+ observerType === "translateComment" ? (translateCommentObserver = observer) : (commentsPanelObserver = observer);
+}
+export function cleanUpHideTranslateCommentObserver(observerType: ObserverType) {
+ if (observerType === "translateComment") {
+ translateCommentObserver?.disconnect();
+ translateCommentObserver = null;
+ } else {
+ commentsPanelObserver?.disconnect();
+ commentsPanelObserver = null;
+ }
+}
+export function toggleHideTranslateCommentButtonsVisibility(visible: boolean) {
+ const translateCommentButtons = document.querySelectorAll(translateButtonSelector);
+ translateCommentButtons.forEach((button) =>
+ modifyElementClassList(!visible ? "add" : "remove", { className: "yte-hide-translate-comment", element: button })
+ );
+}
export async function enableHideTranslateComment() {
const {
data: {
@@ -12,16 +39,39 @@ export async function enableHideTranslateComment() {
}
} = await waitForSpecificMessage("options", "request_data", "content");
if (!enable_hide_translate_comment) return;
- await waitForAllElements(["ytd-item-section-renderer.ytd-comments div#header div#leading-section"]);
- const translateCommentButtons = document.querySelectorAll(translateButtonSelector);
- translateCommentButtons.forEach((button) => modifyElementClassList("add", { className: "yte-hide-translate-comment", element: button }));
- translateCommentObserver = observeTranslateComment();
+ const isNewVideLayout = isNewYouTubeVideoLayout();
+ if (isNewVideLayout) {
+ await waitForAllElements([commentsPanelSelector]);
+ const commentsPanelElement = document.querySelector(commentsPanelSelector);
+ if (
+ commentsPanelElement &&
+ (commentsPanelElement.getAttribute("visibility") as EngagementPanelVisibility) === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"
+ )
+ toggleHideTranslateCommentButtonsVisibility(false);
+ const observer = observeCommentsPanelVisibilityChange();
+ if (observer) setHideTranslateCommentObserver("commentsPanel", observer);
+ } else {
+ await waitForAllElements([commentsHeaderSelector]);
+ toggleHideTranslateCommentButtonsVisibility(false);
+ const observer = observeTranslateComment();
+ if (observer) setHideTranslateCommentObserver("translateComment", observer);
+ }
}
export async function disableHideTranslateComment() {
- await waitForAllElements(["ytd-item-section-renderer.ytd-comments div#header div#leading-section"]);
- translateCommentObserver?.disconnect();
- translateCommentObserver = null;
- const translateCommentButtons = document.querySelectorAll(translateButtonSelector);
- translateCommentButtons.forEach((button) => modifyElementClassList("remove", { className: "yte-hide-translate-comment", element: button }));
+ cleanUpHideTranslateCommentObserver("commentsPanel");
+ cleanUpHideTranslateCommentObserver("translateComment");
+ const isNewVideLayout = isNewYouTubeVideoLayout();
+ if (isNewVideLayout) {
+ await waitForAllElements([commentsPanelSelector]);
+ const commentsPanelElement = document.querySelector(commentsPanelSelector);
+ if (
+ commentsPanelElement &&
+ (commentsPanelElement.getAttribute("visibility") as EngagementPanelVisibility) === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"
+ )
+ toggleHideTranslateCommentButtonsVisibility(true);
+ } else {
+ await waitForAllElements([commentsHeaderSelector]);
+ toggleHideTranslateCommentButtonsVisibility(true);
+ }
}
diff --git a/src/features/hideTranslateComment/utils.ts b/src/features/hideTranslateComment/utils.ts
index 4ae1afb3..c8b93640 100644
--- a/src/features/hideTranslateComment/utils.ts
+++ b/src/features/hideTranslateComment/utils.ts
@@ -1,26 +1,67 @@
-import { modifyElementClassList } from "@/src/utils/utilities";
+import {
+ cleanUpHideTranslateCommentObserver,
+ commentsPanelSelector,
+ setHideTranslateCommentObserver,
+ toggleHideTranslateCommentButtonsVisibility
+} from "@/src/features/hideTranslateComment";
+import { isNewYouTubeVideoLayout, modifyElementClassList } from "@/src/utils/utilities";
export const translateButtonSelector = "ytd-tri-state-button-view-model.translate-button";
-
-export function observeTranslateComment() {
+export const engagementPanelVisibility = ["ENGAGEMENT_PANEL_VISIBILITY_HIDDEN", "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED"] as const;
+export type EngagementPanelVisibility = (typeof engagementPanelVisibility)[number];
+export function observeTranslateComment(): MutationObserver {
const observer = new MutationObserver((mutationList) => {
- mutationList.forEach((mutation) => {
- const translateButtons = Array.from(mutation.addedNodes).some(
- (addedNode) =>
- addedNode instanceof Element &&
- addedNode.matches("ytd-comment-thread-renderer") &&
- addedNode.querySelector(translateButtonSelector) !== null
- );
- if (mutation.type !== "childList" || !mutation.addedNodes.length || !translateButtons) return;
- mutation.addedNodes.forEach((addedNode) => {
- modifyElementClassList("add", {
- className: "yte-hide-translate-comment",
- element: (addedNode as Element).querySelector(translateButtonSelector)
+ mutationList
+ .filter(
+ (mutation) =>
+ mutation.type !== "childList" ||
+ !mutation.addedNodes.length ||
+ Array.from(mutation.addedNodes).some(
+ (addedNode) =>
+ addedNode instanceof Element &&
+ addedNode.matches("ytd-comment-thread-renderer") &&
+ addedNode.querySelector(translateButtonSelector) !== null
+ )
+ )
+ .forEach((mutation) => {
+ mutation.addedNodes.forEach((addedNode) => {
+ modifyElementClassList("add", {
+ className: "yte-hide-translate-comment",
+ element: (addedNode as Element).querySelector(translateButtonSelector)
+ });
});
});
- });
});
- const commentsSection = document.querySelector("ytd-item-section-renderer.ytd-comments div#contents");
- if (!commentsSection) return null;
+ const commentsSection = document.querySelector(
+ isNewYouTubeVideoLayout() ?
+ "ytd-comments ytd-item-section-renderer#sections.ytd-comments div#contents"
+ : "ytd-comments.ytd-watch-flexy ytd-item-section-renderer#sections.ytd-comments div#contents"
+ ) as Element;
observer.observe(commentsSection, { childList: true, subtree: true });
return observer;
}
+
+export function observeCommentsPanelVisibilityChange(): MutationObserver {
+ const observer = new MutationObserver((mutationList) => {
+ mutationList.forEach((mutation) => {
+ if (mutation.attributeName === "visibility") {
+ const target = mutation.target as HTMLElement;
+ if (!target) return;
+ const visibility = target.getAttribute("visibility");
+ if (!visibility) return;
+ if (!engagementPanelVisibility.includes(visibility)) return;
+ const castVisibility = visibility as EngagementPanelVisibility;
+ if (castVisibility === "ENGAGEMENT_PANEL_VISIBILITY_EXPANDED") {
+ toggleHideTranslateCommentButtonsVisibility(false);
+ const observer = observeTranslateComment();
+ if (observer) setHideTranslateCommentObserver("translateComment", observer);
+ } else {
+ cleanUpHideTranslateCommentObserver("translateComment");
+ toggleHideTranslateCommentButtonsVisibility(false);
+ }
+ }
+ });
+ });
+ const commentsPanel = document.querySelector(commentsPanelSelector) as Element;
+ observer.observe(commentsPanel, { attributeFilter: ["visibility"] });
+ return observer;
+}
diff --git a/src/features/index.ts b/src/features/index.ts
index 9034da11..7e39448d 100644
--- a/src/features/index.ts
+++ b/src/features/index.ts
@@ -1,5 +1,7 @@
import type { AllButtonNames, ButtonPlacement } from "@/src/types";
+import { addForwardButton, addRewindButton, removeForwardButton, removeRewindButton } from "@/src/features/forwardRewindButtons";
+import { addHideEndScreenCardsButton, removeHideEndScreenCardsButton } from "@/src/features/hideEndScreenCards";
import { addLoopButton, removeLoopButton } from "@/src/features/loopButton";
import { addMaximizePlayerButton, removeMaximizePlayerButton } from "@/src/features/maximizePlayerButton";
import { addOpenTranscriptButton, removeOpenTranscriptButton } from "@/src/features/openTranscriptButton/utils";
@@ -22,6 +24,14 @@ export const featureButtonFunctions = {
add: addDecreasePlaybackSpeedButton,
remove: removeDecreasePlaybackSpeedButton
},
+ forwardButton: {
+ add: addForwardButton,
+ remove: removeForwardButton
+ },
+ hideEndScreenCardsButton: {
+ add: addHideEndScreenCardsButton,
+ remove: removeHideEndScreenCardsButton
+ },
increasePlaybackSpeedButton: {
add: addIncreasePlaybackSpeedButton,
remove: removeIncreasePlaybackSpeedButton
@@ -38,6 +48,10 @@ export const featureButtonFunctions = {
add: addOpenTranscriptButton,
remove: removeOpenTranscriptButton
},
+ rewindButton: {
+ add: addRewindButton,
+ remove: removeRewindButton
+ },
screenshotButton: {
add: addScreenshotButton,
remove: removeScreenshotButton
diff --git a/src/features/loopButton/index.ts b/src/features/loopButton/index.ts
index 3ec163e6..05377dde 100644
--- a/src/features/loopButton/index.ts
+++ b/src/features/loopButton/index.ts
@@ -37,12 +37,12 @@ export const addLoopButton: AddButtonFunction = async () => {
loopButtonPlacement === "feature_menu" ?
window.i18nextInstance.t("pages.content.features.loopButton.button.label")
: window.i18nextInstance.t("pages.content.features.loopButton.button.toggle.off"),
- getFeatureIcon("loopButton", loopButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("loopButton", loopButtonPlacement),
loopButtonClickListener,
true
);
const loopChangedHandler = (mutationList: MutationRecord[]) => {
- const loopSVG = getFeatureIcon("loopButton", loopButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu");
+ const loopSVG = getFeatureIcon("loopButton", loopButtonPlacement);
for (const mutation of mutationList) {
if (mutation.type === "attributes") {
const { attributeName, target } = mutation;
diff --git a/src/features/maximizePlayerButton/index.ts b/src/features/maximizePlayerButton/index.ts
index 888ef762..e85cb33d 100644
--- a/src/features/maximizePlayerButton/index.ts
+++ b/src/features/maximizePlayerButton/index.ts
@@ -61,7 +61,7 @@ export const addMaximizePlayerButton: AddButtonFunction = async () => {
maximizePlayer();
maximizePlayerButton.ariaChecked = "false";
const button = getFeatureButton("maximizePlayerButton");
- const icon = getFeatureIcon("maximizePlayerButton", "shared_icon_position");
+ const icon = getFeatureIcon("maximizePlayerButton", "below_player");
if (button && button instanceof HTMLButtonElement) {
if (typeof icon === "object" && "off" in icon && "on" in icon) updateFeatureButtonIcon(button, icon.off);
updateFeatureButtonTitle("maximizePlayerButton", window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.toggle.off"));
@@ -74,7 +74,7 @@ export const addMaximizePlayerButton: AddButtonFunction = async () => {
maximizePlayerButtonPlacement === "feature_menu" ?
window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.label")
: window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.toggle.off"),
- getFeatureIcon("maximizePlayerButton", maximizePlayerButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("maximizePlayerButton", maximizePlayerButtonPlacement),
maximizePlayerButtonClickListener,
true
);
diff --git a/src/features/openTranscriptButton/utils.ts b/src/features/openTranscriptButton/utils.ts
index fe688baf..f4e52577 100644
--- a/src/features/openTranscriptButton/utils.ts
+++ b/src/features/openTranscriptButton/utils.ts
@@ -24,7 +24,7 @@ export const addOpenTranscriptButton: AddButtonFunction = async () => {
"openTranscriptButton",
openTranscriptButtonPlacement,
window.i18nextInstance.t("pages.content.features.openTranscriptButton.button.label"),
- getFeatureIcon("openTranscriptButton", openTranscriptButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("openTranscriptButton", openTranscriptButtonPlacement),
transcriptButtonClickerListener,
false
);
diff --git a/src/features/openYouTubeSettingsOnHover/index.ts b/src/features/openYouTubeSettingsOnHover/index.ts
index 20a8b451..c63e1c76 100644
--- a/src/features/openYouTubeSettingsOnHover/index.ts
+++ b/src/features/openYouTubeSettingsOnHover/index.ts
@@ -1,7 +1,7 @@
-import type { Nullable, YouTubePlayerDiv } from "@/src/types";
+import type { Nullable } from "@/src/types";
import eventManager from "@/src/utils/EventManager";
-import { isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
+import { isNewYouTubeVideoLayout, isWatchPage, waitForSpecificMessage } from "@/src/utils/utilities";
export async function enableOpenYouTubeSettingsOnHover() {
// Wait for the "options" message from the content script
@@ -22,7 +22,12 @@ export async function enableOpenYouTubeSettingsOnHover() {
const featureMenu = document.querySelector("div.ytp-settings-menu#yte-feature-menu");
if (!featureMenu) return;
// Get the player element
- const playerContainer = isWatchPage() ? document.querySelector("div#player-container.ytd-watch-flexy") : null;
+ const playerContainer =
+ isWatchPage() ?
+ document.querySelector(
+ isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
+ )
+ : null;
// If player element is not available, return
if (!playerContainer) return;
const showSettings = () => {
diff --git a/src/features/playbackSpeedButtons/index.ts b/src/features/playbackSpeedButtons/index.ts
index 8bb48477..c45e9d42 100644
--- a/src/features/playbackSpeedButtons/index.ts
+++ b/src/features/playbackSpeedButtons/index.ts
@@ -119,7 +119,7 @@ export const addIncreasePlaybackSpeedButton: AddButtonFunction = async () => {
window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.increasePlaybackSpeedButton.label", {
SPEED: currentPlaybackSpeed + playbackSpeedPerClick
}),
- getFeatureIcon("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("increasePlaybackSpeedButton", increasePlaybackSpeedButtonPlacement),
playbackSpeedButtonClickListener(playbackSpeedPerClick),
false
);
@@ -143,7 +143,7 @@ export const addDecreasePlaybackSpeedButton: AddButtonFunction = async () => {
window.i18nextInstance.t("pages.content.features.playbackSpeedButtons.buttons.decreasePlaybackSpeedButton.label", {
SPEED: currentPlaybackSpeed - playbackSpeedPerClick
}),
- getFeatureIcon("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("decreasePlaybackSpeedButton", decreasePlaybackSpeedButtonPlacement),
playbackSpeedButtonClickListener(-playbackSpeedPerClick),
false
);
diff --git a/src/features/playerQuality/index.ts b/src/features/playerQuality/index.ts
index 7cf8553d..f6559dc9 100644
--- a/src/features/playerQuality/index.ts
+++ b/src/features/playerQuality/index.ts
@@ -13,7 +13,7 @@ export default async function setPlayerQuality(): Promise {
const optionsData = await waitForSpecificMessage("options", "request_data", "content");
const {
data: {
- options: { enable_automatically_set_quality, player_quality }
+ options: { enable_automatically_set_quality, player_quality, player_quality_fallback_strategy }
}
} = optionsData;
@@ -40,7 +40,7 @@ export default async function setPlayerQuality(): Promise {
// Check if the specified player quality is available
if (player_quality && player_quality !== "auto") {
- const closestQuality = chooseClosestQuality(player_quality, availableQualityLevels);
+ const closestQuality = chooseClosestQuality(player_quality, availableQualityLevels, player_quality_fallback_strategy);
if (!closestQuality) return;
// Log the message indicating the player quality being set
browserColorLog(`Setting player quality to ${closestQuality}`, "FgMagenta");
diff --git a/src/features/screenshotButton/index.ts b/src/features/screenshotButton/index.ts
index c1b4321e..edb1da6a 100644
--- a/src/features/screenshotButton/index.ts
+++ b/src/features/screenshotButton/index.ts
@@ -96,7 +96,7 @@ export const addScreenshotButton: AddButtonFunction = async () => {
"screenshotButton",
screenshotButtonPlacement,
window.i18nextInstance.t("pages.content.features.screenshotButton.button.label"),
- getFeatureIcon("screenshotButton", screenshotButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("screenshotButton", screenshotButtonPlacement),
screenshotButtonClickListener,
false
);
diff --git a/src/features/skipContinueWatching/index.ts b/src/features/skipContinueWatching/index.ts
index 53c71f00..13d04688 100644
--- a/src/features/skipContinueWatching/index.ts
+++ b/src/features/skipContinueWatching/index.ts
@@ -1,6 +1,6 @@
-import { browserColorLog, waitForSpecificMessage } from "@/src/utils/utilities";
+import { browserColorLog, isNewYouTubeVideoLayout, waitForSpecificMessage } from "@/src/utils/utilities";
-interface YtdWatchFlexyElement extends Element {
+interface YtdWatchElement extends Element {
youthereDataChanged_: () => void;
}
@@ -13,8 +13,8 @@ export async function enableSkipContinueWatching() {
} = optionsData;
if (!enable_skip_continue_watching) return;
browserColorLog("Enabling skipContinueWatching", "FgMagenta");
- const ytdWatchFlexyElement = document.querySelector("ytd-watch-flexy");
- if (ytdWatchFlexyElement) {
- (ytdWatchFlexyElement as YtdWatchFlexyElement).youthereDataChanged_ = function () {};
+ const ytdWatchElement = document.querySelector(isNewYouTubeVideoLayout() ? "ytd-watch-grid" : "ytd-watch-flexy");
+ if (ytdWatchElement) {
+ (ytdWatchElement as YtdWatchElement).youthereDataChanged_ = function () {};
}
}
diff --git a/src/features/volumeBoost/index.ts b/src/features/volumeBoost/index.ts
index 8baeaf1c..80bd634b 100644
--- a/src/features/volumeBoost/index.ts
+++ b/src/features/volumeBoost/index.ts
@@ -79,7 +79,7 @@ export const addVolumeBoostButton: AddButtonFunction = async () => {
volumeBoostButtonPlacement === "feature_menu" ?
window.i18nextInstance.t("pages.content.features.volumeBoostButton.button.label")
: window.i18nextInstance.t(`pages.content.features.volumeBoostButton.button.toggle.off`),
- getFeatureIcon("volumeBoostButton", volumeBoostButtonPlacement !== "feature_menu" ? "shared_icon_position" : "feature_menu"),
+ getFeatureIcon("volumeBoostButton", volumeBoostButtonPlacement),
(checked) => {
void (async () => {
if (checked !== undefined) {
diff --git a/src/hooks/useNotifications/provider.tsx b/src/hooks/useNotifications/provider.tsx
index 8f4ecb2f..cfdeb0a0 100644
--- a/src/hooks/useNotifications/provider.tsx
+++ b/src/hooks/useNotifications/provider.tsx
@@ -46,30 +46,22 @@ export const NotificationsProvider = ({ children }: NotificationProviderProps) =
let animationFrameId: null | number = null;
const updateNotifications = () => {
const now = Date.now();
- setNotifications((notifications) => {
- return notifications
- .map((notification) => {
- const timePassed = now - (notification.timestamp ?? now);
- const { removeAfterMs: progressBarDuration } = notification;
- const progress = Math.max(100 - (timePassed / (progressBarDuration ?? 3000)) * 100, 0);
- if (progress <= 0) {
- // Automatically hide the notification when progress reaches 0
- return null;
- }
- return {
- ...notification,
- progress
- };
- })
- .filter(Boolean);
+ setNotifications((prevNotifications) => {
+ if (prevNotifications.length === 0) return prevNotifications;
+ return prevNotifications.reduce((acc: Notification[], notification) => {
+ const elapsed = now - (notification.timestamp ?? now);
+ const progress = Math.max(100 - (elapsed / (notification.removeAfterMs ?? 3000)) * 100, 0);
+ if (progress > 0) {
+ acc.push({ ...notification, progress });
+ }
+ return acc;
+ }, []);
});
animationFrameId = requestAnimationFrame(updateNotifications);
};
updateNotifications();
return () => {
- if (animationFrameId !== null) {
- cancelAnimationFrame(animationFrameId);
- }
+ if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
};
}, []);
const contextValue = { addNotification, notifications, removeNotification } satisfies NotificationsContextProps;
diff --git a/src/hooks/useSectionTitle/context.ts b/src/hooks/useSectionTitle/context.ts
new file mode 100644
index 00000000..d00acb75
--- /dev/null
+++ b/src/hooks/useSectionTitle/context.ts
@@ -0,0 +1,6 @@
+import { createContext } from "react";
+
+export type SectionTitleContextProps = {
+ title: string;
+};
+export const SectionTitleContext = createContext(undefined);
diff --git a/src/hooks/useSectionTitle/index.ts b/src/hooks/useSectionTitle/index.ts
new file mode 100644
index 00000000..cf52d3c3
--- /dev/null
+++ b/src/hooks/useSectionTitle/index.ts
@@ -0,0 +1,14 @@
+import { useContext } from "react";
+
+import { SectionTitleContext } from "./context";
+
+const useSectionTitle = () => {
+ const context = useContext(SectionTitleContext);
+
+ if (context === undefined) {
+ throw new Error("useSectionTitle must be used within a SectionTitleProvider");
+ }
+
+ return context;
+};
+export default useSectionTitle;
diff --git a/src/hooks/useSectionTitle/provider.tsx b/src/hooks/useSectionTitle/provider.tsx
new file mode 100644
index 00000000..4c3245e5
--- /dev/null
+++ b/src/hooks/useSectionTitle/provider.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/src/utils/utilities";
+
+import { SectionTitleContext, type SectionTitleContextProps } from "./context";
+export const SectionTitleProvider = (
+ context: {
+ children: React.ReactNode;
+ className: string;
+ } & SectionTitleContextProps
+) => {
+ return (
+
+
+
+ );
+};
diff --git a/src/hooks/useSettingsFilter/context.ts b/src/hooks/useSettingsFilter/context.ts
new file mode 100644
index 00000000..658d173f
--- /dev/null
+++ b/src/hooks/useSettingsFilter/context.ts
@@ -0,0 +1,8 @@
+import { type Dispatch, type SetStateAction, createContext } from "react";
+
+export type SettingsFilterContextProps = {
+ filter: string;
+ setFilter: Dispatch>;
+};
+
+export const SettingsFilterContext = createContext(undefined);
diff --git a/src/hooks/useSettingsFilter/index.ts b/src/hooks/useSettingsFilter/index.ts
new file mode 100644
index 00000000..65a611cd
--- /dev/null
+++ b/src/hooks/useSettingsFilter/index.ts
@@ -0,0 +1,15 @@
+import { useContext } from "react";
+
+import { SettingsFilterContext } from "./context";
+
+const useSettingsFilter = () => {
+ const context = useContext(SettingsFilterContext);
+
+ if (context === undefined) {
+ throw new Error("useSettingsFilter must be used within a SettingsFilterProvider");
+ }
+
+ return context;
+};
+
+export default useSettingsFilter;
diff --git a/src/hooks/useSettingsFilter/provider.tsx b/src/hooks/useSettingsFilter/provider.tsx
new file mode 100644
index 00000000..c389c1eb
--- /dev/null
+++ b/src/hooks/useSettingsFilter/provider.tsx
@@ -0,0 +1,13 @@
+import { type ReactElement, useState } from "react";
+
+import { SettingsFilterContext, type SettingsFilterContextProps } from "./context";
+
+export const SettingsFilterProvider = (context: { children: ReactElement | ReactElement[] }) => {
+ const [filter, setFilter] = useState("");
+
+ return (
+
+ {context.children}
+
+ );
+};
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
new file mode 100644
index 00000000..4ec7960c
--- /dev/null
+++ b/src/i18n/constants.ts
@@ -0,0 +1,73 @@
+export const availableLocales = [
+ "ca-ES",
+ "cs-CZ",
+ "de-DE",
+ "en-GB",
+ "en-US",
+ "es-ES",
+ "fa-IR",
+ "fr-FR",
+ "he-IL",
+ "hi-IN",
+ "it-IT",
+ "ja-JP",
+ "ko-KR",
+ "pl-PL",
+ "pt-BR",
+ "ru-RU",
+ "sv-SE",
+ "tr-TR",
+ "uk-UA",
+ "vi-VN",
+ "zh-CN",
+ "zh-TW"
+] as const;
+export const localePercentages: Record = {
+ "ca-ES": 0,
+ "cs-CZ": 0,
+ "de-DE": 31,
+ "en-GB": 2,
+ "en-US": 100,
+ "es-ES": 54,
+ "fa-IR": 0,
+ "fr-FR": 57,
+ "he-IL": 0,
+ "hi-IN": 0,
+ "it-IT": 100,
+ "ja-JP": 100,
+ "ko-KR": 94,
+ "pl-PL": 0,
+ "pt-BR": 63,
+ "ru-RU": 100,
+ "sv-SE": 94,
+ "tr-TR": 69,
+ "uk-UA": 21,
+ "vi-VN": 0,
+ "zh-CN": 100,
+ "zh-TW": 96
+};
+export const localeDirection: Record = {
+ "ca-ES": "ltr",
+ "cs-CZ": "ltr",
+ "de-DE": "ltr",
+ "en-GB": "ltr",
+ "en-US": "ltr",
+ "es-ES": "ltr",
+ "fa-IR": "rtl",
+ "fr-FR": "ltr",
+ "he-IL": "rtl",
+ "hi-IN": "ltr",
+ "it-IT": "ltr",
+ "ja-JP": "ltr",
+ "ko-KR": "ltr",
+ "pl-PL": "ltr",
+ "pt-BR": "ltr",
+ "ru-RU": "ltr",
+ "sv-SE": "ltr",
+ "tr-TR": "ltr",
+ "uk-UA": "ltr",
+ "vi-VN": "ltr",
+ "zh-CN": "ltr",
+ "zh-TW": "ltr"
+};
+export type AvailableLocales = (typeof availableLocales)[number];
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index 24805ccb..5aefaa4f 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,70 +1,7 @@
+import { type AvailableLocales, availableLocales } from "@/src/i18n/constants";
import { type Resource, createInstance } from "i18next";
import { waitForSpecificMessage } from "../utils/utilities";
-export const availableLocales = [
- "ca-ES",
- "cs-CZ",
- "de-DE",
- "en-GB",
- "en-US",
- "es-ES",
- "fa-IR",
- "fr-FR",
- "he-IL",
- "hi-IN",
- "it-IT",
- "ja-JP",
- "pl-PL",
- "pt-BR",
- "ru-RU",
- "sv-SE",
- "tr-TR",
- "zh-CN",
- "zh-TW"
-] as const;
-export const localePercentages: Record = {
- "ca-ES": 0,
- "cs-CZ": 0,
- "de-DE": 34,
- "en-GB": 2,
- "en-US": 100,
- "es-ES": 61,
- "fa-IR": 0,
- "fr-FR": 64,
- "he-IL": 0,
- "hi-IN": 0,
- "it-IT": 98,
- "ja-JP": 98,
- "pl-PL": 0,
- "pt-BR": 71,
- "ru-RU": 96,
- "sv-SE": 94,
- "tr-TR": 72,
- "zh-CN": 98,
- "zh-TW": 94
-};
-export const localeDirection: Record = {
- "ca-ES": "ltr",
- "cs-CZ": "ltr",
- "de-DE": "ltr",
- "en-GB": "ltr",
- "en-US": "ltr",
- "es-ES": "ltr",
- "fa-IR": "rtl",
- "fr-FR": "ltr",
- "he-IL": "rtl",
- "hi-IN": "ltr",
- "it-IT": "ltr",
- "ja-JP": "ltr",
- "pl-PL": "ltr",
- "pt-BR": "ltr",
- "ru-RU": "ltr",
- "sv-SE": "ltr",
- "tr-TR": "ltr",
- "zh-CN": "ltr",
- "zh-TW": "ltr"
-};
-export type AvailableLocales = (typeof availableLocales)[number];
export type i18nInstanceType = ReturnType;
export async function i18nService(locale: AvailableLocales) {
diff --git a/src/icons.ts b/src/icons.ts
index 52c4c085..2cc7fec9 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -3,9 +3,12 @@ import type { AllButtonNames, ButtonPlacement } from "./types";
import { createSVGElement } from "./utils/utilities";
export type ToggleIcon = { off: SVGSVGElement; on: SVGSVGElement };
export type BasicIcon = SVGSVGElement;
-export const toggleFeatures = Object.keys({ loopButton: "", maximizePlayerButton: "", volumeBoostButton: "" } satisfies Partial<
- Record
->);
+export const toggleFeatures = Object.keys({
+ hideEndScreenCardsButton: "",
+ loopButton: "",
+ maximizePlayerButton: "",
+ volumeBoostButton: ""
+} satisfies Partial>);
export type ToggleFeatures = (typeof toggleFeatures)[number];
export type IconType = T extends ToggleFeatures ? ToggleIcon : BasicIcon;
export type GetPlacementKey = Placement extends "feature_menu" ? "feature_menu" : "shared_icon_position";
@@ -231,11 +234,74 @@ const increasePlaybackSpeedButtonSVG = createSVGElement(
fill: "white"
})
);
+const hideEndScreenCardsButtonSVG = createSVGElement(
+ "svg",
+ {
+ height: "24px",
+ "stroke-width": "1",
+ viewBox: "0 0 24 24",
+ width: "24px"
+ },
+ createSVGElement("path", {
+ d: "M 19.615385,7.7692309 V 19.615385 a 1.6923077,1.6923077 0 0 1 -1.692308,1.692307 H 2.6923077 A 1.6923077,1.6923077 0 0 1 1,19.615385 V 7.7692309 A 1.6923077,1.6923077 0 0 1 2.6923077,6.0769232 H 17.923077 a 1.6923077,1.6923077 0 0 1 1.692308,1.6923077 z m 1.692307,-5.076923 H 5.2307692 a 0.84615385,0.84615385 0 0 0 0,1.6923077 H 21.307692 V 17.076923 a 0.846154,0.846154 0 0 0 1.692308,0 V 4.3846156 A 1.6923077,1.6923077 0 0 0 21.307692,2.6923079 Z",
+ fill: "white"
+ })
+);
+const showEndScreenCardsButtonSVG = createSVGElement(
+ "svg",
+ {
+ height: "24px",
+ "stroke-width": "1",
+ viewBox: "0 0 24 24",
+ width: "24px"
+ },
+ createSVGElement("path", {
+ d: "M 17.894749,6.1105233 H 2.7368227 A 1.684214,1.6827074 0 0 0 1.0526086,7.793231 v 11.778954 a 1.684214,1.6827074 0 0 0 1.6842141,1.682707 H 17.894749 a 1.684214,1.6827074 0 0 0 1.684215,-1.682707 V 7.793231 A 1.684214,1.6827074 0 0 0 17.894749,6.1105233 Z m 0,13.4616617 H 2.7368227 V 7.793231 H 17.894749 Z M 22.947391,4.4278159 V 17.048122 a 0.84210706,0.84135374 0 0 1 -1.684213,0 V 4.4278159 H 5.2631439 a 0.84210707,0.84135375 0 0 1 0,-1.6827074 H 21.263178 a 1.684214,1.6827074 0 0 1 1.684213,1.6827074 z",
+ fill: "white"
+ })
+);
+const forwardButtonSVG = createSVGElement(
+ "svg",
+ {
+ fill: "white",
+ height: "24px",
+ stroke: "white",
+ viewBox: "0 0 24 24",
+ width: "24px"
+ },
+ createSVGElement("path", {
+ d: "M 1.0000006,19.542857 11.685714,12 1.0000006,4.457143 Z M 12.314285,4.457143 V 19.542857 L 22.999999,12 Z"
+ })
+);
+const rewindButtonSVG = createSVGElement(
+ "svg",
+ {
+ fill: "white",
+ height: "24px",
+ stroke: "white",
+ viewBox: "0 0 24 24",
+ width: "24px"
+ },
+ createSVGElement("path", {
+ d: "M 11.685714,19.542856 V 4.4571438 L 1.000001,12 Z M 12.314285,12 22.999999,19.542856 V 4.4571438 Z"
+ })
+);
export const featureIcons = {
decreasePlaybackSpeedButton: {
feature_menu: decreasePlaybackSpeedButtonSVG,
shared_icon_position: decreasePlaybackSpeedButtonSVG
},
+ forwardButton: {
+ feature_menu: forwardButtonSVG,
+ shared_icon_position: forwardButtonSVG
+ },
+ hideEndScreenCardsButton: {
+ feature_menu: hideEndScreenCardsButtonSVG,
+ shared_icon_position: {
+ off: showEndScreenCardsButtonSVG,
+ on: hideEndScreenCardsButtonSVG
+ }
+ },
increasePlaybackSpeedButton: {
feature_menu: increasePlaybackSpeedButtonSVG,
shared_icon_position: increasePlaybackSpeedButtonSVG
@@ -258,6 +324,10 @@ export const featureIcons = {
feature_menu: openTranscriptSVG,
shared_icon_position: openTranscriptSVG
},
+ rewindButton: {
+ feature_menu: rewindButtonSVG,
+ shared_icon_position: rewindButtonSVG
+ },
screenshotButton: {
feature_menu: screenshotButtonSVG,
shared_icon_position: screenshotButtonSVG
@@ -270,9 +340,6 @@ export const featureIcons = {
}
}
} satisfies FeatureIconMap;
-export function getFeatureIcon(
- featureName: Name,
- placement: GetPlacementKey
-) {
- return featureIcons[featureName][placement];
+export function getFeatureIcon(featureName: Name, placement: ButtonPlacement): IconType {
+ return featureIcons[featureName][placement !== "feature_menu" ? "shared_icon_position" : "feature_menu"] as IconType;
}
diff --git a/src/manifest.ts b/src/manifest.ts
index bc335cf4..22080c92 100755
--- a/src/manifest.ts
+++ b/src/manifest.ts
@@ -1,7 +1,7 @@
import type { Manifest } from "webextension-polyfill";
import pkg from "../package.json";
-import { availableLocales } from "./i18n";
+import { availableLocales } from "./i18n/constants";
const permissions: Manifest.Permission[] = ["activeTab", "webRequest", "storage", "tabs", "scripting"];
const hostPermissions: Manifest.MatchPattern[] = ["https://www.youtube.com/*"];
const resources = [
diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
index 9db41f4c..2f7d7776 100644
--- a/src/pages/content/index.ts
+++ b/src/pages/content/index.ts
@@ -1,4 +1,4 @@
-import type { AvailableLocales } from "@/src/i18n";
+import type { AvailableLocales } from "@/src/i18n/constants";
import { getVideoHistory, setVideoHistory } from "@/src/features/videoHistory/utils";
import {
@@ -199,12 +199,34 @@ const getStoredSettings = async (): Promise => {
return options;
};
+const deepEqual = (a: unknown, b: unknown): boolean => {
+ if (a === b) return true;
+
+ if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
+ return false;
+ }
+
+ const keysA = Object.keys(a);
+ const keysB = Object.keys(b);
+
+ if (keysA.length !== keysB.length) return false;
+
+ for (const key of keysA) {
+ if (!keysB.includes(key)) return false;
+ if (!deepEqual((a as Record)[key], (b as Record)[key])) return false;
+ }
+
+ return true;
+};
const isValidChange = (change?: { newValue?: unknown; oldValue?: unknown }) => {
- return (
- change?.newValue !== undefined &&
- change?.oldValue !== undefined &&
- parseStoredValue(change.oldValue as string) !== parseStoredValue(change.newValue as string)
- );
+ if (change?.newValue === undefined || change?.oldValue === undefined) {
+ return false;
+ }
+
+ const parsedOldValue = parseStoredValue(change.oldValue as string);
+ const parsedNewValue = parseStoredValue(change.newValue as string);
+
+ return !deepEqual(parsedOldValue, parsedNewValue);
};
const storageChangeHandler = async (changes: StorageChanges, areaName: string) => {
if (areaName !== "local") return;
@@ -275,16 +297,32 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
playerSpeed: options.player_speed
});
},
+ enable_forward_rewind_buttons: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("forwardRewindButtonsChange", {
+ forwardRewindButtonsEnabled: newValue
+ });
+ },
enable_hide_end_screen_cards: (__oldValue, newValue) => {
sendExtensionOnlyMessage("hideEndScreenCardsChange", {
+ hideEndScreenCardsButtonPlacement: options.button_placements["hideEndScreenCardsButton"],
hideEndScreenCardsEnabled: newValue
});
},
+ enable_hide_end_screen_cards_button: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("hideEndScreenCardsButtonChange", {
+ hideEndScreenCardsButtonEnabled: newValue
+ });
+ },
enable_hide_live_stream_chat: (__oldValue, newValue) => {
sendExtensionOnlyMessage("hideLiveStreamChatChange", {
hideLiveStreamChatEnabled: newValue
});
},
+ enable_hide_paid_promotion_banner: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("hidePaidPromotionBannerChange", {
+ hidePaidPromotionBannerEnabled: newValue
+ });
+ },
enable_hide_scrollbar: (__oldValue, newValue) => {
sendExtensionOnlyMessage("hideScrollBarChange", {
hideScrollBarEnabled: newValue
@@ -392,6 +430,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
featureMenuOpenType: newValue
});
},
+ forward_rewind_buttons_time: () => {
+ sendExtensionOnlyMessage("forwardRewindButtonsChange", {
+ forwardRewindButtonsEnabled: options.enable_forward_rewind_buttons
+ });
+ },
language: (__oldValue, newValue) => {
sendExtensionOnlyMessage("languageChange", {
language: newValue
diff --git a/src/pages/embedded/index.ts b/src/pages/embedded/index.ts
index 09be394e..0b5b8642 100644
--- a/src/pages/embedded/index.ts
+++ b/src/pages/embedded/index.ts
@@ -3,15 +3,23 @@ import { deepDarkPresets } from "@/src/deepDarkPresets";
import { type FeatureFuncRecord, featureButtonFunctions } from "@/src/features";
import { enableAutomaticTheaterMode } from "@/src/features/automaticTheaterMode";
import { featuresInControls } from "@/src/features/buttonPlacement";
-import { checkIfFeatureButtonExists, getFeatureButton, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureButton, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
import { disableCustomCSS, enableCustomCSS } from "@/src/features/customCSS";
import { customCSSExists, updateCustomCSS } from "@/src/features/customCSS/utils";
import { disableDeepDarkCSS, enableDeepDarkCSS } from "@/src/features/deepDarkCSS";
import { deepDarkCSSExists, getDeepDarkCustomThemeStyle, updateDeepDarkCSS } from "@/src/features/deepDarkCSS/utils";
import { enableFeatureMenu, setupFeatureMenuEventListeners } from "@/src/features/featureMenu";
import { featuresInMenu, getFeatureMenuItem, updateFeatureMenuItemLabel, updateFeatureMenuTitle } from "@/src/features/featureMenu/utils";
-import { disableHideEndScreenCards, enableHideEndScreenCards } from "@/src/features/hideEndScreenCards";
+import { addForwardButton, addRewindButton, removeForwardButton, removeRewindButton } from "@/src/features/forwardRewindButtons";
+import {
+ addHideEndScreenCardsButton,
+ disableHideEndScreenCards,
+ enableHideEndScreenCards,
+ isEndScreenCardsHidden,
+ removeHideEndScreenCardsButton
+} from "@/src/features/hideEndScreenCards";
import { disableHideLiveStreamChat, enableHideLiveStreamChat } from "@/src/features/hideLiveStreamChat";
+import { disableHidePaidPromotionBanner, enableHidePaidPromotionBanner } from "@/src/features/hidePaidPromotionBanner";
import { enableHideScrollBar } from "@/src/features/hideScrollBar";
import { hideScrollBar, showScrollBar } from "@/src/features/hideScrollBar/utils";
import { disableHideShorts, enableHideShorts } from "@/src/features/hideShorts";
@@ -49,9 +57,13 @@ import volumeBoost, {
removeVolumeBoostButton
} from "@/src/features/volumeBoost";
import { i18nService } from "@/src/i18n";
-import { type ToggleFeatures, toggleFeatures } from "@/src/icons";
+import { type ToggleFeatures, type ToggleIcon, getFeatureIcon, toggleFeatures } from "@/src/icons";
import {
+ type AllButtonNames,
+ type ButtonPlacement,
type ExtensionSendOnlyMessageMappings,
+ type FeatureToMultiButtonMap,
+ type KeysOfUnion,
type Messages,
type MultiButtonFeatureNames,
type MultiButtonNames,
@@ -65,6 +77,8 @@ import {
browserColorLog,
findKeyByValue,
formatError,
+ groupButtonChanges,
+ isNewYouTubeVideoLayout,
isShortsPage,
isWatchPage,
sendContentOnlyMessage,
@@ -72,7 +86,7 @@ import {
waitForSpecificMessage
} from "@/utils/utilities";
// TODO: Add always show progressbar feature
-
+let isFirstLoad = true;
/**
* Creates a hidden div element with a specific ID that can be used to receive messages from YouTube.
* The element is appended to the document's root element.
@@ -124,10 +138,16 @@ const alwaysShowProgressBar = async function () {
const enableFeatures = () => {
browserColorLog(`Enabling features...`, "FgMagenta");
void (async () => {
+ const {
+ data: {
+ options: { button_placements }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
// Wait for the specified container selectors to be available on the page
await waitForAllElements(["div#player", "div#player-wide-container", "div#video-container", "div#player-container"]);
eventManager.removeAllEventListeners(["featureMenu"]);
void Promise.all([
+ enableHidePaidPromotionBanner(),
enableHideShorts(),
enableRemoveRedirect(),
enableShareShortener(),
@@ -161,16 +181,71 @@ const enableFeatures = () => {
]);
// Enable feature menu before calling button functions
await enableFeatureMenu();
+ for (const multiButtonFeatureName of featureToMultiButtonsMap.keys()) {
+ const buttonName = featureToMultiButtonsMap.get(multiButtonFeatureName)?.at(-1);
+ if (!buttonName) continue;
+ switch (multiButtonFeatureName) {
+ case "playbackSpeedButtons": {
+ switch (button_placements[buttonName]) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await addDecreasePlaybackSpeedButton().then(addIncreasePlaybackSpeedButton);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await addIncreasePlaybackSpeedButton().then(addDecreasePlaybackSpeedButton);
+ break;
+ }
+ }
+ break;
+ }
+ case "forwardRewindButtons": {
+ switch (button_placements[buttonName]) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await addRewindButton().then(addForwardButton);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await addForwardButton().then(addRewindButton);
+ break;
+ }
+ }
+ }
+ }
+ }
// Features that add buttons should be put below and be ordered in the order those buttons should appear
- await addIncreasePlaybackSpeedButton();
- await addDecreasePlaybackSpeedButton();
+ await addHideEndScreenCardsButton();
await addScreenshotButton();
await openTranscriptButton();
await addMaximizePlayerButton();
await addLoopButton();
})();
};
+const getFeatureFunctions = (featureName: AllButtonNames, oldPlacement: ButtonPlacement) => {
+ const { [featureName]: featureFunctions } = featureButtonFunctions;
+ // Ensure featureFunctions exist before proceeding
+ if (!featureFunctions) {
+ throw new Error(`Feature '${featureName}' not found in featureButtonFunctions`);
+ }
+ // Cast featureFunctions to FeatureFuncRecord
+ const castFeatureFunctions = featureFunctions as unknown as FeatureFuncRecord;
+
+ return {
+ add: () => castFeatureFunctions.add(),
+ remove: () => castFeatureFunctions.remove(oldPlacement)
+ };
+};
+function handleSoftNavigate() {
+ // Listen to YouTube's soft navigate event
+ document.addEventListener("yt-navigate-finish", enableFeatures);
+ document.addEventListener("yt-player-updated", enableFeatures);
+}
window.addEventListener("DOMContentLoaded", function () {
void (async () => {
const response = await waitForSpecificMessage("language", "request_data", "content");
@@ -180,9 +255,13 @@ window.addEventListener("DOMContentLoaded", function () {
} = response;
const i18nextInstance = await i18nService(language);
window.i18nextInstance = i18nextInstance;
- // Listen to YouTube's soft navigate event
- document.addEventListener("yt-navigate-finish", enableFeatures);
- document.addEventListener("yt-player-updated", enableFeatures);
+ if (isFirstLoad) {
+ enableFeatures();
+ handleSoftNavigate();
+ } else if (!isFirstLoad) {
+ handleSoftNavigate;
+ }
+ isFirstLoad = false;
/**
* Listens for the "yte-message-from-youtube" event and handles incoming messages from the YouTube page.
*
@@ -267,10 +346,34 @@ window.addEventListener("DOMContentLoaded", function () {
}
case "hideEndScreenCardsChange": {
const {
- data: { hideEndScreenCardsEnabled }
+ data: { hideEndScreenCardsButtonPlacement: hideEndScreenCardsPlacement, hideEndScreenCardsEnabled }
} = message;
- if (hideEndScreenCardsEnabled) await enableHideEndScreenCards();
- else await disableHideEndScreenCards();
+ const updateHideEndScreenCardsButtonState = (icon: ToggleIcon, checked: boolean) => {
+ if (hideEndScreenCardsPlacement === "feature_menu") {
+ const hideEndScreenCardsMenuItem = getFeatureMenuItem("hideEndScreenCardsButton");
+ if (!hideEndScreenCardsMenuItem) return;
+ hideEndScreenCardsMenuItem.ariaChecked = checked ? "false" : "true";
+ } else {
+ const hideEndScreenCardsButton = getFeatureButton("hideEndScreenCardsButton");
+ if (!hideEndScreenCardsButton || !(hideEndScreenCardsButton instanceof HTMLButtonElement)) return;
+ updateFeatureButtonIcon(hideEndScreenCardsButton, icon[checked ? "on" : "off"]);
+ updateFeatureButtonTitle(
+ "hideEndScreenCardsButton",
+ i18nextInstance.t(`pages.content.features.hideEndScreenCardsButton.button.toggle.${checked ? "on" : "off"}`)
+ );
+ hideEndScreenCardsButton.ariaChecked = checked ? "true" : "false";
+ }
+ };
+ const endScreenCardsHidden = isEndScreenCardsHidden();
+ const hideEndScreenCardsIcon = getFeatureIcon("hideEndScreenCardsButton", "below_player");
+ if (hideEndScreenCardsIcon instanceof SVGSVGElement) return;
+ if (hideEndScreenCardsEnabled && !endScreenCardsHidden) {
+ await enableHideEndScreenCards();
+ updateHideEndScreenCardsButtonState(hideEndScreenCardsIcon, false);
+ } else if (!hideEndScreenCardsEnabled && endScreenCardsHidden) {
+ await disableHideEndScreenCards();
+ updateHideEndScreenCardsButtonState(hideEndScreenCardsIcon, true);
+ }
break;
}
case "maximizeButtonChange": {
@@ -328,13 +431,66 @@ window.addEventListener("DOMContentLoaded", function () {
}
break;
}
+ case "forwardRewindButtonsChange": {
+ const {
+ data: { forwardRewindButtonsEnabled }
+ } = message;
+ const {
+ data: {
+ options: {
+ button_placements: { forwardButton: forwardButtonPlacement }
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ await removeForwardButton();
+ await removeRewindButton();
+ if (forwardRewindButtonsEnabled) {
+ switch (forwardButtonPlacement) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await addRewindButton().then(addForwardButton);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await addForwardButton().then(addRewindButton);
+ break;
+ }
+ }
+ } else {
+ await removeRewindButton();
+ await removeForwardButton();
+ }
+ break;
+ }
case "playbackSpeedButtonsChange": {
const {
data: { playbackSpeedButtonsEnabled }
} = message;
+ const {
+ data: {
+ options: {
+ button_placements: { decreasePlaybackSpeedButton: decreasePlaybackSpeedButtonPlacement }
+ }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (playbackSpeedButtonsEnabled) {
- await addDecreasePlaybackSpeedButton();
- await addIncreasePlaybackSpeedButton();
+ await removeDecreasePlaybackSpeedButton();
+ await removeIncreasePlaybackSpeedButton();
+ switch (decreasePlaybackSpeedButtonPlacement) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await addDecreasePlaybackSpeedButton().then(addIncreasePlaybackSpeedButton);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await addIncreasePlaybackSpeedButton().then(addDecreasePlaybackSpeedButton);
+ break;
+ }
+ }
} else {
await removeDecreasePlaybackSpeedButton();
await removeIncreasePlaybackSpeedButton();
@@ -409,6 +565,14 @@ window.addEventListener("DOMContentLoaded", function () {
}
break;
}
+ case "hideEndScreenCardsButtonChange": {
+ const {
+ data: { hideEndScreenCardsButtonEnabled }
+ } = message;
+ if (hideEndScreenCardsButtonEnabled) await addHideEndScreenCardsButton();
+ else await removeHideEndScreenCardsButton();
+ break;
+ }
case "hideLiveStreamChatChange": {
const {
data: { hideLiveStreamChatEnabled }
@@ -425,17 +589,30 @@ window.addEventListener("DOMContentLoaded", function () {
data: { language }
} = message;
window.i18nextInstance = await i18nService(language);
+ const {
+ data: { options }
+ } = await waitForSpecificMessage("options", "request_data", "content");
if (featuresInMenu.size > 0) {
updateFeatureMenuTitle(window.i18nextInstance.t("pages.content.features.featureMenu.button.label"));
for (const feature of featuresInMenu) {
const featureName = findKeyByValue(feature as MultiButtonNames) ?? (feature as SingleButtonFeatureNames);
if (featureToMultiButtonsMap.has(featureName)) {
- updateFeatureMenuItemLabel(
- feature,
- window.i18nextInstance.t(
- `pages.content.features.${featureName as MultiButtonFeatureNames}.buttons.${feature as MultiButtonNames}.label`
- )
- );
+ const multiFeatureName = featureName as MultiButtonFeatureNames;
+ const multiButtonName = feature as MultiButtonNames;
+ switch (multiFeatureName) {
+ case "playbackSpeedButtons": {
+ updateFeatureMenuItemLabel(
+ feature,
+ window.i18nextInstance.t(
+ `pages.content.features.${multiFeatureName}.buttons.${multiButtonName}.label` as `pages.content.features.${typeof multiFeatureName}.buttons.${KeysOfUnion}.label`,
+ {
+ SPEED: options.playback_buttons_speed
+ }
+ )
+ );
+ break;
+ }
+ }
} else {
updateFeatureMenuItemLabel(
feature,
@@ -458,12 +635,22 @@ window.addEventListener("DOMContentLoaded", function () {
);
} else {
if (featureToMultiButtonsMap.has(featureName)) {
- updateFeatureMenuItemLabel(
- feature,
- window.i18nextInstance.t(
- `pages.content.features.${featureName as MultiButtonFeatureNames}.buttons.${feature as MultiButtonNames}.label`
- )
- );
+ const multiFeatureName = featureName as MultiButtonFeatureNames;
+ const multiButtonName = feature as MultiButtonNames;
+ switch (multiFeatureName) {
+ case "playbackSpeedButtons": {
+ updateFeatureMenuItemLabel(
+ feature,
+ window.i18nextInstance.t(
+ `pages.content.features.${multiFeatureName}.buttons.${multiButtonName}.label` as `pages.content.features.${typeof multiFeatureName}.buttons.${KeysOfUnion}.label`,
+ {
+ SPEED: options.playback_buttons_speed
+ }
+ )
+ );
+ break;
+ }
+ }
} else {
updateFeatureButtonTitle(
feature,
@@ -478,7 +665,10 @@ window.addEventListener("DOMContentLoaded", function () {
case "automaticTheaterModeChange": {
// Get the player element
const playerContainer =
- isWatchPage() ? document.querySelector("div#player-container.ytd-watch-flexy")
+ isWatchPage() ?
+ document.querySelector(
+ isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
+ )
: isShortsPage() ? document.querySelector("div#shorts-player")
: null;
// If player element is not available, return
@@ -560,6 +750,17 @@ window.addEventListener("DOMContentLoaded", function () {
}
break;
}
+ case "hidePaidPromotionBannerChange": {
+ const {
+ data: { hidePaidPromotionBannerEnabled }
+ } = message;
+ if (hidePaidPromotionBannerEnabled) {
+ await enableHidePaidPromotionBanner();
+ } else {
+ disableHidePaidPromotionBanner();
+ }
+ break;
+ }
case "deepDarkThemeChange": {
const {
data: { deepDarkCustomThemeColors, deepDarkPreset, deepDarkThemeEnabled }
@@ -593,19 +794,72 @@ window.addEventListener("DOMContentLoaded", function () {
break;
}
case "buttonPlacementChange": {
- const {
- data: { buttonPlacement: buttonPlacements }
- } = message;
- for (const [featureName, { new: newPlacement, old: oldPlacement }] of Object.entries(buttonPlacements)) {
- const buttonExists = checkIfFeatureButtonExists(featureName, newPlacement);
- if (buttonExists) continue;
- const { [featureName]: featureFunctions } = featureButtonFunctions;
- // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
- const castFeatureFunctions = featureFunctions as unknown as FeatureFuncRecord;
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
- await castFeatureFunctions.remove(oldPlacement);
- // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
- await castFeatureFunctions.add();
+ const { data } = message;
+ const { multiButtonChanges, singleButtonChanges } = groupButtonChanges(data);
+ for (const [featureName, changes] of Object.entries(multiButtonChanges)) {
+ switch (featureName) {
+ case "playbackSpeedButtons": {
+ for (const [buttonName, { new: newPlacement, old: oldPlacement }] of Object.entries(changes)) {
+ if (oldPlacement === newPlacement) continue;
+ const increasePlaybackSpeedButtonFuncs = getFeatureFunctions("increasePlaybackSpeedButton", oldPlacement);
+ const decreasePlaybackSpeedButtonFuncs = getFeatureFunctions("decreasePlaybackSpeedButton", oldPlacement);
+ await decreasePlaybackSpeedButtonFuncs.remove();
+ await increasePlaybackSpeedButtonFuncs.remove();
+ switch (buttonName) {
+ case "increasePlaybackSpeedButton":
+ case "decreasePlaybackSpeedButton": {
+ switch (newPlacement) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await decreasePlaybackSpeedButtonFuncs.add().then(increasePlaybackSpeedButtonFuncs.add);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await increasePlaybackSpeedButtonFuncs.add().then(decreasePlaybackSpeedButtonFuncs.add);
+ break;
+ }
+ }
+ }
+ }
+ }
+ break;
+ }
+ case "forwardRewindButtons": {
+ for (const [buttonName, { new: newPlacement, old: oldPlacement }] of Object.entries(changes)) {
+ if (oldPlacement === newPlacement) continue;
+ const rewindButtonFuncs = getFeatureFunctions("rewindButton", oldPlacement);
+ const forwardButtonFuncs = getFeatureFunctions("forwardButton", oldPlacement);
+ switch (buttonName) {
+ case "forwardButton":
+ case "rewindButton": {
+ await forwardButtonFuncs.remove();
+ await rewindButtonFuncs.remove();
+ switch (newPlacement) {
+ case "below_player":
+ case "player_controls_left":
+ case "feature_menu": {
+ await rewindButtonFuncs.add().then(forwardButtonFuncs.add);
+ break;
+ }
+ // Because of how the right controls are placed in the DOM, we need to add the buttons in reverse order
+ case "player_controls_right": {
+ await forwardButtonFuncs.add().then(rewindButtonFuncs.add);
+ break;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ for (const [featureName, { new: newPlacement, old: oldPlacement }] of Object.entries(singleButtonChanges)) {
+ if (oldPlacement === newPlacement) continue;
+ const featureFuncs = getFeatureFunctions(featureName, oldPlacement);
+ await featureFuncs.remove();
+ await featureFuncs.add();
}
break;
}
diff --git a/src/pages/options/Options.tsx b/src/pages/options/Options.tsx
index b1eb7d3a..3ea3cead 100644
--- a/src/pages/options/Options.tsx
+++ b/src/pages/options/Options.tsx
@@ -1,5 +1,6 @@
import Settings from "@/src/components/Settings/Settings";
import { NotificationsProvider } from "@/src/hooks/useNotifications/provider";
+import { SettingsFilterProvider } from "@/src/hooks/useSettingsFilter/provider";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import React from "react";
@@ -15,9 +16,11 @@ export default function Options(): JSX.Element {
});
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/src/pages/popup/Popup.tsx b/src/pages/popup/Popup.tsx
index 529a8e9d..90e8acc5 100644
--- a/src/pages/popup/Popup.tsx
+++ b/src/pages/popup/Popup.tsx
@@ -1,5 +1,6 @@
import Settings from "@/src/components/Settings/Settings";
import { NotificationsProvider } from "@/src/hooks/useNotifications/provider";
+import { SettingsFilterProvider } from "@/src/hooks/useSettingsFilter/provider";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
export default function Options(): JSX.Element {
@@ -14,9 +15,11 @@ export default function Options(): JSX.Element {
});
return (
-
-
-
+
+
+
+
+
);
}
diff --git a/src/types/index.ts b/src/types/index.ts
index 49dadc76..d7762413 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,15 +1,20 @@
import type { ParseKeys, TOptions } from "i18next";
+import type EnUS from "public/locales/en-US.json";
import type { YouTubePlayer } from "youtube-player/dist/types";
import z, { ZodType } from "zod";
import type { DeepDarkPreset } from "../deepDarkPresets";
-import type { AvailableLocales } from "../i18n";
+import type { AvailableLocales } from "../i18n/constants";
// #region Utility types
export type Nullable = T | null;
+export type NonNullable = T extends Nullable ? Exclude : T;
+export type NonNullableObject = { [K in keyof T]: NonNullable };
export type AnyFunction = (...args: any[]) => void;
export type Writeable = { -readonly [P in keyof T]: T[P] };
export type DeepWriteable = { -readonly [P in keyof T]: DeepWriteable };
+export type DeepPartial = { [P in keyof T]?: DeepPartial };
+export type KeysOfUnion = T extends T ? keyof T : never;
export type WithId = `#${S}`;
export type Prettify = {
[K in keyof T]: T[K];
@@ -100,6 +105,8 @@ export const youtubePlayerQualityLevels = [
"auto"
] as const;
export type YoutubePlayerQualityLevel = (typeof youtubePlayerQualityLevels)[number];
+export const PlayerQualityFallbackStrategy = ["higher", "lower"] as const;
+export type PlayerQualityFallbackStrategy = (typeof PlayerQualityFallbackStrategy)[number];
export const youtubePlayerSpeedRatesExtended = [2.25, 2.5, 2.75, 3, 3.25, 3.75, 4] as const;
export const youtubePlayerSpeedRates = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, ...youtubePlayerSpeedRatesExtended] as const;
export const youtubePlaybackSpeedButtonsRates = [0.25, 0.5, 0.75, 1] as const;
@@ -116,6 +123,23 @@ export type VideoHistoryResumeType = (typeof videoHistoryResumeTypes)[number];
export const buttonPlacements = ["below_player", "feature_menu", "player_controls_left", "player_controls_right"] as const;
export type ButtonPlacement = (typeof buttonPlacements)[number];
export const featureMenuOpenTypes = ["click", "hover"] as const;
+export type MultiButtonChange = {
+ [K in MultiButtonFeatureNames]: {
+ [Button in keyof FeatureToMultiButtonMap[K]]: {
+ new: ButtonPlacement;
+ old: ButtonPlacement;
+ };
+ };
+};
+export type SingleButtonChange = { [K in SingleButtonFeatureNames]: { new: ButtonPlacement; old: ButtonPlacement } };
+export type ButtonPlacementChange = {
+ buttonPlacement: {
+ [Key in AllButtonNames]: {
+ new: ButtonPlacement;
+ old: ButtonPlacement;
+ };
+ };
+};
export type FeatureMenuOpenType = (typeof featureMenuOpenTypes)[number];
export type DeepDarkCustomThemeColors = {
colorShadow: string;
@@ -129,24 +153,61 @@ export type DeepDarkCustomThemeColors = {
type TOptionsKeys = ParseKeys<"en-US", TOptions, undefined>;
export type AllButtonNames = Exclude, "featureMenu">;
export type SingleButtonNames = Exclude;
-export type SingleButtonFeatureNames = Exclude, "featureMenu">;
+export type SingleButtonFeatureNames = Exclude<
+ ExtractButtonFeatureNames<`pages.content.features.${string}.button.label` & TOptionsKeys>,
+ "featureMenu"
+>;
export type MultiButtonNames = Exclude;
-export type MultiButtonFeatureNames = Exclude;
-export const featureToMultiButtonsMap: Map = new Map([
- ["playbackSpeedButtons", ["increasePlaybackSpeedButton", "decreasePlaybackSpeedButton"]]
-]);
+export type MultiButtonFeatureNames = ExtractButtonFeatureNames<`pages.content.features.${string}.buttons.${string}.label` & TOptionsKeys>;
+export type FeatureToMultiButtonMap = {
+ [K in MultiButtonFeatureNames]: {
+ [Button in keyof EnUS["pages"]["content"]["features"][K]["buttons"]]: "";
+ };
+};
+const featureToMultiButtonMapEntries: FeatureToMultiButtonMap = {
+ forwardRewindButtons: {
+ forwardButton: "",
+ rewindButton: ""
+ },
+ playbackSpeedButtons: {
+ decreasePlaybackSpeedButton: "",
+ increasePlaybackSpeedButton: ""
+ }
+};
+export const featureToMultiButtonsMap = new Map(
+ Object.keys(featureToMultiButtonMapEntries).map((key) => [
+ key,
+ // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+ Object.keys(featureToMultiButtonMapEntries[key]) as KeysOfUnion[]
+ ])
+);
export type FeatureMenuItemIconId = `yte-${AllButtonNames}-icon`;
export type FeatureMenuItemId = `yte-feature-${AllButtonNames}-menuitem`;
export type FeatureMenuItemLabelId = `yte-${AllButtonNames}-label`;
export const buttonNames = Object.keys({
decreasePlaybackSpeedButton: "",
+ forwardButton: "",
+ hideEndScreenCardsButton: "",
increasePlaybackSpeedButton: "",
loopButton: "",
maximizePlayerButton: "",
openTranscriptButton: "",
+ rewindButton: "",
screenshotButton: "",
volumeBoostButton: ""
} satisfies Record);
+export const buttonNameToSettingName = {
+ decreasePlaybackSpeedButton: "enable_playback_speed_buttons",
+ forwardButton: "enable_forward_rewind_buttons",
+ hideEndScreenCardsButton: "enable_hide_end_screen_cards_button",
+ increasePlaybackSpeedButton: "enable_playback_speed_buttons",
+ loopButton: "enable_loop_button",
+ maximizePlayerButton: "enable_maximize_player_button",
+ openTranscriptButton: "enable_open_transcript_button",
+ rewindButton: "enable_forward_rewind_buttons",
+ screenshotButton: "enable_screenshot_button",
+ volumeBoostButton: "enable_volume_boost"
+} satisfies Record;
export type ButtonPlacementConfigurationMap = {
[ButtonName in AllButtonNames]: ButtonPlacement;
};
@@ -256,25 +317,21 @@ export type ContentToBackgroundSendOnlyMessageMappings = {
};
export type ExtensionSendOnlyMessageMappings = {
automaticTheaterModeChange: DataResponseMessage<"automaticTheaterModeChange", { automaticTheaterModeEnabled: boolean }>;
- buttonPlacementChange: DataResponseMessage<
- "buttonPlacementChange",
- {
- buttonPlacement: {
- [Key in AllButtonNames]: {
- new: ButtonPlacement;
- old: ButtonPlacement;
- };
- };
- }
- >;
+ buttonPlacementChange: DataResponseMessage<"buttonPlacementChange", ButtonPlacementChange>;
customCSSChange: DataResponseMessage<"customCSSChange", { customCSSCode: string; customCSSEnabled: boolean }>;
deepDarkThemeChange: DataResponseMessage<
"deepDarkThemeChange",
{ deepDarkCustomThemeColors: DeepDarkCustomThemeColors; deepDarkPreset: DeepDarkPreset; deepDarkThemeEnabled: boolean }
>;
featureMenuOpenTypeChange: DataResponseMessage<"featureMenuOpenTypeChange", { featureMenuOpenType: FeatureMenuOpenType }>;
- hideEndScreenCardsChange: DataResponseMessage<"hideEndScreenCardsChange", { hideEndScreenCardsEnabled: boolean }>;
+ forwardRewindButtonsChange: DataResponseMessage<"forwardRewindButtonsChange", { forwardRewindButtonsEnabled: boolean }>;
+ hideEndScreenCardsButtonChange: DataResponseMessage<"hideEndScreenCardsButtonChange", { hideEndScreenCardsButtonEnabled: boolean }>;
+ hideEndScreenCardsChange: DataResponseMessage<
+ "hideEndScreenCardsChange",
+ { hideEndScreenCardsButtonPlacement: ButtonPlacement; hideEndScreenCardsEnabled: boolean }
+ >;
hideLiveStreamChatChange: DataResponseMessage<"hideLiveStreamChatChange", { hideLiveStreamChatEnabled: boolean }>;
+ hidePaidPromotionBannerChange: DataResponseMessage<"hidePaidPromotionBannerChange", { hidePaidPromotionBannerEnabled: boolean }>;
hideScrollBarChange: DataResponseMessage<"hideScrollBarChange", { hideScrollBarEnabled: boolean }>;
hideShortsChange: DataResponseMessage<"hideShortsChange", { hideShortsEnabled: boolean }>;
hideTranslateCommentChange: DataResponseMessage<"hideTranslateCommentChange", { hideTranslateCommentEnabled: boolean }>;
@@ -355,8 +412,11 @@ export type configuration = {
enable_custom_css: boolean;
enable_deep_dark_theme: boolean;
enable_forced_playback_speed: boolean;
+ enable_forward_rewind_buttons: boolean;
enable_hide_end_screen_cards: boolean;
+ enable_hide_end_screen_cards_button: boolean;
enable_hide_live_stream_chat: boolean;
+ enable_hide_paid_promotion_banner: boolean;
enable_hide_scrollbar: boolean;
enable_hide_shorts: boolean;
enable_hide_translate_comment: boolean;
@@ -380,6 +440,7 @@ export type configuration = {
enable_video_history: boolean;
enable_volume_boost: boolean;
feature_menu_open_type: FeatureMenuOpenType;
+ forward_rewind_buttons_time: number;
language: AvailableLocales;
osd_display_color: OnScreenDisplayColor;
osd_display_hide_time: number;
@@ -389,6 +450,7 @@ export type configuration = {
osd_display_type: OnScreenDisplayType;
playback_buttons_speed: number;
player_quality: YoutubePlayerQualityLevel;
+ player_quality_fallback_strategy: PlayerQualityFallbackStrategy;
player_speed: number;
remembered_volumes: RememberedVolumes;
screenshot_format: ScreenshotFormat;
diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts
index 84d22d32..96d47845 100644
--- a/src/utils/EventManager.ts
+++ b/src/utils/EventManager.ts
@@ -1,6 +1,8 @@
export type FeatureName =
| "automaticTheaterMode"
| "featureMenu"
+ | "forwardRewindButtons"
+ | "hideEndScreenCardsButton"
| "hideScrollBar"
| "hideShorts"
| "loopButton"
diff --git a/src/utils/checkLocalesForMissingKeys.ts b/src/utils/checkLocalesForMissingKeys.ts
index 97663c3a..a8d0aea8 100644
--- a/src/utils/checkLocalesForMissingKeys.ts
+++ b/src/utils/checkLocalesForMissingKeys.ts
@@ -1,6 +1,6 @@
import type EnUS from "public/locales/en-US.json";
-import { availableLocales } from "../i18n";
+import { availableLocales } from "../i18n/constants";
import { type LocaleFile, flattenLocaleValues, getLocaleFile } from "./plugins/utils";
function checkForMissingKeys(englishFile: LocaleFile, localeFile: LocaleFile) {
const { keys: englishKeys } = flattenLocaleValues(englishFile);
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 35b9fff5..53a543fe 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -3,8 +3,9 @@ import z, { ZodEnum, ZodObject } from "zod";
import type { AllButtonNames, ButtonPlacement, TypeToPartialZodSchema, configuration } from "../types";
import { deepDarkPreset } from "../deepDarkPresets";
-import { availableLocales } from "../i18n/index";
+import { availableLocales } from "../i18n/constants";
import {
+ PlayerQualityFallbackStrategy,
buttonNames,
buttonPlacements,
featureMenuOpenTypes,
@@ -23,10 +24,13 @@ export const outputFolderName = "dist";
export const defaultConfiguration = {
button_placements: {
decreasePlaybackSpeedButton: "player_controls_left",
+ forwardButton: "player_controls_right",
+ hideEndScreenCardsButton: "player_controls_right",
increasePlaybackSpeedButton: "player_controls_left",
loopButton: "feature_menu",
maximizePlayerButton: "feature_menu",
openTranscriptButton: "feature_menu",
+ rewindButton: "player_controls_right",
screenshotButton: "feature_menu",
volumeBoostButton: "feature_menu"
},
@@ -46,8 +50,11 @@ export const defaultConfiguration = {
enable_custom_css: false,
enable_deep_dark_theme: false,
enable_forced_playback_speed: false,
+ enable_forward_rewind_buttons: false,
enable_hide_end_screen_cards: false,
+ enable_hide_end_screen_cards_button: false,
enable_hide_live_stream_chat: false,
+ enable_hide_paid_promotion_banner: false,
enable_hide_scrollbar: false,
enable_hide_shorts: false,
enable_hide_translate_comment: false,
@@ -71,6 +78,7 @@ export const defaultConfiguration = {
enable_video_history: false,
enable_volume_boost: false,
feature_menu_open_type: "hover",
+ forward_rewind_buttons_time: 5,
language: "en-US",
osd_display_color: "white",
osd_display_hide_time: 750,
@@ -80,6 +88,7 @@ export const defaultConfiguration = {
osd_display_type: "text",
playback_buttons_speed: 0.25,
player_quality: "auto",
+ player_quality_fallback_strategy: "lower",
player_speed: 1,
remembered_volumes: {
shortsPageVolume: 100,
@@ -129,8 +138,11 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_custom_css: z.boolean().optional(),
enable_deep_dark_theme: z.boolean().optional(),
enable_forced_playback_speed: z.boolean().optional(),
+ enable_forward_rewind_buttons: z.boolean().optional(),
enable_hide_end_screen_cards: z.boolean().optional(),
+ enable_hide_end_screen_cards_button: z.boolean().optional(),
enable_hide_live_stream_chat: z.boolean().optional(),
+ enable_hide_paid_promotion_banner: z.boolean().optional(),
enable_hide_scrollbar: z.boolean().optional(),
enable_hide_shorts: z.boolean().optional(),
enable_hide_translate_comment: z.boolean().optional(),
@@ -154,6 +166,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_video_history: z.boolean().optional(),
enable_volume_boost: z.boolean().optional(),
feature_menu_open_type: z.enum(featureMenuOpenTypes).optional(),
+ forward_rewind_buttons_time: z.number().optional(),
language: z.enum(availableLocales).optional(),
osd_display_color: z.enum(onScreenDisplayColors).optional(),
osd_display_hide_time: z.number().optional(),
@@ -163,6 +176,7 @@ export const configurationImportSchema: TypeToPartialZodSchema<
osd_display_type: z.enum(onScreenDisplayTypes).optional(),
playback_buttons_speed: z.number().min(0.25).max(4.0).step(0.25).optional(),
player_quality: z.enum(youtubePlayerQualityLevels).optional(),
+ player_quality_fallback_strategy: z.enum(PlayerQualityFallbackStrategy).optional(),
player_speed: z.number().min(0.25).max(4.0).step(0.25).optional(),
remembered_volumes: z
.object({
diff --git a/src/utils/plugins/utils.ts b/src/utils/plugins/utils.ts
index a924925b..9cde3483 100644
--- a/src/utils/plugins/utils.ts
+++ b/src/utils/plugins/utils.ts
@@ -1,9 +1,9 @@
+import type { AvailableLocales } from "@/src/i18n/constants";
+
import { copyFileSync, existsSync, mkdirSync, readFileSync, readdirSync, rmSync, statSync } from "fs";
import { GetInstalledBrowsers } from "get-installed-browsers";
import { join, resolve } from "path";
-import type { AvailableLocales } from "../../../src/i18n";
-
import { outputFolderName } from "../../../src/utils/constants";
export type LocaleValue = { [key: string]: LocaleValue } | string;
export type LocaleFile = {
diff --git a/src/utils/updateAvailableLocales.ts b/src/utils/updateAvailableLocales.ts
index 24e70309..976e424b 100644
--- a/src/utils/updateAvailableLocales.ts
+++ b/src/utils/updateAvailableLocales.ts
@@ -17,9 +17,9 @@ export default function updateAvailableLocales() {
const availableLocales = readdirSync(`${publicDir}/locales`)
.filter((locale) => locale.endsWith(".json"))
.map((locale) => locale.replace(".json", ""));
- const availableLocalesFile = readFileSync(`${i18nDir}/index.ts`, "utf-8");
+ const availableLocalesFile = readFileSync(`${i18nDir}/constants.ts`, "utf-8");
const updatedAvailableLocalesFile = updateAvailableLocalesArray(availableLocalesFile, availableLocales);
if (updatedAvailableLocalesFile && updatedAvailableLocalesFile !== availableLocalesFile) {
- writeFileSync(`${i18nDir}/index.ts`, updatedAvailableLocalesFile);
+ writeFileSync(`${i18nDir}/constants.ts`, updatedAvailableLocalesFile);
}
}
diff --git a/src/utils/updateLocalePercentages.ts b/src/utils/updateLocalePercentages.ts
index 0f7165fb..0fc77eec 100644
--- a/src/utils/updateLocalePercentages.ts
+++ b/src/utils/updateLocalePercentages.ts
@@ -4,7 +4,7 @@ import { generateErrorMessage } from "zod-error";
import type { CrowdinLanguageProgressResponse, TypeToZodSchema } from "../types";
-import { type AvailableLocales } from "../i18n";
+import { type AvailableLocales } from "../i18n/constants";
import { i18nDir } from "./plugins/utils";
import { formatError } from "./utilities";
@@ -66,10 +66,10 @@ function updateLocalePercentageObject(code: string, updatedObject: Record (value2: unknown) => value1 === value2;
@@ -47,16 +54,19 @@ export const toDivisible = (value: number, divider: number): number => Math.ceil
export function chooseClosestQuality(
selectedQuality: YoutubePlayerQualityLevel,
- availableQualities: YoutubePlayerQualityLevel[]
+ availableQualities: YoutubePlayerQualityLevel[],
+ fallbackStrategy: PlayerQualityFallbackStrategy
): Nullable {
// If there are no available qualities, return null
if (availableQualities.length === 0) {
return null;
}
+
// If the selected quality is available, return it
if (availableQualities.includes(selectedQuality)) {
return selectedQuality;
}
+
// Find the index of the selected quality in the array
const selectedIndex = youtubePlayerQualityLevels.indexOf(selectedQuality);
@@ -65,15 +75,34 @@ export function chooseClosestQuality(
(acc, quality) => {
const qualityIndex = youtubePlayerQualityLevels.indexOf(quality);
if (qualityIndex !== -1) {
- acc.push({ difference: Math.abs(selectedIndex - qualityIndex), quality });
+ acc.push({ difference: Math.abs(selectedIndex - qualityIndex), quality, qualityIndex });
}
return acc;
},
- [] as { difference: number; quality: YoutubePlayerQualityLevel }[]
+ [] as { difference: number; quality: YoutubePlayerQualityLevel; qualityIndex: number }[]
);
- // Return the quality level with the minimum difference
- return closestQualities[0].quality;
+ // Sort the closest qualities by difference in ascending order
+ closestQualities.sort((a, b) => a.difference - b.difference);
+
+ // If fallback strategy is "higher", prefer higher quality levels
+ if (fallbackStrategy === "higher") {
+ for (const { quality, qualityIndex } of closestQualities) {
+ if (qualityIndex > selectedIndex) {
+ return quality;
+ }
+ }
+ }
+
+ // If fallback strategy is "lower", prefer lower quality levels
+ if (fallbackStrategy === "lower") {
+ for (const { quality, qualityIndex } of closestQualities) {
+ if (qualityIndex < selectedIndex) {
+ return quality;
+ }
+ }
+ }
+ return null;
}
const BrowserColors = {
BgBlack: "background-color: black; color: white;",
@@ -683,3 +712,57 @@ export function deepMerge(target: Record, source: Record = {};
+ const singleButtonChanges: DeepPartial = {};
+
+ Object.keys(changes.buttonPlacement).forEach((button) => {
+ const buttonName = button;
+ if (
+ !Array.from(featureToMultiButtonsMap.keys())
+ .map((key) => featureToMultiButtonsMap.get(key))
+ .flat()
+ .includes(buttonName)
+ )
+ // eslint-disable-next-line prefer-destructuring
+ return (singleButtonChanges[buttonName as SingleButtonFeatureNames] = changes.buttonPlacement[buttonName]);
+ const multiButtonFeatureNames = findKeyByValue(buttonName as Exclude);
+ if (multiButtonFeatureNames === undefined) return;
+ const featureButtons = featureToMultiButtonsMap.get(multiButtonFeatureNames) || [];
+ if (featureButtons.includes(buttonName)) {
+ if (!multiButtonChanges[multiButtonFeatureNames]) {
+ multiButtonChanges[multiButtonFeatureNames] = {};
+ }
+ // eslint-disable-next-line prefer-destructuring
+ multiButtonChanges[multiButtonFeatureNames]![buttonName as keyof FeatureToMultiButtonMap[typeof multiButtonFeatureNames]] =
+ changes.buttonPlacement[buttonName as keyof FeatureToMultiButtonMap[typeof multiButtonFeatureNames]];
+ }
+ });
+
+ return { multiButtonChanges: multiButtonChanges as MultiButtonChange, singleButtonChanges: singleButtonChanges as SingleButtonChange };
+}
+export function isButtonSelectDisabled(buttonName: AllButtonNames, settings: configuration) {
+ switch (buttonName) {
+ case "volumeBoostButton": {
+ return settings.volume_boost_mode === "global" || settings[buttonNameToSettingName[buttonName]] === false;
+ }
+ default: {
+ const { [buttonName]: settingName } = buttonNameToSettingName;
+ return settings[settingName] === false;
+ }
+ }
+}
+export function isNewYouTubeVideoLayout(): boolean {
+ // Check for the class in the new layout
+ const newLayoutElement = document.querySelector("ytd-player.ytd-watch-grid");
+
+ if (newLayoutElement) {
+ return true; // It's the new layout
+ } else {
+ return false; // It's the old layout
+ }
+}
