Add Shortcuts #958

narickmann · 2022-08-17T11:58:35Z

added overview page for shortcuts
added shortcuts
added translations for shortcuts

I'm not quite sure how intuitive the implemented shortcuts for Studio are.
Please let me know if you know better/intuitive shortcuts or if you miss some.

- Added overview page for shortcuts - added shortcuts - added translations for shortcuts

Now fixed: When an input field was focused, you could not use shortcuts. - in addition: had to change the shortcut for uploading a video to opencast from 'Ctrl+u' to 'Alt+u', because 'ctrl+u' opens the page source code in a new tab.

LukasKalbertodt

Sorry for the long delay in reviewing this! I also only managed to do a quick review and test. But better than nothing!

I left a few inline comments, but I have additional comments from testing it. In random order:

Shortcut overview page
- The shortcut overview is quite "large" and somewhat breaks on screens widths < 480px. Maybe reduce the space between entries and also reduce the padding in the div that displays the key?
- Not sure <th> is the right choice for these headings.
- Not sure <table> is the right choice there, given that you use display: flex anyway. I think screenreader and stuff doesn't treat it as a table anymore then, so you can also just use a <div>?
- Some entries have three columns in total. Not sure I would do it like that. In particular, it would be nice if for example the "shift del" part of "Delete left crop marker" could could break into a new line on small screens, which is not currently possible.
Choice of shortcuts
- Alternative: use 1, 2, 3 for the choices (video and audio source). Then there are fewer different shortcuts.
- Maybe show the shortcut on the buttons when pressing "alt"? Like Windows does in many programs.
- ctrl+enter is already used by browser to open a selected link in a new tab, so it doesnt work in chrome. Neither does ctrl+backspace.
- Cut: maybe pos1 and end?
- Left/right arrow keys for next/back buttons
After selecting camera, I'm not sure how to proceed with shortcuts alone (without tab).
Menu at top is very wide now, already breaking for screen sizes <660px, which is problematic. I don't have a good fix for this except maybe putting the links to shortcuts (and info?) into settings? But I guess the proper solution is redesign of that section? Unfortunately, the design proposed by Lisa does not really address that. Except for removing the "recording" entry. Maybe one could remove the label and only show the icon for small screen sizes? But then we certainly want toolstips with the label instead.

src/i18n/locales/de.json

src/ui/settings/opencast.js

src/ui/studio/recording/recording-controls.js

src/ui/studio/review/index.js

src/ui/studio/save-creation/index.js

src/ui/studio/video-setup/prefs.js

src/ui/studio/keyboard-shortcuts/globalKeys.js

- indentations - added/removed spaces and braces

github-actions · 2022-10-04T08:26:05Z

This pull request has conflicts ☹
Please resolve those so we can review the pull request.
Thanks.

- Overview-page is no longer a table - Space between entries is reduced - so the overview is "smaller" and fits better - splitted the keyMap into seperate groups

- added 'defaultKeyEvent: keydown' to config and removed it from the keyMaps - added 'ignoreKeymapAndHandlerChangesByDefault: false' to config so 'allowChanges={true}' does not have to be passed in the <GlobalHotKeys> component each time

- fpsInfo is not stored in localstorage anymore - removed "getElementsByClassName" and replaced it with querySelector and adjusted the loop used by this

- not needed anymore due to last commit

- new/changed shortcuts should now be easier to memorize, there are fewer different shortcuts - now 1, 2 and 3 for choices (when selecting video and audio source) - changed shortcuts for cutting (setting a crop mark) and deleting that crop mark - shortcuts for next and back buttons changed, because they were used by browsers

- Due to new header entry "shortcuts" the header is very large. Now it shows only icons on small screens (screen width < 750px) and Icons with text on large screens

- Resolved conflicts

LukasKalbertodt

