decentraland-ui2 0.39.2 → 0.40.0

package/dist/components/WearablePreview/AnimationControls/AnimationControls.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { AnimationControlsProps } from "./AnimationControls.types";
+export declare const AnimationControls: React.FC<AnimationControlsProps>;

package/dist/components/WearablePreview/AnimationControls/AnimationControls.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import ClickAwayListener from "@mui/material/ClickAwayListener";
+import MenuItem from "@mui/material/MenuItem";
+import MenuList from "@mui/material/MenuList";
+import Paper from "@mui/material/Paper";
+import Popper from "@mui/material/Popper";
+import { useWearablePreviewController } from "../useWearablePreviewController";
+import { StyledAnimationButton, StyledAnimationDivider, StyledAnimationGrow, } from "./AnimationControls.styled";
+export const AnimationControls = ({ wearablePreviewId, className, wearablePreviewController, selectedAnimation, onSelectAnimation, }) => {
+    const { controllerRef, isReady } = useWearablePreviewController(wearablePreviewId, wearablePreviewController);
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef(null);
+    const [socialEmoteAnimations, setSocialEmoteAnimations] = useState(undefined);
+    const selectedIndex = useMemo(() => {
+        if (!socialEmoteAnimations || !selectedAnimation) {
+            return 0;
+        }
+        const index = socialEmoteAnimations.findIndex((anim) => anim.title === selectedAnimation.title);
+        return index >= 0 ? index : 0;
+    }, [socialEmoteAnimations, selectedAnimation]);
+    useEffect(() => {
+        if (isReady && controllerRef.current) {
+            if (socialEmoteAnimations === undefined) {
+                controllerRef.current.emote
+                    .getSocialEmoteAnimations()
+                    .then((socialEmoteAnimations) => {
+                    setSocialEmoteAnimations(socialEmoteAnimations);
+                })
+                    .catch((error) => {
+                    console.error("Error checking social emote:", error);
+                    setSocialEmoteAnimations(null);
+                });
+            }
+        }
+    }, [socialEmoteAnimations, isReady, controllerRef]);
+    const handleMenuItemClick = useCallback((_event, index) => {
+        setOpen(false);
+        onSelectAnimation?.(socialEmoteAnimations[index]);
+    }, [socialEmoteAnimations, onSelectAnimation]);
+    const handleToggle = useCallback(() => {
+        setOpen((prevOpen) => !prevOpen);
+    }, []);
+    const handleClose = useCallback((event) => {
+        if (anchorRef.current &&
+            anchorRef.current.contains(event.target)) {
+            return;
+        }
+        setOpen(false);
+    }, [anchorRef]);
+    if (!socialEmoteAnimations) {
+        return null;
+    }
+    return (_jsxs(React.Fragment, { children: [_jsx(ButtonGroup, { className: className, variant: "contained", ref: anchorRef, "aria-label": "Button group with a nested menu", children: _jsxs(StyledAnimationButton, { size: "small", "aria-controls": open ? "split-button-menu" : undefined, "aria-expanded": open ? "true" : undefined, "aria-label": "select merge strategy", "aria-haspopup": "menu", onClick: handleToggle, children: [socialEmoteAnimations[selectedIndex].title, _jsx(StyledAnimationDivider, { orientation: "vertical", flexItem: true }), open ? _jsx(ArrowDropUpIcon, {}) : _jsx(ArrowDropDownIcon, {})] }) }), _jsx(Popper, { open: open, anchorEl: anchorRef.current, role: undefined, transition: true, disablePortal: true, className: `${className}__popper`, children: ({ TransitionProps, placement }) => (_jsx(StyledAnimationGrow, { ...TransitionProps, placement: placement, children: _jsx(Paper, { children: _jsx(ClickAwayListener, { onClickAway: handleClose, children: _jsx(MenuList, { id: "split-button-menu", autoFocusItem: true, children: socialEmoteAnimations.map((option, index) => (_jsx(MenuItem, { selected: index === selectedIndex, onClick: (event) => handleMenuItemClick(event, index), children: option.title }, option.title))) }) }) }) })) })] }));
+};
+//# sourceMappingURL=AnimationControls.js.map

