@hh.ru/magritte-ui-media-viewer 1.2.2 → 1.2.4

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 (47) hide show
  1. package/index.css +79 -79
  2. package/index.js +1 -1
  3. package/index.mock.js.map +1 -1
  4. package/internal/Counter.js +1 -1
  5. package/internal/Counter.js.map +1 -1
  6. package/internal/GalleryItemBody.js +1 -1
  7. package/internal/GalleryItemBody.js.map +1 -1
  8. package/internal/ImagesLoader.js.map +1 -1
  9. package/internal/PreviewItem.js +1 -1
  10. package/internal/PreviewItem.js.map +1 -1
  11. package/internal/PreviewItemBody.js +1 -1
  12. package/internal/PreviewItemBody.js.map +1 -1
  13. package/internal/PreviewZoomControl.js +1 -1
  14. package/internal/PreviewZoomControl.js.map +1 -1
  15. package/internal/animations.js.map +1 -1
  16. package/internal/context.js.map +1 -1
  17. package/internal/hooks/useAutoHideTools.js.map +1 -1
  18. package/internal/hooks/useDoubleTapScale.js.map +1 -1
  19. package/internal/hooks/useGalleryItemController.js.map +1 -1
  20. package/internal/hooks/usePan.js.map +1 -1
  21. package/internal/hooks/usePinchToZoom.js.map +1 -1
  22. package/internal/hooks/useSwipe.js.map +1 -1
  23. package/internal/hooks/useSwipeToClose.js.map +1 -1
  24. package/internal/hooks/useTapToToggleTools.js.map +1 -1
  25. package/internal/hooks/useVirtualization.js.map +1 -1
  26. package/internal/hooks/useWheelToZoom.js.map +1 -1
  27. package/internal/utils.js.map +1 -1
  28. package/media-viewer-CQriyIUV.js +5 -0
  29. package/media-viewer-CQriyIUV.js.map +1 -0
  30. package/package.json +15 -15
  31. package/public/Footer.js +1 -1
  32. package/public/Footer.js.map +1 -1
  33. package/public/Gallery.js +1 -1
  34. package/public/Gallery.js.map +1 -1
  35. package/public/GalleryItem.js +1 -1
  36. package/public/GalleryItem.js.map +1 -1
  37. package/public/Header.js +1 -1
  38. package/public/Header.js.map +1 -1
  39. package/public/MediaViewer.js +1 -1
  40. package/public/MediaViewer.js.map +1 -1
  41. package/public/Preview.js +1 -1
  42. package/public/Preview.js.map +1 -1
  43. package/public/Toolbar.js +1 -1
  44. package/public/Toolbar.js.map +1 -1
  45. package/public/Tools.js.map +1 -1
  46. package/media-viewer-CYTGXlUE.js +0 -5
  47. package/media-viewer-CYTGXlUE.js.map +0 -1
package/index.css CHANGED
@@ -1,19 +1,19 @@
1
1
  :root{
2
- --magritte-color-background-overlay-viewer-v24-4-0:#000000;
3
- --magritte-color-background-overlay-toolbar-v24-4-0:#000000a3;
4
- --magritte-color-component-skeleton-background-content-v24-4-0:#8293a23d;;
5
- --magritte-gradient-component-media-viewer-background-fade-v24-4-0:#00000000 0%, #00000052 100%;
2
+ --magritte-color-background-overlay-viewer-v24-4-1:#000000;
3
+ --magritte-color-background-overlay-toolbar-v24-4-1:#000000a3;
4
+ --magritte-color-component-skeleton-background-content-v24-4-1:#8293a23d;;
5
+ --magritte-gradient-component-media-viewer-background-fade-v24-4-1:#00000000 0%, #00000052 100%;
6
6
  }
7
7
 
8
8
  :root{
9
- --magritte-semantic-animation-time-m-duration-v24-4-0:400ms;
10
- --magritte-semantic-animation-ease-base-timing-function-v24-4-0:cubic-bezier(0.4, 0.24, 0, 1);
9
+ --magritte-semantic-animation-time-m-duration-v24-4-1:400ms;
10
+ --magritte-semantic-animation-ease-base-timing-function-v24-4-1:cubic-bezier(0.4, 0.24, 0, 1);
11
11
  }
12
12
 
13
13
  .magritte-night-theme{
14
- --magritte-color-component-skeleton-background-content-v24-4-0:#5e5e5e3d;
14
+ --magritte-color-component-skeleton-background-content-v24-4-1:#5e5e5e3d;
15
15
  }
16
- .magritte-media-viewer___KnrXP_1-2-2{
16
+ .magritte-media-viewer___KnrXP_1-2-4{
17
17
  position:fixed;
18
18
  inset:0;
19
19
  display:grid;
@@ -23,23 +23,23 @@
23
23
  user-select:none;
24
24
  --media-viewer-toolbars-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress) - var(--magritte-ui-media-viewer-hide-tools-progress));
25
25
  --media-viewer-background-opacity:calc(1 - var(--magritte-ui-media-viewer-close-progress));
26
- --magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v24-4-0);
26
+ --magritte-ui-nav-bar-background-color-override:var(--magritte-color-background-overlay-toolbar-v24-4-1);
27
27
  }
