Feature: pass through

w-okada · Aug 5, 2023 · fa0c0cb · fa0c0cb
1 parent ff21c81
commit fa0c0cb
Show file tree

Hide file tree

Showing 9 changed files with 3,189 additions and 1,404 deletions.
diff --git a/client/demo/dist/index.html b/client/demo/dist/index.html
@@ -1,10 +1 @@
-<!DOCTYPE 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>
+<!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>
diff --git a/client/demo/dist/index.js b/client/demo/dist/index.js
diff --git a/client/demo/dist/index.js.LICENSE.txt b/client/demo/dist/index.js.LICENSE.txt
diff --git a/client/demo/src/components/demo/components2/101_CharacterArea.tsx b/client/demo/src/components/demo/components2/101_CharacterArea.tsx
@@ -122,9 +122,13 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
                 serverSetting.updateServerSettings({ ...serverSetting.serverSetting, serverAudioStated: 0 });
             }
         };
+        const onPassThroughClicked = async () => {
+            serverSetting.updateServerSettings({ ...serverSetting.serverSetting, passThrough: !serverSetting.serverSetting.passThrough });
+        };
         const startClassName = guiState.isConverting ? "character-area-control-button-active" : "character-area-control-button-stanby";
         const stopClassName = guiState.isConverting ? "character-area-control-button-stanby" : "character-area-control-button-active";
-
+        const passThruClassName = serverSetting.serverSetting.passThrough == false ? "character-area-control-passthru-button-stanby" : "character-area-control-passthru-button-active blinking";
+        console.log("serverSetting.serverSetting.passThrough", passThruClassName, serverSetting.serverSetting.passThrough);
         return (
             <div className="character-area-control">
                 <div className="character-area-control-buttons">
@@ -134,6 +138,9 @@ export const CharacterArea = (_props: CharacterAreaProps) => {
                     <div onClick={onStopClicked} className={stopClassName}>
                         stop
                     </div>
+                    <div onClick={onPassThroughClicked} className={passThruClassName}>
+                        passthru
+                    </div>
                 </div>
             </div>
         );

diff --git a/client/demo/src/css/App.css b/client/demo/src/css/App.css
@@ -1363,6 +1363,34 @@ body {
                         border: solid 1px #000;
                     }
                 }
+                .character-area-control-passthru-button-stanby {
+                    width: 5rem;
+                    border: solid 1px #999;
+                    border-radius: 15px;
+                    padding: 2px;
+                    background: #aba;
+                    cursor: pointer;
+                    font-weight: 700;
+                    font-size: 0.8rem;
+                    text-align: center;
+                    &:hover {
+                        border: solid 1px #000;
+                    }
+                }
+                .character-area-control-passthru-button-active {
+                    width: 5rem;
+                    border: solid 1px #955;
+                    border-radius: 15px;
+                    padding: 2px;
+                    background: #fdd;
+                    cursor: pointer;
+                    font-weight: 700;
+                    font-size: 0.8rem;
+                    text-align: center;
+                    &:hover {
+                        border: solid 1px #000;
+                    }
+                }
             }
 
             .character-area-control-title {
@@ -1779,3 +1807,18 @@ audio::-webkit-media-controls-overlay-enclosure{
         }
     }
 }
+
+.blinking {
+    animation: flash 0.7s cubic-bezier(0.91, -0.14, 0, 1.4) infinite;
+}
+
+@keyframes flash {
+    0%,
+    100% {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.5;
+    }
+}