package/dist/components/WearablePreview/AnimationControls/AnimationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationControls.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/AnimationControls/AnimationControls.tsx"],"names":[],"mappings":"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"}

package/dist/components/WearablePreview/AnimationControls/AnimationControls.styled.d.ts

@@ -0,0 +1,16 @@
+declare const StyledAnimationButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "disabled" | "color" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "tabIndex" | "disableElevation" | "fullWidth" | "startIcon" | "endIcon" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "size"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledAnimationDivider: import("@emotion/styled").StyledComponent<import("@mui/material").DividerOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHRElement>, HTMLHRElement>, "ref"> & {
+    ref?: ((instance: HTMLHRElement | null) => void) | import("react").RefObject<HTMLHRElement> | null | undefined;
+}, "light" | "textAlign" | "className" | "style" | "classes" | "children" | "sx" | "variant" | "orientation" | "absolute" | "flexItem"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledAnimationGrow: import("@emotion/styled").StyledComponent<import("@mui/material").GrowProps & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    placement?: string;
+}, {}, {}>;
+export { StyledAnimationButton, StyledAnimationDivider, StyledAnimationGrow };

package/dist/components/WearablePreview/AnimationControls/AnimationControls.styled.js

@@ -0,0 +1,15 @@
+import styled from "@emotion/styled";
+import { Button, Divider, Grow } from "@mui/material";
+const StyledAnimationButton = styled(Button)(({ theme }) => ({
+    gap: theme.spacing(1),
+}));
+const StyledAnimationDivider = styled(Divider)(({ theme }) => ({
+    height: "calc(100% + 8px)",
+    marginTop: theme.spacing(-0.5),
+    borderColor: theme.palette.common.white,
+}));
+const StyledAnimationGrow = styled(Grow)(({ placement }) => ({
+    transformOrigin: placement === "bottom" ? "center top" : "center bottom",
+}));
+export { StyledAnimationButton, StyledAnimationDivider, StyledAnimationGrow };
+//# sourceMappingURL=AnimationControls.styled.js.map

package/dist/components/WearablePreview/AnimationControls/AnimationControls.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationControls.styled.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/AnimationControls/AnimationControls.styled.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,iBAAiB,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAErD,MAAM,qBAAqB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3D,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CACtB,CAAC,CAAC,CAAA;AAEH,MAAM,sBAAsB,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC7D,MAAM,EAAE,kBAAkB;IAC1B,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC;IAC9B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK;CACxC,CAAC,CAAC,CAAA;AAEH,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CACtC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC;IAClB,eAAe,EAAE,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,eAAe;CACzE,CAAC,CACH,CAAA;AAED,OAAO,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/WearablePreview/AnimationControls/AnimationControls.types.d.ts

@@ -0,0 +1,13 @@
+import { IPreviewController } from "@dcl/schemas";
+import { SocialEmoteAnimation } from "@dcl/schemas/dist/dapps/preview/social-emote-animation";
+export type AnimationControlsProps = {
+    wearablePreviewId: string;
+    className?: string;
+    wearablePreviewController?: IPreviewController;
+    selectedAnimation?: SocialEmoteAnimation;
+    onSelectAnimation?: (animation: SocialEmoteAnimation) => void;
+    renderAnimationSelector?: (props: {
+        socialEmoteAnimations: SocialEmoteAnimation[] | null;
+        onSelectAnimation?: (animation: SocialEmoteAnimation) => void;
+    }) => React.ReactNode;
+};

package/dist/components/WearablePreview/AnimationControls/AnimationControls.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AnimationControls.types.js.map

package/dist/components/WearablePreview/AnimationControls/AnimationControls.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationControls.types.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/AnimationControls/AnimationControls.types.ts"],"names":[],"mappings":""}

package/dist/components/WearablePreview/AnimationControls/index.d.ts

@@ -0,0 +1,2 @@
+export { AnimationControls } from "./AnimationControls";
+export type { AnimationControlsProps } from "./AnimationControls.types";

