From fa85d9a5744c42a313ca7eaf0a08a85587c62b7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Thu, 19 Dec 2024 18:43:39 +0300 Subject: [PATCH 01/11] feat: add side-effects; --- .changeset/nervous-ants-learn.md | 33 ++++++++++++++++++++++++++++++ bin/build.sh | 2 +- packages/base-modal/package.json | 4 +++- packages/form-control/package.json | 1 + packages/pass-code-v1/package.json | 1 + 5 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 .changeset/nervous-ants-learn.md diff --git a/.changeset/nervous-ants-learn.md b/.changeset/nervous-ants-learn.md new file mode 100644 index 0000000000..14795869f3 --- /dev/null +++ b/.changeset/nervous-ants-learn.md @@ -0,0 +1,33 @@ +--- +'@alfalab/core-components-drawer': patch +'@alfalab/core-components-form-control': patch +'@alfalab/core-components-notification': patch +'@alfalab/core-components-notification-manager': patch +'@alfalab/core-components-number-input': patch +'@alfalab/core-components-pagination': patch +'@alfalab/core-components-pass-code': patch +'@alfalab/core-components-pass-code-v1': patch +'@alfalab/core-components-password-input': patch +'@alfalab/core-components-pattern-lock': patch +'@alfalab/core-components-pattern-lock-v1': patch +'@alfalab/core-components-popover': patch +'@alfalab/core-components-popup-sheet': patch +'@alfalab/core-components-portal': patch +'@alfalab/core-components-product-cover': patch +'@alfalab/core-components-pure-cell': patch +'@alfalab/core-components-radio': patch +'@alfalab/core-components-radio-group': patch +'@alfalab/core-components-segmented-control': patch +'@alfalab/core-components-shared': patch +'@alfalab/core-components-skeleton': patch +'@alfalab/core-components-slider-input': patch +'@alfalab/core-components-status-badge': patch +'@alfalab/core-components-stepped-progress-bar': patch +'@alfalab/core-components-switch': patch +'@alfalab/core-components-system-message': patch +'@alfalab/core-components-time-input': patch +'@alfalab/core-components-with-suffix': patch +--- + +- Добавлено "sideEffects": false, чтобы бандлер лучше делал тришейк. +- В SideEffect пакета base-modal добавлена зависимость от полифила. diff --git a/bin/build.sh b/bin/build.sh index 05c0159095..dfd2e40d64 100755 --- a/bin/build.sh +++ b/bin/build.sh @@ -26,7 +26,7 @@ lerna exec --scope @alfalab/core-components-themes -- node $(pwd)/bin/build-them lerna exec --scope @alfalab/core-components-vars -- node $(pwd)/bin/export-css-custom-properties-as-js-vars.js # собираю все подпакеты с компонентами -lerna exec --concurrency $CONCURRENCY \ +lerna exec --scope @alfalab/core-components-base-modal \ --ignore @alfalab/core-components-codemod \ -- $(pwd)/bin/rollup.sh diff --git a/packages/base-modal/package.json b/packages/base-modal/package.json index e49e3c82b9..082d369c96 100644 --- a/packages/base-modal/package.json +++ b/packages/base-modal/package.json @@ -10,7 +10,9 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, + "sideEffects": [ + "matches-polyfill.*" + ], "dependencies": { "@alfalab/core-components-backdrop": "^3.4.5", "@alfalab/core-components-global-store": "^2.1.0", diff --git a/packages/form-control/package.json b/packages/form-control/package.json index 330ad37e20..48924e4279 100644 --- a/packages/form-control/package.json +++ b/packages/form-control/package.json @@ -10,6 +10,7 @@ "access": "public", "directory": "dist" }, + "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pass-code-v1/package.json b/packages/pass-code-v1/package.json index 09b55076f6..44d62d1240 100644 --- a/packages/pass-code-v1/package.json +++ b/packages/pass-code-v1/package.json @@ -10,6 +10,7 @@ "access": "public", "directory": "dist" }, + "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" From 15b93442bcc646d3f48adc1fab888fb16c4eb00e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Thu, 19 Dec 2024 18:47:30 +0300 Subject: [PATCH 02/11] fix: rollback build; --- bin/build.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bin/build.sh b/bin/build.sh index dfd2e40d64..05c0159095 100755 --- a/bin/build.sh +++ b/bin/build.sh @@ -26,7 +26,7 @@ lerna exec --scope @alfalab/core-components-themes -- node $(pwd)/bin/build-them lerna exec --scope @alfalab/core-components-vars -- node $(pwd)/bin/export-css-custom-properties-as-js-vars.js # собираю все подпакеты с компонентами -lerna exec --scope @alfalab/core-components-base-modal \ +lerna exec --concurrency $CONCURRENCY \ --ignore @alfalab/core-components-codemod \ -- $(pwd)/bin/rollup.sh From 4d31891d42e955a6038ac955ca29331828dbc8f8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Fri, 20 Dec 2024 10:13:09 +0300 Subject: [PATCH 03/11] feat(galary): hls light; --- .changeset/nervous-ants-learn.md | 33 ------------------- .changeset/strange-coats-exercise.md | 5 +++ packages/base-modal/package.json | 4 +-- packages/drawer/package.json | 1 - packages/form-control/package.json | 1 - .../components/image-viewer/video/index.tsx | 8 +++-- packages/notification-manager/package.json | 1 - packages/notification/package.json | 1 - packages/number-input/package.json | 1 - packages/pagination/package.json | 1 - packages/pass-code-v1/package.json | 1 - packages/pass-code/package.json | 1 - packages/password-input/package.json | 1 - packages/pattern-lock-v1/package.json | 1 - packages/pattern-lock/package.json | 1 - packages/popover/package.json | 1 - packages/popup-sheet/package.json | 1 - packages/portal/package.json | 1 - packages/product-cover/package.json | 1 - packages/pure-cell/package.json | 1 - packages/radio-group/package.json | 1 - packages/radio/package.json | 1 - packages/segmented-control/package.json | 1 - packages/shared/package.json | 1 - packages/skeleton/package.json | 1 - packages/slider-input/package.json | 1 - packages/status-badge/package.json | 1 - packages/stepped-progress-bar/package.json | 1 - packages/switch/package.json | 1 - packages/system-message/package.json | 1 - packages/time-input/package.json | 1 - packages/with-suffix/package.json | 1 - 32 files changed, 11 insertions(+), 67 deletions(-) delete mode 100644 .changeset/nervous-ants-learn.md create mode 100644 .changeset/strange-coats-exercise.md diff --git a/.changeset/nervous-ants-learn.md b/.changeset/nervous-ants-learn.md deleted file mode 100644 index 14795869f3..0000000000 --- a/.changeset/nervous-ants-learn.md +++ /dev/null @@ -1,33 +0,0 @@ ---- -'@alfalab/core-components-drawer': patch -'@alfalab/core-components-form-control': patch -'@alfalab/core-components-notification': patch -'@alfalab/core-components-notification-manager': patch -'@alfalab/core-components-number-input': patch -'@alfalab/core-components-pagination': patch -'@alfalab/core-components-pass-code': patch -'@alfalab/core-components-pass-code-v1': patch -'@alfalab/core-components-password-input': patch -'@alfalab/core-components-pattern-lock': patch -'@alfalab/core-components-pattern-lock-v1': patch -'@alfalab/core-components-popover': patch -'@alfalab/core-components-popup-sheet': patch -'@alfalab/core-components-portal': patch -'@alfalab/core-components-product-cover': patch -'@alfalab/core-components-pure-cell': patch -'@alfalab/core-components-radio': patch -'@alfalab/core-components-radio-group': patch -'@alfalab/core-components-segmented-control': patch -'@alfalab/core-components-shared': patch -'@alfalab/core-components-skeleton': patch -'@alfalab/core-components-slider-input': patch -'@alfalab/core-components-status-badge': patch -'@alfalab/core-components-stepped-progress-bar': patch -'@alfalab/core-components-switch': patch -'@alfalab/core-components-system-message': patch -'@alfalab/core-components-time-input': patch -'@alfalab/core-components-with-suffix': patch ---- - -- Добавлено "sideEffects": false, чтобы бандлер лучше делал тришейк. -- В SideEffect пакета base-modal добавлена зависимость от полифила. diff --git a/.changeset/strange-coats-exercise.md b/.changeset/strange-coats-exercise.md new file mode 100644 index 0000000000..ae773f7fbd --- /dev/null +++ b/.changeset/strange-coats-exercise.md @@ -0,0 +1,5 @@ +--- +'@alfalab/core-components-gallery': patch +--- + +Импорт HLS заменён на light версию, только енкодер без дополнительных обвязок diff --git a/packages/base-modal/package.json b/packages/base-modal/package.json index 082d369c96..e49e3c82b9 100644 --- a/packages/base-modal/package.json +++ b/packages/base-modal/package.json @@ -10,9 +10,7 @@ "access": "public", "directory": "dist" }, - "sideEffects": [ - "matches-polyfill.*" - ], + "sideEffects": false, "dependencies": { "@alfalab/core-components-backdrop": "^3.4.5", "@alfalab/core-components-global-store": "^2.1.0", diff --git a/packages/drawer/package.json b/packages/drawer/package.json index 57557ac278..1608795237 100644 --- a/packages/drawer/package.json +++ b/packages/drawer/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/form-control/package.json b/packages/form-control/package.json index 48924e4279..330ad37e20 100644 --- a/packages/form-control/package.json +++ b/packages/form-control/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index eb4c9b9524..9abdd84881 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -1,6 +1,8 @@ import React, { MouseEvent, ReactEventHandler, useContext, useEffect, useRef } from 'react'; import cn from 'classnames'; -import Hls from 'hls.js'; +import type HlsType from 'hls.js'; +import type { ErrorData, Events } from 'hls.js'; +import Hls from 'hls.js/dist/hls.light.mjs'; import { Circle } from '@alfalab/core-components/icon-view/circle'; import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon'; @@ -32,10 +34,10 @@ export const Video = ({ url, index, className, isActive }: Props) => { }, [index]); useEffect(() => { - const hls = new Hls(); + const hls = new Hls() as HlsType; if (Hls.isSupported()) { - hls.on(Hls.Events.ERROR, (_, data) => { + hls.on(Hls.Events.ERROR, (_: Events.ERROR, data: ErrorData) => { if (data.fatal) { switch (data.type) { case Hls.ErrorTypes.MEDIA_ERROR: diff --git a/packages/notification-manager/package.json b/packages/notification-manager/package.json index d1abd9a773..bdcdb7270a 100644 --- a/packages/notification-manager/package.json +++ b/packages/notification-manager/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, diff --git a/packages/notification/package.json b/packages/notification/package.json index 4b43757c7b..e2d94f4c3a 100644 --- a/packages/notification/package.json +++ b/packages/notification/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, diff --git a/packages/number-input/package.json b/packages/number-input/package.json index 3d623271ba..bae069662f 100644 --- a/packages/number-input/package.json +++ b/packages/number-input/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, diff --git a/packages/pagination/package.json b/packages/pagination/package.json index ef980c6e5d..e6611d9547 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pass-code-v1/package.json b/packages/pass-code-v1/package.json index 44d62d1240..09b55076f6 100644 --- a/packages/pass-code-v1/package.json +++ b/packages/pass-code-v1/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pass-code/package.json b/packages/pass-code/package.json index 5d7727c0ed..ba309301f6 100644 --- a/packages/pass-code/package.json +++ b/packages/pass-code/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/password-input/package.json b/packages/password-input/package.json index 82b55542a0..b907f2fcb2 100644 --- a/packages/password-input/package.json +++ b/packages/password-input/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pattern-lock-v1/package.json b/packages/pattern-lock-v1/package.json index fdf7bd3931..e18128618b 100644 --- a/packages/pattern-lock-v1/package.json +++ b/packages/pattern-lock-v1/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pattern-lock/package.json b/packages/pattern-lock/package.json index cf02b35c62..d967a3b6c7 100644 --- a/packages/pattern-lock/package.json +++ b/packages/pattern-lock/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/popover/package.json b/packages/popover/package.json index 4a8c610ac4..690922de39 100644 --- a/packages/popover/package.json +++ b/packages/popover/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/popup-sheet/package.json b/packages/popup-sheet/package.json index 8d7d31806a..7943169b1d 100644 --- a/packages/popup-sheet/package.json +++ b/packages/popup-sheet/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/portal/package.json b/packages/portal/package.json index b4d75bea94..33bd26c0ca 100644 --- a/packages/portal/package.json +++ b/packages/portal/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/product-cover/package.json b/packages/product-cover/package.json index b82adb7e13..a8ce27d51f 100644 --- a/packages/product-cover/package.json +++ b/packages/product-cover/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/pure-cell/package.json b/packages/pure-cell/package.json index 3d93b3db45..e21ac5c125 100644 --- a/packages/pure-cell/package.json +++ b/packages/pure-cell/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json index e26c55ee9b..94472e9fb4 100644 --- a/packages/radio-group/package.json +++ b/packages/radio-group/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/radio/package.json b/packages/radio/package.json index 8ca10c0693..35ec0e3180 100644 --- a/packages/radio/package.json +++ b/packages/radio/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/segmented-control/package.json b/packages/segmented-control/package.json index ff76866fbd..06dd5089b2 100644 --- a/packages/segmented-control/package.json +++ b/packages/segmented-control/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/shared/package.json b/packages/shared/package.json index d4c209621a..1de8a844c7 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": ">=16.8.0" }, diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json index 01c39465cb..81df094b19 100644 --- a/packages/skeleton/package.json +++ b/packages/skeleton/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/slider-input/package.json b/packages/slider-input/package.json index d66f4f766c..8ac282302d 100644 --- a/packages/slider-input/package.json +++ b/packages/slider-input/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/status-badge/package.json b/packages/status-badge/package.json index 446788b750..264f6ba2b5 100644 --- a/packages/status-badge/package.json +++ b/packages/status-badge/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": ">=16.8.0" }, diff --git a/packages/stepped-progress-bar/package.json b/packages/stepped-progress-bar/package.json index 92d7396e7e..1db7a03315 100644 --- a/packages/stepped-progress-bar/package.json +++ b/packages/stepped-progress-bar/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, diff --git a/packages/switch/package.json b/packages/switch/package.json index 443f2219c6..f476634a65 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -11,7 +11,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, diff --git a/packages/system-message/package.json b/packages/system-message/package.json index 975945cd2f..28b80d826e 100644 --- a/packages/system-message/package.json +++ b/packages/system-message/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": ">=16.8.0" }, diff --git a/packages/time-input/package.json b/packages/time-input/package.json index 137dc6c421..2827773f69 100644 --- a/packages/time-input/package.json +++ b/packages/time-input/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0", "react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0" diff --git a/packages/with-suffix/package.json b/packages/with-suffix/package.json index ff6f41c156..5ade7d8ecc 100644 --- a/packages/with-suffix/package.json +++ b/packages/with-suffix/package.json @@ -10,7 +10,6 @@ "access": "public", "directory": "dist" }, - "sideEffects": false, "peerDependencies": { "react": "^16.9.0 || ^17.0.1 || ^18.0.0" }, From c36573923425a3506e65f3527e14df383cb31bfd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Fri, 20 Dec 2024 15:36:34 +0300 Subject: [PATCH 04/11] fix: code logic; --- .../components/image-viewer/video/index.tsx | 80 ++++++++++++------- packages/gallery/src/declaration.d.ts | 5 ++ 2 files changed, 54 insertions(+), 31 deletions(-) create mode 100644 packages/gallery/src/declaration.d.ts diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index 9abdd84881..1254653298 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -1,8 +1,14 @@ -import React, { MouseEvent, ReactEventHandler, useContext, useEffect, useRef } from 'react'; +import React, { + MouseEvent, + ReactEventHandler, + useContext, + useEffect, + useRef, + useState, +} from 'react'; import cn from 'classnames'; import type HlsType from 'hls.js'; import type { ErrorData, Events } from 'hls.js'; -import Hls from 'hls.js/dist/hls.light.mjs'; import { Circle } from '@alfalab/core-components/icon-view/circle'; import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon'; @@ -22,6 +28,7 @@ type Props = { export const Video = ({ url, index, className, isActive }: Props) => { const playerRef = useRef(null); const timer = useRef>(); + const [HLSSupported, setHLSSupported] = useState(true); const { setImageMeta, mutedVideo, view, playingVideo, setPlayingVideo, setHideNavigation } = useContext(GalleryContext); @@ -34,39 +41,50 @@ export const Video = ({ url, index, className, isActive }: Props) => { }, [index]); useEffect(() => { - const hls = new Hls() as HlsType; - - if (Hls.isSupported()) { - hls.on(Hls.Events.ERROR, (_: Events.ERROR, data: ErrorData) => { - if (data.fatal) { - switch (data.type) { - case Hls.ErrorTypes.MEDIA_ERROR: - hls.recoverMediaError(); - break; - case Hls.ErrorTypes.NETWORK_ERROR: - setImageMeta({ player: { current: null }, broken: true }, index); - break; - default: - hls.destroy(); - break; + async function initHls() { + const { default: Hls } = await import( + /* webpackChunkName: "HLSVideo" */ 'hls.js/dist/hls.light.mjs' + ); + + const hls: HlsType = new Hls(); + + if (Hls.isSupported()) { + hls.on(Hls.Events.ERROR, (_: Events.ERROR, data: ErrorData) => { + if (data.fatal) { + switch (data.type) { + case Hls.ErrorTypes.MEDIA_ERROR: + hls.recoverMediaError(); + break; + case Hls.ErrorTypes.NETWORK_ERROR: + setImageMeta({ player: { current: null }, broken: true }, index); + break; + default: + hls.destroy(); + break; + } } - } - }); + }); - hls.loadSource(url); - if (playerRef.current) { - hls.attachMedia(playerRef.current); + hls.loadSource(url); + if (playerRef.current) { + hls.attachMedia(playerRef.current); + } + } else { + setHLSSupported(false); } + + return () => { + if (hls) { + hls.destroy(); + } + if (timer.current) { + clearTimeout(timer.current); + } + }; } - return () => { - if (hls) { - hls.destroy(); - } - if (timer.current) { - clearTimeout(timer.current); - } - }; + initHls().catch(); + /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [url, index]); @@ -144,7 +162,7 @@ export const Video = ({ url, index, className, isActive }: Props) => { playsInline={true} muted={mutedVideo} loop={true} - src={Hls.isSupported() ? undefined : url} + src={HLSSupported ? undefined : url} className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)} > diff --git a/packages/gallery/src/declaration.d.ts b/packages/gallery/src/declaration.d.ts new file mode 100644 index 0000000000..9c8f5c3cfa --- /dev/null +++ b/packages/gallery/src/declaration.d.ts @@ -0,0 +1,5 @@ +declare module 'hls.js/dist/hls.light.mjs' { + import Hls from 'hls'; + + export default Hls; +} From 90eb9654438aadbb6a800ec6f58ed5b0063ffda7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Fri, 20 Dec 2024 15:43:45 +0300 Subject: [PATCH 05/11] fix: clear func; --- .../components/image-viewer/video/index.tsx | 67 ++++++++++--------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index 1254653298..777ab3166f 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -41,50 +41,55 @@ export const Video = ({ url, index, className, isActive }: Props) => { }, [index]); useEffect(() => { + let hls: HlsType; + async function initHls() { const { default: Hls } = await import( - /* webpackChunkName: "HLSVideo" */ 'hls.js/dist/hls.light.mjs' + /* webpackChunkName: "hls-js-video" */ 'hls.js/dist/hls.light.mjs' ); - const hls: HlsType = new Hls(); - - if (Hls.isSupported()) { - hls.on(Hls.Events.ERROR, (_: Events.ERROR, data: ErrorData) => { - if (data.fatal) { - switch (data.type) { - case Hls.ErrorTypes.MEDIA_ERROR: - hls.recoverMediaError(); - break; - case Hls.ErrorTypes.NETWORK_ERROR: - setImageMeta({ player: { current: null }, broken: true }, index); - break; - default: - hls.destroy(); - break; - } - } - }); + hls = new Hls(); - hls.loadSource(url); - if (playerRef.current) { - hls.attachMedia(playerRef.current); - } - } else { + if (!Hls.isSupported()) { setHLSSupported(false); + + return; } - return () => { - if (hls) { - hls.destroy(); - } - if (timer.current) { - clearTimeout(timer.current); + hls.on(Hls.Events.ERROR, (_: Events.ERROR, data: ErrorData) => { + if (data.fatal) { + switch (data.type) { + case Hls.ErrorTypes.MEDIA_ERROR: + hls.recoverMediaError(); + break; + case Hls.ErrorTypes.NETWORK_ERROR: + setImageMeta({ player: { current: null }, broken: true }, index); + break; + default: + hls.destroy(); + break; + } } - }; + }); + + hls.loadSource(url); + + if (playerRef.current) { + hls.attachMedia(playerRef.current); + } } initHls().catch(); + return () => { + if (hls) { + hls.destroy(); + } + if (timer.current) { + clearTimeout(timer.current); + } + }; + /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [url, index]); From 3435ab692d06521b378783d3a5d0ba6c70f29e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denis=20=F0=9F=8E=83=20Khripkov?= Date: Sat, 21 Dec 2024 13:58:06 +0300 Subject: [PATCH 06/11] fix: dts settings; --- packages/gallery/src/components/image-viewer/video/index.tsx | 4 ++-- packages/gallery/src/declaration.d.ts | 3 ++- tsconfig.json | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index 777ab3166f..5520bfb740 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -7,8 +7,8 @@ import React, { useState, } from 'react'; import cn from 'classnames'; -import type HlsType from 'hls.js'; -import type { ErrorData, Events } from 'hls.js'; +import type HlsType from 'hls.js/dist/hls.light.mjs'; +import type { ErrorData, Events } from 'hls.js/dist/hls.light.mjs'; import { Circle } from '@alfalab/core-components/icon-view/circle'; import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon'; diff --git a/packages/gallery/src/declaration.d.ts b/packages/gallery/src/declaration.d.ts index 9c8f5c3cfa..f18c299be9 100644 --- a/packages/gallery/src/declaration.d.ts +++ b/packages/gallery/src/declaration.d.ts @@ -1,5 +1,6 @@ declare module 'hls.js/dist/hls.light.mjs' { - import Hls from 'hls'; + import Hls, { ErrorData, Events } from 'hls'; export default Hls; + export { ErrorData, Events }; } diff --git a/tsconfig.json b/tsconfig.json index 99ac3b59d5..e699caf65d 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -46,5 +46,5 @@ } }, "exclude": ["node_modules", "dist", "**/*.stories*", "**/*.test*"], - "include": ["./typings"] + "include": ["./typings", "**/declaration.d.ts"] } From e13d904e3db4a7d9af295d84718a1c0e7e21ba0e Mon Sep 17 00:00:00 2001 From: denisx Date: Wed, 25 Dec 2024 22:41:09 +0300 Subject: [PATCH 07/11] Update .changeset/strange-coats-exercise.md Co-authored-by: Evgeny Sergeev --- .changeset/strange-coats-exercise.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/strange-coats-exercise.md b/.changeset/strange-coats-exercise.md index ae773f7fbd..6e8d186fc4 100644 --- a/.changeset/strange-coats-exercise.md +++ b/.changeset/strange-coats-exercise.md @@ -2,4 +2,4 @@ '@alfalab/core-components-gallery': patch --- -Импорт HLS заменён на light версию, только енкодер без дополнительных обвязок +Импорт HLS заменён на light версию, только энкодер без дополнительных обвязок From c4f1f2c2306e0e2bbe1c5baf8c183dd9f98d7906 Mon Sep 17 00:00:00 2001 From: denisx Date: Thu, 26 Dec 2024 13:50:04 +0300 Subject: [PATCH 08/11] Update strange-coats-exercise.md --- .changeset/strange-coats-exercise.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.changeset/strange-coats-exercise.md b/.changeset/strange-coats-exercise.md index 6e8d186fc4..091e6d53a1 100644 --- a/.changeset/strange-coats-exercise.md +++ b/.changeset/strange-coats-exercise.md @@ -2,4 +2,5 @@ '@alfalab/core-components-gallery': patch --- -Импорт HLS заменён на light версию, только энкодер без дополнительных обвязок +- Импорт HLS заменён на light версию, только энкодер без дополнительных обвязок. +- Подгрузка модуля перенесена на время после загрузки основного js, для лучшей клиентской доступности основного приложения. From bf6bd52dbdc5a26e77e2c12969db74873bed40ce Mon Sep 17 00:00:00 2001 From: Artur Date: Thu, 25 Dec 2025 13:15:47 +0300 Subject: [PATCH 09/11] fix: rename dts file --- packages/gallery/src/{declaration.d.ts => hls.d.ts} | 0 tsconfig.json | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) rename packages/gallery/src/{declaration.d.ts => hls.d.ts} (100%) diff --git a/packages/gallery/src/declaration.d.ts b/packages/gallery/src/hls.d.ts similarity index 100% rename from packages/gallery/src/declaration.d.ts rename to packages/gallery/src/hls.d.ts diff --git a/tsconfig.json b/tsconfig.json index e699caf65d..34c97aef12 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -46,5 +46,5 @@ } }, "exclude": ["node_modules", "dist", "**/*.stories*", "**/*.test*"], - "include": ["./typings", "**/declaration.d.ts"] + "include": ["./typings", "**/hls.d.ts"] } From 1e03cb274ed472a31551be5b93a2f6525f70218c Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 29 Dec 2025 12:16:08 +0300 Subject: [PATCH 10/11] fix: by lint --- packages/gallery/src/components/image-viewer/video/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index 3f6aa223ac..ddce1c55cb 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -9,7 +9,7 @@ import React, { } from 'react'; import cn from 'classnames'; import type HlsType from 'hls.js/dist/hls.light.mjs'; -import { type ErrorData, type Events } from 'hls.js/dist/hls.light.mjs'; +import { type ErrorData, type Events } from 'hls.js/dist/hls.light.mjs'; import { Circle } from '@alfalab/core-components-icon-view/circle'; import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon'; From fca1e405b4a0d35425b48c484736de9634473b54 Mon Sep 17 00:00:00 2001 From: Artur Date: Mon, 19 Jan 2026 09:35:11 +0300 Subject: [PATCH 11/11] fix: import --- packages/gallery/src/components/image-viewer/video/index.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/gallery/src/components/image-viewer/video/index.tsx b/packages/gallery/src/components/image-viewer/video/index.tsx index ddce1c55cb..43b88ee4b1 100644 --- a/packages/gallery/src/components/image-viewer/video/index.tsx +++ b/packages/gallery/src/components/image-viewer/video/index.tsx @@ -8,8 +8,7 @@ import React, { useState, } from 'react'; import cn from 'classnames'; -import type HlsType from 'hls.js/dist/hls.light.mjs'; -import { type ErrorData, type Events } from 'hls.js/dist/hls.light.mjs'; +import { type default as HlsType, type ErrorData, type Events } from 'hls.js/dist/hls.light.mjs'; import { Circle } from '@alfalab/core-components-icon-view/circle'; import PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';