Merge pull request #69 from VampireChicken12/dev

Dev

src/components/Settings/Settings.tsx

@@ -347,6 +347,15 @@ export default function Settings({
 							onChange={setCheckboxOption("enable_loop_button")}
 						/>
 					</div>
+					<div className="mx-2 mb-1" title="Hides the pages scrollbar">
+						<Checkbox
+							id="enable_hide_scrollbar"
+							title="Hides the pages scrollbar"
+							label="Enable hide scrollbar"
+							checked={settings.enable_hide_scrollbar.toString() === "true"}
+							onChange={setCheckboxOption("enable_hide_scrollbar")}
+						/>
+					</div>
 				</fieldset>
 				<fieldset className="mx-1">
 					<legend className="mb-1 text-lg sm:text-xl md:text-2xl">Scroll wheel volume control settings</legend>

src/features/hideScrollBar/index.ts

@@ -0,0 +1,17 @@
+export function hideScrollBar() {
+	const style = document.createElement("style");
+	style.innerHTML = `
+		::-webkit-scrollbar {
+			width: 0px;
+			height: 0px;
+		}
+	`;
+	style.id = "yte-hide-scroll-bar";
+	document.head.appendChild(style);
+}
+export function showScrollBar() {
+	const style = document.getElementById("yte-hide-scroll-bar");
+	if (style) {
+		style.remove();
+	}
+}

src/pages/content/index.tsx

@@ -14,6 +14,7 @@ import eventManager from "@/utils/EventManager";
 import { browserColorLog, formatError } from "@/utils/utilities";
 
 import type { ExtensionSendOnlyMessageMappings, Messages, YouTubePlayerDiv } from "@/src/types";
+import { hideScrollBar, showScrollBar } from "@/src/features/hideScrollBar";
 // TODO: Add always show progressbar feature
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -225,6 +226,22 @@ window.onload = function () {
 				}
 				break;
 			}
+			case "hideScrollBarChange": {
+				const scrollBarHidden = document.getElementById("yte-hide-scroll-bar") !== null;
+				const {
+					data: { hideScrollBarEnabled }
+				} = message;
+				if (hideScrollBarEnabled) {
+					if (!scrollBarHidden) {
+						hideScrollBar();
+					}
+				} else {
+					if (scrollBarHidden) {
+						showScrollBar();
+					}
+				}
+				break;
+			}
 			default: {
 				return;
 			}

src/pages/inject/index.tsx

@@ -197,6 +197,11 @@ const storageChangeHandler = async (changes: StorageChanges, areaName: string) =
 			sendExtensionOnlyMessage("rememberVolumeChange", {
 				rememberVolumeEnabled: castedChanges.enable_remember_last_volume.newValue
 			});
+		},
+		enable_hide_scrollbar: () => {
+			sendExtensionOnlyMessage("hideScrollBarChange", {
+				hideScrollBarEnabled: castedChanges.enable_hide_scrollbar.newValue
+			});
 		}
 	};
 	Object.entries(

src/types.ts

@@ -47,6 +47,7 @@ export type configuration = {
 	enable_video_history: boolean;
 	enable_remaining_time: boolean;
 	enable_loop_button: boolean;
+	enable_hide_scrollbar: boolean;
 	screenshot_save_as: ScreenshotType;
 	screenshot_format: ScreenshotFormat;
 	osd_display_color: OnScreenDisplayColor;
@@ -111,6 +112,7 @@ export type ExtensionSendOnlyMessageMappings = {
 	loopButtonChange: DataResponseMessage<"loopButtonChange", { loopButtonEnabled: boolean }>;
 	scrollWheelVolumeControlChange: DataResponseMessage<"scrollWheelVolumeControlChange", { scrollWheelVolumeControlEnabled: boolean }>;
 	rememberVolumeChange: DataResponseMessage<"rememberVolumeChange", { rememberVolumeEnabled: boolean }>;
+	hideScrollBarChange: DataResponseMessage<"hideScrollBarChange", { hideScrollBarEnabled: boolean }>;
 };
 export type FilterMessagesBySource<T extends Messages, S extends MessageSource> = {
 	[K in keyof T]: Extract<T[K], { source: S }>;

src/utils/EventManager.ts

@@ -9,7 +9,8 @@ export type FeatureName =
 	| "playerQuality"
 	| "loopButton"
 	| "rememberVolume"
-	| "featureMenu";
+	| "featureMenu"
+	| "hideScrollBar";
 type EventCallback<K extends keyof HTMLElementEventMap> = (event: HTMLElementEventMap[K]) => void;
 
 export interface EventListenerInfo<K extends keyof ElementEventMap> {

src/utils/constants.ts

@@ -12,8 +12,8 @@ export const outputFolderName = "dist";
 export const defaultConfiguration = {
 	// Options
 	// General
-	enable_scroll_wheel_volume_control: true,
-	enable_remember_last_volume: true,
+	enable_scroll_wheel_volume_control: false,
+	enable_remember_last_volume: false,
 	enable_automatically_set_quality: false,
 	enable_forced_playback_speed: false,
 	enable_volume_boost: false,
@@ -22,6 +22,7 @@ export const defaultConfiguration = {
 	enable_video_history: false,
 	enable_remaining_time: false,
 	enable_loop_button: false,
+	enable_hide_scrollbar: false,
 	screenshot_save_as: "file",
 	screenshot_format: "png",
 	// Images
@@ -48,6 +49,7 @@ export const configurationSchema: ConfigurationToZodSchema<configuration> = z.ob
 	enable_video_history: z.boolean(),
 	enable_remaining_time: z.boolean(),
 	enable_loop_button: z.boolean(),
+	enable_hide_scrollbar: z.boolean(),
 	screenshot_save_as: z.enum(screenshotType),
 	screenshot_format: z.enum(screenshotFormat),
 	osd_display_color: z.enum(onScreenDisplayColor),