package/dist/components/WearablePreview/AnimationControls/index.js

@@ -0,0 +1,2 @@
+export { AnimationControls } from "./AnimationControls";
+//# sourceMappingURL=index.js.map

package/dist/components/WearablePreview/AnimationControls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/AnimationControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA"}

package/dist/components/WearablePreview/EmoteControls/EmoteControls.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { EmoteControlsProps } from "./EmoteControls.types";
+export declare const EmoteControls: React.FC<EmoteControlsProps>;

package/dist/components/WearablePreview/EmoteControls/EmoteControls.js

@@ -0,0 +1,174 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-empty-function */
+import { useCallback, useEffect, useState } from "react";
+import { PreviewEmoteEventType } from "@dcl/schemas/dist/dapps/preview/preview-emote-event-type";
+import PauseIcon from "@mui/icons-material/Pause";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import VolumeOffIcon from "@mui/icons-material/VolumeOff";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import { useWearablePreviewController } from "../useWearablePreviewController";
+import { StyledEmoteControlsContainer, StyledFrameControl, StyledFrameInput, StyledPlayButton, StyledRangeInput, StyledSoundButton, } from "./EmoteControls.styled";
+export const EmoteControls = ({ wearablePreviewId, className, hideFrameInput, hideProgressInput, hidePlayButton, hideSoundButton, wearablePreviewController, renderPlayButton, renderSoundButton, renderProgressBar, renderFrameInput, }) => {
+    const { controllerRef, isReady } = useWearablePreviewController(wearablePreviewId, wearablePreviewController);
+    const [frame, setFrame] = useState(0);
+    const [isPlaying, setIsPlaying] = useState(false);
+    const [length, setLength] = useState(undefined);
+    const [isSoundEnabled, setIsSoundEnabled] = useState(false);
+    const [hasSound, setHasSound] = useState(undefined);
+    const [shouldResumePlaying, setShouldResumePlaying] = useState(false);
+    const [isChangingFrame, setIsChangingFrame] = useState(false);
+    const handleAnimationLoop = useCallback(() => {
+        setFrame(0);
+    }, []);
+    const handleAnimationEnd = useCallback(() => {
+        setIsPlaying(false);
+        setFrame((currentFrame) => {
+            const currentLength = length ?? 0;
+            return currentFrame >= Math.floor(currentLength * 100) ? 0 : currentFrame;
+        });
+    }, [length]);
+    const handleAnimationPause = useCallback(() => {
+        setIsPlaying(false);
+    }, []);
+    const handleAnimationPlay = useCallback(async () => {
+        if (!isChangingFrame) {
+            let emoteLength = length;
+            if (!length && controllerRef.current) {
+                emoteLength = await controllerRef.current.emote.getLength();
+            }
+            setIsPlaying(true);
+            setLength(emoteLength);
+        }
+    }, [length, isChangingFrame, controllerRef]);
+    const handleAnimationPlaying = useCallback(({ length: playingLength }) => {
+        setFrame(Math.ceil((playingLength ?? 0) * 100));
+    }, []);
+    useEffect(() => {
+        const controller = controllerRef.current;
+        if (!controller) {
+            return;
+        }
+        controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PLAY, handleAnimationPlay);
+        controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PLAYING, handleAnimationPlaying);
+        controller.emote.events.on(PreviewEmoteEventType.ANIMATION_END, handleAnimationEnd);
+        controller.emote.events.on(PreviewEmoteEventType.ANIMATION_PAUSE, handleAnimationPause);
+        controller.emote.events.on(PreviewEmoteEventType.ANIMATION_LOOP, handleAnimationLoop);
+        return () => {
+            controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PLAY, handleAnimationPlay);
+            controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PLAYING, handleAnimationPlaying);
+            controller.emote.events.off(PreviewEmoteEventType.ANIMATION_END, handleAnimationEnd);
+            controller.emote.events.off(PreviewEmoteEventType.ANIMATION_PAUSE, handleAnimationPause);
+            controller.emote.events.off(PreviewEmoteEventType.ANIMATION_LOOP, handleAnimationLoop);
+        };
+    }, [
+        controllerRef,
+        handleAnimationPlay,
+        handleAnimationPlaying,
+        handleAnimationEnd,
+        handleAnimationPause,
+        handleAnimationLoop,
+    ]);
+    useEffect(() => {
+        if (hasSound === undefined && isReady && controllerRef.current) {
+            controllerRef.current.emote
+                .hasSound()
+                .then((soundExists) => setHasSound(soundExists))
+                .catch((error) => {
+                console.error("Error checking sound:", error);
+                setHasSound(false);
+            });
+        }
+    }, [hasSound, isReady, controllerRef]);
+    const handlePlay = useCallback(async () => {
+        if (!controllerRef.current) {
+            return;
+        }
+        try {
+            await controllerRef.current.emote.play();
+        }
+        catch (error) {
+            console.error("Error playing emote:", error);
+        }
+    }, [controllerRef]);
+    const handlePause = useCallback(async () => {
+        if (!controllerRef.current) {
+            return;
+        }
+        try {
+            await controllerRef.current.emote.pause();
+        }
+        catch (error) {
+            console.error("Error pausing emote:", error);
+        }
+    }, [controllerRef]);
+    const handlePlayPause = useCallback(async () => {
+        if (isPlaying) {
+            await handlePause();
+        }
+        else {
+            await handlePlay();
+        }
+    }, [isPlaying, handlePlay, handlePause]);
+    const handleSoundToggle = useCallback(() => {
+        if (isSoundEnabled) {
+            controllerRef.current?.emote.disableSound();
+        }
+        else {
+            controllerRef.current?.emote.enableSound();
+        }
+        setIsSoundEnabled(!isSoundEnabled);
+    }, [isSoundEnabled, controllerRef]);
+    const handleFrameChange = useCallback(async (value) => {
+        if (isNaN(value) || !controllerRef.current) {
+            return;
+        }
+        let targetValue = value;
+        const currentLength = length ?? 0;
+        if (currentLength * 100 < value) {
+            targetValue = currentLength * 100;
+        }
+        setFrame(targetValue);
+        setIsChangingFrame(true);
+        try {
+            if (isPlaying) {
+                await controllerRef.current.emote.pause();
+                setShouldResumePlaying(true);
+            }
+            await controllerRef.current.emote.goTo(targetValue / 100);
+        }
+        catch (error) {
+            console.error("Error changing frame:", error);
+        }
+    }, [length, isPlaying, controllerRef]);
+    const handleMouseUp = useCallback(async () => {
+        setIsChangingFrame(false);
+        if (shouldResumePlaying && controllerRef.current) {
+            try {
+                await controllerRef.current.emote.play();
+            }
+            catch (error) {
+                console.error("Error resuming play:", error);
+            }
+            setShouldResumePlaying(false);
+        }
+    }, [shouldResumePlaying, controllerRef]);
+    return (_jsxs(StyledEmoteControlsContainer, { className: className, children: [hidePlayButton ? null : renderPlayButton ? (renderPlayButton({
+                isPlaying,
+                onPlay: handlePlay,
+                onPause: handlePause,
+                onToggle: handlePlayPause,
+            })) : (_jsx(StyledPlayButton, { onClick: handlePlayPause, children: isPlaying ? _jsx(PauseIcon, {}) : _jsx(PlayArrowIcon, {}) })), !hideProgressInput ? (renderProgressBar ? (renderProgressBar({
+                frame,
+                length: length ?? 0,
+                onChange: handleFrameChange,
+                onMouseUp: handleMouseUp,
+            })) : (_jsx(StyledRangeInput, { type: "range", value: frame, max: Math.ceil((length ?? 0) * 100), min: 0, step: 1, onChange: (e) => handleFrameChange(Number(e.target.value)), onMouseUp: handleMouseUp }))) : null, hideFrameInput ? null : (_jsx(StyledFrameControl, { children: renderFrameInput ? (renderFrameInput({
+                    frame: Math.round(frame / 100),
+                    onChange: (value) => handleFrameChange(value * 100),
+                })) : (_jsx(StyledFrameInput, { type: "number", value: Math.round(frame / 100), onChange: (e) => handleFrameChange(Number(e.target.value) * 100) })) })), hideSoundButton || !hasSound ? null : renderSoundButton ? (renderSoundButton({
+                isSoundEnabled,
+                hasSound,
+                onToggle: handleSoundToggle,
+            })) : (_jsx(StyledSoundButton, { muted: !isSoundEnabled, onClick: handleSoundToggle, children: isSoundEnabled ? _jsx(VolumeUpIcon, {}) : _jsx(VolumeOffIcon, {}) }))] }));
+};
+//# sourceMappingURL=EmoteControls.js.map

