diff options
Diffstat (limited to 'packages/meshbay-hub/src/meshbay_hub/static/files-app.js')
| -rw-r--r-- | packages/meshbay-hub/src/meshbay_hub/static/files-app.js | 22 |
1 files changed, 20 insertions, 2 deletions
diff --git a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js index 38157b9..b3672c9 100644 --- a/packages/meshbay-hub/src/meshbay_hub/static/files-app.js +++ b/packages/meshbay-hub/src/meshbay_hub/static/files-app.js @@ -13,6 +13,7 @@ import { import { useStickyBand } from './sticky.js'; import { Menu, useMenu } from './menu.js'; import { askReport } from './report.js'; +import { copyLink } from './copy-link.js'; // ── Files ──────────────────────────────────────────────────────────────────── // @@ -142,12 +143,16 @@ function FilesPanel({ entries, nodeDirs, nodeRoots, setEntries, setNodeDirs, setNodeRoots, applyIndex, isNodeAdmin, operatorPaired, userId, setError, onPreview, showGroup, readOnly, getTransport, onRefreshIndex, showRefresh, onReport, + openDirectory, linkFor, }) { const [selected, setSelected] = useState(() => new Set()); const [sortKey, setSortKey] = useState('name'); const [sortAsc, setSortAsc] = useState(true); const [filter, setFilter] = useState(''); - const [currentPath, setCurrentPath] = useState(''); + const [currentPath, setCurrentPath] = useState(() => (openDirectory ? openDirectory.dir : '')); + // A link into the group named a folder (group-page.js); a new object each + // time, so the same folder linked twice is opened twice. + useEffect(() => { if (openDirectory) setCurrentPath(openDirectory.dir); }, [openDirectory]); const [refreshing, setRefreshing] = useState(false); // The toolbar pins below the page's own band and tells the column heads how // far down to pin. Its height is not a constant — it wraps to three rows on @@ -619,6 +624,14 @@ function FilesPanel({ onSelect: () => run(async () => { for (const d of dirs) await downloadDirectory(d); }, clear) }, + // One file or one folder, ticked (the toolbar, which is also how a phone + // gets at it) or under the pointer. Absent rather than disabled where + // the view can name no link at all (`linkFor` returns null). + linkFor && { key: 'link', icon: 'link', label: t('link.copy'), + disabled: files.length + dirs.length !== 1 + || !linkFor(files.length ? files[0] : dirs[0]), + onSelect: () => run( + () => copyLink(linkFor(files.length ? files[0] : dirs[0])), clear) }, mayEverDelete && !readOnly && { key: 'delete', icon: 'trash', danger: true, label: deletableCount > 1 ? t('group.delete_n', { n: deletableCount }) : t('group.delete'), disabled: status !== 'connected' || deletableCount === 0, @@ -901,7 +914,7 @@ function FilesPanel({ const IMAGE_EXTS = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico)$/i; -function FilePreview({ entry, transportRef, gekRef, onClose, onDownload }) { +function FilePreview({ entry, transportRef, gekRef, onClose, onDownload, onCopyLink }) { const [phase, setPhase] = useState('loading'); const [progress, setProgress] = useState(0); const [content, setContent] = useState(null); @@ -996,6 +1009,11 @@ function FilePreview({ entry, transportRef, gekRef, onClose, onDownload }) { }}> <div class="video-top-bar"> <span class="video-title">${entry.name} (${formatSize(entry.size)})</span> + ${onCopyLink && html` + <button class="video-close" onClick=${onCopyLink} + title="${t('link.copy')}" aria-label="${t('link.copy')}"> + <${Icon} name="link" /></button> + `} ${onDownload && html` <button class="video-close ${downloading ? 'dl-active' : ''}" onClick=${() => { |