hfs 0.26.8 → 0.27.2

package/frontend/src/index.scss

@@ -1,307 +0,0 @@
-:root {
-    --bg: #fff;
-    --text: #555;
-    --faint-contrast: #0002;
-    --mild-contrast: #0005;
-    --good-contrast: #000a;
-    --button-bg: #68a;
-    --button-text: #fff;
-    --focus-color: #468;
-    .theme-dark {
-        --bg: #000;
-        --text: #999;
-        --faint-contrast: #fff2;
-        --mild-contrast: #fff5;
-        --good-contrast: #fffa;
-        --button-bg: #345;
-        --button-text: #999;
-        body { color-scheme: dark; }
-        a { color:#8ac; }
-        .dialog-closer { background: #633 }
-        .dialog-icon { color: #ccc; }
-        .dialog-backdrop { background: #333b; }
-    }
-}
-body {
-    background: var(--bg);
-    margin: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-body, button, select, input { font-size: 12pt; }
-#root {
-    max-width: 50em;
-    margin: auto;
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-}
-body, input {
-    color: var(--text);
-}
-code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
-input, select {
-    padding: 0.3em 0.4em;
-    border-radius: 0.5em;
-    background: var(--bg);
-    border-color: var(--mild-contrast);
-    color: var(--good-contrast);
-    max-width: 100%; box-sizing: border-box; // avoid scrolling
-}
-input[type=checkbox] {
-    margin: 0 1.3em 0 0.8em;
-    transform: scale(1.7);
-    accent-color: var(--button-bg);
-}
-
-.hidden { display: none !important }
-
-.icon {
-    font-size: 1.2em;
-}
-
-.icon.mirror:before { transform: scaleX(-1); }
-a {
-    text-decoration: none;
-    color: #57a;
-}
-button {
-    background-color: var(--button-bg);
-    color: var(--button-text);
-    padding: 0.5em 1em;
-    border: transparent;
-    text-decoration: none;
-    border-radius: 0.3em;
-    vertical-align: middle;
-    cursor: pointer;
-}
-button.toggled {
-    opacity: .6;
-}
-button, .breadcrumb { /* consistent focus color */
-    &:focus-visible {
-        outline: 3px solid var(--focus-color);
-    }
-}
-input, select, ul a {
-    &:focus-visible {
-        border-radius: .3em;
-        border-color: transparent;
-        outline: 2px solid var(--focus-color);
-    }
-}
-
-.error-msg {
-    background-color: #faa;
-    color: #833;
-}
-
-header {
-    position: sticky;
-    top: 0;
-    background: var(--bg);
-    padding: .2em;
-    z-index: 1; /* necessary to not be covered by checkboxes */
-}
-
-.ani-working { animation:1s blink infinite }
-
-@keyframes blink {
-    0% {opacity: 1}
-    50% {opacity: 0.2}
-}
-@keyframes spin {
-    100% { transform: rotate(360deg); }
-}
-@keyframes fade-in {
-    0% {opacity: 0}
-    100% {opacity: 1}
-}
-
-.spinner, .icon.spinner:before {
-    animation: 1.5s spin infinite linear;
-}
-.icon.emoji.spinner { display: inline-block; }
-
-.breadcrumb {
-    padding: 0.1em 0.6em 0.2em;
-    line-height: 1.8em;
-    border-radius: 0.7em;
-    background-color: var(--button-bg);
-    color: var(--button-text);
-
-    border-top: 1px solid #666;
-    margin-right: -0.1em;
-}
-.breadcrumb:nth-child(-n+3) .icon {
-    padding: 0 0.2em;
-}
-#folder-stats {
-    font-size: 90%;
-    margin: 0.4em 0 0 0.5em;
-    float: right;
-    & .icon {
-        margin-right: .3em;
-    }
-}
-header input {
-    width: 100%;
-    margin: 0.2em auto;
-    box-sizing: border-box;
-}
-#filter-bar {
-    display: flex;
-    gap: .3em;
-    margin: 0.5em 0;
-    & input { flex: 1 }
-    & button {
-        padding: 0 0.5em;
-    }
-}
-
-ul.dir {
-    flex: 1;
-    padding: 0;
-    margin: 0;
-    clear: both;
-    & li {
-        display: block;
-        list-style-type: none;
-        margin-bottom: 0.3em;
-        padding: 0.3em;
-        border-top: 1px solid var(--button-bg);
-
-        & a {
-            word-break: break-word;
-            padding-right: 0.3em;
-
-            & .icon {
-                margin-right: .3em;
-            }
-            &.container-folder:hover {
-                text-decoration: underline;
-            }
-        }
-        & .entry-props {
-            float: right;
-            font-size: 90%;
-            margin-left: 12px;
-            margin-top: 0.2em;
-
-            & .icon {
-                margin:0 .3em;
-            }
-            & .entry-size {
-                display:inline-block;
-            }
-        }
-    }
-}
-
-#menu-panel {
-    margin-bottom: 0.2em;
-
-}
-#menu-bar {
-    display: flex;
-    justify-content: space-evenly;
-    flex-wrap: wrap;
-    &>* {
-        flex: auto;
-        margin: 0.1em;
-    }
-    & button { /* no need for horizontal padding as we are using flex to grow */
-        padding-left: 0;
-        padding-right: 0;
-    }
-    &>a>button { width:100% } /* occupy whole available space */
-}
-#searched {
-    margin: .2em;
-}
-#user-panel {
-    display:flex;
-    flex-direction: column;
-    gap: 1em;
-    & a>button {
-        width: 100%;
-    }
-}
-
-button label {
-    cursor: inherit;
-    margin-left: 0.5em;
-}
-
-.dialog-backdrop.working {
-    font-size: 5em;
-    animation: 1s fade-in;
-}
-.dialog-content {
-    padding: .2em; /* give space for focus outline */
-}
-
-.dialog-confirm,
-.dialog-prompt {
-    --color: var(--button-bg);
-}
-
-#paging {
-    display: flex;
-    position: sticky;
-    bottom: 0;
-    background: var(--bg);
-    gap: .5em;
-    overflow-x: auto;
-    &>button {
-        flex: 1;
-        background: var(--button-bg);
-        text-align: center;
-    }
-}
-
-/* Works on Firefox */
-* {
-    scrollbar-width: thin;
-    scrollbar-color: var(--button-bg) var(--faint-contrast);
-}
-
-/* Works on Chrome, Edge, and Safari */
-*::-webkit-scrollbar {
-    width: 12px;
-}
-*::-webkit-scrollbar-track {
-    background: var(--faint-contrast);
-}
-*::-webkit-scrollbar-thumb {
-    background-color: var(--button-bg);
-    border-radius: 20px;
-    border: 1px solid var(--faint-contrast)
-}
-
-@media (max-width: 42em) {
-    body, button, select { font-size: 14pt; }
-    #menu-bar {
-        & button label { display: none } /* icons only */
-    }
-    #filter-bar {
-        margin: 0.2em 0;
-    }
-    #filter-bar label { display:none }
-    #filter-bar button { /* make it same size of top bar */
-        width: 17.6vw;
-        height: 2.3em;
-    }
-    .breadcrumb {
-        word-break: break-all; /* solves with very long names without spaces. 'break-word' is nicer but doesn't handle worst
-              cases like /gear/mininova/x/LOOPMASTERS%204Gig%20Pack/LOOPMASTERS_2015/BASS_HOUSE_AND_GARAGE_2_DEMOS/SOUNDS_AND_FX/
-              */
-    }
-    .breadcrumb .icon {
-        font-size:24px;
-    }
-}