package/dist/components/WearablePreview/EmoteControls/EmoteControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmoteControls.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/EmoteControls/EmoteControls.tsx"],"names":[],"mappings":"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"}

package/dist/components/WearablePreview/EmoteControls/EmoteControls.styled.d.ts

@@ -0,0 +1,26 @@
+declare const StyledEmoteControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledPlayButton: import("@emotion/styled").StyledComponent<import("../../Button").ButtonProps & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledSoundButton: import("@emotion/styled").StyledComponent<import("../../Button").ButtonProps & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    muted?: boolean;
+}, {}, {}>;
+declare const StyledRangeInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+declare const StyledFrameControl: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const StyledFrameInput: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType;
+}, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+export { StyledEmoteControlsContainer, StyledPlayButton, StyledSoundButton, StyledRangeInput, StyledFrameControl, StyledFrameInput, };

package/dist/components/WearablePreview/EmoteControls/EmoteControls.styled.js

@@ -0,0 +1,98 @@
+import styled from "@emotion/styled";
+import { Box } from "@mui/material";
+import { Button } from "../../Button";
+const StyledEmoteControlsContainer = styled(Box)(({ theme }) => ({
+    display: "flex",
+    position: "absolute",
+    width: "100%",
+    bottom: 0,
+    margin: `${theme.spacing(2)} 0`,
+    padding: `0 ${theme.spacing(3)}`,
+    gap: theme.spacing(2),
+}));
+const StyledPlayButton = styled(Button)(({ theme }) => ({
+    width: 56,
+    height: 44,
+    padding: 0,
+    minWidth: "unset",
+    background: "rgba(0, 0, 0, 0.64) !important",
+    "& svg": {
+        marginLeft: theme.spacing(0.5),
+    },
+}));
+const StyledSoundButton = styled(Button)(({ theme, muted }) => ({
+    marginLeft: theme.spacing(2.5),
+    minWidth: 25,
+    background: "none",
+    padding: 0,
+    opacity: muted ? 0.5 : 1,
+}));
+const StyledRangeInput = styled("input")(({ theme }) => ({
+    flex: 1,
+    width: "100%",
+    background: "none",
+    WebkitAppearance: "none",
+    "&:focus": {
+        outline: "none",
+    },
+    "&::-webkit-slider-thumb": {
+        WebkitAppearance: "none",
+        width: 24,
+        height: 24,
+        borderRadius: 10,
+        backgroundColor: "#736e7d",
+        overflow: "visible",
+        cursor: "pointer",
+        paddingBottom: theme.spacing(0.625),
+        marginTop: theme.spacing(-0.5),
+    },
+    "&::-moz-range-thumb": {
+        width: 24,
+        height: 24,
+        borderRadius: 20,
+        backgroundColor: "#736e7d",
+        overflow: "visible",
+        cursor: "pointer",
+        border: "none",
+    },
+    "&::-ms-thumb": {
+        width: 24,
+        height: 24,
+        borderRadius: 20,
+        backgroundColor: "#736e7d",
+        overflow: "visible",
+        cursor: "pointer",
+    },
+    "&::-webkit-slider-runnable-track": {
+        width: 300,
+        height: 15,
+        background: "rgba(115, 110, 125, 0.32)",
+        border: "none",
+        borderRadius: 10,
+    },
+    "&::-moz-range-track": {
+        width: "100%",
+        height: 15,
+        borderRadius: 10,
+        cursor: "pointer",
+        background: "rgba(115, 110, 125, 0.32)",
+    },
+}));
+const StyledFrameControl = styled("div")({
+    display: "flex",
+    alignItems: "center",
+});
+const StyledFrameInput = styled("input")({
+    width: 56,
+    height: 44,
+    borderRadius: 5,
+    background: "transparent",
+    border: "1px solid rgba(115, 110, 125, 0.4)",
+    color: "white",
+    textAlign: "center",
+    "&:focus-visible": {
+        outline: "1px solid",
+    },
+});
+export { StyledEmoteControlsContainer, StyledPlayButton, StyledSoundButton, StyledRangeInput, StyledFrameControl, StyledFrameInput, };
+//# sourceMappingURL=EmoteControls.styled.js.map

