+
-
+
+
+ {disabled && disabledReason && (
+
+ {disabledReason}
+
+ )}
+
);
};
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
index 1d7dd1f9e..e838dfde4 100644
--- a/src/components/Settings/Settings.tsx
+++ b/src/components/Settings/Settings.tsx
@@ -437,17 +437,10 @@ export default function Settings() {
settings.enable_scroll_wheel_volume_control?.toString() !== "true" && settings.enable_scroll_wheel_speed_control?.toString() !== "true";
const isDeepDarkThemeDisabled = settings.enable_deep_dark_theme?.toString() !== "true";
const isDeepDarkThemeCustom = settings.deep_dark_preset === "Custom";
- const isDeepDarkThemeColorPickerDisabled = isDeepDarkThemeDisabled || (!isDeepDarkThemeDisabled && !isDeepDarkThemeCustom);
- const deepDarkThemeColorPickerParentSetting = (
- (isDeepDarkThemeDisabled && !isDeepDarkThemeCustom) || (isDeepDarkThemeDisabled && isDeepDarkThemeCustom) ?
- {
- type: "singular",
- value: "settings.sections.youtubeDeepDark.enable.label"
- }
- : {
- type: "specificOption",
- value: "settings.optionDisabled.specificOption.deepDarkCustomTheme"
- }) satisfies parentSetting;
+ const deepDarkThemeColorPickerParentSetting = {
+ type: "singular",
+ value: "settings.sections.youtubeDeepDark.enable.label"
+ } satisfies parentSetting;
const osdParentSetting = {
type: "either",
value: ["settings.sections.scrollWheelVolumeControl.enable.label", "settings.sections.scrollWheelSpeedControl.enable.label"]
@@ -472,6 +465,10 @@ export default function Settings() {
type: "singular",
value: "settings.sections.screenshotButton.enable.label"
} satisfies parentSetting;
+ const screenshotButtonSaveAsClipboardParentSetting = {
+ type: "specificOption",
+ value: "settings.optionDisabled.specificOption.screenshotButtonFileFormat"
+ } satisfies parentSetting;
const playlistLengthParentSetting = {
type: "singular",
value: "settings.sections.playlistLength.enable.label"
@@ -573,6 +570,14 @@ export default function Settings() {
title={t("settings.sections.miscellaneous.features.maximizePlayerButton.title")}
type="checkbox"
/>
+
+
+
+
@@ -1122,7 +1159,11 @@ export default function Settings() {
label={t("settings.sections.screenshotButton.selectFormat.label")}
onChange={setValueOption("screenshot_format")}
options={ScreenshotFormatOptions}
- parentSetting={screenshotButtonParentSetting}
+ parentSetting={
+ settings.enable_screenshot_button?.toString() === "true" && settings.screenshot_save_as?.toString() === "clipboard" ?
+ screenshotButtonSaveAsClipboardParentSetting
+ : screenshotButtonParentSetting
+ }
selectedOption={getSelectedOption("screenshot_format")}
title={t("settings.sections.screenshotButton.selectFormat.title")}
type="select"
@@ -1236,69 +1277,73 @@ export default function Settings() {
title={t("settings.sections.youtubeDeepDark.select.title")}
type="select"
/>
-
-
-
-
-
-
-
+ {isDeepDarkThemeCustom && (
+ <>
+
+
+
+
+
+
+
+
+ )}
diff --git a/src/components/Settings/components/Setting.tsx b/src/components/Settings/components/Setting.tsx
index 1a76273c4..0950b23b8 100644
--- a/src/components/Settings/components/Setting.tsx
+++ b/src/components/Settings/components/Setting.tsx
@@ -76,8 +76,18 @@ function SettingInput(settingProps: SettingInputProp
const { type } = settingProps;
switch (type) {
case "checkbox": {
- const { checked, className, label, onChange, title } = settingProps;
- return ;
+ const { checked, className, disabled, disabledReason, label, onChange, title } = settingProps;
+ return (
+
+ );
}
case "color-picker": {
const { className, disabled, label, onChange, title, value } = settingProps;
diff --git a/src/deepDarkMaterialCSS.ts b/src/deepDarkMaterialCSS.ts
index f55c615ef..3b27c3a21 100644
--- a/src/deepDarkMaterialCSS.ts
+++ b/src/deepDarkMaterialCSS.ts
@@ -1,5 +1,5 @@
/**
- * Version 4.5.8
+ * Version 4.6.3
* Author: https://github.com/RaitaroH
* Co-authors: https://github.com/MechaLynx
* Repository: https://github.com/RaitaroH/YouTube-DeepDark
@@ -456,6 +456,11 @@ yt-chip-cloud-chip-renderer[chip-style="STYLE_REFRESH_TO_NOVEL_CHIP"][selected]
background-image: none !important;
}
+/*2025-09-04 - YouTube Small Thumbnails addon issue*/
+#frosted-glass.with-chipbar.ytd-app {
+ background: var(--main-background) !important;
+}
+
/*video recommendation filter*/
yt-chip-cloud-chip-renderer[chip-style="STYLE_DEFAULT"][selected] #chip-container.yt-chip-cloud-chip-renderer,
yt-chip-cloud-chip-renderer[chip-style="STYLE_HOME_FILTER"][selected] #chip-container.yt-chip-cloud-chip-renderer {
@@ -476,11 +481,13 @@ ytd-compact-promoted-item-renderer[view-style="COMPACT_PROMOTED_ITEM_STYLE_RICH_
/*your selection*/
tp-yt-paper-item.ytd-backstage-poll-renderer[selected] .progress-bar.ytd-backstage-poll-renderer {
background-color: var(--main-color) !important;
+ opacity: 0.9;
}
/*other bars*/
.progress-bar.ytd-backstage-poll-renderer {
- background-color: var(--second-background) !important;
+ background-color: var(--main-color) !important;
+ opacity: 0.2;
}
ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-poll-renderer .choice-info.ytd-backstage-poll-renderer {
@@ -504,7 +511,8 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
background: var(--hover-background) !important;
}
-#channel-title.ytd-c4-tabbed-header-renderer {
+#channel-title.ytd-c4-tabbed-header-renderer,
+.dynamicTextViewModelH1 {
color: var(--main-text) !important;
}
@@ -512,7 +520,8 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
color: var(--dimmer-text) !important;
}
-.truncated-text-wiz {
+.truncated-text-wiz,
+.yt-truncated-text__truncated-text-content {
color: var(--dimmer-text) !important;
}
@@ -523,13 +532,16 @@ ytd-backstage-poll-renderer:not([is-image-poll]) tp-yt-paper-item.ytd-backstage-
.tab-content.paper-tab,
.tab-content.tp-yt-paper-tab,
-.yt-tab-shape-wiz__tab {
+.yt-tab-shape-wiz__tab,
+/*2025-08-30*/
+.yt-tab-shape__tab {
color: var(--main-text) !important;
}
paper-tab:hover .tab-content.paper-tab,
tp-yt-paper-tab:hover > .tab-content.tp-yt-paper-tab,
-.yt-tab-shape-wiz__tab--tab-selected {
+.yt-tab-shape-wiz__tab--tab-selected,
+.yt-tab-shape__tab--tab-selected {
color: var(--main-color) !important;
}
@@ -538,8 +550,10 @@ tp-yt-paper-tabs {
}
/* for tab selected */
-.yt-tab-group-shape-wiz__slider {
+.yt-tab-group-shape-wiz__slider,
+.yt-tab-shape__tab-bar--tab-bar-selected {
background-color: var(--main-color) !important;
+ height: 2px !important;
}
/* Join button, Sign In, Show Transcript */
@@ -583,7 +597,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;
}
@@ -878,7 +892,9 @@ h3.ytd-playlist-renderer,
.ShortsLockupViewModelHostOutsideMetadataEndpoint,
.shortsLockupViewModelHostOutsideMetadataEndpoint,
/*home page titles - 2024-11-17*/
-.yt-lockup-metadata-view-model-wiz__title {
+.yt-lockup-metadata-view-model-wiz__title,
+/*2025-08-30*/
+.yt-lockup-metadata-view-model__title {
color: var(--main-text) !important;
}
@@ -893,7 +909,9 @@ a.yt-simple-endpoint.ytd-playlist-panel-video-renderer:hover #unplayableText,
#video-title:hover,
ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-renderer,
/*home page titles - 2024-11-17*/
-.yt-lockup-metadata-view-model-wiz__title:hover {
+.yt-lockup-metadata-view-model-wiz__title:hover,
+/*2025-08-30*/
+.yt-lockup-metadata-view-model__title:hover {
color: var(--main-color) !important;
}
@@ -901,7 +919,10 @@ ytd-grid-video-renderer:hover #video-title.yt-simple-endpoint.ytd-grid-video-ren
yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
#byline.ytd-video-meta-block,
#channel-title.ytd-channel-renderer span.ytd-channel-renderer,
-#text.ytd-channel-name {
+#text.ytd-channel-name,
+.yt-content-metadata-view-model-wiz__metadata-row:first-child .yt-core-attributed-string--link-inherit-color,
+/*2025-08-30*/
+.yt-content-metadata-view-model__metadata-row:nth-child(1)>.yt-core-attributed-string {
color: var(--main-color) !important;
}
@@ -916,6 +937,21 @@ yt-formatted-string[ellipsis-truncate] a.yt-formatted-string:last-child,
color: var(--dimmer-text) !important;
}
+/*new badge*/
+.badge-shape-wiz--default,
+/*2025-08-30*/
+.yt-badge-shape--default {
+ color: var(--accent-color) !important;
+ background: var(--hover-background) !important;
+}
+
+/*check badge*/
+ytd-author-comment-badge-renderer[enable-modern-comment-badges][creator] #icon.ytd-author-comment-badge-renderer,
+/*2025-08-30*/
+.yt-content-metadata-view-model__metadata-row:nth-child(1)>.yt-core-attributed-string--link-inherit-color>span {
+ color: var(--accent-color) !important;
+}
+
/*youtube channel in the watch next sidebar*/
/*ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer #metadata.ytd-channel-renderer*/
ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer #description.ytd-channel-renderer {
@@ -932,7 +968,7 @@ ytd-item-section-renderer.ytd-watch-next-secondary-results-renderer #avatar-sect
}
/*video description*/
-#description:not([class*="yt-music"]),
+#description:not([class*="yt-music"]):not([class*="ytd-channel-video-player-renderer"]),
#bio,
#right-column>yt-formatted-string {
background: var(--second-background) !important;
@@ -1451,15 +1487,19 @@ ytd-button-renderer.style-primary[is-paper-button] {
}
/*2024-07 subscribe dropdown*/
-.yt-contextual-sheet-layout-wiz {
+.yt-contextual-sheet-layout-wiz,
+/*2025-08-30 also triple dots for videos*/
+.ytContextualSheetLayoutHost {
background-color: var(--second-background) !important;
}
-.yt-list-item-view-model-wiz__title {
+.yt-list-item-view-model-wiz__title,
+.yt-list-item-view-model__title {
color: var(--main-text) !important;
}
-.yt-list-item-view-model-wiz__accessory {
+.yt-list-item-view-model-wiz__accessory,
+.yt-list-item-view-model__accessory {
color: var(--main-text) !important;
}
@@ -1752,7 +1792,7 @@ ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-
.YtProgressBarLineProgressBarPlayedRefresh,
.ytProgressBarLineProgressBarPlayedRefresh,
.YtThumbnailOverlayProgressBarHostWatchedProgressBarSegmentModern,
-.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegmentModern {
+.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment {
background: var(--main-color) !important;
}
@@ -1863,24 +1903,34 @@ ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-
/*Miniplayer*/
#info-bar.ytd-miniplayer .metadata.ytd-miniplayer,
-#info-bar.ytd-miniplayer {
+#info-bar.ytd-miniplayer,
+/*2025-08-30*/
+.ytdMiniplayerInfoBarHost {
background-color: var(--main-background) !important;
}
-#info-bar.ytd-miniplayer .channel.ytd-miniplayer {
+#info-bar.ytd-miniplayer .channel.ytd-miniplayer,
+.ytdMiniplayerInfoBarTitle {
color: var(--main-color) !important;
}
+.ytdMiniplayerInfoBarSubtitle {
+ color: var(--main-text) !important;
+}
+
.ytd-miniplayer .ytp-button:not([aria-disabled="true"]):not([disabled]):not([aria-hidden="true"]):hover svg path {
fill: var(--main-color) !important;
}
/*added to queue*/
-ytd-miniplayer-toast[opened] {
+ytd-miniplayer-toast[opened],
+.ytdMiniplayerToastOpening {
background-color: var(--second-background) !important;
}
-#label.ytd-miniplayer-toast {
+#label.ytd-miniplayer-toast,
+.ytdMiniplayerToastLabel,
+.ytdMiniplayerToastTitle {
color: var(--main-color) !important;
}
@@ -2403,6 +2453,11 @@ ytd-searchbox input,
color: var(--main-color) !important;
}
+/*2025-08-30 right search icon*/
+.ytSearchboxComponentSearchButton>span:nth-child(1)>span:nth-child(1)>div:nth-child(1)>svg:nth-child(1) {
+ color: var(--main-text) !important;
+}
+
#masthead-search .search-btn-component .yt-uix-button-content
/*account*/ {
@@ -3140,6 +3195,27 @@ yt-live-chat-poll-choice:not([has-voted]) #label-text.yt-live-chat-poll-choice,
color: var(--main-text) !important;
}
+/*Top Fans*/
+/*2025-08-30*/
+ytd-section-list-renderer[live-chat-engagement-panel][panel-target-id="PAlive_viewer_leaderboard"]:not([hide-bottom-separator]) #contents.ytd-section-list-renderer>ytd-item-section-renderer.ytd-section-list-renderer:not(:last-child) {
+ border-color: var(--hover-background) !important;
+}
+
+.ytvlLiveLeaderboardItemViewModelRankNumber,
+.ytvlLiveLeaderboardItemChannelContentViewModelChannelName,
+.ytvlLiveLeaderboardItemViewModelPoints {
+ color: var(--main-text) !important;
+}
+
+/*top fans info*/
+#inner.yt-live-chat-dialog-renderer {
+ background-color: var(--hover-background) !important;
+}
+
+#live-chat-dialog-body.yt-live-chat-dialog-renderer yt-formatted-string.yt-live-chat-dialog-renderer>span {
+ color: var(--main-text) !important;
+}
+
/*Fund raiser*/
#header-section.ytd-donation-shelf-renderer,
diff --git a/src/features/automaticallyDisableAmbientMode/index.ts b/src/features/automaticallyDisableAmbientMode/index.ts
index e6c5f8f6b..83871bf9e 100644
--- a/src/features/automaticallyDisableAmbientMode/index.ts
+++ b/src/features/automaticallyDisableAmbientMode/index.ts
@@ -4,9 +4,6 @@ import { delay, isShortsPage, isWatchPage, waitForAllElements, waitForElement, w
let ambientModeWasEnabled = false;
-const AMBIENT_MODE_PATH_SELECTOR =
- "path[d='M21 7v10H3V7h18m1-1H2v12h20V6zM11.5 2v3h1V2h-1zm1 17h-1v3h1v-3zM3.79 3 6 5.21l.71-.71L4.5 2.29 3.79 3zm2.92 16.5L6 18.79 3.79 21l.71.71 2.21-2.21zM19.5 2.29 17.29 4.5l.71.71L20.21 3l-.71-.71zm0 19.42.71-.71L18 18.79l-.71.71 2.21 2.21z']";
-
export async function disableAutomaticallyDisableAmbientMode(): Promise {
if (!ambientModeWasEnabled) return;
await toggleAmbientMode(true);
@@ -36,7 +33,7 @@ async function toggleAmbientMode(desiredState: boolean): Promise {
settingsButton.click();
}
const ambientModeMenuItem: Nullable = settingsPanelMenu.querySelector(
- `.ytp-menuitem:has(.ytp-menuitem-icon svg ${AMBIENT_MODE_PATH_SELECTOR})`
+ `.ytp-menuitem:has(.ytp-menuitem-icon svg path[d='M12 .5C11.73 .5 11.48 .60 11.29 .79C11.10 .98 11 1.23 11 1.5V3.5C11 3.76 11.10 4.01 11.29 4.20C11.48 4.39 11.73 4.5 12 4.5C12.26 4.5 12.51 4.39 12.70 4.20C12.89 4.01 13 3.76 13 3.5V1.5C13 1.23 12.89 .98 12.70 .79C12.51 .60 12.26 .5 12 .5ZM3.79 1.29C3.61 1.46 3.51 1.70 3.50 1.94C3.48 2.19 3.56 2.43 3.72 2.63L3.79 2.70L5.29 4.20L5.37 4.27C5.56 4.42 5.80 4.50 6.04 4.49C6.29 4.47 6.52 4.37 6.70 4.20C6.87 4.02 6.97 3.79 6.99 3.54C7.00 3.30 6.92 3.06 6.77 2.86L6.70 2.79L5.20 1.29L5.13 1.22C4.93 1.06 4.69 .98 4.44 1.00C4.20 1.01 3.96 1.11 3.79 1.29ZM18.86 1.22L18.79 1.29L17.29 2.79L17.22 2.86C17.07 3.06 16.99 3.30 17.00 3.54C17.01 3.79 17.12 4.02 17.29 4.20C17.47 4.37 17.70 4.48 17.95 4.49C18.19 4.50 18.43 4.42 18.63 4.27L18.70 4.20L20.20 2.70L20.27 2.63C20.42 2.43 20.50 2.19 20.49 1.95C20.48 1.70 20.37 1.47 20.20 1.29C20.02 1.12 19.79 1.01 19.54 1.00C19.30 .99 19.06 1.07 18.86 1.22ZM19.20 6.01L19 6H5L4.79 6.01C4.30 6.06 3.84 6.29 3.51 6.65C3.18 7.02 2.99 7.50 3 8V16L3.01 16.20C3.05 16.66 3.26 17.08 3.58 17.41C3.91 17.73 4.33 17.94 4.79 17.99L5 18H19L19.20 17.98C19.66 17.94 20.08 17.73 20.41 17.41C20.73 17.08 20.94 16.66 20.99 16.20L21 16V8C20.99 7.50 20.81 7.02 20.48 6.66C20.15 6.29 19.69 6.06 19.20 6.01ZM5 16V8H19V16H5ZM17.29 19.79C17.11 19.96 17.01 20.20 17.00 20.44C16.98 20.69 17.06 20.93 17.22 21.13L17.29 21.20L18.79 22.70L18.86 22.77C19.06 22.92 19.30 23.00 19.54 22.99C19.79 22.98 20.02 22.87 20.20 22.70C20.37 22.52 20.48 22.29 20.49 22.04C20.50 21.80 20.42 21.56 20.27 21.36L20.20 21.29L18.70 19.79L18.63 19.72C18.43 19.56 18.19 19.48 17.94 19.50C17.70 19.51 17.46 19.61 17.29 19.79ZM5.37 19.72L5.29 19.79L3.79 21.29L3.72 21.36C3.57 21.56 3.49 21.80 3.50 22.04C3.51 22.29 3.62 22.52 3.79 22.70C3.97 22.87 4.20 22.98 4.45 22.99C4.69 23.00 4.93 22.92 5.13 22.77L5.20 22.70L6.70 21.20L6.77 21.13C6.92 20.93 7.00 20.69 6.99 20.45C6.97 20.20 6.87 19.97 6.70 19.79C6.52 19.62 6.29 19.52 6.04 19.50C5.80 19.49 5.56 19.57 5.37 19.72ZM12 19.5C11.73 19.5 11.48 19.60 11.29 19.79C11.10 19.98 11 20.23 11 20.5V22.5C11 22.76 11.10 23.01 11.29 23.20C11.48 23.39 11.73 23.5 12 23.5C12.26 23.5 12.51 23.39 12.70 23.20C12.89 23.01 13 22.76 13 22.5V20.5C13 20.23 12.89 19.98 12.70 19.79C12.51 19.60 12.26 19.5 12 19.5Z'])`
);
if (!ambientModeMenuItem) {
settingsMenu.classList.remove("hidden");
@@ -68,7 +65,7 @@ async function toggleAmbientMode(desiredState: boolean): Promise {
}
// Wait for ambient mode item
const ambientModeItem = await waitForElement(
- `div ytd-menu-popup-renderer tp-yt-paper-listbox > :has(tp-yt-paper-item svg ${AMBIENT_MODE_PATH_SELECTOR})`
+ `div ytd-menu-popup-renderer tp-yt-paper-listbox > :has(tp-yt-paper-item svg path[d='M12 .5a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1Zm6.793.793-1.5 1.5a1 1 0 101.414 1.414l1.5-1.5a1 1 0 10-1.414-1.414Zm-15 0a1 1 0 000 1.414l1.5 1.5a1 1 0 101.414-1.414l-1.5-1.5a1 1 0 00-1.414 0ZM19 6H5a2 2 0 00-2 2v8a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2ZM5 16V8h14v8H5Zm12.293 3.792a1.001 1.001 0 000 1.415l1.5 1.5a1 1 0 001.414-1.415l-1.5-1.5a1 1 0 00-1.414 0Zm-12 0-1.5 1.5a1 1 0 101.414 1.415l1.5-1.5a1 1 0 10-1.414-1.415ZM12 19.5a1 1 0 00-1 1v2a1 1 0 002 0v-2a1 1 0 00-1-1Z'])`
);
if (!ambientModeItem) {
popupContainer.style.display = originalDisplay;
diff --git a/src/features/automaticallyEnableClosedCaptions/index.ts b/src/features/automaticallyEnableClosedCaptions/index.ts
new file mode 100644
index 000000000..4288343da
--- /dev/null
+++ b/src/features/automaticallyEnableClosedCaptions/index.ts
@@ -0,0 +1,34 @@
+import type { YouTubePlayerDiv } from "@/src/types";
+
+import { isLivePage, isWatchPage, waitForElement, waitForSpecificMessage } from "@/src/utils/utilities";
+let captionsWhereEnabled = false;
+export async function disableAutomaticallyEnableClosedCaptions() {
+ if (!(isWatchPage() || isLivePage())) return;
+ // Get the player element
+ const playerContainer = await waitForElement("div#movie_player");
+ // If player element is not available, return
+ if (!playerContainer) return;
+ // If captions were enabled, return
+ if (captionsWhereEnabled) return;
+ // Disable captions
+ playerContainer.unloadModule("captions");
+}
+export async function enableAutomaticallyEnableClosedCaptions() {
+ if (!(isWatchPage() || isLivePage())) return;
+ const {
+ data: {
+ options: { enable_automatically_enable_closed_captions }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_automatically_enable_closed_captions) return;
+ // Get the player element
+ const playerContainer = await waitForElement("div#movie_player");
+ const subtitlesButton = document.querySelector("button.ytp-subtitles-button");
+ // If player element or subtitles button is not available, return
+ if (!playerContainer || !subtitlesButton) return;
+ captionsWhereEnabled = subtitlesButton.getAttribute("aria-pressed") === "true";
+ // If captions were already enabled, return
+ if (captionsWhereEnabled) return;
+ // Enable captions
+ subtitlesButton.click();
+}
diff --git a/src/features/automaticallyMaximizePlayer/index.ts b/src/features/automaticallyMaximizePlayer/index.ts
new file mode 100644
index 000000000..c5c585d8b
--- /dev/null
+++ b/src/features/automaticallyMaximizePlayer/index.ts
@@ -0,0 +1,15 @@
+import { maximizePlayer, minimizePlayer } from "@/src/features/maximizePlayerButton/utils";
+import { waitForSpecificMessage } from "@/src/utils/utilities";
+
+export function disableAutomaticallyMaximizePlayer() {
+ minimizePlayer();
+}
+export async function enableAutomaticallyMaximizePlayer() {
+ const {
+ data: {
+ options: { enable_automatically_maximize_player }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+ if (!enable_automatically_maximize_player) return;
+ maximizePlayer();
+}
diff --git a/src/features/buttonPlacement/index.css b/src/features/buttonPlacement/index.css
new file mode 100644
index 000000000..a232df415
--- /dev/null
+++ b/src/features/buttonPlacement/index.css
@@ -0,0 +1,26 @@
+.yte-button-player-controls-left {
+ margin: var(--yt-delhi-pill-top-height, 12px) 0 var(--yt-delhi-pill-top-height, 12px) 12px;
+ height: var(--yt-delhi-pill-height, 48px) !important;
+ border-radius: 28px;
+ -webkit-backdrop-filter: var(--yt-frosted-glass-backdrop-filter-override, blur(16px)) !important;
+ backdrop-filter: var(--yt-frosted-glass-backdrop-filter-override, blur(16px));
+ background: var(--yt-spec-overlay-background-medium-light, rgba(0, 0, 0, 0.3)) !important;
+ text-shadow: 0 0 2px #000;
+ padding: 0;
+ position: relative;
+}
+
+.ytp-delhi-modern.ytp-big-mode .yte-button-player-controls-left {
+ margin-top: calc((var(--yt-delhi-big-mode-bottom-controls-height, 96px) - var(--yt-delhi-big-mode-pill-height, 56px)) / 2) !important;
+ height: var(--yt-delhi-big-mode-pill-height, 56px) !important;
+ width: 56px !important;
+}
+
+.yte-button-below-player {
+ place-content: center;
+ display: flex;
+ flex-wrap: wrap;
+ z-index: 0;
+ height: 48px;
+ width: 48px;
+}
diff --git a/src/features/buttonPlacement/index.ts b/src/features/buttonPlacement/index.ts
index b9b35d49d..27a734fa1 100644
--- a/src/features/buttonPlacement/index.ts
+++ b/src/features/buttonPlacement/index.ts
@@ -1,3 +1,4 @@
+import "./index.css";
import type { GetIconType } from "@/src/icons";
import type { AllButtonNames, ButtonPlacement, MultiButtonNames, SingleButtonFeatureNames } from "@/src/types";
diff --git a/src/features/buttonPlacement/utils.ts b/src/features/buttonPlacement/utils.ts
index 392c76884..ae0ca27c2 100644
--- a/src/features/buttonPlacement/utils.ts
+++ b/src/features/buttonPlacement/utils.ts
@@ -51,16 +51,17 @@ export async function makeFeatureButton("button.ytp-settings-button");
if (!settingsButton) return;
- const playerContainer =
- isWatchPage() ?
- document.querySelector(
- isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
- )
- : null;
+ const playerContainer = isWatchPage() ? document.querySelector("#movie_player") : null;
if (!playerContainer) return;
const bottomControls = document.querySelector("div.ytp-chrome-bottom");
if (!bottomControls) return;
@@ -197,12 +190,7 @@ async function createFeatureMenuButton() {
// Get references to various elements and check their existence
const settingsButton = document.querySelector("button.ytp-settings-button");
if (!settingsButton) return;
- const playerContainer =
- isWatchPage() ?
- document.querySelector(
- isNewYouTubeVideoLayout() ? "div#player-container.ytd-watch-grid" : "div#player-container.ytd-watch-flexy"
- )
- : null;
+ const playerContainer = isWatchPage() ? document.querySelector("#movie_player") : null;
if (!playerContainer) return;
// Insert the feature menu button and feature menu itself
settingsButton.insertAdjacentElement("beforebegin", featureMenuButton);
@@ -221,12 +209,12 @@ function makeFeatureMenuIcon() {
"svg",
{
fill: "white",
- height: "48px",
- viewBox: "0 0 36 36",
- width: "48px"
+ height: "24px",
+ viewBox: "0 0 24 24",
+ width: "24px"
},
createSVGElement("path", {
- d: "M 9.1273596,13.56368 H 13.56368 V 9.1273596 H 9.1273596 Z M 15.78184,26.872641 h 4.43632 V 22.43632 h -4.43632 z m -6.6544804,0 H 13.56368 V 22.43632 H 9.1273596 Z m 0,-6.654481 H 13.56368 V 15.78184 H 9.1273596 Z m 6.6544804,0 h 4.43632 V 15.78184 H 15.78184 Z M 22.43632,9.1273596 V 13.56368 h 4.436321 V 9.1273596 Z M 15.78184,13.56368 h 4.43632 V 9.1273596 h -4.43632 z m 6.65448,6.65448 h 4.436321 V 15.78184 H 22.43632 Z m 0,6.654481 h 4.436321 V 22.43632 H 22.43632 Z",
+ d: "M 3.1273593,7.5636797 H 7.5636797 V 3.1273593 H 3.1273593 Z M 9.7818397,20.872641 H 14.21816 V 16.43632 H 9.7818397 Z m -6.6544804,0 H 7.5636797 V 16.43632 H 3.1273593 Z m 0,-6.654481 H 7.5636797 V 9.7818397 H 3.1273593 Z m 6.6544804,0 H 14.21816 V 9.7818397 H 9.7818397 Z M 16.43632,3.1273593 v 4.4363204 h 4.436321 V 3.1273593 Z M 9.7818397,7.5636797 H 14.21816 V 3.1273593 H 9.7818397 Z M 16.43632,14.21816 h 4.436321 V 9.7818397 H 16.43632 Z m 0,6.654481 h 4.436321 V 16.43632 H 16.43632 Z",
fill: "white"
})
);
diff --git a/src/features/featureMenu/utils.ts b/src/features/featureMenu/utils.ts
index 05a675e77..fb9fa9006 100644
--- a/src/features/featureMenu/utils.ts
+++ b/src/features/featureMenu/utils.ts
@@ -59,6 +59,7 @@ export async function addFeatureItemToMenu("#yte-feature-menu-button");
if (featureMenuButton) {
- featureMenuButton.style.display = "initial";
+ featureMenuButton.style.display = "flex";
}
}
/**
diff --git a/src/features/hideEndScreenCards/index.ts b/src/features/hideEndScreenCards/index.ts
index c5b79d167..46aab99cb 100644
--- a/src/features/hideEndScreenCards/index.ts
+++ b/src/features/hideEndScreenCards/index.ts
@@ -2,12 +2,13 @@ import type { AddButtonFunction, RemoveButtonFunction } from "@/src/features";
import type { ButtonPlacement, YouTubePlayerDiv } from "@/src/types";
import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
-import { updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
-import { getFeatureIcon } from "@/src/icons";
+import { getFeatureButton, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureMenuItem } from "@/src/features/featureMenu/utils";
+import { getFeatureIcon, type ToggleIcon } from "@/src/icons";
import eventManager from "@/src/utils/EventManager";
-import { isWatchPage, modifyElementsClassList, waitForAllElements, waitForElement, waitForSpecificMessage } from "@/src/utils/utilities";
import "./index.css";
+import { isWatchPage, modifyElementsClassList, waitForAllElements, waitForElement, waitForSpecificMessage } from "@/src/utils/utilities";
export async function disableHideEndScreenCards() {
if (!isWatchPage()) return;
await waitForAllElements(["div#player", "div#player-container"]);
@@ -86,6 +87,12 @@ function hideEndScreenCards() {
element
}))
);
+ modifyElementsClassList("add", [
+ {
+ className: "yte-hide-end-screen-cards",
+ element: document.querySelector(".ytp-ce-hide-button-container")
+ }
+ ]);
}
function showEndScreenCards() {
modifyElementsClassList(
@@ -95,4 +102,26 @@ function showEndScreenCards() {
element
}))
);
+ modifyElementsClassList("remove", [
+ {
+ className: "yte-hide-end-screen-cards",
+ element: document.querySelector(".ytp-ce-hide-button-container")
+ }
+ ]);
}
+export const updateHideEndScreenCardsButtonState = (hideEndScreenCardsPlacement: ButtonPlacement, 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",
+ window.i18nextInstance.t(`pages.content.features.hideEndScreenCardsButton.button.toggle.${checked ? "on" : "off"}`)
+ );
+ hideEndScreenCardsButton.ariaChecked = checked ? "true" : "false";
+ }
+};
diff --git a/src/features/hidePlayables/index.css b/src/features/hidePlayables/index.css
index 9595dab75..8160698d0 100644
--- a/src/features/hidePlayables/index.css
+++ b/src/features/hidePlayables/index.css
@@ -1,3 +1,3 @@
.yte-hide-playables {
display: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/features/hideShorts/index.css b/src/features/hideShorts/index.css
index 2d5991e72..7274720d3 100644
--- a/src/features/hideShorts/index.css
+++ b/src/features/hideShorts/index.css
@@ -1,3 +1,3 @@
.yte-hide-shorts {
display: none !important;
-}
\ No newline at end of file
+}
diff --git a/src/features/hideShorts/utils.ts b/src/features/hideShorts/utils.ts
index 61914b505..6f0ddd25b 100644
--- a/src/features/hideShorts/utils.ts
+++ b/src/features/hideShorts/utils.ts
@@ -1,7 +1,7 @@
import { modifyElementsClassList } from "@/src/utils/utilities";
export const sideBarOpenedShortsButtonSelector = "ytd-guide-entry-renderer:has(a[title=Shorts])";
export const sideBarClosedShortsButtonSelector = "ytd-mini-guide-entry-renderer:has(a[title=Shorts])";
-export const homePageShortsSectionSelector = "ytd-rich-shelf-renderer[is-shorts]";
+export const homePageShortsSectionSelector = "ytd-rich-section-renderer:has([is-shorts])";
export const channelHomePageShortsSectionSelector = "ytd-reel-shelf-renderer:has(#title-container)";
export const channelPageShortsTabSelector = "yt-tab-shape[tab-title=Shorts]";
export const searchResultsShortsTabSelector = "yt-chip-cloud-chip-renderer:has(yt-formatted-string[title=Shorts])";
diff --git a/src/features/maximizePlayerButton/index.css b/src/features/maximizePlayerButton/index.css
new file mode 100644
index 000000000..5d803b6d3
--- /dev/null
+++ b/src/features/maximizePlayerButton/index.css
@@ -0,0 +1,21 @@
+.yte-maximized-video {
+ width: 100vw !important;
+ height: 100vh !important;
+ left: 0 !important;
+ top: 0 !important;
+ object-fit: contain !important;
+ background: black !important;
+}
+
+.yte-maximized-video-container {
+ position: fixed !important;
+ top: 0 !important;
+ left: 0 !important;
+ width: 100vw !important;
+ height: 100vh !important;
+ z-index: 2020 !important;
+}
+
+.yte-maximized-width {
+ width: calc(99vw - 13px) !important;
+}
diff --git a/src/features/maximizePlayerButton/index.ts b/src/features/maximizePlayerButton/index.ts
index 35fe956fe..7cd2e7a3a 100644
--- a/src/features/maximizePlayerButton/index.ts
+++ b/src/features/maximizePlayerButton/index.ts
@@ -1,14 +1,13 @@
+import "./index.css";
import type { AddButtonFunction, RemoveButtonFunction } from "@/src/features";
-import type { Nullable, YouTubePlayerDiv } from "@/src/types";
import { addFeatureButton, removeFeatureButton } from "@/src/features/buttonPlacement";
-import { getFeatureButton, modifyIconForLightTheme, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureButton, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
import { getFeatureIcon } from "@/src/icons";
import eventManager from "@/src/utils/EventManager";
import { createTooltip, waitForSpecificMessage } from "@/src/utils/utilities";
-import { maximizePlayer, setupVideoPlayerTimeUpdate, updateProgressBarPositions } from "./utils";
-// TODO: fix the "default/theatre" view button and pip button not making the player minimize to the previous state.
+import { maximizePlayer, minimizePlayer } from "./utils";
export const addMaximizePlayerButton: AddButtonFunction = async () => {
// Wait for the "options" message from the content script
const {
@@ -21,167 +20,39 @@ export const addMaximizePlayerButton: AddButtonFunction = async () => {
} = await waitForSpecificMessage("options", "request_data", "content");
// If the maximize player button option is disabled, return
if (!enableMaximizePlayerButton) return;
- // Add a click event listener to the maximize button
- function maximizePlayerButtonClickListener(checked?: boolean) {
- const button = getFeatureButton("maximizePlayerButton");
- if (!button) return;
- const featureName = "maximizePlayerButton";
- const { remove } = createTooltip({
- direction: maximizePlayerButtonPlacement === "below_player" ? "down" : "up",
- element: button,
- featureName,
- id: `yte-feature-${featureName}-tooltip`
- });
- if (checked !== undefined) {
- if (checked) remove();
- updateFeatureButtonTitle(
- "maximizePlayerButton",
- window.i18nextInstance.t(`pages.content.features.maximizePlayerButton.button.toggle.${checked ? "on" : "off"}`)
- );
- }
- maximizePlayer();
- updateProgressBarPositions();
- setupVideoPlayerTimeUpdate();
- }
-
- const pipElement: Nullable = document.querySelector("button.ytp-pip-button");
- const sizeElement: Nullable = document.querySelector("button.ytp-size-button");
- const miniPlayerElement: Nullable = document.querySelector("button.ytp-miniplayer-button");
- async function otherElementClickListener() {
- // Get the video element
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("#movie_player");
- if (!videoContainer) return;
- if (videoContainer.classList.contains("maximized_video_container") && videoElement.classList.contains("maximized_video")) {
- const maximizePlayerButton = getFeatureButton("maximizePlayerButton");
- if (!maximizePlayerButton) return;
- maximizePlayer();
- maximizePlayerButton.ariaChecked = "false";
- const button = getFeatureButton("maximizePlayerButton");
- const icon = getFeatureIcon("maximizePlayerButton", "below_player");
- if (button && button instanceof HTMLButtonElement) {
- if (typeof icon === "object" && "off" in icon && "on" in icon) updateFeatureButtonIcon(button, await modifyIconForLightTheme(icon.off, true));
- updateFeatureButtonTitle("maximizePlayerButton", window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.toggle.off"));
- }
- }
- }
+ const isPlayerMaximized = document.body.getAttribute("yte-maximized") === "";
await addFeatureButton(
"maximizePlayerButton",
maximizePlayerButtonPlacement,
maximizePlayerButtonPlacement === "feature_menu" ?
window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.label")
- : window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.toggle.off"),
+ : window.i18nextInstance.t(`pages.content.features.maximizePlayerButton.button.toggle.${isPlayerMaximized ? "on" : "off"}`),
getFeatureIcon("maximizePlayerButton", maximizePlayerButtonPlacement),
- maximizePlayerButtonClickListener,
- true
- );
- function ytpLeftButtonMouseEnterListener(event: MouseEvent) {
- const ytTooltip = document.querySelector("#movie_player > div.ytp-tooltip");
- if (!ytTooltip) return;
- // Get the video element
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("#movie_player");
- if (!videoContainer) return;
- const controlsElement = document.querySelector("div.ytp-chrome-bottom");
- if (!controlsElement) return;
-
- if (
- videoContainer.classList.contains("maximized_video_container") &&
- videoElement.classList.contains("maximized_video") &&
- controlsElement.classList.contains("maximized_controls")
- ) {
- const buttonRect = (event.target as HTMLButtonElement).getBoundingClientRect();
- const tooltipRect = ytTooltip.getBoundingClientRect();
- ytTooltip.style.top = `${buttonRect.top - tooltipRect.height - 14}px`;
- ytTooltip.style.zIndex = "2021";
- }
- }
- function ytpRightButtonMouseEnterListener(event: MouseEvent) {
- const ytTooltip = document.querySelector("#movie_player > div.ytp-tooltip");
- if (!ytTooltip) return;
- // Get the video element
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("#movie_player");
- if (!videoContainer) return;
- const controlsElement = document.querySelector("div.ytp-chrome-bottom");
- if (!controlsElement) return;
-
- if (
- videoContainer.classList.contains("maximized_video_container") &&
- videoElement.classList.contains("maximized_video") &&
- controlsElement.classList.contains("maximized_controls")
- ) {
- const buttonRect = (event.target as HTMLButtonElement).getBoundingClientRect();
- const tooltipRect = ytTooltip.getBoundingClientRect();
- ytTooltip.style.left = `${buttonRect.left - 48}px`;
- ytTooltip.style.top = `${buttonRect.top - tooltipRect.height - 14}px`;
- ytTooltip.style.zIndex = "2021";
- }
- }
- function seekBarMouseEnterListener(event: MouseEvent) {
- // TODO: get the seek preview to be in the correct place when the video is maximized from default view
- const ytTooltip = document.querySelector("#movie_player > div.ytp-tooltip");
- if (!ytTooltip) return;
- // Get the video element
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("#movie_player");
- if (!videoContainer) return;
- const controlsElement = document.querySelector("div.ytp-chrome-bottom");
- if (!controlsElement) return;
-
- if (
- videoContainer.classList.contains("maximized_video_container") &&
- videoElement.classList.contains("maximized_video") &&
- controlsElement.classList.contains("maximized_controls")
- ) {
- const buttonRect = (event.target as HTMLButtonElement).getBoundingClientRect();
- const tooltipRect = ytTooltip.getBoundingClientRect();
- ytTooltip.style.top = `${buttonRect.top - tooltipRect.height - 14}px`;
- ytTooltip.style.zIndex = "2021";
- }
- }
-
- if (pipElement) {
- eventManager.addEventListener(pipElement, "click", otherElementClickListener, "maximizePlayerButton");
- }
- if (sizeElement) {
- eventManager.addEventListener(sizeElement, "click", otherElementClickListener, "maximizePlayerButton");
- }
- if (miniPlayerElement) {
- eventManager.addEventListener(miniPlayerElement, "click", otherElementClickListener, "maximizePlayerButton");
- }
- const typLeftButtons = [
- ...document.querySelectorAll("div.ytp-chrome-controls > div.ytp-left-controls > :not(.yte-maximized-player-button)")
- ];
- const volumePanel = document.querySelector("div.ytp-chrome-controls > div.ytp-left-controls > span > div");
- const seekBarContainer = document.querySelector("div.ytp-chrome-bottom > div.ytp-progress-bar");
- if (!seekBarContainer) return;
- if (volumePanel) typLeftButtons.push(volumePanel);
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore TODO: figure out the proper type for this
- eventManager.addEventListener(seekBarContainer, "mouseenter", seekBarMouseEnterListener, "maximizePlayerButton");
-
- const typRightButtons = document.querySelectorAll(
- "div.ytp-chrome-controls > div.ytp-right-controls > :not(.yte-maximized-player-button)"
+ (checked) => {
+ if (checked === undefined) return;
+ const button = getFeatureButton("maximizePlayerButton");
+ if (!button) return;
+ const featureName = "maximizePlayerButton";
+ const { remove } = createTooltip({
+ direction: maximizePlayerButtonPlacement === "below_player" ? "down" : "up",
+ element: button,
+ featureName,
+ id: `yte-feature-${featureName}-tooltip`
+ });
+ updateFeatureButtonTitle(
+ "maximizePlayerButton",
+ window.i18nextInstance.t(`pages.content.features.maximizePlayerButton.button.toggle.${checked ? "on" : "off"}`)
+ );
+ if (checked) {
+ remove();
+ maximizePlayer();
+ } else {
+ minimizePlayer();
+ }
+ },
+ true,
+ isPlayerMaximized
);
- typLeftButtons.forEach((button) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore TODO: figure out the proper type for this
- eventManager.addEventListener(button, "mouseenter", ytpLeftButtonMouseEnterListener, "maximizePlayerButton");
- });
- typRightButtons.forEach((button) => {
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore TODO: figure out the proper type for this
- eventManager.addEventListener(button, "mouseenter", ytpRightButtonMouseEnterListener, "maximizePlayerButton");
- });
};
export const removeMaximizePlayerButton: RemoveButtonFunction = async (placement) => {
await removeFeatureButton("maximizePlayerButton", placement);
diff --git a/src/features/maximizePlayerButton/utils.ts b/src/features/maximizePlayerButton/utils.ts
index 7b229cda7..5a4bc4659 100644
--- a/src/features/maximizePlayerButton/utils.ts
+++ b/src/features/maximizePlayerButton/utils.ts
@@ -1,123 +1,122 @@
import type { YouTubePlayerDiv } from "@/src/types";
+import { getFeatureButton, modifyIconForLightTheme, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureIcon } from "@/src/icons";
import eventManager from "@/src/utils/EventManager";
+import { type ModifyElementAction, modifyElementsClassList } from "@/src/utils/utilities";
-let wasInTheatreMode = false;
-let setToTheatreMode = false;
+const theaterModeButtonPathD =
+ "M21.20 3.01L21 3H3L2.79 3.01C2.30 3.06 1.84 3.29 1.51 3.65C1.18 4.02 .99 4.50 1 5V19L1.01 19.20C1.05 19.66 1.26 20.08 1.58 20.41C1.91 20.73 2.33 20.94 2.79 20.99L3 21H21L21.20 20.98C21.66 20.94 22.08 20.73 22.41 20.41C22.73 20.08 22.94 19.66 22.99 19.20L23 19V5C23.00 4.50 22.81 4.02 22.48 3.65C22.15 3.29 21.69 3.06 21.20 3.01ZM3 15V5H21V15H3ZM7.87 6.72L7.79 6.79L4.58 10L7.79 13.20C7.88 13.30 7.99 13.37 8.11 13.43C8.23 13.48 8.37 13.51 8.50 13.51C8.63 13.51 8.76 13.48 8.89 13.43C9.01 13.38 9.12 13.31 9.21 13.21C9.31 13.12 9.38 13.01 9.43 12.89C9.48 12.76 9.51 12.63 9.51 12.50C9.51 12.37 9.48 12.23 9.43 12.11C9.37 11.99 9.30 11.88 9.20 11.79L7.41 10L9.20 8.20L9.27 8.13C9.42 7.93 9.50 7.69 9.48 7.45C9.47 7.20 9.36 6.97 9.19 6.80C9.02 6.63 8.79 6.52 8.54 6.51C8.30 6.49 8.06 6.57 7.87 6.72ZM14.79 6.79C14.60 6.98 14.50 7.23 14.50 7.5C14.50 7.76 14.60 8.01 14.79 8.20L16.58 10L14.79 11.79L14.72 11.86C14.57 12.06 14.49 12.30 14.50 12.54C14.51 12.79 14.62 13.02 14.79 13.20C14.97 13.37 15.20 13.48 15.45 13.49C15.69 13.50 15.93 13.42 16.13 13.27L16.20 13.20L19.41 10L16.20 6.79C16.01 6.60 15.76 6.50 15.5 6.50C15.23 6.50 14.98 6.60 14.79 6.79ZM3 19V17H21V19H3Z";
+
+let isProgrammaticClick = false;
+let listenersInitialized = false;
export function maximizePlayer() {
- // Get the video element
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("#movie_player");
- if (!videoContainer) return;
- const controlsElement = document.querySelector("div.ytp-chrome-bottom");
- if (!controlsElement) return;
- const sizeElement = document.querySelector("button.ytp-button.ytp-size-button");
+ const videoPlayer = document.querySelector("video.html5-main-video");
+ if (!videoPlayer) return;
+ const chromeBottom = document.querySelector("div.ytp-chrome-bottom");
+ if (!chromeBottom) return;
+ const leftControls = chromeBottom.querySelector("div.ytp-left-controls");
+ const rightControls = chromeBottom.querySelector("div.ytp-right-controls");
+ if (!leftControls || !rightControls) return;
+ const pipElement = document.querySelector("button.ytp-pip-button");
+ const miniPlayerElement = document.querySelector("button.ytp-miniplayer-button");
+ const sizeElement = document.querySelector("button.ytp-size-button");
if (!sizeElement) return;
- const featureMenu = document.querySelector("#yte-feature-menu");
- if (!featureMenu) return;
- const {
- childNodes: [svgElement]
- } = sizeElement;
- if (!svgElement || !(svgElement instanceof SVGElement)) return;
- const theaterModeVariables = {
- ariaLabel: "Theater mode keyboard shortcut t",
- dataTitleNoTooltip: "Theater mode",
- pathD: "m 28,11 0,14 -20,0 0,-14 z m -18,2 16,0 0,10 -16,0 0,-10 z",
- title: "Theater mode (t)"
- };
- // const defaultModeVariables = {
- // ariaLabel: "Default view keyboard shortcut t",
- // dataTitleNoTooltip: "Default view",
- // pathD: "m 26,13 0,10 -16,0 0,-10 z m -14,2 12,0 0,6 -12,0 0,-6 z",
- // title: "Default view (t)"
- // };
- const {
- childNodes: [, svgPath]
- } = svgElement;
- if (!svgPath || !(svgPath instanceof SVGPathElement)) return;
- if (svgPath.getAttribute("d") === theaterModeVariables.pathD) wasInTheatreMode = true;
- else wasInTheatreMode = false;
- if (wasInTheatreMode) setToTheatreMode = false;
- else setToTheatreMode = true;
- // TODO: finish this code to make the maximize player button work properly. (implement ytp-scrubber-container adjustment) if all else fails revert to using the theatre mode button to get the tooltips in the correct place
- console.log(`setToTheatreMode && wasInTheatreMode: ${setToTheatreMode && wasInTheatreMode}`);
- console.log(`setToTheatreMode && !wasInTheatreMode: ${setToTheatreMode && !wasInTheatreMode}`);
- console.log(`!setToTheatreMode && wasInTheatreMode: ${!setToTheatreMode && wasInTheatreMode}`);
- console.log(`!setToTheatreMode && !wasInTheatreMode: ${!setToTheatreMode && !wasInTheatreMode}`);
- if (
- videoContainer.classList.contains("maximized_video_container") &&
- videoElement.classList.contains("maximized_video") &&
- controlsElement.classList.contains("maximized_controls")
- ) {
- // sizeElement.click();
- // if (setToTheatreMode && wasInTheatreMode) {
- // const { dataTitleNoTooltip, title, ariaLabel, pathD } = defaultModeVariables;
- // svgPath.setAttributeNS(null, "d", pathD);
- // sizeElement.setAttributeNS(null, "aria-label", ariaLabel);
- // sizeElement.dataset.titleNoTooltip = dataTitleNoTooltip;
- // sizeElement.title = title;
- // } else if (setToTheatreMode && !wasInTheatreMode) {
- // const { dataTitleNoTooltip, title, ariaLabel, pathD } = theaterModeVariables;
- // svgPath.setAttributeNS(null, "d", pathD);
- // sizeElement.setAttributeNS(null, "aria-label", ariaLabel);
- // sizeElement.dataset.titleNoTooltip = dataTitleNoTooltip;
- // sizeElement.title = title;
- // }
- document.body.style.overflow = "";
- videoElement.classList.remove("maximized_video");
- videoContainer.classList.remove("maximized_video_container");
- controlsElement.classList.remove("maximized_controls");
- featureMenu.style.bottom = "";
- } else {
- // sizeElement.click();
-
- // if (!setToTheatreMode && wasInTheatreMode) {
- // const { dataTitleNoTooltip, title, ariaLabel, pathD } = defaultModeVariables;
- // svgPath.setAttributeNS(null, "d", pathD);
- // sizeElement.setAttributeNS(null, "aria-label", ariaLabel);
- // sizeElement.dataset.titleNoTooltip = dataTitleNoTooltip;
- // sizeElement.title = title;
- // } else if (setToTheatreMode && !wasInTheatreMode) {
- // const { dataTitleNoTooltip, title, ariaLabel, pathD } = theaterModeVariables;
- // svgPath.setAttributeNS(null, "d", pathD);
- // sizeElement.setAttributeNS(null, "aria-label", ariaLabel);
- // sizeElement.dataset.titleNoTooltip = dataTitleNoTooltip;
- // sizeElement.title = title;
- // }
- document.body.style.overflow = "hidden";
- videoElement.classList.add("maximized_video");
- videoContainer.classList.add("maximized_video_container");
- controlsElement.classList.add("maximized_controls");
- featureMenu.style.bottom = "-14px";
+ const inTheaterMode = document.querySelector(`button.ytp-size-button svg path[d='${theaterModeButtonPathD}']`) === null;
+ document.body.setAttribute("yte-size-button-state", inTheaterMode ? "theater" : "default");
+ if (!inTheaterMode && sizeElement) clickAndRestore(sizeElement);
+ adjustPlayer("add");
+ if (!listenersInitialized) {
+ listenersInitialized = true;
+ [pipElement, sizeElement, miniPlayerElement].forEach((element) => {
+ if (!element) return;
+ eventManager.addEventListener(
+ element,
+ "click",
+ async () => {
+ if (isProgrammaticClick) return;
+ minimizePlayer();
+ const maximizePlayerButton = getFeatureButton("maximizePlayerButton");
+ if (!maximizePlayerButton) return;
+ maximizePlayerButton.ariaChecked = "false";
+ const button = getFeatureButton("maximizePlayerButton");
+ const icon = getFeatureIcon("maximizePlayerButton", "player_controls_left");
+ if (button && button instanceof HTMLButtonElement) {
+ if (typeof icon === "object" && "off" in icon && "on" in icon)
+ updateFeatureButtonIcon(button, await modifyIconForLightTheme(icon.off, true));
+ updateFeatureButtonTitle(
+ "maximizePlayerButton",
+ window.i18nextInstance.t("pages.content.features.maximizePlayerButton.button.toggle.off")
+ );
+ }
+ },
+ "maximizePlayerButton"
+ );
+ });
}
}
-export function setupVideoPlayerTimeUpdate() {
- const videoElement = document.querySelector("video.video-stream.html5-main-video");
- if (!videoElement) return;
- const videoPlayerTimeUpdateListener = () => {
- updateProgressBarPositions();
- };
- eventManager.addEventListener(videoElement, "timeupdate", videoPlayerTimeUpdateListener, "maximizePlayerButton");
+
+export function minimizePlayer() {
+ const lastState = document.body.getAttribute("yte-size-button-state");
+ const sizeElement = document.querySelector("button.ytp-size-button");
+ if (lastState === "default" && sizeElement) clickAndRestore(sizeElement);
+ document.body.removeAttribute("yte-size-button-state");
+ adjustPlayer("remove");
}
-// TODO: get played progress bar to be accurate when maximized from default view
-// TODO: Add event listener that updates scrubber position when maximize button is clicked
-export function updateProgressBarPositions() {
- const seekBar = document.querySelector("div.ytp-progress-bar");
- const scrubber = document.querySelector("div.ytp-scrubber-container");
- const hoverProgress = document.querySelector("div.ytp-hover-progress");
- if (!seekBar) return;
- if (!scrubber) return;
- if (!hoverProgress) return;
- const elapsedTime = parseInt(seekBar?.ariaValueNow ?? "0") ?? 0;
- const duration = parseInt(seekBar?.ariaValueMax ?? "0") ?? 0;
- const seekBarWidth = seekBar?.clientWidth ?? 0;
- const scrubberPosition = parseFloat(Math.min((elapsedTime / duration) * seekBarWidth, seekBarWidth).toFixed(3));
- // TODO: get this working when video is playing
- scrubber.style.transform = `translateX(${scrubberPosition}px)`;
- // TODO: get all progress bar lists updated when video is playing
- hoverProgress.style.left = `${scrubberPosition}px`;
+function adjustPlayer(action: ModifyElementAction) {
+ switch (action) {
+ case "add":
+ document.body.style.overflow = "hidden";
+ document.body.setAttribute("yte-maximized", "");
+ break;
+ case "remove":
+ document.body.style.overflow = "";
+ document.body.removeAttribute("yte-maximized");
+ break;
+ }
+
+ modifyElementsClassList(action, [
+ {
+ className: "yte-maximized-video",
+ element: document.querySelector("video.video-stream.html5-main-video")
+ },
+ {
+ className: "yte-maximized-video-container",
+ element: document.querySelector("#movie_player")
+ },
+ {
+ className: "yte-maximized-width",
+ element: document.querySelector("div.ytp-chrome-bottom")
+ },
+ {
+ className: "yte-maximized-width",
+ element: document.querySelector(".ytp-chapter-hover-container")
+ }
+ ]);
+}
+
+function clickAndRestore(sizeElement: HTMLButtonElement) {
+ const original = {
+ ariaLabel: sizeElement.getAttribute("aria-label") ?? "",
+ d: sizeElement.querySelector("svg path")?.getAttribute("d") ?? "",
+ titleNoTooltip: sizeElement.getAttribute("data-title-no-tooltip") ?? "",
+ tooltipTitle: sizeElement.getAttribute("data-tooltip-title") ?? ""
+ };
+ isProgrammaticClick = true;
+ sizeElement.click();
+ setTimeout(() => {
+ const newButton = document.querySelector("button.ytp-size-button");
+ if (!newButton) {
+ isProgrammaticClick = false;
+ return;
+ }
+ const path = newButton.querySelector("svg path");
+ if (path) path.setAttribute("d", original.d);
+ newButton.setAttribute("aria-label", original.ariaLabel);
+ newButton.setAttribute("data-title-no-tooltip", original.titleNoTooltip);
+ newButton.setAttribute("data-tooltip-title", original.tooltipTitle);
+ isProgrammaticClick = false;
+ }, 50);
}
diff --git a/src/features/playlistLength/index.ts b/src/features/playlistLength/index.ts
index 85f1cb8d9..e5a3a1598 100644
--- a/src/features/playlistLength/index.ts
+++ b/src/features/playlistLength/index.ts
@@ -1,6 +1,5 @@
import type { Nullable } from "@/src/types";
-import { YouTube_Enhancer_Public_Youtube_Data_API_V3_Key } from "@/src/utils/constants";
import eventManager from "@/src/utils/EventManager";
import { isWatchPage, waitForAllElements, waitForSpecificMessage } from "@/src/utils/utilities";
@@ -22,8 +21,7 @@ export async function enablePlaylistLength() {
options: {
enable_playlist_length,
playlist_length_get_method: playlistLengthGetMethod,
- playlist_watch_time_get_method: playlistWatchTimeGetMethod,
- youtube_data_api_v3_key
+ playlist_watch_time_get_method: playlistWatchTimeGetMethod
}
}
} = await waitForSpecificMessage("options", "request_data", "content");
@@ -31,10 +29,8 @@ export async function enablePlaylistLength() {
if (!document.querySelector(playlistItemsSelector())) return;
const { playlist, watch } = getHeaderSelectors();
await waitForAllElements([isWatchPageFlag ? watch : playlist, playlistItemsSelector()]);
- const apiKey = youtube_data_api_v3_key || YouTube_Enhancer_Public_Youtube_Data_API_V3_Key;
const pageType = isWatchPageFlag ? "watch" : "playlist";
documentObserver = await initPlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -42,7 +38,6 @@ export async function enablePlaylistLength() {
resizeObserver?.disconnect();
resizeObserver = new ResizeObserver(async () => {
documentObserver = await initPlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -51,7 +46,6 @@ export async function enablePlaylistLength() {
resizeObserver.observe(document.documentElement);
}
async function initPlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -59,7 +53,6 @@ async function initPlaylistLength({
documentObserver?.disconnect();
try {
return await initializePlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -67,7 +60,6 @@ async function initPlaylistLength({
} catch {
return playlistLengthGetMethod === "html" ? null : (
initPlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod: "html",
playlistWatchTimeGetMethod
diff --git a/src/features/playlistLength/utils.ts b/src/features/playlistLength/utils.ts
index a5ef603c0..9e26199ba 100644
--- a/src/features/playlistLength/utils.ts
+++ b/src/features/playlistLength/utils.ts
@@ -1,27 +1,30 @@
-import { z } from "zod";
+import type PlaylistVideo from "youtubei.js/dist/src/parser/classes/PlaylistVideo";
-import type { Nullable, PlaylistLengthGetMethod, PlaylistWatchTimeGetMethod, VideoDetails, YouTubePlaylistItem } from "@/src/types";
+import { Innertube } from "youtubei.js/web";
+
+import type { Nullable, PlaylistLengthGetMethod, PlaylistWatchTimeGetMethod, VideoDetails } from "@/src/types";
import eventManager from "@/src/utils/EventManager";
import {
conditionalStyles,
createStyledElement,
- delay,
formatDuration,
isNewYouTubeVideoLayout,
isWatchPage,
- parseISO8601Duration,
timeStringToSeconds,
waitForAllElements
} from "@/src/utils/utilities";
const NO_PADDING_HEADER_SELECTOR = "yt-page-header-view-model.yt-page-header-view-model.yt-page-header-view-model--no-padding";
const CINEMATIC_HEADER_SELECTOR =
"yt-page-header-renderer yt-page-header-view-model.yt-page-header-view-model--cinematic-container-overflow-boundary";
+const IMMERSIVE_HEADER_SELECTOR = "ytd-playlist-header-renderer .immersive-header-container .immersive-header-content";
export const getHeaderSelectors = () =>
({
playlist: (() => {
const noPaddingHeader = document.querySelector(NO_PADDING_HEADER_SELECTOR);
const cinematicHeader = document.querySelector(CINEMATIC_HEADER_SELECTOR);
+ const immersiveHeader = document.querySelector(IMMERSIVE_HEADER_SELECTOR);
+ if (immersiveHeader && immersiveHeader.clientWidth > 0) return IMMERSIVE_HEADER_SELECTOR;
if (noPaddingHeader && noPaddingHeader.clientWidth > 0) return NO_PADDING_HEADER_SELECTOR;
if (cinematicHeader && cinematicHeader.clientWidth > 0) return `${CINEMATIC_HEADER_SELECTOR} .yt-page-header-view-model__page-header-content`;
return NO_PADDING_HEADER_SELECTOR;
@@ -33,26 +36,7 @@ export const getHeaderSelectors = () =>
}) as const satisfies { playlist: string; watch: string };
export const playlistItemsSelector = () =>
isWatchPage() ? "ytd-playlist-panel-renderer:not([hidden]) div#container div#items" : "ytd-playlist-video-list-renderer div#contents";
-const youtubePlaylistResponseSchema = z.object({
- items: z.array(z.object({ contentDetails: z.object({ videoId: z.string() }) })),
- nextPageToken: z.string().optional()
-});
-const youtubeVideoDurationResponseSchema = z.object({
- items: z.array(z.object({ contentDetails: z.object({ duration: z.string() }) }))
-});
-const youtubeDataAPIErrorSchema = z.object({
- error: z.object({
- code: z.number(),
- errors: z.array(
- z.object({
- reason: z.string()
- })
- ),
- message: z.string()
- })
-});
export type PlaylistLengthParameters = {
- apiKey: string;
pageType: PageType;
playlistLengthGetMethod: PlaylistLengthGetMethod;
playlistWatchTimeGetMethod: PlaylistWatchTimeGetMethod;
@@ -159,39 +143,7 @@ export function createPlaylistLengthUIElement(
update: updateElement
};
}
-export async function fetchPlaylistVideos(playlistId: string, apiKey: string): Promise {
- const playlistItemsUrl = `https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&maxResults=50&fields=items/contentDetails/videoId,nextPageToken&key=${apiKey}&playlistId=${playlistId}`;
- let nextPageToken: string | undefined = undefined;
- const allVideos: YouTubePlaylistItem[] = [];
- try {
- do {
- const playlistResponse = await fetch(`${playlistItemsUrl}${nextPageToken ? `&pageToken=${nextPageToken}` : ""}`);
- const data = await playlistResponse.json();
- const youtubeDataAPIParsed = youtubeDataAPIErrorSchema.safeParse(data);
- if (youtubeDataAPIParsed.success && youtubeDataAPIParsed.data.error) {
- switch (youtubeDataAPIParsed.data.error.code) {
- case 403:
- throw new Error("YouTube Enhancer (YouTube Data API V3): Quota exceeded. Please try again later.");
- case 404:
- throw new Error("YouTube Enhancer (YouTube Data API V3): Playlist not found. Please try again later.");
- default:
- throw new Error("YouTube Enhancer (YouTube Data API V3): Unknown error. Please try again later.");
- }
- }
- const parsedData = youtubePlaylistResponseSchema.safeParse(data);
- if (!parsedData.success) throw new Error("Failed to parse playlist response.");
- if (parsedData.data.items && parsedData.data.items.length === 0) throw new Error("No items found in playlist.");
- nextPageToken = parsedData.data.nextPageToken || "";
- allVideos.push(...parsedData.data.items);
- await delay(40); // Adding delay between requests to avoid rate limiting
- } while (nextPageToken);
- return allVideos;
- } catch (error) {
- throw new Error(`Error fetching playlist videos: ${error}`);
- }
-}
export async function getDataForPlaylistLengthUIElement({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -212,7 +164,7 @@ export async function getDataForPlaylistLengthUIElement({
const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
return { totalTimeSeconds, watchedTimeSeconds };
}
- totalTimeSeconds = await getDurationFromAPI(playlistId, apiKey);
+ totalTimeSeconds = await getDurationFromAPI(playlistId);
// Cache the duration
window.cachedPlaylistDuration = { playlistId, totalTimeSeconds };
} else if (playlistLengthGetMethod === "html") {
@@ -223,20 +175,6 @@ export async function getDataForPlaylistLengthUIElement({
const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
return { totalTimeSeconds, watchedTimeSeconds };
}
-export async function getPlaylistDuration(playlistVideos: YouTubePlaylistItem[], apiKey: string) {
- const videoIds = playlistVideos.map((video) => video.contentDetails.videoId);
- try {
- const videoDurationPromises = videoIds.map(async (videoId) => {
- await delay(1); // Adding delay between requests to avoid rate limiting
- return getVideoDuration(videoId, apiKey);
- });
- const videoDurations = await Promise.all(videoDurationPromises);
- const totalDuration = videoDurations.reduce((acc, duration) => acc + duration, 0);
- return totalDuration;
- } catch (error) {
- throw new Error(`Error fetching playlist duration: ${error}`);
- }
-}
export function getPlaylistId(): null | string {
const playlistId = new URLSearchParams(window.location.search).get("list");
return playlistId;
@@ -258,31 +196,7 @@ export function getPlaylistItemsFromWatchPage() {
export function getPlaylistItemsWatchedProgress(playlistItems: HTMLElement[]): VideoDetails[] {
return playlistItems.map(getVideoDetails);
}
-export async function getVideoDuration(videoId: string, apiKey: string) {
- const videoDetailsUrl = `https://www.googleapis.com/youtube/v3/videos?part=contentDetails&fields=items/contentDetails/duration&key=${apiKey}&id=${videoId}`;
- try {
- const videoResponse = await fetch(videoDetailsUrl);
- const data = await videoResponse.json();
- const youtubeDataAPIParsed = youtubeDataAPIErrorSchema.safeParse(data);
- const parsedData = youtubeVideoDurationResponseSchema.safeParse(data);
- if (!parsedData.success) throw new Error("Failed to parse video duration response.");
- if (
- youtubeDataAPIParsed.success &&
- youtubeDataAPIParsed.data.error &&
- youtubeDataAPIParsed.data.error.code === 403 &&
- youtubeDataAPIParsed.data.error.errors.find((e) => e.reason === "quotaExceeded")
- ) {
- throw new Error("Quota exceeded. Please try again later.");
- }
- const videoDuration = parsedData.data.items.at(0)?.contentDetails?.duration;
- if (!videoDuration) throw new Error("Failed to get video duration.");
- return parseISO8601Duration(videoDuration);
- } catch (error) {
- throw new Error(`Error getting video duration: ${error}`);
- }
-}
export async function initializePlaylistLength({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -296,7 +210,6 @@ export async function initializePlaylistLength({
if (!playlistItemsElement) return null;
const { playbackRate: playerSpeed = 1 } = videoElement || {};
const { totalTimeSeconds, watchedTimeSeconds } = await getDataForPlaylistLengthUIElement({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -311,14 +224,24 @@ export async function initializePlaylistLength({
await appendPlaylistLengthUIElement(element);
let lastUpdate = 0;
const throttleDelay = 500;
+ let lastPlaylistLength: null | number = null;
async function safeUpdate() {
const now = Date.now();
if (now - lastUpdate < throttleDelay) return;
lastUpdate = now;
const videoElement = document.querySelector("video");
const { playbackRate: playerSpeed = 1 } = videoElement || {};
+ if (playlistLengthGetMethod === "api") {
+ const playlistItems = pageType === "watch" ? getPlaylistItemsFromWatchPage() : getPlaylistItemsFromPlaylistPage();
+ const { length: currentLength } = playlistItems;
+ if (lastPlaylistLength === null) {
+ lastPlaylistLength = currentLength;
+ } else if (currentLength !== lastPlaylistLength) {
+ window.cachedPlaylistDuration = null;
+ lastPlaylistLength = currentLength;
+ }
+ }
const data = await getDataForPlaylistLengthUIElement({
- apiKey,
pageType,
playlistLengthGetMethod,
playlistWatchTimeGetMethod
@@ -375,9 +298,37 @@ function getDurationAndWatchedTimeHTML({ pageType, playlistItemsVideoDetails, pl
const watchedTimeSeconds = calculateWatchedTime({ pageType, playlistItemsVideoDetails, playlistWatchTimeGetMethod });
return { totalTimeSeconds, watchedTimeSeconds };
}
-async function getDurationFromAPI(playlistId: string, apiKey: string): Promise {
- const playlistVideos = await fetchPlaylistVideos(playlistId, apiKey);
- return getPlaylistDuration(playlistVideos, apiKey);
+async function getDurationFromAPI(playlistId: string): Promise {
+ const youtube = await Innertube.create({
+ cookie: document.cookie,
+ fetch: (...args) => fetch(...args)
+ });
+
+ try {
+ const playlist = await youtube.getPlaylist(playlistId);
+
+ let totalSeconds = 0;
+ for (const video of playlist.videos) {
+ const playlistVideo = video as PlaylistVideo;
+ if (playlistVideo?.duration?.seconds) {
+ totalSeconds += playlistVideo.duration.seconds;
+ }
+ }
+
+ while (playlist.has_continuation) {
+ const continuation = await playlist.getContinuation();
+ for (const video of continuation.videos) {
+ const playlistVideo = video as PlaylistVideo;
+ if (playlistVideo?.duration?.seconds) {
+ totalSeconds += playlistVideo.duration.seconds;
+ }
+ }
+ }
+
+ return totalSeconds;
+ } catch (error) {
+ throw new Error(`Error fetching playlist duration: ${error}`);
+ }
}
function getVideoDetails(videoElement: Element): VideoDetails {
const videoId = getVideoId(videoElement);
diff --git a/src/features/playlistManagementButtons/index.css b/src/features/playlistManagementButtons/index.css
new file mode 100644
index 000000000..e97f837fc
--- /dev/null
+++ b/src/features/playlistManagementButtons/index.css
@@ -0,0 +1,29 @@
+.yte-remove-button,
+.yte-reset-button {
+ background: none;
+ border-radius: 50%;
+ border: none;
+ cursor: pointer;
+ margin-right: 18px;
+ padding: 12px;
+ vertical-align: top;
+}
+
+.yte-remove-button:hover,
+.yte-reset-button:hover {
+ background: black;
+ transition: background 0.2s;
+}
+
+@keyframes yte-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.yte-spinning {
+ animation: yte-spin 2s linear infinite;
+}
diff --git a/src/features/playlistManagementButtons/index.ts b/src/features/playlistManagementButtons/index.ts
new file mode 100644
index 000000000..49cc877b4
--- /dev/null
+++ b/src/features/playlistManagementButtons/index.ts
@@ -0,0 +1,153 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { FaSpinner, FaUndoAlt } from "react-icons/fa";
+import { FaTrash } from "react-icons/fa6";
+import { Innertube } from "youtubei.js/web";
+
+import "./index.css";
+import { createTooltip, isPlaylistPage, waitForSpecificMessage } from "@/src/utils/utilities";
+
+import { getPlaylistId } from "../playlistLength/utils";
+
+interface YTDPlaylistVideoRenderer extends HTMLElement {
+ playlistVideoId: string;
+}
+
+if (window.trustedTypes && !window.trustedTypes.defaultPolicy) {
+ window.trustedTypes.createPolicy("default", {
+ createHTML: (input: string) => input
+ });
+}
+
+const PLAYLIST_ITEM_SELECTOR =
+ "ytd-playlist-video-list-renderer ytd-playlist-panel-video-renderer, ytd-playlist-video-list-renderer ytd-playlist-video-renderer";
+const TRANSLATION_KEY_PREFIX = "settings.sections.playlistManagementButtons";
+
+let playlistObserver: MutationObserver | null = null;
+
+export async function disablePlaylistManagementButtons() {
+ if (playlistObserver) {
+ playlistObserver.disconnect();
+ playlistObserver = null;
+ }
+
+ const playlistItems = document.querySelectorAll(PLAYLIST_ITEM_SELECTOR);
+ playlistItems.forEach((item) => {
+ item.querySelectorAll(".yte-remove-button, .yte-reset-button").forEach((btn) => btn.remove());
+ });
+}
+
+export async function enablePlaylistManagementButtons() {
+ const {
+ data: {
+ options: { enable_playlist_management_buttons }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+
+ if (!enable_playlist_management_buttons || !isPlaylistPage() || getPlaylistId() === "LL") {
+ return;
+ }
+
+ const youtube = await Innertube.create({
+ cookie: document.cookie,
+ fetch: (...args) => fetch(...args)
+ });
+
+ function addButtonToPlaylistItems() {
+ const playlistItems = document.querySelectorAll(PLAYLIST_ITEM_SELECTOR);
+ playlistItems.forEach((item) => {
+ if (item.querySelector(".yte-remove-button") || item.querySelector(".yte-reset-button")) {
+ return;
+ }
+
+ const { playlistVideoId: setVideoId } = item as YTDPlaylistVideoRenderer;
+ if (!setVideoId) {
+ return;
+ }
+
+ const removeButton = document.createElement("button");
+ removeButton.innerHTML = renderToString(React.createElement(FaTrash, { color: "red", size: 18 }));
+ removeButton.className = "yte-remove-button";
+ removeButton.title = window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.removeVideo`);
+ removeButton.onclick = async () => {
+ const { innerHTML: originalHTML, title: originalTitle } = removeButton;
+ removeButton.disabled = true;
+ removeButton.title = window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.removingVideo`);
+ removeButton.innerHTML = renderToString(React.createElement(FaSpinner, { color: "gray", size: 18 }));
+ removeButton.classList.add("yte-spinning");
+ try {
+ const playlistId = getPlaylistId()!;
+ await youtube.playlist.removeVideos(playlistId, [setVideoId]);
+ item.remove();
+ } catch (err) {
+ const { listener } = createTooltip({
+ element: removeButton,
+ featureName: "playlistManagementButtons",
+ id: "yte-feature-playlistManagementButtons-tooltip",
+ text: `${window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.failedToRemoveVideo`)}: ${err instanceof Error ? err.message : String(err)}`
+ });
+ listener();
+ } finally {
+ removeButton.disabled = false;
+ removeButton.innerHTML = originalHTML;
+ removeButton.title = originalTitle;
+ removeButton.classList.remove("yte-spinning");
+ }
+ };
+
+ const resetButton = document.createElement("button");
+ resetButton.innerHTML = renderToString(React.createElement(FaUndoAlt, { color: "red", size: 18 }));
+ resetButton.className = "yte-reset-button";
+ resetButton.title = window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.markAsUnwatched`);
+ resetButton.onclick = async () => {
+ const { innerHTML: originalHTML, title: originalTitle } = resetButton;
+ resetButton.disabled = true;
+ resetButton.title = window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.markingAsUnwatched`);
+ resetButton.innerHTML = renderToString(React.createElement(FaSpinner, { color: "gray", size: 18 }));
+ resetButton.classList.add("yte-spinning");
+
+ try {
+ const history = await youtube.getHistory();
+ await history.removeVideo(setVideoId, 5);
+ item.querySelector("#overlays ytd-thumbnail-overlay-resume-playback-renderer")?.remove();
+ } catch (err) {
+ const { listener } = createTooltip({
+ element: resetButton,
+ featureName: "playlistManagementButtons",
+ id: "yte-feature-playlistManagementButtons-tooltip",
+ text: `${window.i18nextInstance?.t(`${TRANSLATION_KEY_PREFIX}.failedToMarkAsUnwatched`)}: ${err instanceof Error ? err.message : String(err)}`
+ });
+ listener();
+ } finally {
+ resetButton.disabled = false;
+ resetButton.innerHTML = originalHTML;
+ resetButton.title = originalTitle;
+ resetButton.classList.remove("yte-spinning");
+ }
+ };
+
+ const menu = item.querySelector("#menu");
+ if (menu) {
+ menu.prepend(removeButton);
+ menu.prepend(resetButton);
+ Array.from(menu.children).forEach((child) => {
+ (child as HTMLElement).style.display = "inline-flex";
+ });
+ }
+ });
+ }
+
+ function observePlaylist() {
+ addButtonToPlaylistItems();
+ const container = document.querySelector("ytd-playlist-video-list-renderer");
+ if (container) {
+ playlistObserver = new MutationObserver(addButtonToPlaylistItems);
+ playlistObserver.observe(container, { childList: true, subtree: true });
+ }
+ }
+
+ window.addEventListener("DOMContentLoaded", observePlaylist);
+ if (document.readyState === "complete" || document.readyState === "interactive") {
+ observePlaylist();
+ }
+}
diff --git a/src/features/restoreFullscreenScrolling/index.css b/src/features/restoreFullscreenScrolling/index.css
index e2a88fd0d..14c38bd8b 100644
--- a/src/features/restoreFullscreenScrolling/index.css
+++ b/src/features/restoreFullscreenScrolling/index.css
@@ -11,7 +11,7 @@
position: absolute !important;
top: 0 !important;
left: 0 !important;
- right: calc((var(--ytd-app-fullerscreen-scrollbar-width) + 1px)* -1) !important;
+ right: calc((var(--ytd-app-fullerscreen-scrollbar-width) + 1px) * -1) !important;
bottom: 0 !important;
overflow-x: auto !important;
-}
\ No newline at end of file
+}
diff --git a/src/features/saveToWatchLaterButton/index.css b/src/features/saveToWatchLaterButton/index.css
new file mode 100644
index 000000000..5378b0586
--- /dev/null
+++ b/src/features/saveToWatchLaterButton/index.css
@@ -0,0 +1,12 @@
+@keyframes yte-spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.yte-spinning {
+ animation: yte-spin 2s linear infinite;
+}
diff --git a/src/features/saveToWatchLaterButton/index.ts b/src/features/saveToWatchLaterButton/index.ts
new file mode 100644
index 000000000..279e8ee24
--- /dev/null
+++ b/src/features/saveToWatchLaterButton/index.ts
@@ -0,0 +1,119 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { AiOutlineVideoCameraAdd } from "react-icons/ai";
+import { FaSpinner } from "react-icons/fa";
+import { Innertube } from "youtubei.js/web";
+
+import "./index.css";
+
+import { createTooltip, isHomePage, isSubscriptionsPage, waitForSpecificMessage } from "@/src/utils/utilities";
+
+interface YTLockupViewModel extends HTMLElement {
+ rawProps: {
+ data: () => {
+ contentId: string;
+ };
+ };
+}
+
+if (window.trustedTypes && !window.trustedTypes.defaultPolicy) {
+ window.trustedTypes.createPolicy("default", {
+ createHTML: (input: string) => input
+ });
+}
+
+let videosObserver: MutationObserver | null = null;
+
+export async function disableSaveToWatchLaterButton() {
+ if (videosObserver) {
+ videosObserver.disconnect();
+ videosObserver = null;
+ }
+
+ document.querySelectorAll(".yte-save-to-watch-later-button").forEach((saveButton) => {
+ removeSaveToWatchLaterButton(saveButton as HTMLElement);
+ });
+}
+
+export async function enableSaveToWatchLaterButton() {
+ const {
+ data: {
+ options: { enable_save_to_watch_later_button }
+ }
+ } = await waitForSpecificMessage("options", "request_data", "content");
+
+ if (!enable_save_to_watch_later_button || (!isHomePage() && !isSubscriptionsPage())) {
+ return;
+ }
+
+ const youtube = await Innertube.create({
+ cookie: document.cookie,
+ fetch: (...args) => fetch(...args)
+ });
+
+ function addButtonToVideoItems() {
+ document.querySelectorAll("yt-lockup-view-model:not(:has(.yte-save-to-watch-later-button))").forEach((video) => {
+ const { contentId: videoId } = (video as YTLockupViewModel).rawProps.data();
+
+ const saveButton = document.createElement("button");
+ saveButton.innerHTML = renderToString(React.createElement(AiOutlineVideoCameraAdd, { color: "white", size: 18 }));
+ saveButton.title = window.i18nextInstance?.t("settings.sections.saveToWatchLaterButton.save");
+ saveButton.className = "yte-save-to-watch-later-button";
+ saveButton.addEventListener("click", async () => {
+ const { innerHTML: originalHTML } = saveButton;
+ saveButton.disabled = true;
+ saveButton.innerHTML = renderToString(React.createElement(FaSpinner, { color: "gray", size: 18 }));
+ saveButton.classList.add("yte-spinning");
+ try {
+ saveButton.classList.add("yte-spinning");
+ await youtube.playlist.addVideos("WL", [videoId]);
+ removeSaveToWatchLaterButton(saveButton);
+ } catch (error) {
+ const { listener } = createTooltip({
+ element: saveButton,
+ featureName: "saveToWatchLaterButton",
+ id: "yte-feature-saveToWatchLaterButton-tooltip",
+ text: `${window.i18nextInstance?.t(`settings.sections.saveToWatchLaterButton.error`)}: ${error instanceof Error ? error.message : String(error)}`
+ });
+ listener();
+ } finally {
+ saveButton.disabled = false;
+ saveButton.innerHTML = originalHTML;
+ saveButton.classList.remove("yte-spinning");
+ }
+ });
+
+ const heading = video.querySelector("h3") as HTMLElement;
+ const buttons = video.querySelector("button-view-model") as HTMLElement;
+ if (heading && buttons) {
+ heading.style.paddingRight = "40px";
+ const buttonClasses = Array.from(buttons.children[0].classList).join(" ");
+ saveButton.className += " " + buttonClasses;
+ buttons.prepend(saveButton);
+ Array.from(buttons.children).forEach((child) => {
+ (child as HTMLElement).style.display = "inline-flex";
+ });
+ }
+ });
+ }
+
+ function observePlaylist() {
+ addButtonToVideoItems();
+ const container = document.querySelector("ytd-two-column-browse-results-renderer");
+ if (container) {
+ videosObserver = new MutationObserver(addButtonToVideoItems);
+ videosObserver.observe(container, { childList: true, subtree: true });
+ }
+ }
+
+ window.addEventListener("DOMContentLoaded", observePlaylist);
+ if (document.readyState === "complete" || document.readyState === "interactive") {
+ observePlaylist();
+ }
+}
+
+function removeSaveToWatchLaterButton(button: HTMLElement) {
+ const heading = button.closest("yt-lockup-view-model")!.querySelector("h3") as HTMLElement;
+ heading.style.paddingRight = "0";
+ button.style.display = "none";
+}
diff --git a/src/features/screenshotButton/index.ts b/src/features/screenshotButton/index.ts
index 448453525..feb381147 100644
--- a/src/features/screenshotButton/index.ts
+++ b/src/features/screenshotButton/index.ts
@@ -25,7 +25,8 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
options: { screenshot_format, screenshot_save_as }
}
} = await waitForSpecificMessage("options", "request_data", "content");
- const blob = await new Promise>((resolve) => canvas.toBlob(resolve, "image/png"));
+ const mimeType = screenshot_save_as === "file" ? `image/${screenshot_format}` : "image/png";
+ const blob = await new Promise>((resolve) => canvas.toBlob(resolve, mimeType));
if (!blob) return;
switch (screenshot_save_as) {
case "clipboard": {
@@ -39,11 +40,16 @@ async function takeScreenshot(videoElement: HTMLVideoElement) {
text: window.i18nextInstance.t("pages.content.features.screenshotButton.copiedToClipboard")
});
listener();
- const clipboardImage = new ClipboardItem({ "image/png": blob });
- void navigator.clipboard.write([clipboardImage]);
- setTimeout(() => {
+ try {
+ const clipboardImage = new ClipboardItem({ [mimeType]: blob });
+ await navigator.clipboard.write([clipboardImage]);
+ setTimeout(() => {
+ remove();
+ }, 1200);
+ } catch (err) {
remove();
- }, 1200);
+ console.log(err);
+ }
break;
}
case "file": {
diff --git a/src/global.d.ts b/src/global.d.ts
index 369cae56b..ea576c247 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -108,6 +108,10 @@ declare global {
cachedPlaylistDuration: null | { playlistId: string; totalTimeSeconds: number };
gainNode: GainNode;
i18nextInstance: i18nInstanceType;
+ trustedTypes?: {
+ createPolicy(name: string, options: { createHTML: (input: string) => string });
+ defaultPolicy;
+ };
webkitAudioContext: AudioContext;
}
}
diff --git a/src/i18n/constants.ts b/src/i18n/constants.ts
index 41bf573f5..6a5f7c2b5 100644
--- a/src/i18n/constants.ts
+++ b/src/i18n/constants.ts
@@ -26,27 +26,27 @@ export const availableLocales = [
export const localePercentages: Record = {
"ca-ES": 0,
"cs-CZ": 0,
- "de-DE": 25,
+ "de-DE": 24,
"en-GB": 1,
"en-US": 100,
- "es-ES": 44,
+ "es-ES": 43,
"fa-IR": 0,
"fr-FR": 46,
"he-IL": 0,
"hi-IN": 0,
- "it-IT": 100,
- "ja-JP": 93,
- "ko-KR": 82,
- "nl-NL": 92,
+ "it-IT": 98,
+ "ja-JP": 91,
+ "ko-KR": 81,
+ "nl-NL": 90,
"pl-PL": 8,
- "pt-BR": 98,
- "ru-RU": 93,
- "sv-SE": 100,
+ "pt-BR": 96,
+ "ru-RU": 98,
+ "sv-SE": 97,
"tr-TR": 97,
"uk-UA": 35,
"vi-VN": 0,
- "zh-CN": 100,
- "zh-TW": 93
+ "zh-CN": 98,
+ "zh-TW": 91
};
export const localeDirection: Record = {
"ca-ES": "ltr",
diff --git a/src/pages/content/index.ts b/src/pages/content/index.ts
index 858e56278..827422a60 100644
--- a/src/pages/content/index.ts
+++ b/src/pages/content/index.ts
@@ -280,6 +280,16 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
automaticallyDisableClosedCaptionsEnabled: newValue
});
},
+ enable_automatically_enable_closed_captions: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("automaticallyEnableClosedCaptionsChange", {
+ automaticallyEnableClosedCaptionsEnabled: newValue
+ });
+ },
+ enable_automatically_maximize_player: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("automaticallyMaximizePlayerChange", {
+ automaticallyMaximizePlayerEnabled: newValue
+ });
+ },
enable_copy_timestamp_url_button: (__oldValue, newValue) => {
sendExtensionOnlyMessage("copyTimestampUrlButtonChange", {
copyTimestampUrlButtonEnabled: newValue
@@ -401,6 +411,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
playlistLengthEnabled: newValue
});
},
+ enable_playlist_management_buttons: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("playlistManagementButtonsChange", {
+ playlistManagementButtonsEnabled: newValue
+ });
+ },
enable_redirect_remover: (__oldValue, newValue) => {
sendExtensionOnlyMessage("removeRedirectChange", {
removeRedirectEnabled: newValue
@@ -421,6 +436,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
restoreFullscreenScrollingEnabled: newValue
});
},
+ enable_save_to_watch_later_button: (__oldValue, newValue) => {
+ sendExtensionOnlyMessage("saveToWatchLaterButtonChange", {
+ saveToWatchLaterButtonEnabled: newValue
+ });
+ },
enable_screenshot_button: (__oldValue, newValue) => {
sendExtensionOnlyMessage("screenshotButtonChange", {
screenshotButtonEnabled: newValue
diff --git a/src/pages/embedded/index.ts b/src/pages/embedded/index.ts
index 8c9bc8b12..432105057 100644
--- a/src/pages/embedded/index.ts
+++ b/src/pages/embedded/index.ts
@@ -5,9 +5,11 @@ import {
disableAutomaticallyDisableClosedCaptions,
enableAutomaticallyDisableClosedCaptions
} from "@/src/features/automaticallyDisableClosedCaptions";
+import { disableAutomaticallyEnableClosedCaptions, enableAutomaticallyEnableClosedCaptions } from "@/src/features/automaticallyEnableClosedCaptions";
+import { disableAutomaticallyMaximizePlayer, enableAutomaticallyMaximizePlayer } from "@/src/features/automaticallyMaximizePlayer";
import { enableAutomaticTheaterMode } from "@/src/features/automaticTheaterMode";
import { featuresInControls } from "@/src/features/buttonPlacement";
-import { getFeatureButton, updateButtonsIconColor, updateFeatureButtonIcon, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
+import { getFeatureButton, updateButtonsIconColor, updateFeatureButtonTitle } from "@/src/features/buttonPlacement/utils";
import { addCopyTimestampUrlButton, removeCopyTimestampUrlButton } from "@/src/features/copyTimestampUrlButton";
import { disableCustomCSS, enableCustomCSS } from "@/src/features/customCSS";
import { customCSSExists, updateCustomCSS } from "@/src/features/customCSS/utils";
@@ -23,7 +25,8 @@ import {
disableHideEndScreenCards,
enableHideEndScreenCards,
isEndScreenCardsHidden,
- removeHideEndScreenCardsButton
+ removeHideEndScreenCardsButton,
+ updateHideEndScreenCardsButtonState
} from "@/src/features/hideEndScreenCards";
import { disableHideLiveStreamChat, enableHideLiveStreamChat } from "@/src/features/hideLiveStreamChat";
import {
@@ -42,7 +45,7 @@ import { disableHideShorts, enableHideShorts } from "@/src/features/hideShorts";
import { disableHideTranslateComment, enableHideTranslateComment } from "@/src/features/hideTranslateComment";
import { addLoopButton, removeLoopButton } from "@/src/features/loopButton";
import { addMaximizePlayerButton, removeMaximizePlayerButton } from "@/src/features/maximizePlayerButton";
-import { maximizePlayer } from "@/src/features/maximizePlayerButton/utils";
+import { minimizePlayer } from "@/src/features/maximizePlayerButton/utils";
import { openTranscriptButton } from "@/src/features/openTranscriptButton";
import { removeOpenTranscriptButton } from "@/src/features/openTranscriptButton/utils";
import { disableOpenYouTubeSettingsOnHover, enableOpenYouTubeSettingsOnHover } from "@/src/features/openYouTubeSettingsOnHover";
@@ -58,10 +61,12 @@ import {
import setPlayerQuality from "@/src/features/playerQuality";
import { restorePlayerSpeed, setPlayerSpeed, setupPlaybackSpeedChangeListener } from "@/src/features/playerSpeed";
import { disablePlaylistLength, enablePlaylistLength } from "@/src/features/playlistLength";
+import { disablePlaylistManagementButtons, enablePlaylistManagementButtons } from "@/src/features/playlistManagementButtons";
import { setupRemainingTime as enableRemainingTime, removeRemainingTimeDisplay } from "@/src/features/remainingTime";
import enableRememberVolume from "@/src/features/rememberVolume";
import enableRemoveRedirect from "@/src/features/removeRedirect";
import { disableRestoreFullscreenScrolling, enableRestoreFullscreenScrolling } from "@/src/features/restoreFullscreenScrolling";
+import { disableSaveToWatchLaterButton, enableSaveToWatchLaterButton } from "@/src/features/saveToWatchLaterButton";
import { addScreenshotButton, removeScreenshotButton } from "@/src/features/screenshotButton";
import adjustSpeedOnScrollWheel from "@/src/features/scrollWheelSpeedControl";
import adjustVolumeOnScrollWheel from "@/src/features/scrollWheelVolumeControl";
@@ -77,7 +82,7 @@ import volumeBoost, {
removeVolumeBoostButton
} from "@/src/features/volumeBoost";
import { i18nService } from "@/src/i18n";
-import { getFeatureIcon, type ToggleFeatures, toggleFeatures, type ToggleIcon } from "@/src/icons";
+import { getFeatureIcon, type ToggleFeatures, toggleFeatures } from "@/src/icons";
import {
type AllButtonNames,
type ButtonPlacement,
@@ -193,7 +198,8 @@ const enableFeatures = async () => {
enableCustomCSS(),
enableDeepDarkCSS(),
enableHideOfficialArtistVideosFromHomePage(),
- enableHidePlaylistRecommendationsFromHomePage()
+ enableHidePlaylistRecommendationsFromHomePage(),
+ enableSaveToWatchLaterButton()
]);
// Use a guard clause to reduce amount of times nesting code happens
if (shouldEnableFeaturesFuncReturn()) return;
@@ -236,14 +242,6 @@ const enableFeatures = async () => {
}
}
}
- // Features that add buttons should be put below and be ordered in the order those buttons should appear
- await addHideEndScreenCardsButton();
- await addScreenshotButton();
- await openTranscriptButton();
- await addMaximizePlayerButton();
- await addLoopButton();
- await addCopyTimestampUrlButton();
- await volumeBoost();
await Promise.all([
promptUserToResumeVideo(() => void setupVideoHistory()),
setupPlaybackSpeedChangeListener(),
@@ -261,10 +259,21 @@ const enableFeatures = async () => {
enableHideEndScreenCards(),
enablePlaylistLength(),
enableAutomaticallyDisableClosedCaptions(),
+ enableAutomaticallyEnableClosedCaptions(),
enableAutomaticallyDisableAmbientMode(),
enableDefaultToOriginalAudioTrack(),
- enableRestoreFullscreenScrolling()
+ enableRestoreFullscreenScrolling(),
+ enablePlaylistManagementButtons(),
+ enableAutomaticallyMaximizePlayer()
]);
+ // Features that add buttons should be put below and be ordered in the order those buttons should appear
+ await addHideEndScreenCardsButton();
+ await addScreenshotButton();
+ await openTranscriptButton();
+ await addMaximizePlayerButton();
+ await addLoopButton();
+ await addCopyTimestampUrlButton();
+ await volumeBoost();
} finally {
isEnablingFeatures = false;
}
@@ -348,6 +357,25 @@ const initialize = function () {
}
break;
}
+ case "automaticallyEnableClosedCaptionsChange": {
+ const {
+ data: { automaticallyEnableClosedCaptionsEnabled }
+ } = message;
+ if (automaticallyEnableClosedCaptionsEnabled) {
+ await enableAutomaticallyEnableClosedCaptions();
+ } else {
+ await disableAutomaticallyEnableClosedCaptions();
+ }
+ break;
+ }
+ case "automaticallyMaximizePlayerChange": {
+ const {
+ data: { automaticallyMaximizePlayerEnabled }
+ } = message;
+ if (automaticallyMaximizePlayerEnabled) await enableAutomaticallyMaximizePlayer();
+ else disableAutomaticallyMaximizePlayer();
+ break;
+ }
case "automaticTheaterModeChange": {
// Get the player element
const playerContainer =
@@ -555,31 +583,15 @@ const initialize = function () {
const {
data: { hideEndScreenCardsButtonPlacement: hideEndScreenCardsPlacement, hideEndScreenCardsEnabled }
} = message;
- 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 endScreenCardsHidden = await isEndScreenCardsHidden();
const hideEndScreenCardsIcon = getFeatureIcon("hideEndScreenCardsButton", "below_player");
if (hideEndScreenCardsIcon instanceof SVGSVGElement) return;
if (hideEndScreenCardsEnabled && !endScreenCardsHidden) {
await enableHideEndScreenCards();
- updateHideEndScreenCardsButtonState(hideEndScreenCardsIcon, false);
+ updateHideEndScreenCardsButtonState(hideEndScreenCardsPlacement, hideEndScreenCardsIcon, false);
} else if (!hideEndScreenCardsEnabled && endScreenCardsHidden) {
await disableHideEndScreenCards();
- updateHideEndScreenCardsButtonState(hideEndScreenCardsIcon, true);
+ updateHideEndScreenCardsButtonState(hideEndScreenCardsPlacement, hideEndScreenCardsIcon, true);
}
break;
}
@@ -770,17 +782,7 @@ const initialize = function () {
await addMaximizePlayerButton();
} else {
await removeMaximizePlayerButton();
- const maximizePlayerButton = document.querySelector("video.html5-main-video");
- if (!maximizePlayerButton) return;
- // Get the video element
- const videoElement = document.querySelector("video.html5-main-video");
- // If video element is not available, return
- if (!videoElement) return;
- const videoContainer = document.querySelector("video.html5-main-video");
- if (!videoContainer) return;
- if (videoContainer.classList.contains("maximized_video_container") && videoElement.classList.contains("maximized_video")) {
- maximizePlayer();
- }
+ minimizePlayer();
}
break;
}
@@ -902,6 +904,17 @@ const initialize = function () {
await enablePlaylistLength();
break;
}
+ case "playlistManagementButtonsChange": {
+ const {
+ data: { playlistManagementButtonsEnabled }
+ } = message;
+ if (playlistManagementButtonsEnabled) {
+ await enablePlaylistManagementButtons();
+ } else {
+ await disablePlaylistManagementButtons();
+ }
+ break;
+ }
case "remainingTimeChange": {
const {
data: { remainingTimeEnabled }
@@ -944,6 +957,17 @@ const initialize = function () {
}
break;
}
+ case "saveToWatchLaterButtonChange": {
+ const {
+ data: { saveToWatchLaterButtonEnabled }
+ } = message;
+ if (saveToWatchLaterButtonEnabled) {
+ await enableSaveToWatchLaterButton();
+ } else {
+ await disableSaveToWatchLaterButton();
+ }
+ break;
+ }
case "screenshotButtonChange": {
const {
data: { screenshotButtonEnabled }
diff --git a/src/pages/options/index.css b/src/pages/options/index.css
index 6640fa2b6..e1c8dc7f5 100644
--- a/src/pages/options/index.css
+++ b/src/pages/options/index.css
@@ -1,6 +1,6 @@
html > body {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: scroll;
diff --git a/src/pages/popup/index.css b/src/pages/popup/index.css
index 3ad7d57b5..8b5b05db2 100644
--- a/src/pages/popup/index.css
+++ b/src/pages/popup/index.css
@@ -1,8 +1,8 @@
body {
width: fit-content;
margin: 12px;
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
- sans-serif;
+ font-family:
+ -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-width: 400px;
diff --git a/src/types/index.ts b/src/types/index.ts
index 3b824412e..1eb552ef4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -238,6 +238,8 @@ export type configuration = {
enable_automatic_theater_mode: boolean;
enable_automatically_disable_ambient_mode: boolean;
enable_automatically_disable_closed_captions: boolean;
+ enable_automatically_enable_closed_captions: boolean;
+ enable_automatically_maximize_player: boolean;
enable_automatically_set_quality: boolean;
enable_copy_timestamp_url_button: boolean;
enable_custom_css: boolean;
@@ -263,10 +265,12 @@ export type configuration = {
enable_pausing_background_players: boolean;
enable_playback_speed_buttons: boolean;
enable_playlist_length: boolean;
+ enable_playlist_management_buttons: boolean;
enable_redirect_remover: boolean;
enable_remaining_time: boolean;
enable_remember_last_volume: boolean;
enable_restore_fullscreen_scrolling: boolean;
+ enable_save_to_watch_later_button: boolean;
enable_screenshot_button: boolean;
enable_scroll_wheel_speed_control: boolean;
enable_scroll_wheel_volume_control: boolean;
@@ -371,6 +375,11 @@ export type ExtensionSendOnlyMessageMappings = {
"automaticallyDisableClosedCaptionsChange",
{ automaticallyDisableClosedCaptionsEnabled: boolean }
>;
+ automaticallyEnableClosedCaptionsChange: DataResponseMessage<
+ "automaticallyEnableClosedCaptionsChange",
+ { automaticallyEnableClosedCaptionsEnabled: boolean }
+ >;
+ automaticallyMaximizePlayerChange: DataResponseMessage<"automaticallyMaximizePlayerChange", { automaticallyMaximizePlayerEnabled: boolean }>;
automaticTheaterModeChange: DataResponseMessage<"automaticTheaterModeChange", { automaticTheaterModeEnabled: boolean }>;
buttonPlacementChange: DataResponseMessage<"buttonPlacementChange", ButtonPlacementChange>;
copyTimestampUrlButtonChange: DataResponseMessage<"copyTimestampUrlButtonChange", { copyTimestampUrlButtonEnabled: boolean }>;
@@ -423,11 +432,13 @@ export type ExtensionSendOnlyMessageMappings = {
playerSpeedChange: DataResponseMessage<"playerSpeedChange", { enableForcedPlaybackSpeed: boolean; playerSpeed?: number }>;
playlistLengthChange: DataResponseMessage<"playlistLengthChange", { playlistLengthEnabled: boolean }>;
playlistLengthGetMethodChange: DataResponseMessage<"playlistLengthGetMethodChange", undefined>;
+ playlistManagementButtonsChange: DataResponseMessage<"playlistManagementButtonsChange", { playlistManagementButtonsEnabled: boolean }>;
playlistWatchTimeGetMethodChange: DataResponseMessage<"playlistWatchTimeGetMethodChange", undefined>;
remainingTimeChange: DataResponseMessage<"remainingTimeChange", { remainingTimeEnabled: boolean }>;
rememberVolumeChange: DataResponseMessage<"rememberVolumeChange", { rememberVolumeEnabled: boolean }>;
removeRedirectChange: DataResponseMessage<"removeRedirectChange", { removeRedirectEnabled: boolean }>;
restoreFullscreenScrollingChange: DataResponseMessage<"restoreFullscreenScrollingChange", { restoreFullscreenScrollingEnabled: boolean }>;
+ saveToWatchLaterButtonChange: DataResponseMessage<"saveToWatchLaterButtonChange", { saveToWatchLaterButtonEnabled: boolean }>;
screenshotButtonChange: DataResponseMessage<"screenshotButtonChange", { screenshotButtonEnabled: boolean }>;
scrollWheelSpeedControlChange: DataResponseMessage<"scrollWheelSpeedControlChange", { scrollWheelSpeedControlEnabled: boolean }>;
scrollWheelVolumeControlChange: DataResponseMessage<"scrollWheelVolumeControlChange", { scrollWheelVolumeControlEnabled: boolean }>;
@@ -519,13 +530,6 @@ export type VideoHistoryEntry = {
};
export type VideoHistoryStatus = "watched" | "watching";
export type VideoHistoryStorage = Record;
-export type YouTubeAPIQuotaError = {
- error: {
- code: number;
- errors: { domain: string; message: string; reason: string }[];
- message: string;
- };
-};
export type YouTubePlayerDiv = HTMLDivElement & YouTubePlayer;
export type YouTubePlaylistItem = {
contentDetails: {
diff --git a/src/utils/EventManager.ts b/src/utils/EventManager.ts
index 30c331fde..0add54955 100644
--- a/src/utils/EventManager.ts
+++ b/src/utils/EventManager.ts
@@ -41,9 +41,11 @@ export type FeatureName =
| "playerQuality"
| "playerSpeed"
| "playlistLength"
+ | "playlistManagementButtons"
| "remainingTime"
| "rememberVolume"
| "removeRedirect"
+ | "saveToWatchLaterButton"
| "screenshotButton"
| "scrollWheelSpeedControl"
| "scrollWheelVolumeControl"
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 286e37b97..0a7cdeb2f 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -54,6 +54,8 @@ export const defaultConfiguration = {
enable_automatic_theater_mode: false,
enable_automatically_disable_ambient_mode: false,
enable_automatically_disable_closed_captions: false,
+ enable_automatically_enable_closed_captions: false,
+ enable_automatically_maximize_player: false,
enable_automatically_set_quality: false,
enable_copy_timestamp_url_button: false,
enable_custom_css: false,
@@ -79,10 +81,12 @@ export const defaultConfiguration = {
enable_pausing_background_players: false,
enable_playback_speed_buttons: false,
enable_playlist_length: false,
+ enable_playlist_management_buttons: false,
enable_redirect_remover: false,
enable_remaining_time: false,
enable_remember_last_volume: false,
enable_restore_fullscreen_scrolling: false,
+ enable_save_to_watch_later_button: false,
enable_screenshot_button: false,
enable_scroll_wheel_speed_control: false,
enable_scroll_wheel_volume_control: false,
@@ -156,6 +160,8 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_automatic_theater_mode: z.boolean().optional(),
enable_automatically_disable_ambient_mode: z.boolean().optional(),
enable_automatically_disable_closed_captions: z.boolean().optional(),
+ enable_automatically_enable_closed_captions: z.boolean().optional(),
+ enable_automatically_maximize_player: z.boolean().optional(),
enable_automatically_set_quality: z.boolean().optional(),
enable_copy_timestamp_url_button: z.boolean().optional(),
enable_custom_css: z.boolean().optional(),
@@ -181,10 +187,12 @@ export const configurationImportSchema: TypeToPartialZodSchema<
enable_pausing_background_players: z.boolean().optional(),
enable_playback_speed_buttons: z.boolean().optional(),
enable_playlist_length: z.boolean().optional(),
+ enable_playlist_management_buttons: z.boolean().optional(),
enable_redirect_remover: z.boolean().optional(),
enable_remaining_time: z.boolean().optional(),
enable_remember_last_volume: z.boolean().optional(),
enable_restore_fullscreen_scrolling: z.boolean().optional(),
+ enable_save_to_watch_later_button: z.boolean().optional(),
enable_screenshot_button: z.boolean().optional(),
enable_scroll_wheel_speed_control: z.boolean().optional(),
enable_scroll_wheel_volume_control: z.boolean().optional(),
diff --git a/src/utils/utilities.ts b/src/utils/utilities.ts
index 0ade8bedc..fd362a8cb 100644
--- a/src/utils/utilities.ts
+++ b/src/utils/utilities.ts
@@ -246,10 +246,11 @@ export function createTooltip({
update: () => void;
} {
function makeTooltip() {
+ const isBigMode = document.querySelector(".ytp-big-mode") !== null;
const rect = element.getBoundingClientRect();
// Create tooltip element
const tooltip = createStyledElement({
- classlist: ["yte-button-tooltip", "ytp-tooltip", "ytp-rounded-tooltip", "ytp-bottom"],
+ classlist: ["yte-button-tooltip", "ytp-tooltip", "ytp-bottom"],
elementId: id,
elementType: "div",
styles: {
@@ -259,7 +260,7 @@ export function createTooltip({
}),
...conditionalStyles({
condition: direction === "up",
- top: `${rect.top - 2}px`
+ top: `${rect.top - (isBigMode ? 20 : 6)}px`
}),
...conditionalStyles({
condition: direction === "down",
@@ -297,7 +298,13 @@ export function createTooltip({
tooltip.remove();
}
const tooltip = makeTooltip();
- document.body.appendChild(tooltip);
+ const isButtonBelowPlayer = element?.parentElement?.id === "yte-button-container";
+ const playerContainer = document.querySelector("#movie_player");
+ if (isButtonBelowPlayer) document.body.appendChild(tooltip);
+ else {
+ if (playerContainer) playerContainer.appendChild(tooltip);
+ else document.body.appendChild(tooltip);
+ }
},
remove: () => {
const tooltip = document.getElementById(id);
@@ -511,8 +518,12 @@ export function IsDarkMode() {
const darkMode = document.documentElement.hasAttribute("dark");
return darkMode;
}
+export function isHomePage() {
+ const [firstSection] = extractSectionsFromYouTubeURL(window.location.href);
+ return firstSection === undefined;
+}
export function isLivePage() {
- const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ const [firstSection] = extractSectionsFromYouTubeURL(window.location.href);
return firstSection === "live";
}
export function isNewYouTubeVideoLayout(): boolean {
@@ -526,15 +537,19 @@ export function isNewYouTubeVideoLayout(): boolean {
}
}
export function isPlaylistPage() {
- const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ const [firstSection] = extractSectionsFromYouTubeURL(window.location.href);
return firstSection === "playlist";
}
export function isShortsPage() {
- const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ const [firstSection] = extractSectionsFromYouTubeURL(window.location.href);
return firstSection === "shorts";
}
+export function isSubscriptionsPage() {
+ const [firstSection, secondSection] = extractSectionsFromYouTubeURL(window.location.href);
+ return firstSection === "feed" && secondSection === "subscriptions";
+}
export function isWatchPage() {
- const firstSection = extractFirstSectionFromYouTubeURL(window.location.href);
+ const [firstSection] = extractSectionsFromYouTubeURL(window.location.href);
return firstSection === "watch";
}
@@ -545,28 +560,6 @@ export function modifyElementClassList(action: ModifyElementAction, elementPair:
export function modifyElementsClassList(action: ModifyElementAction, elements: ElementClassPair[]) {
elements.forEach((element) => modifyElementClassList(action, element));
}
-/**
- * Parses an ISO 8601 duration string and returns the total number of seconds.
- *
- * @param {string} duration - The ISO 8601 duration string to parse.
- * @return {number} The total number of seconds represented by the duration string.
- */
-export function parseISO8601Duration(duration: string): number {
- // Regular expression to match ISO 8601 duration format
- const regex = /^PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?$/;
- // Extract hours, minutes, and seconds from the duration string
- const matches = regex.exec(duration);
- // If the duration string does not match the expected format, return 0
- if (!matches) return 0;
-
- // Parse the hours, minutes, and seconds from the matches array
- const hours = parseInt(matches[1] || "0", 10);
- const minutes = parseInt(matches[2] || "0", 10);
- const seconds = parseInt(matches[3] || "0", 10);
-
- // Calculate the total number of seconds by multiplying hours, minutes, and seconds
- return hours * 3600 + minutes * 60 + seconds;
-}
export function parseStoredValue(value: string) {
try {
// Attempt to parse the value as JSON
@@ -708,6 +701,9 @@ export function sendExtensionOnlyMessage section !== "");
-
- return sections.length > 0 ? sections[0] : null;
+ return path.split("/").filter((section) => section !== "");
}
function getColor(type: ColorType) {
switch (type) {
