import React from 'react'; import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; import browserInfo from '/imports/utils/browserInfo'; import deviceInfo from '/imports/utils/deviceInfo'; import Modal from '/imports/ui/components/common/modal/simple/component'; import _ from 'lodash'; import Styled from './styles'; import withShortcutHelper from './service'; const intlMessages = defineMessages({ title: { id: 'app.shortcut-help.title', description: 'modal title label', }, closeLabel: { id: 'app.shortcut-help.closeLabel', description: 'label for close button', }, closeDesc: { id: 'app.shortcut-help.closeDesc', description: 'description for close button', }, accessKeyNotAvailable: { id: 'app.shortcut-help.accessKeyNotAvailable', description: 'message shown in place of access key table if not supported', }, comboLabel: { id: 'app.shortcut-help.comboLabel', description: 'heading for key combo column', }, functionLabel: { id: 'app.shortcut-help.functionLabel', description: 'heading for shortcut function column', }, openoptions: { id: 'app.shortcut-help.openOptions', description: 'describes the open options shortcut', }, toggleuserlist: { id: 'app.shortcut-help.toggleUserList', description: 'describes the toggle userlist shortcut', }, togglemute: { id: 'app.shortcut-help.toggleMute', description: 'describes the toggle mute shortcut', }, togglepublicchat: { id: 'app.shortcut-help.togglePublicChat', description: 'describes the toggle public chat shortcut', }, hideprivatechat: { id: 'app.shortcut-help.hidePrivateChat', description: 'describes the hide public chat shortcut', }, closeprivatechat: { id: 'app.shortcut-help.closePrivateChat', description: 'describes the close private chat shortcut', }, openactions: { id: 'app.shortcut-help.openActions', description: 'describes the open actions shortcut', }, opendebugwindow: { id: 'app.shortcut-help.openDebugWindow', description: 'describes the open debug window shortcut', }, openstatus: { id: 'app.shortcut-help.openStatus', description: 'describes the open status shortcut', }, joinaudio: { id: 'app.audio.joinAudio', description: 'describes the join audio shortcut', }, leaveaudio: { id: 'app.audio.leaveAudio', description: 'describes the leave audio shortcut', }, raisehand: { id: 'app.shortcut-help.raiseHand', description: 'describes the toggle raise hand shortcut', }, togglePan: { id: 'app.shortcut-help.togglePan', description: 'describes the toggle pan shortcut', }, toggleFullscreen: { id: 'app.shortcut-help.toggleFullscreen', description: 'describes the toggle full-screen shortcut', }, nextSlideDesc: { id: 'app.shortcut-help.nextSlideDesc', description: 'describes the next slide shortcut', }, previousSlideDesc: { id: 'app.shortcut-help.previousSlideDesc', description: 'describes the previous slide shortcut', }, }); const CHAT_CONFIG = Meteor.settings.public.chat; const CHAT_ENABLED = CHAT_CONFIG.enabled; const ShortcutHelpComponent = (props) => { const { intl, shortcuts } = props; const { browserName } = browserInfo; const { isIos, isMacos } = deviceInfo; let accessMod = null; // different browsers use different access modifier keys // on different systems when using accessKey property. // Overview how different browsers behave: https://www.w3schools.com/jsref/prop_html_accesskey.asp switch (browserName) { case 'Chrome': case 'Microsoft Edge': accessMod = 'Alt'; break; case 'Firefox': accessMod = 'Alt + Shift'; break; default: break; } // all Browsers on iOS are using Control + Alt as access modifier if (isIos) { accessMod = 'Control + Alt'; } // all Browsers on MacOS are using Control + Option as access modifier if (isMacos) { accessMod = 'Control + Option'; } const shortcutItems = shortcuts.map((shortcut) => { if (!CHAT_ENABLED && shortcut.descId.indexOf('Chat') !== -1) return null; return ( {`${accessMod} + ${shortcut.accesskey}`} {`${intl.formatMessage(intlMessages[`${shortcut.descId.toLowerCase()}`])}`} ); }); shortcutItems.push(( Spacebar {intl.formatMessage(intlMessages.togglePan)} )); shortcutItems.push(( Enter {intl.formatMessage(intlMessages.toggleFullscreen)} )); shortcutItems.push(( Right Arrow {intl.formatMessage(intlMessages.nextSlideDesc)} )); shortcutItems.push(( Left Arrow {intl.formatMessage(intlMessages.previousSlideDesc)} )); return ( {!accessMod ?

{intl.formatMessage(intlMessages.accessKeyNotAvailable)}

: ( {intl.formatMessage(intlMessages.comboLabel)} {intl.formatMessage(intlMessages.functionLabel)} {shortcutItems} ) }
); }; ShortcutHelpComponent.defaultProps = { intl: {}, }; ShortcutHelpComponent.propTypes = { intl: PropTypes.object.isRequired, shortcuts: PropTypes.arrayOf(PropTypes.shape({ accesskey: PropTypes.string.isRequired, descId: PropTypes.string.isRequired, })).isRequired, }; export default withShortcutHelper(injectIntl(ShortcutHelpComponent));