package/frontend/src/index.ts

@@ -1,10 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h, StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.scss'
-import '@hfs/shared/src/min-crypto-polyfill'
-import App from './App'
-
-createRoot(document.getElementById('root')!)
-    .render( h(StrictMode, {}, h(App)) )

package/frontend/src/login.ts

@@ -1,50 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { apiCall, ApiError } from './api'
-import { state } from './state'
-import { alertDialog } from './dialog'
-import { srpSequence, working } from './misc'
-
-export async function login(username:string, password:string) {
-    const stopWorking = working()
-    return srpSequence(username, password, apiCall).then(res => {
-        stopWorking()
-        sessionRefresher(res)
-        state.loginRequired = false
-        return res
-    }, (err: Error) => {
-        stopWorking()
-        if (err.message === 'trust')
-            err = Error("Login aborted: server identity cannot be trusted")
-        else if (err instanceof ApiError)
-            if (err.code === 401)
-                err = Error("Invalid credentials")
-            else if (err.code === 409)
-                err = Error("Cookies not working - login failed")
-        return alertDialog(err)
-    })
-}
-
-// @ts-ignore
-sessionRefresher(window.SESSION)
-
-function sessionRefresher(response: any) {
-    if (!response) return
-    const { exp, username, adminUrl } = response
-    state.username = username
-    state.adminUrl = adminUrl
-    if (!username || !exp) return
-    const delta = new Date(exp).getTime() - Date.now()
-    const t = Math.min(delta - 30_000, 600_000)
-    console.debug('session refresh in', Math.round(t/1000))
-    setTimeout(() => apiCall('refresh_session').then(sessionRefresher), t)
-}
-
-export function logout(){
-    return apiCall('logout').catch(res => {
-        if (res.code === 401) // we expect 401
-            state.username = ''
-        else
-            throw res
-    })
-}

