chore: ui extension with components with transcript

Author: Savecoders

src/App.tsx

@@ -1,8 +1,14 @@
 import { useEffect, useState } from 'react';
 import { detectBrowser } from './utils/detectBrowser';
 import { ChromeService, FirefoxService, TranscriptService } from './services';
+import { ClipboardIconButton, ClipboardInput } from '@/components/ui/clipboard';
+import { Button, ClipboardRoot } from '@chakra-ui/react';
+import { InputGroup } from './components/ui/input-group';
+import { SkeletonText } from './components/ui/skeleton';
 function App() {
   const [transcriptService, setTranscriptService] = useState<TranscriptService | null>(null);
+  const [textTranscription, setTextTranscript] = useState<string | null | undefined>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const browser = detectBrowser();
@@ -17,13 +23,35 @@ function App() {
 
   const onclick = async () => {
     if (transcriptService) {
-      transcriptService.transcriptionVideo();
+      setIsLoading(true);
+      const text = await transcriptService.textTranscriptionVideo();
+      setTextTranscript(text);
+      setIsLoading(false);
     }
   };
 
   return (
     <>
-      <button onClick={onclick}>Click me</button>
+      <Button style={{ marginBottom: '1rem' }} variant='outline' onClick={onclick}>
+        Generate Transcript Video 🔥
+      </Button>
+
+      {isLoading ? (
+        <SkeletonText noOfLines={3} gap='4' />
+      ) : (
+        textTranscription && (
+          <ClipboardRoot maxW='400px' value={textTranscription || ''}>
+            <InputGroup
+              width='full'
+              lineHeight={1}
+              autoFocus
+              endElement={<ClipboardIconButton me='-2' />}
+            >
+              <ClipboardInput />
+            </InputGroup>
+          </ClipboardRoot>
+        )
+      )}
     </>
   );
 }

src/popup/index.tsx

@@ -1,33 +1,35 @@
 import { useEffect, useState } from 'react';
-import BrowserAdapter from '../services/browser.adapter';
-import ChromeService from '../services/chome.service';
-import FirefoxService from '../services/firefox.service';
 import { detectBrowser } from '../utils/detectBrowser';
-
-export default function PopPage() {
-  const [browserAdapter, setBrowserAdapter] = useState<BrowserAdapter<BrowserTab> | null>(null);
+import { ChromeService, FirefoxService, TranscriptService } from '../services';
+function App() {
+  const [transcriptService, setTranscriptService] = useState<TranscriptService | null>(null);
+  const [textTranscription, setTextTranscript] = useState<string | null | undefined>(null);
 
   useEffect(() => {
     const browser = detectBrowser();
     if (browser === 'chrome') {
-      setBrowserAdapter(new ChromeService()); // Chrome, Edge, Brave
+      setTranscriptService(new TranscriptService(new ChromeService())); // Chrome, Edge, Brave
     } else if (browser === 'firefox') {
-      setBrowserAdapter(new FirefoxService()); // Firefox
+      setTranscriptService(new TranscriptService(new FirefoxService()));
     } else {
       console.warn('Navegador no soportado o desconocido');
     }
   }, []);
 
   const onclick = async () => {
-    if (browserAdapter) {
-      await browserAdapter.executeScript(() => {
-        console.log('Hello from the browser!');
-      });
+    if (transcriptService) {
+      const text = await transcriptService.textTranscriptionVideo();
+      console.log(text);
+      setTextTranscript(text);
     }
   };
+
   return (
     <>
-      <button onClick={onclick}>Click me Hello</button>
+      <button onClick={onclick}>Get Transcript</button>
+      {textTranscription && <p>{textTranscription}</p>}
     </>
   );
 }
+
+export default App;