Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-02-02 06:06:41 +01:00
Code Issues Projects Releases Packages Wiki Activity

Further utilize lazy shazam

Browse source
This commit is contained in:
Lim Chee Aun 2024-04-04 14:34:28 +08:00
parent 30382d088b
commit 2ad9706304
2 changed files with 20 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/lazy-shazam.jsx
View file

@ -30,7 +30,11 @@ export default function LazyShazam({ children }) {
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
if (rect.bottom > TOP) {
setVisibleStart(true);
if (rect.top < window.innerHeight) {
setVisible(true);
} else {
setVisibleStart(true);
}
}
}, []);

31
src/components/translation-block.jsx
View file

@ -10,6 +10,7 @@ import localeCode2Text from '../utils/localeCode2Text';
import pmem from '../utils/pmem';
import Icon from './icon';
import LazyShazam from './lazy-shazam';
import Loader from './loader';
const { PHANPY_LINGVA_INSTANCES } = import.meta.env;
@ -142,23 +143,21 @@ function TranslationBlock({
detectedLang !== targetLangText
) {
return (
<div class="shazam-container">
<div class="shazam-container-inner">
<div class="status-translation-block-mini">
<Icon
icon="translate"
alt={`Auto-translated from ${sourceLangText}`}
/>
<output
lang={targetLang}
dir="auto"
title={pronunciationContent || ''}
>
{translatedContent}
</output>
</div>
<LazyShazam>
<div class="status-translation-block-mini">
<Icon
icon="translate"
alt={`Auto-translated from ${sourceLangText}`}
/>
<output
lang={targetLang}
dir="auto"
title={pronunciationContent || ''}
>
{translatedContent}
</output>
</div>
</div>
</LazyShazam>
);
}
return null;