package/frontend/src/menu.ts

@@ -1,188 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { state, useSnapState } from './state'
-import { createElement as h, useEffect, useState } from 'react'
-import { useDebounce } from 'use-debounce'
-import { alertDialog, confirmDialog, ConfirmOptions, promptDialog } from './dialog'
-import { hIcon, isMobile, prefix, useStateMounted } from './misc'
-import { login } from './login'
-import { showOptions } from './options'
-import showUserPanel from './UserPanel'
-import { useNavigate } from 'react-router-dom'
-import _ from 'lodash'
-import { closeDialog } from '@hfs/shared/lib/dialogs'
-
-export function MenuPanel() {
-    const { showFilter, remoteSearch, stopSearch, stoppedSearch, patternFilter, selected } = useSnapState()
-    const [filter, setFilter] = useState(patternFilter)
-    ;[state.patternFilter] = useDebounce(showFilter ? filter : '', 300)
-    useEffect(() => {
-        if (!showFilter)
-            state.selected = {}
-    }, [showFilter])
-
-    const [started1secAgo, setStarted1secAgo] = useStateMounted(false)
-    useEffect(() => {
-        if (!stopSearch) return
-        setStarted1secAgo(false)
-        setTimeout(() => setStarted1secAgo(true), 1000)
-    }, [stopSearch, setStarted1secAgo])
-
-    //TODO do something for list > 63KB as it hit the url limit (1kb reserved for the rest for the url)
-    const list = Object.keys(selected).map(s => s.endsWith('/') ? s.slice(0,-1) : s).join('*')
-    return h('div', { id: 'menu-panel' },
-        h('div', { id: 'menu-bar' },
-            h(LoginButton),
-            h(MenuButton, {
-                icon: 'filter',
-                label: "Filter list",
-                tooltip: "Show only elements matching text you type. Works on list already got from the server. Also enables selection of files, for selective \"Download zip\".",
-                toggled: showFilter,
-                onClick() {
-                    state.showFilter = !showFilter
-                }
-            }),
-            h(MenuButton, getSearchProps()),
-            h(MenuButton, {
-                icon: 'settings',
-                label: 'Options',
-                onClick: showOptions
-            }),
-            h(MenuLink, {
-                icon: 'archive',
-                label: "Download zip",
-                tooltip: list ? "Download selected elements as a single zip file"
-                    : "Download whole list (unfiltered) as a single zip file. If you select some elements, only those will be downloaded.",
-                href: '?'+String(new URLSearchParams(_.pickBy({
-                    get: 'zip',
-                    search: remoteSearch,
-                    list
-                }))),
-                ...!list && {
-                    confirm: remoteSearch ? 'Download ALL results of this search as ZIP archive?' : 'Download WHOLE folder as ZIP archive?',
-                    confirmOptions: {
-                        afterButtons: h('button', {
-                            onClick() {
-                                state.showFilter = true
-                                closeDialog(false)
-                                return alertDialog("Use checkboxes to select the files, then you can use Download-zip again")
-                            },
-                        }, "Select some files"),
-                    }
-                }
-            })
-        ),
-        remoteSearch && h('div', { id: 'searched' },
-            (stopSearch ? 'Searching' : 'Searched') + ': ' + remoteSearch + prefix(' (', stoppedSearch && 'interrupted', ')')),
-        showFilter && h('div', { id: 'filter-bar' },
-            h('input', {
-                id: 'filter',
-                placeholder: "Type here to filter the list below",
-                autoComplete: 'off',
-                value: filter,
-                autoFocus: true,
-                onChange(ev) {
-                    setFilter(ev.target.value)
-                }
-            }),
-            !isMobile() && h(MenuButton, {
-                icon: 'check',
-                label: "Select all",
-                onClick() { workSel(() => true) }
-            }),
-            h(MenuButton, {
-                icon: 'invert',
-                label: 'Invert selection',
-                onClick() { workSel(x => !x) }
-            }),
-        )
-    )
-
-    function workSel(cb: (b:boolean) => boolean) {
-        const sel = state.selected
-        for (const { n } of state.filteredList || state.list) {
-            const was = sel[n]
-            if (was !== cb(was))
-                if (was)
-                    delete sel[n]
-                else
-                    sel[n] = true
-        }
-    }
-
-    function getSearchProps() {
-        return stopSearch && started1secAgo ? {
-            icon: 'stop',
-            label: 'Stop list',
-            className: 'ani-working',
-            onClick() {
-                stopSearch()
-                state.stoppedSearch = true
-            }
-        } : state.remoteSearch && !stopSearch ? {
-            icon: 'search_off',
-            label: 'Clear search',
-            onClick() {
-                state.remoteSearch = ''
-            }
-        } : {
-            icon: 'search',
-            label: "Search deep",
-            async onClick() {
-                state.remoteSearch = await promptDialog('Search for...') || ''
-            }
-        }
-    }
-}
-
-interface MenuButtonProps {
-    icon: string,
-    label: string,
-    tooltip?: string,
-    toggled?: boolean,
-    className?: string,
-    onClick?: () => void
-}
-
-export function MenuButton({ icon, label, tooltip, toggled, onClick, className = '' }: MenuButtonProps) {
-    return h('button', { title: tooltip || label, onClick, className: className + ' ' + (toggled ? 'toggled' : '') },
-        hIcon(icon),
-        h('label', {}, label))
-}
-
-export function MenuLink({ href, target, confirm, confirmOptions, ...rest }: MenuButtonProps & { href: string, target?: string, confirm?: string, confirmOptions?: ConfirmOptions }) {
-    return h('a', {
-        tabIndex: -1,
-        href,
-        target,
-        async onClick(ev) {
-            if (!confirm) return
-            ev.preventDefault()
-            await confirmDialog(confirm, { href, ...confirmOptions })
-        }
-    }, h(MenuButton, rest))
-}
-
-function LoginButton() {
-    const snap = useSnapState()
-    const navigate = useNavigate()
-    return MenuButton(snap.username ? {
-        icon: 'user',
-        label: snap.username,
-        onClick: showUserPanel
-    } : {
-        icon: 'login',
-        label: 'Login',
-        onClick: () => loginDialog(navigate),
-    })
-}
-
-export async function loginDialog(navigate: ReturnType<typeof useNavigate>) {
-    const user = await promptDialog('Username')
-    if (!user) return
-    const password = await promptDialog('Password', { type: 'password' })
-    if (!password) return
-    const res = await login(user, password)
-    if (res?.redirect)
-        navigate(res.redirect)
-}

