@hhgtech/hhg-components 1.29.532 → 1.29.533-beta-1

package/build/{InputDate-f44138a5.js → InputDate-3f67d253.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
 var React = require('react');
 var core = require('@mantine/core');
 var classNames = require('classnames');
 var dayjs = require('dayjs');
-var index$1 = require('./index-64884964.js');
+var index$1 = require('./index-6727adc2.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-9d1df679.js');
-var Locale = require('./Locale-23981f35.js');
-var index$2 = require('./index-68b84419.js');
+var index = require('./index-25604ddf.js');
+var Locale = require('./Locale-235fce78.js');
+var index$2 = require('./index-ca4fc533.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{LastPeriod-1e613fcb.js → LastPeriod-74964bd2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{MobileBottomNavigationIcon-b7c0293d.js → MobileBottomNavigationIcon-44485c7c.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
 var React = require('react');
-var index = require('./index-68b84419.js');
+var index = require('./index-ca4fc533.js');
 var miscTheme = require('./miscTheme.js');
 var react = require('@emotion/react');
 var styled = require('@emotion/styled');
-var utils = require('./utils-5e745d8e.js');
+var utils = require('./utils-66973a77.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 

package/build/{SiteWideBanner-83b05580.js → SiteWideBanner-a0782b4e.js}

@@ -1,24 +1,24 @@
 'use strict';
 
 var React = require('react');
-var index$2 = require('./index-cb7b6b9a.js');
+var index$2 = require('./index-a7f0cd3a.js');
 var styled = require('@emotion/styled');
 var miscTheme = require('./miscTheme.js');
-var index = require('./index-68b84419.js');
-var index$1 = require('./index-18f29c69.js');
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
-var index$6 = require('./index-9d1df679.js');
-var index$5 = require('./index-53f0c004.js');
+var index = require('./index-ca4fc533.js');
+var index$1 = require('./index-ce04c1f9.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
+var index$6 = require('./index-25604ddf.js');
+var index$5 = require('./index-aa5de1ae.js');
 var core = require('@mantine/core');
-var number = require('./number-108ef76d.js');
-var index$3 = require('./index-fc5a1a81.js');
+var number = require('./number-6a5c3d10.js');
+var index$3 = require('./index-eb0d9686.js');
 var hooks = require('@mantine/hooks');
-var index$4 = require('./index-7abd825b.js');
-var index$7 = require('./index-b45ce592.js');
+var index$4 = require('./index-921113e3.js');
+var index$7 = require('./index-52293cb1.js');
 var constantsDomainLocales = require('./constantsDomainLocales.js');
 var core$1 = require('@hhgtech/icons/core');
 var Cookies = require('js-cookie');
-var utils = require('./utils-5e745d8e.js');
+var utils = require('./utils-66973a77.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -167,7 +167,7 @@ const LanguageLabel = ({ locale, label, href, }) => {
         React__default["default"].createElement("span", null, label)));
 };
 
-var useStyles$1 = core.createStyles((theme, { layout }) => {
+var useStyles$1 = core.createStyles((theme, { layout, useSquareRatioThumbnail }) => {
     return {
         root: {
             display: 'block',
@@ -175,16 +175,15 @@ var useStyles$1 = core.createStyles((theme, { layout }) => {
             '&, & *': {
                 borderRadius: 4,
             },
-            [theme.fn.largerThan('sm')]: Object.assign({}, (layout === 'overlay' && {
-                '&:hover': {
+            [theme.fn.largerThan('sm')]: {
+                '&:hover': Object.assign(Object.assign({}, (layout === 'overlay' && {
                     '.overlay-info': {
                         transform: 'translateY(-10px)',
                     },
-                    '.item-overlay-wrapper': {
+                })), { '.item-overlay-wrapper': {
                         backgroundColor: 'rgba(0,0,0,0.4)',
-                    },
-                },
-            })),
+                    } }),
+            },
         },
         inner: Object.assign({ display: 'flex', gap: 8, '&, *': {
                 pointerEvents: 'none !important',
@@ -200,10 +199,9 @@ var useStyles$1 = core.createStyles((theme, { layout }) => {
         thumbFrame: {
             backgroundColor: '#000',
         },
-        thumbWrapper: Object.assign({}, (layout === 'horizon' && {
+        thumbWrapper: Object.assign({}, (layout === 'horizon' && Object.assign(Object.assign({}, (!useSquareRatioThumbnail && {
             width: 64,
-            flexShrink: 0,
-        })),
+        })), { flexShrink: 0 }))),
         overlayWrapper: { transition: 'all .3s ease' },
         overlay: {
             position: 'absolute',
@@ -238,36 +236,112 @@ var useStyles$1 = core.createStyles((theme, { layout }) => {
     };
 });
 
+const VIDEO_THUMBNAIL_RATIO = 16 / 9;
+const SHORT_THUMBNAIL_RATIO = 240 / 431;
+
+function secondsTo24HoursFormat(sec_num = 0) {
+    const hours = Math.floor(sec_num / 3600);
+    const minutes = Math.floor((sec_num - hours * 3600) / 60);
+    const seconds = sec_num - hours * 3600 - minutes * 60;
+    let hoursStr = String(hours);
+    let minutesStr = String(minutes);
+    let secondsStr = String(seconds);
+    if (hours < 10) {
+        hoursStr = '0' + hours;
+    }
+    if (minutes < 10) {
+        minutesStr = '0' + minutes;
+    }
+    if (seconds < 10) {
+        secondsStr = '0' + seconds;
+    }
+    return (hours > 0 ? hoursStr + ':' : '') + minutesStr + ':' + secondsStr;
+}
+function buildVideoSubtitle({ totalView, createTime, formatTotalView, }) {
+    return [
+        typeof totalView === 'number' ? formatTotalView(totalView) : null,
+        createTime,
+    ]
+        .filter(Boolean)
+        .join('<span class="divider">&nbsp;</span>');
+}
+
 const ShortsItem = (_a) => {
-    var { data, layout, styles } = _a, boxProps = tslib_es6.__rest(_a, ["data", "layout", "styles"]);
+    var { data, layout, styles, loading = false, useSquareRatioThumbnail } = _a, boxProps = tslib_es6.__rest(_a, ["data", "layout", "styles", "loading", "useSquareRatioThumbnail"]);
     const { title, totalView, imageMedium, createTime } = data;
-    const { classes, cx } = useStyles$1({ layout }, {
+    const { classes, cx } = useStyles$1({ layout, useSquareRatioThumbnail }, {
         name: 'VideoItem__ShortsItem',
         styles,
     });
+    const thumbnailRatio = useSquareRatioThumbnail
+        ? VIDEO_THUMBNAIL_RATIO
+        : SHORT_THUMBNAIL_RATIO;
     const { t } = index$3.useTranslations();
-    const subTitle = React.useMemo(() => [
-        totalView &&
-            t('common.totalView', {
-                number: number.abbreviateNumber(totalView),
-            }),
+    const subTitle = React.useMemo(() => buildVideoSubtitle({
+        totalView,
         createTime,
-    ]
-        .filter(Boolean)
-        .join('<span class="divider">&nbsp;</span>'), [totalView, createTime]);
-    const infoEle = React.useMemo(() => (React__default["default"].createElement(core.Stack, { spacing: 4, className: cx(classes.overlayInfo, 'overlay-info') },
-        React__default["default"].createElement(index.Text, { size: "s3", className: cx(classes.title), lineClamp: 2 }, title),
-        React__default["default"].createElement(index.Text, { className: classes.subTitle, size: "n1", dangerouslySetInnerHTML: {
-                __html: subTitle,
-            } }))), [title, subTitle]);
+        formatTotalView: (view) => t('common.totalView', {
+            number: number.abbreviateNumber(view),
+        }),
+    }), [createTime, t, totalView]);
+    const subTitleVisible = Boolean(subTitle);
+    const infoElement = (React__default["default"].createElement(core.Stack, { spacing: 4, className: cx(classes.overlayInfo, 'overlay-info') },
+        React__default["default"].createElement(core.Box, { sx: {
+                position: 'relative',
+                minHeight: loading && !title ? core.rem(44) : undefined,
+            } },
+            React__default["default"].createElement(index.Text, { size: "s3", className: cx(classes.title), lineClamp: 2, sx: {
+                    visibility: loading && title ? 'hidden' : 'visible',
+                } }, title),
+            loading && (React__default["default"].createElement(core.Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 4,
+                } },
+                React__default["default"].createElement(core.Skeleton, { height: 22, radius: "sm" }),
+                React__default["default"].createElement(core.Skeleton, { height: 22, radius: "sm" })))),
+        (subTitleVisible || loading) && (React__default["default"].createElement(core.Box, { sx: {
+                position: 'relative',
+                minHeight: loading && !subTitleVisible ? core.rem(16) : undefined,
+            } },
+            subTitleVisible && (React__default["default"].createElement(index.Text, { className: classes.subTitle, size: "n1", sx: {
+                    visibility: loading ? 'hidden' : 'visible',
+                }, dangerouslySetInnerHTML: {
+                    __html: subTitle,
+                } })),
+            loading && (React__default["default"].createElement(core.Box, { sx: {
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    right: 0,
+                } },
+                React__default["default"].createElement(core.Skeleton, { height: 16, width: "55%", radius: "sm" })))))));
     return (React__default["default"].createElement(core.Box, Object.assign({}, boxProps, { className: classes.root }),
         React__default["default"].createElement(core.Box, { className: classes.inner },
             React__default["default"].createElement("div", { className: classes.thumbWrapper },
-                React__default["default"].createElement(core.AspectRatio, { ratio: 240 / 431, className: classes.thumbFrame },
-                    React__default["default"].createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy" }),
-                    layout === 'overlay' && (React__default["default"].createElement(core.Box, { className: cx(classes.overlayWrapper, 'item-overlay-wrapper') },
-                        React__default["default"].createElement(core.Box, { className: cx(classes.overlay, 'item-overlay') }, infoEle))))),
-            layout !== 'overlay' && infoEle)));
+                React__default["default"].createElement(core.AspectRatio, { ratio: thumbnailRatio, className: classes.thumbFrame },
+                    React__default["default"].createElement(core.Box, { sx: { position: 'relative', width: '100%', height: '100%' } },
+                        React__default["default"].createElement("img", { src: imageMedium || '', className: classes.itemThumbImg, alt: title, loading: "lazy", style: {
+                                visibility: loading ? 'hidden' : 'visible',
+                            } }),
+                        loading && (React__default["default"].createElement(core.Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderRadius: 4,
+                                overflow: 'hidden',
+                                zIndex: 1,
+                            } },
+                            React__default["default"].createElement(core.Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
+                    React__default["default"].createElement(core.Box, { className: cx(classes.overlayWrapper, 'item-overlay-wrapper') },
+                        React__default["default"].createElement(core.Box, { className: cx(classes.overlay, 'item-overlay') }, layout === 'overlay' && infoElement)))),
+            layout !== 'overlay' && infoElement)));
 };
 
 const Play = (_a) => {
@@ -333,6 +407,11 @@ var useStyles = core.createStyles((theme, { active, layout }) => {
             bottom: 0,
             backgroundColor: active ? 'rgba(0, 0, 0, .55)' : 'transparent',
             transition: 'all .2s ease',
+            '.play-icon path': {
+                '&:first-child': {
+                    fill: '#262626',
+                },
+            },
         },
         duration: {
             position: 'absolute',
@@ -350,17 +429,24 @@ var useStyles = core.createStyles((theme, { active, layout }) => {
 });
 
 const VideoItem$1 = (_a) => {
-    var { isMobile, data, styles, className, classNames, layout } = _a, boxProps = tslib_es6.__rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout"]);
+    var { isMobile, data, styles, className, classNames, layout, playIcon, loading = false } = _a, boxProps = tslib_es6.__rest(_a, ["isMobile", "data", "styles", "className", "classNames", "layout", "playIcon", "loading"]);
     const { title, imageMedium, createTime, totalView, active, duration } = data;
     const { locale, t } = index$3.useTranslations();
     const { cx, classes, theme } = useStyles({ active, layout }, { name: 'VideoItem__VideoItem', classNames, styles });
-    const subTitle = React.useMemo(() => [
-        totalView &&
-            t('common.totalView', { number: number.abbreviateNumber(totalView) }),
-        createTime,
-    ]
-        .filter(Boolean)
-        .join('<span class="divider">&nbsp;</span>'), [totalView, createTime]);
+    const PlayIcon = playIcon || Play;
+    const subTitle = React.useMemo(() => ({
+        visible: Boolean(totalView || createTime),
+        formated: buildVideoSubtitle({
+            totalView,
+            createTime,
+            formatTotalView: (view) => t('common.totalView', { number: number.abbreviateNumber(view) }),
+        }),
+    }), [createTime, t, totalView]);
+    const fallbackThumbSrc = index$1.CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
+    const thumbSrc = imageMedium || fallbackThumbSrc;
+    const durationLabel = typeof duration === 'number' && duration > 0
+        ? secondsTo24HoursFormat(duration)
+        : undefined;
     return (React__default["default"].createElement(core.Box, Object.assign({}, boxProps, { className: cx(className, classes.root) }),
         React__default["default"].createElement(core.Box, { className: classes.inner },
             React__default["default"].createElement(core.Box, { className: classes.thumbWrapper },
@@ -370,24 +456,80 @@ const VideoItem$1 = (_a) => {
                             borderRadius: 4,
                         },
                     }) },
-                    React__default["default"].createElement(core.AspectRatio, { ratio: 264 / 148, className: classes.thumbFrame },
-                        React__default["default"].createElement("img", { loading: "lazy", src: imageMedium ||
-                                index$1.CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`), alt: title, onError: (e) => {
-                                e.currentTarget.src = index$1.CommonGAssets.getAssetPath(`videoThumbDefault/${locale}.jpg`);
-                            } })),
-                    typeof duration === 'number' && duration > 0 && (React__default["default"].createElement(core.Box, { className: classes.duration },
-                        React__default["default"].createElement(index.Text, { size: "n1", className: classes.durationTxt }, duration))),
-                    React__default["default"].createElement(core.Flex, { className: classes.overlay, align: 'center', justify: 'center' }, active ? (React__default["default"].createElement(index.Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default["default"].createElement(Play, { size: isMobile ? 32 : 46 }))))),
-            React__default["default"].createElement(core.Stack, { sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
-                React__default["default"].createElement(index.Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2 }, title),
-                React__default["default"].createElement(index.Text, { className: classes.subTitle, size: "n1", color: "#595959", dangerouslySetInnerHTML: {
-                        __html: subTitle,
-                    } })))));
+                    React__default["default"].createElement(core.Box, { sx: { position: 'relative', width: '100%' } },
+                        React__default["default"].createElement(core.AspectRatio, { ratio: VIDEO_THUMBNAIL_RATIO, className: classes.thumbFrame },
+                            React__default["default"].createElement("img", { loading: "lazy", src: thumbSrc, alt: title, style: {
+                                    visibility: loading ? 'hidden' : 'visible',
+                                }, onError: (e) => {
+                                    e.currentTarget.src = fallbackThumbSrc;
+                                } })),
+                        loading && (React__default["default"].createElement(core.Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                left: 0,
+                                right: 0,
+                                bottom: 0,
+                                borderRadius: 4,
+                                overflow: 'hidden',
+                                zIndex: 2,
+                            } },
+                            React__default["default"].createElement(core.Skeleton, { height: "100%", radius: "sm", sx: { display: 'block', lineHeight: 1 } })))),
+                    durationLabel && (React__default["default"].createElement(core.Box, { className: classes.duration, sx: { zIndex: loading ? 3 : undefined } },
+                        React__default["default"].createElement(core.Box, { sx: { position: 'relative' } },
+                            React__default["default"].createElement(index.Text, { size: "n1", className: classes.durationTxt, sx: {
+                                    visibility: loading ? 'hidden' : 'visible',
+                                } }, durationLabel),
+                            loading && (React__default["default"].createElement(core.Box, { sx: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                } },
+                                React__default["default"].createElement(core.Skeleton, { width: 40, height: 14, radius: "sm" })))))),
+                    React__default["default"].createElement(core.Flex, { className: classes.overlay, align: 'center', justify: 'center', sx: {
+                            visibility: loading ? 'hidden' : 'visible',
+                        } }, active ? (React__default["default"].createElement(index.Text, { size: "s3", weight: "semiBold", color: "#fff" }, t('common.playing'))) : (React__default["default"].createElement(PlayIcon, { className: "play-icon", size: isMobile ? 32 : 46 }))))),
+            React__default["default"].createElement(core.Stack, { className: "video-info", sx: { [theme.fn.largerThan('sm')]: { gap: 4 }, gap: 2 } },
+                React__default["default"].createElement(core.Box, { sx: {
+                        position: 'relative',
+                        minHeight: loading && !title ? core.rem(44) : undefined,
+                    } },
+                    React__default["default"].createElement(index.Text, { className: classes.title, size: "s3", color: active ? theme.fn.primaryColor() : '#262626', weight: "semiBold", lineClamp: 2, sx: {
+                            visibility: loading && title ? 'hidden' : 'visible',
+                        } }, title),
+                    loading && (React__default["default"].createElement(core.Box, { sx: {
+                            position: 'absolute',
+                            left: 0,
+                            right: 0,
+                            top: 0,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: 4,
+                        } },
+                        React__default["default"].createElement(core.Skeleton, { height: 22, radius: "sm" }),
+                        React__default["default"].createElement(core.Skeleton, { height: 22, radius: "sm" })))),
+                (subTitle.visible || loading) && (React__default["default"].createElement(core.Box, { sx: {
+                        position: 'relative',
+                        minHeight: loading && !subTitle.visible ? core.rem(16) : undefined,
+                    } },
+                    subTitle.visible && (React__default["default"].createElement(index.Text, { className: classes.subTitle, size: "n1", color: "#595959", sx: {
+                            visibility: loading ? 'hidden' : 'visible',
+                        }, dangerouslySetInnerHTML: {
+                            __html: subTitle.formated,
+                        } })),
+                    loading && (React__default["default"].createElement(core.Box, { sx: {
+                            position: 'absolute',
+                            left: 0,
+                            top: 0,
+                            right: 0,
+                        } },
+                        React__default["default"].createElement(core.Skeleton, { height: 16, width: "55%", radius: "sm" })))))))));
 };
 
 const VideoPlayerModal = (_a) => {
     var { data, isMobile } = _a, rest = tslib_es6.__rest(_a, ["data", "isMobile"]);
-    const { type, videoId, url } = data;
+    const { type, url } = data;
     const os = hooks.useOs();
     const isIos = os === 'ios';
     return (React__default["default"].createElement(index$4.Modal, Object.assign({ size: type === index$5.VideoType.SHORTS ? (isMobile ? 360 : 375) : core.rem(1128), withCloseButton: true, styles: (theme) => ({
@@ -447,46 +589,53 @@ const VideoPlayerModal = (_a) => {
                     backgroundColor: 'rgba(0, 0, 0, 0.85)',
                 },
             },
-        }) }, rest), type === index$5.VideoType.SHORTS ? (React__default["default"].createElement(core.AspectRatio, { ratio: 315 / 560 },
-        React__default["default"].createElement("iframe", { width: "100%", height: "100%", src: `https://www.youtube.com/embed/${videoId}?autoplay=${Number(!isIos)}`, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media;\ngyroscope; picture-in-picture;\nweb-share", allowFullScreen: true }))) : (React__default["default"].createElement(index$7.SocialLinkPreview, { key: url, url: url || '', autoPlay: !isIos }))));
+        }) }, rest),
+        React__default["default"].createElement(core.AspectRatio, { w: '100%', ratio: type === index$5.VideoType.SHORTS ? 315 / 560 : 16 / 9, sx: {
+                '.link-image-wrapper': {
+                    paddingTop: 0,
+                    height: '100%',
+                },
+            } },
+            React__default["default"].createElement(index$7.SocialLinkPreview, { key: url, url: url || '', autoPlay: !isIos }))));
 };
 
 const VideoItem = (_a) => {
-    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile } = _a, props = tslib_es6.__rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile"]);
+    var { data, layout = 'default', disableDefaultFn, redirectToLandingPage, onClick, dataEventCategory, dataEventAction, isMobile, loading } = _a, props = tslib_es6.__rest(_a, ["data", "layout", "disableDefaultFn", "redirectToLandingPage", "onClick", "dataEventCategory", "dataEventAction", "isMobile", "loading"]);
     const { articleLink, id, videoId, title, url, type } = data;
     const [showModal, setShowModal] = React.useState(false);
-    const href = React.useMemo(() => articleLink || `/videos/${type}/?id=${id}`, []);
+    const href = articleLink || `/videos/${type}/?id=${id}`;
     const { locale } = index$3.useTranslations();
+    const dataEventLabel = React.useMemo(() => `https://${constantsDomainLocales.domainLocales[locale]}${href}`, [href, locale]);
+    const handleDefaultClick = (e) => {
+        if (redirectToLandingPage) {
+            localStorage.setItem(index$6.VIDEO_DETAIL_TEMP_STORAGE, JSON.stringify({
+                articleLink,
+                id,
+                videoId,
+                title,
+                url,
+                type,
+            }));
+            return;
+        }
+        e.preventDefault();
+        setShowModal(true);
+    };
     const commonProps = {
         component: 'a',
         href,
         target: articleLink ? '_blank' : '_self',
         'data-event-category': dataEventCategory,
         'data-event-action': dataEventAction,
-        'data-event-label': `https://${constantsDomainLocales.domainLocales[locale]}${href}`,
+        'data-event-label': dataEventLabel,
         onClick: disableDefaultFn
             ? onClick
             : !articleLink
-                ? (e) => {
-                    if (redirectToLandingPage) {
-                        localStorage.setItem(index$6.VIDEO_DETAIL_TEMP_STORAGE, JSON.stringify({
-                            articleLink,
-                            id,
-                            videoId,
-                            title,
-                            url,
-                            type,
-                        }));
-                    }
-                    else {
-                        e.preventDefault();
-                        setShowModal(true);
-                    }
-                }
+                ? handleDefaultClick
                 : undefined,
     };
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        type === index$5.VideoType.SHORTS ? (React__default["default"].createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile }))) : (React__default["default"].createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile }))),
+        type === index$5.VideoType.SHORTS ? (React__default["default"].createElement(ShortsItem, Object.assign({}, props, commonProps, { data: data, layout: layout, isMobile: isMobile, loading: loading }))) : (React__default["default"].createElement(VideoItem$1, Object.assign({}, props, commonProps, { layout: layout, data: data, isMobile: isMobile, loading: loading }))),
         !articleLink && (React__default["default"].createElement(VideoPlayerModal, { opened: Boolean(showModal), data: data, onClose: () => setShowModal(false), isMobile: isMobile }))));
 };
 

package/build/{Spinner-a3dd0a36.js → Spinner-bf130630.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/{WhatsApp-6e913391.js → WhatsApp-96a17bdf.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-04bb6e9a.js');
+var tslib_es6 = require('./tslib.es6-bd69145b.js');
 var React = require('react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

package/build/adapters.js

@@ -2,45 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-a4dec003.js');
-var index$1 = require('./index-005dacc4.js');
-var index$2 = require('./index-e3fbe03b.js');
-require('./tslib.es6-04bb6e9a.js');
+var index = require('./index-f2b61d55.js');
+var index$1 = require('./index-3262a913.js');
+var index$2 = require('./index-89e7ab78.js');
+require('./tslib.es6-bd69145b.js');
 require('react');
-require('./index-c4bd61bf.js');
+require('./index-1571d37e.js');
 require('@mantine/core');
-require('./shared-cfda3e6a.js');
-require('./index-64884964.js');
-require('./index-cb7b6b9a.js');
+require('./shared-eaeb0fa1.js');
+require('./index-6727adc2.js');
+require('./index-a7f0cd3a.js');
 require('@hhgtech/icons/other');
 require('@mantine/hooks');
-require('./index-18f29c69.js');
+require('./index-ce04c1f9.js');
 require('./constantsDomainLocales.js');
-require('./Locale-23981f35.js');
+require('./Locale-235fce78.js');
 require('./constantsIsProduction.js');
-require('./index-3496fb31.js');
-require('./utils-5e745d8e.js');
+require('./index-cdbaa8b6.js');
+require('./utils-66973a77.js');
 require('@emotion/styled');
 require('@mantine/carousel');
-require('./index-68b84419.js');
-require('./index-ecc2a79e.js');
+require('./index-ca4fc533.js');
+require('./index-17432bf3.js');
 require('dayjs');
-require('./index-53f0c004.js');
+require('./index-aa5de1ae.js');
 require('@mantine/notifications');
-require('./index-9d1df679.js');
+require('./index-25604ddf.js');
 require('date-fns/locale');
 require('./constantsSite.js');
 require('./constantsRiskScreener.js');
 require('./miscTheme.js');
 require('classnames');
 require('uuid');
-require('./useUniqueId-540bffa6.js');
+require('./useUniqueId-feaae79f.js');
 require('@emotion/react');
 require('@hhgtech/icons/core');
 require('@mantine/dates');
-require('./index.styles-052a3b95.js');
-require('./translationsContext-dd655b46.js');
-require('./index-180f198b.js');
+require('./index.styles-8c40d0ea.js');
+require('./translationsContext-4113df95.js');
+require('./index-c1c499ca.js');