Generally good changes, but I now reviewed in a bit more detail and found quite a few things that should still be fixed. For some style things (like missing semicolon or wrong spacing), I haven't marked every occurrence, so it would be great if you could go over the changes again and add missing semicolons for example. Same goes for the getElementById (see relevant comment below). It would also be great if commit message of new commits could follow the rules we recently talked about internal (i.e. this blog post).

Sorry if many of these comments seem very nitpicky, but I do think we should stick to the code style already present. Though I agree Studio could use a better lint-config and/or formatter so that following the style is easier (and CI can flag violations automatically).

I have tested briefly and everything seems to work! I do need a bit more testing before merging this, but that can wait for the next round of reviews.

src/ui/studio/keyboard-shortcuts/globalKeys.js

src/ui/studio/keyboard-shortcuts/shortcuts.js

LukasKalbertodt · 2022-11-10T16:43:57Z

src/ui/studio/review/index.js

+    var deleteLeft = document.getElementById("deleteLeft");
+    var deleteRight = document.getElementById("deleteRight");


Getting references to elements in the DOM this way is very unidiomatic in React. This should be solved by a ref. Giving elements some IDs and then retrieving them that way is very error prone and breaks as soon as some IDs conflict or when one of those strings is not updated.

This applies to several other places as well. In some it's easier to fix as the relevant component/DOM element is rendered by the same component (like here). In other places it's a bit harder and would require passing around refs. At least in the former cases, this should be improved.

LukasKalbertodt · 2022-11-10T16:44:49Z

src/ui/studio/review/index.js

+      if (deleteLeft !== null){
+        deleteLeft.click();
+      }


Suggested change

if (deleteLeft !== null){

deleteLeft.click();

}

deleteLeft?.click();

Same below

src/ui/studio/video-setup/prefs.js

src/ui/header.js

At a screen width of 742px only the icons are now displayed in the header menu and the text is hidden. The 742px are based on the French language (the header is the widest in French) and at a screen width of 742px the last header entry ("Info") disappears. A group of shortcuts no longer has a fixed width. EXCEPT from a screen width of 350px. At about this width, it starts to look too tight and squashed. Therefore the groups are then 300px wide. So it still looks nice with a width of 320px (300px for shortcuts and 10px margin per side).

Implemented as suggested. Couldn't figure out how to replace getElementById("deleteLeft") and getElementById("deleteRight") with references. Will keep trying, it's the last code related suggestion (besides code style/formatting suggestions).

Hopefully addressed all issues related to formatting like missing semicolons, spaces and indentations. Looked up all classes with changes from this PR.

…inding When skipping 5 seconds or a frame (in the review view) and the current time goes beyond the video duration or is below 0 seconds, the video reference is undefined. Solved it by simply checking if the reference is undefined.

Will resolve eslint-errors in next commit