package/frontend/src/misc.ts

@@ -1,54 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { createElement as h } from 'react'
-import { Spinner } from './components'
-import { newDialog } from './dialog'
-import { Icon } from './icons'
-import { Dict } from '@hfs/shared'
-export * from '@hfs/shared'
-
-export function hIcon(name: string, props?:any) {
-    return h(Icon, { name, ...props })
-}
-
-export function hError(err: Error | string | undefined) {
-    return err && h('div', { className:'error-msg' }, typeof err === 'string' ? err : err.message)
-}
-
-export function isMobile() {
-    return window.innerWidth < 800
-}
-
-let isWorking = false // we want the 'working' thing to be singleton
-export function working() {
-    if (isWorking)
-        return ()=>{} // noop
-    isWorking = true
-    return newDialog({
-        closable: false,
-        noFrame: true,
-        Content: Spinner,
-        reserveClosing: true,
-        className: 'working',
-        onClose(){
-            isWorking = false
-        }
-    })
-}
-
-export function hfsEvent(name: string, params?:Dict) {
-    const output: any[] = []
-    document.dispatchEvent(new CustomEvent('hfs.'+name, { detail:{ params, output } }))
-    return output
-}
-
-const HFS: any = (window as any).HFS = {}
-
-HFS.onEvent = (name: string, cb: (params:any, output:any) => any) => {
-    document.addEventListener('hfs.' + name, ev => {
-        const { params, output } = (ev as CustomEvent).detail
-        const res = cb(params, output)
-        if (res !== undefined && Array.isArray(output))
-            output.push(res)
-    })
-}

