refactor(Gallery): use useTranslation hook instead of direct i18n calls

src/components/Gallery/Gallery.tsx

@@ -36,6 +36,7 @@ export const Gallery = ({
     emptyMessage,
 }: GalleryProps) => {
     const isMobile = useMobile();
+    const {t} = i18n.useTranslation();
 
     const items = children ? React.Children.map(children, (child) => child.props) : emptyItems;
     const itemsCount = items.length;
@@ -148,7 +149,7 @@ export const Gallery = ({
                     >
                         {!items.length && (
                             <GalleryFallbackText>
-                                {emptyMessage ?? i18n('no-items')}
+                                {emptyMessage ?? t('no-items')}
                             </GalleryFallbackText>
                         )}
                         {activeItem?.view}

src/components/Gallery/components/DesktopGalleryHeader/DesktopGalleryHeader.tsx

@@ -39,6 +39,7 @@ export const DesktopGalleryHeader = ({
     onClose,
 }: DesktopGalleryHeaderProps) => {
     const direction = useDirection();
+    const {t} = i18n.useTranslation();
 
     return (
         <Flex
@@ -88,7 +89,7 @@ export const DesktopGalleryHeader = ({
                     fullScreen={fullScreen}
                     onUpdateFullScreen={onUpdateFullScreen}
                 />
-                <Button size="l" view="flat" aria-label={i18n('close')} onClick={onClose}>
+                <Button size="l" view="flat" aria-label={t('close')} onClick={onClose}>
                     <Icon data={Xmark} />
                 </Button>
             </div>

src/components/Gallery/components/FallbackText/FallbackText.tsx

@@ -10,8 +10,12 @@ const cnFallbackText = block('gallery-fallback-text');
 
 export type GalleryFallbackTextProps = React.HTMLAttributes<HTMLElement>;
 
-export const GalleryFallbackText = ({children, className, ...props}: GalleryFallbackTextProps) => (
-    <div className={cnFallbackText(null, className)} {...props}>
-        {children || i18n('cannot-display-file')}
-    </div>
-);
+export const GalleryFallbackText = ({children, className, ...props}: GalleryFallbackTextProps) => {
+    const {t} = i18n.useTranslation();
+
+    return (
+        <div className={cnFallbackText(null, className)} {...props}>
+            {children || t('cannot-display-file')}
+        </div>
+    );
+};

src/components/Gallery/components/MobileGalleryHeader/MobileGalleryHeader.tsx

@@ -34,6 +34,8 @@ export const MobileGalleryHeader = ({
     hidden,
     interactive,
 }: MobileGalleryHeaderProps) => {
+    const {t} = i18n.useTranslation();
+
     const [mobileActionsOpen, setMobileActionsOpen] = React.useState(false);
 
     const handleMobileActionClose = React.useCallback(() => {
@@ -58,7 +60,7 @@ export const MobileGalleryHeader = ({
                     size="xl"
                     view="flat"
                     onClick={onBackClick}
-                    aria-label={i18n('back')}
+                    aria-label={t('back')}
                     color="primary"
                 >
                     <Icon size={MOBILE_ICON_SIZE} data={ChevronLeft} />
@@ -75,7 +77,7 @@ export const MobileGalleryHeader = ({
                         size="xl"
                         view="flat"
                         onClick={handleMobileActionClick}
-                        aria-label={i18n('close')}
+                        aria-label={t('close')}
                         color="primary"
                         className={cnGalleryHeaderMobile('button-actions')}
                     >

src/components/Gallery/components/actions/FullScreenAction/FullScreenAction.tsx

@@ -13,21 +13,23 @@ export type FullScreenActionProps = {
 
 export const FullScreenAction = React.memo(
     ({fullScreen, onUpdateFullScreen, ...buttonProps}: FullScreenActionProps) => {
+        const {t} = i18n.useTranslation();
+
         const handleToggleFullScreen = React.useCallback(() => {
             onUpdateFullScreen((value) => !value);
         }, [onUpdateFullScreen]);
 
         return (
             <ActionTooltip
-                title={fullScreen ? i18n('exit-full-screen') : i18n('enter-full-screen')}
+                title={fullScreen ? t('exit-full-screen') : t('enter-full-screen')}
                 hotkey="Shift+F"
             >
                 <Button
                     type="button"
                     size="l"
                     view="flat"
                     onClick={handleToggleFullScreen}
-                    aria-label={fullScreen ? i18n('exit-full-screen') : i18n('enter-full-screen')}
+                    aria-label={fullScreen ? t('exit-full-screen') : t('enter-full-screen')}
                     {...buttonProps}
                 >
                     <Icon data={fullScreen ? ChevronsCollapseUpRight : ChevronsExpandUpRight} />

src/components/Gallery/components/views/VideoView/VideoView.tsx

@@ -22,19 +22,24 @@ export const VideoView = ({className, src, autoPlay = true, controls = true}: Vi
     const [status, setStatus] = React.useState<'loading' | 'playing' | 'error'>('loading');
     const [errorMessage, setErrorMessage] = React.useState<string>();
 
+    const {t} = i18n.useTranslation();
+
     const handleCanPlay = React.useCallback(() => {
         setStatus('playing');
     }, []);
 
-    const handleError = React.useCallback((event: React.SyntheticEvent<HTMLVideoElement>) => {
-        setStatus('error');
+    const handleError = React.useCallback(
+        (event: React.SyntheticEvent<HTMLVideoElement>) => {
+            setStatus('error');
 
-        const error = (event.target as HTMLVideoElement).error;
+            const error = (event.target as HTMLVideoElement).error;
 
-        setErrorMessage(
-            error?.MEDIA_ERR_SRC_NOT_SUPPORTED ? i18n('not-supported-video') : i18n('video-error'),
-        );
-    }, []);
+            setErrorMessage(
+                error?.MEDIA_ERR_SRC_NOT_SUPPORTED ? t('not-supported-video') : t('video-error'),
+            );
+        },
+        [t],
+    );
 
     if (status === 'error') {
         return <GalleryFallbackText>{errorMessage}</GalleryFallbackText>;

src/components/Gallery/utils/getGalleryItemCopyLinkAction.tsx

@@ -13,15 +13,17 @@ export function getGalleryItemCopyLinkAction({
     copyUrl,
     onCopy,
 }: GetGalleryItemCopyLinkActionArgs): GalleryItemAction {
+    const {t} = i18n.useTranslation();
+
     return {
         id: 'copy-url',
-        title: i18n('copy-link'),
+        title: t('copy-link'),
         icon: <Icon data={Link} />,
         render: (props) => (
             <CopyToClipboard text={copyUrl} onCopy={onCopy}>
                 {() => (
                     <div>
-                        <ActionTooltip title={i18n('copy-link')}>
+                        <ActionTooltip title={t('copy-link')}>
                             <Button {...props} />
                         </ActionTooltip>
                     </div>

src/components/Gallery/utils/getGalleryItemDownloadAction.tsx

@@ -13,14 +13,16 @@ export function getGalleryItemDownloadAction({
     downloadUrl,
     onClick,
 }: GetGalleryItemDownloadActionArgs): GalleryItemAction {
+    const {t} = i18n.useTranslation();
+
     const handleClick = (event?: MouseEvent) => {
         event?.stopPropagation();
         onClick?.();
     };
 
     return {
         id: 'download',
-        title: i18n('download'),
+        title: t('download'),
         icon: <Icon data={ArrowDownToLine} />,
         href: downloadUrl,
         onClick: handleClick,