diff --git a/src/components/App/SideBar/AudioClip/index.tsx b/src/components/App/SideBar/AudioClip/index.tsx
index cd0d40dfe..db35132a7 100644
--- a/src/components/App/SideBar/AudioClip/index.tsx
+++ b/src/components/App/SideBar/AudioClip/index.tsx
@@ -129,7 +129,7 @@ const _AudioClip = () => {
-
+
diff --git a/src/components/App/SideBar/Transcript/index.tsx b/src/components/App/SideBar/Transcript/index.tsx
index 4e91163a9..c03d0fcaa 100644
--- a/src/components/App/SideBar/Transcript/index.tsx
+++ b/src/components/App/SideBar/Transcript/index.tsx
@@ -1,4 +1,5 @@
import { Button } from '@mui/material'
+import React, { useState } from 'react'
import { MdClose } from 'react-icons/md'
import styled from 'styled-components'
import CopyIcon from '~/components/Icons/CopyIcon'
@@ -7,24 +8,7 @@ import { Flex } from '~/components/common/Flex'
import { useAppStore } from '~/stores/useAppStore'
import { NodeExtended } from '~/types'
import { colors } from '~/utils/colors'
-
-const copyNodeText = (text: string | undefined) => {
- if (text === undefined) {
- return
- }
-
- navigator.clipboard.writeText(text)
-
- const copyButton = document.querySelector('.copy-button')
-
- if (copyButton) {
- copyButton.classList.add('copied')
-
- setTimeout(() => {
- copyButton.classList.remove('copied')
- }, 1000)
- }
-}
+import CheckIcon from '../../../Icons/CheckIcon'
type TranscriptProps = {
stateless?: boolean
@@ -34,10 +18,21 @@ type TranscriptProps = {
export const Transcript = ({ stateless, node }: TranscriptProps) => {
const [transcriptIsOpen, setTranscriptOpen] = useAppStore((s) => [s.transcriptIsOpen, s.setTranscriptOpen])
+ const [isCopied, setIsCopied] = useState(false)
+
if (!stateless && !transcriptIsOpen) {
return null
}
+ const copyNodeText = (text: string | undefined) => {
+ if (text === undefined) {
+ return
+ }
+
+ navigator.clipboard.writeText(text)
+ setIsCopied(true)
+ }
+
return (
@@ -51,9 +46,25 @@ export const Transcript = ({ stateless, node }: TranscriptProps) => {
)}
{node?.text ? (
- } onPointerDown={() => copyNodeText(node?.text)} size="small" variant="outlined">
- Copy
-
+ <>
+ {!isCopied ? (
+ }
+ onPointerDown={() => copyNodeText(node?.text)}
+ size="small"
+ variant="outlined"
+ >
+ Copy
+
+ ) : (
+
+
+
+
+ Copied
+
+ )}
+ >
) : (
)}
@@ -121,3 +132,19 @@ const Box = styled(Flex)`
font-weight: 400;
line-height: 18px;
`
+
+const CopiedButton = styled(Flex)`
+ color: ${colors.SECONDARY_BLUE};
+ font-family: Barlow;
+ font-size: 13px;
+ font-weight: 500;
+ height: 28px;
+ padding: 0 20px;
+ .text {
+ margin-left: 5px;
+ }
+
+ .icon {
+ font-size: 12px;
+ }
+`
diff --git a/src/components/App/SideBar/YouTube/index.tsx b/src/components/App/SideBar/YouTube/index.tsx
index 67761e1e3..848e5874f 100644
--- a/src/components/App/SideBar/YouTube/index.tsx
+++ b/src/components/App/SideBar/YouTube/index.tsx
@@ -79,7 +79,7 @@ export const YouTube = () => {
-
+