Merge pull request #2604 from lbryio/fullscreen-fix
Enable viewer shortcut keys
This commit is contained in:
commit
dc69d41ccf
5 changed files with 33 additions and 25 deletions
|
@ -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),
|
||||
|
|
|
@ -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<any> },
|
||||
searchBarFocused: boolean,
|
||||
};
|
||||
|
||||
type State = {
|
||||
|
@ -96,6 +96,9 @@ class MediaPlayer extends React.PureComponent<Props, State> {
|
|||
}
|
||||
}, 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<Props, State> {
|
|||
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
|
||||
}
|
||||
};
|
||||
|
|
|
@ -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<Props> {
|
|||
}
|
||||
|
||||
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<Props> {
|
|||
}
|
||||
|
||||
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<Props> {
|
|||
mediaType,
|
||||
insufficientCredits,
|
||||
viewerContainer,
|
||||
searchBarFocused,
|
||||
thumbnail,
|
||||
nsfw,
|
||||
} = this.props;
|
||||
|
@ -294,7 +289,6 @@ class FileViewer extends React.PureComponent<Props> {
|
|||
onStartCb={this.onFileStartCb}
|
||||
onFinishCb={this.onFileFinishCb}
|
||||
playingUri={playingUri}
|
||||
searchBarFocused={searchBarFocused}
|
||||
viewerContainer={viewerContainer}
|
||||
/>
|
||||
</Suspense>
|
||||
|
|
13
src/ui/util/detect-typing.js
Normal file
13
src/ui/util/detect-typing.js
Normal file
|
@ -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;
|
||||
}
|
|
@ -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."
|
||||
}
|
Loading…
Reference in a new issue