feat: add translate all phrase (#8)

ratmirslv · Mar 18, 2024 · 5963210 · 5963210
1 parent 36f1680
commit 5963210
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 19 deletions.
diff --git a/components/Subtitle.tsx b/components/Subtitle.tsx
@@ -1,8 +1,12 @@
+import { Popover, Text } from '@mantine/core'
+import { useDisclosure } from '@mantine/hooks'
 import { useRef } from 'react'
 import { VideoJsPlayer } from 'video.js'
 
+import TranslateWordPopup from './TranslateWordPopup'
 import Word from './Word'
 
+import { clearWord } from '@/utils/clearWord'
 import { getCleanSubText } from 'utils/getCleanSubText'
 
 type SubtitleProps = {
@@ -21,7 +25,7 @@ export const Subtitle = ({ subtitle, className, player }: SubtitleProps) => {
 	const autoPause = useRef(false)
 
 	const cleanedText = getCleanSubText(subtitle)
-
+	const [opened, { close, open }] = useDisclosure(false)
 	function handleOnMouseEnter() {
 		if (!player?.paused()) {
 			autoPause.current = true
@@ -33,21 +37,42 @@ export const Subtitle = ({ subtitle, className, player }: SubtitleProps) => {
 		if (player && autoPause.current) {
 			autoPause.current = false
 			player.play()
+			if (opened) {
+				close()
+			}
 		}
 	}
+	function handleClick() {
+		open()
+	}
 
 	return (
-		<div
-			onFocus={handleOnMouseEnter}
-			onBlur={handleOnMouseLeave}
-			onMouseEnter={handleOnMouseEnter}
-			className={className}
-			onMouseOver={handleOnMouseEnter}
-			onMouseLeave={handleOnMouseLeave}
-			role="menuitem"
-			tabIndex={0}
+		<Popover
+			position="top"
+			withArrow
+			shadow="md"
+			opened={opened}
+			offset={{ mainAxis: 0, crossAxis: 5 }}
+			clickOutsideEvents={['mouseup', 'touchend']}
 		>
-			{getSubWords(cleanedText)}
-		</div>
+			<Popover.Target>
+				<Text
+					onFocus={handleOnMouseEnter}
+					onBlur={handleOnMouseLeave}
+					onMouseEnter={handleOnMouseEnter}
+					className={className}
+					onMouseOver={handleOnMouseEnter}
+					onMouseLeave={handleOnMouseLeave}
+					role="menuitem"
+					tabIndex={0}
+					onClick={handleClick}
+				>
+					{getSubWords(cleanedText)}
+					<Popover.Dropdown py={0} px={10}>
+						<TranslateWordPopup word={clearWord(cleanedText)} />
+					</Popover.Dropdown>
+				</Text>
+			</Popover.Target>
+		</Popover>
 	)
 }
diff --git a/components/Word.tsx b/components/Word.tsx
@@ -43,10 +43,11 @@ function Word(props: WordProps) {
 					size="xl"
 					onMouseEnter={handleMouseEnter}
 					onMouseLeave={handleMouseLeave}
+					onClick={handleMouseLeave}
 					ref={wordRef}
 				>
 					{`${props.word} `}
-					<Popover.Dropdown>
+					<Popover.Dropdown py={0} px={10}>
 						<TranslateWordPopup word={clearWord(props.word)} />
 					</Popover.Dropdown>
 				</Text>

diff --git a/tests/e2e/index.spec.ts b/tests/e2e/index.spec.ts
@@ -4,12 +4,28 @@ import { test, expect } from '@playwright/test'
 
 test.describe('Main page, open video', () => {
 	test('Should open video and show translated word', async ({ page }) => {
-		await page.route('http://localhost:3000/api/translate', route =>
-			route.fulfill({
-				status: 200,
-				body: JSON.stringify({ text: 'Jahr' }),
-			}),
-		)
+		await page.route('http://localhost:3000/api/translate', route => {
+			if (
+				route
+					.request()
+					.postData()
+					?.match(/Last year the smoking tire went on the Bull Run/g)
+			) {
+				return route.fulfill({
+					status: 200,
+					body: JSON.stringify({
+						text: 'Letztes Jahr ging der rauchende Reifen zum Bull Run',
+					}),
+				})
+			} else if (route.request().postData()?.match(/year/g)) {
+				return route.fulfill({
+					status: 200,
+					body: JSON.stringify({
+						text: 'Jahr',
+					}),
+				})
+			}
+		})
 
 		await page.goto('http://localhost:3000/')
 
@@ -65,6 +81,21 @@ test.describe('Main page, open video', () => {
 		await page.mouse.move(0, 0)
 		await expect(page.getByText('Jahr')).not.toBeVisible()
 		await expect(page.locator('video')).toHaveJSProperty('paused', false)
+
+		//show translate all phrase
+		await page
+			.getByRole('menuitem', { name: 'Last year the smoking tire went on the Bull Run' })
+			.click()
+		await expect(
+			page.getByText('Letztes Jahr ging der rauchende Reifen zum Bull Run'),
+		).toBeVisible()
+
+		//move mouse
+		await page.mouse.move(0, 0)
+		await expect(
+			page.getByText('Letztes Jahr ging der rauchende Reifen zum Bull Run'),
+		).not.toBeVisible()
+		await expect(page.locator('video')).toHaveJSProperty('paused', false)
 	})
 
 	test('Should show error notification when bad response', async ({ page }) => {