1import { p as prop, i as if_block, k as each, b as set_class, a as set_attribute, u as index, d as bind_this, f as set_style } from './i18n-CMo5lpzy.js'; 2import { av as FileData, R as push, u as state, v as proxy, y as user_effect, w as get, x as set, M as tick, aa as onMount, S as first_child, a as append, T as pop, a5 as user_derived, X as sibling, W as from_html, V as child, Y as reset, t as template_effect, Z as event, a0 as set_text } from './index-BvBk1Iap.js'; 3import { b as bind_window_size } from './window-BGXjFJtG.js'; 4import { s as stopPropagation } from './event-modifiers-DanhKw3_.js'; 5import { I as IconButton, U as Upload$1, W as Webcam, V as Video$1, a as ImagePaste } from './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js'; 6import { B as BlockLabel } from './BlockLabel-oGSqUii_.js'; 7import { E as Empty } from './Empty-CHa-gxv7.js'; 8import { S as ShareButton } from './ShareButton-Dz0y1C1K.js'; 9import { C as Clear } from './Clear-Dgs5UhTO.js'; 10import { D as Download } from './Download-pFhUaTl4.js'; 11import { I as Image } from './Image-C3F5KG1F.js'; 12import { P as Play } from './Play-CWcFSzc7.js'; 13import { I as IconButtonWrapper } from './IconButtonWrapper-Ba0GidgU.js'; 14import { F as FullscreenButton } from './FullscreenButton-CNmhk6nd.js'; 15import { U as Upload } from './Upload-CPeZiqam.js'; 16import { M as ModifyUpload } from './ModifyUpload-B5K-5Hqx.js'; 17import { I as Image$1 } from './Image-CDw5qb5O.js'; 18/* empty css */ 19import { V as Video } from './Video-B3xDM6GN.js'; 20import { d as dequal } from './index-DnoGeqVF.js'; 21import { u as uploadToHuggingFace } from './utils.svelte-CYLB_jIA.js'; 22 23async function format_gallery_for_sharing(value) { 24 if (!value) return ""; 25 let urls = await Promise.all( 26 value.map(async ([image, _]) => { 27 if (image === null || !image.url) return ""; 28 return await uploadToHuggingFace(image.url); 29 }) 30 ); 31 return `<div style="display: flex; flex-wrap: wrap; gap: 16px">${urls.map((url) => `<img src="${url}" style="height: 400px" />`).join("")}</div>`; 32} 33async function handle_save(img_blob, upload, filename = "uploaded_file") { 34 const ext = img_blob.type.split("/")[1] || "png"; 35 const f_ = new File([img_blob], `${filename}.${ext}`); 36 const files = [ 37 new FileData({ 38 path: f_.name, 39 orig_name: f_.name, 40 blob: f_, 41 size: f_.size, 42 mime_type: f_.type, 43 is_stream: false 44 }) 45 ]; 46 return await upload(...files); 47} 48 49var root_10 = from_html(`<div class="icon-button"><!></div>`); 50var root_7 = from_html(`<!> <!> <!> <!>`, 1); 51var root_14 = from_html(`<caption class="caption svelte-7anmrz"> </caption>`); 52var root_17 = from_html(`<!> <!>`, 1); 53var root_15 = from_html(`<button><!></button>`); 54var root_6 = from_html(`<span><!> <button class="media-button svelte-7anmrz" aria-label="detailed view of selected image"><!></button> <!> <div class="thumbnails scroll-hide svelte-7anmrz" data-testid="container_el"></div></span>`); 55var root_19 = from_html(`<!> <!> <!> <!>`, 1); 56var root_27 = from_html(`<!> <!>`, 1); 57var root_28 = from_html(`<div class="caption-label svelte-7anmrz"> </div>`); 58var root_29 = from_html(`<button class="delete-button svelte-7anmrz" aria-label="Delete image"><!></button>`); 59var root_25 = from_html(`<div class="gallery-item svelte-7anmrz"><button><!> <!></button> <!></div>`); 60var root_5 = from_html(`<div class="gallery-container svelte-7anmrz"><!> <div><!> <div></div></div></div>`); 61var root_1 = from_html(`<!> <!>`, 1); 62 63function Gallery($$anchor, $$props) { 64 push($$props, true); 65 66 let show_label = prop($$props, 'show_label', 3, true), 67 value = prop($$props, 'value', 15), 68 columns = prop($$props, 'columns', 19, () => [2]), 69 rows = prop($$props, 'rows', 3, undefined), 70 height = prop($$props, 'height', 3, "auto"), 71 allow_preview = prop($$props, 'allow_preview', 3, true), 72 object_fit = prop($$props, 'object_fit', 3, "cover"), 73 show_share_button = prop($$props, 'show_share_button', 3, false), 74 show_download_button = prop($$props, 'show_download_button', 3, false), 75 selected_index = prop($$props, 'selected_index', 15), 76 show_fullscreen_button = prop($$props, 'show_fullscreen_button', 3, true), 77 fullscreen = prop($$props, 'fullscreen', 3, false), 78 root = prop($$props, 'root', 3, ""), 79 file_types = prop($$props, 'file_types', 19, () => ["image", "video"]), 80 max_file_size = prop($$props, 'max_file_size', 3, null), 81 fit_columns = prop($$props, 'fit_columns', 3, true), 82 buttons = prop($$props, 'buttons', 3, null), 83 oncustom_button_click = prop($$props, 'oncustom_button_click', 3, null), 84 onpreview_open = prop($$props, 'onpreview_open', 3, () => {}), 85 onchange = prop($$props, 'onchange', 3, () => {}), 86 onclear = prop($$props, 'onclear', 3, () => {}), 87 onselect = prop($$props, 'onselect', 3, (data) => {}), 88 onshare = prop($$props, 'onshare', 3, (data) => {}), 89 onerror = prop($$props, 'onerror', 3, (error) => {}), 90 onpreview_close = prop($$props, 'onpreview_close', 3, () => {}), 91 onfullscreen = prop($$props, 'onfullscreen', 3, (data) => {}), 92 ondelete = prop($$props, 'ondelete', 3, () => {}), 93 onupload = prop($$props, 'onupload', 3, () => {}), 94 onsource_change = prop($$props, 'onsource_change', 3, () => {}); 95 96 let upload_promise = null; 97 let mode = "normal"; 98 let display_icon_button_wrapper_top_corner = false;
99 let is_full_screen = false; 100 let image_container; 101 let was_reset = state(false); 102 103 let resolved_value = user_derived(() => value() == null 104 ? null 105 : value().map((data) => { 106 if ("video" in data) { 107 return { video: data.video, caption: data.caption }; 108 } else if ("image" in data) { 109 return { image: data.image, caption: data.caption }; 110 } 111 112 return {}; 113 })); 114 115 function resolve_effective_columns(resolved_value, columns, fit_columns) { 116 if (resolved_value && columns && fit_columns) { 117 const item_count = resolved_value.length; 118 119 if (Array.isArray(columns)) { 120 return columns.map((col) => Math.min(col, item_count)); 121 } else { 122 return Math.min(columns, item_count); 123 } 124 } else { 125 return columns; 126 } 127 } 128 129 let effective_columns = user_derived(() => resolve_effective_columns(get(resolved_value), columns(), fit_columns())); 130 let prev_value = state(proxy(value())); 131 132 if (selected_index() == null && $$props.preview && value()?.length) { 133 selected_index(0); 134 } 135 136 let old_selected_index = state(proxy(selected_index())); 137 138 user_effect(() => { 139 if (!dequal(get(prev_value), value())) { 140 // When value is falsy (clear button or first load), 141 // preview determines the selected image 142 if (get(was_reset)) { 143 selected_index($$props.preview && value()?.length ? 0 : null); 144 set(was_reset, false); 145 146 // Otherwise we keep the selected_index the same if the 147 // gallery has at least as many elements as it did before 148 } else { 149 if (selected_index() !== null && value() !== null) { 150 selected_index(Math.max(0, Math.min(selected_index(), value().length - 1))); 151 } else { 152 selected_index(null); 153 } 154 } 155 156 onchange()(); 157 set(prev_value, value(), true); 158 } 159 }); 160 161 let previous = user_derived(() => ((selected_index() ?? 0) + (get(resolved_value)?.length ?? 0) - 1) % (get(resolved_value)?.length ?? 0)); 162 let next = user_derived(() => ((selected_index() ?? 0) + 1) % (get(resolved_value)?.length ?? 0)); 163 164 function handle_preview_click(event) { 165 const element = event.target; 166 const x = event.offsetX; 167 const width = element.offsetWidth; 168 const centerX = width / 2; 169 170 if (x < centerX) { 171 selected_index(get(previous)); 172 } else { 173 selected_index(get(next)); 174 } 175 } 176 177 function on_keydown(e) { 178 switch (e.code) { 179 case "Escape": 180 e.preventDefault(); 181 selected_index(null); 182 onpreview_close()(); 183 break; 184 185 case "ArrowLeft": 186 e.preventDefault(); 187 selected_index(get(previous)); 188 break; 189 190 case "ArrowRight": 191 e.preventDefault(); 192 selected_index(get(next)); 193 break; 194 } 195 } 196 197 user_effect(() => { 198 // Only trigger the effect if the selected_index has actually changed 199 if (selected_index() !== get(old_selected_index)) { 200 set(old_selected_index, selected_index(), true); 201 202 // Ensure we have a valid selection and data to work with 203 if (selected_index() !== null && get(resolved_value) !== null) { 204 // Notify the parent component or listener about the updated selection 205 onselect()({ 206 index: selected_index(), 207 value: get(resolved_value)?.[selected_index()] 208 }); 209 } 210 } 211 }); 212 213 user_effect(() => { 214 if (allow_preview() && get(container_element)) { 215 scroll_to_img(selected_index()); 216 } 217 }); 218 219 let el = []; 220 let container_element = state(void 0); 221 222 async function scroll_to_img(index) { 223 if (typeof index !== "number") return; 224 225 await tick(); 226 227 if (el[index] === undefined) return; 228 if (!get(container_element)) return; 229 230 el[index]?.focus(); 231
232 const { left: container_left, width: container_width } = get(container_element).getBoundingClientRect(); 233 const { left, width } = el[index].getBoundingClientRect(); 234 const relative_left = left - container_left; 235 const pos = relative_left + width / 2 - container_width / 2 + get(container_element).scrollLeft; 236 237 if (get(container_element) && typeof get(container_element).scrollTo === "function") { 238 get(container_element).scrollTo({ left: pos < 0 ? 0 : pos, behavior: "smooth" }); 239 } 240 } 241 242 // Unlike `gr.Image()`, images specified via remote URLs are not cached in the server 243 // and their remote URLs are directly passed to the client as `value[].image.url`. 244 // The `download` attribute of the <a> tag doesn't work for remote URLs (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download), 245 // so we need to download the image via JS as below. 246 async function download(file_url, name) { 247 let response; 248 249 try { 250 response = await $$props._fetch(file_url); 251 } catch(error) { 252 if (error instanceof TypeError) { 253 // If CORS is not allowed (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#checking_that_the_fetch_was_successful), 254 // open the link in a new tab instead, mimicing the behavior of the `download` attribute for remote URLs, 255 // which is not ideal, but a reasonable fallback. 256 window.open(file_url, "_blank", "noreferrer"); 257 258 return; 259 } 260 261 throw error; 262 } 263 264 const blob = await response.blob(); 265 const url = URL.createObjectURL(blob); 266 const link = document.createElement("a"); 267 268 link.href = url;
269 link.download = name; 270 link.click(); 271 URL.revokeObjectURL(url); 272 } 273 274 let selected_media = user_derived(() => selected_index() != null && get(resolved_value) != null ? get(resolved_value)[selected_index()] : null); 275 let thumbnails_overflow = false; 276 277 function check_thumbnails_overflow() { 278 if (get(container_element)) { 279 thumbnails_overflow = get(container_element).scrollWidth > get(container_element).clientWidth; 280 } 281 } 282 283 onMount(() => { 284 check_thumbnails_overflow(); 285 286 document.addEventListener("fullscreenchange", () => { 287 is_full_screen = !!document.fullscreenElement; 288 }); 289 290 window.addEventListener("resize", check_thumbnails_overflow); 291 292 return () => window.removeEventListener("resize", check_thumbnails_overflow); 293 }); 294 295 user_effect(() => { 296 get(resolved_value); 297 check_thumbnails_overflow(); 298 299 if (get(container_element)) { 300 check_thumbnails_overflow(); 301 } 302 }); 303 304 function handle_item_delete(index) { 305 if (!value() || !get(resolved_value)) return; 306 307 const deleted_item = get(resolved_value)[index]; 308 let deleted_file_data; 309 310 if ("image" in deleted_item) { 311 deleted_file_data = { file: deleted_item.image, index }; 312 } else if ("video" in deleted_item) { 313 deleted_file_data = { file: deleted_item.video, index }; 314 } 315 316 if (deleted_file_data) { 317 ondelete()(deleted_file_data); 318 } 319 } 320 321 let uploading = false; 322 var fragment = root_1(); 323 var node = first_child(fragment); 324 325 { 326 var consequent = ($$anchor) => { 327 { 328 let $0 = user_derived(() => $$props.label || "Gallery"); 329 330 BlockLabel($$anchor, { 331 get show_label() { 332 return show_label(); 333 }, 334 335 get Icon() { 336 return Image; 337 }, 338 339 get label() { 340 return get($0); 341 } 342 }); 343 } 344 }; 345 346 if_block(node, ($$render) => { 347 if (show_label()) $$render(consequent); 348 }); 349 } 350 351 var node_1 = sibling(node, 2); 352 353 { 354 var consequent_1 = ($$anchor) => { 355 Empty($$anchor, { 356 unpadded_box: true, 357 size: 'large', 358 children: ($$anchor, $$slotProps) => { 359 Image($$anchor); 360 }, 361 $$slots: { default: true } 362 }); 363 }; 364 365 var alternate_3 = ($$anchor) => { 366 var div = root_5(); 367 var node_2 = child(div); 368 369 { 370 var consequent_9 = ($$anchor) => { 371 var span = root_6(); 372 373 set_class(span, 1, 'preview svelte-7anmrz', null, {}, { minimal: mode === "minimal" }); 374 375 var node_3 = child(span); 376 377 IconButtonWrapper(node_3, { 378 display_top_corner: display_icon_button_wrapper_top_corner, 379 get buttons() { 380 return buttons(); 381 }, 382 383 get on_custom_button_click() { 384 return oncustom_button_click(); 385 }, 386 387 children: ($$anchor, $$slotProps) => { 388 var fragment_4 = root_7(); 389 var node_4 = first_child(fragment_4); 390 391 { 392 var consequent_2 = ($$anchor) => { 393 { 394 let $0 = user_derived(() => $$props.i18n("common.download")); 395 396 IconButton($$anchor, { 397 get Icon() { 398 return Download; 399 }, 400 401 get label() { 402 return get($0); 403 }, 404 405 onclick: () => { 406 const image = "image" in get(selected_media) 407 ? get(selected_media)?.image 408 : get(selected_media)?.video; 409 410 if (image == null) { 411 return; 412 } 413 414 const { url, orig_name } = image; 415 416 if (url) { 417 download(url, orig_name ?? "image"); 418 } 419 } 420 }); 421 } 422 }; 423 424 if_block(node_4, ($$render) => { 425 if (show_download_button()) $$render(consequent_2); 426 }); 427 } 428 429 var node_5 = sibling(node_4, 2); 430 431 { 432 var consequent_3 = ($$anchor) => { 433 FullscreenButton($$anchor, { 434 get fullscreen() { 435 return fullscreen(); 436 }, 437 onclick: (is_fullscreen) => onfullscreen()({ detail: is_fullscreen }) 438 }); 439 }; 440 441 if_block(node_5, ($$render) => { 442 if (show_fullscreen_button()) $$render(consequent_3); 443 }); 444 } 445 446 var node_6 = sibling(node_5, 2); 447 448 { 449 var consequent_4 = ($$anchor) => { 450 var div_1 = root_10(); 451 var node_7 = child(div_1); 452 453 ShareButton(node_7, {
454 get i18n() { 455 return $$props.i18n; 456 }, 457 458 get value() { 459 return get(resolved_value); 460 }, 461 462 get formatter() { 463 return format_gallery_for_sharing; 464 }, 465 466 $$events: { 467 share: (detail) => { 468 onshare()(detail); 469 }, 470 471 error: (detail) => { 472 onerror()(detail); 473 } 474 } 475 }); 476 477 reset(div_1); 478 append($$anchor, div_1); 479 }; 480 481 if_block(node_6, ($$render) => { 482 if (show_share_button()) $$render(consequent_4); 483 }); 484 } 485 486 var node_8 = sibling(node_6, 2); 487 488 { 489 var consequent_5 = ($$anchor) => { 490 IconButton($$anchor, { 491 get Icon() { 492 return Clear; 493 }, 494 label: 'Close', 495 onclick: () => { 496 selected_index(null); 497 onpreview_close()(); 498 } 499 }); 500 }; 501 502 if_block(node_8, ($$render) => { 503 if (!is_full_screen) $$render(consequent_5); 504 }); 505 } 506 507 append($$anchor, fragment_4); 508 }, 509 $$slots: { default: true } 510 }); 511 512 var button = sibling(node_3, 2); 513 var node_9 = child(button); 514 515 { 516 var consequent_6 = ($$anchor) => { 517 { 518 let $0 = user_derived(() => ({ 519 alt: get(selected_media).caption || "", 520 title: get(selected_media).caption || null, 521 class: get(selected_media).caption && "with-caption", 522 loading: "lazy" 523 })); 524 525 Image$1($$anchor, { 526 get restProps() { 527 return get($0); 528 }, 529 530 get src() { 531 return get(selected_media).image.url; 532 }, 533 data_testid: 'detailed-image' 534 }); 535 } 536 }; 537 538 var alternate = ($$anchor) => { 539 { 540 let $0 = user_derived(() => get(selected_media).caption || ""); 541 542 Video($$anchor, { 543 get src() { 544 return get(selected_media).video.url; 545 }, 546 'data-testid': "detailed-video", 547 get alt() { 548 return get($0); 549 }, 550 loading: 'lazy', 551 loop: false, 552 is_stream: false, 553 muted: false, 554 controls: true 555 }); 556 } 557 }; 558 559 if_block(node_9, ($$render) => { 560 if ("image" in get(selected_media)) $$render(consequent_6); else $$render(alternate, false); 561 }); 562 } 563 564 reset(button); 565
566 var node_10 = sibling(button, 2); 567 568 { 569 var consequent_7 = ($$anchor) => { 570 var caption = root_14(); 571 var text = child(caption, true); 572 573 reset(caption); 574 template_effect(() => set_text(text, get(selected_media).caption)); 575 append($$anchor, caption); 576 }; 577 578 if_block(node_10, ($$render) => { 579 if (get(selected_media)?.caption) $$render(consequent_7); 580 }); 581 } 582 583 var div_2 = sibling(node_10, 2); 584 585 each(div_2, 21, () => get(resolved_value), index, ($$anchor, media, i) => { 586 var button_1 = root_15(); 587 let classes; 588 var node_11 = child(button_1); 589 590 { 591 var consequent_8 = ($$anchor) => { 592 { 593 let $0 = user_derived(() => ({ 594 title: get(media).caption || null, 595 alt: "", 596 class: "with-caption", 597 loading: "lazy" 598 })); 599 600 Image$1($$anchor, { 601 get src() { 602 return get(media).image.url; 603 }, 604 605 get restProps() { 606 return get($0); 607 }, 608 data_testid: `thumbnail ${i + 1}` 609 }); 610 } 611 }; 612 613 var alternate_1 = ($$anchor) => { 614 var fragment_11 = root_17();
615 var node_12 = first_child(fragment_11); 616 617 Play(node_12); 618 619 var node_13 = sibling(node_12, 2); 620 621 { 622 let $0 = user_derived(() => get(media).caption || null); 623 624 Video(node_13, { 625 get src() { 626 return get(media).video.url; 627 }, 628 629 get title() { 630 return get($0); 631 }, 632 is_stream: false, 633 'data-testid': "thumbnail " + (i + 1), 634 alt: '', 635 loading: 'lazy', 636 loop: false 637 }); 638 } 639 640 append($$anchor, fragment_11); 641 }; 642 643 if_block(node_11, ($$render) => { 644 if ("image" in get(media)) $$render(consequent_8); else $$render(alternate_1, false); 645 }); 646 } 647 648 reset(button_1); 649 bind_this(button_1, ($$value, i) => el[i] = $$value, (i) => el?.[i], () => [i]); 650 651 template_effect(() => { 652 classes = set_class(button_1, 1, 'thumbnail-item thumbnail-small svelte-7anmrz', null, classes, { selected: selected_index() === i && mode !== "minimal" }); 653 set_attribute(button_1, 'aria-label', "Thumbnail " + (i + 1) + " of " + get(resolved_value).length); 654 }); 655 656 event('click', button_1, () => selected_index(i)); 657 append($$anchor, button_1); 658 }); 659 660 reset(div_2); 661 bind_this(div_2, ($$value) => set(container_element, $$value), () => get(container_element)); 662 reset(span); 663 664 template_effect(() => { 665 set_style(button, `height: calc(100% - ${get(selected_media).caption ? '80px' : '60px'})`); 666 set_style(div_2, `justify-content: ${thumbnails_overflow ? 'flex-start' : 'center'};`); 667 }); 668 669 event('click', button, function (...$$args) { 670 ("image" in get(selected_media) ? (event) => handle_preview_click(event) : null)?.apply(this, $$args); 671 }); 672 673 event('keydown', span, on_keydown); 674 append($$anchor, span); 675 }; 676 677 if_block(node_2, ($$render) => { 678 if (get(selected_media) && allow_preview()) $$render(consequent_9); 679 }); 680 } 681 682 var div_3 = sibling(node_2, 2); 683 let classes_1; 684 let styles; 685 var node_14 = child(div_3); 686 687 { 688 var consequent_14 = ($$anchor) => { 689 ModifyUpload($$anchor, { 690 get i18n() { 691 return $$props.i18n; 692 }, 693 694 onclear: () => { 695 value([]); 696 onsource_change()("upload"); 697 onclear()(); 698 }, 699 700 children: ($$anchor, $$slotProps) => { 701 var fragment_13 = root_19();
702 var node_15 = first_child(fragment_13); 703 704 { 705 var consequent_10 = ($$anchor) => { 706 { 707 let $0 = user_derived(() => $$props.i18n("upload_text.click_to_upload")); 708 709 IconButton($$anchor, { 710 get Icon() { 711 return Upload$1; 712 }, 713 714 get label() { 715 return get($0); 716 }, 717 718 children: ($$anchor, $$slotProps) => { 719 Upload($$anchor, { 720 icon_upload: true, 721 onload: (e) => onupload()(e), 722 get filetype() { 723 return file_types(); 724 }, 725 file_count: 'multiple', 726 get max_file_size() { 727 return max_file_size(); 728 }, 729 730 get root() { 731 return root(); 732 }, 733 onerror: (e) => onerror()(e), 734 get stream_handler() { 735 return $$props.stream_handler; 736 }, 737 738 get upload() { 739 return $$props.upload; 740 }, 741 742 get upload_promise() { 743 return upload_promise; 744 }, 745 746 set upload_promise($$value) { 747 upload_promise = $$value; 748 }, 749 750 get uploading() { 751 return uploading; 752 }, 753 754 set uploading($$value) { 755 uploading = $$value; 756 } 757 }); 758 }, 759 $$slots: { default: true } 760 }); 761 } 762 }; 763 764 if_block(node_15, ($$render) => { 765 if ($$props.upload && $$props.stream_handler) $$render(consequent_10); 766 }); 767 } 768
769 var node_16 = sibling(node_15, 2); 770 771 { 772 var consequent_11 = ($$anchor) => { 773 { 774 let $0 = user_derived(() => $$props.i18n("common.webcam")); 775 776 IconButton($$anchor, { 777 get Icon() { 778 return Webcam; 779 }, 780 781 get label() { 782 return get($0); 783 }, 784 785 onclick: () => { 786 onsource_change()("webcam"); 787 } 788 }); 789 } 790 }; 791 792 if_block(node_16, ($$render) => { 793 if ($$props.sources.includes("webcam")) $$render(consequent_11); 794 }); 795 } 796 797 var node_17 = sibling(node_16, 2); 798 799 { 800 var consequent_12 = ($$anchor) => { 801 { 802 let $0 = user_derived(() => $$props.i18n("common.video")); 803 804 IconButton($$anchor, { 805 get Icon() { 806 return Video$1; 807 }, 808 809 get label() { 810 return get($0); 811 }, 812 813 onclick: () => { 814 onsource_change()("webcam-video"); 815 } 816 }); 817 } 818 }; 819 820 if_block(node_17, ($$render) => { 821 if ($$props.sources.includes("webcam-video")) $$render(consequent_12); 822 }); 823 } 824
825 var node_18 = sibling(node_17, 2); 826 827 { 828 var consequent_13 = ($$anchor) => { 829 { 830 let $0 = user_derived(() => $$props.i18n("upload_text.paste_clipboard")); 831 832 IconButton($$anchor, { 833 get label() { 834 return get($0); 835 }, 836 837 onclick: () => { 838 onsource_change()("clipboard"); 839 }, 840 841 get Icon() { 842 return ImagePaste; 843 } 844 }); 845 } 846 }; 847 848 if_block(node_18, ($$render) => { 849 if ($$props.sources.includes("clipboard")) $$render(consequent_13); 850 }); 851 } 852 853 append($$anchor, fragment_13); 854 }, 855 $$slots: { default: true } 856 }); 857 }; 858 859 if_block(node_14, ($$render) => { 860 if ($$props.interactive && selected_index() === null) $$render(consequent_14); 861 }); 862 } 863 864 var div_4 = sibling(node_14, 2); 865 let classes_2; 866 867 each(div_4, 21, () => get(resolved_value), index, ($$anchor, entry, i) => { 868 var div_5 = root_25(); 869 var button_2 = child(div_5); 870 let classes_3;
871 var node_19 = child(button_2); 872 873 { 874 var consequent_15 = ($$anchor) => { 875 { 876 let $0 = user_derived(() => get(entry).caption || ""); 877 let $1 = user_derived(() => typeof get(entry).image === "string" ? get(entry).image : get(entry).image.url); 878 879 Image$1($$anchor, { 880 get alt() { 881 return get($0); 882 }, 883 884 get src() { 885 return get($1); 886 }, 887 loading: 'lazy' 888 }); 889 } 890 }; 891 892 var alternate_2 = ($$anchor) => { 893 var fragment_20 = root_27(); 894 var node_20 = first_child(fragment_20); 895 896 Play(node_20); 897 898 var node_21 = sibling(node_20, 2); 899 900 { 901 let $0 = user_derived(() => get(entry).caption || null); 902 903 Video(node_21, { 904 get src() { 905 return get(entry).video.url; 906 }, 907 908 get title() { 909 return get($0); 910 }, 911 is_stream: false, 912 'data-testid': "thumbnail " + (i + 1), 913 alt: '', 914 loading: 'lazy', 915 loop: false 916 }); 917 } 918 919 append($$anchor, fragment_20); 920 }; 921 922 if_block(node_19, ($$render) => { 923 if ("image" in get(entry)) $$render(consequent_15); else $$render(alternate_2, false); 924 }); 925 } 926 927 var node_22 = sibling(node_19, 2); 928 929 { 930 var consequent_16 = ($$anchor) => { 931 var div_6 = root_28(); 932 var text_1 = child(div_6, true); 933 934 reset(div_6); 935 template_effect(() => set_text(text_1, get(entry).caption)); 936 append($$anchor, div_6); 937 }; 938 939 if_block(node_22, ($$render) => { 940 if (get(entry).caption) $$render(consequent_16); 941 }); 942 } 943 944 reset(button_2); 945 946 var node_23 = sibling(button_2, 2); 947 948 { 949 var consequent_17 = ($$anchor) => { 950 var button_3 = root_29(); 951 var node_24 = child(button_3); 952 953 Clear(node_24); 954 reset(button_3); 955 event('click', button_3, stopPropagation(() => handle_item_delete(i))); 956 append($$anchor, button_3); 957 }; 958 959 if_block(node_23, ($$render) => { 960 if ($$props.interactive) $$render(consequent_17); 961 }); 962 } 963 964 reset(div_5); 965 966 template_effect(() => { 967 classes_3 = set_class(button_2, 1, 'thumbnail-item thumbnail-lg svelte-7anmrz', null, classes_3, { selected: selected_index() === i }); 968 set_attribute(button_2, 'aria-label', "Thumbnail " + (i + 1) + " of " + get(resolved_value).length); 969 }); 970 971 event('click', button_2, () => { 972 if (selected_index() === null && allow_preview()) { 973 onpreview_open()(); 974 } 975 976 selected_index(i); 977 }); 978 979 append($$anchor, div_5); 980 }); 981 982 reset(div_4); 983 reset(div_3); 984 reset(div); 985 bind_this(div, ($$value) => image_container = $$value, () => image_container); 986 987 template_effect(() => { 988 classes_1 = set_class(div_3, 1, 'grid-wrap svelte-7anmrz', null, classes_1, { 989 minimal: mode === "minimal", 990 'fixed-height': (!height() || height() == "auto"), 991 hidden: is_full_screen 992 }); 993 994 styles = set_style(div_3, '', styles, { 995 height: height() !== "auto" 996 ? typeof height() === "number" ? height() + "px" : height() 997 : null 998 }); 999 1000 classes_2 = set_class(div_4, 1, 'grid-container svelte-7anmrz', null, classes_2, { 'pt-6': show_label() }); 1001 set_style(div_4, `--grid-cols:${get(effective_columns) ?? ''}; --grid-rows:${rows() ?? ''}; --object-fit: ${object_fit() ?? ''};`); 1002 }); 1003 1004 append($$anchor, div); 1005 }; 1006 1007 if_block(node_1, ($$render) => { 1008 if (value() == null || get(resolved_value) == null || get(resolved_value).length === 0) $$render(consequent_1); else $$render(alternate_3, false); 1009 }); 1010 } 1011 1012 bind_window_size('innerHeight', ($$value) => $$value); 1013 append($$anchor, fragment); 1014 pop(); 1015} 1016 1017const Gallery$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({ 1018 __proto__: null, 1019 default: Gallery 1020}, Symbol.toStringTag, { value: 'Module' })); 1021 1022export { Gallery as G, Gallery$1 as a, handle_save as h }; 1023//# sourceMappingURL=Gallery-DaBd1NXs.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.