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.

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 6 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
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
Next Next commit
add inline hotkeys discovery
DavidSM100 committed Nov 26, 2024
commit a7f04b5f00c5a8a0c9a2d43bc05d21b890bb3e66
173 changes: 164 additions & 9 deletions src/entry-points/popup/App.svelte
Original file line number Diff line number Diff line change
@@ -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 { Props } from 'tippy.js';
DavidSM100 marked this conversation as resolved.
Show resolved Hide resolved
// See ./popup.css. Would be cool to do this at build-time
if (BUILD_DEFINITIONS.BROWSER === 'chromium') {
@@ -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]
@@ -438,14 +468,68 @@ 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 {
DavidSM100 marked this conversation as resolved.
Show resolved Hide resolved
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', '');
DavidSM100 marked this conversation as resolved.
Show resolved Hide resolved
if (actionHotkeys.length !== i + 1) {
actionString += ', ';
}
});
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<Props> = {};
if (commandsPromise) {
commandsPromise.then(commands => {
commands.forEach(command => {
if (command.name === 'toggle_enabled') {
toggleExtensionTooltip = {
content: getMessage("toggle") + ': ' + 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}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is never nullish, is it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well, I did this some time ago, I don't remember well, I think it might be, I remember I got an empty tooltip while testing which created the need to use | null to get not tooltip in these cases, I should have probably added a comment about this.
Thinking about it now I don't think it will be nulish ever except in Android where the commands API is not supported.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not merge yet, let me check out the code and docs and see if there is any other reason to keep this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed the "|| null", seems like it is not necessary.

>
<!-- 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.
@@ -481,7 +565,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("increase")) +
getActionString(HotkeyAction_DECREASE_VOLUME, getMessage("decrease"));
if (hotkeysString) {
tooltip += '\n' + hotkeysString;
}

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
>
@@ -823,7 +916,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("increase")) +
getActionString(HotkeyAction_DECREASE_VOLUME_THRESHOLD, getMessage("decrease")) +
getActionString(HotkeyAction_TOGGLE_VOLUME_THRESHOLD, getMessage("toggle")) +
getActionString(HotkeyAction_SET_VOLUME_THRESHOLD, getMessage("set"));

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

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
@@ -843,7 +948,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("increase")) +
getActionString(HotkeyAction_DECREASE_SOUNDED_SPEED, getMessage("decrease")) +
getActionString(HotkeyAction_TOGGLE_SOUNDED_SPEED, getMessage("toggle")) +
getActionString(HotkeyAction_SET_SOUNDED_SPEED, getMessage("set"));

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

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
@@ -860,12 +977,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("increase")) +
getActionString(HotkeyAction_DECREASE_SILENCE_SPEED, getMessage("decrease")) +
getActionString(HotkeyAction_TOGGLE_SILENCE_SPEED, getMessage("toggle")) +
getActionString(HotkeyAction_SET_SILENCE_SPEED, getMessage("set"));

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

return tooltip;

},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
@@ -876,7 +1007,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("increase")) +
getActionString(HotkeyAction_DECREASE_MARGIN_BEFORE, getMessage("decrease")) +
getActionString(HotkeyAction_TOGGLE_MARGIN_BEFORE, getMessage('toggle')) +
getActionString(HotkeyAction_SET_MARGIN_BEFORE, getMessage('set'));

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

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
@@ -887,7 +1030,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("increase")) +
getActionString(HotkeyAction_DECREASE_MARGIN_AFTER, getMessage("decrease")) +
getActionString(HotkeyAction_TOGGLE_MARGIN_AFTER, getMessage("toggle")) +
getActionString(HotkeyAction_SET_MARGIN_AFTER, getMessage('set'));

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

return tooltip;
},
theme: tippyThemeMyTippyAndPreLine,
}}
/>
28 changes: 28 additions & 0 deletions src/hotkeys/HotkeyAction.ts
Original file line number Diff line number Diff line change
@@ -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