User Menu Cookbook

User Menu is a power feature of Cloud Commander that was added in v12.2.0.

If you create file .cloudcmd.menu.js in the HOME or any top-level directory, it will be used when you press F2.

Here you can find ready to use scripts for your user menu. You can combine them in any way, and also add yours 😉.

Rename file

The simplest way to show rename file dialog.

export default {
    'F2 - Rename file': async ({DOM}) => {
        await DOM.renameCurrent();
    },
};

Change directory

export default {
    'R - cd /': async ({CloudCmd}) => {
        await CloudCmd.changeDir('/');
    },
    'H - cd ~': async ({CloudCmd}) => {
        await CloudCmd.changeDir('/Users/coderaiser');
    },
}

Copy URL to current file

export default {
    'F6 - Copy URL to Current File': async ({DOM}) => {
        const {path} = DOM.CurrentInfo;
        const url = `${window.location.href}${path}`;
        const {default: clipboard}  = await import('https://cdn.skypack.dev/@cloudcmd/clipboard');
        
        await clipboard.writeText(url); 
    }
}

Convert YouTube to mp3

export default {
     'Y - Youtube to mp3': async ({CloudCmd, DOM}) => {
        const {View} = CloudCmd;
        const {Dialog} = DOM;
        
        const [, url] = await Dialog.prompt('YouTube URL:');
        
        if (!url)
            return;
        
        const {default: createElement}  = await import('https://cdn.skypack.dev/@cloudcmd/create-element')
        
        const element = createElement('iframe', {
            id: 'youtube-to-mp3',
            width: '100%',
            height: '100%',
            src: `https://convert2mp3s.com/api/single/mp3?url=${url}`,
            allowtransparency:"true" ,
            scrolling: 'no',
            style: 'border: none;',
            notAppend: true,
        });
        
        createElement('style', {
            parent: document.head,
            dataName: 'youtube-to-mp3-style',
            textContent: `
                .view:has(#youtube-to-mp3) {
                    overflow: hidden
                }
            `
        });
        
        await View.show(element, {
            autoSize: true,
        });
    },
}

Convert *.flac or *.mp4 to *.mp3 and put to mp3 directory.

Simple example of running bash scripts with help of TerminalRun.

const isMp3 = (a) => /\.mp3$/.test(a);

export default {
    'F - Convert flac to mp3': async ({DOM, CloudCmd}) => {
        const command = 'for f in *.flac; do ffmpeg -vsync 2 -i "$f" -b:a 320k "${f%flac}mp3"; done';
        await convert(command, {
            DOM,
            CloudCmd,
        });
    },
    'M - Convert mp4 to mp3': async ({DOM, CloudCmd}) => {
        const command = 'for f in *.mp4; do ffmpeg -i "$f" "${f%mp4}mp3"; done';
        await convert(command, {
            DOM,
            CloudCmd,
        });
    },
};

async function convert(command, {DOM, CloudCmd}) {
    const {IO, Dialog, CurrentInfo} = DOM;

    const root = CloudCmd.config('root');
    const cwd = `${root}${CurrentInfo.dirPath}`;

    const exitCode = await CloudCmd.TerminalRun.show({
        cwd,
        command: `bash -c '${command}'`,
    });

    if (exitCode === -1)
        return Dialog.alert(`☝️ Looks like Terminal is disabled, start Cloud Coammnder with '--terminal' flag.`);

    if (exitCode)
        return Dialog.alert(`☝️ Looks like something bad happend. Exit code: ${exitCode}`);

    await CloudCmd.refresh();

    const names = DOM.getFilenames(CurrentInfo.files);
    const mp3Names = names.filter(isMp3);

    const from = CurrentInfo.dirPath;
    const to = `${from}mp3`

    await IO.move(from, to, mp3Names);
    await CloudCmd.refresh();
}

Create User Menu File

This is how you can create .cloudcmd.menu.js file.

export default {
    'C - Create User Menu File': async ({DOM, CloudCmd}) => {
        const {CurrentInfo} = DOM;
        
        const {dirPath} = CurrentInfo;
        const path = `${dirPath}.cloudcmd.menu.js`;
        const {prefix} = CloudCmd;
        
        const data = await readDefaultMenu({prefix});
        await createDefaultMenu({
            path,
            data,
            DOM,
            CloudCmd,
        });
    },
};

async function createDefaultMenu({path, data, DOM, CloudCmd}) {
    const {IO} = DOM;
    
    await IO.write(path, data);
    await CloudCmd.refresh();
    
    DOM.setCurrentByName('.cloudcmd.menu.js');
    
    await CloudCmd.EditFile.show();
}

async function readDefaultMenu({prefix}) {
    const res = await fetch(`${prefix}/api/v1/user-menu/default`);
    const data = await res.text();
    
    return data;
}

Compare Directories

export default { 
    'D - Compare directories': async ({DOM}) => {
        const {
            CurrentInfo,
            getFilenames,
            getCurrentByName,
            selectFile,
        } = DOM;
        
        const {
            files,
            filesPassive,
            panel,
            panelPassive,
        } = CurrentInfo;

        const names = getFilenames(files);
        const namesPassive = getFilenames(filesPassive);

        const selectedNames = compare(names, namesPassive);
        const selectedNamesPassive = compare(namesPassive, names);

        selectNames(selectedNames, panel, {
            selectFile,
            getCurrentByName,
        });

        selectNames(selectedNamesPassive, panelPassive, {
            selectFile,
            getCurrentByName,
        });
    },
}

function selectNames(names, panel, {selectFile, getCurrentByName}) {
    for (const name of names) {
        const file = getCurrentByName(name, panel);
        selectFile(file);
    }
};

function compare(a, b) {
    const result = [];

    for (const el of a) {
        if (b.includes(el))
            continue;

        result.push(el);
    }

    return result;
}

Execute Npm Script

export default {
    'D - Build Dev': async ({CloudCmd}) => {
        await CloudCmd.TerminalRun.show({
            command: 'npm run build:client:dev',
            autoClose: false,
            // custom close message
            closeMessage: 'Press any button to close Terminal',
        });

        await CloudCmd.refresh();
    },
    'P - Build Prod': async ({CloudCmd}) => {
        await CloudCmd.TerminalRun.show({
            command: 'npm run build:client',
            // close window when done
            autoClose: true,
        });

        await CloudCmd.refresh();
    },
}