-
-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
27 changed files
with
641 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 0 additions & 1 deletion
1
src/content-script/components/ThreadMessageStickyToolbar/MiscMenu.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,3 @@ | ||
|
|
||
| import { FaEllipsis as Ellipsis } from "react-icons/fa6"; | ||
| import { | ||
| LuListOrdered as ListOrdered, | ||
|
|
||
55 changes: 55 additions & 0 deletions
55
src/content-script/components/ThreadMessageStickyToolbar/TtsAnimation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| type SpeakingAnimationProps = { | ||
| isActive?: boolean; | ||
| rows?: number; | ||
| cols?: number; | ||
| }; | ||
|
|
||
| const SpeakingAnimation: React.FC<SpeakingAnimationProps> = ({ | ||
| isActive = true, | ||
| rows = 4, | ||
| cols = 12, | ||
| }) => { | ||
| const [activeDots, setActiveDots] = useState<number[]>([]); | ||
|
|
||
| useEffect(() => { | ||
| if (!isActive) { | ||
| setActiveDots([]); | ||
| return; | ||
| } | ||
|
|
||
| const interval = setInterval(() => { | ||
| const totalDots = rows * cols; | ||
| const newActiveDots = Array.from({ | ||
| length: Math.floor(totalDots / 3), | ||
| }).map(() => Math.floor(Math.random() * totalDots)); | ||
| setActiveDots(newActiveDots); | ||
| }, 400); | ||
|
|
||
| return () => clearInterval(interval); | ||
| }, [isActive, rows, cols]); | ||
|
|
||
| return ( | ||
| <div | ||
| className="tw-grid" | ||
| style={{ | ||
| gridTemplateColumns: `repeat(${cols}, 1fr)`, | ||
| gridTemplateRows: `repeat(${rows}, 1fr)`, | ||
| gap: "3px", | ||
| }} | ||
| > | ||
| {Array.from({ length: rows * cols }).map((_, i) => ( | ||
| <div | ||
| key={i} | ||
| className={cn( | ||
| "tw-h-[3px] tw-w-[3px] tw-rounded-full tw-transition-colors tw-duration-300", // Increased duration from 300 to 500 | ||
| activeDots.includes(i) | ||
| ? "tw-bg-foreground" | ||
| : "tw-bg-muted-foreground", | ||
| )} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default SpeakingAnimation; |
101 changes: 101 additions & 0 deletions
101
src/content-script/components/ThreadMessageStickyToolbar/TtsButton.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import { LuHeadphones, LuPause } from "react-icons/lu"; | ||
|
|
||
| import { Container } from "@/content-script/components/ThreadMessageStickyToolbar"; | ||
| import SpeakingAnimation from "@/content-script/components/ThreadMessageStickyToolbar/TtsAnimation"; | ||
| import useTextToSpeech from "@/content-script/hooks/useTextToSpeech"; | ||
| import CplxUserSettings from "@/cplx-user-settings/CplxUserSettings"; | ||
| import { | ||
| DropdownMenu, | ||
| DropdownMenuContent, | ||
| DropdownMenuContext, | ||
| DropdownMenuItem, | ||
| DropdownMenuTrigger, | ||
| } from "@/shared/components/DropdownMenu"; | ||
| import { DomSelectors } from "@/utils/DomSelectors"; | ||
| import { TTS_VOICES, TtsVoice } from "@/utils/tts"; | ||
|
|
||
| export default function TtsButton({ | ||
| containers, | ||
| containerIndex, | ||
| }: { | ||
| containers: Container[]; | ||
| containerIndex: number; | ||
| }) { | ||
| const { isSpeaking, startPlaying, stopPlaying } = useTextToSpeech({ | ||
| messageIndex: containerIndex + 1, | ||
| }); | ||
|
|
||
| const $bottomButtonBar = $(containers?.[containerIndex]?.messageBlock).find( | ||
| DomSelectors.THREAD.MESSAGE.BOTTOM_BAR, | ||
| ); | ||
|
|
||
| const play = async (voice: TtsVoice) => { | ||
| if (isSpeaking) { | ||
| stopPlaying(); | ||
| } else { | ||
| startPlaying({ | ||
| voice, | ||
| }); | ||
| } | ||
| }; | ||
|
|
||
| if (!$bottomButtonBar.length) return null; | ||
|
|
||
| return ( | ||
| <DropdownMenu> | ||
| <DropdownMenuContext> | ||
| {(context) => ( | ||
| <DropdownMenuTrigger> | ||
| <div | ||
| className={cn( | ||
| "tw-flex tw-w-max tw-items-center tw-gap-2 tw-rounded-md tw-p-3 tw-transition-all tw-animate-in tw-fade-in hover:tw-cursor-pointer hover:tw-bg-secondary active:tw-scale-95", | ||
| { | ||
| "tw-bg-secondary tw-px-4 tw-shadow-lg": isSpeaking, | ||
| }, | ||
| )} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
|
|
||
| if (context.open) context.setOpen(false); | ||
|
|
||
| play(CplxUserSettings.get().defaultTtsVoice ?? TTS_VOICES[0]); | ||
| }} | ||
| onContextMenu={(e) => { | ||
| e.preventDefault(); | ||
|
|
||
| if (isSpeaking) return; | ||
|
|
||
| context.setOpen(!context.open); | ||
| }} | ||
| > | ||
| {isSpeaking ? ( | ||
| <> | ||
| <SpeakingAnimation isActive rows={3} cols={15} /> | ||
| <LuPause className="tw-size-4" /> | ||
| </> | ||
| ) : ( | ||
| <LuHeadphones className="tw-size-4" /> | ||
| )} | ||
| </div> | ||
| </DropdownMenuTrigger> | ||
| )} | ||
| </DropdownMenuContext> | ||
| <DropdownMenuContent> | ||
| {TTS_VOICES.map((voice) => ( | ||
| <DropdownMenuItem | ||
| key={voice} | ||
| value={voice} | ||
| onClick={() => { | ||
| play(voice); | ||
| CplxUserSettings.set((state) => { | ||
| state.defaultTtsVoice = voice; | ||
| }); | ||
| }} | ||
| > | ||
| {voice} | ||
| </DropdownMenuItem> | ||
| ))} | ||
| </DropdownMenuContent> | ||
| </DropdownMenu> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.