Refactor TethrManager

demo/src/App.vue

@@ -14,22 +14,24 @@
 		</main>
 
 		<aside>
-			<ul>
-				<li v-for="(cam, i) in pairedCameras" :key="i">
-					<button>{{ i }}</button>
-				</li>
-			</ul>
 			<dl>
-				<dt>Request</dt>
-				<dt style="display: flex; gap: 1em">
+				<dt>Connect to</dt>
+				<dd class="connect-to">
 					<button class="connect-button" @click="requestCameras('usbptp')">
 						USB
 					</button>
 					<button class="connect-button" @click="requestCameras('webcam')">
 						Webcam
 					</button>
-				</dt>
+				</dd>
 			</dl>
+			<ul class="webcam-list">
+				<li v-for="(cam, i) in pairedCameras" :key="i">
+					<button @click="onClickCamera(cam)">
+						[{{ cam.type }}] {{ cam.name }}
+					</button>
+				</li>
+			</ul>
 
 			<template v-if="camera">
 				<h2>Actions</h2>
@@ -46,7 +48,7 @@
 					</template>
 					<template v-if="configs.canRunAutoFocus.value">
 						<dt>autoFocus</dt>
-						<dd><button @click="runAutoFocus">Run</button></dd>
+						<dd><button @click="camera.runAutoFocus">Run</button></dd>
 					</template>
 					<template v-if="configs.canRunManualFocus.value">
 						<dt>manualFocus</dt>
@@ -112,7 +114,7 @@
 							v-if="config.value !== null"
 							:key="name"
 							:label="name"
-							:config="config as any"
+							:config="config"
 						/>
 					</template>
 				</dl>
@@ -123,7 +125,7 @@
 
 <script lang="ts" setup>
 import {saveAs} from 'file-saver'
-import {TethrObject} from 'tethr'
+import {Tethr, TethrObject} from 'tethr'
 import {ref} from 'vue'
 
 import TethrConfig from './TethrConfig.vue'
@@ -167,14 +169,35 @@ async function onSave(object: TethrObject) {
 const {
 	pairedCameras,
 	camera,
+	openCamera,
+	closeCamera,
 	requestCameras,
 	configs,
 	liveviewMediaStream,
 	photoURL,
-	runAutoFocus,
 	toggleLiveview,
-	takePhoto,
-} = useTethr(onSave)
+} = useTethr()
+
+async function takePhoto() {
+	if (!camera.value) return
+	const result = await camera.value.takePhoto()
+	if (result.status === 'ok') {
+		for (const object of result.value) {
+			if (object.format !== 'raw') {
+				photoURL.value = URL.createObjectURL(object.blob)
+			}
+			onSave(object)
+		}
+	}
+}
+
+async function onClickCamera(cam: Tethr) {
+	if (cam.opened) {
+		closeCamera(cam)
+	} else {
+		openCamera(cam)
+	}
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -220,6 +243,7 @@ dl
 	&:deep(dt)
 		height 2em
 		line-height 2em
+		white-space nowrap
 
 	&:deep(dd)
 		display flex
@@ -231,4 +255,18 @@ dl
 		display block
 		width 100%
 		text-align center
+
+.connect-to
+	display: flex
+	gap: 1em
+	margin-bottom 1em
+
+.webcam-list
+	grid-column: 1 / span 2
+
+	li
+		margin-bottom 0.2em
+
+	button
+		width 100%
 </style>

demo/src/useTethr.ts

@@ -5,7 +5,6 @@ import {
 	ConfigType,
 	Tethr,
 	TethrManager,
-	TethrObject,
 } from 'tethr'
 import {onUnmounted, reactive, readonly, Ref, ref, shallowRef, watch} from 'vue'
 
@@ -60,12 +59,12 @@ export function useTethrConfig<N extends ConfigName>(
 	return readonly(config)
 }
 
-export function useTethr(onSave: (object: TethrObject) => void) {
+export function useTethr() {
 	const manager = new TethrManager()
 
 	const pairedCameras = shallowRef<Tethr[]>([])
 
-	manager.getPairedCameras().then(cameras => {
+	manager.addListener('pairedCameraChange', cameras => {
 		pairedCameras.value = cameras
 	})
 
@@ -84,26 +83,33 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 	}
 
 	async function openCamera(cam: Tethr) {
+		if (camera.value) {
+			await closeCamera(camera.value)
+		}
+
 		await cam.open()
 		camera.value = cam
 		cam.on('disconnect', onDisconnect)
 		cam.on('liveviewStreamUpdate', onLivewviewStreamUpdate)
 	}
 
-	async function closeCurrentSelectedCamera() {
+	async function closeCamera(cam: Tethr) {
 		if (!camera.value) return
 
 		camera.value.off('disconnect', onDisconnect)
 		camera.value.off('liveviewStreamUpdate', onLivewviewStreamUpdate)
 		await camera.value.close()
-		camera.value = null
+
+		if (camera.value === cam) {
+			camera.value = null
+		}
 	}
 
 	async function requestCameras(type: 'usbptp' | 'webcam') {
-		let cams: Tethr[]
+		let cam: Tethr | null
 		try {
-			cams = await manager.requestCameras(type)
-			if (cams.length === 0) {
+			cam = await manager.requestCamera(type)
+			if (!cam) {
 				return
 			}
 		} catch (err) {
@@ -113,26 +119,7 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 			return
 		}
 
-		await closeCurrentSelectedCamera()
-
-		await openCamera(cams[0])
-	}
-
-	async function takePhoto() {
-		if (!camera.value) return
-		const result = await camera.value.takePhoto()
-		if (result.status === 'ok') {
-			for (const object of result.value) {
-				if (object.format !== 'raw') {
-					photoURL.value = URL.createObjectURL(object.blob)
-				}
-				onSave(object)
-			}
-		}
-	}
-
-	async function runAutoFocus() {
-		await camera.value?.runAutoFocus()
+		await openCamera(cam)
 	}
 
 	async function toggleLiveview() {
@@ -158,6 +145,8 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 
 	return {
 		pairedCameras,
+		openCamera,
+		closeCamera,
 		camera,
 		requestCameras,
 		// DPC
@@ -199,8 +188,6 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 		},
 		liveviewMediaStream,
 		photoURL,
-		runAutoFocus,
 		toggleLiveview,
-		takePhoto,
 	}
 }

src/Tethr.ts

@@ -116,6 +116,8 @@ export abstract class Tethr
 	abstract close(): Promise<void>
 
 	abstract get opened(): boolean
+	abstract get type(): 'usbptp' | 'webcam'
+	abstract get name(): string
 
 	// eslint-disable-next-line @typescript-eslint/no-unused-vars
 	setLog(log: boolean) {