package/dist/components/WearablePreview/EmoteControls/EmoteControls.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmoteControls.styled.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/EmoteControls/EmoteControls.styled.ts"],"names":[],"mappings":"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"}

package/dist/components/WearablePreview/EmoteControls/EmoteControls.types.d.ts

@@ -0,0 +1,32 @@
+import React from "react";
+import { IPreviewController } from "@dcl/schemas";
+export type EmoteControlsProps = {
+    wearablePreviewId: string;
+    className?: string;
+    hideFrameInput?: boolean;
+    hideProgressInput?: boolean;
+    hidePlayButton?: boolean;
+    hideSoundButton?: boolean;
+    wearablePreviewController?: IPreviewController;
+    renderPlayButton?: (props: {
+        isPlaying: boolean;
+        onPlay: () => Promise<void>;
+        onPause: () => Promise<void>;
+        onToggle: () => Promise<void>;
+    }) => React.ReactNode;
+    renderSoundButton?: (props: {
+        isSoundEnabled: boolean;
+        hasSound: boolean;
+        onToggle: () => void;
+    }) => React.ReactNode;
+    renderProgressBar?: (props: {
+        frame: number;
+        length: number;
+        onChange: (value: number) => Promise<void>;
+        onMouseUp: () => Promise<void>;
+    }) => React.ReactNode;
+    renderFrameInput?: (props: {
+        frame: number;
+        onChange: (value: number) => Promise<void>;
+    }) => React.ReactNode;
+};

