Spaces:
Running
Running
Update src/App.tsx
Browse files- src/App.tsx +22 -16
src/App.tsx
CHANGED
@@ -1,4 +1,4 @@
|
|
1 |
-
// src/App.tsx (نسخه نهایی
|
2 |
import React, { useEffect, useRef, useState, FC } from "react";
|
3 |
import './App.scss';
|
4 |
import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
|
@@ -21,27 +21,22 @@ const CustomModal: FC<CustomModalProps> = ({ isOpen, onClose, onSave, initialNam
|
|
21 |
const [name, setName] = useState(initialName);
|
22 |
const [instructions, setInstructions] = useState(initialInstructions);
|
23 |
useEffect(() => {
|
24 |
-
if (isOpen) {
|
25 |
-
setName(initialName);
|
26 |
-
setInstructions(initialInstructions);
|
27 |
-
}
|
28 |
}, [isOpen, initialName, initialInstructions]);
|
29 |
if (!isOpen) return null;
|
30 |
const handleSave = () => {
|
31 |
-
if (name.trim() && instructions.trim()) {
|
32 |
-
|
33 |
-
onClose();
|
34 |
-
} else { alert("لطفا نام و دستورالعملها را وارد کنید."); }
|
35 |
};
|
36 |
return (
|
37 |
<div className="modal-overlay" onClick={onClose}>
|
38 |
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
39 |
<div className="modal-header"><h3>ساخت شخصیت اختصاصی</h3><button className="close-button" onClick={onClose}>×</button></div>
|
40 |
<div className="modal-body">
|
41 |
-
<div className="form-group"><label htmlFor="name">نام
|
42 |
-
<div className="form-group"><label htmlFor="instructions"
|
43 |
</div>
|
44 |
-
<div className="modal-footer"><button className="save-button" onClick={handleSave}
|
45 |
</div>
|
46 |
</div>
|
47 |
);
|
@@ -93,7 +88,7 @@ const AppInternal: React.FC = () => {
|
|
93 |
};
|
94 |
return (
|
95 |
<>
|
96 |
-
<div className="main-wrapper">
|
97 |
<div className="header-controls">
|
98 |
<button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(v => !v)}>
|
99 |
<span className="material-symbols-outlined">psychology</span>
|
@@ -105,12 +100,23 @@ const AppInternal: React.FC = () => {
|
|
105 |
{isNotificationOpen && <div className="notification-popover-wrapper open"><div className="popover-content">مدلهای هوش مصنوعی میتوانند اشتباه کنند.</div></div>}
|
106 |
<PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelect={handleSelectPersonality} />
|
107 |
|
108 |
-
<div className="media-area">
|
109 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
110 |
{isMicActive && !isCamActive && <div id="large-logo-container"><Logo isMini={false} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} /></div>}
|
111 |
</div>
|
112 |
|
113 |
-
<ControlTray videoRef={videoRef} onUserSpeakingChange={setIsUserSpeaking} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={
|
114 |
</div>
|
115 |
<CustomModal isOpen={isCustomModalOpen} onClose={() => setIsCustomModalOpen(false)} onSave={(name, instructions) => changePersonality('custom', { name, instructions })} initialName={customUserName} initialInstructions={customInstructions} />
|
116 |
</>
|
|
|
1 |
+
// src/App.tsx (نسخه نهایی با اصلاحات ظاهری)
|
2 |
import React, { useEffect, useRef, useState, FC } from "react";
|
3 |
import './App.scss';
|
4 |
import { AppProvider, useAppContext, PersonalityType, PersonalityInstructions } from "./contexts/AppContext";
|
|
|
21 |
const [name, setName] = useState(initialName);
|
22 |
const [instructions, setInstructions] = useState(initialInstructions);
|
23 |
useEffect(() => {
|
24 |
+
if (isOpen) { setName(initialName); setInstructions(initialInstructions); }
|
|
|
|
|
|
|
25 |
}, [isOpen, initialName, initialInstructions]);
|
26 |
if (!isOpen) return null;
|
27 |
const handleSave = () => {
|
28 |
+
if (name.trim() && instructions.trim()) { onSave(name.trim(), instructions.trim()); onClose(); }
|
29 |
+
else { alert("لطفا نام و دستورالعملها را وارد کنید."); }
|
|
|
|
|
30 |
};
|
31 |
return (
|
32 |
<div className="modal-overlay" onClick={onClose}>
|
33 |
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
34 |
<div className="modal-header"><h3>ساخت شخصیت اختصاصی</h3><button className="close-button" onClick={onClose}>×</button></div>
|
35 |
<div className="modal-body">
|
36 |
+
<div className="form-group"><label htmlFor="name">نام شما</label><input id="name" type="text" placeholder="مثلا: علی" value={name} onChange={(e) => setName(e.target.value)} /></div>
|
37 |
+
<div className="form-group"><label htmlFor="instructions">دستورالعملها</label><textarea id="instructions" placeholder="مثلا: خیلی خودمونی و بامزه صحبت کن..." value={instructions} onChange={(e) => setInstructions(e.target.value)} rows={6} /></div>
|
38 |
</div>
|
39 |
+
<div className="modal-footer"><button className="save-button" onClick={handleSave}>ذخیره</button></div>
|
40 |
</div>
|
41 |
</div>
|
42 |
);
|
|
|
88 |
};
|
89 |
return (
|
90 |
<>
|
91 |
+
<div className="main-wrapper">
|
92 |
<div className="header-controls">
|
93 |
<button aria-label="انتخاب شخصیت" className="header-icon-button" onClick={() => setIsPersonalityMenuOpen(v => !v)}>
|
94 |
<span className="material-symbols-outlined">psychology</span>
|
|
|
100 |
{isNotificationOpen && <div className="notification-popover-wrapper open"><div className="popover-content">مدلهای هوش مصنوعی میتوانند اشتباه کنند.</div></div>}
|
101 |
<PersonalityMenu isOpen={isPersonalityMenuOpen} onClose={() => setIsPersonalityMenuOpen(false)} onSelect={handleSelectPersonality} />
|
102 |
|
103 |
+
<div className="media-area">
|
104 |
+
{/* ✅ تغییر اصلی اینجاست: افزودن کلاسهای موقعیتیابی و اندازه */}
|
105 |
+
<video
|
106 |
+
id="video-feed"
|
107 |
+
ref={videoRef}
|
108 |
+
autoPlay
|
109 |
+
playsInline
|
110 |
+
className={cn(
|
111 |
+
'absolute top-0 left-0 w-full h-full object-cover', // <-- این کلاسها ویدیو را تمامصفحه میکنند
|
112 |
+
{ hidden: !isCamActive },
|
113 |
+
{ "scale-x-[-1]": currentFacingMode === 'user' }
|
114 |
+
)}
|
115 |
+
/>
|
116 |
{isMicActive && !isCamActive && <div id="large-logo-container"><Logo isMini={false} isActive={true} isAi={false} speakingVolume={volume} isUserSpeaking={isUserSpeaking} /></div>}
|
117 |
</div>
|
118 |
|
119 |
+
<ControlTray videoRef={videoRef} onUserSpeakingChange={setIsUserSpeaking} isAppMicActive={isMicActive} onAppMicToggle={setIsMicActive} isAppCamActive={isAppCamActive} onAppCamToggle={setIsCamActive} currentFacingMode={currentFacingMode} onFacingModeChange={setCurrentFacingMode} />
|
120 |
</div>
|
121 |
<CustomModal isOpen={isCustomModalOpen} onClose={() => setIsCustomModalOpen(false)} onSave={(name, instructions) => changePersonality('custom', { name, instructions })} initialName={customUserName} initialInstructions={customInstructions} />
|
122 |
</>
|