Merge pull request #2604 from lbryio/fullscreen-fix

Enable viewer shortcut keys
This commit is contained in:
Sean Yesmunt 2019-07-05 11:12:03 -04:00 committed by GitHub
commit dc69d41ccf
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 33 additions and 25 deletions

View file

@ -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),

View file

@ -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
}
};

View file

@ -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>

View 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;
}

View file

@ -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."
}