move hooks to lib

client/demo/package.json

@@ -48,7 +48,7 @@
         "webpack-dev-server": "^4.11.1"
     },
     "dependencies": {
-        "@dannadori/voice-changer-client-js": "file:../lib",
+        "@dannadori/voice-changer-client-js": "^1.0.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0"
     }

client/demo/src/100_options_microphone.tsx

@@ -6,8 +6,8 @@ import { useDeviceSetting } from "./102_device_setting";
 import { useConvertSetting } from "./104_convert_setting";
 import { useAdvancedSetting } from "./105_advanced_setting";
 import { useSpeakerSetting } from "./103_speaker_setting";
-import { useClient } from "./hooks/useClient";
 import { useServerControl } from "./106_server_control";
+import { useClient } from "@dannadori/voice-changer-client-js";
 
 export const useMicrophoneOptions = () => {
     const [audioContext, setAudioContext] = useState<AudioContext | null>(null)

client/demo/src/101_server_setting.tsx

@@ -1,7 +1,7 @@
 import { OnnxExecutionProvider, Framework, fileSelector } from "@dannadori/voice-changer-client-js"
 import React from "react"
 import { useMemo } from "react"
-import { ClientState } from "./hooks/useClient"
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 export type UseServerSettingProps = {
     clientState: ClientState

client/demo/src/102_device_setting.tsx

@@ -1,7 +1,7 @@
 import { fileSelectorAsDataURL, createDummyMediaStream, SampleRate } from "@dannadori/voice-changer-client-js"
 import React, { useEffect, useMemo, useState } from "react"
 import { AUDIO_ELEMENT_FOR_PLAY_RESULT, AUDIO_ELEMENT_FOR_TEST_CONVERTED, AUDIO_ELEMENT_FOR_TEST_CONVERTED_ECHOBACK, AUDIO_ELEMENT_FOR_TEST_ORIGINAL } from "./const"
-import { ClientState } from "./hooks/useClient";
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 
 const reloadDevices = async () => {

client/demo/src/103_speaker_setting.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react"
-import { ClientState } from "./hooks/useClient"
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 export type UseSpeakerSettingProps = {
     clientState: ClientState

client/demo/src/104_convert_setting.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from "react"
-import { ClientState } from "./hooks/useClient"
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 export type UseConvertSettingProps = {
     clientState: ClientState

client/demo/src/105_advanced_setting.tsx

@@ -1,6 +1,6 @@
 import { BufferSize, Protocol, SampleRate, VoiceChangerMode } from "@dannadori/voice-changer-client-js"
 import React, { useMemo, useState } from "react"
-import { ClientState } from "./hooks/useClient"
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 
 export type UseAdvancedSettingProps = {

client/demo/src/106_server_control.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from "react"
-import { ClientState } from "./hooks/useClient"
+import { ClientState } from "@dannadori/voice-changer-client-js";
 
 export type UseServerControlProps = {
     clientState: ClientState

client/lib/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dannadori/voice-changer-client-js",
-  "version": "1.0.6",
+  "version": "1.0.12",
   "description": "",
   "main": "dist/index.js",
   "directories": {
@@ -26,6 +26,8 @@
   "devDependencies": {
     "@types/audioworklet": "^0.0.36",
     "@types/node": "^18.11.18",
+    "@types/react": "18.0.26",
+    "@types/react-dom": "18.0.10",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
@@ -43,6 +45,8 @@
   },
   "dependencies": {
     "@types/readable-stream": "^2.3.15",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "amazon-chime-sdk-js": "^3.10.0",
     "microphone-stream": "^6.0.1",
     "readable-stream": "^4.3.0",

client/lib/src/hooks/useClient.ts

@@ -1,5 +1,5 @@
-import { VoiceChangerClient } from "@dannadori/voice-changer-client-js"
 import { useEffect, useMemo, useRef, useState } from "react"
+import { VoiceChangerClient } from "../VoiceChangerClient"
 import { ClientSettingState, useClientSetting } from "./useClientSetting"
 import { ServerSettingState, useServerSetting } from "./useServerSetting"
 import { useWorkletSetting, WorkletSettingState } from "./useWorkletSetting"

client/lib/src/hooks/useClientSetting.ts

@@ -1,5 +1,7 @@
-import { BufferSize, createDummyMediaStream, DefaultVoiceChangerClientSetting, Protocol, SampleRate, Speaker, VoiceChangerClient, VoiceChangerClientSetting, VoiceChangerMode } from "@dannadori/voice-changer-client-js"
 import { useState, useMemo, useRef, useEffect } from "react"
+import { VoiceChangerClientSetting, Protocol, BufferSize, VoiceChangerMode, SampleRate, Speaker, DefaultVoiceChangerClientSetting } from "../const"
+import { createDummyMediaStream } from "../util"
+import { VoiceChangerClient } from "../VoiceChangerClient"
 
 export type UseClientSettingProps = {
     voiceChangerClient: VoiceChangerClient | null

client/lib/src/hooks/useServerSetting.ts

@@ -1,5 +1,6 @@
-import { DefaultVoiceChangerServerSetting, Framework, OnnxExecutionProvider, ServerInfo, ServerSettingKey, VoiceChangerClient, VoiceChangerServerSetting, } from "@dannadori/voice-changer-client-js"
 import { useState, useMemo, useRef, useEffect } from "react"
+import { VoiceChangerServerSetting, ServerInfo, Framework, OnnxExecutionProvider, DefaultVoiceChangerServerSetting, ServerSettingKey } from "../const"
+import { VoiceChangerClient } from "../VoiceChangerClient"
 
 
 export type FileUploadSetting = {
@@ -168,7 +169,7 @@ export const useServerSetting = (props: UseServerSettingProps): ServerSettingSta
             for (let i = 0; i < models.length; i++) {
                 const progRate = 1 / models.length
                 const progOffset = 100 * i * progRate
-                await _uploadFile(models[i], (progress: number, end: boolean) => {
+                await _uploadFile(models[i], (progress: number, _end: boolean) => {
                     // console.log(progress * progRate + progOffset, end, progRate,)
                     setUploadProgress(progress * progRate + progOffset)
                 })

client/lib/src/hooks/useWorkletSetting.ts

@@ -1,5 +1,6 @@
-import { DefaultWorkletSetting, VoiceChangerClient, WorkletSetting } from "@dannadori/voice-changer-client-js"
 import { useState, useMemo, useEffect } from "react"
+import { WorkletSetting, DefaultWorkletSetting } from "../const";
+import { VoiceChangerClient } from "../VoiceChangerClient";
 
 export type UseWorkletSettingProps = {
     voiceChangerClient: VoiceChangerClient | null

client/lib/src/index.ts

@@ -1,3 +1,4 @@
 export * from "./const"
 export * from "./VoiceChangerClient"
 export * from "./util"
+export * from "./hooks/useClient"

client/lib/webpack.common.js

@@ -32,4 +32,8 @@ module.exports = {
             process: "process/browser",
         }),
     ],
+    externals: {
+        react: "react",
+        "react-dom": "reactDOM",
+    }
 };