feat: add "i" as shortcut to open media (#1890)

fixes #1883

src/routes/_components/ShortcutHelpInfo.html

@@ -41,11 +41,12 @@
       <li><kbd>f</kbd> to favorite</li>
       <li><kbd>b</kbd> to boost</li>
       <li><kbd>r</kbd> to reply</li>
+      <li><kbd>i</kbd> to open images, video, or audio</li>
+      <li><kbd>y</kbd> to show or hide sensitive media</li>
       <li><kbd>m</kbd> to mention the author</li>
       <li><kbd>p</kbd> to open the author's profile</li>
       <li><kbd>l</kbd> to open the card's link in a new tab</li>
       <li><kbd>x</kbd> to show or hide text behind content warning</li>
-      <li><kbd>y</kbd> to show or hide sensitive media</li>
     </ul>
   </div>
   <h2>Media</h2>

src/routes/_components/status/StatusMediaAttachments.html

@@ -40,6 +40,9 @@
 {:else}
   <MediaAttachments {mediaAttachments} {sensitive} {sensitiveShown} {uuid} />
 {/if}
+{#if enableShortcuts}
+  <Shortcut scope={shortcutScope} key="i" on:pressed="showFirstMedia()" />
+{/if}
 <style>
   .status-sensitive-media-container {
     grid-area: media;
@@ -167,6 +170,7 @@
   import { store } from '../../_store/store'
   import { registerClickDelegate } from '../../_utils/delegate'
   import { classname } from '../../_utils/classname'
+  import { importShowMediaDialog } from '../dialog/asyncDialogs/importShowMediaDialog'
 
   export default {
     oncreate () {
@@ -229,6 +233,11 @@
           })
         }
         return true
+      },
+      async showFirstMedia () {
+        const { mediaAttachments } = this.get()
+        const showMediaDialog = await importShowMediaDialog()
+        showMediaDialog(mediaAttachments, 0)
       }
     }
   }

tests/spec/025-shortcuts-status.js

@@ -9,7 +9,7 @@ import {
   getNthStatusSpoiler,
   getUrl, modalDialog,
   scrollToStatus,
-  isNthStatusActive, getActiveElementRectTop, scrollToTop, isActiveStatusPinned
+  isNthStatusActive, getActiveElementRectTop, scrollToTop, isActiveStatusPinned, getFirstModalMedia
 } from '../utils'
 import { homeTimeline } from '../fixtures'
 import { loginAsFoobar } from '../roles'
@@ -95,7 +95,7 @@ test('Shortcut x shows/hides spoilers', async t => {
     .expect(getNthStatusContent(1 + idx).hasClass('shown')).notOk()
 })
 
-test('Shortcut y shows/hides sensitive image', async t => {
+test('Shortcut y shows/hides sensitive image, i opens', async t => {
   const idx = homeTimeline.findIndex(_ => _.content === "here's a secret kitten")
   await loginAsFoobar(t)
   await t
@@ -109,6 +109,8 @@ test('Shortcut y shows/hides sensitive image', async t => {
     .expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^http:\/\//)
     .pressKey('y')
     .expect(getNthStatusMediaImg(1 + idx).getAttribute('src')).match(/^blob:http:\/\/localhost/)
+    .pressKey('i')
+    .expect(getFirstModalMedia().getAttribute('alt')).eql('kitten')
 })
 
 test('Shortcut f toggles favorite status', async t => {

tests/utils.js

@@ -301,6 +301,10 @@ export const getScrollTop = exec(() => {
   return document.scrollingElement.scrollTop || 0
 })
 
+export function getFirstModalMedia () {
+  return $('.modal-dialog .media-container img')
+}
+
 export function getNthMediaAltInput (n) {
   return $(`.compose-box .compose-media:nth-child(${n}) .compose-media-alt textarea`)
 }