jon/web-dslr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bunch of updates in preparation for publish

Browse Source
This commit is contained in:
Ingvar Stepanyan
2023-08-05 18:46:26 +01:00
parent a4052aef92
commit c80c04f006
23 changed files with 486 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
examples/preact/build
View File

@@ -1 +0,0 @@
../../build

1
examples/preact/index.html
View File

@@ -43,6 +43,7 @@
<script type="importmap">
{
"imports": {
"web-gphoto2": "../../src/camera.js",
"preact": "https://unpkg.com/preact@10.6.4/dist/preact.module.js",
"preact/debug": "https://unpkg.com/preact@10.6.4/debug/dist/debug.module.js",
"preact/devtools": "https://unpkg.com/preact@10.6.4/devtools/dist/devtools.module.js",

88
examples/preact/index.js
View File

@@ -18,29 +18,21 @@
import { h, render, Component } from 'preact';
import { CaptureButton } from './capture-button.js';
import { connect, rethrowIfCritical } from './ops.js';
import { Camera, rethrowIfCritical } from 'web-gphoto2';
import { Preview } from './preview.js';
import { Widget } from './widget.js';
/** @typedef {import('./build/libapi.mjs').Context} Context */
/** @typedef {import('./build/libapi.mjs').Config} Config */
/** @typedef {import('./ops.js').Connection} Connection */
export const isDebug = new URLSearchParams(location.search).has('debug');
if (isDebug) {
// @ts-ignore
await import('preact/debug');
}
/** @typedef {{ type: 'CameraPicker' } | { type: 'Status', message: string } | { type: 'Config', config: Config }} AppState */
const INTERFACE_CLASS = 6; // PTP
const INTERFACE_SUBCLASS = 1; // MTP
/** @extends Component<null, AppState> */
/** @extends Component<{}, AppState> */
class App extends Component {
/** @type {Connection} */
connection;
/** @type {Camera | undefined} */
camera;
componentDidMount() {
addEventListener('error', ({ message }) =>
@@ -52,9 +44,9 @@ class App extends Component {
addEventListener(
'beforeunload',
() => {
if (!this.connection) return;
this.connection.disconnect();
this.connection = undefined;
if (!this.camera) return;
this.camera.disconnect();
this.camera = undefined;
},
{ once: true }
);
@@ -66,39 +58,45 @@ class App extends Component {
selectDevice = async () => {
// @ts-ignore
await navigator.usb.requestDevice({
filters: [
{
classCode: INTERFACE_CLASS,
subclassCode: INTERFACE_SUBCLASS
}
]
});
await Camera.showPicker();
this.setState({ type: 'Status', message: '⌛ Connecting...' });
await this.tryToConnectToCamera();
};
async tryToConnectToCamera() {
/** @type {Camera} */
let camera;
try {
this.connection = await connect();
camera = new Camera();
await camera.connect();
} catch (e) {
console.warn(e);
this.setState({ type: 'CameraPicker' });
return;
}
this.camera = camera;
let supportedOps = await camera.getSupportedOps();
let capturePreview;
if (supportedOps.capturePreview) {
capturePreview = () => camera.capturePreviewAsBlob();
}
let triggerCapture;
if (supportedOps.captureImage) {
triggerCapture = () => camera.captureImageAsFile();
}
// We should reach this only once.
while (this.connection) {
while (this.camera) {
try {
let config = await this.connection.schedule(context =>
context.configToJS()
);
let config = await this.camera.getConfig();
if (!isDebug) {
delete config.children.actions;
delete config.children.other;
}
this.setState({
type: 'Config',
config
config,
capturePreview,
triggerCapture
});
} catch (err) {
rethrowIfCritical(err);
@@ -109,9 +107,7 @@ class App extends Component {
requestIdleCallback(resolve, { timeout: 500 })
);
try {
let hadEvents = await this.connection.schedule(context =>
context.consumeEvents()
);
let hadEvents = await this.camera.consumeEvents();
if (hadEvents) {
break;
}
@@ -128,23 +124,7 @@ class App extends Component {
* @param {string} name
* @param {*} value
*/
setValue = async (name, value) => {
/** @type {Promise<void>} */
let uiTimeout;
await this.connection.schedule(context => {
// This is terrible, yes... but some configs return too quickly before they're actually updated.
// We want to wait some time before updating the UI in that case, but not block subsequent ops.
uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
return context.setConfigValue(name, value);
});
await uiTimeout;
};
capturePreview = () =>
this.connection.schedule(context => context.capturePreviewAsBlob());
captureImage = () =>
this.connection.schedule(context => context.captureImageAsFile());
setValue = async (name, value) => this.camera?.setConfigValue(name, value);
render(/** @type {App['props']} */ props, /** @type {App['state']} */ state) {
switch (state.type) {
@@ -195,9 +175,7 @@ class App extends Component {
'div',
{ class: 'pure-u-2-3' },
h(Preview, {
getPreview: this.connection.supportedOps.capturePreview
? this.capturePreview
: undefined
getPreview: state.capturePreview
})
),
h(
@@ -209,8 +187,8 @@ class App extends Component {
h(
'fieldset',
null,
this.connection.supportedOps.triggerCapture
? h(CaptureButton, { getFile: this.captureImage })
state.triggerCapture
? h(CaptureButton, { getFile: state.triggerCapture })
: undefined,
' ',
h(

62
examples/preact/ops.js
View File

@@ -1,62 +0,0 @@
/*
* Copyright 2021 Google LLC
*
* This library is free software; you can redistribute it and/or
* modify it under the terms of the GNU Lesser General Public
* License as published by the Free Software Foundation; either
* version 2.1 of the License, or (at your option) any later version.
*
* This library is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
* Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public
* License along with this library; if not, write to the Free Software
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA
*/
import initModule from './build/libapi.mjs';
/** @typedef {import('../libapi.mjs').Context} Context */
const ModulePromise = initModule();
export function rethrowIfCritical(err) {
// If it's precisely Error, it's a custom error; anything else - SyntaxError,
// WebAssembly.RuntimeError, TypeError, etc. - is treated as critical here.
if (err.constructor !== Error) {
throw err;
}
}
export async function connect() {
const Module = await ModulePromise;
let context = await new Module.Context();
let supportedOps = await context.supportedOps();
/** @type {Promise<unknown>} */
let queue = Promise.resolve();
/** Schedules an exclusive async operation on the global context.
* @template T
* @param {(ctx: Context) => Promise<T>} op
* @returns {Promise<T>}
*/
function schedule(op) {
let res = queue.then(() => op(context));
queue = res.catch(rethrowIfCritical);
return res;
}
return {
supportedOps,
schedule,
disconnect() {
context.delete();
}
};
}
/** @typedef {ReturnType<typeof connect> extends Promise<infer Connection> ? Connection : never} Connection */

75
examples/preact/package-lock.json generated Normal file
View File

@@ -0,0 +1,75 @@
{
"name": "preact",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"devDependencies": {
"@types/requestidlecallback": "^0.3.4",
"@types/stats.js": "^0.17.0",
"preact": "^10.5.14",
"web-gphoto2": "file:../../"
}
},
"../..": {
"version": "0.1.0",
"dev": true,
"license": "LGPL-2.1-or-later",
"devDependencies": {
"@types/emscripten": "^1.39.5"
}
},
"node_modules/@types/requestidlecallback": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.5.tgz",
"integrity": "sha512-Uh49VrVTPfU0y/qIvXXYuRmd/sKLfVgQWZU1t8FWH22AIJyQbCei1aSmXdMDAijwGUFhBDpJmksiHEDsfiE/cg==",
"dev": true
},
"node_modules/@types/stats.js": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
"integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
"dev": true
},
"node_modules/preact": {
"version": "10.16.0",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
"integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
"dev": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/preact"
}
},
"node_modules/web-gphoto2": {
"resolved": "../..",
"link": true
}
},
"dependencies": {
"@types/requestidlecallback": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@types/requestidlecallback/-/requestidlecallback-0.3.5.tgz",
"integrity": "sha512-Uh49VrVTPfU0y/qIvXXYuRmd/sKLfVgQWZU1t8FWH22AIJyQbCei1aSmXdMDAijwGUFhBDpJmksiHEDsfiE/cg==",
"dev": true
},
"@types/stats.js": {
"version": "0.17.0",
"resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.0.tgz",
"integrity": "sha512-9w+a7bR8PeB0dCT/HBULU2fMqf6BAzvKbxFboYhmDtDkKPiyXYbjoe2auwsXlEFI7CFNMF1dCv3dFH5Poy9R1w==",
"dev": true
},
"preact": {
"version": "10.16.0",
"resolved": "https://registry.npmjs.org/preact/-/preact-10.16.0.tgz",
"integrity": "sha512-XTSj3dJ4roKIC93pald6rWuB2qQJO9gO2iLLyTe87MrjQN+HklueLsmskbywEWqCHlclgz3/M4YLL2iBr9UmMA==",
"dev": true
},
"web-gphoto2": {
"version": "file:../..",
"requires": {
"@types/emscripten": "^1.39.5"
}
}
}
}

9
examples/preact/package.json Normal file
View File

@@ -0,0 +1,9 @@
{
"private": true,
"devDependencies": {
"web-gphoto2": "file:../../",
"@types/requestidlecallback": "^0.3.4",
"@types/stats.js": "^0.17.0",
"preact": "^10.5.14"
}
}

9
examples/preact/tsconfig.json Normal file
View File

@@ -0,0 +1,9 @@
{
"compilerOptions": {
"checkJs": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "Node",
"noEmit": true
}
}

9
examples/preact/types.d.ts vendored Normal file
View File

@@ -0,0 +1,9 @@
type AppState =
| { type: 'CameraPicker' }
| { type: 'Status'; message: string }
| {
type: 'Config';
config: import('web-gphoto2').Config;
capturePreview: (() => Promise<Blob>) | undefined;
triggerCapture: (() => Promise<File>) | undefined;
};

2
examples/preact/widget.js
View File

@@ -18,7 +18,7 @@
import { h, Component, createRef } from 'preact';
/** @typedef {import('./build/libapi.mjs').Config} Config */
/** @typedef {import('web-gphoto2').Config} Config */
/**
* @param {Config} config