Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add inline hotkeys discovery #188

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add inline hotkeys discovery #188

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7f04b5
add inline hotkeys discovery
DavidSM100 Nov 24, 2024
672922b
adjustments
DavidSM100 Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
176 changes: 167 additions & 9 deletions src/entry-points/popup/App.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,12 +29,40 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
import { tippyActionAsyncPreload as tippy } from './tippyAction';
import RangeSlider from './RangeSlider.svelte';
import type { TelemetryMessage } from '@/entry-points/content/AllMediaElementsController';
import { HotkeyAction, HotkeyAction_TOGGLE_PAUSE, HotkeyBinding, NonSettingsAction, } from '@/hotkeys';
import {
HotkeyAction,
HotkeyAction_INCREASE_VOLUME,
HotkeyAction_DECREASE_VOLUME,
HotkeyAction_INCREASE_VOLUME_THRESHOLD,
HotkeyAction_DECREASE_VOLUME_THRESHOLD,
HotkeyAction_TOGGLE_VOLUME_THRESHOLD,
HotkeyAction_SET_VOLUME_THRESHOLD,
HotkeyAction_INCREASE_SOUNDED_SPEED,
HotkeyAction_DECREASE_SOUNDED_SPEED,
HotkeyAction_TOGGLE_SOUNDED_SPEED,
HotkeyAction_SET_SOUNDED_SPEED,
HotkeyAction_INCREASE_SILENCE_SPEED,
HotkeyAction_DECREASE_SILENCE_SPEED,
HotkeyAction_TOGGLE_SILENCE_SPEED,
HotkeyAction_SET_SILENCE_SPEED,
HotkeyAction_INCREASE_MARGIN_BEFORE,
HotkeyAction_DECREASE_MARGIN_BEFORE,
HotkeyAction_TOGGLE_MARGIN_BEFORE,
HotkeyAction_SET_MARGIN_BEFORE,
HotkeyAction_INCREASE_MARGIN_AFTER,
HotkeyAction_DECREASE_MARGIN_AFTER,
HotkeyAction_TOGGLE_MARGIN_AFTER,
HotkeyAction_SET_MARGIN_AFTER,
HotkeyAction_TOGGLE_PAUSE,
HotkeyBinding,
NonSettingsAction
} from '@/hotkeys';
import type createKeydownListener from './hotkeys';
import throttle from 'lodash/throttle';
import { fromS } from 'hh-mm-ss'; // TODO it could be lighter. Make a MR or merge it directly and modify.
import { assertDev, getMessage } from '@/helpers';
import { isMobile } from '@/helpers/isMobile';
import type { Props as TippyProps } from 'tippy.js';

// See ./popup.css. Would be cool to do this at build-time
if (BUILD_DEFINITIONS.BROWSER === 'chromium') {
Expand All @@ -60,6 +88,8 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
| 'advancedMode'
| 'simpleSlider'
| 'onPlaybackRateChangeFromOtherScripts'
| 'hotkeys'
| 'popupSpecificHotkeys'
>
& ReturnType<Parameters<typeof createKeydownListener>[1]>
& Parameters<typeof changeAlgorithmAndMaybeRelatedSettings>[0]
Expand Down Expand Up @@ -438,14 +468,71 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
marginAfter: 0.03 + 0.0020 * (100 - settings.simpleSlider)
})
}

let hotkeysActions: {[P in HotkeyAction]?: HotkeyBinding[]} = {};
settingsPromise.then((settings) => {
if (!settings.enableHotkeys) return;
[...settings.hotkeys, ...settings.popupSpecificHotkeys].forEach((hotKey) => {
const actionId = hotKey.action;
if (!hotkeysActions[actionId]) hotkeysActions[actionId] = [];
hotkeysActions[actionId].push(hotKey);
});
});

function getActionString(actionId: HotkeyAction, actionName: string): string {
const actionHotkeys = hotkeysActions[actionId];
if (!actionHotkeys) return '';
let actionString = '';
actionHotkeys.forEach((hotkey: HotkeyBinding, i: number) => {
let keysString = '';
const modifiers = hotkey.keyCombination.modifiers;
if (modifiers) {
modifiers.forEach((modifier) => {
keysString += modifier.replace('Key', '') + '+';
});
}

actionString += keysString + hotkey.keyCombination.code.replace('Key', '');
if (actionHotkeys.length !== i + 1) {
actionString += ', ';
}
});

// Perhaps using placeholders when passing data to getMessage()
// to allow translator to have more control over this
// Also perhaps including ":" in the translation string because it might also be translated in some languages.
return '\n' + actionName + ': ' + actionString;
WofWca marked this conversation as resolved.
Show resolved Hide resolved
}

