Skip to content

Commit

Permalink
feat: hold right click scroll wheel volume control
Browse files Browse the repository at this point in the history
  • Loading branch information
VampireChicken12 committed Nov 29, 2023
1 parent 1006e40 commit 3587c4a
Show file tree
Hide file tree
Showing 6 changed files with 50 additions and 32 deletions.
11 changes: 8 additions & 3 deletions public/locales/en-US.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,17 +129,22 @@
"round": "Round"
}
},
"modifierKey": {
"title": "Scroll Wheel Modifier Key",
"holdModifierKey": {
"enable": {
"title": "Press a modifier key to enable volume adjustment with the scroll wheel.",
"label": "Enable modifier key"
"label": "Enable hold modifier key"
},
"optionLabel": "{{KEY}} key",
"select": {
"label": "Modifier key",
"title": "The modifier key to use"
}
},
"holdRightClick": {
"enable": {
"title": "Hold right click to enable scroll wheel volume control",
"label": "Enable hold right click"
}
}
},
"automaticQuality": {
Expand Down
11 changes: 8 additions & 3 deletions public/locales/en-US.json.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -123,14 +123,19 @@ interface EnUS {
label: "Enable scroll wheel volume control";
title: "Lets you use the scroll wheel to control the volume of the video you're watching";
};
modifierKey: {
holdModifierKey: {
enable: {
label: "Enable modifier key";
label: "Enable hold modifier key";
title: "Press a modifier key to enable volume adjustment with the scroll wheel.";
};
optionLabel: "{{KEY}} key";
select: { label: "Modifier key"; title: "The modifier key to use" };
title: "Scroll Wheel Modifier Key";
};
holdRightClick: {
enable: {
label: "Enable hold right click";
title: "Hold right click to enable scroll wheel volume control";
};
};
onScreenDisplay: {
colors: {
Expand Down
30 changes: 19 additions & 11 deletions src/components/Settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -256,19 +256,19 @@ export default function Settings() {
});
const scrollWheelVolumeControlModifierKeyOptions = [
{
label: t("settings.sections.scrollWheelVolumeControl.modifierKey.optionLabel", {
label: t("settings.sections.scrollWheelVolumeControl.holdModifierKey.optionLabel", {
KEY: "Alt"
}),
value: "altKey"
},
{
label: t("settings.sections.scrollWheelVolumeControl.modifierKey.optionLabel", {
label: t("settings.sections.scrollWheelVolumeControl.holdModifierKey.optionLabel", {
KEY: "Ctrl"
}),
value: "ctrlKey"
},
{
label: t("settings.sections.scrollWheelVolumeControl.modifierKey.optionLabel", {
label: t("settings.sections.scrollWheelVolumeControl.holdModifierKey.optionLabel", {
KEY: "Shift"
}),
value: "shiftKey"
Expand Down Expand Up @@ -552,22 +552,30 @@ export default function Settings() {
type="checkbox"
/>
<Setting
checked={settings.enable_scroll_wheel_volume_control_modifier_key?.toString() === "true"}
id="enable_scroll_wheel_volume_control_modifier_key"
label={t("settings.sections.scrollWheelVolumeControl.modifierKey.enable.label")}
onChange={setCheckboxOption("enable_scroll_wheel_volume_control_modifier_key")}
title={t("settings.sections.scrollWheelVolumeControl.modifierKey.enable.title")}
checked={settings.enable_scroll_wheel_volume_control_hold_modifier_key?.toString() === "true"}
id="enable_scroll_wheel_volume_control_hold_modifier_key"
label={t("settings.sections.scrollWheelVolumeControl.holdModifierKey.enable.label")}
onChange={setCheckboxOption("enable_scroll_wheel_volume_control_hold_modifier_key")}
title={t("settings.sections.scrollWheelVolumeControl.holdModifierKey.enable.title")}
type="checkbox"
/>
<Setting
disabled={settings.enable_scroll_wheel_volume_control_modifier_key.toString() !== "true"}
checked={settings.enable_scroll_wheel_volume_control_hold_right_click?.toString() === "true"}
id="enable_scroll_wheel_volume_control_hold_right_click"
label={t("settings.sections.scrollWheelVolumeControl.holdRightClick.enable.label")}
onChange={setCheckboxOption("enable_scroll_wheel_volume_control_hold_right_click")}
title={t("settings.sections.scrollWheelVolumeControl.holdRightClick.enable.title")}
type="checkbox"
/>
<Setting
disabled={settings.enable_scroll_wheel_volume_control_hold_modifier_key.toString() !== "true"}
id="scroll_wheel_volume_control_modifier_key"
label={t("settings.sections.scrollWheelVolumeControl.modifierKey.select.label")}
label={t("settings.sections.scrollWheelVolumeControl.holdModifierKey.select.label")}
onChange={setValueOption("scroll_wheel_volume_control_modifier_key")}
options={scrollWheelVolumeControlModifierKeyOptions}
selectedOption={selectedModifierKey}
setSelectedOption={setSelectedModifierKey}
title={t("settings.sections.scrollWheelVolumeControl.modifierKey.select.title")}
title={t("settings.sections.scrollWheelVolumeControl.holdModifierKey.select.title")}
type="select"
/>
<Setting
Expand Down
21 changes: 9 additions & 12 deletions src/features/scrollWheelVolumeControl/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,16 @@ export default async function adjustVolumeOnScrollWheel(): Promise<void> {
data: { options }
} = optionsData;
// Extract the necessary properties from the options object
const { enable_scroll_wheel_volume_control, enable_scroll_wheel_volume_control_modifier_key, scroll_wheel_volume_control_modifier_key } =
options;
const {
enable_scroll_wheel_volume_control_hold_modifier_key,
enable_scroll_wheel_volume_control_hold_right_click,
scroll_wheel_volume_control_modifier_key
} = options;
const wheelEvent = event as WheelEvent;
if (
!(
(enable_scroll_wheel_volume_control &&
enable_scroll_wheel_volume_control_modifier_key &&
scroll_wheel_volume_control_modifier_key &&
wheelEvent[scroll_wheel_volume_control_modifier_key]) ||
(enable_scroll_wheel_volume_control && !enable_scroll_wheel_volume_control_modifier_key)
)
)
return;
// If the modifier key is required and not pressed, return
if (enable_scroll_wheel_volume_control_hold_modifier_key && !wheelEvent[scroll_wheel_volume_control_modifier_key]) return;
// If the right click is required and not pressed, return
if (enable_scroll_wheel_volume_control_hold_right_click && wheelEvent.buttons !== 2) return;
// Get the player element
const playerContainer = isWatchPage()
? document.querySelector<YouTubePlayerDiv>("div#movie_player")
Expand Down
3 changes: 2 additions & 1 deletion src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,8 @@ export type configuration = {
enable_remember_last_volume: boolean;
enable_screenshot_button: boolean;
enable_scroll_wheel_volume_control: boolean;
enable_scroll_wheel_volume_control_modifier_key: boolean;
enable_scroll_wheel_volume_control_hold_modifier_key: boolean;
enable_scroll_wheel_volume_control_hold_right_click: boolean;
enable_video_history: boolean;
enable_volume_boost: boolean;
language: AvailableLocales;
Expand Down
6 changes: 4 additions & 2 deletions src/utils/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ export const defaultConfiguration = {
enable_remember_last_volume: false,
enable_screenshot_button: false,
enable_scroll_wheel_volume_control: false,
enable_scroll_wheel_volume_control_modifier_key: false,
enable_scroll_wheel_volume_control_hold_modifier_key: false,
enable_scroll_wheel_volume_control_hold_right_click: false,
enable_video_history: false,
enable_volume_boost: false,
language: "en-US",
Expand Down Expand Up @@ -57,7 +58,8 @@ export const configurationImportSchema: TypeToPartialZodSchema<configuration> =
enable_remember_last_volume: z.boolean().optional(),
enable_screenshot_button: z.boolean().optional(),
enable_scroll_wheel_volume_control: z.boolean().optional(),
enable_scroll_wheel_volume_control_modifier_key: z.boolean().optional(),
enable_scroll_wheel_volume_control_hold_modifier_key: z.boolean().optional(),
enable_scroll_wheel_volume_control_hold_right_click: z.boolean().optional(),
enable_video_history: z.boolean().optional(),
enable_volume_boost: z.boolean().optional(),
language: z.enum(availableLocales).optional(),
Expand Down

0 comments on commit 3587c4a

Please sign in to comment.