package/dist/components/WearablePreview/EmoteControls/EmoteControls.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=EmoteControls.types.js.map

package/dist/components/WearablePreview/EmoteControls/EmoteControls.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmoteControls.types.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/EmoteControls/EmoteControls.types.ts"],"names":[],"mappings":""}

package/dist/components/WearablePreview/EmoteControls/index.d.ts

@@ -0,0 +1,2 @@
+export { EmoteControls } from "./EmoteControls";
+export type { EmoteControlsProps } from "./EmoteControls.types";

package/dist/components/WearablePreview/EmoteControls/index.js

@@ -0,0 +1,2 @@
+export { EmoteControls } from "./EmoteControls";
+//# sourceMappingURL=index.js.map

package/dist/components/WearablePreview/EmoteControls/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/EmoteControls/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA"}

package/dist/components/WearablePreview/TranslationControls/TranslationControls.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { TranslationControlsProps } from "./TranslationControls.types";
+export declare const TranslationControls: React.FC<TranslationControlsProps>;

package/dist/components/WearablePreview/TranslationControls/TranslationControls.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import SwapVertIcon from "@mui/icons-material/SwapVert";
+import { useWearablePreviewController } from "../useWearablePreviewController";
+import { VerticalPosition, } from "./TranslationControls.types";
+import { StyledIconWrapper, StyledSlider, StyledTranslationControlsContainer, StyledVerticalSliderContainer, } from "./TranslationControls.styled";
+export const TranslationControls = ({ wearablePreviewId, vertical, className, verticalPosition = VerticalPosition.RIGHT, wearablePreviewController, }) => {
+    const { controllerRef } = useWearablePreviewController(wearablePreviewId, wearablePreviewController);
+    const handleControlTranslation = useCallback((_event, value) => {
+        const _value = Array.isArray(value) ? value[0] : value;
+        controllerRef.current?.scene.panCamera({ y: _value * -1 });
+    }, [controllerRef]);
+    return (_jsx(StyledTranslationControlsContainer, { className: className, verticalPosition: verticalPosition, children: vertical ? (_jsxs(StyledVerticalSliderContainer, { children: [_jsx(StyledIconWrapper, { children: _jsx(SwapVertIcon, {}) }), _jsx(StyledSlider, { orientation: "vertical", defaultValue: 0, step: 0.1, min: -2, max: 2, onChange: handleControlTranslation })] })) : null }));
+};
+//# sourceMappingURL=TranslationControls.js.map

