From 73e9487ba9a8b1b166dd2819202a3306a462b956 Mon Sep 17 00:00:00 2001 From: btzr-io Date: Wed, 3 Jul 2019 22:24:33 -0600 Subject: [PATCH] add user typing detection for shorcut keys on viewer --- src/ui/component/fileViewer/index.js | 2 -- .../component/fileViewer/internal/player.jsx | 21 +++++++++---------- src/ui/component/fileViewer/view.jsx | 16 +++++--------- src/ui/util/detect-typing.js | 13 ++++++++++++ static/locales/en.json | 6 +++++- 5 files changed, 33 insertions(+), 25 deletions(-) create mode 100644 src/ui/util/detect-typing.js diff --git a/src/ui/component/fileViewer/index.js b/src/ui/component/fileViewer/index.js index 5d14bbe06..bc8fd874d 100644 --- a/src/ui/component/fileViewer/index.js +++ b/src/ui/component/fileViewer/index.js @@ -11,7 +11,6 @@ import { makeSelectFileInfoForUri, makeSelectLoadingForUri, makeSelectDownloadingForUri, - selectSearchBarFocused, makeSelectFirstRecommendedFileForUri, makeSelectClaimIsNsfw, makeSelectThumbnailForUri, @@ -34,7 +33,6 @@ const select = (state, props) => ({ volume: selectVolume(state), position: makeSelectContentPositionForUri(props.uri)(state), autoplay: makeSelectClientSetting(settings.AUTOPLAY)(state), - searchBarFocused: selectSearchBarFocused(state), fileInfoErrors: selectFileInfoErrors(state), nextFileToPlay: makeSelectFirstRecommendedFileForUri(props.uri)(state), nsfw: makeSelectClaimIsNsfw(props.uri)(state), diff --git a/src/ui/component/fileViewer/internal/player.jsx b/src/ui/component/fileViewer/internal/player.jsx index 3bc1c3eae..a63a86890 100644 --- a/src/ui/component/fileViewer/internal/player.jsx +++ b/src/ui/component/fileViewer/internal/player.jsx @@ -12,6 +12,7 @@ import path from 'path'; import player from 'render-media'; import FileRender from 'component/fileRender'; import LoadingScreen from 'component/common/loading-screen'; +import detectTyping from 'util/detect-typing'; import { fullscreenElement, requestFullscreen, exitFullscreen } from 'util/full-screen'; // Shorcut key code for fullscreen (f) @@ -31,7 +32,6 @@ type Props = { savePosition: number => void, changeVolume: number => void, viewerContainer: { current: ElementRef }, - searchBarFocused: boolean, }; type State = { @@ -96,6 +96,9 @@ class MediaPlayer extends React.PureComponent { } }, 5000); // @endif + + // Register handler for custom shortcut keys + document.addEventListener('keydown', this.handleKeyDown); } componentDidUpdate(prevProps: Props) { @@ -115,27 +118,23 @@ class MediaPlayer extends React.PureComponent { componentWillUnmount() { const mediaElement = this.mediaContainer.current.children[0]; - // Temorarily removing for comments the keydown handler needs to know - // if a user is typing - // document.removeEventListener('keydown', this.handleKeyDown); - if (mediaElement) { mediaElement.removeEventListener('click', this.togglePlay); mediaElement.removeEventListener('dbclick', this.handleDoubleClick); } + + document.removeEventListener('keydown', this.handleKeyDown); } - handleKeyDown = (event: SyntheticKeyboardEvent<*>) => { - const { searchBarFocused } = this.props; - - if (!searchBarFocused) { + handleKeyDown = (event: KeyboardEvent) => { + if (!detectTyping()) { // Handle fullscreen shortcut key (f) if (event.keyCode === F_KEYCODE) { - // this.toggleFullscreen(); + this.toggleFullscreen(); } // Handle toggle play // @if TARGET='app' - // this.togglePlay(event); + this.togglePlay(event); // @endif } }; diff --git a/src/ui/component/fileViewer/view.jsx b/src/ui/component/fileViewer/view.jsx index 500dd9f92..108b4b3d5 100644 --- a/src/ui/component/fileViewer/view.jsx +++ b/src/ui/component/fileViewer/view.jsx @@ -6,6 +6,7 @@ import classnames from 'classnames'; import analytics from 'analytics'; import LoadingScreen from 'component/common/loading-screen'; import PlayButton from './internal/play-button'; +import detectTyping from 'util/detect-typing'; const Player = React.lazy(() => import( @@ -43,7 +44,6 @@ type Props = { className: ?string, obscureNsfw: boolean, play: string => void, - searchBarFocused: boolean, mediaType: string, claimRewards: () => void, nextFileToPlay: ?string, @@ -77,9 +77,7 @@ class FileViewer extends React.PureComponent { } this.handleAutoplay(this.props); - // Commented out because it would play/pause if you were typing in the comment field - // Need a way to check if you are typing - // window.addEventListener('keydown', this.handleKeyDown); + window.addEventListener('keydown', this.handleKeyDown); } componentDidUpdate(prev: Props) { @@ -127,13 +125,11 @@ class FileViewer extends React.PureComponent { } this.props.cancelPlay(); - // window.removeEventListener('keydown', this.handleKeyDown); + window.removeEventListener('keydown', this.handleKeyDown); } - handleKeyDown(event: SyntheticKeyboardEvent<*>) { - const { searchBarFocused } = this.props; - - if (!searchBarFocused) { + handleKeyDown(event: KeyboardEvent) { + if (!detectTyping()) { if (event.keyCode === SPACE_BAR_KEYCODE) { event.preventDefault(); // prevent page scroll this.playContent(); @@ -233,7 +229,6 @@ class FileViewer extends React.PureComponent { mediaType, insufficientCredits, viewerContainer, - searchBarFocused, thumbnail, nsfw, } = this.props; @@ -294,7 +289,6 @@ class FileViewer extends React.PureComponent { onStartCb={this.onFileStartCb} onFinishCb={this.onFileFinishCb} playingUri={playingUri} - searchBarFocused={searchBarFocused} viewerContainer={viewerContainer} /> diff --git a/src/ui/util/detect-typing.js b/src/ui/util/detect-typing.js new file mode 100644 index 000000000..4c7635ec5 --- /dev/null +++ b/src/ui/util/detect-typing.js @@ -0,0 +1,13 @@ +// A simple function to detect if a user is typing: +// useful when hanlding shorcut keys. + +export default function detectTyping() { + const activeElement = document.activeElement; + + if (activeElement) { + const elementType = activeElement.tagName.toLowerCase(); + return elementType === 'input' || elementType === 'textarea'; + } + + return false; +} diff --git a/static/locales/en.json b/static/locales/en.json index 86ebc1126..1e077b038 100644 --- a/static/locales/en.json +++ b/static/locales/en.json @@ -479,5 +479,9 @@ "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we have a cool idea for channel edits in the future. We just wanted to release a very very very basic version that just barely kinda works so people can use", "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use", "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version in the works.", - "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on." + "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.": "We know this page won't win any design awards, we just wanted to release a very very very basic version that just barely kinda works so people can use it right now. There is a much nicer version being worked on.", + "Got it!": "Got it!", + "Filter": "Filter", + "Rendering document.": "Rendering document.", + "Sorry, looks like we can't load the document.": "Sorry, looks like we can't load the document." } \ No newline at end of file -- 2.45.3