1import { p as prop, i as if_block, k as each, a as set_attribute, u as index, f as set_style, b as set_class, t as remove_input_defaults, d as bind_this, F as set_value } from './i18n-CMo5lpzy.js'; 2import { aj as delegate, R as push, u as state, v as proxy, y as user_effect, w as get, aa as onMount, ae as onDestroy, V as child, Y as reset, a as append, T as pop, a5 as user_derived, x as set, X as sibling, t as template_effect, Z as event, W as from_html, S as first_child, a0 as set_text, a6 as comment, au as prepare_files, M as tick } from './index-BvBk1Iap.js'; 3import { k as key } from './key-BV46G5Fv.js'; 4import { I as IconButton, V as Video$1 } from './ScrollFade.svelte_svelte_type_style_lang-Xm-PLg9E.js'; 5import { B as BlockLabel } from './BlockLabel-oGSqUii_.js'; 6import { D as DownloadLink } from './DownloadLink-KvrFKyMn.js'; 7import { E as Empty } from './Empty-CHa-gxv7.js'; 8import { S as ShareButton } from './ShareButton-Dz0y1C1K.js'; 9import { D as Download } from './Download-pFhUaTl4.js'; 10import { I as IconButtonWrapper } from './IconButtonWrapper-Ba0GidgU.js'; 11import { f as format_time, u as uploadToHuggingFace } from './utils.svelte-CYLB_jIA.js'; 12import { M as Maximize } from './Maximize-B_43ylTs.js'; 13import { T as Trim, V as VolumeLevels, P as Pause } from './VolumeLevels-DHAc0pUL.js'; 14import { P as Play } from './Play-CWcFSzc7.js'; 15import { U as Undo } from './Undo-BxcJDM8E.js'; 16import { b as loadFfmpeg, t as trimVideo, V as Video } from './Video-B3xDM6GN.js'; 17import './Upload-CPeZiqam.js'; 18import { M as ModifyUpload } from './ModifyUpload-B5K-5Hqx.js'; 19 20var root_1$2 = from_html(`<div class="load-wrap svelte-mctcyk"><span aria-label="loading timeline" class="loader svelte-mctcyk"></span></div>`); 21var root_3$2 = from_html(`<img draggable="false" class="svelte-mctcyk"/>`); 22var root_2$2 = from_html(`<div id="timeline" class="thumbnail-wrapper svelte-mctcyk"><button aria-label="start drag handle for trimming video" class="handle left svelte-mctcyk"></button> <div class="opaque-layer svelte-mctcyk"></div> <!> <button aria-label="end drag handle for trimming video" class="handle right svelte-mctcyk"></button></div>`); 23var root$3 = from_html(`<div class="container svelte-mctcyk"><!></div>`); 24 25function VideoTimeline($$anchor, $$props) { 26 push($$props, true); 27 28 let videoElement = prop($$props, 'videoElement', 7), 29 trimmedDuration = prop($$props, 'trimmedDuration', 15, null), 30 dragStart = prop($$props, 'dragStart', 15, 0), 31 dragEnd = prop($$props, 'dragEnd', 15, 0), 32 loadingTimeline = prop($$props, 'loadingTimeline', 15, false); 33 34 let thumbnails = state(proxy([])); 35 let numberOfThumbnails = 10; 36 let videoDuration; 37 let leftHandlePosition = state(0); 38 let rightHandlePosition = state(100); 39 let dragging = state(null); 40 41 const startDragging = (side) => { 42 set(dragging, side, true); 43 }; 44 45 let loadingTimelineValue = user_derived(() => get(thumbnails).length !== numberOfThumbnails); 46 47 user_effect(() => { 48 loadingTimeline(get(loadingTimelineValue)); 49 }); 50 51 const stopDragging = () => { 52 set(dragging, null); 53 }; 54 55 const drag = (event, distance) => { 56 if (get(dragging)) { 57 const timeline = document.getElementById("timeline"); 58 59 if (!timeline) return; 60 61 const rect = timeline.getBoundingClientRect(); 62 let newPercentage = (event.clientX - rect.left) / rect.width * 100; 63 64 if (distance) { 65 // Move handle based on arrow key press 66 newPercentage = get(dragging) === "left" 67 ? get(leftHandlePosition) + distance 68 : get(rightHandlePosition) + distance; 69 } else { 70 // Move handle based on mouse drag 71 newPercentage = (event.clientX - rect.left) / rect.width * 100; 72 } 73 74 newPercentage = Math.max(0, Math.min(newPercentage, 100)); // Keep within 0 and 100 75 76 if (get(dragging) === "left") { 77 set(leftHandlePosition, Math.min(newPercentage, get(rightHandlePosition)), true); 78 79 // Calculate the new time and set it for the videoElement 80 const newTimeLeft = get(leftHandlePosition) / 100 * videoDuration; 81 82 videoElement().currentTime = newTimeLeft; 83 dragStart(newTimeLeft); 84 } else if (get(dragging) === "right") { 85 set(rightHandlePosition, Math.max(newPercentage, get(leftHandlePosition)), true); 86 87 const newTimeRight = get(rightHandlePosition) / 100 * videoDuration; 88 89 videoElement().currentTime = newTimeRight; 90 dragEnd(newTimeRight); 91 } 92 93 const startTime = get(leftHandlePosition) / 100 * videoDuration; 94 const endTime = get(rightHandlePosition) / 100 * videoDuration; 95
96 trimmedDuration(endTime - startTime); 97 set(leftHandlePosition, get(leftHandlePosition), true); 98 set(rightHandlePosition, get(rightHandlePosition), true); 99 } 100 }; 101 102 const moveHandle = (e) => { 103 if (get(dragging)) { 104 // Calculate the movement distance as a percentage of the video duration 105 const distance = 1 / videoDuration * 100; 106 107 if (e.key === "ArrowLeft") { 108 drag({ clientX: 0 }, -distance); 109 } else if (e.key === "ArrowRight") { 110 drag({ clientX: 0 }, distance); 111 } 112 } 113 }; 114 115 const generateThumbnail = () => { 116 const canvas = document.createElement("canvas"); 117 const ctx = canvas.getContext("2d"); 118 119 if (!ctx) return; 120 121 canvas.width = videoElement().videoWidth; 122 canvas.height = videoElement().videoHeight; 123 ctx.drawImage(videoElement(), 0, 0, canvas.width, canvas.height); 124 125 const thumbnail = canvas.toDataURL("image/jpeg", 0.7); 126 127 set(thumbnails, [...get(thumbnails), thumbnail], true); 128 }; 129 130 onMount(() => { 131 const loadMetadata = () => { 132 videoDuration = videoElement().duration; 133 134 const interval = videoDuration / numberOfThumbnails; 135 let captures = 0; 136 137 const onSeeked = () => { 138 generateThumbnail(); 139 captures++; 140 141 if (captures < numberOfThumbnails) { 142 videoElement().currentTime += interval; 143 } else { 144 videoElement().removeEventListener("seeked", onSeeked); 145 } 146 }; 147 148 videoElement().addEventListener("seeked", onSeeked); 149 videoElement().currentTime = 0; 150 }; 151 152 if (videoElement().readyState >= 1) { 153 loadMetadata(); 154 } else { 155 videoElement().addEventListener("loadedmetadata", loadMetadata); 156 } 157 }); 158 159 onDestroy(() => { 160 window.removeEventListener("mousemove", drag); 161 window.removeEventListener("mouseup", stopDragging); 162 window.removeEventListener("keydown", moveHandle); 163 }); 164 165 onMount(() => { 166 window.addEventListener("mousemove", drag); 167 window.addEventListener("mouseup", stopDragging); 168 window.addEventListener("keydown", moveHandle); 169 }); 170 171 var div = root$3(); 172 var node = child(div); 173 174 { 175 var consequent = ($$anchor) => { 176 var div_1 = root_1$2(); 177 178 append($$anchor, div_1); 179 }; 180 181 var alternate = ($$anchor) => { 182 var div_2 = root_2$2(); 183 var button = child(div_2); 184 185 button.__mousedown = () => startDragging("left"); 186 187 button.__keydown = (e) => { 188 if (e.key === "ArrowLeft" || e.key == "ArrowRight") { 189 startDragging("left"); 190 } 191 }; 192 193 var div_3 = sibling(button, 2); 194 var node_1 = sibling(div_3, 2); 195 196 each(node_1, 17, () => get(thumbnails), index, ($$anchor, thumbnail, i) => { 197 var img = root_3$2(); 198 199 set_attribute(img, 'alt', `frame-${i}`); 200 template_effect(() => set_attribute(img, 'src', get(thumbnail))); 201 append($$anchor, img); 202 }); 203 204 var button_1 = sibling(node_1, 2); 205 206 button_1.__mousedown = () => startDragging("right"); 207 208 button_1.__keydown = (e) => { 209 if (e.key === "ArrowLeft" || e.key == "ArrowRight") { 210 startDragging("right"); 211 } 212 }; 213 214 reset(div_2); 215 216 template_effect(() => { 217 set_style(button, `left: ${get(leftHandlePosition) ?? ''}%;`); 218 set_style(div_3, `left: ${get(leftHandlePosition) ?? ''}%; right: ${100 - get(rightHandlePosition)}%`); 219 set_style(button_1, `left: ${get(rightHandlePosition) ?? ''}%;`); 220 }); 221 222 event('blur', button, stopDragging); 223 event('blur', button_1, stopDragging); 224 append($$anchor, div_2); 225 }; 226 227 if_block(node, ($$render) => { 228 if (get(loadingTimelineValue)) $$render(consequent); else $$render(alternate, false); 229 }); 230 } 231 232 reset(div); 233 append($$anchor, div); 234 pop(); 235} 236 237delegate(['mousedown', 'keydown']); 238 239var root_1$1 = from_html(`<div class="timeline-wrapper svelte-1orxdv"><!></div>`); 240var root_2$1 = from_html(`<time aria-label="duration of selected region in seconds"> </time> <div class="edit-buttons svelte-1orxdv"><button>Trim</button> <button>Cancel</button></div>`, 1); 241var root_3$1 = from_html(`<div class="svelte-1orxdv"></div>`); 242var root_4 = from_html(`<!> <!>`, 1); 243var root$2 = from_html(`<div><!> <div class="controls svelte-1orxdv" data-testid="waveform-controls"><!></div></div> <!>`, 1); 244 245function VideoControls($$anchor, $$props) { 246 push($$props, true); 247 248 let videoElement = prop($$props, 'videoElement', 3, undefined), 249 showRedo = prop($$props, 'showRedo', 3, false), 250 interactive = prop($$props, 'interactive', 3, true), 251 mode = prop($$props, 'mode', 15, ""), 252 processingVideo = prop($$props, 'processingVideo', 15, false), 253 value = prop($$props, 'value', 3, null), 254 show_download_button = prop($$props, 'show_download_button', 3, false), 255 handle_clear = prop($$props, 'handle_clear', 3, () => {}), 256 has_change_history = prop($$props, 'has_change_history', 3, false); 257 258 let ffmpeg; 259 260 onMount(async () => { 261 ffmpeg = await loadFfmpeg(); 262 }); 263 264 user_effect(() => { 265 if (mode() === "edit" && get(trimmedDuration) === null && videoElement()) { 266 set(trimmedDuration, videoElement().duration, true); 267 } 268 }); 269 270 let trimmedDuration = state(null); 271 let dragStart = state(0); 272 let dragEnd = state(0); 273 let loadingTimeline = state(false); 274 275 const toggleTrimmingMode = () => { 276 if (mode() === "edit") { 277 mode(""); 278 279 if (videoElement()) { 280 set(trimmedDuration, videoElement().duration, true); 281 } 282 } else { 283 mode("edit"); 284 } 285 }; 286 287 var fragment = root$2(); 288 var div = first_child(fragment); 289 let classes; 290 var node = child(div); 291 292 { 293 var consequent = ($$anchor) => { 294 var div_1 = root_1$1();
295 var node_1 = child(div_1); 296 297 VideoTimeline(node_1, { 298 get videoElement() { 299 return videoElement(); 300 }, 301 302 get dragStart() { 303 return get(dragStart); 304 }, 305 306 set dragStart($$value) { 307 set(dragStart, $$value, true); 308 }, 309 310 get dragEnd() { 311 return get(dragEnd); 312 }, 313 314 set dragEnd($$value) { 315 set(dragEnd, $$value, true); 316 }, 317 318 get trimmedDuration() { 319 return get(trimmedDuration); 320 }, 321 322 set trimmedDuration($$value) { 323 set(trimmedDuration, $$value, true); 324 }, 325 326 get loadingTimeline() { 327 return get(loadingTimeline); 328 }, 329 330 set loadingTimeline($$value) { 331 set(loadingTimeline, $$value, true); 332 } 333 }); 334 335 reset(div_1); 336 append($$anchor, div_1); 337 }; 338 339 if_block(node, ($$render) => { 340 if (mode() === "edit" && videoElement()) $$render(consequent); 341 }); 342 } 343 344 var div_2 = sibling(node, 2); 345 var node_2 = child(div_2); 346 347 { 348 var consequent_1 = ($$anchor) => { 349 var fragment_1 = root_2$1(); 350 var time = first_child(fragment_1); 351 let classes_1; 352 var text = child(time, true); 353 354 reset(time); 355 356 var div_3 = sibling(time, 2); 357 var button = child(div_3); 358 let classes_2; 359 360 button.__click = () => { 361 if (!videoElement()) return; 362 363 mode(""); 364 processingVideo(true); 365 366 trimVideo(ffmpeg, get(dragStart), get(dragEnd), videoElement()).then((videoBlob) => { 367 $$props.handle_trim_video(videoBlob); 368 }).then(() => { 369 processingVideo(false); 370 }); 371 }; 372 373 var button_1 = sibling(button, 2); 374 let classes_3; 375 376 button_1.__click = toggleTrimmingMode; 377 reset(div_3); 378 379 template_effect( 380 ($0) => { 381 classes_1 = set_class(time, 1, 'svelte-1orxdv', null, classes_1, { hidden: get(loadingTimeline) }); 382 set_text(text, $0); 383 classes_2 = set_class(button, 1, 'text-button svelte-1orxdv', null, classes_2, { hidden: get(loadingTimeline) }); 384 classes_3 = set_class(button_1, 1, 'text-button svelte-1orxdv', null, classes_3, { hidden: get(loadingTimeline) }); 385 }, 386 [() => format_time(get(trimmedDuration))] 387 ); 388 389 append($$anchor, fragment_1); 390 }; 391 392 var alternate = ($$anchor) => { 393 var div_4 = root_3$1(); 394 395 append($$anchor, div_4); 396 }; 397 398 if_block(node_2, ($$render) => { 399 if (mode() === "edit" && get(trimmedDuration) !== null) $$render(consequent_1); else $$render(alternate, false); 400 }); 401 } 402 403 reset(div_2); 404 reset(div); 405 406 var node_3 = sibling(div, 2); 407 408 { 409 let $0 = user_derived(() => show_download_button() ? value()?.url : null); 410 411 ModifyUpload(node_3, { 412 get i18n() { 413 return $$props.i18n; 414 }, 415 onclear: () => handle_clear()(), 416 get download() { 417 return get($0); 418 }, 419 420 children: ($$anchor, $$slotProps) => { 421 var fragment_2 = root_4(); 422 var node_4 = first_child(fragment_2); 423 424 { 425 var consequent_2 = ($$anchor) => { 426 { 427 let $0 = user_derived(() => processingVideo() || !has_change_history()); 428 429 IconButton($$anchor, { 430 get Icon() { 431 return Undo; 432 }, 433 label: 'Reset video to initial value', 434 get disabled() { 435 return get($0); 436 }, 437 438 onclick: () => { 439 $$props.handle_reset_value(); 440 mode(""); 441 } 442 }); 443 } 444 }; 445 446 if_block(node_4, ($$render) => { 447 if (showRedo() && mode() === "") $$render(consequent_2); 448 }); 449 } 450 451 var node_5 = sibling(node_4, 2); 452 453 { 454 var consequent_3 = ($$anchor) => { 455 IconButton($$anchor, { 456 get Icon() { 457 return Trim; 458 }, 459 label: 'Trim video to selection', 460 get disabled() { 461 return processingVideo(); 462 }, 463 onclick: toggleTrimmingMode 464 }); 465 }; 466 467 if_block(node_5, ($$render) => { 468 if (interactive() && mode() === "") $$render(consequent_3); 469 }); 470 } 471 472 append($$anchor, fragment_2); 473 }, 474 $$slots: { default: true } 475 }); 476 } 477 478 template_effect(() => classes = set_class(div, 1, 'container svelte-1orxdv', null, classes, { hidden: mode() !== "edit" })); 479 append($$anchor, fragment); 480 pop(); 481} 482 483delegate(['click']); 484 485var root$1 = from_html(`<input id="volume" class="volume-slider svelte-h4x5cd" type="range" min="0" max="1" step="0.01"/>`); 486 487function VolumeControl($$anchor, $$props) { 488 push($$props, true); 489 490 let current_volume = prop($$props, 'current_volume', 15, 1), 491 show_volume_slider = prop($$props, 'show_volume_slider', 15, false); 492 493 let volume_element = state(void 0); 494 495 onMount(() => { 496 adjustSlider(); 497 }); 498 499 const adjustSlider = () => { 500 let slider = get(volume_element); 501 502 if (!slider) return; 503 504 slider.style.background = `linear-gradient(to right, white ${current_volume() * 100}%, rgba(255, 255, 255, 0.3) ${current_volume() * 100}%)`; 505 }; 506 507 user_effect(() => { 508 current_volume(); 509 adjustSlider(); 510 }); 511 512 var input = root$1(); 513 514 remove_input_defaults(input); 515 input.__focusout = () => show_volume_slider(false); 516 517 input.__input = (e) => { 518 if (e.target instanceof HTMLInputElement) { 519 current_volume(parseFloat(e.target.value)); 520 } 521 }; 522 523 bind_this(input, ($$value) => set(volume_element, $$value), () => get(volume_element)); 524 template_effect(() => set_value(input, current_volume())); 525 append($$anchor, input); 526 pop(); 527} 528 529delegate(['focusout', 'input']); 530 531var root_2 = from_html(`<track kind="captions" default/>`); 532var root_8 = from_html(`<div role="button" tabindex="0" class="icon svelte-1k28h7x" aria-label="full-screen"><!></div>`); 533var root_1 = from_html(`<div class="wrap svelte-1k28h7x"><div><!></div> <div class="controls svelte-1k28h7x"><div class="inner svelte-1k28h7x"><span role="button" tabindex="0" class="icon svelte-1k28h7x" aria-label="play-pause-replay-button"><!></span> <span class="time svelte-1k28h7x"> </span> <progress class="svelte-1k28h7x"></progress> <div class="volume-control-wrapper svelte-1k28h7x"><button class="icon volume-button svelte-1k28h7x" aria-label="Adjust volume"><!></button> <!></div> <!></div></div></div> <!>`, 1); 534 535function Player($$anchor, $$props) { 536 push($$props, true); 537 538 let root = prop($$props, 'root', 3, ""), 539 subtitle = prop($$props, 'subtitle', 3, null), 540 label = prop($$props, 'label', 3, "test"), 541 interactive = prop($$props, 'interactive', 3, false), 542 handle_change = prop($$props, 'handle_change', 3, () => {}), 543 handle_reset_value = prop($$props, 'handle_reset_value', 3, () => {}), 544 is_stream = prop($$props, 'is_stream', 3, undefined), 545 show_download_button = prop($$props, 'show_download_button', 3, false), 546 value = prop($$props, 'value', 3, null), 547 handle_clear = prop($$props, 'handle_clear', 3, () => {}), 548 has_change_history = prop($$props, 'has_change_history', 3, false), 549 playback_position = prop($$props, 'playback_position', 15); 550 551 let time = state(0); 552 let duration = state(0); 553 let paused = state(true); 554 let video = state(void 0); 555 let processingVideo = state(false); 556 let show_volume_slider = state(false); 557 let current_volume = state(1); 558 let is_fullscreen = state(false); 559 560 function handleMove(e) { 561 if (!get(duration)) return; 562 563 if (e.type === "click") { 564 handle_click(e); 565 566 return; 567 } 568 569 if (e.type !== "touchmove" && !(e.buttons & 1)) return; 570 571 const clientX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX; 572 const { left, right } = e.currentTarget.getBoundingClientRect(); 573
574 set(time, get(duration) * (clientX - left) / (right - left)); 575 } 576 577 async function play_pause() { 578 if (!get(video)) return; 579 580 if (document.fullscreenElement != get(video)) { 581 const isPlaying = get(video).currentTime > 0 && !get(video).paused && !get(video).ended && get(video).readyState > get(video).HAVE_CURRENT_DATA; 582 583 if (!isPlaying) { 584 await get(video).play(); 585 } else get(video).pause(); 586 } 587 } 588 589 function handle_click(e) { 590 if (!get(duration)) return; 591 592 const { left, right } = e.currentTarget.getBoundingClientRect(); 593 594 set(time, get(duration) * (e.clientX - left) / (right - left)); 595 } 596 597 function handle_end() { 598 $$props.onstop?.(); 599 $$props.onend?.(); 600 } 601 602 const handle_trim_video = async (videoBlob) => { 603 let _video_blob = new File([videoBlob], "video.mp4"); 604 const val = await prepare_files([_video_blob]); 605 let value = (await $$props.upload(val, root()))?.filter(Boolean)[0]; 606 607 handle_change()(value); 608 }; 609 610 function open_full_screen() { 611 if (!get(video)) return; 612 613 if (!get(is_fullscreen)) { 614 get(video).requestFullscreen(); 615 } else { 616 document.exitFullscreen(); 617 } 618 } 619 620 function handleFullscreenChange() { 621 set(is_fullscreen, document.fullscreenElement === get(video)); 622 623 if (get(video)) { 624 get(video).controls = get(is_fullscreen); 625 } 626 } 627 628 let last_synced_volume = 1; 629 let previous_video; 630 631 // Tolerance for floating-point comparison of volume values 632 const VOLUME_EPSILON = 0.001; 633 634 function handleVolumeChange() { 635 if (get(video) && Math.abs(get(video).volume - last_synced_volume) > VOLUME_EPSILON) { 636 set(current_volume, get(video).volume, true); 637 last_synced_volume = get(video).volume; 638 } 639 } 640 641 onMount(() => { 642 document.addEventListener("fullscreenchange", handleFullscreenChange); 643 644 return () => { 645 document.removeEventListener("fullscreenchange", handleFullscreenChange); 646 }; 647 }); 648 649 onDestroy(() => { 650 if (get(video)) { 651 get(video).removeEventListener("volumechange", handleVolumeChange); 652 } 653 }); 654 655 user_effect(() => { 656 if (get(video) && get(video) !== previous_video) { 657 if (previous_video) { 658 previous_video.removeEventListener("volumechange", handleVolumeChange); 659 } 660 661 get(video).addEventListener("volumechange", handleVolumeChange); 662 previous_video = get(video); 663 } 664 }); 665 666 user_effect(() => { 667 playback_position(get(time)); 668 }); 669 670 user_effect(() => { 671 if (playback_position() !== get(time) && get(video)) { 672 get(video).currentTime = playback_position(); 673 } 674 }); 675 676 user_effect(() => { 677 if (get(video) && !get(is_fullscreen)) { 678 if (Math.abs(get(video).volume - get(current_volume)) > VOLUME_EPSILON) { 679 get(video).volume = get(current_volume); 680 last_synced_volume = get(current_volume); 681 } 682 683 get(video).controls = false; 684 } 685 }); 686 687 user_effect(() => { 688 if (get(video) && get(is_fullscreen)) { 689 last_synced_volume = get(video).volume; 690 } 691 }); 692 693 var fragment = root_1(); 694 var div = first_child(fragment); 695 var div_1 = child(div); 696 let classes; 697 var node = child(div_1); 698 699 { 700 let $0 = user_derived(() => `${label()}-player`); 701 702 Video(node, { 703 get src() { 704 return $$props.src; 705 }, 706 preload: 'auto', 707 get autoplay() { 708 return $$props.autoplay; 709 }, 710 711 get loop() { 712 return $$props.loop; 713 }, 714 715 get is_stream() { 716 return is_stream(); 717 }, 718 719 get controls() { 720 return get(is_fullscreen); 721 }, 722 onclick: play_pause, 723 onplay: () => $$props.onplay?.(), 724 onpause: () => $$props.onpause?.(), 725 onerror: (error) => $$props.onerror?.(error), 726 onended: handle_end, 727 get 'data-testid'() { 728 return get($0); 729 }, 730 731 get processingVideo() { 732 return get(processingVideo); 733 }, 734 onloadstart: () => $$props.onloadstart?.(), 735 onloadeddata: () => $$props.onloadeddata?.(), 736 onloadedmetadata: () => $$props.onloadedmetadata?.(), 737 get currentTime() { 738 return get(time); 739 }, 740 741 set currentTime($$value) { 742 set(time, $$value, true); 743 }, 744 745 get duration() { 746 return get(duration); 747 }, 748 749 set duration($$value) { 750 set(duration, $$value, true); 751 }, 752 753 get paused() { 754 return get(paused); 755 }, 756 757 set paused($$value) { 758 set(paused, $$value, true); 759 }, 760 761 get node() { 762 return get(video); 763 }, 764 765 set node($$value) { 766 set(video, $$value, true); 767 }, 768 769 children: ($$anchor, $$slotProps) => { 770 var track = root_2(); 771 772 template_effect(() => set_attribute(track, 'src', subtitle())); 773 append($$anchor, track); 774 }, 775 $$slots: { default: true } 776 }); 777 } 778 779 reset(div_1); 780 781 var div_2 = sibling(div_1, 2); 782 var div_3 = child(div_2); 783 var span = child(div_3); 784 785 span.__click = play_pause; 786 span.__keydown = play_pause; 787
788 var node_1 = child(span); 789 790 { 791 var consequent = ($$anchor) => { 792 Undo($$anchor); 793 }; 794 795 var alternate_1 = ($$anchor) => { 796 var fragment_2 = comment(); 797 var node_2 = first_child(fragment_2); 798 799 { 800 var consequent_1 = ($$anchor) => { 801 Play($$anchor); 802 }; 803 804 var alternate = ($$anchor) => { 805 Pause($$anchor); 806 }; 807 808 if_block( 809 node_2, 810 ($$render) => { 811 if (get(paused)) $$render(consequent_1); else $$render(alternate, false); 812 }, 813 true 814 ); 815 } 816 817 append($$anchor, fragment_2); 818 }; 819 820 if_block(node_1, ($$render) => { 821 if (get(time) === get(duration)) $$render(consequent); else $$render(alternate_1, false); 822 }); 823 } 824 825 reset(span); 826 827 var span_1 = sibling(span, 2); 828 var text = child(span_1); 829 830 reset(span_1); 831 832 var progress = sibling(span_1, 2); 833 834 progress.__mousemove = handleMove; 835 836 progress.__touchmove = (e) => { 837 e.preventDefault(); 838 handleMove(e); 839 }; 840 841 progress.__click = (e) => { 842 e.stopPropagation(); 843 e.preventDefault(); 844 handle_click(e); 845 }; 846 847 var div_4 = sibling(progress, 2); 848 var button = child(div_4); 849 850 button.__click = () => set(show_volume_slider, !get(show_volume_slider)); 851 852 let styles; 853 var node_3 = child(button); 854 855 VolumeLevels(node_3, { 856 get currentVolume() { 857 return get(current_volume); 858 } 859 }); 860 861 reset(button); 862 863 var node_4 = sibling(button, 2); 864 865 { 866 var consequent_2 = ($$anchor) => { 867 VolumeControl($$anchor, { 868 get current_volume() { 869 return get(current_volume); 870 }, 871 872 set current_volume($$value) { 873 set(current_volume, $$value, true); 874 }, 875 876 get show_volume_slider() { 877 return get(show_volume_slider); 878 }, 879 880 set show_volume_slider($$value) { 881 set(show_volume_slider, $$value, true); 882 } 883 }); 884 }; 885 886 if_block(node_4, ($$render) => { 887 if (get(show_volume_slider)) $$render(consequent_2); 888 }); 889 } 890 891 reset(div_4); 892 893 var node_5 = sibling(div_4, 2); 894 895 { 896 var consequent_3 = ($$anchor) => { 897 var div_5 = root_8(); 898 899 div_5.__click = open_full_screen; 900 901 var node_6 = child(div_5); 902 903 Maximize(node_6); 904 reset(div_5); 905 event('keypress', div_5, open_full_screen); 906 append($$anchor, div_5); 907 }; 908 909 if_block(node_5, ($$render) => { 910 if (!get(show_volume_slider)) $$render(consequent_3); 911 }); 912 } 913 914 reset(div_3); 915 reset(div_2); 916 reset(div); 917 918 var node_7 = sibling(div, 2); 919 920 { 921 var consequent_4 = ($$anchor) => { 922 VideoControls($$anchor, { 923 get videoElement() { 924 return get(video); 925 }, 926 showRedo: true, 927 handle_trim_video, 928 get handle_reset_value() { 929 return handle_reset_value(); 930 }, 931 932 get value() { 933 return value(); 934 }, 935 936 get i18n() { 937 return $$props.i18n; 938 }, 939 940 get show_download_button() { 941 return show_download_button(); 942 }, 943 944 get handle_clear() { 945 return handle_clear(); 946 }, 947 948 get has_change_history() { 949 return has_change_history(); 950 }, 951 952 get processingVideo() { 953 return get(processingVideo); 954 }, 955 956 set processingVideo($$value) { 957 set(processingVideo, $$value, true); 958 } 959 }); 960 }; 961 962 if_block(node_7, ($$render) => { 963 if (interactive()) $$render(consequent_4); 964 }); 965 } 966 967 template_effect( 968 ($0, $1) => { 969 classes = set_class(div_1, 1, 'mirror-wrap svelte-1k28h7x', null, classes, { mirror: $$props.mirror }); 970 set_text(text, `${$0 ?? ''} / ${$1 ?? ''}`); 971 set_value(progress, get(time) / get(duration) || 0); 972 973 styles = set_style(button, '', styles, { 974 color: get(show_volume_slider) ? "var(--color-accent)" : "white" 975 }); 976 }, 977 [ 978 () => format_time(get(time)), 979 () => format_time(get(duration)) 980 ] 981 ); 982 983 append($$anchor, fragment); 984 pop(); 985} 986 987delegate(['click', 'keydown', 'mousemove', 'touchmove']); 988 989var root_5 = from_html(`<!> <!>`, 1); 990var root_3 = from_html(`<!> <div data-testid="download-div"><!></div>`, 1); 991var root = from_html(`<!> <!>`, 1); 992 993function VideoPreview($$anchor, $$props) { 994 push($$props, true); 995 996 let value = prop($$props, 'value', 15, null), 997 subtitle = prop($$props, 'subtitle', 3, null), 998 label = prop($$props, 'label', 3, undefined), 999 show_label = prop($$props, 'show_label', 3, true), 1000 buttons = prop($$props, 'buttons', 3, null), 1001 on_custom_button_click = prop($$props, 'on_custom_button_click', 3, null),
1002 display_icon_button_wrapper_top_corner = prop($$props, 'display_icon_button_wrapper_top_corner', 3, false), 1003 playback_position = prop($$props, 'playback_position', 15); 1004 1005 let old_value = state(null); 1006 let old_subtitle = state(null); 1007 1008 user_effect(() => { 1009 if (value()) { 1010 $$props.onchange?.(value()); 1011 } 1012 }); 1013 1014 user_effect(() => { 1015 async function updateValue() { 1016 // needed to bust subtitle caching issues on Chrome 1017 if (value() !== get(old_value) && subtitle() !== get(old_subtitle) && get(old_subtitle) !== null) { 1018 set(old_value, value(), true); 1019 value(null); 1020 await tick(); 1021 value(get(old_value)); 1022 } 1023 1024 set(old_value, value(), true); 1025 set(old_subtitle, subtitle()); 1026 } 1027 1028 updateValue(); 1029 }); 1030 1031 var fragment = root(); 1032 var node = first_child(fragment); 1033 1034 { 1035 let $0 = user_derived(() => label() || "Video"); 1036 1037 BlockLabel(node, { 1038 get show_label() { 1039 return show_label(); 1040 }, 1041 1042 get Icon() { 1043 return Video$1; 1044 }, 1045 1046 get label() { 1047 return get($0); 1048 } 1049 }); 1050 } 1051 1052 var node_1 = sibling(node, 2); 1053 1054 { 1055 var consequent = ($$anchor) => { 1056 Empty($$anchor, { 1057 unpadded_box: true, 1058 size: 'large', 1059 children: ($$anchor, $$slotProps) => { 1060 Video$1($$anchor); 1061 }, 1062 $$slots: { default: true } 1063 }); 1064 }; 1065 1066 var alternate = ($$anchor) => { 1067 var fragment_3 = root_3(); 1068 var node_2 = first_child(fragment_3); 1069 1070 key(node_2, () => value().url, ($$anchor) => { 1071 { 1072 let $0 = user_derived(() => subtitle()?.url); 1073 1074 Player($$anchor, { 1075 get src() { 1076 return value().url; 1077 }, 1078 1079 get subtitle() { 1080 return get($0); 1081 }, 1082 1083 get is_stream() { 1084 return value().is_stream; 1085 }, 1086 1087 get autoplay() { 1088 return $$props.autoplay; 1089 }, 1090 onplay: () => $$props.onplay?.(), 1091 onpause: () => $$props.onpause?.(), 1092 onstop: () => $$props.onstop?.(), 1093 onend: () => $$props.onend?.(), 1094 onloadedmetadata: () => { 1095 // Deal with `<video>`'s `loadedmetadata` event as `VideoPreview`'s `load` event 1096 // to represent not only the video is loaded but also the metadata is loaded 1097 // so its dimensions (w/h) are known. This is used for Chatbot's auto scroll. 1098 $$props.onload?.(); 1099 }, 1100 mirror: false, 1101 get label() { 1102 return label(); 1103 }, 1104 1105 get loop() { 1106 return $$props.loop; 1107 }, 1108 interactive: false, 1109 get upload() { 1110 return $$props.upload; 1111 }, 1112 1113 get i18n() { 1114 return $$props.i18n; 1115 }, 1116 1117 get playback_position() { 1118 return playback_position(); 1119 }, 1120 1121 set playback_position($$value) { 1122 playback_position($$value); 1123 } 1124 }); 1125 } 1126 }); 1127 1128 var div = sibling(node_2, 2); 1129 var node_3 = child(div); 1130 1131 { 1132 let $0 = user_derived(() => buttons() ?? ["download", "share"]); 1133 1134 IconButtonWrapper(node_3, { 1135 get display_top_corner() { 1136 return display_icon_button_wrapper_top_corner(); 1137 }, 1138 1139 get buttons() { 1140 return get($0); 1141 }, 1142 1143 get on_custom_button_click() { 1144 return on_custom_button_click(); 1145 }, 1146 1147 children: ($$anchor, $$slotProps) => { 1148 var fragment_5 = root_5(); 1149 var node_4 = first_child(fragment_5); 1150 1151 { 1152 var consequent_1 = ($$anchor) => { 1153 { 1154 let $0 = user_derived(() => value().is_stream 1155 ? value().url?.replace("playlist.m3u8", "playlist-file") 1156 : value().url); 1157 1158 let $1 = user_derived(() => value().orig_name || value().path); 1159 1160 DownloadLink($$anchor, { 1161 get href() { 1162 return get($0); 1163 }, 1164 1165 get download() { 1166 return get($1); 1167 }, 1168 1169 children: ($$anchor, $$slotProps) => { 1170 IconButton($$anchor, { 1171 get Icon() { 1172 return Download; 1173 }, 1174 label: 'Download' 1175 }); 1176 }, 1177 $$slots: { default: true } 1178 }); 1179 } 1180 }; 1181 1182 if_block(node_4, ($$render) => { 1183 if (buttons()?.some((btn) => typeof btn === "string" && btn === "download")) $$render(consequent_1); 1184 }); 1185 } 1186 1187 var node_5 = sibling(node_4, 2); 1188 1189 { 1190 var consequent_2 = ($$anchor) => { 1191 ShareButton($$anchor, { 1192 get i18n() { 1193 return $$props.i18n; 1194 },
1195 onerror: (detail) => $$props.onerror?.(detail), 1196 onshare: (detail) => $$props.onshare?.(detail), 1197 get value() { 1198 return value(); 1199 }, 1200 1201 formatter: async (value) => { 1202 if (!value) return ""; 1203 1204 let url = await uploadToHuggingFace(value.data); 1205 1206 return url; 1207 } 1208 }); 1209 }; 1210 1211 if_block(node_5, ($$render) => { 1212 if (buttons()?.some((btn) => typeof btn === "string" && btn === "share")) $$render(consequent_2); 1213 }); 1214 } 1215 1216 append($$anchor, fragment_5); 1217 }, 1218 $$slots: { default: true } 1219 }); 1220 } 1221 1222 reset(div); 1223 append($$anchor, fragment_3); 1224 }; 1225 1226 if_block(node_1, ($$render) => { 1227 if (!value() || value().url === undefined) $$render(consequent); else $$render(alternate, false); 1228 }); 1229 } 1230 1231 append($$anchor, fragment); 1232 pop(); 1233} 1234 1235const VideoPreview$1 = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({ 1236 __proto__: null, 1237 default: VideoPreview 1238}, Symbol.toStringTag, { value: 'Module' })); 1239 1240export { Player as P, VideoPreview as V, VideoPreview$1 as a }; 1241//# sourceMappingURL=VideoPreview-B9h4wUga.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.