stream-chat-react 14.0.0-beta.7 → 14.0.0
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.
- package/dist/cjs/{WithAudioPlayback.83ba0e35.js → WithAudioPlayback.d26afa91.js} +1012 -986
- package/dist/cjs/WithAudioPlayback.d26afa91.js.map +1 -0
- package/dist/cjs/emojis.js +1 -1
- package/dist/cjs/index.js +2424 -2138
- package/dist/cjs/index.js.map +1 -1
- package/dist/css/index.css +1412 -1130
- package/dist/css/index.css.map +1 -1
- package/dist/es/{WithAudioPlayback.21b7f35a.mjs → WithAudioPlayback.9b779236.mjs} +1197 -1171
- package/dist/es/WithAudioPlayback.9b779236.mjs.map +1 -0
- package/dist/es/emojis.mjs +1 -1
- package/dist/es/index.mjs +2476 -2190
- package/dist/es/index.mjs.map +1 -1
- package/dist/types/components/Attachment/Audio.d.ts.map +1 -1
- package/dist/types/components/Attachment/FileAttachment.d.ts.map +1 -1
- package/dist/types/components/Attachment/components/DownloadButton.d.ts +12 -3
- package/dist/types/components/Attachment/components/DownloadButton.d.ts.map +1 -1
- package/dist/types/components/AudioPlayback/plugins/AudioPlayerNotificationsPlugin.d.ts.map +1 -1
- package/dist/types/components/ChannelListItem/ChannelListItemActionButtons.defaults.d.ts.map +1 -1
- package/dist/types/components/ChannelListItem/utils.d.ts.map +1 -1
- package/dist/types/components/Chat/Chat.d.ts.map +1 -1
- package/dist/types/components/Dialog/components/ContextMenu.d.ts +3 -1
- package/dist/types/components/Dialog/components/ContextMenu.d.ts.map +1 -1
- package/dist/types/components/Dialog/service/DialogPortal.d.ts.map +1 -1
- package/dist/types/components/FileIcon/FileIcon.d.ts +1 -3
- package/dist/types/components/FileIcon/FileIcon.d.ts.map +1 -1
- package/dist/types/components/FileIcon/FileIconSet.d.ts +10 -10
- package/dist/types/components/FileIcon/FileIconSet.d.ts.map +1 -1
- package/dist/types/components/Form/NumericInput.d.ts.map +1 -1
- package/dist/types/components/Form/TextInput.d.ts +15 -8
- package/dist/types/components/Form/TextInput.d.ts.map +1 -1
- package/dist/types/components/Form/index.d.ts +1 -0
- package/dist/types/components/Form/index.d.ts.map +1 -1
- package/dist/types/components/Icons/icons.d.ts +4 -0
- package/dist/types/components/Icons/icons.d.ts.map +1 -1
- package/dist/types/components/Message/MessageUI.d.ts.map +1 -1
- package/dist/types/components/Message/utils.d.ts +2 -0
- package/dist/types/components/Message/utils.d.ts.map +1 -1
- package/dist/types/components/MessageActions/MessageActions.d.ts.map +1 -1
- package/dist/types/components/MessageActions/MessageActions.defaults.d.ts.map +1 -1
- package/dist/types/components/MessageActions/downloadUtils.d.ts +25 -0
- package/dist/types/components/MessageActions/downloadUtils.d.ts.map +1 -0
- package/dist/types/components/MessageActions/hooks/useBaseMessageActionSetFilter.d.ts +1 -1
- package/dist/types/components/MessageActions/hooks/useBaseMessageActionSetFilter.d.ts.map +1 -1
- package/dist/types/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.d.ts +2 -2
- package/dist/types/components/MessageList/hooks/MessageList/useFloatingDateSeparatorMessageList.d.ts.map +1 -1
- package/dist/types/components/MessageList/hooks/VirtualizedMessageList/useFloatingDateSeparator.d.ts.map +1 -1
- package/dist/types/components/Poll/PollCreationDialog/OptionFieldSet.d.ts.map +1 -1
- package/dist/types/components/Reactions/ReactionSelector.d.ts +2 -0
- package/dist/types/components/Reactions/ReactionSelector.d.ts.map +1 -1
- package/dist/types/components/SummarizedMessagePreview/hooks/useLatestMessagePreview.d.ts.map +1 -1
- package/dist/types/components/Tooltip/Tooltip.d.ts +4 -2
- package/dist/types/components/Tooltip/Tooltip.d.ts.map +1 -1
- package/dist/types/i18n/Streami18n.d.ts +3 -4
- package/dist/types/i18n/Streami18n.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/cjs/WithAudioPlayback.83ba0e35.js.map +0 -1
- package/dist/es/WithAudioPlayback.21b7f35a.mjs.map +0 -1
|
@@ -390,715 +390,6 @@ const useTypingContext = (componentName) => {
|
|
|
390
390
|
}
|
|
391
391
|
return contextValue;
|
|
392
392
|
};
|
|
393
|
-
const DEFAULT_PLAYBACK_RATES = [1, 1.5, 2];
|
|
394
|
-
const isSeekable = (audioElement) => !(audioElement.duration === Infinity || isNaN(audioElement.duration));
|
|
395
|
-
const defaultRegisterAudioPlayerError = ({
|
|
396
|
-
error
|
|
397
|
-
} = {}) => {
|
|
398
|
-
if (!error) return;
|
|
399
|
-
console.error("[AUDIO PLAYER]", error);
|
|
400
|
-
};
|
|
401
|
-
const elementIsPlaying = (audioElement) => audioElement && !(audioElement.paused || audioElement.ended);
|
|
402
|
-
class AudioPlayer {
|
|
403
|
-
constructor({
|
|
404
|
-
durationSeconds,
|
|
405
|
-
fileSize,
|
|
406
|
-
id,
|
|
407
|
-
mimeType,
|
|
408
|
-
playbackRates: customPlaybackRates,
|
|
409
|
-
plugins,
|
|
410
|
-
pool,
|
|
411
|
-
src,
|
|
412
|
-
title,
|
|
413
|
-
waveformData
|
|
414
|
-
}) {
|
|
415
|
-
this._plugins = /* @__PURE__ */ new Map();
|
|
416
|
-
this.playTimeout = void 0;
|
|
417
|
-
this.unsubscribeEventListeners = null;
|
|
418
|
-
this._disposed = false;
|
|
419
|
-
this._metadataProbe = null;
|
|
420
|
-
this._restoringPosition = false;
|
|
421
|
-
this._removalTimeout = void 0;
|
|
422
|
-
this.setDurationSeconds = (durationSeconds2) => {
|
|
423
|
-
this._data.durationSeconds = durationSeconds2;
|
|
424
|
-
this.state.partialNext({ durationSeconds: durationSeconds2 });
|
|
425
|
-
};
|
|
426
|
-
this.setPlaybackStartSafetyTimeout = () => {
|
|
427
|
-
clearTimeout(this.playTimeout);
|
|
428
|
-
this.playTimeout = setTimeout(() => {
|
|
429
|
-
if (!this.elementRef) return;
|
|
430
|
-
try {
|
|
431
|
-
this.elementRef.pause();
|
|
432
|
-
this.state.partialNext({ isPlaying: false });
|
|
433
|
-
} catch (e) {
|
|
434
|
-
this.registerError({ errCode: "failed-to-start" });
|
|
435
|
-
}
|
|
436
|
-
}, 2e3);
|
|
437
|
-
};
|
|
438
|
-
this.updateDurationFromElement = (element) => {
|
|
439
|
-
const duration = element.duration;
|
|
440
|
-
if (typeof duration !== "number" || isNaN(duration) || !isFinite(duration) || duration <= 0) {
|
|
441
|
-
return;
|
|
442
|
-
}
|
|
443
|
-
this.setDurationSeconds(duration);
|
|
444
|
-
};
|
|
445
|
-
this.clearMetadataProbe = () => {
|
|
446
|
-
const probe = this._metadataProbe;
|
|
447
|
-
this._metadataProbe = null;
|
|
448
|
-
this._metadataProbePromise = void 0;
|
|
449
|
-
if (!probe) return;
|
|
450
|
-
try {
|
|
451
|
-
probe.pause();
|
|
452
|
-
} catch {
|
|
453
|
-
}
|
|
454
|
-
probe.removeAttribute("src");
|
|
455
|
-
try {
|
|
456
|
-
probe.load();
|
|
457
|
-
} catch {
|
|
458
|
-
}
|
|
459
|
-
};
|
|
460
|
-
this.preloadMetadata = () => {
|
|
461
|
-
if (this._disposed || this.durationSeconds != null || !this.src || this._metadataProbePromise || typeof document === "undefined") {
|
|
462
|
-
return;
|
|
463
|
-
}
|
|
464
|
-
const probe = document.createElement("audio");
|
|
465
|
-
probe.preload = "metadata";
|
|
466
|
-
this._metadataProbe = probe;
|
|
467
|
-
this._metadataProbePromise = new Promise((resolve) => {
|
|
468
|
-
const cleanup = () => {
|
|
469
|
-
probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
470
|
-
probe.removeEventListener("error", handleError);
|
|
471
|
-
if (this._metadataProbe === probe) {
|
|
472
|
-
this.clearMetadataProbe();
|
|
473
|
-
} else {
|
|
474
|
-
this._metadataProbePromise = void 0;
|
|
475
|
-
}
|
|
476
|
-
resolve();
|
|
477
|
-
};
|
|
478
|
-
const handleLoadedMetadata = () => {
|
|
479
|
-
this.updateDurationFromElement(probe);
|
|
480
|
-
cleanup();
|
|
481
|
-
};
|
|
482
|
-
const handleError = () => {
|
|
483
|
-
cleanup();
|
|
484
|
-
};
|
|
485
|
-
probe.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
|
|
486
|
-
probe.addEventListener("error", handleError, { once: true });
|
|
487
|
-
probe.src = this.src;
|
|
488
|
-
try {
|
|
489
|
-
probe.load();
|
|
490
|
-
} catch {
|
|
491
|
-
cleanup();
|
|
492
|
-
}
|
|
493
|
-
});
|
|
494
|
-
};
|
|
495
|
-
this.clearPlaybackStartSafetyTimeout = () => {
|
|
496
|
-
if (!this.elementRef) return;
|
|
497
|
-
clearTimeout(this.playTimeout);
|
|
498
|
-
this.playTimeout = void 0;
|
|
499
|
-
};
|
|
500
|
-
this.clearPendingLoadedMeta = () => {
|
|
501
|
-
const pending = this._pendingLoadedMeta;
|
|
502
|
-
if (pending?.element && pending.onLoaded) {
|
|
503
|
-
pending.element.removeEventListener("loadedmetadata", pending.onLoaded);
|
|
504
|
-
}
|
|
505
|
-
this._pendingLoadedMeta = void 0;
|
|
506
|
-
};
|
|
507
|
-
this.restoreSavedPosition = (elementRef) => {
|
|
508
|
-
const saved = this.secondsElapsed;
|
|
509
|
-
if (!saved || saved <= 0) return;
|
|
510
|
-
const apply = () => {
|
|
511
|
-
const duration = elementRef.duration;
|
|
512
|
-
const clamped = typeof duration === "number" && !isNaN(duration) && isFinite(duration) ? Math.min(saved, duration) : saved;
|
|
513
|
-
try {
|
|
514
|
-
if (elementRef.currentTime === clamped) return;
|
|
515
|
-
elementRef.currentTime = clamped;
|
|
516
|
-
this.setSecondsElapsed(clamped);
|
|
517
|
-
} catch {
|
|
518
|
-
}
|
|
519
|
-
};
|
|
520
|
-
if (elementRef.readyState < 1) {
|
|
521
|
-
this.clearPendingLoadedMeta();
|
|
522
|
-
this._restoringPosition = true;
|
|
523
|
-
const onLoaded = () => {
|
|
524
|
-
if (this._pendingLoadedMeta?.onLoaded !== onLoaded) return;
|
|
525
|
-
this._pendingLoadedMeta = void 0;
|
|
526
|
-
if (this.elementRef !== elementRef) {
|
|
527
|
-
this._restoringPosition = false;
|
|
528
|
-
return;
|
|
529
|
-
}
|
|
530
|
-
apply();
|
|
531
|
-
this._restoringPosition = false;
|
|
532
|
-
};
|
|
533
|
-
elementRef.addEventListener("loadedmetadata", onLoaded, { once: true });
|
|
534
|
-
this._pendingLoadedMeta = { element: elementRef, onLoaded };
|
|
535
|
-
} else {
|
|
536
|
-
this._restoringPosition = true;
|
|
537
|
-
apply();
|
|
538
|
-
this._restoringPosition = false;
|
|
539
|
-
}
|
|
540
|
-
};
|
|
541
|
-
this.elementIsReady = () => {
|
|
542
|
-
if (this._elementIsReadyPromise) return this._elementIsReadyPromise;
|
|
543
|
-
this._elementIsReadyPromise = new Promise((resolve) => {
|
|
544
|
-
if (!this.elementRef) return resolve(false);
|
|
545
|
-
const element = this.elementRef;
|
|
546
|
-
const handleLoaded = () => {
|
|
547
|
-
element.removeEventListener("loadedmetadata", handleLoaded);
|
|
548
|
-
resolve(element.readyState > 0);
|
|
549
|
-
};
|
|
550
|
-
element.addEventListener("loadedmetadata", handleLoaded);
|
|
551
|
-
});
|
|
552
|
-
return this._elementIsReadyPromise;
|
|
553
|
-
};
|
|
554
|
-
this.setRef = (elementRef) => {
|
|
555
|
-
if (elementIsPlaying(this.elementRef)) {
|
|
556
|
-
this.releaseElement({ resetState: false });
|
|
557
|
-
}
|
|
558
|
-
this.clearPendingLoadedMeta();
|
|
559
|
-
this.clearMetadataProbe();
|
|
560
|
-
this._restoringPosition = false;
|
|
561
|
-
this._elementIsReadyPromise = void 0;
|
|
562
|
-
this.state.partialNext({ elementRef });
|
|
563
|
-
if (elementRef) {
|
|
564
|
-
this.registerSubscriptions();
|
|
565
|
-
}
|
|
566
|
-
};
|
|
567
|
-
this.setSecondsElapsed = (secondsElapsed) => {
|
|
568
|
-
const duration = this.elementRef?.duration ?? this.durationSeconds;
|
|
569
|
-
this.state.partialNext({
|
|
570
|
-
progressPercent: duration && secondsElapsed ? secondsElapsed / duration * 100 : 0,
|
|
571
|
-
secondsElapsed
|
|
572
|
-
});
|
|
573
|
-
};
|
|
574
|
-
this.canPlayMimeType = (mimeType2) => {
|
|
575
|
-
if (!mimeType2) return false;
|
|
576
|
-
if (this.elementRef) return !!this.elementRef.canPlayType(mimeType2);
|
|
577
|
-
return !!new Audio().canPlayType(mimeType2);
|
|
578
|
-
};
|
|
579
|
-
this.play = async (params) => {
|
|
580
|
-
if (this._disposed) return;
|
|
581
|
-
const elementRef = this.ensureElementRef();
|
|
582
|
-
if (elementIsPlaying(this.elementRef)) {
|
|
583
|
-
if (this.isPlaying) return;
|
|
584
|
-
this.state.partialNext({ isPlaying: true });
|
|
585
|
-
return;
|
|
586
|
-
}
|
|
587
|
-
const { currentPlaybackRate, playbackRates: playbackRates2 } = {
|
|
588
|
-
currentPlaybackRate: this.currentPlaybackRate,
|
|
589
|
-
playbackRates: this.playbackRates,
|
|
590
|
-
...params
|
|
591
|
-
};
|
|
592
|
-
if (!this.canPlayRecord) {
|
|
593
|
-
this.registerError({ errCode: "not-playable" });
|
|
594
|
-
return;
|
|
595
|
-
}
|
|
596
|
-
this.restoreSavedPosition(elementRef);
|
|
597
|
-
elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
|
|
598
|
-
this.setPlaybackStartSafetyTimeout();
|
|
599
|
-
try {
|
|
600
|
-
await elementRef.play();
|
|
601
|
-
this.state.partialNext({
|
|
602
|
-
currentPlaybackRate,
|
|
603
|
-
isPlaying: true,
|
|
604
|
-
playbackRates: playbackRates2
|
|
605
|
-
});
|
|
606
|
-
this._pool.setActiveAudioPlayer(this);
|
|
607
|
-
} catch (e) {
|
|
608
|
-
this.registerError({ error: e });
|
|
609
|
-
this.state.partialNext({ isPlaying: false });
|
|
610
|
-
} finally {
|
|
611
|
-
this.clearPlaybackStartSafetyTimeout();
|
|
612
|
-
}
|
|
613
|
-
};
|
|
614
|
-
this.pause = () => {
|
|
615
|
-
if (!elementIsPlaying(this.elementRef)) return;
|
|
616
|
-
this.clearPlaybackStartSafetyTimeout();
|
|
617
|
-
this.elementRef.pause();
|
|
618
|
-
this.state.partialNext({ isPlaying: false });
|
|
619
|
-
};
|
|
620
|
-
this.stop = () => {
|
|
621
|
-
this.pause();
|
|
622
|
-
this.state.partialNext({ isPlaying: false });
|
|
623
|
-
this.setSecondsElapsed(0);
|
|
624
|
-
if (this.elementRef) this.elementRef.currentTime = 0;
|
|
625
|
-
};
|
|
626
|
-
this.togglePlay = async () => this.isPlaying ? this.pause() : await this.play();
|
|
627
|
-
this.increasePlaybackRate = () => {
|
|
628
|
-
let currentPlaybackRateIndex = this.state.getLatestValue().playbackRates.findIndex((rate) => rate === this.currentPlaybackRate);
|
|
629
|
-
if (currentPlaybackRateIndex === -1) {
|
|
630
|
-
currentPlaybackRateIndex = 0;
|
|
631
|
-
}
|
|
632
|
-
const nextIndex = currentPlaybackRateIndex === this.playbackRates.length - 1 ? 0 : currentPlaybackRateIndex + 1;
|
|
633
|
-
const currentPlaybackRate = this.playbackRates[nextIndex];
|
|
634
|
-
this.state.partialNext({ currentPlaybackRate });
|
|
635
|
-
if (this.elementRef) {
|
|
636
|
-
this.elementRef.playbackRate = currentPlaybackRate;
|
|
637
|
-
}
|
|
638
|
-
};
|
|
639
|
-
this.seek = throttle(async ({ clientX, currentTarget }) => {
|
|
640
|
-
let element = this.elementRef;
|
|
641
|
-
if (!this.elementRef) {
|
|
642
|
-
element = this.ensureElementRef();
|
|
643
|
-
const isReady = await this.elementIsReady();
|
|
644
|
-
if (!isReady) return;
|
|
645
|
-
}
|
|
646
|
-
if (!currentTarget || !element) return;
|
|
647
|
-
if (!isSeekable(element)) {
|
|
648
|
-
this.registerError({ errCode: "seek-not-supported" });
|
|
649
|
-
return;
|
|
650
|
-
}
|
|
651
|
-
const { width, x } = currentTarget.getBoundingClientRect();
|
|
652
|
-
const ratio = (clientX - x) / width;
|
|
653
|
-
if (ratio > 1 || ratio < 0) return;
|
|
654
|
-
const currentTime = ratio * element.duration;
|
|
655
|
-
this.setSecondsElapsed(currentTime);
|
|
656
|
-
element.currentTime = currentTime;
|
|
657
|
-
}, 16);
|
|
658
|
-
this.registerError = (params) => {
|
|
659
|
-
defaultRegisterAudioPlayerError(params);
|
|
660
|
-
this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));
|
|
661
|
-
};
|
|
662
|
-
this.requestRemoval = () => {
|
|
663
|
-
this._disposed = true;
|
|
664
|
-
this.cancelScheduledRemoval();
|
|
665
|
-
this.clearPendingLoadedMeta();
|
|
666
|
-
this.clearMetadataProbe();
|
|
667
|
-
this._restoringPosition = false;
|
|
668
|
-
this.releaseElement({ resetState: true });
|
|
669
|
-
this.unsubscribeEventListeners?.();
|
|
670
|
-
this.unsubscribeEventListeners = null;
|
|
671
|
-
this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));
|
|
672
|
-
this._pool.deregister(this.id);
|
|
673
|
-
};
|
|
674
|
-
this.cancelScheduledRemoval = () => {
|
|
675
|
-
clearTimeout(this._removalTimeout);
|
|
676
|
-
this._removalTimeout = void 0;
|
|
677
|
-
};
|
|
678
|
-
this.scheduleRemoval = (ms = 0) => {
|
|
679
|
-
this.cancelScheduledRemoval();
|
|
680
|
-
this._removalTimeout = setTimeout(() => {
|
|
681
|
-
if (this.disposed) return;
|
|
682
|
-
this.requestRemoval();
|
|
683
|
-
}, ms);
|
|
684
|
-
};
|
|
685
|
-
this.releaseElementForHandoff = () => {
|
|
686
|
-
if (!this.elementRef) return;
|
|
687
|
-
this.releaseElement({ resetState: false });
|
|
688
|
-
this.unsubscribeEventListeners?.();
|
|
689
|
-
this.unsubscribeEventListeners = null;
|
|
690
|
-
};
|
|
691
|
-
this.registerSubscriptions = () => {
|
|
692
|
-
this.unsubscribeEventListeners?.();
|
|
693
|
-
const audioElement = this.elementRef;
|
|
694
|
-
if (!audioElement) return;
|
|
695
|
-
const handleEnded = () => {
|
|
696
|
-
if (audioElement) {
|
|
697
|
-
this.updateDurationFromElement(audioElement);
|
|
698
|
-
}
|
|
699
|
-
this.stop();
|
|
700
|
-
};
|
|
701
|
-
const handleError = (e) => {
|
|
702
|
-
const audio = e.currentTarget;
|
|
703
|
-
const state = { isPlaying: false };
|
|
704
|
-
if (!audio?.error?.code) {
|
|
705
|
-
this.state.partialNext(state);
|
|
706
|
-
return;
|
|
707
|
-
}
|
|
708
|
-
if (audio.error.code === 4) {
|
|
709
|
-
state.canPlayRecord = false;
|
|
710
|
-
this.state.partialNext(state);
|
|
711
|
-
}
|
|
712
|
-
const errorMsg = [
|
|
713
|
-
void 0,
|
|
714
|
-
"MEDIA_ERR_ABORTED: fetch aborted by user",
|
|
715
|
-
"MEDIA_ERR_NETWORK: network failed while fetching",
|
|
716
|
-
"MEDIA_ERR_DECODE: audio fetched but couldn’t decode",
|
|
717
|
-
"MEDIA_ERR_SRC_NOT_SUPPORTED: source not supported"
|
|
718
|
-
][audio?.error?.code];
|
|
719
|
-
if (!errorMsg) return;
|
|
720
|
-
defaultRegisterAudioPlayerError({ error: new Error(errorMsg + ` (${audio.src})`) });
|
|
721
|
-
};
|
|
722
|
-
const handleTimeupdate = () => {
|
|
723
|
-
const t = audioElement?.currentTime ?? 0;
|
|
724
|
-
if (this._restoringPosition && t === 0) return;
|
|
725
|
-
if (!this.isPlaying && t === 0 && this.secondsElapsed > 0) return;
|
|
726
|
-
this.setSecondsElapsed(t);
|
|
727
|
-
};
|
|
728
|
-
const handleLoadedMetadata = () => {
|
|
729
|
-
if (audioElement) {
|
|
730
|
-
this.updateDurationFromElement(audioElement);
|
|
731
|
-
}
|
|
732
|
-
};
|
|
733
|
-
audioElement.addEventListener("ended", handleEnded);
|
|
734
|
-
audioElement.addEventListener("error", handleError);
|
|
735
|
-
audioElement.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
736
|
-
audioElement.addEventListener("timeupdate", handleTimeupdate);
|
|
737
|
-
this.unsubscribeEventListeners = () => {
|
|
738
|
-
audioElement.pause();
|
|
739
|
-
audioElement.removeEventListener("ended", handleEnded);
|
|
740
|
-
audioElement.removeEventListener("error", handleError);
|
|
741
|
-
audioElement.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
742
|
-
audioElement.removeEventListener("timeupdate", handleTimeupdate);
|
|
743
|
-
};
|
|
744
|
-
};
|
|
745
|
-
this._data = {
|
|
746
|
-
durationSeconds,
|
|
747
|
-
fileSize,
|
|
748
|
-
id,
|
|
749
|
-
mimeType,
|
|
750
|
-
src,
|
|
751
|
-
title,
|
|
752
|
-
waveformData
|
|
753
|
-
};
|
|
754
|
-
this._pool = pool;
|
|
755
|
-
this.setPlugins(() => plugins ?? []);
|
|
756
|
-
const playbackRates = customPlaybackRates?.length ? customPlaybackRates : DEFAULT_PLAYBACK_RATES;
|
|
757
|
-
const canPlayRecord = mimeType ? !!new Audio().canPlayType(mimeType) : true;
|
|
758
|
-
this.state = new streamChat.StateStore({
|
|
759
|
-
canPlayRecord,
|
|
760
|
-
currentPlaybackRate: playbackRates[0],
|
|
761
|
-
durationSeconds,
|
|
762
|
-
elementRef: null,
|
|
763
|
-
isPlaying: false,
|
|
764
|
-
playbackError: null,
|
|
765
|
-
playbackRates,
|
|
766
|
-
progressPercent: 0,
|
|
767
|
-
secondsElapsed: 0
|
|
768
|
-
});
|
|
769
|
-
this.plugins.forEach((p) => p.onInit?.({ player: this }));
|
|
770
|
-
this.preloadMetadata();
|
|
771
|
-
}
|
|
772
|
-
get plugins() {
|
|
773
|
-
return Array.from(this._plugins.values());
|
|
774
|
-
}
|
|
775
|
-
get canPlayRecord() {
|
|
776
|
-
return this.state.getLatestValue().canPlayRecord;
|
|
777
|
-
}
|
|
778
|
-
get elementRef() {
|
|
779
|
-
return this.state.getLatestValue().elementRef;
|
|
780
|
-
}
|
|
781
|
-
get isPlaying() {
|
|
782
|
-
return this.state.getLatestValue().isPlaying;
|
|
783
|
-
}
|
|
784
|
-
get currentPlaybackRate() {
|
|
785
|
-
return this.state.getLatestValue().currentPlaybackRate;
|
|
786
|
-
}
|
|
787
|
-
get playbackRates() {
|
|
788
|
-
return this.state.getLatestValue().playbackRates;
|
|
789
|
-
}
|
|
790
|
-
get durationSeconds() {
|
|
791
|
-
return this.state.getLatestValue().durationSeconds;
|
|
792
|
-
}
|
|
793
|
-
get fileSize() {
|
|
794
|
-
return this._data.fileSize;
|
|
795
|
-
}
|
|
796
|
-
get id() {
|
|
797
|
-
return this._data.id;
|
|
798
|
-
}
|
|
799
|
-
get src() {
|
|
800
|
-
return this._data.src;
|
|
801
|
-
}
|
|
802
|
-
get mimeType() {
|
|
803
|
-
return this._data.mimeType;
|
|
804
|
-
}
|
|
805
|
-
get title() {
|
|
806
|
-
return this._data.title;
|
|
807
|
-
}
|
|
808
|
-
get waveformData() {
|
|
809
|
-
return this._data.waveformData;
|
|
810
|
-
}
|
|
811
|
-
get secondsElapsed() {
|
|
812
|
-
return this.state.getLatestValue().secondsElapsed;
|
|
813
|
-
}
|
|
814
|
-
get progressPercent() {
|
|
815
|
-
return this.state.getLatestValue().progressPercent;
|
|
816
|
-
}
|
|
817
|
-
get disposed() {
|
|
818
|
-
return this._disposed;
|
|
819
|
-
}
|
|
820
|
-
ensureElementRef() {
|
|
821
|
-
if (this._disposed) {
|
|
822
|
-
throw new Error("AudioPlayer is disposed");
|
|
823
|
-
}
|
|
824
|
-
if (!this.elementRef) {
|
|
825
|
-
const el = this._pool.acquireElement({
|
|
826
|
-
ownerId: this.id,
|
|
827
|
-
src: this.src
|
|
828
|
-
});
|
|
829
|
-
this.setRef(el);
|
|
830
|
-
}
|
|
831
|
-
return this.elementRef;
|
|
832
|
-
}
|
|
833
|
-
setDescriptor(descriptor) {
|
|
834
|
-
const previousSrc = this.src;
|
|
835
|
-
this._data = { ...this._data, ...descriptor };
|
|
836
|
-
if (descriptor.src !== previousSrc && this.elementRef) {
|
|
837
|
-
this.elementRef.src = descriptor.src;
|
|
838
|
-
}
|
|
839
|
-
if (descriptor.src && descriptor.src !== previousSrc) {
|
|
840
|
-
this.clearMetadataProbe();
|
|
841
|
-
if (descriptor.durationSeconds == null) {
|
|
842
|
-
this.setDurationSeconds(void 0);
|
|
843
|
-
this.preloadMetadata();
|
|
844
|
-
} else {
|
|
845
|
-
this.setDurationSeconds(descriptor.durationSeconds);
|
|
846
|
-
}
|
|
847
|
-
return;
|
|
848
|
-
}
|
|
849
|
-
if (descriptor.durationSeconds != null) {
|
|
850
|
-
this.setDurationSeconds(descriptor.durationSeconds);
|
|
851
|
-
}
|
|
852
|
-
}
|
|
853
|
-
releaseElement({ resetState }) {
|
|
854
|
-
this.clearPendingLoadedMeta();
|
|
855
|
-
this.clearMetadataProbe();
|
|
856
|
-
this._restoringPosition = false;
|
|
857
|
-
if (resetState) {
|
|
858
|
-
this.stop();
|
|
859
|
-
} else {
|
|
860
|
-
this.state.partialNext({ isPlaying: false });
|
|
861
|
-
if (this.elementRef) {
|
|
862
|
-
try {
|
|
863
|
-
this.elementRef.pause();
|
|
864
|
-
} catch {
|
|
865
|
-
}
|
|
866
|
-
}
|
|
867
|
-
}
|
|
868
|
-
if (this.elementRef) {
|
|
869
|
-
this._pool.releaseElement(this.id);
|
|
870
|
-
this.setRef(null);
|
|
871
|
-
}
|
|
872
|
-
}
|
|
873
|
-
setPlugins(setter) {
|
|
874
|
-
this._plugins = setter(this.plugins).reduce((acc, plugin) => {
|
|
875
|
-
if (plugin.id) {
|
|
876
|
-
acc.set(plugin.id, plugin);
|
|
877
|
-
}
|
|
878
|
-
return acc;
|
|
879
|
-
}, /* @__PURE__ */ new Map());
|
|
880
|
-
}
|
|
881
|
-
}
|
|
882
|
-
class AudioPlayerPool {
|
|
883
|
-
constructor(config) {
|
|
884
|
-
this.state = new streamChat.StateStore({
|
|
885
|
-
activeAudioPlayer: null
|
|
886
|
-
});
|
|
887
|
-
this.pool = /* @__PURE__ */ new Map();
|
|
888
|
-
this.audios = /* @__PURE__ */ new Map();
|
|
889
|
-
this.sharedAudio = null;
|
|
890
|
-
this.sharedOwnerId = null;
|
|
891
|
-
this.getOrAdd = (params) => {
|
|
892
|
-
const { playbackRates, plugins, ...descriptor } = params;
|
|
893
|
-
let player = this.pool.get(params.id);
|
|
894
|
-
if (player) {
|
|
895
|
-
if (!player.disposed) {
|
|
896
|
-
player.setDescriptor(descriptor);
|
|
897
|
-
return player;
|
|
898
|
-
}
|
|
899
|
-
this.deregister(params.id);
|
|
900
|
-
}
|
|
901
|
-
player = new AudioPlayer({
|
|
902
|
-
playbackRates,
|
|
903
|
-
plugins,
|
|
904
|
-
...descriptor,
|
|
905
|
-
pool: this
|
|
906
|
-
});
|
|
907
|
-
this.pool.set(params.id, player);
|
|
908
|
-
return player;
|
|
909
|
-
};
|
|
910
|
-
this.acquireElement = ({ ownerId, src }) => {
|
|
911
|
-
if (!this.allowConcurrentPlayback) {
|
|
912
|
-
if (!this.sharedAudio) {
|
|
913
|
-
this.sharedAudio = new Audio();
|
|
914
|
-
}
|
|
915
|
-
if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {
|
|
916
|
-
const previous = this.pool.get(this.sharedOwnerId);
|
|
917
|
-
previous?.pause();
|
|
918
|
-
previous?.releaseElementForHandoff();
|
|
919
|
-
}
|
|
920
|
-
this.sharedOwnerId = ownerId;
|
|
921
|
-
if (this.sharedAudio.src !== src) {
|
|
922
|
-
this.sharedAudio.src = src;
|
|
923
|
-
}
|
|
924
|
-
return this.sharedAudio;
|
|
925
|
-
}
|
|
926
|
-
let audio = this.audios.get(ownerId);
|
|
927
|
-
if (!audio) {
|
|
928
|
-
audio = new Audio();
|
|
929
|
-
this.audios.set(ownerId, audio);
|
|
930
|
-
}
|
|
931
|
-
if (audio.src !== src) {
|
|
932
|
-
audio.src = src;
|
|
933
|
-
}
|
|
934
|
-
return audio;
|
|
935
|
-
};
|
|
936
|
-
this.releaseElement = (ownerId) => {
|
|
937
|
-
if (!this.allowConcurrentPlayback) {
|
|
938
|
-
if (this.sharedOwnerId !== ownerId) return;
|
|
939
|
-
const el2 = this.sharedAudio;
|
|
940
|
-
if (el2) {
|
|
941
|
-
try {
|
|
942
|
-
el2.pause();
|
|
943
|
-
} catch {
|
|
944
|
-
}
|
|
945
|
-
el2.removeAttribute("src");
|
|
946
|
-
el2.load();
|
|
947
|
-
}
|
|
948
|
-
this.sharedOwnerId = null;
|
|
949
|
-
return;
|
|
950
|
-
}
|
|
951
|
-
const el = this.audios.get(ownerId);
|
|
952
|
-
if (!el) return;
|
|
953
|
-
try {
|
|
954
|
-
el.pause();
|
|
955
|
-
} catch {
|
|
956
|
-
}
|
|
957
|
-
el.removeAttribute("src");
|
|
958
|
-
el.load();
|
|
959
|
-
this.audios.delete(ownerId);
|
|
960
|
-
};
|
|
961
|
-
this.setActiveAudioPlayer = (activeAudioPlayer) => {
|
|
962
|
-
if (this.allowConcurrentPlayback) return;
|
|
963
|
-
this.state.partialNext({ activeAudioPlayer });
|
|
964
|
-
};
|
|
965
|
-
this.remove = (id) => {
|
|
966
|
-
const player = this.pool.get(id);
|
|
967
|
-
if (!player) return;
|
|
968
|
-
player.requestRemoval();
|
|
969
|
-
};
|
|
970
|
-
this.clear = () => {
|
|
971
|
-
this.players.forEach((player) => {
|
|
972
|
-
this.remove(player.id);
|
|
973
|
-
});
|
|
974
|
-
};
|
|
975
|
-
this.registerSubscriptions = () => {
|
|
976
|
-
this.players.forEach((p) => {
|
|
977
|
-
if (p.elementRef) {
|
|
978
|
-
p.registerSubscriptions();
|
|
979
|
-
}
|
|
980
|
-
});
|
|
981
|
-
};
|
|
982
|
-
this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;
|
|
983
|
-
}
|
|
984
|
-
get players() {
|
|
985
|
-
return Array.from(this.pool.values());
|
|
986
|
-
}
|
|
987
|
-
get activeAudioPlayer() {
|
|
988
|
-
return this.state.getLatestValue().activeAudioPlayer;
|
|
989
|
-
}
|
|
990
|
-
/** Removes the AudioPlayer instance from the pool of players */
|
|
991
|
-
deregister(id) {
|
|
992
|
-
if (this.pool.has(id)) {
|
|
993
|
-
this.pool.delete(id);
|
|
994
|
-
}
|
|
995
|
-
if (this.activeAudioPlayer?.id === id) {
|
|
996
|
-
this.setActiveAudioPlayer(null);
|
|
997
|
-
}
|
|
998
|
-
}
|
|
999
|
-
}
|
|
1000
|
-
const audioPlayerNotificationsPluginFactory = ({
|
|
1001
|
-
addNotification,
|
|
1002
|
-
panel = "channel",
|
|
1003
|
-
t
|
|
1004
|
-
}) => {
|
|
1005
|
-
const errors = {
|
|
1006
|
-
"failed-to-start": new Error(t("Failed to play the recording")),
|
|
1007
|
-
"not-playable": new Error(
|
|
1008
|
-
t("Recording format is not supported and cannot be reproduced")
|
|
1009
|
-
),
|
|
1010
|
-
"seek-not-supported": new Error(t("Cannot seek in the recording"))
|
|
1011
|
-
};
|
|
1012
|
-
return {
|
|
1013
|
-
id: "AudioPlayerNotificationsPlugin",
|
|
1014
|
-
onError: ({ errCode, error: e }) => {
|
|
1015
|
-
const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
|
|
1016
|
-
addNotification({
|
|
1017
|
-
emitter: "AudioPlayer",
|
|
1018
|
-
error,
|
|
1019
|
-
message: error.message,
|
|
1020
|
-
severity: "error",
|
|
1021
|
-
targetPanels: [panel],
|
|
1022
|
-
type: "browser:audio:playback:error"
|
|
1023
|
-
});
|
|
1024
|
-
}
|
|
1025
|
-
};
|
|
1026
|
-
};
|
|
1027
|
-
const NOTIFICATION_TARGET_PANELS = [
|
|
1028
|
-
"channel",
|
|
1029
|
-
"thread",
|
|
1030
|
-
"channel-list",
|
|
1031
|
-
"thread-list"
|
|
1032
|
-
];
|
|
1033
|
-
const isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
|
|
1034
|
-
const getNotificationTargetPanel = (notification) => {
|
|
1035
|
-
const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
|
|
1036
|
-
if (targetTag) {
|
|
1037
|
-
const candidate = targetTag.slice("target:".length);
|
|
1038
|
-
if (isNotificationTargetPanel(candidate)) return candidate;
|
|
1039
|
-
}
|
|
1040
|
-
const panel = notification.origin.context?.panel;
|
|
1041
|
-
return isNotificationTargetPanel(panel) ? panel : void 0;
|
|
1042
|
-
};
|
|
1043
|
-
const getNotificationTargetPanels = (notification) => {
|
|
1044
|
-
const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice("target:".length)).filter(
|
|
1045
|
-
(value) => isNotificationTargetPanel(value)
|
|
1046
|
-
);
|
|
1047
|
-
if (targetPanels.length > 0) {
|
|
1048
|
-
return Array.from(new Set(targetPanels));
|
|
1049
|
-
}
|
|
1050
|
-
const panel = notification.origin.context?.panel;
|
|
1051
|
-
return isNotificationTargetPanel(panel) ? [panel] : [];
|
|
1052
|
-
};
|
|
1053
|
-
const getNotificationTargetTag = (panel) => `target:${panel}`;
|
|
1054
|
-
const addNotificationTargetTag = (panel, tags) => {
|
|
1055
|
-
if (!panel) return tags ?? [];
|
|
1056
|
-
return Array.from(/* @__PURE__ */ new Set([getNotificationTargetTag(panel), ...tags ?? []]));
|
|
1057
|
-
};
|
|
1058
|
-
const isNotificationForPanel = (notification, panel, options) => {
|
|
1059
|
-
const explicitTargetPanels = getNotificationTargetPanels(notification);
|
|
1060
|
-
if (explicitTargetPanels.length > 0) {
|
|
1061
|
-
return explicitTargetPanels.includes(panel);
|
|
1062
|
-
}
|
|
1063
|
-
const resolvedPanel = options?.fallbackPanel ?? "channel";
|
|
1064
|
-
return resolvedPanel === panel;
|
|
1065
|
-
};
|
|
1066
|
-
const variantToClass = {
|
|
1067
|
-
danger: "str-chat__button--destructive",
|
|
1068
|
-
primary: "str-chat__button--primary",
|
|
1069
|
-
secondary: "str-chat__button--secondary"
|
|
1070
|
-
};
|
|
1071
|
-
const appearanceToClass = {
|
|
1072
|
-
ghost: "str-chat__button--ghost",
|
|
1073
|
-
outline: "str-chat__button--outline",
|
|
1074
|
-
solid: "str-chat__button--solid"
|
|
1075
|
-
};
|
|
1076
|
-
const sizeToClass = {
|
|
1077
|
-
lg: "str-chat__button--size-lg",
|
|
1078
|
-
md: "str-chat__button--size-md",
|
|
1079
|
-
sm: "str-chat__button--size-sm",
|
|
1080
|
-
xs: "str-chat__button--size-xs"
|
|
1081
|
-
};
|
|
1082
|
-
const Button = React.forwardRef(function Button2({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
|
|
1083
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
1084
|
-
"button",
|
|
1085
|
-
{
|
|
1086
|
-
ref,
|
|
1087
|
-
type: "button",
|
|
1088
|
-
...props,
|
|
1089
|
-
className: clsx(
|
|
1090
|
-
"str-chat__button",
|
|
1091
|
-
variant != null && variantToClass[variant],
|
|
1092
|
-
appearance != null && appearanceToClass[appearance],
|
|
1093
|
-
circular && "str-chat__button--circular",
|
|
1094
|
-
inverseTheme && "str-chat__theme-inverse",
|
|
1095
|
-
size != null && sizeToClass[size],
|
|
1096
|
-
className
|
|
1097
|
-
),
|
|
1098
|
-
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__button__content", children })
|
|
1099
|
-
}
|
|
1100
|
-
);
|
|
1101
|
-
});
|
|
1102
393
|
const BaseIcon = ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
1103
394
|
"svg",
|
|
1104
395
|
{
|
|
@@ -1627,6 +918,16 @@ const IconChecks = createIcon(
|
|
|
1627
918
|
}
|
|
1628
919
|
)
|
|
1629
920
|
);
|
|
921
|
+
const IconDownload = createIcon(
|
|
922
|
+
"IconDownload",
|
|
923
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
924
|
+
"path",
|
|
925
|
+
{
|
|
926
|
+
d: "M2.375 11.25C2.375 10.8358 2.71079 10.5 3.125 10.5C3.53921 10.5 3.875 10.8358 3.875 11.25V15.5H16.125V11.25C16.125 10.8358 16.4608 10.5 16.875 10.5C17.2892 10.5 17.625 10.8358 17.625 11.25V16.25C17.625 16.6642 17.2892 17 16.875 17H3.125C2.71079 17 2.375 16.6642 2.375 16.25V11.25ZM9.25 2.5C9.25 2.08579 9.58579 1.75 10 1.75C10.4142 1.75 10.75 2.08579 10.75 2.5V9.43945L12.5947 7.59473C12.8876 7.30183 13.3624 7.30183 13.6553 7.59473C13.9482 7.88762 13.9482 8.36238 13.6553 8.65527L10.5303 11.7803C10.2374 12.0732 9.76262 12.0732 9.46973 11.7803L6.34473 8.65527C6.05183 8.36238 6.05183 7.88762 6.34473 7.59473C6.63762 7.30183 7.11238 7.30183 7.40527 7.59473L9.25 9.43945V2.5Z",
|
|
927
|
+
fill: "currentColor"
|
|
928
|
+
}
|
|
929
|
+
)
|
|
930
|
+
);
|
|
1630
931
|
const IconEdit = createIcon(
|
|
1631
932
|
"IconEdit",
|
|
1632
933
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -1917,301 +1218,1019 @@ const IconUserAdd = createIcon(
|
|
|
1917
1218
|
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14246_498359)", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1918
1219
|
"path",
|
|
1919
1220
|
{
|
|
1920
|
-
d: "M15.625 10.625H19.375M17.5 8.75V12.5M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625",
|
|
1221
|
+
d: "M15.625 10.625H19.375M17.5 8.75V12.5M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625",
|
|
1222
|
+
fill: "none",
|
|
1223
|
+
stroke: "currentColor",
|
|
1224
|
+
strokeLinecap: "round",
|
|
1225
|
+
strokeLinejoin: "round",
|
|
1226
|
+
strokeWidth: "1.5"
|
|
1227
|
+
}
|
|
1228
|
+
) }),
|
|
1229
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14246_498359", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
1230
|
+
] })
|
|
1231
|
+
);
|
|
1232
|
+
const IconUserCheck = createIcon(
|
|
1233
|
+
"IconUserCheck",
|
|
1234
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1235
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14236_425131)", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1236
|
+
"path",
|
|
1237
|
+
{
|
|
1238
|
+
d: "M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625M15.625 11.25L16.875 12.5L19.375 10",
|
|
1239
|
+
fill: "none",
|
|
1240
|
+
stroke: "currentColor",
|
|
1241
|
+
strokeLinecap: "round",
|
|
1242
|
+
strokeLinejoin: "round",
|
|
1243
|
+
strokeWidth: "1.5"
|
|
1244
|
+
}
|
|
1245
|
+
) }),
|
|
1246
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14236_425131", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
1247
|
+
] })
|
|
1248
|
+
);
|
|
1249
|
+
const IconUserRemove = createIcon(
|
|
1250
|
+
"IconUserRemove",
|
|
1251
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1252
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14246_434209)", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1253
|
+
"path",
|
|
1254
|
+
{
|
|
1255
|
+
d: "M15.625 10.625H19.375M8.4375 12.5C11.0263 12.5 13.125 10.4013 13.125 7.8125C13.125 5.22367 11.0263 3.125 8.4375 3.125C5.84867 3.125 3.75 5.22367 3.75 7.8125C3.75 10.4013 5.84867 12.5 8.4375 12.5ZM8.4375 12.5C5.74688 12.5 3.48047 13.7148 1.875 15.625M8.4375 12.5C11.1281 12.5 13.3945 13.7148 15 15.625",
|
|
1256
|
+
fill: "none",
|
|
1257
|
+
stroke: "currentColor",
|
|
1258
|
+
strokeLinecap: "round",
|
|
1259
|
+
strokeLinejoin: "round",
|
|
1260
|
+
strokeWidth: "1.5"
|
|
1261
|
+
}
|
|
1262
|
+
) }),
|
|
1263
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14246_434209", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
1264
|
+
] })
|
|
1265
|
+
);
|
|
1266
|
+
const IconPin = createIcon(
|
|
1267
|
+
"IconPin",
|
|
1268
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1269
|
+
"path",
|
|
1270
|
+
{
|
|
1271
|
+
d: "M7.52271 12.4773L3.75006 16.25M17.9422 7.68279C18.0594 7.56559 18.1252 7.40668 18.1252 7.24099C18.1252 7.0753 18.0594 6.9164 17.9422 6.7992L13.2032 2.05779C13.086 1.94067 12.9271 1.87488 12.7614 1.87488C12.5957 1.87488 12.4368 1.94067 12.3196 2.05779L7.84303 6.54685C7.84303 6.54685 5.67506 5.46326 3.35943 7.33201C3.29077 7.38697 3.23447 7.45581 3.19424 7.53402C3.154 7.61224 3.13072 7.69806 3.12593 7.78589C3.12114 7.87371 3.13493 7.96156 3.16642 8.04369C3.19791 8.12581 3.24637 8.20037 3.30865 8.26248L11.7383 16.6914C11.8015 16.7541 11.8773 16.8025 11.9606 16.8336C12.044 16.8646 12.133 16.8775 12.2218 16.8713C12.3105 16.8652 12.3969 16.8402 12.4752 16.798C12.5535 16.7558 12.6219 16.6973 12.6758 16.6265C13.3313 15.7547 14.361 13.9633 13.4657 12.1734L17.9422 7.68279Z",
|
|
1272
|
+
fill: "none",
|
|
1273
|
+
stroke: "currentColor",
|
|
1274
|
+
strokeLinecap: "round",
|
|
1275
|
+
strokeLinejoin: "round",
|
|
1276
|
+
strokeWidth: "1.5"
|
|
1277
|
+
}
|
|
1278
|
+
)
|
|
1279
|
+
);
|
|
1280
|
+
const IconPlayFill = createIcon(
|
|
1281
|
+
"IconPlayFill",
|
|
1282
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18.75 10C18.7505 10.2122 18.6961 10.4209 18.5921 10.6059C18.488 10.7908 18.3379 10.9457 18.1562 11.0555L6.9 17.9414C6.71022 18.0576 6.49287 18.1211 6.27037 18.1252C6.04788 18.1293 5.82832 18.0739 5.63438 17.9648C5.44227 17.8574 5.28225 17.7008 5.17075 17.511C5.05926 17.3213 5.00032 17.1052 5 16.8852V3.11484C5.00032 2.89475 5.05926 2.67872 5.17075 2.48896C5.28225 2.2992 5.44227 2.14257 5.63438 2.03516C5.82832 1.92605 6.04788 1.87071 6.27037 1.87483C6.49287 1.87895 6.71022 1.94239 6.9 2.05859L18.1562 8.94453C18.3379 9.05428 18.488 9.20916 18.5921 9.39411C18.6961 9.57906 18.7505 9.78779 18.75 10Z" })
|
|
1283
|
+
);
|
|
1284
|
+
const IconPlus = createIcon(
|
|
1285
|
+
"IconPlus",
|
|
1286
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1287
|
+
"path",
|
|
1288
|
+
{
|
|
1289
|
+
d: "M3.125 10H16.875M10 3.125V16.875",
|
|
1290
|
+
fill: "none",
|
|
1291
|
+
stroke: "currentColor",
|
|
1292
|
+
strokeLinecap: "round",
|
|
1293
|
+
strokeLinejoin: "round",
|
|
1294
|
+
strokeWidth: "2"
|
|
1295
|
+
}
|
|
1296
|
+
)
|
|
1297
|
+
);
|
|
1298
|
+
const IconPlusSmall = createIcon(
|
|
1299
|
+
"IconPlusSmall",
|
|
1300
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1301
|
+
"path",
|
|
1302
|
+
{
|
|
1303
|
+
d: "M3.125 10H16.875M10 3.125V16.875",
|
|
1304
|
+
fill: "none",
|
|
1305
|
+
stroke: "currentColor",
|
|
1306
|
+
strokeLinecap: "round",
|
|
1307
|
+
strokeLinejoin: "round",
|
|
1308
|
+
strokeWidth: "1.5"
|
|
1309
|
+
}
|
|
1310
|
+
)
|
|
1311
|
+
);
|
|
1312
|
+
const IconCommand = createIcon(
|
|
1313
|
+
"IconCommand",
|
|
1314
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1315
|
+
"path",
|
|
1316
|
+
{
|
|
1317
|
+
d: "M6.25 7.5L9.375 10L6.25 12.5M10.625 12.5H13.75M3.125 3.75H16.875C17.2202 3.75 17.5 4.02982 17.5 4.375V15.625C17.5 15.9702 17.2202 16.25 16.875 16.25H3.125C2.77982 16.25 2.5 15.9702 2.5 15.625V4.375C2.5 4.02982 2.77982 3.75 3.125 3.75Z",
|
|
1318
|
+
fill: "none",
|
|
1319
|
+
stroke: "currentColor",
|
|
1320
|
+
strokeLinecap: "round",
|
|
1321
|
+
strokeLinejoin: "round",
|
|
1322
|
+
strokeWidth: "1.5"
|
|
1323
|
+
}
|
|
1324
|
+
)
|
|
1325
|
+
);
|
|
1326
|
+
const IconCopy = createIcon(
|
|
1327
|
+
"IconCopy",
|
|
1328
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1329
|
+
"path",
|
|
1330
|
+
{
|
|
1331
|
+
d: "M13.125 13.125H16.875V3.125H6.875V6.875M3.125 6.875H13.125V16.875H3.125V6.875Z",
|
|
1332
|
+
fill: "none",
|
|
1333
|
+
stroke: "currentColor",
|
|
1334
|
+
strokeLinecap: "round",
|
|
1335
|
+
strokeLinejoin: "round",
|
|
1336
|
+
strokeWidth: "1.5"
|
|
1337
|
+
}
|
|
1338
|
+
)
|
|
1339
|
+
);
|
|
1340
|
+
const IconBolt = createIcon(
|
|
1341
|
+
"IconBolt",
|
|
1342
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.7071 9.80157L7.95711 19.1766C7.86438 19.2755 7.74198 19.3416 7.60839 19.3649C7.47479 19.3882 7.33724 19.3674 7.2165 19.3057C7.09576 19.244 6.99837 19.1446 6.93904 19.0227C6.8797 18.9007 6.86164 18.7628 6.88757 18.6297L8.03289 12.9008L3.53054 11.2102C3.43385 11.174 3.34762 11.1144 3.27956 11.0368C3.2115 10.9592 3.16373 10.8659 3.14052 10.7653C3.1173 10.6647 3.11937 10.5599 3.14653 10.4603C3.17369 10.3607 3.2251 10.2694 3.29617 10.1945L12.0462 0.819538C12.1389 0.720581 12.2613 0.654468 12.3949 0.631176C12.5285 0.607884 12.666 0.628675 12.7868 0.690414C12.9075 0.752152 13.0049 0.851488 13.0642 0.97343C13.1236 1.09537 13.1416 1.2333 13.1157 1.36641L11.9673 7.10157L16.4696 8.78985C16.5656 8.82626 16.6511 8.88576 16.7187 8.96307C16.7862 9.04039 16.8336 9.13315 16.8568 9.23316C16.88 9.33317 16.8781 9.43734 16.8515 9.53648C16.8248 9.63562 16.7742 9.72666 16.704 9.80157H16.7071Z" })
|
|
1343
|
+
);
|
|
1344
|
+
const IconTranslate = createIcon(
|
|
1345
|
+
"IconTranslate",
|
|
1346
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1347
|
+
"path",
|
|
1348
|
+
{
|
|
1349
|
+
d: "M18.75 16.875L14.375 8.125L10 16.875M11.25 14.375H17.5M7.5 2.5V4.375M2.5 4.375H12.5M10 4.375C10 6.36412 9.20982 8.27178 7.8033 9.6783C6.39678 11.0848 4.48912 11.875 2.5 11.875M5.42734 6.875C5.94442 8.33751 6.90226 9.60371 8.16893 10.4992C9.4356 11.3947 10.9488 11.8753 12.5 11.875",
|
|
1350
|
+
fill: "none",
|
|
1351
|
+
stroke: "currentColor",
|
|
1352
|
+
strokeLinecap: "round",
|
|
1353
|
+
strokeLinejoin: "round",
|
|
1354
|
+
strokeWidth: "1.5"
|
|
1355
|
+
}
|
|
1356
|
+
)
|
|
1357
|
+
);
|
|
1358
|
+
const IconDelete = createIcon(
|
|
1359
|
+
"IconDelete",
|
|
1360
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1361
|
+
"path",
|
|
1362
|
+
{
|
|
1363
|
+
d: "M16.875 4.375H3.125M8.125 8.125V13.125M11.875 8.125V13.125M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375",
|
|
1364
|
+
fill: "none",
|
|
1365
|
+
stroke: "currentColor",
|
|
1366
|
+
strokeLinecap: "round",
|
|
1367
|
+
strokeLinejoin: "round",
|
|
1368
|
+
strokeWidth: "1.5"
|
|
1369
|
+
}
|
|
1370
|
+
)
|
|
1371
|
+
);
|
|
1372
|
+
const IconTrophy = createIcon(
|
|
1373
|
+
"IconTrophy",
|
|
1374
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1375
|
+
"path",
|
|
1376
|
+
{
|
|
1377
|
+
d: "M7.5 17.5H12.5M10 14.375V17.5M4.53125 10H3.75C3.08696 10 2.45107 9.73661 1.98223 9.26777C1.51339 8.79893 1.25 8.16304 1.25 7.5V6.25C1.25 6.08424 1.31585 5.92527 1.43306 5.80806C1.55027 5.69085 1.70924 5.625 1.875 5.625H4.375M15.4688 10H16.25C16.913 10 17.5489 9.73661 18.0178 9.26777C18.4866 8.79893 18.75 8.16304 18.75 7.5V6.25C18.75 6.08424 18.6842 5.92527 18.5669 5.80806C18.4497 5.69085 18.2908 5.625 18.125 5.625H15.625M4.375 3.75H15.625V8.67969C15.625 11.7812 13.1445 14.3516 10.043 14.375C9.30068 14.3807 8.5646 14.2394 7.87718 13.9592C7.18975 13.6791 6.56458 13.2656 6.03769 12.7427C5.5108 12.2198 5.09262 11.5978 4.80725 10.9126C4.52188 10.2273 4.37498 9.49231 4.375 8.75V3.75Z",
|
|
1378
|
+
fill: "none",
|
|
1379
|
+
stroke: "currentColor",
|
|
1380
|
+
strokeLinecap: "round",
|
|
1381
|
+
strokeLinejoin: "round",
|
|
1382
|
+
strokeWidth: "1.5"
|
|
1383
|
+
}
|
|
1384
|
+
)
|
|
1385
|
+
);
|
|
1386
|
+
const IconUnpin = createIcon(
|
|
1387
|
+
"IconUnpin",
|
|
1388
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1389
|
+
"path",
|
|
1390
|
+
{
|
|
1391
|
+
d: "M7.52271 12.4773L3.75006 16.25M3.75006 3.12498L16.2501 16.875M14.4532 11.1828L17.9415 7.68279C18.0586 7.56559 18.1244 7.40668 18.1244 7.24099C18.1244 7.0753 18.0586 6.9164 17.9415 6.7992L13.2032 2.05779C13.086 1.94067 12.9271 1.87488 12.7614 1.87488C12.5957 1.87488 12.4368 1.94067 12.3196 2.05779L9.09615 5.28904M6.58756 6.24998C5.74537 6.18435 4.57271 6.3531 3.35943 7.33201C3.29077 7.38697 3.23447 7.45581 3.19424 7.53402C3.154 7.61224 3.13072 7.69806 3.12593 7.78589C3.12114 7.87371 3.13493 7.96156 3.16642 8.04369C3.19791 8.12581 3.24637 8.20037 3.30865 8.26248L11.7383 16.6914C11.8015 16.7541 11.8773 16.8025 11.9606 16.8336C12.044 16.8646 12.133 16.8775 12.2218 16.8713C12.3105 16.8652 12.3969 16.8402 12.4752 16.798C12.5535 16.7558 12.6219 16.6973 12.6758 16.6265C13.0829 16.0851 13.6344 15.1898 13.779 14.1594",
|
|
1392
|
+
fill: "none",
|
|
1393
|
+
stroke: "currentColor",
|
|
1394
|
+
strokeLinecap: "round",
|
|
1395
|
+
strokeLinejoin: "round",
|
|
1396
|
+
strokeWidth: "1.5"
|
|
1397
|
+
}
|
|
1398
|
+
)
|
|
1399
|
+
);
|
|
1400
|
+
const IconVideo = createIcon(
|
|
1401
|
+
"IconVideo",
|
|
1402
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1403
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14111_491476)", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
1404
|
+
"path",
|
|
1405
|
+
{
|
|
1406
|
+
d: "M15.625 8.75L19.375 6.25V13.75L15.625 11.25M2.5 5H15C15.3452 5 15.625 5.27982 15.625 5.625V14.375C15.625 14.7202 15.3452 15 15 15H2.5C2.15482 15 1.875 14.7202 1.875 14.375V5.625C1.875 5.27982 2.15482 5 2.5 5Z",
|
|
1407
|
+
fill: "none",
|
|
1408
|
+
stroke: "currentColor",
|
|
1409
|
+
strokeLinecap: "round",
|
|
1410
|
+
strokeLinejoin: "round",
|
|
1411
|
+
strokeWidth: "1.5"
|
|
1412
|
+
}
|
|
1413
|
+
) }),
|
|
1414
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14111_491476", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
1415
|
+
] }),
|
|
1416
|
+
{ "data-rtl-mirror": "" }
|
|
1417
|
+
);
|
|
1418
|
+
const IconVideoFill = createIcon(
|
|
1419
|
+
"IconVideoFill",
|
|
1420
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1421
|
+
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14064_467281)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5.625V14.375C15 14.7065 14.8683 15.0245 14.6339 15.2589C14.3995 15.4933 14.0815 15.625 13.75 15.625H2.5C2.16848 15.625 1.85054 15.4933 1.61612 15.2589C1.3817 15.0245 1.25 14.7065 1.25 14.375V5.625C1.25 5.29348 1.3817 4.97554 1.61612 4.74112C1.85054 4.5067 2.16848 4.375 2.5 4.375H13.75C14.0815 4.375 14.3995 4.5067 14.6339 4.74112C14.8683 4.97554 15 5.29348 15 5.625ZM19.5312 5.64453C19.4431 5.62295 19.3513 5.62029 19.2621 5.63672C19.1728 5.65315 19.088 5.68829 19.0133 5.73984L16.3891 7.48906C16.3463 7.51762 16.3112 7.55631 16.2869 7.6017C16.2626 7.64708 16.25 7.69776 16.25 7.74922V12.2508C16.25 12.3022 16.2626 12.3529 16.2869 12.3983C16.3112 12.4437 16.3463 12.4824 16.3891 12.5109L19.0281 14.2703C19.1269 14.3362 19.2424 14.3726 19.3611 14.3752C19.4798 14.3779 19.5968 14.3466 19.6984 14.2852C19.7924 14.2254 19.8695 14.1425 19.9223 14.0444C19.9751 13.9464 20.0019 13.8364 20 13.725V6.25C20.0001 6.11139 19.9541 5.97668 19.8692 5.86708C19.7843 5.75747 19.6655 5.67918 19.5312 5.64453Z" }) }),
|
|
1422
|
+
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14064_467281", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
1423
|
+
] }),
|
|
1424
|
+
{ "data-rtl-mirror": "" }
|
|
1425
|
+
);
|
|
1426
|
+
const IconAudio = createIcon(
|
|
1427
|
+
"IconAudio",
|
|
1428
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1429
|
+
"path",
|
|
1430
|
+
{
|
|
1431
|
+
d: "M15.625 8.125V11.875M18.125 6.875V13.125M6.875 13.125H3.125C2.95924 13.125 2.80027 13.0592 2.68306 12.9419C2.56585 12.8247 2.5 12.6658 2.5 12.5V7.5C2.5 7.33424 2.56585 7.17527 2.68306 7.05806C2.80027 6.94085 2.95924 6.875 3.125 6.875H6.875L12.5 2.5V17.5L6.875 13.125Z",
|
|
1432
|
+
fill: "none",
|
|
1433
|
+
stroke: "currentColor",
|
|
1434
|
+
strokeLinecap: "round",
|
|
1435
|
+
strokeLinejoin: "round",
|
|
1436
|
+
strokeWidth: "1.5"
|
|
1437
|
+
}
|
|
1438
|
+
),
|
|
1439
|
+
{ "data-rtl-mirror": "" }
|
|
1440
|
+
);
|
|
1441
|
+
const IconArchive = createIcon(
|
|
1442
|
+
"IconArchive",
|
|
1443
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1444
|
+
"path",
|
|
1445
|
+
{
|
|
1446
|
+
d: "M16.875 7.5V15C16.875 15.1658 16.8092 15.3247 16.6919 15.4419C16.5747 15.5592 16.4158 15.625 16.25 15.625H3.75C3.58424 15.625 3.42527 15.5592 3.30806 15.4419C3.19085 15.3247 3.125 15.1658 3.125 15V7.5M8.125 10.625H11.875M2.5 4.375H17.5C17.8452 4.375 18.125 4.65482 18.125 5V6.875C18.125 7.22018 17.8452 7.5 17.5 7.5H2.5C2.15482 7.5 1.875 7.22018 1.875 6.875V5C1.875 4.65482 2.15482 4.375 2.5 4.375Z",
|
|
1447
|
+
fill: "none",
|
|
1448
|
+
stroke: "currentColor",
|
|
1449
|
+
strokeLinecap: "round",
|
|
1450
|
+
strokeLinejoin: "round",
|
|
1451
|
+
strokeWidth: "1.5"
|
|
1452
|
+
}
|
|
1453
|
+
)
|
|
1454
|
+
);
|
|
1455
|
+
const IconLoading = createIcon(
|
|
1456
|
+
"IconLoading",
|
|
1457
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1458
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1459
|
+
"path",
|
|
1460
|
+
{
|
|
1461
|
+
d: "M17.5 10C17.5 14.1422 14.1422 17.5 10 17.5C5.85787 17.5 2.5 14.1422 2.5 10C2.5 5.85787 5.85787 2.5 10 2.5C14.1422 2.5 17.5 5.85787 17.5 10Z",
|
|
1462
|
+
fill: "none",
|
|
1463
|
+
stroke: "currentColor",
|
|
1464
|
+
strokeOpacity: "0.3",
|
|
1465
|
+
strokeWidth: "2"
|
|
1466
|
+
}
|
|
1467
|
+
),
|
|
1468
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1469
|
+
"path",
|
|
1470
|
+
{
|
|
1471
|
+
d: "M17.4544 10.8334C17.0701 14.3097 14.3098 17.07 10.8335 17.4543",
|
|
1921
1472
|
fill: "none",
|
|
1922
1473
|
stroke: "currentColor",
|
|
1923
1474
|
strokeLinecap: "round",
|
|
1924
|
-
|
|
1925
|
-
|
|
1475
|
+
strokeWidth: "2"
|
|
1476
|
+
}
|
|
1477
|
+
)
|
|
1478
|
+
] })
|
|
1479
|
+
);
|
|
1480
|
+
const IconGiphy = createIcon(
|
|
1481
|
+
"IconGiphy",
|
|
1482
|
+
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
1483
|
+
/* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "black", height: "20", rx: "10", width: "20" }),
|
|
1484
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1485
|
+
"path",
|
|
1486
|
+
{
|
|
1487
|
+
clipRule: "evenodd",
|
|
1488
|
+
d: "M6.5997 5.50024H13.4008V14.4999H6.59912L6.5997 5.50024Z",
|
|
1489
|
+
fill: "black",
|
|
1490
|
+
fillRule: "evenodd"
|
|
1491
|
+
}
|
|
1492
|
+
),
|
|
1493
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 5.1665H6.59998V14.8335H5.24023V5.1665Z", fill: "#04FF8E" }),
|
|
1494
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4004 7.8335H14.7601V14.8335H13.4004V7.8335Z", fill: "#8E2EFF" }),
|
|
1495
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 14.4998H14.7602V15.8333H5.24023V14.4998Z", fill: "#00C5FF" }),
|
|
1496
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.24023 4.16675H10.6804V5.50025H5.24023V4.16675Z", fill: "#FFF152" }),
|
|
1497
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1498
|
+
"path",
|
|
1499
|
+
{
|
|
1500
|
+
d: "M13.4003 6.83316V5.50025H12.0399V4.16675H10.6802V8.16666H14.76V6.83316",
|
|
1501
|
+
fill: "#FF5B5B"
|
|
1502
|
+
}
|
|
1503
|
+
),
|
|
1504
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.4004 9.5V8.1665H14.7601", fill: "#551C99" }),
|
|
1505
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
1506
|
+
"path",
|
|
1507
|
+
{
|
|
1508
|
+
clipRule: "evenodd",
|
|
1509
|
+
d: "M10.6802 4.16675V5.50025H9.31982",
|
|
1510
|
+
fill: "#999131",
|
|
1511
|
+
fillRule: "evenodd"
|
|
1512
|
+
}
|
|
1513
|
+
)
|
|
1514
|
+
] })
|
|
1515
|
+
);
|
|
1516
|
+
const DEFAULT_PLAYBACK_RATES = [1, 1.5, 2];
|
|
1517
|
+
const isSeekable = (audioElement) => !(audioElement.duration === Infinity || isNaN(audioElement.duration));
|
|
1518
|
+
const defaultRegisterAudioPlayerError = ({
|
|
1519
|
+
error
|
|
1520
|
+
} = {}) => {
|
|
1521
|
+
if (!error) return;
|
|
1522
|
+
console.error("[AUDIO PLAYER]", error);
|
|
1523
|
+
};
|
|
1524
|
+
const elementIsPlaying = (audioElement) => audioElement && !(audioElement.paused || audioElement.ended);
|
|
1525
|
+
class AudioPlayer {
|
|
1526
|
+
constructor({
|
|
1527
|
+
durationSeconds,
|
|
1528
|
+
fileSize,
|
|
1529
|
+
id,
|
|
1530
|
+
mimeType,
|
|
1531
|
+
playbackRates: customPlaybackRates,
|
|
1532
|
+
plugins,
|
|
1533
|
+
pool,
|
|
1534
|
+
src,
|
|
1535
|
+
title,
|
|
1536
|
+
waveformData
|
|
1537
|
+
}) {
|
|
1538
|
+
this._plugins = /* @__PURE__ */ new Map();
|
|
1539
|
+
this.playTimeout = void 0;
|
|
1540
|
+
this.unsubscribeEventListeners = null;
|
|
1541
|
+
this._disposed = false;
|
|
1542
|
+
this._metadataProbe = null;
|
|
1543
|
+
this._restoringPosition = false;
|
|
1544
|
+
this._removalTimeout = void 0;
|
|
1545
|
+
this.setDurationSeconds = (durationSeconds2) => {
|
|
1546
|
+
this._data.durationSeconds = durationSeconds2;
|
|
1547
|
+
this.state.partialNext({ durationSeconds: durationSeconds2 });
|
|
1548
|
+
};
|
|
1549
|
+
this.setPlaybackStartSafetyTimeout = () => {
|
|
1550
|
+
clearTimeout(this.playTimeout);
|
|
1551
|
+
this.playTimeout = setTimeout(() => {
|
|
1552
|
+
if (!this.elementRef) return;
|
|
1553
|
+
try {
|
|
1554
|
+
this.elementRef.pause();
|
|
1555
|
+
this.state.partialNext({ isPlaying: false });
|
|
1556
|
+
} catch (e) {
|
|
1557
|
+
this.registerError({ errCode: "failed-to-start" });
|
|
1558
|
+
}
|
|
1559
|
+
}, 2e3);
|
|
1560
|
+
};
|
|
1561
|
+
this.updateDurationFromElement = (element) => {
|
|
1562
|
+
const duration = element.duration;
|
|
1563
|
+
if (typeof duration !== "number" || isNaN(duration) || !isFinite(duration) || duration <= 0) {
|
|
1564
|
+
return;
|
|
1565
|
+
}
|
|
1566
|
+
this.setDurationSeconds(duration);
|
|
1567
|
+
};
|
|
1568
|
+
this.clearMetadataProbe = () => {
|
|
1569
|
+
const probe = this._metadataProbe;
|
|
1570
|
+
this._metadataProbe = null;
|
|
1571
|
+
this._metadataProbePromise = void 0;
|
|
1572
|
+
if (!probe) return;
|
|
1573
|
+
try {
|
|
1574
|
+
probe.pause();
|
|
1575
|
+
} catch {
|
|
1576
|
+
}
|
|
1577
|
+
probe.removeAttribute("src");
|
|
1578
|
+
try {
|
|
1579
|
+
probe.load();
|
|
1580
|
+
} catch {
|
|
1581
|
+
}
|
|
1582
|
+
};
|
|
1583
|
+
this.preloadMetadata = () => {
|
|
1584
|
+
if (this._disposed || this.durationSeconds != null || !this.src || this._metadataProbePromise || typeof document === "undefined") {
|
|
1585
|
+
return;
|
|
1586
|
+
}
|
|
1587
|
+
const probe = document.createElement("audio");
|
|
1588
|
+
probe.preload = "metadata";
|
|
1589
|
+
this._metadataProbe = probe;
|
|
1590
|
+
this._metadataProbePromise = new Promise((resolve) => {
|
|
1591
|
+
const cleanup = () => {
|
|
1592
|
+
probe.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1593
|
+
probe.removeEventListener("error", handleError);
|
|
1594
|
+
if (this._metadataProbe === probe) {
|
|
1595
|
+
this.clearMetadataProbe();
|
|
1596
|
+
} else {
|
|
1597
|
+
this._metadataProbePromise = void 0;
|
|
1598
|
+
}
|
|
1599
|
+
resolve();
|
|
1600
|
+
};
|
|
1601
|
+
const handleLoadedMetadata = () => {
|
|
1602
|
+
this.updateDurationFromElement(probe);
|
|
1603
|
+
cleanup();
|
|
1604
|
+
};
|
|
1605
|
+
const handleError = () => {
|
|
1606
|
+
cleanup();
|
|
1607
|
+
};
|
|
1608
|
+
probe.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
|
|
1609
|
+
probe.addEventListener("error", handleError, { once: true });
|
|
1610
|
+
probe.src = this.src;
|
|
1611
|
+
try {
|
|
1612
|
+
probe.load();
|
|
1613
|
+
} catch {
|
|
1614
|
+
cleanup();
|
|
1615
|
+
}
|
|
1616
|
+
});
|
|
1617
|
+
};
|
|
1618
|
+
this.clearPlaybackStartSafetyTimeout = () => {
|
|
1619
|
+
if (!this.elementRef) return;
|
|
1620
|
+
clearTimeout(this.playTimeout);
|
|
1621
|
+
this.playTimeout = void 0;
|
|
1622
|
+
};
|
|
1623
|
+
this.clearPendingLoadedMeta = () => {
|
|
1624
|
+
const pending = this._pendingLoadedMeta;
|
|
1625
|
+
if (pending?.element && pending.onLoaded) {
|
|
1626
|
+
pending.element.removeEventListener("loadedmetadata", pending.onLoaded);
|
|
1627
|
+
}
|
|
1628
|
+
this._pendingLoadedMeta = void 0;
|
|
1629
|
+
};
|
|
1630
|
+
this.restoreSavedPosition = (elementRef) => {
|
|
1631
|
+
const saved = this.secondsElapsed;
|
|
1632
|
+
if (!saved || saved <= 0) return;
|
|
1633
|
+
const apply = () => {
|
|
1634
|
+
const duration = elementRef.duration;
|
|
1635
|
+
const clamped = typeof duration === "number" && !isNaN(duration) && isFinite(duration) ? Math.min(saved, duration) : saved;
|
|
1636
|
+
try {
|
|
1637
|
+
if (elementRef.currentTime === clamped) return;
|
|
1638
|
+
elementRef.currentTime = clamped;
|
|
1639
|
+
this.setSecondsElapsed(clamped);
|
|
1640
|
+
} catch {
|
|
1641
|
+
}
|
|
1642
|
+
};
|
|
1643
|
+
if (elementRef.readyState < 1) {
|
|
1644
|
+
this.clearPendingLoadedMeta();
|
|
1645
|
+
this._restoringPosition = true;
|
|
1646
|
+
const onLoaded = () => {
|
|
1647
|
+
if (this._pendingLoadedMeta?.onLoaded !== onLoaded) return;
|
|
1648
|
+
this._pendingLoadedMeta = void 0;
|
|
1649
|
+
if (this.elementRef !== elementRef) {
|
|
1650
|
+
this._restoringPosition = false;
|
|
1651
|
+
return;
|
|
1652
|
+
}
|
|
1653
|
+
apply();
|
|
1654
|
+
this._restoringPosition = false;
|
|
1655
|
+
};
|
|
1656
|
+
elementRef.addEventListener("loadedmetadata", onLoaded, { once: true });
|
|
1657
|
+
this._pendingLoadedMeta = { element: elementRef, onLoaded };
|
|
1658
|
+
} else {
|
|
1659
|
+
this._restoringPosition = true;
|
|
1660
|
+
apply();
|
|
1661
|
+
this._restoringPosition = false;
|
|
1662
|
+
}
|
|
1663
|
+
};
|
|
1664
|
+
this.elementIsReady = () => {
|
|
1665
|
+
if (this._elementIsReadyPromise) return this._elementIsReadyPromise;
|
|
1666
|
+
this._elementIsReadyPromise = new Promise((resolve) => {
|
|
1667
|
+
if (!this.elementRef) return resolve(false);
|
|
1668
|
+
const element = this.elementRef;
|
|
1669
|
+
const handleLoaded = () => {
|
|
1670
|
+
element.removeEventListener("loadedmetadata", handleLoaded);
|
|
1671
|
+
resolve(element.readyState > 0);
|
|
1672
|
+
};
|
|
1673
|
+
element.addEventListener("loadedmetadata", handleLoaded);
|
|
1674
|
+
});
|
|
1675
|
+
return this._elementIsReadyPromise;
|
|
1676
|
+
};
|
|
1677
|
+
this.setRef = (elementRef) => {
|
|
1678
|
+
if (elementIsPlaying(this.elementRef)) {
|
|
1679
|
+
this.releaseElement({ resetState: false });
|
|
1680
|
+
}
|
|
1681
|
+
this.clearPendingLoadedMeta();
|
|
1682
|
+
this.clearMetadataProbe();
|
|
1683
|
+
this._restoringPosition = false;
|
|
1684
|
+
this._elementIsReadyPromise = void 0;
|
|
1685
|
+
this.state.partialNext({ elementRef });
|
|
1686
|
+
if (elementRef) {
|
|
1687
|
+
this.registerSubscriptions();
|
|
1688
|
+
}
|
|
1689
|
+
};
|
|
1690
|
+
this.setSecondsElapsed = (secondsElapsed) => {
|
|
1691
|
+
const duration = this.elementRef?.duration ?? this.durationSeconds;
|
|
1692
|
+
this.state.partialNext({
|
|
1693
|
+
progressPercent: duration && secondsElapsed ? secondsElapsed / duration * 100 : 0,
|
|
1694
|
+
secondsElapsed
|
|
1695
|
+
});
|
|
1696
|
+
};
|
|
1697
|
+
this.canPlayMimeType = (mimeType2) => {
|
|
1698
|
+
if (!mimeType2) return false;
|
|
1699
|
+
if (this.elementRef) return !!this.elementRef.canPlayType(mimeType2);
|
|
1700
|
+
return !!new Audio().canPlayType(mimeType2);
|
|
1701
|
+
};
|
|
1702
|
+
this.play = async (params) => {
|
|
1703
|
+
if (this._disposed) return;
|
|
1704
|
+
const elementRef = this.ensureElementRef();
|
|
1705
|
+
if (elementIsPlaying(this.elementRef)) {
|
|
1706
|
+
if (this.isPlaying) return;
|
|
1707
|
+
this.state.partialNext({ isPlaying: true });
|
|
1708
|
+
return;
|
|
1709
|
+
}
|
|
1710
|
+
const { currentPlaybackRate, playbackRates: playbackRates2 } = {
|
|
1711
|
+
currentPlaybackRate: this.currentPlaybackRate,
|
|
1712
|
+
playbackRates: this.playbackRates,
|
|
1713
|
+
...params
|
|
1714
|
+
};
|
|
1715
|
+
if (!this.canPlayRecord) {
|
|
1716
|
+
this.registerError({ errCode: "not-playable" });
|
|
1717
|
+
return;
|
|
1926
1718
|
}
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1931
|
-
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1719
|
+
this.restoreSavedPosition(elementRef);
|
|
1720
|
+
elementRef.playbackRate = currentPlaybackRate ?? this.currentPlaybackRate;
|
|
1721
|
+
this.setPlaybackStartSafetyTimeout();
|
|
1722
|
+
try {
|
|
1723
|
+
await elementRef.play();
|
|
1724
|
+
this.state.partialNext({
|
|
1725
|
+
currentPlaybackRate,
|
|
1726
|
+
isPlaying: true,
|
|
1727
|
+
playbackRates: playbackRates2
|
|
1728
|
+
});
|
|
1729
|
+
this._pool.setActiveAudioPlayer(this);
|
|
1730
|
+
} catch (e) {
|
|
1731
|
+
this.registerError({ error: e });
|
|
1732
|
+
this.state.partialNext({ isPlaying: false });
|
|
1733
|
+
} finally {
|
|
1734
|
+
this.clearPlaybackStartSafetyTimeout();
|
|
1943
1735
|
}
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
);
|
|
1948
|
-
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
|
|
1952
|
-
|
|
1953
|
-
{
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
|
-
|
|
1959
|
-
|
|
1736
|
+
};
|
|
1737
|
+
this.pause = () => {
|
|
1738
|
+
if (!elementIsPlaying(this.elementRef)) return;
|
|
1739
|
+
this.clearPlaybackStartSafetyTimeout();
|
|
1740
|
+
this.elementRef.pause();
|
|
1741
|
+
this.state.partialNext({ isPlaying: false });
|
|
1742
|
+
};
|
|
1743
|
+
this.stop = () => {
|
|
1744
|
+
this.pause();
|
|
1745
|
+
this.state.partialNext({ isPlaying: false });
|
|
1746
|
+
this.setSecondsElapsed(0);
|
|
1747
|
+
if (this.elementRef) this.elementRef.currentTime = 0;
|
|
1748
|
+
};
|
|
1749
|
+
this.togglePlay = async () => this.isPlaying ? this.pause() : await this.play();
|
|
1750
|
+
this.increasePlaybackRate = () => {
|
|
1751
|
+
let currentPlaybackRateIndex = this.state.getLatestValue().playbackRates.findIndex((rate) => rate === this.currentPlaybackRate);
|
|
1752
|
+
if (currentPlaybackRateIndex === -1) {
|
|
1753
|
+
currentPlaybackRateIndex = 0;
|
|
1960
1754
|
}
|
|
1961
|
-
|
|
1962
|
-
|
|
1963
|
-
|
|
1964
|
-
)
|
|
1965
|
-
|
|
1966
|
-
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
|
|
1970
|
-
|
|
1971
|
-
|
|
1972
|
-
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1980
|
-
|
|
1981
|
-
|
|
1982
|
-
);
|
|
1983
|
-
const
|
|
1984
|
-
|
|
1985
|
-
|
|
1986
|
-
|
|
1987
|
-
{
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
);
|
|
2011
|
-
|
|
2012
|
-
|
|
2013
|
-
|
|
2014
|
-
|
|
2015
|
-
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
|
|
2019
|
-
|
|
2020
|
-
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
)
|
|
2025
|
-
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
1755
|
+
const nextIndex = currentPlaybackRateIndex === this.playbackRates.length - 1 ? 0 : currentPlaybackRateIndex + 1;
|
|
1756
|
+
const currentPlaybackRate = this.playbackRates[nextIndex];
|
|
1757
|
+
this.state.partialNext({ currentPlaybackRate });
|
|
1758
|
+
if (this.elementRef) {
|
|
1759
|
+
this.elementRef.playbackRate = currentPlaybackRate;
|
|
1760
|
+
}
|
|
1761
|
+
};
|
|
1762
|
+
this.seek = throttle(async ({ clientX, currentTarget }) => {
|
|
1763
|
+
let element = this.elementRef;
|
|
1764
|
+
if (!this.elementRef) {
|
|
1765
|
+
element = this.ensureElementRef();
|
|
1766
|
+
const isReady = await this.elementIsReady();
|
|
1767
|
+
if (!isReady) return;
|
|
1768
|
+
}
|
|
1769
|
+
if (!currentTarget || !element) return;
|
|
1770
|
+
if (!isSeekable(element)) {
|
|
1771
|
+
this.registerError({ errCode: "seek-not-supported" });
|
|
1772
|
+
return;
|
|
1773
|
+
}
|
|
1774
|
+
const { width, x } = currentTarget.getBoundingClientRect();
|
|
1775
|
+
const ratio = (clientX - x) / width;
|
|
1776
|
+
if (ratio > 1 || ratio < 0) return;
|
|
1777
|
+
const currentTime = ratio * element.duration;
|
|
1778
|
+
this.setSecondsElapsed(currentTime);
|
|
1779
|
+
element.currentTime = currentTime;
|
|
1780
|
+
}, 16);
|
|
1781
|
+
this.registerError = (params) => {
|
|
1782
|
+
defaultRegisterAudioPlayerError(params);
|
|
1783
|
+
this.plugins.forEach(({ onError }) => onError?.({ player: this, ...params }));
|
|
1784
|
+
};
|
|
1785
|
+
this.requestRemoval = () => {
|
|
1786
|
+
this._disposed = true;
|
|
1787
|
+
this.cancelScheduledRemoval();
|
|
1788
|
+
this.clearPendingLoadedMeta();
|
|
1789
|
+
this.clearMetadataProbe();
|
|
1790
|
+
this._restoringPosition = false;
|
|
1791
|
+
this.releaseElement({ resetState: true });
|
|
1792
|
+
this.unsubscribeEventListeners?.();
|
|
1793
|
+
this.unsubscribeEventListeners = null;
|
|
1794
|
+
this.plugins.forEach(({ onRemove }) => onRemove?.({ player: this }));
|
|
1795
|
+
this._pool.deregister(this.id);
|
|
1796
|
+
};
|
|
1797
|
+
this.cancelScheduledRemoval = () => {
|
|
1798
|
+
clearTimeout(this._removalTimeout);
|
|
1799
|
+
this._removalTimeout = void 0;
|
|
1800
|
+
};
|
|
1801
|
+
this.scheduleRemoval = (ms = 0) => {
|
|
1802
|
+
this.cancelScheduledRemoval();
|
|
1803
|
+
this._removalTimeout = setTimeout(() => {
|
|
1804
|
+
if (this.disposed) return;
|
|
1805
|
+
this.requestRemoval();
|
|
1806
|
+
}, ms);
|
|
1807
|
+
};
|
|
1808
|
+
this.releaseElementForHandoff = () => {
|
|
1809
|
+
if (!this.elementRef) return;
|
|
1810
|
+
this.releaseElement({ resetState: false });
|
|
1811
|
+
this.unsubscribeEventListeners?.();
|
|
1812
|
+
this.unsubscribeEventListeners = null;
|
|
1813
|
+
};
|
|
1814
|
+
this.registerSubscriptions = () => {
|
|
1815
|
+
this.unsubscribeEventListeners?.();
|
|
1816
|
+
const audioElement = this.elementRef;
|
|
1817
|
+
if (!audioElement) return;
|
|
1818
|
+
const handleEnded = () => {
|
|
1819
|
+
if (audioElement) {
|
|
1820
|
+
this.updateDurationFromElement(audioElement);
|
|
1821
|
+
}
|
|
1822
|
+
this.stop();
|
|
1823
|
+
};
|
|
1824
|
+
const handleError = (e) => {
|
|
1825
|
+
const audio = e.currentTarget;
|
|
1826
|
+
const state = { isPlaying: false };
|
|
1827
|
+
if (!audio?.error?.code) {
|
|
1828
|
+
this.state.partialNext(state);
|
|
1829
|
+
return;
|
|
1830
|
+
}
|
|
1831
|
+
if (audio.error.code === 4) {
|
|
1832
|
+
state.canPlayRecord = false;
|
|
1833
|
+
this.state.partialNext(state);
|
|
1834
|
+
}
|
|
1835
|
+
const errorMsg = [
|
|
1836
|
+
void 0,
|
|
1837
|
+
"MEDIA_ERR_ABORTED: fetch aborted by user",
|
|
1838
|
+
"MEDIA_ERR_NETWORK: network failed while fetching",
|
|
1839
|
+
"MEDIA_ERR_DECODE: audio fetched but couldn’t decode",
|
|
1840
|
+
"MEDIA_ERR_SRC_NOT_SUPPORTED: source not supported"
|
|
1841
|
+
][audio?.error?.code];
|
|
1842
|
+
if (!errorMsg) return;
|
|
1843
|
+
defaultRegisterAudioPlayerError({ error: new Error(errorMsg + ` (${audio.src})`) });
|
|
1844
|
+
};
|
|
1845
|
+
const handleTimeupdate = () => {
|
|
1846
|
+
const t = audioElement?.currentTime ?? 0;
|
|
1847
|
+
if (this._restoringPosition && t === 0) return;
|
|
1848
|
+
if (!this.isPlaying && t === 0 && this.secondsElapsed > 0) return;
|
|
1849
|
+
this.setSecondsElapsed(t);
|
|
1850
|
+
};
|
|
1851
|
+
const handleLoadedMetadata = () => {
|
|
1852
|
+
if (audioElement) {
|
|
1853
|
+
this.updateDurationFromElement(audioElement);
|
|
1854
|
+
}
|
|
1855
|
+
};
|
|
1856
|
+
audioElement.addEventListener("ended", handleEnded);
|
|
1857
|
+
audioElement.addEventListener("error", handleError);
|
|
1858
|
+
audioElement.addEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1859
|
+
audioElement.addEventListener("timeupdate", handleTimeupdate);
|
|
1860
|
+
this.unsubscribeEventListeners = () => {
|
|
1861
|
+
audioElement.pause();
|
|
1862
|
+
audioElement.removeEventListener("ended", handleEnded);
|
|
1863
|
+
audioElement.removeEventListener("error", handleError);
|
|
1864
|
+
audioElement.removeEventListener("loadedmetadata", handleLoadedMetadata);
|
|
1865
|
+
audioElement.removeEventListener("timeupdate", handleTimeupdate);
|
|
1866
|
+
};
|
|
1867
|
+
};
|
|
1868
|
+
this._data = {
|
|
1869
|
+
durationSeconds,
|
|
1870
|
+
fileSize,
|
|
1871
|
+
id,
|
|
1872
|
+
mimeType,
|
|
1873
|
+
src,
|
|
1874
|
+
title,
|
|
1875
|
+
waveformData
|
|
1876
|
+
};
|
|
1877
|
+
this._pool = pool;
|
|
1878
|
+
this.setPlugins(() => plugins ?? []);
|
|
1879
|
+
const playbackRates = customPlaybackRates?.length ? customPlaybackRates : DEFAULT_PLAYBACK_RATES;
|
|
1880
|
+
const canPlayRecord = mimeType ? !!new Audio().canPlayType(mimeType) : true;
|
|
1881
|
+
this.state = new streamChat.StateStore({
|
|
1882
|
+
canPlayRecord,
|
|
1883
|
+
currentPlaybackRate: playbackRates[0],
|
|
1884
|
+
durationSeconds,
|
|
1885
|
+
elementRef: null,
|
|
1886
|
+
isPlaying: false,
|
|
1887
|
+
playbackError: null,
|
|
1888
|
+
playbackRates,
|
|
1889
|
+
progressPercent: 0,
|
|
1890
|
+
secondsElapsed: 0
|
|
1891
|
+
});
|
|
1892
|
+
this.plugins.forEach((p) => p.onInit?.({ player: this }));
|
|
1893
|
+
this.preloadMetadata();
|
|
1894
|
+
}
|
|
1895
|
+
get plugins() {
|
|
1896
|
+
return Array.from(this._plugins.values());
|
|
1897
|
+
}
|
|
1898
|
+
get canPlayRecord() {
|
|
1899
|
+
return this.state.getLatestValue().canPlayRecord;
|
|
1900
|
+
}
|
|
1901
|
+
get elementRef() {
|
|
1902
|
+
return this.state.getLatestValue().elementRef;
|
|
1903
|
+
}
|
|
1904
|
+
get isPlaying() {
|
|
1905
|
+
return this.state.getLatestValue().isPlaying;
|
|
1906
|
+
}
|
|
1907
|
+
get currentPlaybackRate() {
|
|
1908
|
+
return this.state.getLatestValue().currentPlaybackRate;
|
|
1909
|
+
}
|
|
1910
|
+
get playbackRates() {
|
|
1911
|
+
return this.state.getLatestValue().playbackRates;
|
|
1912
|
+
}
|
|
1913
|
+
get durationSeconds() {
|
|
1914
|
+
return this.state.getLatestValue().durationSeconds;
|
|
1915
|
+
}
|
|
1916
|
+
get fileSize() {
|
|
1917
|
+
return this._data.fileSize;
|
|
1918
|
+
}
|
|
1919
|
+
get id() {
|
|
1920
|
+
return this._data.id;
|
|
1921
|
+
}
|
|
1922
|
+
get src() {
|
|
1923
|
+
return this._data.src;
|
|
1924
|
+
}
|
|
1925
|
+
get mimeType() {
|
|
1926
|
+
return this._data.mimeType;
|
|
1927
|
+
}
|
|
1928
|
+
get title() {
|
|
1929
|
+
return this._data.title;
|
|
1930
|
+
}
|
|
1931
|
+
get waveformData() {
|
|
1932
|
+
return this._data.waveformData;
|
|
1933
|
+
}
|
|
1934
|
+
get secondsElapsed() {
|
|
1935
|
+
return this.state.getLatestValue().secondsElapsed;
|
|
1936
|
+
}
|
|
1937
|
+
get progressPercent() {
|
|
1938
|
+
return this.state.getLatestValue().progressPercent;
|
|
1939
|
+
}
|
|
1940
|
+
get disposed() {
|
|
1941
|
+
return this._disposed;
|
|
1942
|
+
}
|
|
1943
|
+
ensureElementRef() {
|
|
1944
|
+
if (this._disposed) {
|
|
1945
|
+
throw new Error("AudioPlayer is disposed");
|
|
2036
1946
|
}
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
);
|
|
2043
|
-
const IconTranslate = createIcon(
|
|
2044
|
-
"IconTranslate",
|
|
2045
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2046
|
-
"path",
|
|
2047
|
-
{
|
|
2048
|
-
d: "M18.75 16.875L14.375 8.125L10 16.875M11.25 14.375H17.5M7.5 2.5V4.375M2.5 4.375H12.5M10 4.375C10 6.36412 9.20982 8.27178 7.8033 9.6783C6.39678 11.0848 4.48912 11.875 2.5 11.875M5.42734 6.875C5.94442 8.33751 6.90226 9.60371 8.16893 10.4992C9.4356 11.3947 10.9488 11.8753 12.5 11.875",
|
|
2049
|
-
fill: "none",
|
|
2050
|
-
stroke: "currentColor",
|
|
2051
|
-
strokeLinecap: "round",
|
|
2052
|
-
strokeLinejoin: "round",
|
|
2053
|
-
strokeWidth: "1.5"
|
|
1947
|
+
if (!this.elementRef) {
|
|
1948
|
+
const el = this._pool.acquireElement({
|
|
1949
|
+
ownerId: this.id,
|
|
1950
|
+
src: this.src
|
|
1951
|
+
});
|
|
1952
|
+
this.setRef(el);
|
|
2054
1953
|
}
|
|
2055
|
-
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
d: "M16.875 4.375H3.125M8.125 8.125V13.125M11.875 8.125V13.125M15.625 4.375V16.25C15.625 16.4158 15.5592 16.5747 15.4419 16.6919C15.3247 16.8092 15.1658 16.875 15 16.875H5C4.83424 16.875 4.67527 16.8092 4.55806 16.6919C4.44085 16.5747 4.375 16.4158 4.375 16.25V4.375M13.125 4.375V3.125C13.125 2.79348 12.9933 2.47554 12.7589 2.24112C12.5245 2.0067 12.2065 1.875 11.875 1.875H8.125C7.79348 1.875 7.47554 2.0067 7.24112 2.24112C7.0067 2.47554 6.875 2.79348 6.875 3.125V4.375",
|
|
2063
|
-
fill: "none",
|
|
2064
|
-
stroke: "currentColor",
|
|
2065
|
-
strokeLinecap: "round",
|
|
2066
|
-
strokeLinejoin: "round",
|
|
2067
|
-
strokeWidth: "1.5"
|
|
1954
|
+
return this.elementRef;
|
|
1955
|
+
}
|
|
1956
|
+
setDescriptor(descriptor) {
|
|
1957
|
+
const previousSrc = this.src;
|
|
1958
|
+
this._data = { ...this._data, ...descriptor };
|
|
1959
|
+
if (descriptor.src !== previousSrc && this.elementRef) {
|
|
1960
|
+
this.elementRef.src = descriptor.src;
|
|
2068
1961
|
}
|
|
2069
|
-
|
|
2070
|
-
);
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
stroke: "currentColor",
|
|
2079
|
-
strokeLinecap: "round",
|
|
2080
|
-
strokeLinejoin: "round",
|
|
2081
|
-
strokeWidth: "1.5"
|
|
1962
|
+
if (descriptor.src && descriptor.src !== previousSrc) {
|
|
1963
|
+
this.clearMetadataProbe();
|
|
1964
|
+
if (descriptor.durationSeconds == null) {
|
|
1965
|
+
this.setDurationSeconds(void 0);
|
|
1966
|
+
this.preloadMetadata();
|
|
1967
|
+
} else {
|
|
1968
|
+
this.setDurationSeconds(descriptor.durationSeconds);
|
|
1969
|
+
}
|
|
1970
|
+
return;
|
|
2082
1971
|
}
|
|
2083
|
-
|
|
2084
|
-
);
|
|
2085
|
-
const IconUnpin = createIcon(
|
|
2086
|
-
"IconUnpin",
|
|
2087
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2088
|
-
"path",
|
|
2089
|
-
{
|
|
2090
|
-
d: "M7.52271 12.4773L3.75006 16.25M3.75006 3.12498L16.2501 16.875M14.4532 11.1828L17.9415 7.68279C18.0586 7.56559 18.1244 7.40668 18.1244 7.24099C18.1244 7.0753 18.0586 6.9164 17.9415 6.7992L13.2032 2.05779C13.086 1.94067 12.9271 1.87488 12.7614 1.87488C12.5957 1.87488 12.4368 1.94067 12.3196 2.05779L9.09615 5.28904M6.58756 6.24998C5.74537 6.18435 4.57271 6.3531 3.35943 7.33201C3.29077 7.38697 3.23447 7.45581 3.19424 7.53402C3.154 7.61224 3.13072 7.69806 3.12593 7.78589C3.12114 7.87371 3.13493 7.96156 3.16642 8.04369C3.19791 8.12581 3.24637 8.20037 3.30865 8.26248L11.7383 16.6914C11.8015 16.7541 11.8773 16.8025 11.9606 16.8336C12.044 16.8646 12.133 16.8775 12.2218 16.8713C12.3105 16.8652 12.3969 16.8402 12.4752 16.798C12.5535 16.7558 12.6219 16.6973 12.6758 16.6265C13.0829 16.0851 13.6344 15.1898 13.779 14.1594",
|
|
2091
|
-
fill: "none",
|
|
2092
|
-
stroke: "currentColor",
|
|
2093
|
-
strokeLinecap: "round",
|
|
2094
|
-
strokeLinejoin: "round",
|
|
2095
|
-
strokeWidth: "1.5"
|
|
1972
|
+
if (descriptor.durationSeconds != null) {
|
|
1973
|
+
this.setDurationSeconds(descriptor.durationSeconds);
|
|
2096
1974
|
}
|
|
2097
|
-
|
|
2098
|
-
)
|
|
2099
|
-
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
1975
|
+
}
|
|
1976
|
+
releaseElement({ resetState }) {
|
|
1977
|
+
this.clearPendingLoadedMeta();
|
|
1978
|
+
this.clearMetadataProbe();
|
|
1979
|
+
this._restoringPosition = false;
|
|
1980
|
+
if (resetState) {
|
|
1981
|
+
this.stop();
|
|
1982
|
+
} else {
|
|
1983
|
+
this.state.partialNext({ isPlaying: false });
|
|
1984
|
+
if (this.elementRef) {
|
|
1985
|
+
try {
|
|
1986
|
+
this.elementRef.pause();
|
|
1987
|
+
} catch {
|
|
1988
|
+
}
|
|
2111
1989
|
}
|
|
2112
|
-
) }),
|
|
2113
|
-
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14111_491476", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
2114
|
-
] }),
|
|
2115
|
-
{ "data-rtl-mirror": "" }
|
|
2116
|
-
);
|
|
2117
|
-
const IconVideoFill = createIcon(
|
|
2118
|
-
"IconVideoFill",
|
|
2119
|
-
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2120
|
-
/* @__PURE__ */ jsxRuntime.jsx("g", { clipPath: "url(#clip0_14064_467281)", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 5.625V14.375C15 14.7065 14.8683 15.0245 14.6339 15.2589C14.3995 15.4933 14.0815 15.625 13.75 15.625H2.5C2.16848 15.625 1.85054 15.4933 1.61612 15.2589C1.3817 15.0245 1.25 14.7065 1.25 14.375V5.625C1.25 5.29348 1.3817 4.97554 1.61612 4.74112C1.85054 4.5067 2.16848 4.375 2.5 4.375H13.75C14.0815 4.375 14.3995 4.5067 14.6339 4.74112C14.8683 4.97554 15 5.29348 15 5.625ZM19.5312 5.64453C19.4431 5.62295 19.3513 5.62029 19.2621 5.63672C19.1728 5.65315 19.088 5.68829 19.0133 5.73984L16.3891 7.48906C16.3463 7.51762 16.3112 7.55631 16.2869 7.6017C16.2626 7.64708 16.25 7.69776 16.25 7.74922V12.2508C16.25 12.3022 16.2626 12.3529 16.2869 12.3983C16.3112 12.4437 16.3463 12.4824 16.3891 12.5109L19.0281 14.2703C19.1269 14.3362 19.2424 14.3726 19.3611 14.3752C19.4798 14.3779 19.5968 14.3466 19.6984 14.2852C19.7924 14.2254 19.8695 14.1425 19.9223 14.0444C19.9751 13.9464 20.0019 13.8364 20 13.725V6.25C20.0001 6.11139 19.9541 5.97668 19.8692 5.86708C19.7843 5.75747 19.6655 5.67918 19.5312 5.64453Z" }) }),
|
|
2121
|
-
/* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_14064_467281", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "white", height: "20", width: "20" }) }) })
|
|
2122
|
-
] }),
|
|
2123
|
-
{ "data-rtl-mirror": "" }
|
|
2124
|
-
);
|
|
2125
|
-
const IconAudio = createIcon(
|
|
2126
|
-
"IconAudio",
|
|
2127
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2128
|
-
"path",
|
|
2129
|
-
{
|
|
2130
|
-
d: "M15.625 8.125V11.875M18.125 6.875V13.125M6.875 13.125H3.125C2.95924 13.125 2.80027 13.0592 2.68306 12.9419C2.56585 12.8247 2.5 12.6658 2.5 12.5V7.5C2.5 7.33424 2.56585 7.17527 2.68306 7.05806C2.80027 6.94085 2.95924 6.875 3.125 6.875H6.875L12.5 2.5V17.5L6.875 13.125Z",
|
|
2131
|
-
fill: "none",
|
|
2132
|
-
stroke: "currentColor",
|
|
2133
|
-
strokeLinecap: "round",
|
|
2134
|
-
strokeLinejoin: "round",
|
|
2135
|
-
strokeWidth: "1.5"
|
|
2136
1990
|
}
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
);
|
|
2140
|
-
const IconArchive = createIcon(
|
|
2141
|
-
"IconArchive",
|
|
2142
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2143
|
-
"path",
|
|
2144
|
-
{
|
|
2145
|
-
d: "M16.875 7.5V15C16.875 15.1658 16.8092 15.3247 16.6919 15.4419C16.5747 15.5592 16.4158 15.625 16.25 15.625H3.75C3.58424 15.625 3.42527 15.5592 3.30806 15.4419C3.19085 15.3247 3.125 15.1658 3.125 15V7.5M8.125 10.625H11.875M2.5 4.375H17.5C17.8452 4.375 18.125 4.65482 18.125 5V6.875C18.125 7.22018 17.8452 7.5 17.5 7.5H2.5C2.15482 7.5 1.875 7.22018 1.875 6.875V5C1.875 4.65482 2.15482 4.375 2.5 4.375Z",
|
|
2146
|
-
fill: "none",
|
|
2147
|
-
stroke: "currentColor",
|
|
2148
|
-
strokeLinecap: "round",
|
|
2149
|
-
strokeLinejoin: "round",
|
|
2150
|
-
strokeWidth: "1.5"
|
|
1991
|
+
if (this.elementRef) {
|
|
1992
|
+
this._pool.releaseElement(this.id);
|
|
1993
|
+
this.setRef(null);
|
|
2151
1994
|
}
|
|
2152
|
-
|
|
2153
|
-
)
|
|
2154
|
-
|
|
2155
|
-
|
|
2156
|
-
|
|
2157
|
-
|
|
2158
|
-
|
|
2159
|
-
|
|
2160
|
-
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
|
|
2164
|
-
|
|
1995
|
+
}
|
|
1996
|
+
setPlugins(setter) {
|
|
1997
|
+
this._plugins = setter(this.plugins).reduce((acc, plugin) => {
|
|
1998
|
+
if (plugin.id) {
|
|
1999
|
+
acc.set(plugin.id, plugin);
|
|
2000
|
+
}
|
|
2001
|
+
return acc;
|
|
2002
|
+
}, /* @__PURE__ */ new Map());
|
|
2003
|
+
}
|
|
2004
|
+
}
|
|
2005
|
+
class AudioPlayerPool {
|
|
2006
|
+
constructor(config) {
|
|
2007
|
+
this.state = new streamChat.StateStore({
|
|
2008
|
+
activeAudioPlayer: null
|
|
2009
|
+
});
|
|
2010
|
+
this.pool = /* @__PURE__ */ new Map();
|
|
2011
|
+
this.audios = /* @__PURE__ */ new Map();
|
|
2012
|
+
this.sharedAudio = null;
|
|
2013
|
+
this.sharedOwnerId = null;
|
|
2014
|
+
this.getOrAdd = (params) => {
|
|
2015
|
+
const { playbackRates, plugins, ...descriptor } = params;
|
|
2016
|
+
let player = this.pool.get(params.id);
|
|
2017
|
+
if (player) {
|
|
2018
|
+
if (!player.disposed) {
|
|
2019
|
+
player.setDescriptor(descriptor);
|
|
2020
|
+
return player;
|
|
2021
|
+
}
|
|
2022
|
+
this.deregister(params.id);
|
|
2165
2023
|
}
|
|
2166
|
-
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2024
|
+
player = new AudioPlayer({
|
|
2025
|
+
playbackRates,
|
|
2026
|
+
plugins,
|
|
2027
|
+
...descriptor,
|
|
2028
|
+
pool: this
|
|
2029
|
+
});
|
|
2030
|
+
this.pool.set(params.id, player);
|
|
2031
|
+
return player;
|
|
2032
|
+
};
|
|
2033
|
+
this.acquireElement = ({ ownerId, src }) => {
|
|
2034
|
+
if (!this.allowConcurrentPlayback) {
|
|
2035
|
+
if (!this.sharedAudio) {
|
|
2036
|
+
this.sharedAudio = new Audio();
|
|
2037
|
+
}
|
|
2038
|
+
if (this.sharedOwnerId && this.sharedOwnerId !== ownerId) {
|
|
2039
|
+
const previous = this.pool.get(this.sharedOwnerId);
|
|
2040
|
+
previous?.pause();
|
|
2041
|
+
previous?.releaseElementForHandoff();
|
|
2042
|
+
}
|
|
2043
|
+
this.sharedOwnerId = ownerId;
|
|
2044
|
+
if (this.sharedAudio.src !== src) {
|
|
2045
|
+
this.sharedAudio.src = src;
|
|
2046
|
+
}
|
|
2047
|
+
return this.sharedAudio;
|
|
2175
2048
|
}
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
);
|
|
2179
|
-
|
|
2180
|
-
"IconGiphy",
|
|
2181
|
-
/* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2182
|
-
/* @__PURE__ */ jsxRuntime.jsx("rect", { fill: "black", height: "20", rx: "10", width: "20" }),
|
|
2183
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2184
|
-
"path",
|
|
2185
|
-
{
|
|
2186
|
-
clipRule: "evenodd",
|
|
2187
|
-
d: "M6.5997 5.50024H13.4008V14.4999H6.59912L6.5997 5.50024Z",
|
|
2188
|
-
fill: "black",
|
|
2189
|
-
fillRule: "evenodd"
|
|
2049
|
+
let audio = this.audios.get(ownerId);
|
|
2050
|
+
if (!audio) {
|
|
2051
|
+
audio = new Audio();
|
|
2052
|
+
this.audios.set(ownerId, audio);
|
|
2190
2053
|
}
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
|
|
2054
|
+
if (audio.src !== src) {
|
|
2055
|
+
audio.src = src;
|
|
2056
|
+
}
|
|
2057
|
+
return audio;
|
|
2058
|
+
};
|
|
2059
|
+
this.releaseElement = (ownerId) => {
|
|
2060
|
+
if (!this.allowConcurrentPlayback) {
|
|
2061
|
+
if (this.sharedOwnerId !== ownerId) return;
|
|
2062
|
+
const el2 = this.sharedAudio;
|
|
2063
|
+
if (el2) {
|
|
2064
|
+
try {
|
|
2065
|
+
el2.pause();
|
|
2066
|
+
} catch {
|
|
2067
|
+
}
|
|
2068
|
+
el2.removeAttribute("src");
|
|
2069
|
+
el2.load();
|
|
2070
|
+
}
|
|
2071
|
+
this.sharedOwnerId = null;
|
|
2072
|
+
return;
|
|
2073
|
+
}
|
|
2074
|
+
const el = this.audios.get(ownerId);
|
|
2075
|
+
if (!el) return;
|
|
2076
|
+
try {
|
|
2077
|
+
el.pause();
|
|
2078
|
+
} catch {
|
|
2201
2079
|
}
|
|
2080
|
+
el.removeAttribute("src");
|
|
2081
|
+
el.load();
|
|
2082
|
+
this.audios.delete(ownerId);
|
|
2083
|
+
};
|
|
2084
|
+
this.setActiveAudioPlayer = (activeAudioPlayer) => {
|
|
2085
|
+
if (this.allowConcurrentPlayback) return;
|
|
2086
|
+
this.state.partialNext({ activeAudioPlayer });
|
|
2087
|
+
};
|
|
2088
|
+
this.remove = (id) => {
|
|
2089
|
+
const player = this.pool.get(id);
|
|
2090
|
+
if (!player) return;
|
|
2091
|
+
player.requestRemoval();
|
|
2092
|
+
};
|
|
2093
|
+
this.clear = () => {
|
|
2094
|
+
this.players.forEach((player) => {
|
|
2095
|
+
this.remove(player.id);
|
|
2096
|
+
});
|
|
2097
|
+
};
|
|
2098
|
+
this.registerSubscriptions = () => {
|
|
2099
|
+
this.players.forEach((p) => {
|
|
2100
|
+
if (p.elementRef) {
|
|
2101
|
+
p.registerSubscriptions();
|
|
2102
|
+
}
|
|
2103
|
+
});
|
|
2104
|
+
};
|
|
2105
|
+
this.allowConcurrentPlayback = !!config?.allowConcurrentPlayback;
|
|
2106
|
+
}
|
|
2107
|
+
get players() {
|
|
2108
|
+
return Array.from(this.pool.values());
|
|
2109
|
+
}
|
|
2110
|
+
get activeAudioPlayer() {
|
|
2111
|
+
return this.state.getLatestValue().activeAudioPlayer;
|
|
2112
|
+
}
|
|
2113
|
+
/** Removes the AudioPlayer instance from the pool of players */
|
|
2114
|
+
deregister(id) {
|
|
2115
|
+
if (this.pool.has(id)) {
|
|
2116
|
+
this.pool.delete(id);
|
|
2117
|
+
}
|
|
2118
|
+
if (this.activeAudioPlayer?.id === id) {
|
|
2119
|
+
this.setActiveAudioPlayer(null);
|
|
2120
|
+
}
|
|
2121
|
+
}
|
|
2122
|
+
}
|
|
2123
|
+
const SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS = 1e3;
|
|
2124
|
+
const audioPlayerNotificationsPluginFactory = ({
|
|
2125
|
+
addNotification,
|
|
2126
|
+
panel = "channel",
|
|
2127
|
+
t
|
|
2128
|
+
}) => {
|
|
2129
|
+
const errors = {
|
|
2130
|
+
"failed-to-start": new Error(t("Failed to play the recording")),
|
|
2131
|
+
"not-playable": new Error(
|
|
2132
|
+
t("Recording format is not supported and cannot be reproduced")
|
|
2202
2133
|
),
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2134
|
+
"seek-not-supported": new Error(t("Cannot seek in the recording"))
|
|
2135
|
+
};
|
|
2136
|
+
let lastSeekNotSupportedNotificationAt;
|
|
2137
|
+
return {
|
|
2138
|
+
id: "AudioPlayerNotificationsPlugin",
|
|
2139
|
+
onError: ({ errCode, error: e }) => {
|
|
2140
|
+
if (errCode === "seek-not-supported") {
|
|
2141
|
+
const now = Date.now();
|
|
2142
|
+
if (typeof lastSeekNotSupportedNotificationAt === "number" && now - lastSeekNotSupportedNotificationAt < SEEK_NOT_SUPPORTED_NOTIFICATION_DEBOUNCE_INTERVAL_MS) {
|
|
2143
|
+
return;
|
|
2144
|
+
}
|
|
2145
|
+
lastSeekNotSupportedNotificationAt = now;
|
|
2211
2146
|
}
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2147
|
+
const error = (errCode && errors[errCode]) ?? e ?? new Error(t("Error reproducing the recording"));
|
|
2148
|
+
addNotification({
|
|
2149
|
+
emitter: "AudioPlayer",
|
|
2150
|
+
error,
|
|
2151
|
+
message: error.message,
|
|
2152
|
+
severity: "error",
|
|
2153
|
+
targetPanels: [panel],
|
|
2154
|
+
type: "browser:audio:playback:error"
|
|
2155
|
+
});
|
|
2156
|
+
}
|
|
2157
|
+
};
|
|
2158
|
+
};
|
|
2159
|
+
const NOTIFICATION_TARGET_PANELS = [
|
|
2160
|
+
"channel",
|
|
2161
|
+
"thread",
|
|
2162
|
+
"channel-list",
|
|
2163
|
+
"thread-list"
|
|
2164
|
+
];
|
|
2165
|
+
const isNotificationTargetPanel = (value) => typeof value === "string" && NOTIFICATION_TARGET_PANELS.includes(value);
|
|
2166
|
+
const getNotificationTargetPanel = (notification) => {
|
|
2167
|
+
const targetTag = notification.tags?.find((tag) => tag.startsWith("target:"));
|
|
2168
|
+
if (targetTag) {
|
|
2169
|
+
const candidate = targetTag.slice("target:".length);
|
|
2170
|
+
if (isNotificationTargetPanel(candidate)) return candidate;
|
|
2171
|
+
}
|
|
2172
|
+
const panel = notification.origin.context?.panel;
|
|
2173
|
+
return isNotificationTargetPanel(panel) ? panel : void 0;
|
|
2174
|
+
};
|
|
2175
|
+
const getNotificationTargetPanels = (notification) => {
|
|
2176
|
+
const targetPanels = (notification.tags ?? []).filter((tag) => tag.startsWith("target:")).map((tag) => tag.slice("target:".length)).filter(
|
|
2177
|
+
(value) => isNotificationTargetPanel(value)
|
|
2178
|
+
);
|
|
2179
|
+
if (targetPanels.length > 0) {
|
|
2180
|
+
return Array.from(new Set(targetPanels));
|
|
2181
|
+
}
|
|
2182
|
+
const panel = notification.origin.context?.panel;
|
|
2183
|
+
return isNotificationTargetPanel(panel) ? [panel] : [];
|
|
2184
|
+
};
|
|
2185
|
+
const getNotificationTargetTag = (panel) => `target:${panel}`;
|
|
2186
|
+
const addNotificationTargetTag = (panel, tags) => {
|
|
2187
|
+
if (!panel) return tags ?? [];
|
|
2188
|
+
return Array.from(/* @__PURE__ */ new Set([getNotificationTargetTag(panel), ...tags ?? []]));
|
|
2189
|
+
};
|
|
2190
|
+
const isNotificationForPanel = (notification, panel, options) => {
|
|
2191
|
+
const explicitTargetPanels = getNotificationTargetPanels(notification);
|
|
2192
|
+
if (explicitTargetPanels.length > 0) {
|
|
2193
|
+
return explicitTargetPanels.includes(panel);
|
|
2194
|
+
}
|
|
2195
|
+
const resolvedPanel = options?.fallbackPanel ?? "channel";
|
|
2196
|
+
return resolvedPanel === panel;
|
|
2197
|
+
};
|
|
2198
|
+
const variantToClass = {
|
|
2199
|
+
danger: "str-chat__button--destructive",
|
|
2200
|
+
primary: "str-chat__button--primary",
|
|
2201
|
+
secondary: "str-chat__button--secondary"
|
|
2202
|
+
};
|
|
2203
|
+
const appearanceToClass = {
|
|
2204
|
+
ghost: "str-chat__button--ghost",
|
|
2205
|
+
outline: "str-chat__button--outline",
|
|
2206
|
+
solid: "str-chat__button--solid"
|
|
2207
|
+
};
|
|
2208
|
+
const sizeToClass = {
|
|
2209
|
+
lg: "str-chat__button--size-lg",
|
|
2210
|
+
md: "str-chat__button--size-md",
|
|
2211
|
+
sm: "str-chat__button--size-sm",
|
|
2212
|
+
xs: "str-chat__button--size-xs"
|
|
2213
|
+
};
|
|
2214
|
+
const Button = React.forwardRef(function Button2({ appearance, children, circular, className, inverseTheme, size, variant, ...props }, ref) {
|
|
2215
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
2216
|
+
"button",
|
|
2217
|
+
{
|
|
2218
|
+
ref,
|
|
2219
|
+
type: "button",
|
|
2220
|
+
...props,
|
|
2221
|
+
className: clsx(
|
|
2222
|
+
"str-chat__button",
|
|
2223
|
+
variant != null && variantToClass[variant],
|
|
2224
|
+
appearance != null && appearanceToClass[appearance],
|
|
2225
|
+
circular && "str-chat__button--circular",
|
|
2226
|
+
inverseTheme && "str-chat__theme-inverse",
|
|
2227
|
+
size != null && sizeToClass[size],
|
|
2228
|
+
className
|
|
2229
|
+
),
|
|
2230
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "str-chat__button__content", children })
|
|
2231
|
+
}
|
|
2232
|
+
);
|
|
2233
|
+
});
|
|
2215
2234
|
const UnMemoizedEmptyStateIndicator = (props) => {
|
|
2216
2235
|
const { listType, messageText } = props;
|
|
2217
2236
|
const { t } = useTranslationContext("EmptyStateIndicator");
|
|
@@ -2684,6 +2703,7 @@ const OPTIONAL_MESSAGE_ACTIONS = {
|
|
|
2684
2703
|
};
|
|
2685
2704
|
const MESSAGE_ACTIONS = {
|
|
2686
2705
|
delete: "delete",
|
|
2706
|
+
download: "download",
|
|
2687
2707
|
edit: "edit",
|
|
2688
2708
|
flag: "flag",
|
|
2689
2709
|
markUnread: "markUnread",
|
|
@@ -2710,7 +2730,7 @@ const getMessageActions = (actions, {
|
|
|
2710
2730
|
let messageActions = [];
|
|
2711
2731
|
if (actions && typeof actions === "boolean") {
|
|
2712
2732
|
messageActions = Object.keys(MESSAGE_ACTIONS);
|
|
2713
|
-
} else if (actions && actions.length > 0) {
|
|
2733
|
+
} else if (actions && Array.isArray(actions) && actions.length > 0) {
|
|
2714
2734
|
messageActions = [...actions];
|
|
2715
2735
|
} else {
|
|
2716
2736
|
return [];
|
|
@@ -2718,6 +2738,9 @@ const getMessageActions = (actions, {
|
|
|
2718
2738
|
if (canDelete && messageActions.indexOf(MESSAGE_ACTIONS.delete) > -1) {
|
|
2719
2739
|
messageActionsAfterPermission.push(MESSAGE_ACTIONS.delete);
|
|
2720
2740
|
}
|
|
2741
|
+
if (messageActions.indexOf(MESSAGE_ACTIONS.download) > -1) {
|
|
2742
|
+
messageActionsAfterPermission.push(MESSAGE_ACTIONS.download);
|
|
2743
|
+
}
|
|
2721
2744
|
if (canDelete && messageActions.indexOf(OPTIONAL_MESSAGE_ACTIONS.deleteForMe) > -1) {
|
|
2722
2745
|
messageActionsAfterPermission.push(OPTIONAL_MESSAGE_ACTIONS.deleteForMe);
|
|
2723
2746
|
}
|
|
@@ -2870,6 +2893,7 @@ const isMessageErrorRetryable = (message) => message.status === "failed" && mess
|
|
|
2870
2893
|
const isNetworkSendFailure = (message) => message.status === "failed" && message.error?.status === 0;
|
|
2871
2894
|
const isMessageBounced = (message) => message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_BOUNCE" || message.moderation?.action === "bounce");
|
|
2872
2895
|
const isMessageBlocked = (message) => message.type === "error" && (message.moderation_details?.action === "MESSAGE_RESPONSE_ACTION_REMOVE" || message.moderation?.action === "remove");
|
|
2896
|
+
const isMessageDeleted = (message) => Boolean(message.deleted_at || message.type === "deleted" || message.deleted_for_me);
|
|
2873
2897
|
const isMessageEdited = (message) => !!message.message_text_updated_at;
|
|
2874
2898
|
const hasResizeObserver = typeof window !== "undefined" && "ResizeObserver" in window;
|
|
2875
2899
|
function autoMiddlewareFor(p) {
|
|
@@ -4598,6 +4622,7 @@ exports.IconClock = IconClock;
|
|
|
4598
4622
|
exports.IconCommand = IconCommand;
|
|
4599
4623
|
exports.IconCopy = IconCopy;
|
|
4600
4624
|
exports.IconDelete = IconDelete;
|
|
4625
|
+
exports.IconDownload = IconDownload;
|
|
4601
4626
|
exports.IconEdit = IconEdit;
|
|
4602
4627
|
exports.IconEmoji = IconEmoji;
|
|
4603
4628
|
exports.IconEmojiAdd = IconEmojiAdd;
|
|
@@ -4705,6 +4730,7 @@ exports.isLanguageSupported = isLanguageSupported;
|
|
|
4705
4730
|
exports.isLocalMessage = isLocalMessage;
|
|
4706
4731
|
exports.isMessageBlocked = isMessageBlocked;
|
|
4707
4732
|
exports.isMessageBounced = isMessageBounced;
|
|
4733
|
+
exports.isMessageDeleted = isMessageDeleted;
|
|
4708
4734
|
exports.isMessageEdited = isMessageEdited;
|
|
4709
4735
|
exports.isMessageErrorRetryable = isMessageErrorRetryable;
|
|
4710
4736
|
exports.isNetworkSendFailure = isNetworkSendFailure;
|
|
@@ -4747,4 +4773,4 @@ exports.useThreadsViewContext = useThreadsViewContext;
|
|
|
4747
4773
|
exports.useTranslationContext = useTranslationContext;
|
|
4748
4774
|
exports.useTypingContext = useTypingContext;
|
|
4749
4775
|
exports.validateAndGetMessage = validateAndGetMessage;
|
|
4750
|
-
//# sourceMappingURL=WithAudioPlayback.
|
|
4776
|
+
//# sourceMappingURL=WithAudioPlayback.d26afa91.js.map
|