@alfalab/core-components 47.18.0-beta.0 → 47.19.0

package/gallery/moderncssm/components/info-bar/Component.js

@@ -1,49 +0,0 @@
-import React, { useContext, useCallback } from 'react';
-import { Typography } from '../../../../typography/moderncssm';
-import { GalleryContext } from '../../context.js';
-import { isVideo } from '../../utils/utils.js';
-import { GALLERY_EVENTS } from '../../utils/constants.js';
-import { Pause, Play, UnmuteVideo, MuteVideo } from '../buttons/index.js';
-import styles from './index.module.css';
-import 'classnames';
-import '../../../../icon-button/moderncssm';
-import '../../../../tooltip/moderncssm/desktop';
-import '@alfalab/icons-glyph/ArrowLeftMIcon';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
-import '@alfalab/icons-glyph/PlayCompactMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
-import '@alfalab/icons-glyph/SoundCrossMIcon';
-import '@alfalab/icons-glyph/SoundMIcon';
-import '../buttons/index.module.css';
-
-const InfoBar = () => {
-    const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo, getCurrentImageMeta, } = useContext(GalleryContext);
-    const image = getCurrentImage();
-    const meta = getCurrentImageMeta();
-    const handleMuteVideo = useCallback(() => {
-        if (mutedVideo) {
-            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_UNMUTE, {
-                detail: { player: meta?.player?.current },
-            });
-            dispatchEvent(customEvent);
-        }
-        else {
-            const customEvent = new CustomEvent(GALLERY_EVENTS.ON_MUTE, {
-                detail: { player: meta?.player?.current },
-            });
-            dispatchEvent(customEvent);
-        }
-        setMutedVideo(!mutedVideo);
-    }, [meta?.player, mutedVideo, setMutedVideo]);
-    const handlePlayVideo = useCallback(() => {
-        setPlayingVideo(!playingVideo);
-    }, [playingVideo, setPlayingVideo]);
-    return isVideo(image?.src) ? (React.createElement("section", { className: styles.videoButtons },
-        playingVideo ? (React.createElement(Pause, { onClick: handlePlayVideo, className: styles.center })) : (React.createElement(Play, { onClick: handlePlayVideo, className: styles.center })),
-        mutedVideo ? (React.createElement(UnmuteVideo, { onClick: handleMuteVideo, className: styles.right })) : (React.createElement(MuteVideo, { onClick: handleMuteVideo, className: styles.right })))) : (React.createElement(Typography.Text, { className: styles.description, tag: 'div', view: 'component', color: 'primary-inverted' }, image?.name));
-};
-
-export { InfoBar };

package/gallery/moderncssm/components/info-bar/index.d.ts

@@ -1 +0,0 @@
-export { InfoBar } from "./Component";

package/gallery/moderncssm/components/info-bar/index.js

@@ -1,21 +0,0 @@
-export { InfoBar } from './Component.js';
-import 'react';
-import '../../../../typography/moderncssm';
-import '../../context.js';
-import '../../utils/utils.js';
-import '../../utils/constants.js';
-import '../buttons/index.js';
-import 'classnames';
-import '../../../../icon-button/moderncssm';
-import '../../../../tooltip/moderncssm/desktop';
-import '@alfalab/icons-glyph/ArrowLeftMIcon';
-import '@alfalab/icons-glyph/ArrowsInwardMIcon';
-import '@alfalab/icons-glyph/ArrowsOutwardMIcon';
-import '@alfalab/icons-glyph/CrossMIcon';
-import '@alfalab/icons-glyph/PauseCompactMIcon';
-import '@alfalab/icons-glyph/PlayCompactMIcon';
-import '@alfalab/icons-glyph/PointerDownMIcon';
-import '@alfalab/icons-glyph/SoundCrossMIcon';
-import '@alfalab/icons-glyph/SoundMIcon';
-import '../buttons/index.module.css';
-import './index.module.css';

package/gallery/moderncssm/components/info-bar/index.module.css

@@ -1,23 +0,0 @@
-/* */
-
-.description {
-    text-align: center;
-    margin-bottom: var(--gap-8);
-}
-
-.videoButtons {
-    padding: 0 var(--gap-8);
-    position: relative;
-    height: 48px;
-}
-
-.center {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.right {
-    position: absolute;
-    right: 0;
-}