Merge pull request #73 from VampireChicken12/dev

Dev

src/components/Settings/Settings.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useState } from "react";
 import type { ChangeEvent, Dispatch, SetStateAction } from "react";
 import { Checkbox, NumberInput, Select, type SelectOption } from "../Inputs";
 import { cn, settingsAreDefault } from "@/src/utils/utilities";
-import { configurationSchema } from "@/src/utils/constants";
+import { configurationImportSchema } from "@/src/utils/constants";
 import { generateErrorMessage } from "zod-error";
 import { formatDateForFileName } from "../../utils/utilities";
 
@@ -222,7 +222,7 @@ export default function Settings({
 					const fileContents = await file.text();
 					const importedSettings = JSON.parse(fileContents);
 					// Validate the imported settings.
-					const result = configurationSchema.safeParse(importedSettings);
+					const result = configurationImportSchema.safeParse(importedSettings);
 					if (!result.success) {
 						const { error } = result;
 						const errorMessage = generateErrorMessage(error.errors);
@@ -304,7 +304,7 @@ export default function Settings({
 							id="enable_remember_last_volume"
 							title="Remembers the volume you were watching at and sets it as the volume when you open a new video"
 							label="Remember last volume"
-							checked={settings.enable_remember_last_volume.toString() === "true"}
+							checked={settings.enable_remember_last_volume?.toString() === "true"}
 							onChange={setCheckboxOption("enable_remember_last_volume")}
 						/>
 					</div>
@@ -313,7 +313,7 @@ export default function Settings({
 							id="enable_maximize_player_button"
 							title="Adds a button to the player to maximize the player"
 							label="Enable maximize player button"
-							checked={settings.enable_maximize_player_button.toString() === "true"}
+							checked={settings.enable_maximize_player_button?.toString() === "true"}
 							onChange={setCheckboxOption("enable_maximize_player_button")}
 						/>
 					</div>
@@ -325,7 +325,7 @@ export default function Settings({
 							id="enable_video_history"
 							title="Keeps track of where you left off on videos you were watching and asks if you want to resume when that video loads again"
 							label="Enable video history"
-							checked={settings.enable_video_history.toString() === "true"}
+							checked={settings.enable_video_history?.toString() === "true"}
 							onChange={setCheckboxOption("enable_video_history")}
 						/>
 					</div>
@@ -334,7 +334,7 @@ export default function Settings({
 							id="enable_remaining_time"
 							title="Shows the remaining time of the video you're watching"
 							label="Enable remaining time"
-							checked={settings.enable_remaining_time.toString() === "true"}
+							checked={settings.enable_remaining_time?.toString() === "true"}
 							onChange={setCheckboxOption("enable_remaining_time")}
 						/>
 					</div>
@@ -343,7 +343,7 @@ export default function Settings({
 							id="enable_loop_button"
 							title="Adds a button to the player to loop the video you're watching"
 							label="Enable loop button"
-							checked={settings.enable_loop_button.toString() === "true"}
+							checked={settings.enable_loop_button?.toString() === "true"}
 							onChange={setCheckboxOption("enable_loop_button")}
 						/>
 					</div>
@@ -352,7 +352,7 @@ export default function Settings({
 							id="enable_hide_scrollbar"
 							title="Hides the pages scrollbar"
 							label="Enable hide scrollbar"
-							checked={settings.enable_hide_scrollbar.toString() === "true"}
+							checked={settings.enable_hide_scrollbar?.toString() === "true"}
 							onChange={setCheckboxOption("enable_hide_scrollbar")}
 						/>
 					</div>
@@ -363,7 +363,7 @@ export default function Settings({
 						id="enable_scroll_wheel_volume_control"
 						title="Lets you use the scroll wheel to control the volume of the video you're watching"
 						label="Enable scroll wheel volume control"
-						checked={settings.enable_scroll_wheel_volume_control.toString() === "true"}
+						checked={settings.enable_scroll_wheel_volume_control?.toString() === "true"}
 						onChange={setCheckboxOption("enable_scroll_wheel_volume_control")}
 					/>
 					<div className="mx-2 mb-1" title="The color of the On Screen Display">
@@ -447,7 +447,7 @@ export default function Settings({
 						id="enable_automatically_set_quality"
 						title="Automatically sets the quality of the video to the quality you choose below"
 						label="Enable auto set quality"
-						checked={settings.enable_automatically_set_quality.toString() === "true"}
+						checked={settings.enable_automatically_set_quality?.toString() === "true"}
 						onChange={setCheckboxOption("enable_automatically_set_quality")}
 					/>
 					<div className="mx-2 mb-1" title="The quality to set the video to">
@@ -468,7 +468,7 @@ export default function Settings({
 						id="enable_forced_playback_speed"
 						title="Forces the video to play at the speed you choose below"
 						label="Enable forced playback speed"
-						checked={settings.enable_forced_playback_speed.toString() === "true"}
+						checked={settings.enable_forced_playback_speed?.toString() === "true"}
 						onChange={setCheckboxOption("enable_forced_playback_speed")}
 					/>
 					<div className="mx-2 mb-1" title="The speed to set the video to">
@@ -489,7 +489,7 @@ export default function Settings({
 						id="enable_volume_boost"
 						title="Boosts the volume of the video you're watching"
 						label="Enable volume boost"
-						checked={settings.enable_volume_boost.toString() === "true"}
+						checked={settings.enable_volume_boost?.toString() === "true"}
 						onChange={setCheckboxOption("enable_volume_boost")}
 					/>
 					<div className="mx-2 mb-1" title="The amount to boost the volume by">
@@ -510,7 +510,7 @@ export default function Settings({
 						id="enable_screenshot_button"
 						title="Adds a button to the player to take a screenshot of the video"
 						label="Enable screenshot button"
-						checked={settings.enable_screenshot_button.toString() === "true"}
+						checked={settings.enable_screenshot_button?.toString() === "true"}
 						onChange={setCheckboxOption("enable_screenshot_button")}
 					/>
 					<div className="mx-2 mb-1" title="The screenshot save type">

src/pages/content/index.tsx

@@ -68,10 +68,10 @@ document.documentElement.appendChild(element);
 
 window.onload = function () {
 	enableRememberVolume();
-	enableFeatureMenu();
 	enableHideScrollBar();
 	const enableFeatures = () => {
 		eventManager.removeAllEventListeners(["featureMenu"]);
+		enableFeatureMenu();
 		addLoopButton();
 		addMaximizePlayerButton();
 		addScreenshotButton();

src/types.ts

@@ -145,8 +145,8 @@ type TypeToZod<T> = {
 			: z.ZodType<T[K]>
 		: z.ZodObject<TypeToZod<T[K]>>;
 };
-export type ConfigurationToZodSchema<T> = z.ZodObject<{
-	[K in keyof T]: T[K] extends object ? z.ZodObject<TypeToZod<T[K]>> : z.ZodType<T[K]>;
+export type PartialConfigurationToZodSchema<T> = z.ZodObject<{
+	[K in keyof T]: T[K] extends object ? z.ZodObject<TypeToZod<T[K]>> : z.ZodOptionalType<z.ZodType<T[K]>>;
 }>;
 export type Prettify<T> = {
 	[K in keyof T]: T[K];

src/utils/constants.ts

@@ -1,5 +1,5 @@
 import z from "zod";
-import type { ConfigurationToZodSchema, configuration } from "../types";
+import type { PartialConfigurationToZodSchema, configuration } from "../types";
 import {
 	screenshotFormat,
 	screenshotType,
@@ -38,29 +38,29 @@ export const defaultConfiguration = {
 	player_speed: 1
 } satisfies configuration;
 
-export const configurationSchema: ConfigurationToZodSchema<configuration> = z.object({
-	enable_scroll_wheel_volume_control: z.boolean(),
-	enable_remember_last_volume: z.boolean(),
-	enable_automatically_set_quality: z.boolean(),
-	enable_forced_playback_speed: z.boolean(),
-	enable_volume_boost: z.boolean(),
-	enable_screenshot_button: z.boolean(),
-	enable_maximize_player_button: z.boolean(),
-	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),
-	osd_display_type: z.enum(onScreenDisplayType),
-	osd_display_position: z.enum(onScreenDisplayPosition),
-	osd_display_hide_time: z.number(),
-	osd_display_padding: z.number(),
-	osd_display_opacity: z.number().min(1).max(100),
-	volume_adjustment_steps: z.number().min(1).max(100),
-	volume_boost_amount: z.number(),
-	player_quality: z.enum(youtubePlayerQualityLevel),
-	player_speed: z.number().min(0.25).max(4.0).step(0.25),
+export const configurationImportSchema: PartialConfigurationToZodSchema<configuration> = z.object({
+	enable_scroll_wheel_volume_control: z.boolean().optional(),
+	enable_remember_last_volume: z.boolean().optional(),
+	enable_automatically_set_quality: z.boolean().optional(),
+	enable_forced_playback_speed: z.boolean().optional(),
+	enable_volume_boost: z.boolean().optional(),
+	enable_screenshot_button: z.boolean().optional(),
+	enable_maximize_player_button: z.boolean().optional(),
+	enable_video_history: z.boolean().optional(),
+	enable_remaining_time: z.boolean().optional(),
+	enable_loop_button: z.boolean().optional(),
+	enable_hide_scrollbar: z.boolean().optional(),
+	screenshot_save_as: z.enum(screenshotType).optional(),
+	screenshot_format: z.enum(screenshotFormat).optional(),
+	osd_display_color: z.enum(onScreenDisplayColor).optional(),
+	osd_display_type: z.enum(onScreenDisplayType).optional(),
+	osd_display_position: z.enum(onScreenDisplayPosition).optional(),
+	osd_display_hide_time: z.number().optional(),
+	osd_display_padding: z.number().optional(),
+	osd_display_opacity: z.number().min(1).max(100).optional(),
+	volume_adjustment_steps: z.number().min(1).max(100).optional(),
+	volume_boost_amount: z.number().optional(),
+	player_quality: z.enum(youtubePlayerQualityLevel).optional(),
+	player_speed: z.number().min(0.25).max(4.0).step(0.25).optional(),
 	remembered_volume: z.number().optional()
 });