@alfalab/core-components-gallery 7.0.6 → 7.1.0-alfasans

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (222) hide show
  1. package/Component.d.ts +1 -1
  2. package/Component.js.map +1 -1
  3. package/components/bottom-button/Component.d.ts +1 -1
  4. package/components/bottom-button/Component.js.map +1 -1
  5. package/components/bottom-button/index.css +5 -5
  6. package/components/bottom-button/index.module.css.js +1 -1
  7. package/components/buttons/index.css +5 -5
  8. package/components/buttons/index.d.ts +1 -1
  9. package/components/buttons/index.js +1 -1
  10. package/components/buttons/index.js.map +1 -1
  11. package/components/buttons/index.module.css.js +1 -1
  12. package/components/header/Component.js.map +1 -1
  13. package/components/header/index.css +1 -1
  14. package/components/header/index.module.css.js +1 -1
  15. package/components/header-info-block/Component.d.ts +1 -1
  16. package/components/header-info-block/index.css +4 -4
  17. package/components/header-info-block/index.module.css.js +1 -1
  18. package/components/header-mobile/Component.js +5 -3
  19. package/components/header-mobile/Component.js.map +1 -1
  20. package/components/header-mobile/index.css +6 -6
  21. package/components/header-mobile/index.module.css.js +1 -1
  22. package/components/image-preview/Component.d.ts +1 -1
  23. package/components/image-preview/Component.js.map +1 -1
  24. package/components/image-preview/index.css +17 -17
  25. package/components/image-preview/index.module.css.js +1 -1
  26. package/components/image-viewer/component.js.map +1 -1
  27. package/components/image-viewer/hooks.d.ts +1 -1
  28. package/components/image-viewer/hooks.js.map +1 -1
  29. package/components/image-viewer/index.css +25 -25
  30. package/components/image-viewer/index.module.css.js +1 -1
  31. package/components/image-viewer/slide.d.ts +1 -1
  32. package/components/image-viewer/slide.js.map +1 -1
  33. package/components/image-viewer/video/index.css +7 -7
  34. package/components/image-viewer/video/index.d.ts +1 -1
  35. package/components/image-viewer/video/index.js +109 -25
  36. package/components/image-viewer/video/index.js.map +1 -1
  37. package/components/image-viewer/video/index.module.css.js +1 -1
  38. package/components/info-bar/Component.js.map +1 -1
  39. package/components/info-bar/index.css +3 -3
  40. package/components/info-bar/index.module.css.js +1 -1
  41. package/components/navigation-bar/Component.js.map +1 -1
  42. package/components/navigation-bar/index.css +8 -8
  43. package/components/navigation-bar/index.module.css.js +1 -1
  44. package/components/subtitles/index.css +3 -3
  45. package/components/subtitles/index.js.map +1 -1
  46. package/components/subtitles/index.module.css.js +1 -1
  47. package/context.d.ts +1 -2
  48. package/cssm/Component.d.ts +1 -1
  49. package/cssm/Component.js.map +1 -1
  50. package/cssm/components/bottom-button/Component.d.ts +1 -1
  51. package/cssm/components/bottom-button/Component.js.map +1 -1
  52. package/cssm/components/buttons/index.d.ts +1 -1
  53. package/cssm/components/buttons/index.js +1 -1
  54. package/cssm/components/buttons/index.js.map +1 -1
  55. package/cssm/components/header/Component.js.map +1 -1
  56. package/cssm/components/header-info-block/Component.d.ts +1 -1
  57. package/cssm/components/header-mobile/Component.js +5 -3
  58. package/cssm/components/header-mobile/Component.js.map +1 -1
  59. package/cssm/components/image-preview/Component.d.ts +1 -1
  60. package/cssm/components/image-preview/Component.js.map +1 -1
  61. package/cssm/components/image-viewer/component.js.map +1 -1
  62. package/cssm/components/image-viewer/hooks.d.ts +1 -1
  63. package/cssm/components/image-viewer/hooks.js.map +1 -1
  64. package/cssm/components/image-viewer/slide.d.ts +1 -1
  65. package/cssm/components/image-viewer/slide.js.map +1 -1
  66. package/cssm/components/image-viewer/video/index.d.ts +1 -1
  67. package/cssm/components/image-viewer/video/index.js +109 -25
  68. package/cssm/components/image-viewer/video/index.js.map +1 -1
  69. package/cssm/components/info-bar/Component.js.map +1 -1
  70. package/cssm/components/navigation-bar/Component.js.map +1 -1
  71. package/cssm/components/subtitles/index.js.map +1 -1
  72. package/cssm/context.d.ts +1 -2
  73. package/cssm/hooks/use-custom-subtitles.js.map +1 -1
  74. package/cssm/types.d.ts +4 -3
  75. package/cssm/utils/split-filename.js.map +1 -1
  76. package/cssm/utils/utils.js.map +1 -1
  77. package/esm/Component.d.ts +1 -1
  78. package/esm/Component.js.map +1 -1
  79. package/esm/components/bottom-button/Component.d.ts +1 -1
  80. package/esm/components/bottom-button/Component.js.map +1 -1
  81. package/esm/components/bottom-button/index.css +5 -5
  82. package/esm/components/bottom-button/index.module.css.js +1 -1
  83. package/esm/components/buttons/index.css +5 -5
  84. package/esm/components/buttons/index.d.ts +1 -1
  85. package/esm/components/buttons/index.js +1 -1
  86. package/esm/components/buttons/index.js.map +1 -1
  87. package/esm/components/buttons/index.module.css.js +1 -1
  88. package/esm/components/header/Component.js.map +1 -1
  89. package/esm/components/header/index.css +1 -1
  90. package/esm/components/header/index.module.css.js +1 -1
  91. package/esm/components/header-info-block/Component.d.ts +1 -1
  92. package/esm/components/header-info-block/index.css +4 -4
  93. package/esm/components/header-info-block/index.module.css.js +1 -1
  94. package/esm/components/header-mobile/Component.js +5 -3
  95. package/esm/components/header-mobile/Component.js.map +1 -1
  96. package/esm/components/header-mobile/index.css +6 -6
  97. package/esm/components/header-mobile/index.module.css.js +1 -1
  98. package/esm/components/image-preview/Component.d.ts +1 -1
  99. package/esm/components/image-preview/Component.js.map +1 -1
  100. package/esm/components/image-preview/index.css +17 -17
  101. package/esm/components/image-preview/index.module.css.js +1 -1
  102. package/esm/components/image-viewer/component.js.map +1 -1
  103. package/esm/components/image-viewer/hooks.d.ts +1 -1
  104. package/esm/components/image-viewer/hooks.js.map +1 -1
  105. package/esm/components/image-viewer/index.css +25 -25
  106. package/esm/components/image-viewer/index.module.css.js +1 -1
  107. package/esm/components/image-viewer/slide.d.ts +1 -1
  108. package/esm/components/image-viewer/slide.js.map +1 -1
  109. package/esm/components/image-viewer/video/index.css +7 -7
  110. package/esm/components/image-viewer/video/index.d.ts +1 -1
  111. package/esm/components/image-viewer/video/index.js +92 -25
  112. package/esm/components/image-viewer/video/index.js.map +1 -1
  113. package/esm/components/image-viewer/video/index.module.css.js +1 -1
  114. package/esm/components/info-bar/Component.js.map +1 -1
  115. package/esm/components/info-bar/index.css +3 -3
  116. package/esm/components/info-bar/index.module.css.js +1 -1
  117. package/esm/components/navigation-bar/Component.js.map +1 -1
  118. package/esm/components/navigation-bar/index.css +8 -8
  119. package/esm/components/navigation-bar/index.module.css.js +1 -1
  120. package/esm/components/subtitles/index.css +3 -3
  121. package/esm/components/subtitles/index.js.map +1 -1
  122. package/esm/components/subtitles/index.module.css.js +1 -1
  123. package/esm/context.d.ts +1 -2
  124. package/esm/hooks/use-custom-subtitles.js.map +1 -1
  125. package/esm/index.css +9 -9
  126. package/esm/index.module.css.js +1 -1
  127. package/esm/types.d.ts +4 -3
  128. package/esm/utils/split-filename.js.map +1 -1
  129. package/esm/utils/utils.js.map +1 -1
  130. package/hooks/use-custom-subtitles.js.map +1 -1
  131. package/index.css +9 -9
  132. package/index.module.css.js +1 -1
  133. package/modern/Component.d.ts +1 -1
  134. package/modern/Component.js.map +1 -1
  135. package/modern/components/bottom-button/Component.d.ts +1 -1
  136. package/modern/components/bottom-button/Component.js.map +1 -1
  137. package/modern/components/bottom-button/index.css +5 -5
  138. package/modern/components/bottom-button/index.module.css.js +1 -1
  139. package/modern/components/buttons/index.css +5 -5
  140. package/modern/components/buttons/index.d.ts +1 -1
  141. package/modern/components/buttons/index.js +1 -1
  142. package/modern/components/buttons/index.js.map +1 -1
  143. package/modern/components/buttons/index.module.css.js +1 -1
  144. package/modern/components/header/Component.js.map +1 -1
  145. package/modern/components/header/index.css +1 -1
  146. package/modern/components/header/index.module.css.js +1 -1
  147. package/modern/components/header-info-block/Component.d.ts +1 -1
  148. package/modern/components/header-info-block/index.css +4 -4
  149. package/modern/components/header-info-block/index.module.css.js +1 -1
  150. package/modern/components/header-mobile/Component.js +3 -1
  151. package/modern/components/header-mobile/Component.js.map +1 -1
  152. package/modern/components/header-mobile/index.css +6 -6
  153. package/modern/components/header-mobile/index.module.css.js +1 -1
  154. package/modern/components/image-preview/Component.d.ts +1 -1
  155. package/modern/components/image-preview/Component.js.map +1 -1
  156. package/modern/components/image-preview/index.css +17 -17
  157. package/modern/components/image-preview/index.module.css.js +1 -1
  158. package/modern/components/image-viewer/component.js.map +1 -1
  159. package/modern/components/image-viewer/hooks.d.ts +1 -1
  160. package/modern/components/image-viewer/hooks.js.map +1 -1
  161. package/modern/components/image-viewer/index.css +25 -25
  162. package/modern/components/image-viewer/index.module.css.js +1 -1
  163. package/modern/components/image-viewer/slide.d.ts +1 -1
  164. package/modern/components/image-viewer/slide.js.map +1 -1
  165. package/modern/components/image-viewer/video/index.css +7 -7
  166. package/modern/components/image-viewer/video/index.d.ts +1 -1
  167. package/modern/components/image-viewer/video/index.js +60 -23
  168. package/modern/components/image-viewer/video/index.js.map +1 -1
  169. package/modern/components/image-viewer/video/index.module.css.js +1 -1
  170. package/modern/components/info-bar/Component.js.map +1 -1
  171. package/modern/components/info-bar/index.css +3 -3
  172. package/modern/components/info-bar/index.module.css.js +1 -1
  173. package/modern/components/navigation-bar/Component.js.map +1 -1
  174. package/modern/components/navigation-bar/index.css +8 -8
  175. package/modern/components/navigation-bar/index.module.css.js +1 -1
  176. package/modern/components/subtitles/index.css +3 -3
  177. package/modern/components/subtitles/index.js.map +1 -1
  178. package/modern/components/subtitles/index.module.css.js +1 -1
  179. package/modern/context.d.ts +1 -2
  180. package/modern/hooks/use-custom-subtitles.js.map +1 -1
  181. package/modern/index.css +9 -9
  182. package/modern/index.module.css.js +1 -1
  183. package/modern/types.d.ts +4 -3
  184. package/modern/utils/split-filename.js.map +1 -1
  185. package/modern/utils/utils.js.map +1 -1
  186. package/moderncssm/Component.d.ts +1 -1
  187. package/moderncssm/Component.js.map +1 -1
  188. package/moderncssm/components/bottom-button/Component.d.ts +1 -1
  189. package/moderncssm/components/bottom-button/Component.js.map +1 -1
  190. package/moderncssm/components/buttons/index.d.ts +1 -1
  191. package/moderncssm/components/buttons/index.js +1 -1
  192. package/moderncssm/components/buttons/index.js.map +1 -1
  193. package/moderncssm/components/header/Component.js.map +1 -1
  194. package/moderncssm/components/header-info-block/Component.d.ts +1 -1
  195. package/moderncssm/components/header-mobile/Component.js +3 -1
  196. package/moderncssm/components/header-mobile/Component.js.map +1 -1
  197. package/moderncssm/components/image-preview/Component.d.ts +1 -1
  198. package/moderncssm/components/image-preview/Component.js.map +1 -1
  199. package/moderncssm/components/image-viewer/component.js.map +1 -1
  200. package/moderncssm/components/image-viewer/hooks.d.ts +1 -1
  201. package/moderncssm/components/image-viewer/hooks.js.map +1 -1
  202. package/moderncssm/components/image-viewer/slide.d.ts +1 -1
  203. package/moderncssm/components/image-viewer/slide.js.map +1 -1
  204. package/moderncssm/components/image-viewer/video/index.d.ts +1 -1
  205. package/moderncssm/components/image-viewer/video/index.js +60 -23
  206. package/moderncssm/components/image-viewer/video/index.js.map +1 -1
  207. package/moderncssm/components/info-bar/Component.js.map +1 -1
  208. package/moderncssm/components/navigation-bar/Component.js.map +1 -1
  209. package/moderncssm/components/subtitles/index.js.map +1 -1
  210. package/moderncssm/context.d.ts +1 -2
  211. package/moderncssm/hooks/use-custom-subtitles.js.map +1 -1
  212. package/moderncssm/types.d.ts +4 -3
  213. package/moderncssm/utils/split-filename.js.map +1 -1
  214. package/moderncssm/utils/utils.js.map +1 -1
  215. package/package.json +11 -11
  216. package/src/components/buttons/index.tsx +1 -1
  217. package/src/components/header-mobile/Component.tsx +3 -1
  218. package/src/components/image-viewer/video/index.tsx +80 -24
  219. package/src/types.ts +1 -0
  220. package/types.d.ts +4 -3
  221. package/utils/split-filename.js.map +1 -1
  222. package/utils/utils.js.map +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/header-mobile/Component.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const HeaderMobile = () => {\n const {\n onClose,\n images,\n currentSlideIndex,\n getCurrentImage,\n getCurrentImageMeta,\n hideNavigation,\n } = useContext(GalleryContext);\n\n const currentImage = getCurrentImage();\n const meta = getCurrentImageMeta();\n\n const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;\n\n const canDownload = currentImage?.canDownload ?? true;\n const showDownloadButton = !meta?.broken && canDownload;\n\n const handleShareClick = async () => {\n if (!currentImage || !navigator.share) {\n return;\n }\n\n const title = currentImage.name ?? new Date().toISOString().split('T')[0];\n const url = currentImage.src;\n\n try {\n if (isVideo(url)) {\n // Если видео — всегда делим ссылку\n await navigator.share({\n title,\n url,\n text: 'Видео',\n });\n\n return;\n }\n\n // Попробуем скачать изображение\n const response = await fetch(url, { mode: 'cors' });\n const blob = await response.blob();\n\n const file = new File([blob], `${title}.png`, {\n type: blob.type,\n lastModified: Date.now(),\n });\n\n const shareData: ShareData = {\n files: [file],\n title,\n text: 'Картинка',\n };\n\n // Попробуем поделиться файлом\n if (navigator.canShare?.(shareData) && response.ok) {\n await navigator.share(shareData);\n } else {\n // Fallback: делимся только ссылкой\n await navigator.share({\n title,\n text: 'Картинка',\n url,\n });\n }\n } catch {\n await navigator.share({\n title,\n url,\n });\n }\n };\n\n return (\n <div\n className={cn(styles.headerMobile, {\n [styles.video]: isVideo(currentImage?.src),\n [styles.hide]: hideNavigation,\n })}\n >\n <Buttons.BackArrow onClick={onClose} />\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {description}\n </TypographyText>\n <div className={styles.rightButtons}>\n {showDownloadButton && (\n <Buttons.Download\n href={currentImage?.src}\n download={currentImage?.name}\n dataTestId={TestIds.DOWNLOAD_BUTTON}\n />\n )}\n {!meta?.broken && <Buttons.Share onClick={handleShareClick} />}\n </div>\n </div>\n );\n};\n"],"names":["useContext","GalleryContext","__awaiter","isVideo","React","cn","styles","Buttons.BackArrow","TypographyText","Buttons.Download","TestIds","Buttons.Share"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/header-mobile/Component.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo, TestIds } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const HeaderMobile = () => {\n const {\n onClose,\n images,\n currentSlideIndex,\n getCurrentImage,\n getCurrentImageMeta,\n hideNavigation,\n } = useContext(GalleryContext);\n\n const currentImage = getCurrentImage();\n const meta = getCurrentImageMeta();\n\n const description = images.length > 1 && `${currentSlideIndex + 1} из ${images.length}`;\n\n const canDownload = currentImage?.canDownload ?? true;\n const showDownloadButton = !meta?.broken && canDownload;\n const canShare = currentImage?.canShare ?? true;\n const showShareButton = !meta?.broken && canShare;\n\n const handleShareClick = async () => {\n if (!currentImage || !navigator.share) {\n return;\n }\n\n const title = currentImage.name ?? new Date().toISOString().split('T')[0];\n const url = currentImage.src;\n\n try {\n if (isVideo(url)) {\n // Если видео — всегда делим ссылку\n await navigator.share({\n title,\n url,\n text: 'Видео',\n });\n\n return;\n }\n\n // Попробуем скачать изображение\n const response = await fetch(url, { mode: 'cors' });\n const blob = await response.blob();\n\n const file = new File([blob], `${title}.png`, {\n type: blob.type,\n lastModified: Date.now(),\n });\n\n const shareData: ShareData = {\n files: [file],\n title,\n text: 'Картинка',\n };\n\n // Попробуем поделиться файлом\n if (navigator.canShare?.(shareData) && response.ok) {\n await navigator.share(shareData);\n } else {\n // Fallback: делимся только ссылкой\n await navigator.share({\n title,\n text: 'Картинка',\n url,\n });\n }\n } catch {\n await navigator.share({\n title,\n url,\n });\n }\n };\n\n return (\n <div\n className={cn(styles.headerMobile, {\n [styles.video]: isVideo(currentImage?.src),\n [styles.hide]: hideNavigation,\n })}\n >\n <Buttons.BackArrow onClick={onClose} />\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {description}\n </TypographyText>\n <div className={styles.rightButtons}>\n {showDownloadButton && (\n <Buttons.Download\n href={currentImage?.src}\n download={currentImage?.name}\n dataTestId={TestIds.DOWNLOAD_BUTTON}\n />\n )}\n {showShareButton && <Buttons.Share onClick={handleShareClick} />}\n </div>\n </div>\n );\n};\n"],"names":["useContext","GalleryContext","__awaiter","isVideo","React","cn","styles","Buttons.BackArrow","TypographyText","Buttons.Download","TestIds","Buttons.Share"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type GalleryImage } from '../../types';
3
- declare type Props = {
3
+ type Props = {
4
4
  image: GalleryImage;
5
5
  index: number;
6
6
  active?: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n PREVIEW_HEIGHT_DESKTOP,\n PREVIEW_HEIGHT_MOBILE,\n PREVIEW_VIDEO_MULTIPLIER,\n PREVIEW_WIDTH_DESKTOP,\n PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n image: GalleryImage;\n index: number;\n active?: boolean;\n onSelect: (index: number) => void;\n className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n const { imagesMeta, view } = useContext(GalleryContext);\n\n const isMobile = view === 'mobile';\n\n const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n const ref = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const video = imagesMeta[index]?.player?.current;\n const context = canvas?.getContext('2d');\n const drawPreview = () => {\n if (video) {\n context?.drawImage(\n video,\n 0,\n 0,\n video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n );\n }\n };\n\n drawPreview();\n\n if (isVideo(image.src)) {\n video?.addEventListener('canplay', drawPreview);\n }\n\n return () => {\n if (isVideo(image.src)) {\n video?.removeEventListener('canplay', drawPreview);\n }\n };\n }, [image.src, imagesMeta, index]);\n\n const handleClick = () => {\n onSelect(index);\n };\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n onSelect(index);\n }\n };\n\n const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n };\n\n const [focused] = useFocus(ref, 'keyboard');\n\n const meta = imagesMeta[index];\n\n const isBroken = Boolean(meta?.broken);\n\n const renderPreview = () => {\n if (isBroken) {\n return (\n <div\n className={cn(\n styles.preview,\n { [styles.mobile]: isMobile, [styles.active]: active },\n styles.brokenImageWrapper,\n )}\n >\n <div className={cn(styles.brokenIcon)}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width={previewWidth}\n height={previewHeight}\n viewBox={`${isMobile ? -6 : 0} ${\n isMobile ? -12 : 0\n } ${previewWidth} ${previewHeight}`}\n fill='none'\n >\n <rect fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path\n d={\n isMobile\n ? NoImagePaths.mobileTriangle\n : NoImagePaths.triangleImage\n }\n fill='#89898A'\n />\n </svg>\n </div>\n </div>\n );\n }\n\n if (image.previewSrc) {\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n </div>\n );\n }\n\n if (isVideo(image.src)) {\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <canvas\n className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n data-testid='canvas'\n width={previewWidth}\n height={previewHeight}\n ref={canvasRef}\n />\n </div>\n );\n }\n\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <img src={image.src} alt={getImageAlt(image, index)} />\n </div>\n );\n };\n\n return (\n <div\n className={cn(\n styles.component,\n {\n [styles.active]: active,\n [styles.focused]: focused,\n [styles.mobile]: isMobile,\n },\n className,\n )}\n onClick={handleClick}\n role='button'\n onKeyDown={handleKeyDown}\n onMouseDown={handleDragStart}\n tabIndex={0}\n ref={ref}\n aria-label={`Перейти к ${index + 1} элементу`}\n >\n {renderPreview()}\n </div>\n );\n};\n"],"names":["useContext","GalleryContext","PREVIEW_WIDTH_MOBILE","PREVIEW_WIDTH_DESKTOP","PREVIEW_HEIGHT_MOBILE","PREVIEW_HEIGHT_DESKTOP","useRef","useEffect","PREVIEW_VIDEO_MULTIPLIER","isVideo","useFocus","React","cn","styles","NoImagePaths","getImageAlt"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/image-preview/Component.tsx"],"sourcesContent":["import React, {\n type FC,\n type KeyboardEventHandler,\n type MouseEventHandler,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport cn from 'classnames';\n\nimport { useFocus } from '@alfalab/hooks';\n\nimport {\n PREVIEW_HEIGHT_DESKTOP,\n PREVIEW_HEIGHT_MOBILE,\n PREVIEW_VIDEO_MULTIPLIER,\n PREVIEW_WIDTH_DESKTOP,\n PREVIEW_WIDTH_MOBILE,\n} from '../../constants';\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage } from '../../types';\nimport { getImageAlt, isVideo } from '../../utils';\n\nimport { NoImagePaths } from './paths';\n\nimport styles from './index.module.css';\n\ntype Props = {\n image: GalleryImage;\n index: number;\n active?: boolean;\n onSelect: (index: number) => void;\n className: string;\n};\n\nexport const ImagePreview: FC<Props> = ({ image, active = false, index, onSelect, className }) => {\n const { imagesMeta, view } = useContext(GalleryContext);\n\n const isMobile = view === 'mobile';\n\n const previewWidth = isMobile ? PREVIEW_WIDTH_MOBILE : PREVIEW_WIDTH_DESKTOP;\n const previewHeight = isMobile ? PREVIEW_HEIGHT_MOBILE : PREVIEW_HEIGHT_DESKTOP;\n\n const ref = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n const video = imagesMeta[index]?.player?.current;\n const context = canvas?.getContext('2d');\n const drawPreview = () => {\n if (video) {\n context?.drawImage(\n video,\n 0,\n 0,\n video.videoWidth / PREVIEW_VIDEO_MULTIPLIER,\n video.videoHeight / PREVIEW_VIDEO_MULTIPLIER,\n );\n }\n };\n\n drawPreview();\n\n if (isVideo(image.src)) {\n video?.addEventListener('canplay', drawPreview);\n }\n\n return () => {\n if (isVideo(image.src)) {\n video?.removeEventListener('canplay', drawPreview);\n }\n };\n }, [image.src, imagesMeta, index]);\n\n const handleClick = () => {\n onSelect(index);\n };\n\n const handleKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n onSelect(index);\n }\n };\n\n const handleDragStart: MouseEventHandler<HTMLDivElement> = (e) => {\n e.preventDefault();\n };\n\n const [focused] = useFocus(ref, 'keyboard');\n\n const meta = imagesMeta[index];\n\n const isBroken = Boolean(meta?.broken);\n\n const renderPreview = () => {\n if (isBroken) {\n return (\n <div\n className={cn(\n styles.preview,\n { [styles.mobile]: isMobile, [styles.active]: active },\n styles.brokenImageWrapper,\n )}\n >\n <div className={cn(styles.brokenIcon)}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width={previewWidth}\n height={previewHeight}\n viewBox={`${isMobile ? -6 : 0} ${\n isMobile ? -12 : 0\n } ${previewWidth} ${previewHeight}`}\n fill='none'\n >\n <rect fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={isMobile ? NoImagePaths.mobileImage : NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path\n d={\n isMobile\n ? NoImagePaths.mobileTriangle\n : NoImagePaths.triangleImage\n }\n fill='#89898A'\n />\n </svg>\n </div>\n </div>\n );\n }\n\n if (image.previewSrc) {\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <img src={image.previewSrc} alt={getImageAlt(image, index)} />\n </div>\n );\n }\n\n if (isVideo(image.src)) {\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <canvas\n className={cn(styles.canvasPreview, { [styles.mobile]: isMobile })}\n data-testid='canvas'\n width={previewWidth}\n height={previewHeight}\n ref={canvasRef}\n />\n </div>\n );\n }\n\n return (\n <div\n className={cn(styles.preview, styles.image, {\n [styles.loading]: !meta,\n [styles.mobile]: isMobile,\n })}\n >\n <img src={image.src} alt={getImageAlt(image, index)} />\n </div>\n );\n };\n\n return (\n <div\n className={cn(\n styles.component,\n {\n [styles.active]: active,\n [styles.focused]: focused,\n [styles.mobile]: isMobile,\n },\n className,\n )}\n onClick={handleClick}\n role='button'\n onKeyDown={handleKeyDown}\n onMouseDown={handleDragStart}\n tabIndex={0}\n ref={ref}\n aria-label={`Перейти к ${index + 1} элементу`}\n >\n {renderPreview()}\n </div>\n );\n};\n"],"names":["useContext","GalleryContext","PREVIEW_WIDTH_MOBILE","PREVIEW_WIDTH_DESKTOP","PREVIEW_HEIGHT_MOBILE","PREVIEW_HEIGHT_DESKTOP","useRef","useEffect","PREVIEW_VIDEO_MULTIPLIER","isVideo","useFocus","React","cn","styles","NoImagePaths","getImageAlt"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport SwiperCore, { A11y, Controller, EffectFade } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport 'swiper/swiper.min.css';\nimport styles from './index.module.css';\n\nSwiperCore.use([EffectFade, A11y, Controller]);\n\nexport const ImageViewer: FC = () => {\n const {\n images,\n imagesMeta,\n fullScreen,\n currentSlideIndex,\n initialSlide,\n setCurrentSlideIndex,\n getSwiper,\n setSwiper,\n slidePrev,\n slideNext,\n getCurrentImage,\n } = useContext(GalleryContext);\n\n const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n const swiper = getSwiper();\n const currentImage = getCurrentImage();\n\n const handleSlideChange = useCallback(() => {\n setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n const handlePrevClick = () => {\n slidePrev();\n };\n\n const handleNextClick = () => {\n slideNext();\n };\n\n const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n slidePrev();\n }\n };\n\n const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n slideNext();\n }\n };\n\n const swiperProps = useMemo<Swiper>(\n () => ({\n slidesPerView: 1,\n effect: 'slide',\n className: cn(styles.swiper, {\n [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n [styles.mobile]: isMobile,\n [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n }),\n controller: { control: swiper },\n a11y: {\n slideRole: 'img',\n },\n initialSlide,\n simulateTouch: false,\n zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n onSwiper: setSwiper,\n onSlideChange: handleSlideChange,\n lazy: { loadPrevNext: true },\n }),\n [\n fullScreen,\n currentImage?.src,\n isMobile,\n swiper,\n initialSlide,\n setSwiper,\n handleSlideChange,\n ],\n );\n\n const showControls = !fullScreen && !isMobile && !!images.length;\n\n const swiperWidth = swiper?.width || 1;\n const swiperHeight = swiper?.height || swiper?.width || 1;\n\n const swiperAspectRatio = swiperWidth / swiperHeight;\n\n return (\n <div\n className={cn(styles.component, {\n [styles.mobile]: isMobile,\n [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n })}\n aria-hidden={true}\n onClick={handleWrapperClick}\n >\n {showControls && (\n <div\n className={cn(styles.arrow, {\n [styles.focused]: leftArrowFocused,\n })}\n onClick={handlePrevClick}\n role='button'\n onKeyDown={handleArrowLeftKeyDown}\n tabIndex={0}\n ref={leftArrowRef}\n aria-label='Предыдущее изображение'\n data-test-id={TestIds.PREV_SLIDE_BUTTON}\n >\n <ChevronBackHeavyMIcon />\n </div>\n )}\n\n {fullScreen && !isVideo(currentImage?.src) && (\n <img\n src={currentImage?.src}\n alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n className={styles.fullScreenImage}\n />\n )}\n\n <Swiper {...swiperProps}>\n {images.map((image, index) => {\n const meta = imagesMeta[index];\n\n const imageWidth = meta?.width || 1;\n const imageHeight = meta?.height || 1;\n\n const imageAspectRatio = imageWidth / imageHeight;\n\n const slideVisible = index === currentSlideIndex;\n\n return (\n <SwiperSlide\n key={getImageKey(image, index)}\n style={{\n pointerEvents: slideVisible ? 'auto' : 'none',\n transitionProperty: 'opacity',\n }}\n >\n {({ isActive }) => (\n <Slide\n isActive={isActive}\n containerAspectRatio={swiperAspectRatio}\n image={image}\n containerHeight={swiperHeight}\n meta={meta}\n index={index}\n imageAspectRatio={imageAspectRatio}\n slideVisible={slideVisible}\n />\n )}\n </SwiperSlide>\n );\n })}\n </Swiper>\n\n {showControls && (\n <div\n className={cn(styles.arrow, {\n [styles.focused]: rightArrowFocused,\n })}\n onClick={handleNextClick}\n role='button'\n onKeyDown={handleArrowRightKeyDown}\n tabIndex={0}\n ref={rightArrowRef}\n aria-label='Следующее изображение'\n data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n >\n <ChevronForwardHeavyMIcon />\n </div>\n )}\n </div>\n );\n};\n"],"names":["SwiperCore","EffectFade","A11y","Controller","useContext","GalleryContext","useHandleImageViewer","useFocus","useCallback","useMemo","cn","styles","isVideo","React","TestIds","ChevronBackHeavyMIcon","getImageAlt","Swiper","__assign","SwiperSlide","getImageKey","Slide","ChevronForwardHeavyMIcon"],"mappings":"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"}
1
+ {"version":3,"file":"component.js","sources":["../../../src/components/image-viewer/component.tsx"],"sourcesContent":["import React, { type FC, type KeyboardEventHandler, useCallback, useContext, useMemo } from 'react';\nimport cn from 'classnames';\nimport SwiperCore, { A11y, Controller, EffectFade } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/react';\n\nimport { useFocus } from '@alfalab/hooks';\nimport { ChevronBackHeavyMIcon } from '@alfalab/icons-glyph/ChevronBackHeavyMIcon';\nimport { ChevronForwardHeavyMIcon } from '@alfalab/icons-glyph/ChevronForwardHeavyMIcon';\n\nimport { GalleryContext } from '../../context';\nimport { getImageAlt, getImageKey, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { Slide } from './slide';\n\nimport 'swiper/swiper.min.css';\nimport styles from './index.module.css';\n\nSwiperCore.use([EffectFade, A11y, Controller]);\n\nexport const ImageViewer: FC = () => {\n const {\n images,\n imagesMeta,\n fullScreen,\n currentSlideIndex,\n initialSlide,\n setCurrentSlideIndex,\n getSwiper,\n setSwiper,\n slidePrev,\n slideNext,\n getCurrentImage,\n } = useContext(GalleryContext);\n\n const { handleWrapperClick, isMobile, rightArrowRef, leftArrowRef } = useHandleImageViewer();\n\n const [leftArrowFocused] = useFocus(leftArrowRef, 'keyboard');\n const [rightArrowFocused] = useFocus(rightArrowRef, 'keyboard');\n\n const swiper = getSwiper();\n const currentImage = getCurrentImage();\n\n const handleSlideChange = useCallback(() => {\n setCurrentSlideIndex?.(swiper?.activeIndex ?? initialSlide);\n }, [setCurrentSlideIndex, swiper, initialSlide]);\n\n const handlePrevClick = () => {\n slidePrev();\n };\n\n const handleNextClick = () => {\n slideNext();\n };\n\n const handleArrowLeftKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n slidePrev();\n }\n };\n\n const handleArrowRightKeyDown: KeyboardEventHandler = (event) => {\n if (event.key === 'Enter') {\n slideNext();\n }\n };\n\n const swiperProps = useMemo<Swiper>(\n () => ({\n slidesPerView: 1,\n effect: 'slide',\n className: cn(styles.swiper, {\n [styles.hidden]: fullScreen && !isVideo(currentImage?.src),\n [styles.fullScreenVideo]: fullScreen && isVideo(currentImage?.src),\n [styles.mobile]: isMobile,\n [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n }),\n controller: { control: swiper },\n a11y: {\n slideRole: 'img',\n },\n initialSlide,\n simulateTouch: false,\n zoom: { maxRatio: 4, minRatio: 1, toggle: true },\n onSwiper: setSwiper,\n onSlideChange: handleSlideChange,\n lazy: { loadPrevNext: true },\n }),\n [\n fullScreen,\n currentImage?.src,\n isMobile,\n swiper,\n initialSlide,\n setSwiper,\n handleSlideChange,\n ],\n );\n\n const showControls = !fullScreen && !isMobile && !!images.length;\n\n const swiperWidth = swiper?.width || 1;\n const swiperHeight = swiper?.height || swiper?.width || 1;\n\n const swiperAspectRatio = swiperWidth / swiperHeight;\n\n return (\n <div\n className={cn(styles.component, {\n [styles.mobile]: isMobile,\n [styles.mobileVideo]: isMobile && isVideo(currentImage?.src),\n })}\n aria-hidden={true}\n onClick={handleWrapperClick}\n >\n {showControls && (\n <div\n className={cn(styles.arrow, {\n [styles.focused]: leftArrowFocused,\n })}\n onClick={handlePrevClick}\n role='button'\n onKeyDown={handleArrowLeftKeyDown}\n tabIndex={0}\n ref={leftArrowRef}\n aria-label='Предыдущее изображение'\n data-test-id={TestIds.PREV_SLIDE_BUTTON}\n >\n <ChevronBackHeavyMIcon />\n </div>\n )}\n\n {fullScreen && !isVideo(currentImage?.src) && (\n <img\n src={currentImage?.src}\n alt={currentImage ? getImageAlt(currentImage, currentSlideIndex) : ''}\n className={styles.fullScreenImage}\n />\n )}\n\n <Swiper {...swiperProps}>\n {images.map((image, index) => {\n const meta = imagesMeta[index];\n\n const imageWidth = meta?.width || 1;\n const imageHeight = meta?.height || 1;\n\n const imageAspectRatio = imageWidth / imageHeight;\n\n const slideVisible = index === currentSlideIndex;\n\n return (\n <SwiperSlide\n key={getImageKey(image, index)}\n style={{\n pointerEvents: slideVisible ? 'auto' : 'none',\n transitionProperty: 'opacity',\n }}\n >\n {({ isActive }) => (\n <Slide\n isActive={isActive}\n containerAspectRatio={swiperAspectRatio}\n image={image}\n containerHeight={swiperHeight}\n meta={meta}\n index={index}\n imageAspectRatio={imageAspectRatio}\n slideVisible={slideVisible}\n />\n )}\n </SwiperSlide>\n );\n })}\n </Swiper>\n\n {showControls && (\n <div\n className={cn(styles.arrow, {\n [styles.focused]: rightArrowFocused,\n })}\n onClick={handleNextClick}\n role='button'\n onKeyDown={handleArrowRightKeyDown}\n tabIndex={0}\n ref={rightArrowRef}\n aria-label='Следующее изображение'\n data-test-id={TestIds.NEXT_SLIDE_BUTTON}\n >\n <ChevronForwardHeavyMIcon />\n </div>\n )}\n </div>\n );\n};\n"],"names":["SwiperCore","EffectFade","A11y","Controller","useContext","GalleryContext","useHandleImageViewer","useFocus","useCallback","useMemo","cn","styles","isVideo","React","TestIds","ChevronBackHeavyMIcon","getImageAlt","Swiper","__assign","SwiperSlide","getImageKey","Slide","ChevronForwardHeavyMIcon"],"mappings":"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"}
@@ -2,7 +2,7 @@ import { type MouseEventHandler, type SyntheticEvent } from 'react';
2
2
  export declare const useHandleImageViewer: () => {
3
3
  handleLoad: (event: SyntheticEvent<HTMLImageElement>, index: number) => void;
4
4
  handleLoadError: (index: number) => void;
5
- handleWrapperClick: MouseEventHandler<Element>;
5
+ handleWrapperClick: MouseEventHandler;
6
6
  isMobile: boolean;
7
7
  leftArrowRef: import("react").RefObject<HTMLDivElement>;
8
8
  rightArrowRef: import("react").RefObject<HTMLDivElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n type MouseEventHandler,\n type SyntheticEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n const leftArrowRef = useRef<HTMLDivElement>(null);\n const rightArrowRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n const target = event.currentTarget;\n\n const { naturalWidth, naturalHeight } = target;\n\n setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n };\n\n const handleLoadError = (index: number) => {\n setImageMeta({ width: 0, height: 0, broken: true }, index);\n };\n\n const handleWrapperClick = useCallback<MouseEventHandler>(\n (event) => {\n const eventTarget = event.target as HTMLElement;\n\n const isArrow =\n leftArrowRef.current?.contains(eventTarget) ||\n rightArrowRef.current?.contains(eventTarget);\n\n const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n const isImg = eventTarget.tagName === 'IMG';\n\n if (!isImg && !isPlaceholder && !isArrow && !isMobile) {\n onClose();\n }\n },\n [isMobile, onClose],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n return {\n handleLoad,\n handleLoadError,\n handleWrapperClick,\n isMobile,\n leftArrowRef,\n rightArrowRef,\n };\n};\n"],"names":["useContext","GalleryContext","useRef","useCallback","styles","useEffect","elementClosest"],"mappings":";;;;;;;;;;;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAGC,iBAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAIC,uBAAM,CAAC,WAAW,CAAE,CAAC,CAAC;AAE5E,QAAA,IAAM,KAAK,GAAG,WAAW,CAAC,OAAO,KAAK,KAAK;QAE3C,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACnD,YAAA,OAAO,EAAE;AACZ;AACL,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;AAED,IAAAC,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;KAChB;AACL;;;;"}
1
+ {"version":3,"file":"hooks.js","sources":["../../../src/components/image-viewer/hooks.ts"],"sourcesContent":["import {\n type MouseEventHandler,\n type SyntheticEvent,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport elementClosest from 'element-closest';\n\nimport { GalleryContext } from '../../context';\n\nimport styles from './index.module.css';\n\nexport const useHandleImageViewer = () => {\n const { view, onClose, setImageMeta } = useContext(GalleryContext);\n\n const leftArrowRef = useRef<HTMLDivElement>(null);\n const rightArrowRef = useRef<HTMLDivElement>(null);\n\n const isMobile = view === 'mobile';\n\n const handleLoad = (event: SyntheticEvent<HTMLImageElement>, index: number) => {\n const target = event.currentTarget;\n\n const { naturalWidth, naturalHeight } = target;\n\n setImageMeta({ width: naturalWidth, height: naturalHeight }, index);\n };\n\n const handleLoadError = (index: number) => {\n setImageMeta({ width: 0, height: 0, broken: true }, index);\n };\n\n const handleWrapperClick = useCallback<MouseEventHandler>(\n (event) => {\n const eventTarget = event.target as HTMLElement;\n\n const isArrow =\n leftArrowRef.current?.contains(eventTarget) ||\n rightArrowRef.current?.contains(eventTarget);\n\n const isPlaceholder = Boolean(eventTarget.closest(`.${styles.placeholder}`));\n\n const isImg = eventTarget.tagName === 'IMG';\n\n if (!isImg && !isPlaceholder && !isArrow && !isMobile) {\n onClose();\n }\n },\n [isMobile, onClose],\n );\n\n useEffect(() => {\n elementClosest(window);\n }, []);\n\n return {\n handleLoad,\n handleLoadError,\n handleWrapperClick,\n isMobile,\n leftArrowRef,\n rightArrowRef,\n };\n};\n"],"names":["useContext","GalleryContext","useRef","useCallback","styles","useEffect","elementClosest"],"mappings":";;;;;;;;;;;;;;AAca,IAAA,oBAAoB,GAAG,YAAA;AAC1B,IAAA,IAAA,EAAkC,GAAAA,gBAAU,CAACC,sBAAc,CAAC,EAA1D,IAAI,GAAA,EAAA,CAAA,IAAA,EAAE,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,YAAY,kBAA+B;AAElE,IAAA,IAAM,YAAY,GAAGC,YAAM,CAAiB,IAAI,CAAC;AACjD,IAAA,IAAM,aAAa,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAElD,IAAA,IAAM,QAAQ,GAAG,IAAI,KAAK,QAAQ;AAElC,IAAA,IAAM,UAAU,GAAG,UAAC,KAAuC,EAAE,KAAa,EAAA;AACtE,QAAA,IAAM,MAAM,GAAG,KAAK,CAAC,aAAa;QAE1B,IAAA,YAAY,GAAoB,MAAM,CAAA,YAA1B,EAAE,aAAa,GAAK,MAAM,CAAA,aAAX;AAEnC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,EAAE,KAAK,CAAC;AACvE,KAAC;IAED,IAAM,eAAe,GAAG,UAAC,KAAa,EAAA;AAClC,QAAA,YAAY,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,KAAK,CAAC;AAC9D,KAAC;AAED,IAAA,IAAM,kBAAkB,GAAGC,iBAAW,CAClC,UAAC,KAAK,EAAA;;AACF,QAAA,IAAM,WAAW,GAAG,KAAK,CAAC,MAAqB;QAE/C,IAAM,OAAO,GACT,CAAA,CAAA,EAAA,GAAA,YAAY,CAAC,OAAO,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,CAAC,WAAW,CAAC;aAC3C,CAAA,EAAA,GAAA,aAAa,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,QAAQ,CAAC,WAAW,CAAC,CAAA;AAEhD,QAAA,IAAM,aAAa,GAAG,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,GAAA,CAAA,MAAA,CAAIC,uBAAM,CAAC,WAAW,CAAE,CAAC,CAAC;AAE5E,QAAA,IAAM,KAAK,GAAG,WAAW,CAAC,OAAO,KAAK,KAAK;AAE3C,QAAA,IAAI,CAAC,KAAK,IAAI,CAAC,aAAa,IAAI,CAAC,OAAO,IAAI,CAAC,QAAQ,EAAE;AACnD,YAAA,OAAO,EAAE;;AAEjB,KAAC,EACD,CAAC,QAAQ,EAAE,OAAO,CAAC,CACtB;AAED,IAAAC,eAAS,CAAC,YAAA;QACNC,+BAAc,CAAC,MAAM,CAAC;KACzB,EAAE,EAAE,CAAC;IAEN,OAAO;AACH,QAAA,UAAU,EAAA,UAAA;AACV,QAAA,eAAe,EAAA,eAAA;AACf,QAAA,kBAAkB,EAAA,kBAAA;AAClB,QAAA,QAAQ,EAAA,QAAA;AACR,QAAA,YAAY,EAAA,YAAA;AACZ,QAAA,aAAa,EAAA,aAAA;KAChB;AACL;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { type FC } from 'react';
2
2
  import { type GalleryImage, type ImageMeta } from '../../types';
3
- declare type SlideProps = {
3
+ type SlideProps = {
4
4
  isActive: boolean;
5
5
  image: GalleryImage;
6
6
  meta?: ImageMeta;
@@ -1 +1 @@
1
- {"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n active: boolean;\n broken: boolean;\n loading: boolean;\n children: ReactNode;\n isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n const content = broken ? (\n <div className={styles.brokenImgWrapper}>\n <div className={styles.brokenImgIcon}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width='80'\n height='80'\n viewBox='0 0 80 80'\n fill='none'\n >\n <rect width='80' height='80' fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path d={NoImagePaths.triangleImage} fill='#89898A' />\n </svg>\n </div>\n\n <TypographyText view='primary-small' color='static-secondary-light'>\n Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n </TypographyText>\n </div>\n ) : (\n children\n );\n\n return (\n <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n {broken ? <div className={styles.placeholder}>{content}</div> : content}\n <Spinner className={styles.spinner} preset={48} visible={loading} />\n </div>\n );\n};\n\ntype SlideProps = {\n isActive: boolean;\n image: GalleryImage;\n meta?: ImageMeta;\n containerAspectRatio: number;\n imageAspectRatio: number;\n index: number;\n containerHeight: number;\n slideVisible: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n isActive,\n meta,\n containerAspectRatio,\n imageAspectRatio,\n image,\n index,\n containerHeight,\n slideVisible,\n}) => {\n const { view } = useContext(GalleryContext);\n const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n const broken = Boolean(meta?.broken);\n const small = isSmallImage(meta);\n const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n if (isVideo(image.src)) {\n return (\n <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n <Video url={image.src} index={index} isActive={isActive} />\n </SlideInner>\n );\n }\n\n return (\n <SlideInner active={isActive} broken={broken} loading={!meta}>\n <img\n src={image.src}\n alt={getImageAlt(image, index)}\n className={cn({\n [styles.smallImage]: small,\n [styles.image]: !small && meta,\n [styles.mobile]: view === 'mobile',\n [styles.verticalImageFit]: verticalImageFit,\n [styles.horizontalImageFit]: horizontalImageFit,\n })}\n onLoad={(event) => handleLoad(event, index)}\n onError={() => handleLoadError(index)}\n style={{\n maxHeight: `${containerHeight}px`,\n }}\n data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n />\n </SlideInner>\n );\n};\n"],"names":["React","styles","NoImagePaths","TypographyText","cn","Spinner","index","useContext","GalleryContext","useHandleImageViewer","isSmallImage","isVideo","Video","getImageAlt","TestIds"],"mappings":"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"}
1
+ {"version":3,"file":"slide.js","sources":["../../../src/components/image-viewer/slide.tsx"],"sourcesContent":["import React, { type FC, type ReactNode, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Spinner } from '@alfalab/core-components-spinner';\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { type GalleryImage, type ImageMeta } from '../../types';\nimport { getImageAlt, isSmallImage, isVideo, TestIds } from '../../utils';\n\nimport { useHandleImageViewer } from './hooks';\nimport { NoImagePaths } from './paths';\nimport { Video } from './video';\n\nimport styles from './index.module.css';\n\ntype SlideInnerProps = {\n active: boolean;\n broken: boolean;\n loading: boolean;\n children: ReactNode;\n isVideoView?: boolean;\n};\n\nconst SlideInner: FC<SlideInnerProps> = ({ children, broken, loading, isVideoView }) => {\n const content = broken ? (\n <div className={styles.brokenImgWrapper}>\n <div className={styles.brokenImgIcon}>\n <svg\n xmlns='http://www.w3.org/2000/svg'\n width='80'\n height='80'\n viewBox='0 0 80 80'\n fill='none'\n >\n <rect width='80' height='80' fill='none' />\n <path\n fillRule='evenodd'\n clipRule='evenodd'\n d={NoImagePaths.baseImage}\n fill='#89898A'\n />\n <path d={NoImagePaths.triangleImage} fill='#89898A' />\n </svg>\n </div>\n\n <TypographyText view='primary-small' color='static-secondary-light'>\n Не удалось загрузить {isVideoView ? 'видео' : 'изображение'}\n </TypographyText>\n </div>\n ) : (\n children\n );\n\n return (\n <div className={cn(styles.slide, { [styles.slideLoading]: loading })}>\n {broken ? <div className={styles.placeholder}>{content}</div> : content}\n <Spinner className={styles.spinner} preset={48} visible={loading} />\n </div>\n );\n};\n\ntype SlideProps = {\n isActive: boolean;\n image: GalleryImage;\n meta?: ImageMeta;\n containerAspectRatio: number;\n imageAspectRatio: number;\n index: number;\n containerHeight: number;\n slideVisible: boolean;\n};\n\nexport const Slide: FC<SlideProps> = ({\n isActive,\n meta,\n containerAspectRatio,\n imageAspectRatio,\n image,\n index,\n containerHeight,\n slideVisible,\n}) => {\n const { view } = useContext(GalleryContext);\n const { handleLoad, handleLoadError } = useHandleImageViewer();\n\n const broken = Boolean(meta?.broken);\n const small = isSmallImage(meta);\n const verticalImageFit = !small && containerAspectRatio > imageAspectRatio;\n const horizontalImageFit = !small && containerAspectRatio <= imageAspectRatio;\n\n if (isVideo(image.src)) {\n return (\n <SlideInner isVideoView={true} active={isActive} broken={broken} loading={!meta}>\n <Video url={image.src} index={index} isActive={isActive} />\n </SlideInner>\n );\n }\n\n return (\n <SlideInner active={isActive} broken={broken} loading={!meta}>\n <img\n src={image.src}\n alt={getImageAlt(image, index)}\n className={cn({\n [styles.smallImage]: small,\n [styles.image]: !small && meta,\n [styles.mobile]: view === 'mobile',\n [styles.verticalImageFit]: verticalImageFit,\n [styles.horizontalImageFit]: horizontalImageFit,\n })}\n onLoad={(event) => handleLoad(event, index)}\n onError={() => handleLoadError(index)}\n style={{\n maxHeight: `${containerHeight}px`,\n }}\n data-test-id={slideVisible ? TestIds.ACTIVE_IMAGE : undefined}\n />\n </SlideInner>\n );\n};\n"],"names":["React","styles","NoImagePaths","TypographyText","cn","Spinner","index","useContext","GalleryContext","useHandleImageViewer","isSmallImage","isVideo","Video","getImageAlt","TestIds"],"mappings":"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"}
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- declare type Props = {
2
+ type Props = {
3
3
  url: string;
4
4
  index: number;
5
5
  isActive: boolean;
@@ -2,9 +2,9 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var tslib = require('tslib');
5
6
  var React = require('react');
6
7
  var cn = require('classnames');
7
- var Hls = require('hls.js');
8
8
  var circle = require('@alfalab/core-components-icon-view/cssm/circle');
9
9
  var PlayCompactMIcon = require('@alfalab/icons-glyph/PlayCompactMIcon');
10
10
  var context = require('../../../context.js');
@@ -14,9 +14,26 @@ var styles = require('./index.module.css');
14
14
 
15
15
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
16
16
 
17
+ function _interopNamespaceCompat(e) {
18
+ if (e && typeof e === 'object' && 'default' in e) return e;
19
+ var n = Object.create(null);
20
+ if (e) {
21
+ Object.keys(e).forEach(function (k) {
22
+ if (k !== 'default') {
23
+ var d = Object.getOwnPropertyDescriptor(e, k);
24
+ Object.defineProperty(n, k, d.get ? d : {
25
+ enumerable: true,
26
+ get: function () { return e[k]; }
27
+ });
28
+ }
29
+ });
30
+ }
31
+ n.default = e;
32
+ return Object.freeze(n);
33
+ }
34
+
17
35
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
18
36
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
19
- var Hls__default = /*#__PURE__*/_interopDefaultCompat(Hls);
20
37
  var PlayCompactMIcon__default = /*#__PURE__*/_interopDefaultCompat(PlayCompactMIcon);
21
38
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
22
39
 
@@ -25,7 +42,8 @@ var Video = function (_a) {
25
42
  var url = _a.url, index$1 = _a.index, className = _a.className, isActive = _a.isActive;
26
43
  var playerRef = React.useRef(null);
27
44
  var timer = React.useRef();
28
- var _c = React.useContext(context.GalleryContext), setImageMeta = _c.setImageMeta, mutedVideo = _c.mutedVideo, view = _c.view, playingVideo = _c.playingVideo, setPlayingVideo = _c.setPlayingVideo, setHideNavigation = _c.setHideNavigation, getCurrentImage = _c.getCurrentImage;
45
+ var _c = React.useState(true), hlsSupported = _c[0], setHlsSupported = _c[1];
46
+ var _d = React.useContext(context.GalleryContext), setImageMeta = _d.setImageMeta, mutedVideo = _d.mutedVideo, view = _d.view, playingVideo = _d.playingVideo, setPlayingVideo = _d.setPlayingVideo, setHideNavigation = _d.setHideNavigation, getCurrentImage = _d.getCurrentImage;
29
47
  var isMobile = view === 'mobile';
30
48
  var isDesktop = view === 'desktop';
31
49
  var image = getCurrentImage();
@@ -33,30 +51,96 @@ var Video = function (_a) {
33
51
  setImageMeta({ player: playerRef }, index$1);
34
52
  /* eslint-disable-next-line react-hooks/exhaustive-deps */
35
53
  }, [index$1]);
54
+ var loadHlsLibrary = React.useCallback(function () {
55
+ var args_1 = [];
56
+ for (var _i = 0; _i < arguments.length; _i++) {
57
+ args_1[_i] = arguments[_i];
58
+ }
59
+ return tslib.__awaiter(void 0, tslib.__spreadArray([], args_1, true), void 0, function (attempt, maxAttempts) {
60
+ var HlsLib;
61
+ if (attempt === void 0) { attempt = 1; }
62
+ if (maxAttempts === void 0) { maxAttempts = 3; }
63
+ return tslib.__generator(this, function (_b) {
64
+ switch (_b.label) {
65
+ case 0:
66
+ _b.trys.push([0, 2, , 5]);
67
+ return [4 /*yield*/, Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespaceCompat(require(
68
+ /* webpackChunkName: "hls-js-gallery" */ 'hls.js')); })];
69
+ case 1:
70
+ HlsLib = (_b.sent()).default;
71
+ return [2 /*return*/, HlsLib];
72
+ case 2:
73
+ _b.sent();
74
+ if (!(attempt < maxAttempts)) return [3 /*break*/, 4];
75
+ /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */
76
+ return [4 /*yield*/, new Promise(function (resolve) {
77
+ setTimeout(function () {
78
+ resolve();
79
+ }, 300 * Math.pow(2, (attempt - 1)));
80
+ })];
81
+ case 3:
82
+ /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */
83
+ _b.sent();
84
+ return [2 /*return*/, loadHlsLibrary(attempt + 1, maxAttempts)];
85
+ case 4:
86
+ setHlsSupported(false);
87
+ setImageMeta({ player: { current: null }, broken: true }, index$1);
88
+ return [2 /*return*/, null];
89
+ case 5: return [2 /*return*/];
90
+ }
91
+ });
92
+ });
93
+ }, [setImageMeta, index$1]);
36
94
  React.useEffect(function () {
37
- var hls = new Hls__default.default();
38
- if (Hls__default.default.isSupported()) {
39
- hls.on(Hls__default.default.Events.ERROR, function (_, data) {
40
- if (data.fatal) {
41
- switch (data.type) {
42
- case Hls__default.default.ErrorTypes.MEDIA_ERROR:
43
- hls.recoverMediaError();
44
- break;
45
- case Hls__default.default.ErrorTypes.NETWORK_ERROR:
46
- setImageMeta({ player: { current: null }, broken: true }, index$1);
47
- break;
48
- default:
49
- hls.destroy();
50
- break;
51
- }
95
+ var hls = null;
96
+ var initHls = function () { return tslib.__awaiter(void 0, void 0, void 0, function () {
97
+ var HlsLib_1;
98
+ return tslib.__generator(this, function (_b) {
99
+ switch (_b.label) {
100
+ case 0:
101
+ _b.trys.push([0, 2, , 3]);
102
+ return [4 /*yield*/, loadHlsLibrary()];
103
+ case 1:
104
+ HlsLib_1 = _b.sent();
105
+ if (!HlsLib_1 || !playerRef.current) {
106
+ return [2 /*return*/];
107
+ }
108
+ if (!HlsLib_1.isSupported()) {
109
+ setHlsSupported(false);
110
+ return [2 /*return*/];
111
+ }
112
+ hls = new HlsLib_1();
113
+ hls.on(HlsLib_1.Events.ERROR, function (_, data) {
114
+ if (data.fatal && hls) {
115
+ switch (data.type) {
116
+ case HlsLib_1.ErrorTypes.MEDIA_ERROR:
117
+ hls.recoverMediaError();
118
+ break;
119
+ case HlsLib_1.ErrorTypes.NETWORK_ERROR:
120
+ setImageMeta({ player: { current: null }, broken: true }, index$1);
121
+ break;
122
+ default:
123
+ hls.destroy();
124
+ break;
125
+ }
126
+ }
127
+ });
128
+ hls.loadSource(url);
129
+ if (playerRef.current) {
130
+ hls.attachMedia(playerRef.current);
131
+ hls.subtitleDisplay = false;
132
+ }
133
+ return [3 /*break*/, 3];
134
+ case 2:
135
+ _b.sent();
136
+ setHlsSupported(false);
137
+ setImageMeta({ player: { current: null }, broken: true }, index$1);
138
+ return [3 /*break*/, 3];
139
+ case 3: return [2 /*return*/];
52
140
  }
53
141
  });
54
- hls.loadSource(url);
55
- if (playerRef.current) {
56
- hls.attachMedia(playerRef.current);
57
- hls.subtitleDisplay = false;
58
- }
59
- }
142
+ }); };
143
+ initHls();
60
144
  return function () {
61
145
  if (hls) {
62
146
  hls.destroy();
@@ -141,7 +225,7 @@ var Video = function (_a) {
141
225
  return (
142
226
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
143
227
  React__default.default.createElement("div", { onClick: handleWrapperClick, className: styles__default.default.videoWrapper },
144
- React__default.default.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: Hls__default.default.isSupported() ? undefined : url, className: cn__default.default(styles__default.default.video, (_b = {}, _b[styles__default.default.mobile] = view === 'mobile', _b), className) },
228
+ React__default.default.createElement("video", { onPlay: onPlay, onPause: onPause, ref: playerRef, playsInline: true, muted: mutedVideo, loop: true, src: hlsSupported ? undefined : url, className: cn__default.default(styles__default.default.video, (_b = {}, _b[styles__default.default.mobile] = view === 'mobile', _b), className) },
145
229
  React__default.default.createElement("track", { kind: 'captions' })),
146
230
  isDesktop && !playingVideo && (React__default.default.createElement("div", { className: styles__default.default.videoButton },
147
231
  React__default.default.createElement(circle.Circle, { size: 64, shapeClassName: styles__default.default.iconShape },
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n type MouseEvent,\n type ReactEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n} from 'react';\nimport cn from 'classnames';\nimport Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n url: string;\n index: number;\n isActive: boolean;\n className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n const playerRef = useRef<HTMLVideoElement>(null);\n const timer = useRef<ReturnType<typeof setTimeout>>();\n\n const {\n setImageMeta,\n mutedVideo,\n view,\n playingVideo,\n setPlayingVideo,\n setHideNavigation,\n getCurrentImage,\n } = useContext(GalleryContext);\n\n const isMobile = view === 'mobile';\n const isDesktop = view === 'desktop';\n\n const image = getCurrentImage();\n\n useEffect(() => {\n setImageMeta({ player: playerRef }, index);\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [index]);\n\n useEffect(() => {\n const hls = new Hls();\n\n if (Hls.isSupported()) {\n hls.on(Hls.Events.ERROR, (_, data) => {\n if (data.fatal) {\n switch (data.type) {\n case Hls.ErrorTypes.MEDIA_ERROR:\n hls.recoverMediaError();\n break;\n case Hls.ErrorTypes.NETWORK_ERROR:\n setImageMeta({ player: { current: null }, broken: true }, index);\n break;\n default:\n hls.destroy();\n break;\n }\n }\n });\n\n hls.loadSource(url);\n if (playerRef.current) {\n hls.attachMedia(playerRef.current);\n hls.subtitleDisplay = false;\n }\n }\n\n return () => {\n if (hls) {\n hls.destroy();\n }\n if (timer.current) {\n clearTimeout(timer.current);\n }\n };\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [url, index]);\n\n useEffect(() => {\n if (playerRef.current && isActive) {\n if (playingVideo) {\n playerRef.current.play();\n } else {\n playerRef.current.pause();\n }\n }\n if (playerRef.current && !isActive) {\n playerRef.current.pause();\n playerRef.current.currentTime = 0;\n }\n }, [isActive, playingVideo]);\n\n useEffect(() => {\n const handleSpacePress = (e: KeyboardEvent) => {\n if ((e.key === ' ' || e.code === 'Space') && isActive) {\n if (playingVideo) {\n setPlayingVideo(false);\n } else {\n setPlayingVideo(true);\n }\n }\n };\n\n document.addEventListener('keyup', handleSpacePress);\n\n return () => {\n document.removeEventListener('keyup', handleSpacePress);\n };\n }, [isActive, playingVideo, setPlayingVideo]);\n\n const handleWrapperClick = (e: MouseEvent) => {\n e.stopPropagation();\n\n if (isMobile) {\n setHideNavigation(false);\n\n if (playingVideo) {\n if (timer.current) {\n clearTimeout(timer.current);\n }\n timer.current = setTimeout(() => {\n setHideNavigation(true);\n }, 3000);\n }\n\n return;\n }\n\n setPlayingVideo(!playingVideo);\n };\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (image?.bottomButton) {\n image.bottomButton.onClick(e);\n }\n },\n [image?.bottomButton],\n );\n\n const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n image?.onPlay?.();\n\n if (timer.current) {\n clearTimeout(timer.current);\n }\n\n timer.current = setTimeout(() => {\n setHideNavigation(true);\n }, 3000);\n };\n\n const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n image?.onPause?.();\n\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = undefined;\n }\n\n setHideNavigation(false);\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div onClick={handleWrapperClick} className={styles.videoWrapper}>\n <video\n onPlay={onPlay}\n onPause={onPause}\n ref={playerRef}\n playsInline={true}\n muted={mutedVideo}\n loop={true}\n src={Hls.isSupported() ? undefined : url}\n className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n >\n <track kind='captions' />\n </video>\n {isDesktop && !playingVideo && (\n <div className={styles.videoButton}>\n <Circle size={64} shapeClassName={styles.iconShape}>\n <PlayCompactMIcon className={styles.icon} />\n </Circle>\n </div>\n )}\n {isDesktop && <Subtitles />}\n {isDesktop && image?.bottomButton && (\n <BottomButton\n bottomButton={image.bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n </div>\n );\n};\n"],"names":["index","useRef","useContext","GalleryContext","useEffect","Hls","useCallback","React","styles","cn","Circle","PlayCompactMIcon","Subtitles","BottomButton"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sources":["../../../../src/components/image-viewer/video/index.tsx"],"sourcesContent":["import React, {\n type MouseEvent,\n type ReactEventHandler,\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react';\nimport cn from 'classnames';\nimport type Hls from 'hls.js';\n\nimport { Circle } from '@alfalab/core-components-icon-view/circle';\nimport PlayCompactMIcon from '@alfalab/icons-glyph/PlayCompactMIcon';\n\nimport { GalleryContext } from '../../../context';\nimport { BottomButton } from '../../bottom-button';\nimport { Subtitles } from '../../subtitles';\n\nimport styles from './index.module.css';\n\ntype Props = {\n url: string;\n index: number;\n isActive: boolean;\n className?: string;\n};\n\nexport const Video = ({ url, index, className, isActive }: Props) => {\n const playerRef = useRef<HTMLVideoElement>(null);\n const timer = useRef<ReturnType<typeof setTimeout>>();\n const [hlsSupported, setHlsSupported] = useState<boolean>(true);\n\n const {\n setImageMeta,\n mutedVideo,\n view,\n playingVideo,\n setPlayingVideo,\n setHideNavigation,\n getCurrentImage,\n } = useContext(GalleryContext);\n\n const isMobile = view === 'mobile';\n const isDesktop = view === 'desktop';\n\n const image = getCurrentImage();\n\n useEffect(() => {\n setImageMeta({ player: playerRef }, index);\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [index]);\n\n const loadHlsLibrary = useCallback(\n async (attempt = 1, maxAttempts = 3): Promise<typeof Hls | null> => {\n try {\n const { default: HlsLib } = await import(\n /* webpackChunkName: \"hls-js-gallery\" */ 'hls.js'\n );\n\n return HlsLib;\n } catch {\n if (attempt < maxAttempts) {\n /* Экспоненциальная задержка ретрая: 300ms, 600ms, 1200ms */\n await new Promise<void>((resolve) => {\n setTimeout(\n () => {\n resolve();\n },\n 300 * 2 ** (attempt - 1),\n );\n });\n\n return loadHlsLibrary(attempt + 1, maxAttempts);\n }\n\n setHlsSupported(false);\n setImageMeta({ player: { current: null }, broken: true }, index);\n\n return null;\n }\n },\n [setImageMeta, index],\n );\n\n useEffect(() => {\n let hls: Hls | null = null;\n\n const initHls = async () => {\n try {\n const HlsLib = await loadHlsLibrary();\n\n if (!HlsLib || !playerRef.current) {\n return;\n }\n\n if (!HlsLib.isSupported()) {\n setHlsSupported(false);\n\n return;\n }\n\n hls = new HlsLib();\n\n hls.on(HlsLib.Events.ERROR, (_, data) => {\n if (data.fatal && hls) {\n switch (data.type) {\n case HlsLib.ErrorTypes.MEDIA_ERROR:\n hls.recoverMediaError();\n break;\n case HlsLib.ErrorTypes.NETWORK_ERROR:\n setImageMeta({ player: { current: null }, broken: true }, index);\n break;\n default:\n hls.destroy();\n break;\n }\n }\n });\n\n hls.loadSource(url);\n\n if (playerRef.current) {\n hls.attachMedia(playerRef.current);\n hls.subtitleDisplay = false;\n }\n } catch {\n setHlsSupported(false);\n setImageMeta({ player: { current: null }, broken: true }, index);\n }\n };\n\n initHls();\n\n return () => {\n if (hls) {\n hls.destroy();\n }\n if (timer.current) {\n clearTimeout(timer.current);\n }\n };\n /* eslint-disable-next-line react-hooks/exhaustive-deps */\n }, [url, index]);\n\n useEffect(() => {\n if (playerRef.current && isActive) {\n if (playingVideo) {\n playerRef.current.play();\n } else {\n playerRef.current.pause();\n }\n }\n if (playerRef.current && !isActive) {\n playerRef.current.pause();\n playerRef.current.currentTime = 0;\n }\n }, [isActive, playingVideo]);\n\n useEffect(() => {\n const handleSpacePress = (e: KeyboardEvent) => {\n if ((e.key === ' ' || e.code === 'Space') && isActive) {\n if (playingVideo) {\n setPlayingVideo(false);\n } else {\n setPlayingVideo(true);\n }\n }\n };\n\n document.addEventListener('keyup', handleSpacePress);\n\n return () => {\n document.removeEventListener('keyup', handleSpacePress);\n };\n }, [isActive, playingVideo, setPlayingVideo]);\n\n const handleWrapperClick = (e: MouseEvent) => {\n e.stopPropagation();\n\n if (isMobile) {\n setHideNavigation(false);\n\n if (playingVideo) {\n if (timer.current) {\n clearTimeout(timer.current);\n }\n timer.current = setTimeout(() => {\n setHideNavigation(true);\n }, 3000);\n }\n\n return;\n }\n\n setPlayingVideo(!playingVideo);\n };\n\n const handleBottomButtonClick = useCallback(\n (e: MouseEvent) => {\n e.stopPropagation();\n if (image?.bottomButton) {\n image.bottomButton.onClick(e);\n }\n },\n [image?.bottomButton],\n );\n\n const onPlay: ReactEventHandler<HTMLVideoElement> = () => {\n image?.onPlay?.();\n\n if (timer.current) {\n clearTimeout(timer.current);\n }\n\n timer.current = setTimeout(() => {\n setHideNavigation(true);\n }, 3000);\n };\n\n const onPause: ReactEventHandler<HTMLVideoElement> = () => {\n image?.onPause?.();\n\n if (timer.current) {\n clearTimeout(timer.current);\n timer.current = undefined;\n }\n\n setHideNavigation(false);\n };\n\n return (\n // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions\n <div onClick={handleWrapperClick} className={styles.videoWrapper}>\n <video\n onPlay={onPlay}\n onPause={onPause}\n ref={playerRef}\n playsInline={true}\n muted={mutedVideo}\n loop={true}\n src={hlsSupported ? undefined : url}\n className={cn(styles.video, { [styles.mobile]: view === 'mobile' }, className)}\n >\n <track kind='captions' />\n </video>\n {isDesktop && !playingVideo && (\n <div className={styles.videoButton}>\n <Circle size={64} shapeClassName={styles.iconShape}>\n <PlayCompactMIcon className={styles.icon} />\n </Circle>\n </div>\n )}\n {isDesktop && <Subtitles />}\n {isDesktop && image?.bottomButton && (\n <BottomButton\n bottomButton={image.bottomButton}\n onClick={handleBottomButtonClick}\n className={styles.bottomButton}\n />\n )}\n </div>\n );\n};\n"],"names":["index","useRef","useState","useContext","GalleryContext","useEffect","useCallback","__awaiter","__spreadArray","React","styles","cn","Circle","PlayCompactMIcon","Subtitles","BottomButton"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n useContext(GalleryContext);\n\n const image = getCurrentImage();\n\n const handleMuteVideo = useCallback(() => {\n if (image) {\n if (mutedVideo && image.onUnmute) {\n image.onUnmute();\n } else if (image.onMute) {\n image.onMute();\n }\n }\n setMutedVideo(!mutedVideo);\n }, [image, mutedVideo, setMutedVideo]);\n\n const handlePlayVideo = useCallback(() => {\n setPlayingVideo(!playingVideo);\n }, [playingVideo, setPlayingVideo]);\n\n return isVideo(image?.src) ? (\n <section className={cn(styles.infoWrapper, styles.video)}>\n {playingVideo ? (\n <Buttons.Pause onClick={handlePlayVideo} />\n ) : (\n <Buttons.Play onClick={handlePlayVideo} />\n )}\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {image?.name}\n </TypographyText>\n {mutedVideo ? (\n <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n ) : (\n <Buttons.MuteVideo onClick={handleMuteVideo} />\n )}\n </section>\n ) : (\n <section className={styles.infoWrapper}>\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {image?.name}\n </TypographyText>\n </section>\n );\n};\n"],"names":["useContext","GalleryContext","useCallback","isVideo","React","cn","styles","Buttons.Pause","Buttons.Play","TypographyText","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;;;;;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACFA,gBAAU,CAACC,sBAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAGC,iBAAW,CAAC,YAAA;AAChC,QAAA,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;AACnB;iBAAM,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;AACjB;AACJ;AACD,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAGA,iBAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAOC,aAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtBC,sBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACTF,sBAAA,CAAA,aAAA,CAACG,WAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3CH,sBAAA,CAAA,aAAA,CAACI,UAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACDJ,sBAAC,CAAA,aAAA,CAAAK,mBAAc,EACX,EAAA,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACPF,sBAAA,CAAA,aAAA,CAACM,iBAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjDN,sBAAA,CAAA,aAAA,CAACO,eAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEVP,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAEE,uBAAM,CAAC,WAAW,EAAA;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAACK,mBAAc,EAAA,EACX,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/info-bar/Component.tsx"],"sourcesContent":["import React, { useCallback, useContext } from 'react';\nimport cn from 'classnames';\n\nimport { TypographyText } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { isVideo } from '../../utils';\nimport * as Buttons from '../buttons';\n\nimport styles from './index.module.css';\n\nexport const InfoBar = () => {\n const { getCurrentImage, mutedVideo, setMutedVideo, playingVideo, setPlayingVideo } =\n useContext(GalleryContext);\n\n const image = getCurrentImage();\n\n const handleMuteVideo = useCallback(() => {\n if (image) {\n if (mutedVideo && image.onUnmute) {\n image.onUnmute();\n } else if (image.onMute) {\n image.onMute();\n }\n }\n setMutedVideo(!mutedVideo);\n }, [image, mutedVideo, setMutedVideo]);\n\n const handlePlayVideo = useCallback(() => {\n setPlayingVideo(!playingVideo);\n }, [playingVideo, setPlayingVideo]);\n\n return isVideo(image?.src) ? (\n <section className={cn(styles.infoWrapper, styles.video)}>\n {playingVideo ? (\n <Buttons.Pause onClick={handlePlayVideo} />\n ) : (\n <Buttons.Play onClick={handlePlayVideo} />\n )}\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {image?.name}\n </TypographyText>\n {mutedVideo ? (\n <Buttons.UnmuteVideo onClick={handleMuteVideo} />\n ) : (\n <Buttons.MuteVideo onClick={handleMuteVideo} />\n )}\n </section>\n ) : (\n <section className={styles.infoWrapper}>\n <TypographyText\n className={styles.description}\n tag='div'\n view='component-primary'\n color='static-primary-light'\n >\n {image?.name}\n </TypographyText>\n </section>\n );\n};\n"],"names":["useContext","GalleryContext","useCallback","isVideo","React","cn","styles","Buttons.Pause","Buttons.Play","TypographyText","Buttons.UnmuteVideo","Buttons.MuteVideo"],"mappings":";;;;;;;;;;;;;;;;;;AAWa,IAAA,OAAO,GAAG,YAAA;IACb,IAAA,EAAA,GACFA,gBAAU,CAACC,sBAAc,CAAC,EADtB,eAAe,qBAAA,EAAE,UAAU,gBAAA,EAAE,aAAa,mBAAA,EAAE,YAAY,kBAAA,EAAE,eAAe,qBACnD;AAE9B,IAAA,IAAM,KAAK,GAAG,eAAe,EAAE;IAE/B,IAAM,eAAe,GAAGC,iBAAW,CAAC,YAAA;QAChC,IAAI,KAAK,EAAE;AACP,YAAA,IAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,EAAE;gBAC9B,KAAK,CAAC,QAAQ,EAAE;;AACb,iBAAA,IAAI,KAAK,CAAC,MAAM,EAAE;gBACrB,KAAK,CAAC,MAAM,EAAE;;;AAGtB,QAAA,aAAa,CAAC,CAAC,UAAU,CAAC;KAC7B,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,aAAa,CAAC,CAAC;IAEtC,IAAM,eAAe,GAAGA,iBAAW,CAAC,YAAA;AAChC,QAAA,eAAe,CAAC,CAAC,YAAY,CAAC;AAClC,KAAC,EAAE,CAAC,YAAY,EAAE,eAAe,CAAC,CAAC;IAEnC,OAAOC,aAAO,CAAC,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,GAAG,CAAC,IACtBC,sBAAS,CAAA,aAAA,CAAA,SAAA,EAAA,EAAA,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,WAAW,EAAEA,uBAAM,CAAC,KAAK,CAAC,EAAA;QACnD,YAAY,IACTF,sBAAA,CAAA,aAAA,CAACG,WAAa,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,KAE3CH,sBAAA,CAAA,aAAA,CAACI,UAAY,EAAA,EAAC,OAAO,EAAE,eAAe,EAAA,CAAI,CAC7C;QACDJ,sBAAC,CAAA,aAAA,CAAAK,mBAAc,EACX,EAAA,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC;AAChB,QAAA,UAAU,IACPF,sBAAA,CAAA,aAAA,CAACM,iBAAmB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,KAEjDN,sBAAA,CAAA,aAAA,CAACO,eAAiB,EAAC,EAAA,OAAO,EAAE,eAAe,EAAA,CAAI,CAClD,CACK,KAEVP,sBAAA,CAAA,aAAA,CAAA,SAAA,EAAA,EAAS,SAAS,EAAEE,uBAAM,CAAC,WAAW,EAAA;AAClC,QAAAF,sBAAA,CAAA,aAAA,CAACK,mBAAc,EAAA,EACX,SAAS,EAAEH,uBAAM,CAAC,WAAW,EAC7B,GAAG,EAAC,KAAK,EACT,IAAI,EAAC,mBAAmB,EACxB,KAAK,EAAC,sBAAsB,EAE3B,EAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,MAAA,GAAA,MAAA,GAAA,KAAK,CAAE,IAAI,CACC,CACX,CACb;AACL;;;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"Component.js","sources":["../../../src/components/navigation-bar/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport { GalleryContext } from '../../context';\nimport { getImageKey, TestIds } from '../../utils';\nimport { ImagePreview } from '../image-preview';\n\nimport styles from './index.module.css';\n\nconst MIN_SCROLL_STEP = 24;\nconst SCROLL_SPEED = 2; // Коэффициент скорости прокрутки (можно настроить)\nconst SCROLL_THRESHOLD = 150; // Расстояние от границы, при котором начинается прокрутка\n\nexport const NavigationBar: FC = () => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isNavMouseDowned, setIsNavMouseDowned] = useState<boolean>(false);\n\n const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo, view } =\n useContext(GalleryContext);\n\n const swiper = getSwiper();\n\n const handlePreviewSelect = (index: number) => {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n };\n\n const scroll = useCallback((scrollValue: number) => {\n if (containerRef.current) {\n containerRef.current.scroll({\n top: 0,\n left: containerRef.current.scrollLeft + scrollValue,\n behavior: 'smooth',\n });\n }\n }, []);\n\n const handlePreviewMouseDown = () => {\n setIsNavMouseDowned(true);\n };\n\n const handlePreviewMouseUp = () => {\n setIsNavMouseDowned(false);\n if (containerRef.current) {\n containerRef.current.style.scrollBehavior = 'auto'; // Отключаем плавность для резкой остановки\n }\n };\n\n const handleMouseNavigationMove = throttle((e: React.MouseEvent<HTMLDivElement>) => {\n if (!containerRef.current || !isNavMouseDowned) return;\n\n const container = containerRef.current;\n const { width: containerWidth, left: containerLeft } = container.getBoundingClientRect();\n const mouseX = e.clientX;\n\n // Если курсор близко к правой границе\n if (mouseX > containerWidth + containerLeft - SCROLL_THRESHOLD) {\n const scrollValue =\n (mouseX - (containerWidth + containerLeft - SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n }\n // Если курсор близко к левой границе\n else if (mouseX < containerLeft + SCROLL_THRESHOLD) {\n const scrollValue = (mouseX - (containerLeft + SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n }\n }, 150);\n\n const handlePreviewPosition = useCallback(\n (preview: Element, containerWidth: number) => {\n const { right, left, x } = preview.getBoundingClientRect();\n\n if (view === 'mobile') {\n scroll(x - containerWidth / 2 + MIN_SCROLL_STEP); // Передвигаем в центр активное превью\n }\n\n if (right > containerWidth) {\n const scrollValue = right - containerWidth + MIN_SCROLL_STEP;\n\n scroll(scrollValue);\n } else if (left < 0) {\n const scrollValue = left - MIN_SCROLL_STEP;\n\n scroll(scrollValue);\n }\n },\n [scroll, view],\n );\n\n useEffect(() => {\n if (containerRef.current) {\n const { width: containerWidth } = containerRef.current.getBoundingClientRect();\n\n const activePreview = containerRef.current.children[currentSlideIndex];\n\n if (activePreview) {\n handlePreviewPosition(activePreview, containerWidth);\n }\n }\n }, [currentSlideIndex, handlePreviewPosition, scroll]);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(styles.component, { [styles.mobile]: view === 'mobile' })}\n ref={containerRef}\n data-test-id={TestIds.NAVIGATION_BAR}\n onMouseDown={handlePreviewMouseDown}\n onMouseUp={handlePreviewMouseUp}\n onMouseMove={handleMouseNavigationMove}\n >\n {images.map((image, index) => {\n const active = index === currentSlideIndex;\n\n return (\n <ImagePreview\n key={getImageKey(image, index)}\n image={image}\n active={active}\n index={index}\n onSelect={handlePreviewSelect}\n className={cn(styles.preview, { [styles.mobile]: view === 'mobile' })}\n />\n );\n })}\n </div>\n );\n};\n"],"names":["useRef","useState","useContext","GalleryContext","useCallback","throttle","useEffect","React","cn","styles","TestIds","ImagePreview","getImageKey"],"mappings":"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"}
1
+ {"version":3,"file":"Component.js","sources":["../../../src/components/navigation-bar/Component.tsx"],"sourcesContent":["import React, { type FC, useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport cn from 'classnames';\nimport throttle from 'lodash/throttle';\n\nimport { GalleryContext } from '../../context';\nimport { getImageKey, TestIds } from '../../utils';\nimport { ImagePreview } from '../image-preview';\n\nimport styles from './index.module.css';\n\nconst MIN_SCROLL_STEP = 24;\nconst SCROLL_SPEED = 2; // Коэффициент скорости прокрутки (можно настроить)\nconst SCROLL_THRESHOLD = 150; // Расстояние от границы, при котором начинается прокрутка\n\nexport const NavigationBar: FC = () => {\n const containerRef = useRef<HTMLDivElement>(null);\n\n const [isNavMouseDowned, setIsNavMouseDowned] = useState<boolean>(false);\n\n const { images, currentSlideIndex, setCurrentSlideIndex, getSwiper, setPlayingVideo, view } =\n useContext(GalleryContext);\n\n const swiper = getSwiper();\n\n const handlePreviewSelect = (index: number) => {\n setCurrentSlideIndex?.(index);\n\n if (swiper) {\n setPlayingVideo(true);\n swiper.slideTo(index);\n }\n };\n\n const scroll = useCallback((scrollValue: number) => {\n if (containerRef.current) {\n containerRef.current.scroll({\n top: 0,\n left: containerRef.current.scrollLeft + scrollValue,\n behavior: 'smooth',\n });\n }\n }, []);\n\n const handlePreviewMouseDown = () => {\n setIsNavMouseDowned(true);\n };\n\n const handlePreviewMouseUp = () => {\n setIsNavMouseDowned(false);\n if (containerRef.current) {\n containerRef.current.style.scrollBehavior = 'auto'; // Отключаем плавность для резкой остановки\n }\n };\n\n const handleMouseNavigationMove = throttle((e: React.MouseEvent<HTMLDivElement>) => {\n if (!containerRef.current || !isNavMouseDowned) return;\n\n const container = containerRef.current;\n const { width: containerWidth, left: containerLeft } = container.getBoundingClientRect();\n const mouseX = e.clientX;\n\n // Если курсор близко к правой границе\n if (mouseX > containerWidth + containerLeft - SCROLL_THRESHOLD) {\n const scrollValue =\n (mouseX - (containerWidth + containerLeft - SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n }\n // Если курсор близко к левой границе\n else if (mouseX < containerLeft + SCROLL_THRESHOLD) {\n const scrollValue = (mouseX - (containerLeft + SCROLL_THRESHOLD)) * SCROLL_SPEED;\n\n container.scrollBy({ left: scrollValue, behavior: 'smooth' });\n }\n }, 150);\n\n const handlePreviewPosition = useCallback(\n (preview: Element, containerWidth: number) => {\n const { right, left, x } = preview.getBoundingClientRect();\n\n if (view === 'mobile') {\n scroll(x - containerWidth / 2 + MIN_SCROLL_STEP); // Передвигаем в центр активное превью\n }\n\n if (right > containerWidth) {\n const scrollValue = right - containerWidth + MIN_SCROLL_STEP;\n\n scroll(scrollValue);\n } else if (left < 0) {\n const scrollValue = left - MIN_SCROLL_STEP;\n\n scroll(scrollValue);\n }\n },\n [scroll, view],\n );\n\n useEffect(() => {\n if (containerRef.current) {\n const { width: containerWidth } = containerRef.current.getBoundingClientRect();\n\n const activePreview = containerRef.current.children[currentSlideIndex];\n\n if (activePreview) {\n handlePreviewPosition(activePreview, containerWidth);\n }\n }\n }, [currentSlideIndex, handlePreviewPosition, scroll]);\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n className={cn(styles.component, { [styles.mobile]: view === 'mobile' })}\n ref={containerRef}\n data-test-id={TestIds.NAVIGATION_BAR}\n onMouseDown={handlePreviewMouseDown}\n onMouseUp={handlePreviewMouseUp}\n onMouseMove={handleMouseNavigationMove}\n >\n {images.map((image, index) => {\n const active = index === currentSlideIndex;\n\n return (\n <ImagePreview\n key={getImageKey(image, index)}\n image={image}\n active={active}\n index={index}\n onSelect={handlePreviewSelect}\n className={cn(styles.preview, { [styles.mobile]: view === 'mobile' })}\n />\n );\n })}\n </div>\n );\n};\n"],"names":["useRef","useState","useContext","GalleryContext","useCallback","throttle","useEffect","React","cn","styles","TestIds","ImagePreview","getImageKey"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":["../../../src/components/subtitles/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { useCustomSubtitles } from '../../hooks';\n\nimport styles from './index.module.css';\n\nexport const Subtitles = () => {\n const { view } = useContext(GalleryContext);\n\n const { showSub, currentSub } = useCustomSubtitles();\n\n if (showSub) {\n return (\n <Typography.Text\n className={cn(styles.subtitles, {\n [styles.hideSubtitles]: !showSub,\n [styles.mobile]: view === 'mobile',\n })}\n color='static-primary-light'\n >\n {currentSub}\n </Typography.Text>\n );\n }\n\n return null;\n};\n"],"names":["useContext","GalleryContext","useCustomSubtitles","React","Typography","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAUa,IAAA,SAAS,GAAG,YAAA;;AACb,IAAA,IAAA,IAAI,GAAKA,gBAAU,CAACC,sBAAc,CAAC,KAA/B;IAEN,IAAA,EAAA,GAA0BC,qCAAkB,EAAE,EAA5C,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAyB;AAEpD,IAAA,IAAI,OAAO,EAAE;AACT,QAAA,QACIC,sBAAA,CAAA,aAAA,CAACC,eAAU,CAAC,IAAI,EAAA,EACZ,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAACA,uBAAM,CAAC,aAAa,CAAA,GAAG,CAAC,OAAO;AAChC,gBAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ;AACpC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAC,sBAAsB,IAE3B,UAAU,CACG;AAEzB;AAED,IAAA,OAAO,IAAI;AACf;;;;"}
1
+ {"version":3,"file":"index.js","sources":["../../../src/components/subtitles/index.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport cn from 'classnames';\n\nimport { Typography } from '@alfalab/core-components-typography';\n\nimport { GalleryContext } from '../../context';\nimport { useCustomSubtitles } from '../../hooks';\n\nimport styles from './index.module.css';\n\nexport const Subtitles = () => {\n const { view } = useContext(GalleryContext);\n\n const { showSub, currentSub } = useCustomSubtitles();\n\n if (showSub) {\n return (\n <Typography.Text\n className={cn(styles.subtitles, {\n [styles.hideSubtitles]: !showSub,\n [styles.mobile]: view === 'mobile',\n })}\n color='static-primary-light'\n >\n {currentSub}\n </Typography.Text>\n );\n }\n\n return null;\n};\n"],"names":["useContext","GalleryContext","useCustomSubtitles","React","Typography","cn","styles"],"mappings":";;;;;;;;;;;;;;;;;AAUa,IAAA,SAAS,GAAG,YAAA;;AACb,IAAA,IAAA,IAAI,GAAKA,gBAAU,CAACC,sBAAc,CAAC,KAA/B;IAEN,IAAA,EAAA,GAA0BC,qCAAkB,EAAE,EAA5C,OAAO,GAAA,EAAA,CAAA,OAAA,EAAE,UAAU,GAAA,EAAA,CAAA,UAAyB;IAEpD,IAAI,OAAO,EAAE;AACT,QAAA,QACIC,sBAAA,CAAA,aAAA,CAACC,eAAU,CAAC,IAAI,EAAA,EACZ,SAAS,EAAEC,mBAAE,CAACC,uBAAM,CAAC,SAAS,GAAA,EAAA,GAAA,EAAA;AAC1B,gBAAA,EAAA,CAACA,uBAAM,CAAC,aAAa,CAAA,GAAG,CAAC,OAAO;AAChC,gBAAA,EAAA,CAACA,uBAAM,CAAC,MAAM,CAAG,GAAA,IAAI,KAAK,QAAQ;AACpC,gBAAA,EAAA,EAAA,EACF,KAAK,EAAC,sBAAsB,IAE3B,UAAU,CACG;;AAI1B,IAAA,OAAO,IAAI;AACf;;;;"}