package/dist/components/WearablePreview/TranslationControls/TranslationControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TranslationControls.js","sourceRoot":"","sources":["../../../../src/components/WearablePreview/TranslationControls/TranslationControls.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,YAAY,MAAM,8BAA8B,CAAA;AACvD,OAAO,EAAE,4BAA4B,EAAE,MAAM,iCAAiC,CAAA;AAC9E,OAAO,EAEL,gBAAgB,GACjB,MAAM,6BAA6B,CAAA;AACpC,OAAO,EACL,iBAAiB,EACjB,YAAY,EACZ,kCAAkC,EAClC,6BAA6B,GAC9B,MAAM,8BAA8B,CAAA;AAErC,MAAM,CAAC,MAAM,mBAAmB,GAAuC,CAAC,EACtE,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,gBAAgB,GAAG,gBAAgB,CAAC,KAAK,EACzC,yBAAyB,GAC1B,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,4BAA4B,CACpD,iBAAiB,EACjB,yBAAyB,CAC1B,CAAA;IACD,MAAM,wBAAwB,GAAG,WAAW,CAC1C,CAAC,MAAa,EAAE,KAAwB,EAAE,EAAE;QAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAA;QACtD,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAA;IAED,OAAO,CACL,KAAC,kCAAkC,IACjC,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,gBAAgB,YAEjC,QAAQ,CAAC,CAAC,CAAC,CACV,MAAC,6BAA6B,eAC5B,KAAC,iBAAiB,cAChB,KAAC,YAAY,KAAG,GACE,EACpB,KAAC,YAAY,IACX,WAAW,EAAC,UAAU,EACtB,YAAY,EAAE,CAAC,EACf,IAAI,EAAE,GAAG,EACT,GAAG,EAAE,CAAC,CAAC,EACP,GAAG,EAAE,CAAC,EACN,QAAQ,EAAE,wBAAwB,GAClC,IAC4B,CACjC,CAAC,CAAC,CAAC,IAAI,GAC2B,CACtC,CAAA;AACH,CAAC,CAAA"}

package/dist/components/WearablePreview/TranslationControls/TranslationControls.styled.d.ts

@@ -0,0 +1,25 @@
+import { HorizontalPosition, VerticalPosition } from "./TranslationControls.types";
+declare const StyledTranslationControlsContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    horizontalPosition?: HorizontalPosition;
+    verticalPosition?: VerticalPosition;
+}, {}, {}>;
+declare const StyledVerticalSliderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledIconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+declare const StyledSlider: import("@emotion/styled").StyledComponent<import("@mui/material").SliderOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "disabled" | "components" | "color" | "scale" | "className" | "style" | "classes" | "sx" | "track" | "defaultValue" | "tabIndex" | "aria-label" | "aria-labelledby" | "aria-valuetext" | "onChange" | "size" | "name" | "value" | "slots" | "slotProps" | "orientation" | "componentsProps" | "max" | "disableSwap" | "getAriaLabel" | "getAriaValueText" | "marks" | "min" | "onChangeCommitted" | "shiftStep" | "step" | "valueLabelDisplay" | "valueLabelFormat"> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+export { StyledIconWrapper, StyledSlider, StyledTranslationControlsContainer, StyledVerticalSliderContainer, };