fixed video greeting browser-sec bug

AIPL-labs · Oct 9, 2024 · 18aff2e · 18aff2e
1 parent acbd0b4
commit 18aff2e
Show file tree

Hide file tree

Showing 10 changed files with 228 additions and 148 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -74,6 +74,7 @@
     "@lunapaint/png-codec": "^0.2.0",
     "@monaco-editor/react": "^4.6.0",
     "@mui/material": "^6.0.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-toast": "^1.2.1",
     "@radix-ui/themes": "^3.1.3",

diff --git a/pizza.html b/pizza.html
@@ -28,14 +28,14 @@
       data-pap-id="access-point-1723591970176-b702a779-664d-47e1-9282-59ac12cbad73"
       type="module"
       crossorigin
-      src="https://ai-workforce.intelligage.net/assets/index-BT6EJaqZ.js"
+      src="https://ai-workforce.intelligage.net/assets/main-DA9GCagc.js "
       data-homebase-url="https://ai-worker.intelligage.workers.dev"
     ></script>
 
     <link
       rel="stylesheet"
       crossorigin
-      href="https://ai-thing.pages.dev/assets/index-lIFVgnUM.css "
+      href="https://ai-thing.pages.dev/assets/main-DjNccSQj.css"
     />
 
     <style>

diff --git a/src/index.ts b/src/index.ts
@@ -77,14 +77,14 @@ import { findFirstPapId } from "./ui/overlay/findFirstPapId";
   }
 
   setupLocalAiFunctions();
-  if (locationState.modes.includes("overlay")) {
+
+  if (
+    !locationState.modes.includes("pap") ||
+    locationState.modes.includes("overlay")
+  ) {
     updateAppState((s) => {
       s.agreedToTerms = true;
     });
   }
-
-  updateAppState((s) => {
-    s.agreedToTerms = true;
-  });
   return App();
 })();
