Mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-21 21:29:20 +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; if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect(); const rect = containerRef.current.getBoundingClientRect();
if (rect.bottom > TOP) { 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 pmem from '../utils/pmem';
import Icon from './icon'; import Icon from './icon';
import LazyShazam from './lazy-shazam';
import Loader from './loader'; import Loader from './loader';
const { PHANPY_LINGVA_INSTANCES } = import.meta.env; const { PHANPY_LINGVA_INSTANCES } = import.meta.env;
@ -142,23 +143,21 @@ function TranslationBlock({
detectedLang !== targetLangText detectedLang !== targetLangText
) { ) {
return ( return (
<div class="shazam-container"> <LazyShazam>
<div class="shazam-container-inner"> <div class="status-translation-block-mini">
<div class="status-translation-block-mini"> <Icon
<Icon icon="translate"
icon="translate" alt={`Auto-translated from ${sourceLangText}`}
alt={`Auto-translated from ${sourceLangText}`} />
/> <output
<output lang={targetLang}
lang={targetLang} dir="auto"
dir="auto" title={pronunciationContent || ''}
title={pronunciationContent || ''} >
> {translatedContent}
{translatedContent} </output>
</output>
</div>
</div> </div>
</div> </LazyShazam>
); );
} }
return null; return null;