Одним из новейших и самых крутых инноваций в мире TECH/оборудования на сегодняшний день является сенсорным баром, что Apple выпустила на своем MacBook Pro в прошлом году. Поскольку эти машины стали все более популярными, все больше и больше приложений используют сенсорную панель для взаимодействия с их пользователями в новом измерении. Когда мы смотрели, что эта тенденция разворачивается, мы решили, что казалось, что забавный вызов решать себя, поскольку наш домашний проект последних нескольких месяцев, Winds 2.0, сделал свой дебют в начале этого месяца.
Когда мы продолжаем итерацию на ветрах на основе обратной связи от сообщества, теперь казалось идеальным временем для запуска поддержки для управления сенсорным баром на MacOS, на ветрах 2.1. Вступая в это, казалось, что это будет кусок пирога. Однако мы не могли быть более неправильными. Связь API между MacOS и Electrond далеко не завершена. Надеюсь, мы увидим некоторые изменения в ближайшее время для лучшей поддержки между MacOS и Electron.
На данный момент мы придумали приличное решение проблемы, которая позволяет нам общаться двунаправленно между электроном и сенсорной панелью MacOS. Для этого мы сильно опирались на три основных электронных компонента:
- (Ограниченный) сенсорный батончик API, который предоставляется электронным
- Модуль IPCMain, который обрабатывает асинхронные и синхронные сообщения, отправляемые из процесса рендерера (веб-страница)
- Модуль IPCrenderer, который предоставляет несколько методов, которые позволяют отправлять синхронные и асинхронные сообщения из процесса рендерера (веб-страницы) в основной процесс (IPCMain).
В этом посте мы сделаем глубокое погружение в то, как мы достигли этой задачи. Давай сделаем это.
Модуль IPCMain является экземпляром класса Eventemitter. При использовании в главном процессе он обрабатывает асинхронные и синхронные сообщения, отправленные из процесса рендерера (веб-страницы). Сообщения, отправленные из рендеренера, испускаются в этот модуль и подняты обработчиком событий, а затем передаются на функцию для дальнейшей обработки.
Отправить и получать от электрона
В /app/public/electron.js , мы инициализируем следующий код, как только окно будет готово показать:
ipcMain.on('media-controls', (event, args) => {
mediaControls(event, args);
});
Свойство событий указывает, что произошло, тогда как args может быть одним значением или объектом пар клавишных пар. Для ветров мы решили пойти с объектом, чтобы мы могли пройти вдоль дополнительных метаданных (из Frontend), таких как текущее название эпизода и имя подкаста.
Модуль IPCrenderer является экземпляром класса Eventemitter. Он предоставляет несколько методов, которые позволяют отправлять синхронные и асинхронные сообщения из процесса рендеринга (веб-страницы) в основной процесс (электрон).
Понимание того, как коммуникационные работы были первыми шагами в нашем путешествии, чтобы получить поддержку управления СМИ на месте. Чтобы лучше понять, как это работает, давайте посмотрим на несколько кратких примеров кода:
Отправить и получать от React
В /app/src/components/player.js , мы используем Window.ipCronderer, так как IPCrenderer не доступен непосредственно, что требует от того, чтобы мы вытащили его от окна объекта:
window.ipcRenderer.send('media-controls', {
type: 'play',
title: `${episode.title} - ${episode.podcast.title}`,
});
И
window.ipcRenderer.send('media-controls', {
type: 'pause',
});
Итак, после того, как все сказано и сделано, мы можем использовать контекст игрока для дифференцирования между воспроизведенным эпизодом и приостановленным эпизодом. Это выглядит что-то подобное:
if (isElectron()) {
if (context.playing) {
window.ipcRenderer.send('media-controls', {
type: 'play',
title: `${episode.title} - ${episode.podcast.title}`,
});
} else {
window.ipcRenderer.send('media-controls', {
type: 'pause',
});
}
}
Реагистрирование жизненных циклов событий
На ComponentDidMount () Мы используем следующий обработчик, чтобы убедиться, что наши входящие события подбираются.
Примечание. Мы обертываем наш код в проверке электронов через модуль узла IS-Electron, чтобы убедиться, что мы выполняем только это в электронной среде – это важно, потому что у нас есть веб-сайты и собственные версии приложения.
componentDidMount() {
if (isElectron()) {
window.ipcRenderer.on('media-controls', this.incomingMediaControls);
}
}
На ComponentWillunmount () Мы используем следующий обработчик, чтобы убедиться, что все слушатели уничтожены:
componentWillUnmount() {
if (isElectron()) {
window.ipcRenderer.removeAllListeners('media-controls', this.incomingMediaControls);
}
}
Как указано в предыдущей части этого поста, мы инициализируем IPCMain в нашем файле Electron .JS. Но подожди, есть еще … У нас также есть часть кода, предназначенного для обработки входящих (и исходящих) сообщений, в дополнение к переключению изображений сенсорных панелей и обработки сенсорных соревнований:
mediaControls = (event, args) => {
let next = new TouchBarButton({
icon: `${__dirname}/static/next.png`,
click: () => {
event.sender.send('media-controls', 'next');
},
});
let previous = new TouchBarButton({
icon: `${__dirname}/static/previous.png`,
click: () => {
event.sender.send('media-controls', 'previous');
},
});
let playPause = new TouchBarButton({
icon: `${__dirname}/static/pause.png`,
click: () => {
event.sender.send('media-controls', 'togglePlayPause');
},
});
let info = new TouchBarLabel({
label:
args.title && args.title.length > 40
? `${args.title.substr(0, 40) + '...'}`
: args.title,
textColor: '#FFFFFF',
});
if (args.type === 'play') {
playPause.icon = `${__dirname}/static/pause.png`;
info.label = args.title;
} else {
playPause.icon = `${__dirname}/static/play.png`;
}
let touchBar = new TouchBar([
previous,
playPause,
next,
new TouchBarSpacer({ size: 'flexible' }),
info,
new TouchBarSpacer({ size: 'flexible' }),
]);
mainWindow.setTouchBar(touchBar);
};
Эта функция должна идти в ваш файл main.js или в нашем случае Electron.js файл.
Все это собрано, дает ветры 2.1. Особенно-классная функция сенсорного бара, которая позволяет нашим пользователям приостановить и воспроизводить эпизоды подкаста на ветрах, просматривать текущий подкаст, который играет, и искать вперед и назад.
Как мы продолжаем строить приложение и Получить обратную связь Из нашего удивительного сообщества мы надеемся продолжать добавлять новые способы для пользователя взаимодействия с сенсорной баром и оставить людей, чувствуя себя приятно удивленными каждому из своих взаимодействий с ветрами.
Если вы думаете, что я что-нибудь пропустил, пожалуйста, не стесняйтесь бросить линию в комментариях ниже или найду меня в Twitter – @Nickparsons Отказ
Оригинал: “https://dev.to/nickparsons/winds-21-building-touch-bar-support-for-macos-in-electron-with-react-3lm5”