Add clipboard feature to web app

[McGiverGim]

Simply adds the clipboard option when is being executed with PWA. Until now, it was deactivated.

[netlify]

✅ Deploy Preview for origin-betaflight-app ready!

Name	Link
🔨 Latest commit	d6e28fb
🔍 Latest deploy log	https://app.netlify.com/sites/origin-betaflight-app/deploys/661d0a4ae46229000836af32
😎 Deploy Preview	https://deploy-preview-3887--origin-betaflight-app.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[McGiverGim]

Thanks for the suggestions @chmelevskij , applied!

EDIT: It seems something is wrong, I will check it!

[nerdCopter]

how to test?
i cannot highlight anything to right-click copy.
CLI tab does not work to test Copy to Clipboard.

[haslinghuis]

Load JSON using VTX tab to test as CLI is WIP.

[nerdCopter]

Load JSON using VTX tab to test

Load from Clipboard not working for me. Chrome Version 123.0.6312.122 (Official Build) (64-bit). Debian 12; XFCE 4.18.

clipboard contents:

{
    "description": "Betaflight VTX Config file",
    "version": "1.0",
    "vtx_table": {
        "bands_list": [
            {
                "name": "BOSCAM_A",
                "letter": "A",
                "is_factory_band": false,
                "frequencies": [
                    5865,
                    5845,
                    5825,
                    5805,
                    5785,
                    5765,
                    5745,
                    5725
                ]
            },
            {
                "name": "BOSCAM_B",
                "letter": "B",
                "is_factory_band": false,
                "frequencies": [
                    5733,
                    5752,
                    5771,
                    5790,
                    5809,
                    5828,
                    5847,
                    5866
                ]
            },
            {
                "name": "FATSHARK",
                "letter": "F",
                "is_factory_band": false,
                "frequencies": [
                    5740,
                    5760,
                    5780,
                    5800,
                    5820,
                    5840,
                    5860,
                    5880
                ]
            },
            {
                "name": "RACEBAND",
                "letter": "R",
                "is_factory_band": false,
                "frequencies": [
                    5658,
                    5695,
                    5732,
                    5769,
                    5806,
                    5843,
                    5880,
                    5917
                ]
            },
            {
                "name": "IMD6    ",
                "letter": "I",
                "is_factory_band": false,
                "frequencies": [
                    5362,
                    5399,
                    5436,
                    5473,
                    5510,
                    5547,
                    5584,
                    5621
                ]
            }
        ],
        "powerlevels_list": [
            {
                "value": 25,
                "label": "25 "
            },
            {
                "value": 100,
                "label": "100"
            },
            {
                "value": 200,
                "label": "200"
            },
            {
                "value": 400,
                "label": "400"
            },
            {
                "value": 800,
                "label": "800"
            }
        ]
    }
}

[McGiverGim]

I will try tomorrow again. It worked for me yesterday, maybe some change in the code.
Thanks for your test!

More testing

[McGiverGim]

In my first tests today, I had the next error:

Failed to read clipboard contents:  DOMException: Failed to execute 'readText' on 'Clipboard': Document is not focused.

It needs to have the focus on the DOM. Looking at google this usually happens if I had the developers tools open. One workaroud is to add a simply alert('Pasting from the clipboard') before calling the read method, the DOM gets the focus and it works.

The curious is that I've removed this alert and now it works too. The error has disappeared.

@nerdCopter did you open the developers tools? If not, open them "after" pressing the paste to see if you get the same error than I posted here.

The code of the clipboard seems to be working (so this PR is ok), the only problem is that maybe we need to add some workaround to the place where it's used.

[McGiverGim]

@nerdCopter if the clipboard works, then it fails later here:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getURL')

this happens when validating the content of the clipboard with a json schema, to see if it's right. It cannot read the schema file.

[McGiverGim]

I've fixed the reading of the VTX Json Schema for PWA. Now it must work.

[nerdCopter]

a8222dcc:
The json i'm using is a file saved form VTX tab (just now). It should be valid, however, i'm getting this result with Load from Clipboard:
log: 2024-04-12 @08:08:11 -- Error while loading the VTX Config info from clipboard. Maybe the contents are not correct
opened console (afterward) to find:

[McGiverGim]

I tried with you JSON and worked for me, maybe some problem under Linux. I will try to test it again.

[McGiverGim]

I think I know what is failing, I will push a fix this afternoon...

[nerdCopter]

just in case you need: BTFL_vtxtable_20240412_080648_FOXEERF405.json

[McGiverGim]

I've pushed a commit, but it does not fix the issue... I think this is where I need help from @chmelevskij ...

The problem is loading the VTX JSON Schema, in local it works perfectly, but deployed to netlify not. I suspect that the "relative" url that I've used is not the correct way to do this. I'm a little lost with all this Vite stuff ;)

Some suggestion?

[McGiverGim]

Finally working! It was missing an entry in the VITE config, to copy the JSON Schema. Maybe someday I will learn how to work with this vite thing ;)
Thanks for all your testing @nerdCopter can you do one more test please?

[chmelevskij]

It was missing an entry in the VITE config,

I'd rather say it is living in the wrong folder 📁😆

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud

[McGiverGim]

Moved the VTX schema to the "other" resource folder. I keep thinking that the resources and locales folder must be inside the src one, but this is for another PR. The locales was not done because the way than the original Chrome APP needed to load the translations, but now I think we can move it if we want.

[github-actions]

Do you want to test this code? Here you have an automated build:
Betaflight-Configurator-Android
Betaflight-Configurator-Linux
Betaflight-Configurator-Windows
Betaflight-Configurator-macOS
WARNING: It may be unstable and result in corrupted configurations or data loss. Use only for testing!

[nerdCopter]

• it worked! (d6e28fbb)

[chmelevskij]

I keep thinking that the resources and locales folder must be inside the src one, but this is for another PR

@McGiverGim I'd rather keep it separately. Those files don't need any extra processing from vite and are never really imported/referenced other than urls in the code. So vite wouldn't know where to pick them from.

They are essentially what vite refers to as assets/public files. They need to keep the file names, paths and have no hashing.

I'd rather move them to public and use vite standart way, then have more copy stuff done in our configs.

[McGiverGim]

The problem like it is now, is that the developer must "search" for them in the tree. But if there is a "standard" folder for vite, it's ok for me to move them there. But as I said, that for a future PR.

[haslinghuis]

@chmelevskij any objections for merging this?