package/frontend/src/options.ts

@@ -1,52 +0,0 @@
-// This file is part of HFS - Copyright 2021-2022, Massimo Melina <a@rejetto.com> - License https://www.gnu.org/licenses/gpl-3.0.txt
-
-import { newDialog } from './dialog'
-import { state, useSnapState } from './state'
-import { createElement as h } from 'react'
-import { Checkbox, FlexV, Select } from './components'
-import { hIcon } from './misc'
-import { MenuLink } from './menu'
-
-export function showOptions (){
-    const options = ['name', 'extension', 'size', 'time']
-    const close = newDialog({ Content })
-
-    function Content(){
-        const snap = useSnapState()
-        return h(FlexV, {},
-            snap.adminUrl && h(MenuLink, {
-                icon: 'admin',
-                label: "Admin interface",
-                href: snap.adminUrl,
-                target: 'admin',
-            }),
-            h('div', {}, "Sort by"),
-            options.map(x => h('button',{
-                key: x,
-                onClick(){
-                    close(state.sortBy = x)
-                }
-            }, x, ' ', snap.sortBy===x && hIcon('check'))),
-            h(Checkbox, {
-                value: snap.invertOrder,
-                onChange(v) {
-                    state.invertOrder = v
-                }
-            }, "Invert order"),
-            h(Checkbox, {
-                value: snap.foldersFirst,
-                onChange(v) {
-                    state.foldersFirst = v
-                }
-            }, "Folders first"),
-
-            h(Select, {
-                options: ['', 'light', 'dark'].map(s => ({ label: "theme: " + (s || "auto"), value: s })),
-                value: snap.theme,
-                onChange(v) {
-                    state.theme = v
-                }
-            })
-        )
-    }
-}

package/frontend/src/react-app-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="react-scripts" />

package/frontend/src/reportWebVitals.ts

@@ -1,15 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-
-const reportWebVitals = (onPerfEntry?: ReportHandler) => {
-    if (onPerfEntry) {
-        import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-            getCLS(onPerfEntry);
-            getFID(onPerfEntry);
-            getFCP(onPerfEntry);
-            getLCP(onPerfEntry);
-            getTTFB(onPerfEntry);
-        });
-    }
-};
-
-export default reportWebVitals;

package/frontend/src/setupTests.ts

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';