28
- .magritte-media-viewer___KnrXP_1-2-2::before{
28
+ .magritte-media-viewer___KnrXP_1-2-4::before{
29
29
  content:'';
30
30
  position:absolute;
31
31
  inset:0;
32
- background:var(--magritte-color-background-overlay-viewer-v24-4-0);
32
+ background:var(--magritte-color-background-overlay-viewer-v24-4-1);
33
33
  opacity:var(--media-viewer-background-opacity);
34
34
  pointer-events:none;
35
35
  }
36
- .magritte-gallery-placeholder___rUoGL_1-2-2{
36
+ .magritte-gallery-placeholder___rUoGL_1-2-4{
37
37
  display:flex;
38
38
  align-items:stretch;
39
39
  grid-row:2;
40
40
  min-height:0;
41
41
  }
42
- .magritte-media-viewer-gallery___P0SnN_1-2-2{
42
+ .magritte-media-viewer-gallery___P0SnN_1-2-4{
43
43
  display:grid;
44
44
  flex-grow:1;
45
45
  contain:layout size;
@@ -48,16 +48,16 @@
48
48
  inset:0;
49
49
  }
50
50
  @media (min-width: 1020px){
51
- body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-2-2{
51
+ body.magritte-old-layout .magritte-media-viewer-gallery___P0SnN_1-2-4{
52
52
  position:relative;
53
53
  }
54
54
  }
55
55
  @media (min-width: 1024px){
56
- body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-2-2{
56
+ body:not(.magritte-old-layout) .magritte-media-viewer-gallery___P0SnN_1-2-4{
57
57
  position:relative;
58
58
  }
59
59
  }
60
- .magritte-gallery-item___Js0Z5_1-2-2{
60
+ .magritte-gallery-item___Js0Z5_1-2-4{
61
61
  position:relative;
62
62
  grid-area:1 / 1;
63
63
  contain:size;
@@ -66,7 +66,7 @@
66
66
  overflow-y:visible;
67
67
  opacity:calc(1 - var(--magritte-ui-media-viewer-image-close-progress, 0));
68
68
  }
69
- .magritte-gallery-item-transform-container___N8-sA_1-2-2{
69
+ .magritte-gallery-item-transform-container___N8-sA_1-2-4{
70
70
  position:absolute;
71
71
  top:50%;
72
72
  left:50%;
@@ -74,64 +74,64 @@
74
74
  will-change:transform;
75
75
  touch-action:none;
76
76
  }
77
- .magritte-preview-counter___uP2Hc_1-2-2{
77
+ .magritte-preview-counter___uP2Hc_1-2-4{
78
78
  min-width:0;
79
79
  text-align:center;
80
80
  }
81
81
  @media (min-width: 1020px){
82
- body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-2-2{
82
+ body.magritte-old-layout .magritte-preview-counter___uP2Hc_1-2-4{
83
83
  text-align:left;
84
84
  }
85
85
  }
86
86
  @media (min-width: 1024px){
87
- body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-2-2{
87
+ body:not(.magritte-old-layout) .magritte-preview-counter___uP2Hc_1-2-4{
88
88
  text-align:left;
89
89
  }
90
90
  }
91
- .magritte-preview-counter___uP2Hc_1-2-2.magritte-with-description___-w7ld_1-2-2{
91
+ .magritte-preview-counter___uP2Hc_1-2-4.magritte-with-description___-w7ld_1-2-4{
92
92
  cursor:pointer;
93
93
  }
94
- .magritte-counter-number___gUpMp_1-2-2{
94
+ .magritte-counter-number___gUpMp_1-2-4{
95
95
  display:block;
96
96
  transform:translateY(calc(18px * 0.5));
97
- transition:transform var(--magritte-semantic-animation-time-m-duration-v24-4-0) var(--magritte-semantic-animation-ease-base-timing-function-v24-4-0);
97
+ transition:transform var(--magritte-semantic-animation-time-m-duration-v24-4-1) var(--magritte-semantic-animation-ease-base-timing-function-v24-4-1);
98
98
  }
99
- .magritte-with-description___-w7ld_1-2-2 .magritte-counter-number___gUpMp_1-2-2{
99
+ .magritte-with-description___-w7ld_1-2-4 .magritte-counter-number___gUpMp_1-2-4{
100
100
  transform:translateY(0);
101
101
  }
102
- .magritte-no-description-placeholder___qc6h2_1-2-2{
102
+ .magritte-no-description-placeholder___qc6h2_1-2-4{
103
103
  display:block;
104
104
  height:18px;
105
105
  padding:0;
106
106
  }
107
- .magritte-preview-zoom-control___026jA_1-2-2{
107
+ .magritte-preview-zoom-control___026jA_1-2-4{
108
108
  display:flex;
109
109
  flex-direction:row;
110
110
  gap:2px;
111
111
  align-items:center;
112
112
  justify-self:end;
113
113
  }
114
- .magritte-preview-container___nwjNY_1-2-2{
114
+ .magritte-preview-container___nwjNY_1-2-4{
115
115
  display:grid;
116
116
  grid-template-columns:1fr auto 1fr;
117
117
  gap:16px;
118
118
  padding:4px 16px;
119
- background:var(--magritte-color-background-overlay-toolbar-v24-4-0);
119
+ background:var(--magritte-color-background-overlay-toolbar-v24-4-1);
120
120
  align-items:center;
121
121
  grid-row:3;
122
122
  z-index:10;
123
123
  }
124
124
  @media (min-width: 1020px){
125
- body.magritte-old-layout .magritte-preview-container___nwjNY_1-2-2{
125
+ body.magritte-old-layout .magritte-preview-container___nwjNY_1-2-4{
126
126
  padding:16px 24px;
127
127
  }
128
128
  }
129
129
  @media (min-width: 1024px){
130
- body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-2-2{
130
+ body:not(.magritte-old-layout) .magritte-preview-container___nwjNY_1-2-4{
131
131
  padding:16px 24px;
132
132
  }
133
133
  }
134
- .magritte-preview___0Ge4C_1-2-2{
134
+ .magritte-preview___0Ge4C_1-2-4{
135
135
  display:flex;
136
136
  flex-direction:row;
137
137
  touch-action:none;
@@ -139,18 +139,18 @@
139
139
  min-width:0;
140
140
  }
141
141
  @media (min-width: 1020px){
142
- body.magritte-old-layout .magritte-preview___0Ge4C_1-2-2{
142
+ body.magritte-old-layout .magritte-preview___0Ge4C_1-2-4{
143
143
  max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
144
144
  overflow:hidden;
145
145
  }
146
146
  }
147
147
  @media (min-width: 1024px){
148
- body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-2-2{
148
+ body:not(.magritte-old-layout) .magritte-preview___0Ge4C_1-2-4{
149
149
  max-width:calc(((40 + 8) * (var(--media-viewer-max-visible-items) - 1) + 80) * 1px);
150
150
  overflow:hidden;
151
151
  }
152
152
  }
153
- .magritte-preview-list___SAXLZ_1-2-2{
153
+ .magritte-preview-list___SAXLZ_1-2-4{
154
154
  margin-left:50%;
155
155
  contain:layout paint;
156
156
  display:flex;
@@ -160,18 +160,18 @@
160
160
  flex:0 0 auto;
161
161
  }
162
162
  @media (min-width: 1020px){
163
- body.magritte-old-layout .magritte-preview-list___SAXLZ_1-2-2{
163
+ body.magritte-old-layout .magritte-preview-list___SAXLZ_1-2-4{
164
164
  margin:0;
165
165
  gap:8px;
166
166
  }
167
167
  }
168
168
  @media (min-width: 1024px){
169
- body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-2-2{
169
+ body:not(.magritte-old-layout) .magritte-preview-list___SAXLZ_1-2-4{
170
170
  margin:0;
171
171
  gap:8px;
172
172
  }
173
173
  }
174
- .magritte-preview-item___gz5f2_1-2-2{
174
+ .magritte-preview-item___gz5f2_1-2-4{
175
175
  contain:layout paint size;
176
176
  position:relative;
177
177
  flex-shrink:0;
@@ -182,36 +182,36 @@
182
182
  display:flex;
183
183
  align-items:center;
184
184
  justify-content:center;
185
- background-color:var(--magritte-color-component-skeleton-background-content-v24-4-0);
185
+ background-color:var(--magritte-color-component-skeleton-background-content-v24-4-1);
186
186
  }
187
187
  @media (min-width: 1020px){
188
- body.magritte-old-layout .magritte-preview-item___gz5f2_1-2-2{
188
+ body.magritte-old-layout .magritte-preview-item___gz5f2_1-2-4{
189
189
  height:80px;
190
190
  border-radius:8px;
191
191
  }
192
192
  }
193
193
  @media (min-width: 1024px){
194
- body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-2-2{
194
+ body:not(.magritte-old-layout) .magritte-preview-item___gz5f2_1-2-4{
195
195
  height:80px;
196
196
  border-radius:8px;
197
197
  }
198
198
  }
199
- .magritte-preview-item-container___JDVsk_1-2-2{
199
+ .magritte-preview-item-container___JDVsk_1-2-4{
200
200
  contain:layout paint size;
201
201
  overflow:hidden;
202
202
  scale:1;
203
203
  }
204
204
  @media (min-width: 1020px){
205
- body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-2-2{
205
+ body.magritte-old-layout .magritte-preview-item-container___JDVsk_1-2-4{
206
206
  scale:1.66666667;
207
207
  }
208
208
  }
209
209
  @media (min-width: 1024px){
210
- body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-2-2{
210
+ body:not(.magritte-old-layout) .magritte-preview-item-container___JDVsk_1-2-4{
211
211
  scale:1.66666667;
212
212
  }
213
213
  }
214
- .magritte-preview-item-container___JDVsk_1-2-2 *{
214
+ .magritte-preview-item-container___JDVsk_1-2-4 *{
215
215
  touch-action:none;
216
216
  position:absolute;
217
217
  top:0;
@@ -221,8 +221,8 @@
221
221
  height:100%;
222
222
  user-select:none;
223
223
  }
224
- .magritte-media-viewer-toolbar___2C8nr_1-2-2{
225
- background:var(--magritte-color-background-overlay-toolbar-v24-4-0);
224
+ .magritte-media-viewer-toolbar___2C8nr_1-2-4{
225
+ background:var(--magritte-color-background-overlay-toolbar-v24-4-1);
226
226
  padding:0 8px;
227
227
  display:grid;
228
228
  grid-template-columns:1fr auto 1fr;
@@ -232,30 +232,30 @@
232
232
  grid-row:4;
233
233
  z-index:10;
234
234
  }
235
- .magritte-media-viewer-toolbar___2C8nr_1-2-2.magritte-no-description___NebrT_1-2-2{
235
+ .magritte-media-viewer-toolbar___2C8nr_1-2-4.magritte-no-description___NebrT_1-2-4{
236
236
  display:flex;
237
237
  justify-content:space-between;
238
238
  }
239
239
  @media (min-width: 1020px){
240
- body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-2-2{
240
+ body.magritte-old-layout .magritte-media-viewer-toolbar___2C8nr_1-2-4{
241
241
  display:none;
242
242
  }
243
243
  }
244
244
  @media (min-width: 1024px){
245
- body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-2-2{
245
+ body:not(.magritte-old-layout) .magritte-media-viewer-toolbar___2C8nr_1-2-4{
246
246
  display:none;
247
247
  }
248
248
  }
249
- .magritte-media-viewer-toolbar-left___YzkJt_1-2-2,
250
- .magritte-media-viewer-toolbar-right___kBER9_1-2-2{
249
+ .magritte-media-viewer-toolbar-left___YzkJt_1-2-4,
250
+ .magritte-media-viewer-toolbar-right___kBER9_1-2-4{
251
251
  display:flex;
252
252
  gap:4px;
253
253
  }
254
- .magritte-media-viewer-toolbar-right___kBER9_1-2-2{
254
+ .magritte-media-viewer-toolbar-right___kBER9_1-2-4{
255
255
  justify-content:end;
256
256
  }
257
- .magritte-prev-button___WMYjR_1-2-2,
258
- .magritte-next-button___f8hJT_1-2-2{
257
+ .magritte-prev-button___WMYjR_1-2-4,
258
+ .magritte-next-button___f8hJT_1-2-4{
259
259
  cursor:pointer;
260
260
  position:absolute;
261
261
  top:0;
@@ -263,40 +263,40 @@
263
263
  width:48px;
264
264
  opacity:var(--media-viewer-background-opacity);
265
265
  }
266
- .magritte-prev-button___WMYjR_1-2-2:active,
267
- .magritte-next-button___f8hJT_1-2-2:active{
268
- background:linear-gradient(90deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-0));
266
+ .magritte-prev-button___WMYjR_1-2-4:active,
267
+ .magritte-next-button___f8hJT_1-2-4:active{
268
+ background:linear-gradient(90deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-1));
269
269
  }
270
270
  @media (min-width: 1020px){
271
- body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-2,
272
- body.magritte-old-layout .magritte-next-button___f8hJT_1-2-2{
271
+ body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-4,
272
+ body.magritte-old-layout .magritte-next-button___f8hJT_1-2-4{
273
273
  width:88px;
274
274
  }
275
- body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-2:active,
276
- body.magritte-old-layout .magritte-next-button___f8hJT_1-2-2:active{
275
+ body.magritte-old-layout .magritte-prev-button___WMYjR_1-2-4:active,
276
+ body.magritte-old-layout .magritte-next-button___f8hJT_1-2-4:active{
277
277
  background:none;
278
278
  }
279
279
  }
280
280
  @media (min-width: 1024px){
281
- body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-2,
282
- body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-2{
281
+ body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-4,
282
+ body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-4{
283
283
  width:88px;
284
284
  }
285
- body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-2:active,
286
- body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-2:active{
285
+ body:not(.magritte-old-layout) .magritte-prev-button___WMYjR_1-2-4:active,
286
+ body:not(.magritte-old-layout) .magritte-next-button___f8hJT_1-2-4:active{
287
287
  background:none;
288
288
  }
289
289
  }
290
- .magritte-prev-button___WMYjR_1-2-2{
290
+ .magritte-prev-button___WMYjR_1-2-4{
291
291
  left:0;
292
292
  }
293
- .magritte-prev-button___WMYjR_1-2-2:active{
294
- background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-0));
293
+ .magritte-prev-button___WMYjR_1-2-4:active{
294
+ background:linear-gradient(270deg, var(--magritte-gradient-component-media-viewer-background-fade-v24-4-1));
295
295
  }
296
- .magritte-next-button___f8hJT_1-2-2{
296
+ .magritte-next-button___f8hJT_1-2-4{
297
297
  right:0;
298
298
  }
299
- .magritte-slide-button___sY8LB_1-2-2{
299
+ .magritte-slide-button___sY8LB_1-2-4{
300
300
  display:flex;
301
301
  background:none;
302
302
  padding:0;
@@ -306,7 +306,7 @@
306
306
  position:absolute;
307
307
  inset:0;
308
308
  }
309
- .magritte-preview-placeholder___yuhW1_1-2-2{
309
+ .magritte-preview-placeholder___yuhW1_1-2-4{
310
310
  --magritte-media-viewer-preview-width:24px;
311
311
  --magritte-media-viewer-preview-gap:2px;
312
312
  flex:0 0 auto;
@@ -315,24 +315,24 @@
315
315
  flex-grow:0;
316
316
  }
317
317
  @media (min-width: 1020px){
318
- body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-2-2{
318
+ body.magritte-old-layout .magritte-preview-placeholder___yuhW1_1-2-4{
319
319
  --magritte-media-viewer-preview-width:40px;
320
320
  --magritte-media-viewer-preview-gap:8px;
321
321
  }
322
322
  }
323
323
  @media (min-width: 1024px){
324
- body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-2-2{
324
+ body:not(.magritte-old-layout) .magritte-preview-placeholder___yuhW1_1-2-4{
325
325
  --magritte-media-viewer-preview-width:40px;
326
326
  --magritte-media-viewer-preview-gap:8px;
327
327
  }
328
328
  }
329
- .magritte-gallery-item-loader___70TDe_1-2-2{
329
+ .magritte-gallery-item-loader___70TDe_1-2-4{
330
330
  position:absolute;
331
331
  top:50%;
332
332
  left:50%;
333
333
  transform:translate(-50%, -50%);
334
334
  }
335
- .magritte-gallery-item-error-container___Z-HyZ_1-2-2{
335
+ .magritte-gallery-item-error-container___Z-HyZ_1-2-4{
336
336
  display:flex;
337
337
  flex-direction:column;
338
338
  align-items:center;
@@ -346,22 +346,22 @@
346
346
  width:100%;
347
347
  box-sizing:border-box;
348
348
  }
349
- .magritte-description-bottom-sheet-content___swnEV_1-2-2{
349
+ .magritte-description-bottom-sheet-content___swnEV_1-2-4{
350
350
  padding:8px 0;
351
351
  }
352
- .magritte-header___egZXt_1-2-2{
352
+ .magritte-header___egZXt_1-2-4{
353
353
  grid-row:1;
354
354
  z-index:2;
355
355
  opacity:var(--media-viewer-toolbars-opacity);
356
356
  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * -100%));
357
357
  }
358
- .magritte-footer___rOH-M_1-2-2{
358
+ .magritte-footer___rOH-M_1-2-4{
359
359
  grid-row:3;
360
360
  z-index:2;
361
361
  opacity:var(--media-viewer-toolbars-opacity);
362
362
  transform:translateY(calc(var(--magritte-ui-media-viewer-hide-tools-progress) * 100%));
363
363
  }
364
- .magritte-description___dYc-E_1-2-2{
364
+ .magritte-description___dYc-E_1-2-4{
365
365
  display:inline-block;
366
366
  max-width:100%;
367
367
  }
package/index.js CHANGED
@@ -17,7 +17,7 @@ import './internal/utils.js';
17
17
  import './internal/hooks/useTapToToggleTools.js';
18
18
  import './internal/hooks/useVirtualization.js';
19
19
  import './public/Footer.js';
20
- import './media-viewer-CYTGXlUE.js';
20
+ import './media-viewer-CQriyIUV.js';
21
21
  import './public/Gallery.js';
22
22
  import '@hh.ru/magritte-common-resize';
23
23
  import '@hh.ru/magritte-ui-icon/icon';
package/index.mock.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.mock.js","sources":["../src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const MediaViewer = mockComponent(\n 'MediaViewer',\n {\n Gallery: mockComponent('Gallery', undefined, {\n withChildren: true,\n }),\n GalleryItem: mockComponent('GalleryItem', undefined, {\n withChildren: true,\n }),\n Preview: mockComponent('Preview', undefined, {\n withChildren: true,\n }),\n Toolbar: mockComponent('Toolbar', undefined, {\n withChildren: true,\n }),\n Header: mockComponent('Header', undefined, {\n withChildren: true,\n }),\n Footer: mockComponent('Footer', undefined, {\n withChildren: true,\n }),\n DesktopTool: mockComponent('DesktopTool', undefined, {\n withChildren: true,\n }),\n MobileTool: mockComponent('MobileTool', undefined, {\n withChildren: true,\n }),\n RotateTool: mockComponent('RotateTool', undefined, {\n withChildren: true,\n }),\n CloseTool: mockComponent('CloseTool', undefined, {\n withChildren: true,\n }),\n FullWidthTool: mockComponent('FullWidthTool', undefined, {\n withChildren: true,\n }),\n },\n {\n withChildren: true,\n }\n);\n\nexport const useMediaViewerControls = (): {\n goToSlideIndex: (index: number) => void;\n close: VoidFunction;\n} => {\n return {\n goToSlideIndex: () => {},\n close: () => {},\n };\n};\n\nexport const useMediaViewerInfo = (): {\n currentSlideIndex: number;\n totalSlides: number;\n} => {\n return {\n currentSlideIndex: 0,\n totalSlides: 1,\n };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,WAAW,GAAG,aAAa,CACpC,aAAa,EACb;AACI,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,SAAS,EAAE,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AAC7C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,aAAa,EAAE,aAAa,CAAC,eAAe,EAAE,SAAS,EAAE;AACrD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;CACL,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EACH;AAEK,MAAM,sBAAsB,GAAG,MAGlC;IACA,OAAO;AACH,QAAA,cAAc,EAAE,MAAK,GAAG;AACxB,QAAA,KAAK,EAAE,MAAK,GAAG;KAClB,CAAC;AACN,EAAE;AAEK,MAAM,kBAAkB,GAAG,MAG9B;IACA,OAAO;AACH,QAAA,iBAAiB,EAAE,CAAC;AACpB,QAAA,WAAW,EAAE,CAAC;KACjB,CAAC;AACN;;;;"}
1
+ {"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport const MediaViewer = mockComponent(\n 'MediaViewer',\n {\n Gallery: mockComponent('Gallery', undefined, {\n withChildren: true,\n }),\n GalleryItem: mockComponent('GalleryItem', undefined, {\n withChildren: true,\n }),\n Preview: mockComponent('Preview', undefined, {\n withChildren: true,\n }),\n Toolbar: mockComponent('Toolbar', undefined, {\n withChildren: true,\n }),\n Header: mockComponent('Header', undefined, {\n withChildren: true,\n }),\n Footer: mockComponent('Footer', undefined, {\n withChildren: true,\n }),\n DesktopTool: mockComponent('DesktopTool', undefined, {\n withChildren: true,\n }),\n MobileTool: mockComponent('MobileTool', undefined, {\n withChildren: true,\n }),\n RotateTool: mockComponent('RotateTool', undefined, {\n withChildren: true,\n }),\n CloseTool: mockComponent('CloseTool', undefined, {\n withChildren: true,\n }),\n FullWidthTool: mockComponent('FullWidthTool', undefined, {\n withChildren: true,\n }),\n },\n {\n withChildren: true,\n }\n);\n\nexport const useMediaViewerControls = (): {\n goToSlideIndex: (index: number) => void;\n close: VoidFunction;\n} => {\n return {\n goToSlideIndex: () => {},\n close: () => {},\n };\n};\n\nexport const useMediaViewerInfo = (): {\n currentSlideIndex: number;\n totalSlides: number;\n} => {\n return {\n currentSlideIndex: 0,\n totalSlides: 1,\n };\n};\n"],"names":[],"mappings":";;AAEa,MAAA,WAAW,GAAG,aAAa,CACpC,aAAa,EACb;AACI,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,EAAE,SAAS,EAAE;AACzC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,MAAM,EAAE,aAAa,CAAC,QAAQ,EAAE,SAAS,EAAE;AACvC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,EAAE,SAAS,EAAE;AACjD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,EAAE,SAAS,EAAE;AAC/C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,SAAS,EAAE,aAAa,CAAC,WAAW,EAAE,SAAS,EAAE;AAC7C,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,aAAa,EAAE,aAAa,CAAC,eAAe,EAAE,SAAS,EAAE;AACrD,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;CACL,EACD;AACI,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA,EACH;AAEK,MAAM,sBAAsB,GAAG,MAGlC;IACA,OAAO;AACH,QAAA,cAAc,EAAE,MAAK,GAAG;AACxB,QAAA,KAAK,EAAE,MAAK,GAAG;KAClB,CAAC;AACN,EAAE;AAEK,MAAM,kBAAkB,GAAG,MAG9B;IACA,OAAO;AACH,QAAA,iBAAiB,EAAE,CAAC;AACpB,QAAA,WAAW,EAAE,CAAC;KACjB,CAAC;AACN;;;;"}
package/internal/Counter.js CHANGED
@@ -8,7 +8,7 @@ import { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';
8
8
  import { useMediaViewerContext } from './context.js';
9
9
  import { TooltipHover } from '@hh.ru/magritte-ui-tooltip';
10
10
  import { Text } from '@hh.ru/magritte-ui-typography';
11
- import { s as styles } from '../media-viewer-CYTGXlUE.js';
11
+ import { s as styles } from '../media-viewer-CQriyIUV.js';
12
12
  import './ImagesLoader.js';
13
13
  import './utils.js';
14
14
  import '@hh.ru/magritte-design-tokens/types';
package/internal/Counter.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Counter.js","sources":["../../src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n const globalContext = useMediaViewerContext();\n const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));\n const [showDescription, setShowDescription] = useState(false);\n const description = items[currentItemIndex]?.props.description;\n const elementRef = useRef<HTMLDivElement>(null);\n\n useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n setShowDescription(false);\n setCurrentItemIndex(Math.round(newIndex));\n });\n\n const ofTrl = useTranslation('MediaViewer', 'of');\n\n if (items.length <= 1) {\n return null;\n }\n\n return (\n <div\n className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n onClick={() => {\n setShowDescription(!!description);\n }}\n >\n <span className={styles.counterNumber} aria-atomic=\"true\" aria-live=\"polite\">\n <Text\n style=\"contrast\"\n typography=\"subtitle-1-semibold\"\n ellipsis\n >{`${currentItemIndex + 1} ${ofTrl} ${items.length}`}</Text>\n </span>\n {!!description && (\n <>\n <span ref={elementRef} className={styles.description}>\n <Text style=\"contrast-secondary\" typography=\"label-4-regular\" ellipsis>\n {description}\n </Text>\n </span>\n <TooltipHover\n placement={'top-center'}\n activatorRef={elementRef}\n size=\"small\"\n onClose={() => setShowDescription(false)}\n ignoreIntersections={false}\n >\n {description}\n </TooltipHover>\n <BottomSheet visible={showDescription} onClose={() => setShowDescription(false)}>\n <div className={styles.descriptionBottomSheetContent}>\n <Text style=\"primary\" typography=\"paragraph-2-regular\">\n {description}\n </Text>\n </div>\n </BottomSheet>\n </>\n )}\n {!description && <span className={styles.noDescriptionPlaceholder}></span>}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
1
+ {"version":3,"file":"Counter.js","sources":["src/internal/Counter.tsx"],"sourcesContent":["import { type FC, type ReactElement, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useMotionValueEvent } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { BottomSheet } from '@hh.ru/magritte-ui-bottom-sheet';\nimport type { GalleryItemProps } from '@hh.ru/magritte-ui-media-viewer/internal/GalleryItemBody';\nimport { useMediaViewerContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { TooltipHover } from '@hh.ru/magritte-ui-tooltip';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\nexport const Counter: FC<{ items: ReactElement<GalleryItemProps>[] }> = ({ items }) => {\n const globalContext = useMediaViewerContext();\n const [currentItemIndex, setCurrentItemIndex] = useState(Math.round(globalContext.currentSlideIndex.get()));\n const [showDescription, setShowDescription] = useState(false);\n const description = items[currentItemIndex]?.props.description;\n const elementRef = useRef<HTMLDivElement>(null);\n\n useMotionValueEvent(globalContext.currentSlideIndex, 'change', (newIndex) => {\n setShowDescription(false);\n setCurrentItemIndex(Math.round(newIndex));\n });\n\n const ofTrl = useTranslation('MediaViewer', 'of');\n\n if (items.length <= 1) {\n return null;\n }\n\n return (\n <div\n className={classNames(styles.previewCounter, { [styles.withDescription]: !!description })}\n onClick={() => {\n setShowDescription(!!description);\n }}\n >\n <span className={styles.counterNumber} aria-atomic=\"true\" aria-live=\"polite\">\n <Text\n style=\"contrast\"\n typography=\"subtitle-1-semibold\"\n ellipsis\n >{`${currentItemIndex + 1} ${ofTrl} ${items.length}`}</Text>\n </span>\n {!!description && (\n <>\n <span ref={elementRef} className={styles.description}>\n <Text style=\"contrast-secondary\" typography=\"label-4-regular\" ellipsis>\n {description}\n </Text>\n </span>\n <TooltipHover\n placement={'top-center'}\n activatorRef={elementRef}\n size=\"small\"\n onClose={() => setShowDescription(false)}\n ignoreIntersections={false}\n >\n {description}\n </TooltipHover>\n <BottomSheet visible={showDescription} onClose={() => setShowDescription(false)}>\n <div className={styles.descriptionBottomSheetContent}>\n <Text style=\"primary\" typography=\"paragraph-2-regular\">\n {description}\n </Text>\n </div>\n </BottomSheet>\n </>\n )}\n {!description && <span className={styles.noDescriptionPlaceholder}></span>}\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}
package/internal/GalleryItemBody.js CHANGED
@@ -14,7 +14,7 @@ import { usePinchToZoom } from './hooks/usePinchToZoom.js';
14
14
  import { useWheelToZoom } from './hooks/useWheelToZoom.js';
15
15
  import { lerp, clamp } from './utils.js';
16
16
  import { Text } from '@hh.ru/magritte-ui-typography';
17
- import { s as styles } from '../media-viewer-CYTGXlUE.js';
17
+ import { s as styles } from '../media-viewer-CQriyIUV.js';
18
18
  import './ImagesLoader.js';
19
19
  import '@use-gesture/react';
20
20
 
package/internal/GalleryItemBody.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GalleryItemBody.js","sources":["../../src/internal/GalleryItemBody.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { motion, useMotionValue, useTransform, animate, useMotionValueEvent, HTMLMotionProps } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { useMediaViewerContext, GalleryItemContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useDoubleTapScale } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useDoubleTapScale';\nimport {\n useGalleryItemController,\n isFullyInvisible,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { usePan } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePan';\nimport { usePinchToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePinchToZoom';\nimport { useWheelToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useWheelToZoom';\nimport { lerp, clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы GalleryItem — то, что передаёт пользователь */\nexport interface GalleryItemProps {\n /** Описание элемента */\n description?: string;\n /** URL изображения */\n src: string;\n /** URL превью изображения */\n previewSrc?: string;\n}\n\n/** Внутренние пропсы GalleryItem — включают index, инжектируемый Gallery */\nexport interface GalleryItemInternalProps extends GalleryItemProps {\n index: number;\n}\n\nconst SLIDE_GAP = 24;\n\nexport const GalleryItemBody: FC<GalleryItemInternalProps> = ({ index = 0, src, description }) => {\n const globalContext = useMediaViewerContext();\n const [setContentSize, controller] = useGalleryItemController(globalContext, src, index, description);\n controller.index.set(index);\n\n const bindPinchToZoom = usePinchToZoom(controller, globalContext.viewPortDimensions);\n const bindPan = usePan(controller, globalContext.viewPortDimensions);\n const bindDoubleTapScale = useDoubleTapScale(controller);\n const bindWheelToZoom = useWheelToZoom(controller, globalContext.viewPortDimensions);\n\n const [isVisible, setIsVisible] = useState(() => controller.contentSize.get() !== null);\n const [loadingFailed, setLoadingFailed] = useState(false);\n\n const loadErrTrl = useTranslation('MediaViewer', 'itemLoadErrorTitle');\n const loadErrDescTrl = useTranslation('MediaViewer', 'itemLoadErrorDescription');\n\n useMotionValueEvent(controller.contentSize, 'change', () => {\n setIsVisible(controller.contentSize.get() !== null);\n });\n\n useEffect(() => {\n const meta = globalContext.imagesLoader.getUrlMeta(src);\n if (meta) {\n if (meta.status === 'loaded' && meta.width && meta.height) {\n setContentSize({ width: meta.width, height: meta.height });\n return void 0;\n }\n if (meta.status === 'error') {\n setLoadingFailed(true);\n return void 0;\n }\n }\n\n setIsVisible(false);\n setLoadingFailed(false);\n\n return globalContext.imagesLoader.waitingForUrl(src, ({ status, width, height }) => {\n if (status === 'error') {\n setLoadingFailed(true);\n return;\n }\n\n width && height && setContentSize({ width, height });\n });\n }, [setContentSize, globalContext, src]);\n\n const translateX = useTransform(globalContext.currentSlideIndex, (value) => {\n const progress = clamp(index - value, -1, 1);\n return `calc(${lerp(0, 100, progress)}% + ${lerp(0, SLIDE_GAP, progress)}px)`;\n });\n\n const x = useTransform(controller.offsetX, (value) => `calc(-50% + ${value}px)`);\n const y = useTransform(controller.offsetY, (value) => `calc(-50% + ${value}px)`);\n const rotate = useMotionValue(0);\n useMotionValueEvent(controller.rotation, 'change', (value) => {\n const targetRotation = value * 90;\n rotate.stop();\n if (isFullyInvisible(controller, globalContext)) {\n rotate.set(targetRotation);\n return;\n }\n animate(rotate, targetRotation, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetY, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n });\n\n return (\n <GalleryItemContext.Provider value={setContentSize}>\n <motion.div\n className={styles.galleryItem}\n style={{ x: translateX }}\n {...bindPinchToZoom}\n {...(bindPan() as HTMLMotionProps<'div'>)}\n {...bindDoubleTapScale}\n {...bindWheelToZoom}\n >\n {!!loadingFailed && (\n <div className={styles.galleryItemErrorContainer}>\n <Text typography=\"title-5-semibold\" style=\"contrast\" Element=\"span\">\n {loadErrTrl}\n </Text>\n <Text typography=\"paragraph-2-regular\" style=\"contrast-secondary\" Element=\"span\">\n {loadErrDescTrl}\n </Text>\n </div>\n )}\n {!isVisible && !loadingFailed && (\n <div className={styles.galleryItemLoader}>\n <Loader size={48} initial=\"constant-secondary\" />\n </div>\n )}\n {!!isVisible && (\n <motion.div\n className={styles.galleryItemTransformContainer}\n style={{\n scale: controller.scale,\n rotate,\n x,\n y,\n }}\n draggable={false}\n >\n <img src={src} alt={description || ''} draggable={false} />\n </motion.div>\n )}\n </motion.div>\n </GalleryItemContext.Provider>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"GalleryItemBody.js","sources":["src/internal/GalleryItemBody.tsx"],"sourcesContent":["import { type FC, useEffect, useState } from 'react';\nimport { motion, useMotionValue, useTransform, animate, useMotionValueEvent, HTMLMotionProps } from 'motion/react';\n\nimport { useTranslation } from '@hh.ru/magritte-common-use-translation';\nimport { tokenSemanticAnimationTimeMDuration } from '@hh.ru/magritte-design-tokens/types';\nimport { Loader } from '@hh.ru/magritte-ui-loader';\nimport { EASE_BASE } from '@hh.ru/magritte-ui-media-viewer/internal/animations';\nimport { useMediaViewerContext, GalleryItemContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useDoubleTapScale } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useDoubleTapScale';\nimport {\n useGalleryItemController,\n isFullyInvisible,\n} from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useGalleryItemController';\nimport { usePan } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePan';\nimport { usePinchToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/usePinchToZoom';\nimport { useWheelToZoom } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useWheelToZoom';\nimport { lerp, clamp } from '@hh.ru/magritte-ui-media-viewer/internal/utils';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from '../public/media-viewer.less';\n\n/** Внешние пропсы GalleryItem — то, что передаёт пользователь */\nexport interface GalleryItemProps {\n /** Описание элемента */\n description?: string;\n /** URL изображения */\n src: string;\n /** URL превью изображения */\n previewSrc?: string;\n}\n\n/** Внутренние пропсы GalleryItem — включают index, инжектируемый Gallery */\nexport interface GalleryItemInternalProps extends GalleryItemProps {\n index: number;\n}\n\nconst SLIDE_GAP = 24;\n\nexport const GalleryItemBody: FC<GalleryItemInternalProps> = ({ index = 0, src, description }) => {\n const globalContext = useMediaViewerContext();\n const [setContentSize, controller] = useGalleryItemController(globalContext, src, index, description);\n controller.index.set(index);\n\n const bindPinchToZoom = usePinchToZoom(controller, globalContext.viewPortDimensions);\n const bindPan = usePan(controller, globalContext.viewPortDimensions);\n const bindDoubleTapScale = useDoubleTapScale(controller);\n const bindWheelToZoom = useWheelToZoom(controller, globalContext.viewPortDimensions);\n\n const [isVisible, setIsVisible] = useState(() => controller.contentSize.get() !== null);\n const [loadingFailed, setLoadingFailed] = useState(false);\n\n const loadErrTrl = useTranslation('MediaViewer', 'itemLoadErrorTitle');\n const loadErrDescTrl = useTranslation('MediaViewer', 'itemLoadErrorDescription');\n\n useMotionValueEvent(controller.contentSize, 'change', () => {\n setIsVisible(controller.contentSize.get() !== null);\n });\n\n useEffect(() => {\n const meta = globalContext.imagesLoader.getUrlMeta(src);\n if (meta) {\n if (meta.status === 'loaded' && meta.width && meta.height) {\n setContentSize({ width: meta.width, height: meta.height });\n return void 0;\n }\n if (meta.status === 'error') {\n setLoadingFailed(true);\n return void 0;\n }\n }\n\n setIsVisible(false);\n setLoadingFailed(false);\n\n return globalContext.imagesLoader.waitingForUrl(src, ({ status, width, height }) => {\n if (status === 'error') {\n setLoadingFailed(true);\n return;\n }\n\n width && height && setContentSize({ width, height });\n });\n }, [setContentSize, globalContext, src]);\n\n const translateX = useTransform(globalContext.currentSlideIndex, (value) => {\n const progress = clamp(index - value, -1, 1);\n return `calc(${lerp(0, 100, progress)}% + ${lerp(0, SLIDE_GAP, progress)}px)`;\n });\n\n const x = useTransform(controller.offsetX, (value) => `calc(-50% + ${value}px)`);\n const y = useTransform(controller.offsetY, (value) => `calc(-50% + ${value}px)`);\n const rotate = useMotionValue(0);\n useMotionValueEvent(controller.rotation, 'change', (value) => {\n const targetRotation = value * 90;\n rotate.stop();\n if (isFullyInvisible(controller, globalContext)) {\n rotate.set(targetRotation);\n return;\n }\n animate(rotate, targetRotation, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetX, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n animate(controller.offsetY, 0, { duration: tokenSemanticAnimationTimeMDuration / 1000, ease: EASE_BASE });\n });\n\n return (\n <GalleryItemContext.Provider value={setContentSize}>\n <motion.div\n className={styles.galleryItem}\n style={{ x: translateX }}\n {...bindPinchToZoom}\n {...(bindPan() as HTMLMotionProps<'div'>)}\n {...bindDoubleTapScale}\n {...bindWheelToZoom}\n >\n {!!loadingFailed && (\n <div className={styles.galleryItemErrorContainer}>\n <Text typography=\"title-5-semibold\" style=\"contrast\" Element=\"span\">\n {loadErrTrl}\n </Text>\n <Text typography=\"paragraph-2-regular\" style=\"contrast-secondary\" Element=\"span\">\n {loadErrDescTrl}\n </Text>\n </div>\n )}\n {!isVisible && !loadingFailed && (\n <div className={styles.galleryItemLoader}>\n <Loader size={48} initial=\"constant-secondary\" />\n </div>\n )}\n {!!isVisible && (\n <motion.div\n className={styles.galleryItemTransformContainer}\n style={{\n scale: controller.scale,\n rotate,\n x,\n y,\n }}\n draggable={false}\n >\n <img src={src} alt={description || ''} draggable={false} />\n </motion.div>\n )}\n </motion.div>\n </GalleryItemContext.Provider>\n );\n};\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
package/internal/ImagesLoader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ImagesLoader.js","sources":["../../src/internal/ImagesLoader.ts"],"sourcesContent":["interface GalleryItemMeta {\n type: 'image' | 'video';\n status: 'loaded' | 'loading' | 'error';\n width?: number;\n height?: number;\n url?: string;\n loadPromise: Promise<GalleryItemMeta>;\n}\n\nexport class ImagesLoader {\n private galleryItemsMeta: Map<string, GalleryItemMeta> = new Map();\n\n getUrlMeta(url: string): GalleryItemMeta | undefined {\n return this.galleryItemsMeta.get(url);\n }\n\n waitingForUrl(url: string, callback: ((meta: GalleryItemMeta) => void) | null = null): VoidFunction {\n let callbackFn: ((meta: GalleryItemMeta) => void) | null = callback;\n void this.loadImage(url).then((meta) => {\n callbackFn?.(meta);\n });\n\n return () => (callbackFn = null);\n }\n\n private loadImage(url: string): Promise<GalleryItemMeta> {\n let meta = this.galleryItemsMeta.get(url);\n if (!meta) {\n meta = {\n type: 'image',\n status: 'loading',\n loadPromise: new Promise((resolve) => {\n const img = new Image();\n img.onerror = () => {\n const meta = this.galleryItemsMeta.get(url) as GalleryItemMeta;\n meta.status = 'error';\n resolve(meta);\n };\n img.onload = () => {\n const meta = this.galleryItemsMeta.get(url) as GalleryItemMeta;\n meta.width = img.naturalWidth;\n meta.height = img.naturalHeight;\n void img\n .decode()\n .then(() => {\n meta.status = 'loaded';\n resolve(meta);\n })\n .catch(() => {\n meta.status = 'error';\n resolve(meta);\n });\n };\n img.src = url;\n }),\n };\n this.galleryItemsMeta.set(url, meta);\n }\n return meta.loadPromise;\n }\n}\n"],"names":[],"mappings":"MASa,YAAY,CAAA;AACb,IAAA,gBAAgB,GAAiC,IAAI,GAAG,EAAE,CAAC;AAEnE,IAAA,UAAU,CAAC,GAAW,EAAA;QAClB,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;KACzC;AAED,IAAA,aAAa,CAAC,GAAW,EAAE,QAAA,GAAqD,IAAI,EAAA;QAChF,IAAI,UAAU,GAA6C,QAAQ,CAAC;AACpE,QAAA,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAI;AACnC,YAAA,UAAU,GAAG,IAAI,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;QAEH,OAAO,OAAO,UAAU,GAAG,IAAI,CAAC,CAAC;KACpC;AAEO,IAAA,SAAS,CAAC,GAAW,EAAA;QACzB,IAAI,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,EAAE;AACP,YAAA,IAAI,GAAG;AACH,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,WAAW,EAAE,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AACjC,oBAAA,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;AACxB,oBAAA,GAAG,CAAC,OAAO,GAAG,MAAK;wBACf,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAoB,CAAC;AAC/D,wBAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;wBACtB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,qBAAC,CAAC;AACF,oBAAA,GAAG,CAAC,MAAM,GAAG,MAAK;wBACd,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAoB,CAAC;AAC/D,wBAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;AAC9B,wBAAA,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;AAChC,wBAAA,KAAK,GAAG;AACH,6BAAA,MAAM,EAAE;6BACR,IAAI,CAAC,MAAK;AACP,4BAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;4BACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,yBAAC,CAAC;6BACD,KAAK,CAAC,MAAK;AACR,4BAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;4BACtB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,yBAAC,CAAC,CAAC;AACX,qBAAC,CAAC;AACF,oBAAA,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;AAClB,iBAAC,CAAC;aACL,CAAC;YACF,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SACxC;QACD,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;AACJ;;;;"}
1
+ {"version":3,"file":"ImagesLoader.js","sources":["src/internal/ImagesLoader.ts"],"sourcesContent":["interface GalleryItemMeta {\n type: 'image' | 'video';\n status: 'loaded' | 'loading' | 'error';\n width?: number;\n height?: number;\n url?: string;\n loadPromise: Promise<GalleryItemMeta>;\n}\n\nexport class ImagesLoader {\n private galleryItemsMeta: Map<string, GalleryItemMeta> = new Map();\n\n getUrlMeta(url: string): GalleryItemMeta | undefined {\n return this.galleryItemsMeta.get(url);\n }\n\n waitingForUrl(url: string, callback: ((meta: GalleryItemMeta) => void) | null = null): VoidFunction {\n let callbackFn: ((meta: GalleryItemMeta) => void) | null = callback;\n void this.loadImage(url).then((meta) => {\n callbackFn?.(meta);\n });\n\n return () => (callbackFn = null);\n }\n\n private loadImage(url: string): Promise<GalleryItemMeta> {\n let meta = this.galleryItemsMeta.get(url);\n if (!meta) {\n meta = {\n type: 'image',\n status: 'loading',\n loadPromise: new Promise((resolve) => {\n const img = new Image();\n img.onerror = () => {\n const meta = this.galleryItemsMeta.get(url) as GalleryItemMeta;\n meta.status = 'error';\n resolve(meta);\n };\n img.onload = () => {\n const meta = this.galleryItemsMeta.get(url) as GalleryItemMeta;\n meta.width = img.naturalWidth;\n meta.height = img.naturalHeight;\n void img\n .decode()\n .then(() => {\n meta.status = 'loaded';\n resolve(meta);\n })\n .catch(() => {\n meta.status = 'error';\n resolve(meta);\n });\n };\n img.src = url;\n }),\n };\n this.galleryItemsMeta.set(url, meta);\n }\n return meta.loadPromise;\n }\n}\n"],"names":[],"mappings":"MASa,YAAY,CAAA;AACb,IAAA,gBAAgB,GAAiC,IAAI,GAAG,EAAE,CAAC;AAEnE,IAAA,UAAU,CAAC,GAAW,EAAA;QAClB,OAAO,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;KACzC;AAED,IAAA,aAAa,CAAC,GAAW,EAAE,QAAA,GAAqD,IAAI,EAAA;QAChF,IAAI,UAAU,GAA6C,QAAQ,CAAC;AACpE,QAAA,KAAK,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,KAAI;AACnC,YAAA,UAAU,GAAG,IAAI,CAAC,CAAC;AACvB,SAAC,CAAC,CAAC;QAEH,OAAO,OAAO,UAAU,GAAG,IAAI,CAAC,CAAC;KACpC;AAEO,IAAA,SAAS,CAAC,GAAW,EAAA;QACzB,IAAI,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;QAC1C,IAAI,CAAC,IAAI,EAAE;AACP,YAAA,IAAI,GAAG;AACH,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,MAAM,EAAE,SAAS;AACjB,gBAAA,WAAW,EAAE,IAAI,OAAO,CAAC,CAAC,OAAO,KAAI;AACjC,oBAAA,MAAM,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;AACxB,oBAAA,GAAG,CAAC,OAAO,GAAG,MAAK;wBACf,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAoB,CAAC;AAC/D,wBAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;wBACtB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,qBAAC,CAAC;AACF,oBAAA,GAAG,CAAC,MAAM,GAAG,MAAK;wBACd,MAAM,IAAI,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAoB,CAAC;AAC/D,wBAAA,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,YAAY,CAAC;AAC9B,wBAAA,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,aAAa,CAAC;AAChC,wBAAA,KAAK,GAAG;AACH,6BAAA,MAAM,EAAE;6BACR,IAAI,CAAC,MAAK;AACP,4BAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC;4BACvB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,yBAAC,CAAC;6BACD,KAAK,CAAC,MAAK;AACR,4BAAA,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;4BACtB,OAAO,CAAC,IAAI,CAAC,CAAC;AAClB,yBAAC,CAAC,CAAC;AACX,qBAAC,CAAC;AACF,oBAAA,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC;AAClB,iBAAC,CAAC;aACL,CAAC;YACF,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;SACxC;QACD,OAAO,IAAI,CAAC,WAAW,CAAC;KAC3B;AACJ;;;;"}
package/internal/PreviewItem.js CHANGED
@@ -9,7 +9,7 @@ import '@hh.ru/magritte-ui-breakpoint';
9
9
  import './utils.js';
10
10
  import '@hh.ru/magritte-design-tokens/types';
11
11
  import './animations.js';
12
- import '../media-viewer-CYTGXlUE.js';
12
+ import '../media-viewer-CQriyIUV.js';
13
13
  import './ImagesLoader.js';
14
14
 
15
15
  const PreviewItem = ({ index, ...props }) => {
package/internal/PreviewItem.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PreviewItem.js","sources":["../../src/internal/PreviewItem.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport { type MotionValue } from 'motion/react';\n\nimport { PreviewItemBody } from '@hh.ru/magritte-ui-media-viewer/internal/PreviewItemBody';\nimport { usePreviewContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useIsVisible } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useVirtualization';\n\nexport const PreviewItem: FC<{ index: number; src: string; dragFactor: MotionValue<number> }> = ({\n index,\n ...props\n}) => {\n const { visibleRange } = usePreviewContext();\n\n const isVisible = useIsVisible(index, visibleRange);\n\n if (!isVisible) {\n return null;\n }\n\n return <PreviewItemBody index={index} {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;AAOO,MAAM,WAAW,GAAwE,CAAC,EAC7F,KAAK,EACL,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE7C,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAEpD,IAAI,CAAC,SAAS,EAAE;AACZ,QAAA,OAAO,IAAI,CAAC;KACf;IAED,OAAOA,GAAA,CAAC,eAAe,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA,GAAM,KAAK,EAAA,CAAI,CAAC;AACxD;;;;"}
1
+ {"version":3,"file":"PreviewItem.js","sources":["src/internal/PreviewItem.tsx"],"sourcesContent":["import { type FC } from 'react';\nimport { type MotionValue } from 'motion/react';\n\nimport { PreviewItemBody } from '@hh.ru/magritte-ui-media-viewer/internal/PreviewItemBody';\nimport { usePreviewContext } from '@hh.ru/magritte-ui-media-viewer/internal/context';\nimport { useIsVisible } from '@hh.ru/magritte-ui-media-viewer/internal/hooks/useVirtualization';\n\nexport const PreviewItem: FC<{ index: number; src: string; dragFactor: MotionValue<number> }> = ({\n index,\n ...props\n}) => {\n const { visibleRange } = usePreviewContext();\n\n const isVisible = useIsVisible(index, visibleRange);\n\n if (!isVisible) {\n return null;\n }\n\n return <PreviewItemBody index={index} {...props} />;\n};\n"],"names":["_jsx"],"mappings":";;;;;;;;;;;;;AAOO,MAAM,WAAW,GAAwE,CAAC,EAC7F,KAAK,EACL,GAAG,KAAK,EACX,KAAI;AACD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,iBAAiB,EAAE,CAAC;IAE7C,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,EAAE,YAAY,CAAC,CAAC;IAEpD,IAAI,CAAC,SAAS,EAAE;AACZ,QAAA,OAAO,IAAI,CAAC;KACf;IAED,OAAOA,GAAA,CAAC,eAAe,EAAC,EAAA,KAAK,EAAE,KAAK,EAAA,GAAM,KAAK,EAAA,CAAI,CAAC;AACxD;;;;"}
package/internal/PreviewItemBody.js CHANGED
@@ -5,7 +5,7 @@ import { useMotionValue, useTransform, useMotionValueEvent, animate, motion } fr
5
5
  import { useBreakpoint } from '@hh.ru/magritte-ui-breakpoint';
6
6
  import { useMediaViewerContext, usePreviewContext } from './context.js';
7
7
  import { useDetectDiscreteChange, clamp } from './utils.js';
8
- import { s as styles } from '../media-viewer-CYTGXlUE.js';
8
+ import { s as styles } from '../media-viewer-CQriyIUV.js';
9
9
  import './ImagesLoader.js';
10
10
  import '@hh.ru/magritte-design-tokens/types';
11
11
  import './animations.js';