From 0952c1ca32f64dd61dcd2a9f0a76b330fb553fd6 Mon Sep 17 00:00:00 2001
From: Baku Hashimoto <mail@baku89.com>
Date: Sun, 9 Jun 2024 20:39:12 +0900
Subject: [PATCH] Update demo

---
 demo/src/App.vue     | 81 ++++++++++++++++++++++++++++++++++++++------
 demo/src/useTethr.ts | 31 +++--------------
 2 files changed, 75 insertions(+), 37 deletions(-)

diff --git a/demo/src/App.vue b/demo/src/App.vue
index 199d80f..9ac197c 100644
--- a/demo/src/App.vue
+++ b/demo/src/App.vue
@@ -21,19 +21,45 @@
 			<template v-if="camera">
 				<h2>Actions</h2>
 				<dl>
-					<template v-if="configs.canTakePhoto.value">
+					<template
+						v-if="
+							configs.canTakePhoto.value || configs.canStartBulbCapture.value
+						"
+					>
 						<dt>saveFolder</dt>
 						<dd>
 							<button @click="setupSaveFolder">
 								{{ folderHandler ? folderHandler.name : '(None)' }}
 							</button>
 						</dd>
-						<dt>takePhoto</dt>
-						<dd><button class="red" @click="takePhoto">Shutter</button></dd>
+						<template v-if="configs.canTakePhoto.value">
+							<dt>takePhoto</dt>
+							<dd><button class="red" @click="takePhoto">Shutter</button></dd>
+						</template>
+						<template v-if="configs.canStartBulbCapture.value">
+							<dt>bulbCapture</dt>
+							<dd>
+								<button class="red" @click="toggleBulbShutter">
+									{{
+										configs.status.value === 'capturing' ? 'Stop' : 'Shutter'
+									}}
+								</button>
+							</dd>
+						</template>
+					</template>
+					<template v-if="configs.canRecordVideo.value">
+						<dt>recordVideo</dt>
+						<dd>
+							<button class="red" @click="toggleVideoRecording">
+								{{
+									configs.status.value === 'recording' ? 'Stop' : 'Recording'
+								}}
+							</button>
+						</dd>
 					</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>
@@ -99,7 +125,7 @@
 							v-if="config.value !== null"
 							:key="name"
 							:label="name"
-							:config="(config as any)"
+							:config="config"
 						/>
 					</template>
 				</dl>
@@ -111,11 +137,14 @@
 <script lang="ts" setup>
 import {saveAs} from 'file-saver'
 import {TethrObject} from 'tethr'
-import {ref} from 'vue'
+import {ref, watchEffect} from 'vue'
 
 import TethrConfig from './TethrConfig.vue'
 import {useTethr} from './useTethr'
 
+const TransparentPng =
+	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
 const folderHandler = ref<FileSystemDirectoryHandle | null>(null)
 
 async function setupSaveFolder() {
@@ -136,6 +165,31 @@ async function setupSaveFolder() {
 	folderHandler.value = handler
 }
 
+const photoURL = ref(TransparentPng)
+
+async function takePhoto() {
+	if (!camera.value) return
+	const result = await camera.value.takePhoto()
+	if (result.status !== 'ok') return
+
+	for (const object of result.value) {
+		if (object.format !== 'raw') {
+			photoURL.value = URL.createObjectURL(object.blob)
+		}
+		onSave(object)
+	}
+}
+
+async function toggleBulbShutter() {
+	if (!camera.value) return
+
+	if (configs.status.value === 'capturing') {
+		camera.value.stopBulbCapture()
+	} else if (configs.status.value === 'idle') {
+		camera.value.startBulbCapture()
+	}
+}
+
 async function onSave(object: TethrObject) {
 	if (folderHandler.value) {
 		// Use File System Access API
@@ -155,12 +209,19 @@ const {
 	camera,
 	configs,
 	liveviewMediaStream,
-	photoURL,
-	runAutoFocus,
 	toggleCameraConnection,
 	toggleLiveview,
-	takePhoto,
-} = useTethr(onSave)
+} = useTethr()
+
+function toggleVideoRecording() {
+	if (!camera.value) return
+
+	if (configs.status.value === 'recording') {
+		camera.value.stopVideoRecording()
+	} else {
+		camera.value.startVideoRecording()
+	}
+}
 
 // Expose camera object to the global scope for debugging
 watchEffect(() => {
diff --git a/demo/src/useTethr.ts b/demo/src/useTethr.ts
index bac6290..a88bc91 100644
--- a/demo/src/useTethr.ts
+++ b/demo/src/useTethr.ts
@@ -5,13 +5,9 @@ import {
 	ConfigType,
 	detectCameras,
 	Tethr,
-	TethrObject,
 } from 'tethr'
 import {onUnmounted, reactive, readonly, Ref, ref, shallowRef, watch} from 'vue'
 
-const TransparentPng =
-	'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
-
 export interface TethrConfig<T> {
 	writable: boolean
 	value: T | null
@@ -60,13 +56,11 @@ export function useTethrConfig<N extends ConfigName>(
 	return readonly(config)
 }
 
-export function useTethr(onSave: (object: TethrObject) => void) {
+export function useTethr() {
 	const camera = shallowRef<Tethr | null>(null)
 
 	const liveviewMediaStream = ref<null | MediaStream>(null)
 
-	const photoURL = ref(TransparentPng)
-
 	async function toggleCameraConnection() {
 		if (camera.value && camera.value.opened) {
 			await camera.value.close()
@@ -98,23 +92,6 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 		}
 	}
 
-	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()
-	}
-
 	async function toggleLiveview() {
 		if (!camera.value) return
 		const enabled = await camera.value.get('liveviewEnabled')
@@ -168,18 +145,18 @@ export function useTethr(onSave: (object: TethrObject) => void) {
 			liveviewSize: useTethrConfig(camera, 'liveviewSize'),
 			destinationToSave: useTethrConfig(camera, 'destinationToSave'),
 			batteryLevel: useTethrConfig(camera, 'batteryLevel'),
+			canRecordVideo: useTethrConfig(camera, 'canRecordVideo'),
 			canTakePhoto: useTethrConfig(camera, 'canTakePhoto'),
 			canRunAutoFocus: useTethrConfig(camera, 'canRunAutoFocus'),
 			canRunManualFocus: useTethrConfig(camera, 'canRunManualFocus'),
+			canStartBulbCapture: useTethrConfig(camera, 'canStartBulbCapture'),
 			canStartLiveview: useTethrConfig(camera, 'canStartLiveview'),
 			manualFocusOptions: useTethrConfig(camera, 'manualFocusOptions'),
 			shutterSound: useTethrConfig(camera, 'shutterSound'),
+			status: useTethrConfig(camera, 'status'),
 		},
 		liveviewMediaStream,
-		photoURL,
-		runAutoFocus,
 		toggleCameraConnection,
 		toggleLiveview,
-		takePhoto,
 	}
 }