diff --git a/src/components/form-inputs/ShortcutInput.vue b/src/components/form-inputs/ShortcutInput.vue new file mode 100644 index 00000000..415bef27 --- /dev/null +++ b/src/components/form-inputs/ShortcutInput.vue @@ -0,0 +1,113 @@ + + + diff --git a/src/components/media/MusicButton.vue b/src/components/media/MusicButton.vue index 11bf5a47..620ed87d 100644 --- a/src/components/media/MusicButton.vue +++ b/src/components/media/MusicButton.vue @@ -73,7 +73,7 @@ import { date } from 'quasar'; import { getFileUrl, getPublicationDirectoryContents } from 'src/helpers/fs'; import { formatTime } from 'src/helpers/mediaPlayback'; import { useCurrentStateStore } from 'src/stores/current-state'; -import { computed, onMounted, ref, watch } from 'vue'; +import { computed, onMounted, onUnmounted, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; const { t } = useI18n(); @@ -127,7 +127,12 @@ const getNextSongUrl = () => { }; function playMusic() { - if (!musicPlayer.value || !musicPlayerSource.value) return; + if ( + !musicPlayer.value || + !musicPlayerSource.value || + !currentSettings.value?.enableMusicButton + ) + return; musicPlayer.value.volume = (getSettingValue('musicVolume') as number) / 100 ?? 1; musicPlayerSource.value.src = getNextSongUrl(); @@ -219,4 +224,26 @@ watch( if (!newMusicButtonEnabled) stopMusic(); }, ); + +const toggleMusicListener = (event: CustomEventInit) => { + try { + console.log('toggleMusic-update', event.detail); + if (!currentSettings.value?.enableMusicButton) return; + if (musicPlaying.value) { + stopMusic(); + } else { + playMusic(); + } + } catch (error) { + console.error(error); + } +}; + +onMounted(() => { + window.addEventListener('toggleMusic', toggleMusicListener); +}); + +onUnmounted(() => { + window.removeEventListener('toggleMusic', toggleMusicListener); +}); diff --git a/src/defaults/settings.ts b/src/defaults/settings.ts index 1d933e28..63341b8f 100644 --- a/src/defaults/settings.ts +++ b/src/defaults/settings.ts @@ -165,22 +165,22 @@ export const settingsDefinitions: SettingsItems = { shortcutMediaWindow: { depends: 'enableKeyboardShortcuts', group: 'advanced', - type: 'key', + type: 'shortcut', }, shortcutMediaPrevious: { depends: 'enableKeyboardShortcuts', group: 'advanced', - type: 'key', + type: 'shortcut', }, shortcutMediaNext: { depends: 'enableKeyboardShortcuts', group: 'advanced', - type: 'key', + type: 'shortcut', }, shortcutMusic: { depends: 'enableKeyboardShortcuts', group: 'advanced', - type: 'key', + type: 'shortcut', }, maxRes: { depends: 'enableMediaDisplayButton', diff --git a/src/helpers/keyboardShortcuts.ts b/src/helpers/keyboardShortcuts.ts index 706797bd..1ac678c0 100644 --- a/src/helpers/keyboardShortcuts.ts +++ b/src/helpers/keyboardShortcuts.ts @@ -6,11 +6,32 @@ import { SettingsValues } from 'src/types/settings'; const { registerShortcut, unregisterShortcut } = electronApi; const shortcutCallbacks: Partial void>> = { + shortcutMediaNext: () => { + console.log('shortcutMediaNext'); + }, + shortcutMediaPrevious: () => { + console.log('shortcutMediaPrevious'); + }, shortcutMediaWindow: () => { const currentState = useCurrentStateStore(); const { mediaPlayer } = storeToRefs(currentState); showMediaWindow(!mediaPlayer.value.windowVisible); }, + shortcutMusic: () => { + window.dispatchEvent(new CustomEvent('toggleMusic')); + }, +}; + +const getCurrentShortcuts = () => { + const currentState = useCurrentStateStore(); + const { currentSettings } = storeToRefs(currentState); + const shortcuts = []; + for (const shortcutName of Object.keys(shortcutCallbacks)) { + const shortcutVal = + currentSettings.value[shortcutName as keyof SettingsValues]; + if (shortcutVal) shortcuts.push(shortcutVal); + } + return shortcuts; }; const registerCustomShortcut = ( @@ -58,6 +79,7 @@ const unregisterAllCustomShortcuts = () => { }; export { + getCurrentShortcuts, registerAllCustomShortcuts, registerCustomShortcut, unregisterAllCustomShortcuts, diff --git a/src/i18n/en-US/index.json b/src/i18n/en-US/index.json index ec3e6105..9ed2f8e2 100644 --- a/src/i18n/en-US/index.json +++ b/src/i18n/en-US/index.json @@ -175,5 +175,8 @@ "you-can-also-use-the-button-below-to-browse-for-files": "You can also browse for files manually if you prefer.", "browse": "Browse", "include-audio-description": "Include videos with audio descriptions", - "filter": "Filter" + "filter": "Filter", + "clear": "Clear", + "no-key-combination": "Enter a key combination now using your keyboard.", + "enter-key-combination": "Choose a shortcut" } diff --git a/src/i18n/fr-CA/index.json b/src/i18n/fr-CA/index.json index 01e30443..3fde1422 100644 --- a/src/i18n/fr-CA/index.json +++ b/src/i18n/fr-CA/index.json @@ -358,5 +358,8 @@ "applicationConfiguration": "Configuration de l'application", "you-can-also-use-the-button-below-to-browse-for-files": "Vous pouvez également parcourir et sélectionner des fichiers manuellement, si vous le désirez.", "include-audio-description": "Inclure les vidéos avec des descriptions audio", - "filter": "Filtre" + "filter": "Filtre", + "clear": "Supprimer", + "no-key-combination": "Entrez une combinaison de touches à l'aide de votre clavier maintenant.", + "enter-key-combination": "Choisir un raccourci" } diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue index 98b39b2e..2ee87ba9 100644 --- a/src/layouts/MainLayout.vue +++ b/src/layouts/MainLayout.vue @@ -369,7 +369,10 @@ import ObsStatus from 'src/components/media/ObsStatus.vue'; // import ScenePicker from 'src/components/media/ScenePicker.vue'; import SongPicker from 'src/components/media/SongPicker.vue'; import SubtitlesButton from 'src/components/media/SubtitlesButton.vue'; -import { cleanAdditionalMediaFolder, cleanLocalStorage } from 'src/helpers/cleanup'; +import { + cleanAdditionalMediaFolder, + cleanLocalStorage, +} from 'src/helpers/cleanup'; import { getLookupPeriod } from 'src/helpers/date'; import { electronApi } from 'src/helpers/electron-api'; import { @@ -379,9 +382,7 @@ import { } from 'src/helpers/jw-media'; import { registerAllCustomShortcuts, - registerCustomShortcut, unregisterAllCustomShortcuts, - unregisterShortcut, } from 'src/helpers/keyboardShortcuts'; import { createTemporaryNotification } from 'src/helpers/notifications'; import { useAppSettingsStore } from 'src/stores/app-settings'; @@ -392,7 +393,6 @@ import { JwVideoCategory, MediaItemsMediatorItem, } from 'src/types/publications'; -import { SettingsValues } from 'src/types/settings'; import { Ref, computed, onMounted, ref, watch } from 'vue'; import { useI18n } from 'vue-i18n'; import { useRoute, useRouter } from 'vue-router'; @@ -527,27 +527,9 @@ watch( unregisterAllCustomShortcuts(); } }, -) - -watch( - () => ({ - shortcutMediaNext: currentSettings.value?.shortcutMediaNext, - shortcutMediaPrevious: currentSettings.value?.shortcutMediaPrevious, - shortcutMediaWindow: currentSettings.value?.shortcutMediaWindow, - shortcutMusic: currentSettings.value?.shortcutMusic, - }), - (newShortcuts, oldShortcuts) => { - Object.entries(oldShortcuts).forEach(([, oldShortcut]) => { - if (oldShortcut) unregisterShortcut(oldShortcut); - }); - Object.entries(newShortcuts).forEach( - ([shortcutName, newShortcut]) => { - if (newShortcut) registerCustomShortcut(shortcutName as keyof SettingsValues, newShortcut); - }, - ); - }, ); + const dateOptions = (lookupDate: string) => { const dateArray: Date[] = lookupPeriod.value.map((day) => day.date); // @ts-expect-error "A spread argument must either have a tuple type or be passed to a rest parameter." @@ -606,8 +588,8 @@ if (!migrations.value.includes('firstRun')) { } } -cleanLocalStorage() -cleanAdditionalMediaFolder() +cleanLocalStorage(); +cleanAdditionalMediaFolder(); const getLocalFiles = async () => { openFileDialog().then((result) => { diff --git a/src/pages/SettingsPage.vue b/src/pages/SettingsPage.vue index a409e949..9827b86b 100644 --- a/src/pages/SettingsPage.vue +++ b/src/pages/SettingsPage.vue @@ -143,6 +143,13 @@ currentSettings[settingId as keyof SettingsItems] as string " /> +
{{ item }}
@@ -159,6 +166,7 @@ import { storeToRefs } from 'pinia'; import DateInput from 'src/components/form-inputs/DateInput.vue'; import PathInput from 'src/components/form-inputs/PathInput.vue'; import SelectInput from 'src/components/form-inputs/SelectInput.vue'; +import ShortcutInput from 'src/components/form-inputs/ShortcutInput.vue'; import SliderInput from 'src/components/form-inputs/SliderInput.vue'; import TextInput from 'src/components/form-inputs/TextInput.vue'; import TimeInput from 'src/components/form-inputs/TimeInput.vue';