diff --git a/src/ui/character/VideoPlayer.tsx b/src/ui/character/VideoPlayer.tsx
@@ -1,5 +1,5 @@
 import { isUndefined, type ByteLike } from "@mjtdev/engine";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { DataImage } from "../image/DataImage";
 import { Asrs } from "ai-worker-common";
 import {
@@ -19,6 +19,7 @@ export const VideoPlayer = ({
   controls?: boolean;
 }) => {
   const videoRef = useRef<HTMLVideoElement>(null);
+  const [showPlayButton, setShowPlayButton] = useState(false); // Default to not showing the play button
 
   useEffect(() => {
     const videoElement = videoRef.current;
@@ -39,15 +40,22 @@ export const VideoPlayer = ({
       videoElement.src = objectURL;
       const asrWasEnabled = getCustomAsrState().enabled;
 
-      AsrCustoms.stopVadAsr().then(() => videoElement.play());
+      // Check autoplay permission by attempting to play the video
+      AsrCustoms.stopVadAsr().then(() => {
+        videoElement.play().catch((err) => {
+          // If the play attempt fails due to user interaction restrictions, show the play button
+          if (err.name === "NotAllowedError") {
+            setShowPlayButton(true);
+          }
+        });
+      });
+
       videoElement.addEventListener("ended", () => {
         if (asrWasEnabled) {
           AsrCustoms.startCustomAsr();
         }
       });
 
-      // videoElement.play();
-
       return () => {
         videoElement.pause();
         videoElement.src = "";
@@ -57,6 +65,15 @@ export const VideoPlayer = ({
       };
     }
   }, [video]);
+
+  const handlePlayButtonClick = () => {
+    const videoElement = videoRef.current;
+    if (videoElement) {
+      videoElement.play();
+      setShowPlayButton(false); // Hide play button once video starts
+    }
+  };
+
   if (isUndefined(video)) {
     return (
       <DataImage
@@ -67,7 +84,27 @@ export const VideoPlayer = ({
   }
 
   return (
-    <div>
+    <div style={{ position: "relative", display: "inline-block" }}>
+      {showPlayButton && (
+        <button
+          onClick={handlePlayButtonClick}
+          style={{
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            padding: "1em 2em",
+            background: "rgba(0, 0, 0, 0.7)",
+            color: "#fff",
+            border: "none",
+            borderRadius: "5px",
+            cursor: "pointer",
+            zIndex: 1,
+          }}
+        >
+          Play
+        </button>
+      )}
       <video
         ref={videoRef}
         style={{ width: "100%", height: "auto" }}

diff --git a/src/ui/chat/ChatBox.tsx b/src/ui/chat/ChatBox.tsx
@@ -125,7 +125,7 @@ export const ChatBox = memo(
         }}
       >
         <Flex
-          display={windowHeight > MIN_AVATAR_SHOW_HEIGHT_PX ? "flex" : "none"}
+          // display={windowHeight > MIN_AVATAR_SHOW_HEIGHT_PX ? "flex" : "none"}
           direction={"column"}
           align={"center"}
           flexShrink={"1"}

diff --git a/src/ui/user/HARD_GROUPS.ts b/src/ui/user/HARD_GROUPS.ts
@@ -1 +1 @@
-export const HARD_GROUPS = ["app-admin", "app-sales", "beta"];
+export const HARD_GROUPS = ["app-admin", "app-sales", "open-beta"];
diff --git a/src/ui/voice/VoiceEditor.tsx b/src/ui/voice/VoiceEditor.tsx
@@ -1,5 +1,11 @@
 import type { ByteLike } from "@mjtdev/engine";
-import { BrowserFiles, Bytes, Dropzone, Images, Strings } from "@mjtdev/engine";
+import {
+  BrowserFiles,
+  Bytes,
+  Dropzone,
+  Images,
+  Strings,
+} from "@mjtdev/engine";
 import { Card, Flex, Separator, Strong } from "@radix-ui/themes";
 import type {
   AppCharacter,
@@ -9,22 +15,24 @@ import type {
 } from "ai-worker-common";
 import { AppImages, uniqueId } from "ai-worker-common";
 import { FaMicrophoneAlt } from "react-icons/fa";
+import { useState } from "react";
+import * as Collapsible from "@radix-ui/react-collapsible";
 import { AsrCustoms } from "../../asr-custom/AsrCustoms";
 import { useCustomAsrState } from "../../asr-custom/updateCustomAsrState";
+import { audioPlayer } from "../../audio/AudioClipPlayer";
 import { AppEvents } from "../../event/AppEvents";
+import { DataObjectStates } from "../../state/data-object/DataObjectStates";
 import { DatasState } from "../../state/data/DatasState";
 import { getUserState } from "../../state/user/UserState";
-import { useIsUserGroup } from "../../state/user/useIsUserGroup";
 import { AppMessagesState } from "../../state/ws/AppMessagesState";
 import { Ttss } from "../../tts/Ttss";
-import { audioPlayer } from "../../audio/AudioClipPlayer";
 import { DEFAULT_CHAR_URL } from "../DEFAULT_CHAR_URL";
+import { AppButton } from "../common/AppButton";
 import { AppButtonGroup } from "../common/AppButtonGroup";
 import { AppIconButton } from "../common/AppIconButton";
 import { FormInputDisplay } from "../form/FormInputDisplay";
 import { FormFields } from "../user/FormFields";
 import { WaveformDisplay } from "./WaveformDisplay";
-import { DataObjectStates } from "../../state/data-object/DataObjectStates";
 
 export const VoiceEditor = ({
   character,
@@ -38,7 +46,7 @@ export const VoiceEditor = ({
   onChangeVoiceSample: (voiceSample: ByteLike | undefined) => void;
 }) => {
   const { enabled: asrEnabled, speaking: asrSpeaking } = useCustomAsrState();
-  // const isOpenBetaUser = false;
+  const [showAdvanced, setShowAdvanced] = useState(false);
 
   const sampleDisplay = voiceSample ? (
     <Card>
@@ -55,10 +63,9 @@ export const VoiceEditor = ({
               if (!voiceSample) {
                 return AppEvents.dispatchEvent("toast", "No sample");
               }
+              await Ttss.enableTts();
               const ab = await Bytes.toArrayBuffer(voiceSample);
               console.log("enqueueAudioClip", ab);
-              // audioPlayer.start()
-
               audioPlayer.enqueueAudioClip(ab.slice(0));
             },
             download: async () => {
@@ -73,9 +80,7 @@ export const VoiceEditor = ({
               const user = await DataObjectStates.getDataObject<AppUser>(
                 getUserState().id
               );
-              // create a 'fake character' that has the voice-sample
               const fakeImage = await Images.toBlob(DEFAULT_CHAR_URL);
-
               const idRaw = await Bytes.hashOf({ bytes: voiceSample });
               const contentAddress = await Bytes.encodeAsString(idRaw, 16);
               const imageDataId = uniqueId(
@@ -91,7 +96,6 @@ export const VoiceEditor = ({
                 image: fakeImage,
                 voiceSample,
               });
-              // TODO it might be nice to clean voice sample image up after...
               await DatasState.putBlob({
                 blob: png,
                 id: imageDataId,
@@ -179,7 +183,9 @@ export const VoiceEditor = ({
             <Dropzone
               iconSize="4em"
               iconCode="file_upload"
-              inactiveText={`${voiceSample ? "Replace" : "Add"} Voice Sample`}
+              inactiveText={`${
+                voiceSample ? "Replace" : "Add"
+              } Voice Sample`}
               action={async (files: File[]): Promise<void> => {
                 if (!files || files.length < 1) {
                   return;
@@ -213,7 +219,14 @@ export const VoiceEditor = ({
             </AppIconButton>
           </Flex>
         </Flex>
-        {style}
+        <Collapsible.Root open={showAdvanced} onOpenChange={setShowAdvanced}>
+          <Collapsible.Trigger asChild>
+            <AppButton variant="outline" style={{ marginTop: "1em" }}>
+              {showAdvanced ? "Hide Advanced Settings" : "Show Advanced Settings"}
+            </AppButton>
+          </Collapsible.Trigger>
+          <Collapsible.Content>{style}</Collapsible.Content>
+        </Collapsible.Root>
       </Flex>
 
       <Separator orientation="vertical" style={{ height: "20em" }} />

diff --git a/vite.config.ts b/vite.config.ts
@@ -29,22 +29,22 @@ export default defineConfig({
 
     // Local dev settings
     // __HOME_BASE__: JSON.stringify("http://localhost:8787"),
-    // __PAP_ID__: JSON.stringify(
-    //   "access-point-1725394696984-a760a179-851e-48d0-b276-85e7a426239c"
-    // ),
+    // // __PAP_ID__: JSON.stringify(
+    // //   "access-point-1725394696984-a760a179-851e-48d0-b276-85e7a426239c"
+    // // ),
     // __PAP_ID__: undefined,
     // __APP_FRONT__: JSON.stringify("power-user"),
 
     // Production settings
-    __HOME_BASE__: JSON.stringify("https://ai-worker.intelligage.workers.dev"),
-    __PAP_ID__: JSON.stringify(
-      "access-point-1725571260862-23455f95-1253-4dfe-96e3-952ac6af647c"
-    ),
-    __APP_FRONT__: JSON.stringify("pizza-demo"),
+    // __HOME_BASE__: JSON.stringify("https://ai-worker.intelligage.workers.dev"),
+    // __PAP_ID__: JSON.stringify(
+    //   "access-point-1725571260862-23455f95-1253-4dfe-96e3-952ac6af647c"
+    // ),
+    // __APP_FRONT__: JSON.stringify("pizza-demo"),
 
     // AI-Workfroce Production settings
-    // __HOME_BASE__: JSON.stringify("https://ai-worker.intelligage.workers.dev"),
-    // __PAP_ID__: undefined,
-    // __APP_FRONT__: JSON.stringify("power-user"),
+    __HOME_BASE__: JSON.stringify("https://ai-worker.intelligage.workers.dev"),
+    __PAP_ID__: undefined,
+    __APP_FRONT__: JSON.stringify("power-user"),
   },
 });
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export const HARD_GROUPS = ["app-admin", "app-sales", "beta"];
		export const HARD_GROUPS = ["app-admin", "app-sales", "open-beta"];