win-click to show & play
Massimo Melina committed
Feb 4, 2024 at 00:06 UTC
8c7462ad280a02e1b15f2bfb05e3176b78287cc6
6 files changed
+21
-10
README.md
+2
-1
@@ -189,7 +189,8 @@ Some actions you can take for improved security:
189
- Appending `?overwrite` on uploads, will try override the dont_overwrite_uploading configuration, provided you also have delete permission
190
- Right-click on "check for updates" will let you input a URL of a version to install
191
- Admin: ctrl+digit will switch page
192
-- Appending ?overwrite to the URL of an upload request will overwrite existing file if you have delete permission
192
+- Appending ?overwrite to the URL of an upload request will overwrite existing file if you have delete permission
193
+- shift+click on a file will show & play
194
195
## Contribute
196
frontend/src/BrowseFiles.ts
+7
-2
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
4
import { createElement as h, Fragment, memo, MouseEvent, useCallback, useEffect, useMemo, useRef, useState,
5
useId} from 'react'
6
import { useWindowSize } from 'usehooks-ts'
7
-import { domOn, formatBytes, ErrorMsg, hIcon, onlyTruthy, noAriaTitle, prefix } from './misc'
7
+import { domOn, formatBytes, ErrorMsg, hIcon, onlyTruthy, noAriaTitle, prefix, isMac } from './misc'
8
import { Checkbox, CustomCode, Spinner } from './components'
9
import { Head } from './Head'
10
import { DirEntry, state, useSnapState } from './state'
@@ -16,6 +16,7 @@ import _ from 'lodash'
16
import { t, useI18N } from './i18n'
17
import { openFileMenu } from './fileMenu'
18
import { ClipBar } from './clip'
19
+import { fileShow } from './show'
20
21
export const MISSING_PERM = "Missing permission"
22
@@ -250,8 +251,12 @@ const Entry = memo(({ entry, midnight, separator }: EntryProps) => {
251
)
252
253
function fileMenu(ev: MouseEvent) {
253
- if (ev.altKey || ev.ctrlKey || ev.metaKey) return
254
+ // meta on link is standard on mac to open in new tab, while we use it on Windows where it is the only key that's not used on links
255
+ if (ev.altKey || ev.ctrlKey || isMac && ev.metaKey) return
256
ev.preventDefault()
257
+ const special = isMac ? ev.shiftKey : ev.metaKey
258
+ if (special)
259
+ return fileShow(entry, { startPlaying: true })
260
openFileMenu(entry, ev, onlyTruthy([
261
file_menu_on_link && 'open',
262
'delete',
frontend/src/show.ts
+7
-4
@@ -1,6 +1,6 @@
1
import { DirEntry, DirList, ext2type, state, useSnapState } from './state'
2
import { createElement as h, Fragment, useEffect, useRef, useState } from 'react'
3
-import { basename, dirname, domOn, hfsEvent, hIcon, newDialog, restartAnimation } from './misc'
3
+import { basename, dirname, domOn, hfsEvent, hIcon, isMac, newDialog, restartAnimation } from './misc'
4
import { useEventListener, useWindowSize } from 'usehooks-ts'
5
import { EntryDetails, useMidnight } from './BrowseFiles'
6
import { Btn, FlexV, iconBtn, Spinner } from './components'
@@ -15,7 +15,7 @@ enum ZoomMode {
15
contain, // leave this as last
16
}
17
18
-export function fileShow(entry: DirEntry) {
18
+export function fileShow(entry: DirEntry, { startPlaying=false } = {}) {
19
const { close } = newDialog({
20
noFrame: true,
21
className: 'file-show',
@@ -73,7 +73,7 @@ export function fileShow(entry: DirEntry) {
73
useEffect(() => { scrollY(-1E9) }, [cur])
74
75
const { auto_play_seconds } = useSnapState()
76
- const [autoPlaying, setAutoPlaying] = useState(false)
76
+ const [autoPlaying, setAutoPlaying] = useState(startPlaying)
77
const showElement = containerRef.current?.querySelector('.showing')
78
useEffect(() => {
79
if (!autoPlaying || !showElement) return
@@ -291,7 +291,10 @@ function showHelp() {
291
"S": t`Shuffle`,
292
"R": t`Repeat`,
293
"A": t`Auto-play`,
294
- }, (v,k) => h('div', { key: k }, h('kbd', {}, t('showHelp_' + k, k)), ' ', v) )
294
+ }, (v,k) => h('div', { key: k }, h('kbd', {}, t('showHelp_' + k, k)), ' ', v) ),
295
+ h('div', { style: { marginTop: '1em' } },
296
+ t('showHelpListShortcut', { key: isMac ? 'SHIFT' : 'WIN' }, "From the file list, click holding {key} to show")
297
+ )
298
)
299
})
300
}
shared/react.ts
+1
-1
@@ -108,7 +108,7 @@ export function noAriaTitle(title: string) {
108
}
109
}
110
}
111
-const isMac = navigator.platform.match('Mac')
111
+export const isMac = navigator.platform.match('Mac')
112
export function isCtrlKey(ev: KeyboardEvent) {
113
return (ev.ctrlKey || isMac && ev.metaKey) && ev.key
114
}
src/langs/hfs-lang-en.json
+2
-1
@@ -156,6 +156,7 @@
156
"go_first": "Go to first item",
157
"go_last": "Go to last item",
158
"Shuffle": "Shuffle",
159
- "Repeat": "Repeat"
159
+ "Repeat": "Repeat",
160
+ "showHelpListShortcut": "From the file list, click holding {key} to Show quickly"
161
}
162
}
src/langs/hfs-lang-it.json
+2
-1
@@ -148,6 +148,7 @@
148
"go_first": "Vai all'inizio",
149
"go_last": "Vai alla fine",
150
"Shuffle": "Riproduzione casuale",
151
- "Repeat": "Ripeti a fine lista"
151
+ "Repeat": "Ripeti a fine lista",
152
+ "showHelpListShortcut": "Dalla lista dei file, clicca tenendo {key} per accedere velocemente al File Show"
153
}
154
}