With a screen width of 575px and less, the "menu" button appears, but the text in its dropdown list is hidden. This is caused from the media-query implementet earlier ([see this commit](elan-ev@6b69f55#diff-1530ee2c8b03d767ee576f99d6e76f63ef0ac5d2884bbc11e79780fd5cc3ee59)) I added a second media query that shows the text again, when the dropdown menu appears (Not sure if this is the right way to do this)

LukasKalbertodt

My comments were all addressed as far as I can tell. So I think it's finally time to merge this :D

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Sep 1, 2022

This comment was marked as resolved.

Sign in to view

Added Shortcuts

8a69cfe

- Added overview page for shortcuts - added shortcuts - added translations for shortcuts

narickmann force-pushed the keyboard-shortcuts branch from 8328631 to 8a69cfe Compare September 7, 2022 06:47

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Sep 7, 2022

Small fix

d596dfc

Now fixed: When an input field was focused, you could not use shortcuts. - in addition: had to change the shortcut for uploading a video to opencast from 'Ctrl+u' to 'Alt+u', because 'ctrl+u' opens the page source code in a new tab.

LukasKalbertodt requested changes Sep 15, 2022

View reviewed changes

Code formatting

a3adbff

- indentations - added/removed spaces and braces

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Oct 4, 2022

narickmann added 2 commits October 7, 2022 10:25

Reworked shortcuts overview page

cca9441

- Overview-page is no longer a table - Space between entries is reduced - so the overview is "smaller" and fits better - splitted the keyMap into seperate groups

Small change for globalKeys-config

9b45e67

- added 'defaultKeyEvent: keydown' to config and removed it from the keyMaps - added 'ignoreKeymapAndHandlerChangesByDefault: false' to config so 'allowChanges={true}' does not have to be passed in the <GlobalHotKeys> component each time

lkiesow added the type:accessibility This would help impaired users label Oct 12, 2022

narickmann added 5 commits October 19, 2022 09:19

Proposed changes

334b46c

- fpsInfo is not stored in localstorage anymore - removed "getElementsByClassName" and replaced it with querySelector and adjusted the loop used by this

removed className="videoToDownload"

8871671

- not needed anymore due to last commit

Header adjusted

7ff640c

- Due to new header entry "shortcuts" the header is very large. Now it shows only icons on small screens (screen width < 750px) and Icons with text on large screens

Merge remote-tracking branch 'upstream/master' into keyboard-shortcuts

1fa9efb

- Resolved conflicts

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Oct 28, 2022

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Nov 7, 2022

This comment was marked as resolved.

Sign in to view

LukasKalbertodt requested changes Nov 10, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/master' into keyboard-shortcuts

7fb3b22

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Nov 14, 2022

narickmann added 4 commits December 8, 2022 17:07

Address code related review comments

bf9e206

Implemented as suggested. Couldn't figure out how to replace getElementById("deleteLeft") and getElementById("deleteRight") with references. Will keep trying, it's the last code related suggestion (besides code style/formatting suggestions).

Address code style/formatting review comments

c9b511e

Hopefully addressed all issues related to formatting like missing semicolons, spaces and indentations. Looked up all classes with changes from this PR.

github-actions bot added the status:conflicts Conflicts with another pull request or issue label Dec 23, 2022

This comment was marked as resolved.

Sign in to view

Merge remote-tracking branch 'upstream/master' into keyboard-shortcuts

d5afd14

github-actions bot added status:conflicts Conflicts with another pull request or issue and removed status:conflicts Conflicts with another pull request or issue labels Jan 4, 2023

This comment was marked as resolved.

Sign in to view

Merge remote-tracking branch 'upstream/master' into keyboard-shortcuts

73c66cf

Will resolve eslint-errors in next commit

github-actions bot removed the status:conflicts Conflicts with another pull request or issue label Jan 4, 2023

Fix eslint related errors

c290ce8

narickmann changed the title ~~Added Shortcuts~~ Add Shortcuts Jan 4, 2023

LukasKalbertodt approved these changes Jan 9, 2023

View reviewed changes

LukasKalbertodt merged commit 4aea2e4 into elan-ev:master Jan 9, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Shortcuts #958

Add Shortcuts #958

narickmann commented Aug 17, 2022

This comment was marked as resolved.

LukasKalbertodt left a comment

github-actions bot commented Oct 4, 2022

This comment was marked as resolved.

LukasKalbertodt left a comment

LukasKalbertodt Nov 10, 2022

LukasKalbertodt Nov 10, 2022

This comment was marked as resolved.

This comment was marked as resolved.

LukasKalbertodt left a comment

		var deleteLeft = document.getElementById("deleteLeft");
		var deleteRight = document.getElementById("deleteRight");

Add Shortcuts #958

Add Shortcuts #958

Conversation

narickmann commented Aug 17, 2022

This comment was marked as resolved.

LukasKalbertodt left a comment

Choose a reason for hiding this comment

github-actions bot commented Oct 4, 2022

This comment was marked as resolved.

LukasKalbertodt left a comment

Choose a reason for hiding this comment

LukasKalbertodt Nov 10, 2022

Choose a reason for hiding this comment

LukasKalbertodt Nov 10, 2022

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

LukasKalbertodt left a comment

Choose a reason for hiding this comment