// `commands` API is currently not supported by Gecko for Android.
const commandsPromise: undefined | ReturnType<typeof browserOrChrome.commands.getAll>
= browserOrChrome.commands?.getAll?.();

let toggleExtensionTooltip: Partial<TippyProps> = {};
if (commandsPromise) {
commandsPromise.then(commands => {
commands.forEach(command => {
if (command.name === 'toggle_enabled') {
toggleExtensionTooltip = {
content: getMessage("toggleSettingValue") + ': ' + command.shortcut,
theme: 'my-tippy',
placement: 'bottom',
}
}
});
});
}
</script>

<svelte:window
on:keydown={keydownListener}
/>
{#await settingsPromise then _}
<div style="display: flex; justify-content: center;">
<label class="enabled-input">
<label
class="enabled-input"
use:tippy={toggleExtensionTooltip || null}
>
<!-- TODO it needs to be ensured that `on:change` (`on:input`) goes after `bind:` for all inputs.
DRY? With `{...myBind}` or something?
Also for some reason if you use `on:input` instead of `on:change` for this checkbox, it stops working.
Expand Down Expand Up @@ -481,7 +568,16 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
<span
class="others__item"
use:tippy={{
content: () => getMessage('volume'),
content: () => {
let tooltip = getMessage('volume');
const hotkeysString = getActionString(HotkeyAction_INCREASE_VOLUME, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_VOLUME, getMessage("decreaseSettingValue"));
if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
>
Expand Down Expand Up @@ -823,7 +919,19 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
on:input={createOnInputListener('volumeThreshold')}
disabled={controllerTypeAlwaysSounded}
useForInputParams={{
content: () => getMessage('volumeThresholdTooltip'),
content: () => {
let tooltip = getMessage('volumeThresholdTooltip');
const hotkeysString = getActionString(HotkeyAction_INCREASE_VOLUME_THRESHOLD, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_VOLUME_THRESHOLD, getMessage("decreaseSettingValue")) +
getActionString(HotkeyAction_TOGGLE_VOLUME_THRESHOLD, getMessage("toggleSettingValue")) +
getActionString(HotkeyAction_SET_VOLUME_THRESHOLD, getMessage("setSettingValue"));

if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
Expand All @@ -843,7 +951,19 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
bind:value={settings.soundedSpeed}
on:input={createOnInputListener('soundedSpeed')}
useForInputParams={{
content: () => getMessage('soundedSpeedTooltip'),
content: () => {
let tooltip = getMessage('soundedSpeedTooltip');
const hotkeysString = getActionString(HotkeyAction_INCREASE_SOUNDED_SPEED, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_SOUNDED_SPEED, getMessage("decreaseSettingValue")) +
getActionString(HotkeyAction_TOGGLE_SOUNDED_SPEED, getMessage("toggleSettingValue")) +
getActionString(HotkeyAction_SET_SOUNDED_SPEED, getMessage("setSettingValue"));

if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
Expand All @@ -860,12 +980,26 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
|| controllerTypeAlwaysSounded
}
useForInputParams={{
content: () => getMessage(
content: () => {
let tooltip = getMessage(
'silenceSpeedTooltip',
settings.silenceSpeedSpecificationMethod === 'relativeToSoundedSpeed'
? getMessage('silenceSpeedTooltipRelativeNote')
: ''
),
);

const hotkeysString = getActionString(HotkeyAction_INCREASE_SILENCE_SPEED, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_SILENCE_SPEED, getMessage("decreaseSettingValue")) +
getActionString(HotkeyAction_TOGGLE_SILENCE_SPEED, getMessage("toggleSettingValue")) +
getActionString(HotkeyAction_SET_SILENCE_SPEED, getMessage("setSettingValue"));

if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;

},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
Expand All @@ -876,7 +1010,19 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
on:input={createOnInputListener('marginBefore')}
disabled={controllerTypeAlwaysSounded}
useForInputParams={{
content: () => getMessage('marginBeforeTooltip'),
content: () => {
let tooltip = getMessage('marginBeforeTooltip');
const hotkeysString = getActionString(HotkeyAction_INCREASE_MARGIN_BEFORE, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_MARGIN_BEFORE, getMessage("decreaseSettingValue")) +
getActionString(HotkeyAction_TOGGLE_MARGIN_BEFORE, getMessage('toggleSettingValue')) +
getActionString(HotkeyAction_SET_MARGIN_BEFORE, getMessage('setSettingValue'));

if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
Expand All @@ -887,7 +1033,19 @@ along with Jump Cutter Browser Extension. If not, see <https://www.gnu.org/lice
on:input={createOnInputListener('marginAfter')}
disabled={controllerTypeAlwaysSounded}
useForInputParams={{
content: () => getMessage('marginAfterTooltip'),
content: () => {
let tooltip = getMessage('marginAfterTooltip');
const hotkeysString = getActionString(HotkeyAction_INCREASE_MARGIN_AFTER, getMessage("increaseSettingValue")) +
getActionString(HotkeyAction_DECREASE_MARGIN_AFTER, getMessage("decreaseSettingValue")) +
getActionString(HotkeyAction_TOGGLE_MARGIN_AFTER, getMessage("toggleSettingValue")) +
getActionString(HotkeyAction_SET_MARGIN_AFTER, getMessage('setSettingValue'));

if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
Expand Down
28 changes: 28 additions & 0 deletions src/hotkeys/HotkeyAction.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,4 +62,32 @@ export const enum HotkeyAction {
DECREASE_VOLUME = 'volume-',
}

export const HotkeyAction_INCREASE_VOLUME = HotkeyAction.INCREASE_VOLUME;
export const HotkeyAction_DECREASE_VOLUME = HotkeyAction.DECREASE_VOLUME;

export const HotkeyAction_INCREASE_VOLUME_THRESHOLD = HotkeyAction.INCREASE_VOLUME_THRESHOLD;
export const HotkeyAction_DECREASE_VOLUME_THRESHOLD = HotkeyAction.DECREASE_VOLUME_THRESHOLD;
export const HotkeyAction_TOGGLE_VOLUME_THRESHOLD = HotkeyAction.TOGGLE_VOLUME_THRESHOLD;
export const HotkeyAction_SET_VOLUME_THRESHOLD = HotkeyAction.SET_VOLUME_THRESHOLD;

export const HotkeyAction_INCREASE_SOUNDED_SPEED = HotkeyAction.INCREASE_SOUNDED_SPEED;
export const HotkeyAction_DECREASE_SOUNDED_SPEED = HotkeyAction.DECREASE_SOUNDED_SPEED;
export const HotkeyAction_TOGGLE_SOUNDED_SPEED = HotkeyAction.TOGGLE_SOUNDED_SPEED;
export const HotkeyAction_SET_SOUNDED_SPEED = HotkeyAction.SET_SOUNDED_SPEED;

export const HotkeyAction_INCREASE_SILENCE_SPEED = HotkeyAction.INCREASE_SILENCE_SPEED;
export const HotkeyAction_DECREASE_SILENCE_SPEED = HotkeyAction.DECREASE_SILENCE_SPEED;
export const HotkeyAction_TOGGLE_SILENCE_SPEED = HotkeyAction.TOGGLE_SILENCE_SPEED;
export const HotkeyAction_SET_SILENCE_SPEED = HotkeyAction.SET_SILENCE_SPEED;

export const HotkeyAction_INCREASE_MARGIN_BEFORE = HotkeyAction.INCREASE_MARGIN_BEFORE;
export const HotkeyAction_DECREASE_MARGIN_BEFORE = HotkeyAction.DECREASE_MARGIN_BEFORE;
export const HotkeyAction_TOGGLE_MARGIN_BEFORE = HotkeyAction.TOGGLE_MARGIN_BEFORE;
export const HotkeyAction_SET_MARGIN_BEFORE = HotkeyAction.SET_MARGIN_BEFORE;

export const HotkeyAction_INCREASE_MARGIN_AFTER = HotkeyAction.INCREASE_MARGIN_AFTER;
export const HotkeyAction_DECREASE_MARGIN_AFTER = HotkeyAction.DECREASE_MARGIN_AFTER;
export const HotkeyAction_TOGGLE_MARGIN_AFTER = HotkeyAction.TOGGLE_MARGIN_AFTER;
export const HotkeyAction_SET_MARGIN_AFTER = HotkeyAction.SET_MARGIN_AFTER;

export const HotkeyAction_TOGGLE_PAUSE = HotkeyAction.TOGGLE_PAUSE