add version info

This commit is contained in:
wataru 2023-05-26 17:56:41 +09:00
parent ca989775dd
commit 895fd786e9
11 changed files with 2853 additions and 1757 deletions

View File

@ -0,0 +1 @@
-.-.-.-

View File

@ -1,10 +1 @@
<!DOCTYPE html> <!doctype html><html style="width:100%;height:100%;overflow:hidden"><head><meta charset="utf-8"/><title>Voice Changer Client Demo</title><script defer="defer" src="index.js"></script></head><body style="width:100%;height:100%;margin:0"><div id="app" style="width:100%;height:100%"></div></body></html>
<html style="width: 100%; height: 100%; overflow: hidden">
<head>
<meta charset="utf-8" />
<title>Voice Changer Client Demo</title>
<script defer src="index.js"></script></head>
<body style="width: 100%; height: 100%; margin: 0px">
<div id="app" style="width: 100%; height: 100%"></div>
</body>
</html>

File diff suppressed because one or more lines are too long

2783
client/demo/dist/index.js.LICENSE.txt vendored Normal file

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1 @@
-.-.-.-

View File

@ -1,4 +1,4 @@
import { useState } from "react" import { useEffect, useState } from "react"
import { ClientType } from "@dannadori/voice-changer-client-js" import { ClientType } from "@dannadori/voice-changer-client-js"
export type AppGuiSetting = AppGuiDemoSetting export type AppGuiSetting = AppGuiDemoSetting
@ -65,6 +65,7 @@ const InitialAppGuiDemoSetting: AppGuiDemoSetting = {
export type AppGuiSettingState = { export type AppGuiSettingState = {
appGuiSetting: AppGuiSetting appGuiSetting: AppGuiSetting
guiSettingLoaded: boolean guiSettingLoaded: boolean
version: string
} }
export type AppGuiSettingStateAndMethod = AppGuiSettingState & { export type AppGuiSettingStateAndMethod = AppGuiSettingState & {
@ -72,9 +73,10 @@ export type AppGuiSettingStateAndMethod = AppGuiSettingState & {
clearAppGuiSetting: () => void clearAppGuiSetting: () => void
} }
export const userAppGuiSetting = (): AppGuiSettingStateAndMethod => { export const useAppGuiSetting = (): AppGuiSettingStateAndMethod => {
const [guiSettingLoaded, setGuiSettingLoaded] = useState<boolean>(false) const [guiSettingLoaded, setGuiSettingLoaded] = useState<boolean>(false)
const [appGuiSetting, setAppGuiSetting] = useState<AppGuiSetting>(InitialAppGuiDemoSetting) const [appGuiSetting, setAppGuiSetting] = useState<AppGuiSetting>(InitialAppGuiDemoSetting)
const [version, setVersion] = useState<string>("")
const getAppGuiSetting = async (url: string) => { const getAppGuiSetting = async (url: string) => {
const res = await fetch(`${url}`, { const res = await fetch(`${url}`, {
method: "GET", method: "GET",
@ -87,11 +89,24 @@ export const userAppGuiSetting = (): AppGuiSettingStateAndMethod => {
setAppGuiSetting(InitialAppGuiDemoSetting) setAppGuiSetting(InitialAppGuiDemoSetting)
setGuiSettingLoaded(false) setGuiSettingLoaded(false)
} }
useEffect(() => {
const getVersionInfo = async () => {
const res = await fetch(`/assets/gui_settings/version.txt`, {
method: "GET",
})
const version = await res.text()
setVersion(version)
}
getVersionInfo()
}, [])
return { return {
appGuiSetting, appGuiSetting,
guiSettingLoaded, guiSettingLoaded,
version,
getAppGuiSetting, getAppGuiSetting,
clearAppGuiSetting, clearAppGuiSetting,
} }
} }

View File

@ -1,7 +1,7 @@
import { ClientType } from "@dannadori/voice-changer-client-js"; import { ClientType } from "@dannadori/voice-changer-client-js";
import React, { useContext, useEffect, useState } from "react"; import React, { useContext, useEffect, useState } from "react";
import { ReactNode } from "react"; import { ReactNode } from "react";
import { AppGuiSettingStateAndMethod, userAppGuiSetting } from "../001_globalHooks/001_useAppGuiSetting"; import { AppGuiSettingStateAndMethod, useAppGuiSetting } from "../001_globalHooks/001_useAppGuiSetting";
import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig"; import { AudioConfigState, useAudioConfig } from "../001_globalHooks/001_useAudioConfig";
type Props = { type Props = {
@ -26,7 +26,7 @@ export const useAppRoot = (): AppRootValue => {
export const AppRootProvider = ({ children }: Props) => { export const AppRootProvider = ({ children }: Props) => {
const audioContextState = useAudioConfig() const audioContextState = useAudioConfig()
const appGuiSettingState = userAppGuiSetting() const appGuiSettingState = useAppGuiSetting()
const [clientType, setClientType] = useState<ClientType | null>(null) const [clientType, setClientType] = useState<ClientType | null>(null)
useEffect(() => { useEffect(() => {

View File

@ -1,6 +1,7 @@
import React, { useMemo } from "react"; import React, { useMemo } from "react";
import { isDesktopApp } from "../../../const"; import { isDesktopApp } from "../../../const";
import { useGuiState } from "../001_GuiStateProvider"; import { useGuiState } from "../001_GuiStateProvider";
import { useAppRoot } from "../../../001_provider/001_AppRootProvider";
export type TitleProps = { export type TitleProps = {
@ -11,6 +12,7 @@ export type TitleProps = {
export const Title = (props: TitleProps) => { export const Title = (props: TitleProps) => {
const guiState = useGuiState() const guiState = useGuiState()
const appRootState = useAppRoot()
const githubLink = useMemo(() => { const githubLink = useMemo(() => {
return isDesktopApp() ? return isDesktopApp() ?
( (
@ -137,6 +139,7 @@ export const Title = (props: TitleProps) => {
<div className="top-title"> <div className="top-title">
<span className="title">{props.mainTitle}</span> <span className="title">{props.mainTitle}</span>
<span className="top-title-version">{props.subTitle}</span> <span className="top-title-version">{props.subTitle}</span>
<span className="top-title-version-number">{appRootState.appGuiSettingState.version}</span>
<span className="belongings"> <span className="belongings">
{githubLink} {githubLink}
{manualLink} {manualLink}
@ -149,7 +152,7 @@ export const Title = (props: TitleProps) => {
</div> </div>
) )
} }
}, [props.subTitle, props.mainTitle, props.lineNum]) }, [props.subTitle, props.mainTitle, props.lineNum, appRootState.appGuiSettingState.version])
return titleRow return titleRow
}; };

View File

@ -81,6 +81,10 @@ body {
font-size: 1.2rem; font-size: 1.2rem;
background: linear-gradient(transparent 60%, yellow 30%); background: linear-gradient(transparent 60%, yellow 30%);
} }
.top-title-version-number {
margin-left: 0.3rem;
font-size: 0.8rem;
}
.belongings { .belongings {
margin-left: 1rem; margin-left: 1rem;
margin-right: 1rem; margin-right: 1rem;

View File

@ -1,12 +1,12 @@
{ {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.133", "version": "1.0.134",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.133", "version": "1.0.134",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@types/readable-stream": "^2.3.15", "@types/readable-stream": "^2.3.15",
@ -19,8 +19,8 @@
}, },
"devDependencies": { "devDependencies": {
"@types/audioworklet": "^0.0.46", "@types/audioworklet": "^0.0.46",
"@types/node": "^20.2.3", "@types/node": "^20.2.4",
"@types/react": "18.2.6", "@types/react": "18.2.7",
"@types/react-dom": "18.2.4", "@types/react-dom": "18.2.4",
"eslint": "^8.41.0", "eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
@ -33,7 +33,7 @@
"rimraf": "^5.0.1", "rimraf": "^5.0.1",
"ts-loader": "^9.4.3", "ts-loader": "^9.4.3",
"typescript": "^5.0.4", "typescript": "^5.0.4",
"webpack": "^5.83.1", "webpack": "^5.84.1",
"webpack-cli": "^5.1.1", "webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0" "webpack-dev-server": "^4.15.0"
} }
@ -1915,9 +1915,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "20.2.3", "version": "20.2.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.4.tgz",
"integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==" "integrity": "sha512-ni5f8Xlf4PwnT/Z3f0HURc3ZSw8UyrqMqmM3L5ysa7VjHu8c3FOmIo1nKCcLrV/OAmtf3N4kFna/aJqxsfEtnA=="
}, },
"node_modules/@types/prop-types": { "node_modules/@types/prop-types": {
"version": "15.7.5", "version": "15.7.5",
@ -1938,9 +1938,9 @@
"dev": true "dev": true
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "18.2.6", "version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.7.tgz",
"integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==", "integrity": "sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/prop-types": "*", "@types/prop-types": "*",
@ -3201,9 +3201,9 @@
} }
}, },
"node_modules/enhanced-resolve": { "node_modules/enhanced-resolve": {
"version": "5.14.0", "version": "5.14.1",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
"integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==", "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"graceful-fs": "^4.2.4", "graceful-fs": "^4.2.4",
@ -7623,9 +7623,9 @@
} }
}, },
"node_modules/webpack": { "node_modules/webpack": {
"version": "5.83.1", "version": "5.84.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.83.1.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.84.1.tgz",
"integrity": "sha512-TNsG9jDScbNuB+Lb/3+vYolPplCS3bbEaJf+Bj0Gw4DhP3ioAflBb1flcRt9zsWITyvOhM96wMQNRWlSX52DgA==", "integrity": "sha512-ZP4qaZ7vVn/K8WN/p990SGATmrL1qg4heP/MrVneczYtpDGJWlrgZv55vxaV2ul885Kz+25MP2kSXkPe3LZfmg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",
@ -7634,10 +7634,10 @@
"@webassemblyjs/wasm-edit": "^1.11.5", "@webassemblyjs/wasm-edit": "^1.11.5",
"@webassemblyjs/wasm-parser": "^1.11.5", "@webassemblyjs/wasm-parser": "^1.11.5",
"acorn": "^8.7.1", "acorn": "^8.7.1",
"acorn-import-assertions": "^1.7.6", "acorn-import-assertions": "^1.9.0",
"browserslist": "^4.14.5", "browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2", "chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.14.0", "enhanced-resolve": "^5.14.1",
"es-module-lexer": "^1.2.1", "es-module-lexer": "^1.2.1",
"eslint-scope": "5.1.1", "eslint-scope": "5.1.1",
"events": "^3.2.0", "events": "^3.2.0",
@ -9932,9 +9932,9 @@
"dev": true "dev": true
}, },
"@types/node": { "@types/node": {
"version": "20.2.3", "version": "20.2.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-20.2.4.tgz",
"integrity": "sha512-pg9d0yC4rVNWQzX8U7xb4olIOFuuVL9za3bzMT2pu2SU0SNEi66i2qrvhE2qt0HvkhuCaWJu7pLNOt/Pj8BIrw==" "integrity": "sha512-ni5f8Xlf4PwnT/Z3f0HURc3ZSw8UyrqMqmM3L5ysa7VjHu8c3FOmIo1nKCcLrV/OAmtf3N4kFna/aJqxsfEtnA=="
}, },
"@types/prop-types": { "@types/prop-types": {
"version": "15.7.5", "version": "15.7.5",
@ -9955,9 +9955,9 @@
"dev": true "dev": true
}, },
"@types/react": { "@types/react": {
"version": "18.2.6", "version": "18.2.7",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.6.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.7.tgz",
"integrity": "sha512-wRZClXn//zxCFW+ye/D2qY65UsYP1Fpex2YXorHc8awoNamkMZSvBxwxdYVInsHOZZd2Ppq8isnSzJL5Mpf8OA==", "integrity": "sha512-ojrXpSH2XFCmHm7Jy3q44nXDyN54+EYKP2lBhJ2bqfyPj6cIUW/FZW/Csdia34NQgq7KYcAlHi5184m4X88+yw==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/prop-types": "*", "@types/prop-types": "*",
@ -10933,9 +10933,9 @@
"integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw==" "integrity": "sha512-tjuoZDMAdEhVnSFleYPCtdL2GXwVTGtNjoeJd9IhIG3C1xs9uwxqRNEu5WpnDZCaozwVlK/nuQhpodhXSIMaxw=="
}, },
"enhanced-resolve": { "enhanced-resolve": {
"version": "5.14.0", "version": "5.14.1",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.0.tgz", "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.14.1.tgz",
"integrity": "sha512-+DCows0XNwLDcUhbFJPdlQEVnT2zXlCv7hPxemTz86/O+B/hCQ+mb7ydkPKiflpVraqLPCAfu7lDy+hBXueojw==", "integrity": "sha512-Vklwq2vDKtl0y/vtwjSesgJ5MYS7Etuk5txS8VdKL4AOS1aUlD96zqIfsOSLQsdv3xgMRbtkWM8eG9XDfKUPow==",
"dev": true, "dev": true,
"requires": { "requires": {
"graceful-fs": "^4.2.4", "graceful-fs": "^4.2.4",
@ -14172,9 +14172,9 @@
} }
}, },
"webpack": { "webpack": {
"version": "5.83.1", "version": "5.84.1",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.83.1.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.84.1.tgz",
"integrity": "sha512-TNsG9jDScbNuB+Lb/3+vYolPplCS3bbEaJf+Bj0Gw4DhP3ioAflBb1flcRt9zsWITyvOhM96wMQNRWlSX52DgA==", "integrity": "sha512-ZP4qaZ7vVn/K8WN/p990SGATmrL1qg4heP/MrVneczYtpDGJWlrgZv55vxaV2ul885Kz+25MP2kSXkPe3LZfmg==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",
@ -14183,10 +14183,10 @@
"@webassemblyjs/wasm-edit": "^1.11.5", "@webassemblyjs/wasm-edit": "^1.11.5",
"@webassemblyjs/wasm-parser": "^1.11.5", "@webassemblyjs/wasm-parser": "^1.11.5",
"acorn": "^8.7.1", "acorn": "^8.7.1",
"acorn-import-assertions": "^1.7.6", "acorn-import-assertions": "^1.9.0",
"browserslist": "^4.14.5", "browserslist": "^4.14.5",
"chrome-trace-event": "^1.0.2", "chrome-trace-event": "^1.0.2",
"enhanced-resolve": "^5.14.0", "enhanced-resolve": "^5.14.1",
"es-module-lexer": "^1.2.1", "es-module-lexer": "^1.2.1",
"eslint-scope": "5.1.1", "eslint-scope": "5.1.1",
"events": "^3.2.0", "events": "^3.2.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "@dannadori/voice-changer-client-js", "name": "@dannadori/voice-changer-client-js",
"version": "1.0.133", "version": "1.0.134",
"description": "", "description": "",
"main": "dist/index.js", "main": "dist/index.js",
"directories": { "directories": {
@ -27,8 +27,8 @@
"license": "ISC", "license": "ISC",
"devDependencies": { "devDependencies": {
"@types/audioworklet": "^0.0.46", "@types/audioworklet": "^0.0.46",
"@types/node": "^20.2.3", "@types/node": "^20.2.4",
"@types/react": "18.2.6", "@types/react": "18.2.7",
"@types/react-dom": "18.2.4", "@types/react-dom": "18.2.4",
"eslint": "^8.41.0", "eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0", "eslint-config-prettier": "^8.8.0",
@ -41,7 +41,7 @@
"rimraf": "^5.0.1", "rimraf": "^5.0.1",
"ts-loader": "^9.4.3", "ts-loader": "^9.4.3",
"typescript": "^5.0.4", "typescript": "^5.0.4",
"webpack": "^5.83.1", "webpack": "^5.84.1",
"webpack-cli": "^5.1.1", "webpack-cli": "^5.1.1",
"webpack-dev-server": "^4.15.0" "webpack-dev-server": "^4.15.0"
}, },