@cloudflare/realtimekit-ui 0.0.0 → 1.0.0-staging.10

package/dist/esm/rtk-audio-tile.entry.js

@@ -0,0 +1,126 @@
+import { r as registerInstance, h, H as Host } from './index-c1fb98bb.js';
+import { a as defaultIconPack, c as useLanguage } from './ui-store-b453cdf2.js';
+import { h as hark } from './hark-6327d91e.js';
+import { S as SyncWithStore } from './index-6aaa85ca.js';
+
+const rtkAudioTileCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:flex;flex-direction:column}.avatar-ctr{box-sizing:border-box;width:100%;flex:1 1 0%;padding:var(--rtk-space-1\\.5, 6px);border:2px solid transparent;border-radius:calc(var(--rtk-border-radius-xl, 40px) + var(--rtk-space-1\\.5, 6px))}.avatar-ctr.speaking{--tw-border-opacity:1;border-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-border-opacity));transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.bar-0{box-shadow:none}.bar-1{box-shadow:0 0 4px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-2{box-shadow:0 0 8px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-3{box-shadow:0 0 16px 1px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-4{box-shadow:0 0 20px 3px rgb(var(--rtk-colors-brand-500, 33 96 253))}.bar-5{box-shadow:0 0 24px 6px rgb(var(--rtk-colors-brand-500, 33 96 253))}rtk-avatar{aspect-ratio:1 / 1;height:100%;width:100%;position:relative;border-radius:var(--rtk-border-radius-xl, 40px)}rtk-name-tag{display:block;height:var(--rtk-space-10, 40px);width:100%;text-align:center;line-height:2.5rem}:host([size='sm']) .avatar-ctr{border-radius:calc(var(--rtk-border-radius-lg, 12px) + var(--rtk-space-1\\.5, 6px))}:host([size='sm']) rtk-name-tag{height:var(--rtk-space-7, 28px);line-height:1.75rem}:host([size='sm']) rtk-avatar{border-radius:var(--rtk-border-radius-lg, 12px)}.mic-icon{position:absolute;bottom:calc(var(--rtk-space-1, 4px) * -1);right:calc(var(--rtk-space-1, 4px) * -1);border-radius:9999px;--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-600, 60 60 60) / var(--tw-bg-opacity));padding:var(--rtk-space-2, 8px);color:rgb(var(--rtk-colors-text-1000, 255 255 255));--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.mic-icon rtk-icon{height:var(--rtk-space-7, 28px);width:var(--rtk-space-7, 28px)}:host([size='sm']) .mic-icon rtk-icon{height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px)}:host([size='md']) .mic-icon rtk-icon{height:var(--rtk-space-5, 20px);width:var(--rtk-space-5, 20px)}";
+const RtkAudioTileStyle0 = rtkAudioTileCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkAudioTile = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.audioEnabled = false;
+        this.volume = 0;
+        this.onAudioUpdate = ({ audioEnabled, audioTrack, }) => {
+            if (!this.participant)
+                return;
+            if (audioEnabled && audioTrack) {
+                const stream = new MediaStream();
+                stream.addTrack(audioTrack);
+                this.calcVolume(stream);
+                this.audioEnabled = true;
+            }
+            else {
+                this.volume = 0;
+                this.audioEnabled = false;
+            }
+        };
+    }
+    connectedCallback() {
+        this.participantChanged(this.participant);
+    }
+    disconnectedCallback() {
+        var _a, _b;
+        (_a = this.hark) === null || _a === void 0 ? void 0 : _a.stop();
+        (_b = this.participant) === null || _b === void 0 ? void 0 : _b.removeListener('audioUpdate', this.onAudioUpdate);
+    }
+    participantChanged(participant) {
+        if (!participant) {
+            return;
+        }
+        this.audioEnabled = participant.audioEnabled;
+        participant.addListener('audioUpdate', this.onAudioUpdate);
+    }
+    /**
+     * Determines the volume from a given MediaStream and updates the components state
+     * @param stream A MediaStream with AudioTrack(s) added
+     */
+    calcVolume(stream) {
+        this.hark = hark(stream, {
+            play: false,
+            interval: 1000 / 10,
+        });
+        this.hark.on('volume_change', (dBs) => {
+            const prevVolume = this.volume;
+            // The exact formula to convert from dBs (-100..0) to linear (0..1) is:
+            //   Math.pow(10, dBs / 20)
+            // However it does not produce a visually useful output, so let exagerate
+            // it a bit. Also, let convert it from 0..1 to 0..10 and avoid value 1 to
+            // minimize component renderings.
+            // if dBs is -Inifnity, set vol to 0
+            let audioVol = Math.round(10 ** (dBs / 115) * 10);
+            if (audioVol < 3)
+                audioVol = 0;
+            let volume = Math.round((prevVolume * 2 + audioVol) / 3);
+            if (prevVolume !== volume) {
+                this.volume = volume;
+            }
+        });
+    }
+    render() {
+        const defaults = {
+            meeting: this.meeting,
+            size: this.size,
+            config: this.config,
+            states: this.states,
+            iconPack: this.iconPack,
+            t: this.t,
+        };
+        let shadowClass = 'bar-0';
+        if (this.volume > 5) {
+            shadowClass = 'bar-5';
+        }
+        else if (this.volume < 0) {
+            shadowClass = 'bar-0';
+        }
+        else {
+            shadowClass = 'bar-' + this.volume;
+        }
+        return (h(Host, { key: 'cff0c840f6dcd8ae6514ee4b8b0c6680d4ebf8ff' }, h("div", { key: 'c43dbfcc26c20d0d7487a234624709ad9bf14f6f', class: { 'avatar-ctr': true, speaking: this.audioEnabled, [shadowClass]: true } }, h("rtk-avatar", { key: '5a638ea3a636f645eaab2638353fb49697a431c0', participant: this.participant, size: this.size }, !this.audioEnabled && (h("div", { key: 'f8a6bc0a24906df10870c827faeca7f8f343306a', class: "mic-icon" }, h("rtk-icon", { key: 'a7777ba5bb5b78329556b6af19495425827915ec', icon: defaultIconPack.mic_off }))))), h("rtk-name-tag", Object.assign({ key: 'a7d4bea44bfde23323e52917ee197c5558cef8ba', variant: "text", participant: this.participant }, defaults)), h("slot", { key: '370b16462a7be42a663a58288105ad46c0e6f3d3' })));
+    }
+    static get watchers() { return {
+        "participant": ["participantChanged"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkAudioTile.prototype, "meeting", void 0);
+__decorate([
+    SyncWithStore()
+], RtkAudioTile.prototype, "size", void 0);
+__decorate([
+    SyncWithStore()
+], RtkAudioTile.prototype, "states", void 0);
+__decorate([
+    SyncWithStore()
+], RtkAudioTile.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkAudioTile.prototype, "t", void 0);
+RtkAudioTile.style = RtkAudioTileStyle0;
+
+export { RtkAudioTile as rtk_audio_tile };

package/dist/esm/rtk-audio-visualizer_4.entry.js

@@ -0,0 +1,494 @@
+import { r as registerInstance, h, H as Host, w as writeTask, c as createEvent } from './index-c1fb98bb.js';
+import { h as hark } from './hark-6327d91e.js';
+import { a as defaultIconPack, c as useLanguage, e as disableSettingSinkId } from './ui-store-b453cdf2.js';
+import { S as SyncWithStore } from './index-6aaa85ca.js';
+
+/**
+ * Draws audio visualizer of variant `bars`
+ * @param canvas Canvas element
+ * @param volume Current volume
+ */
+const drawBarsVisualizer = (canvas, volume) => {
+    if (canvas == null) {
+        return;
+    }
+    const nSlices = 3;
+    const halfwaySlice = Math.round(nSlices / 2);
+    const sample = [...Array(nSlices)].map((_, i) => {
+        let index = i;
+        if (index > halfwaySlice - 1) {
+            index = nSlices - index - 1;
+        }
+        return Math.round(((index + 1) / (halfwaySlice + 1)) * volume);
+    });
+    const { width, height } = canvas;
+    const context = canvas.getContext('2d');
+    let x = 2;
+    const sliceGraphicWidth = 4;
+    const sliceWidth = (width * 1.0) / sample.length;
+    const slicePadding = sliceWidth - sliceGraphicWidth;
+    context.clearRect(0, 0, width, height);
+    context.fillStyle = 'rgb(0,0,0,0.0)';
+    context.fillRect(0, 0, width, height);
+    const color = getComputedStyle(canvas).getPropertyValue('color');
+    context.fillStyle = color;
+    context.strokeStyle = color;
+    context.lineCap = 'round';
+    context.lineWidth = 4;
+    context.beginPath();
+    for (const item of sample) {
+        const y = Math.min(-Math.abs(((item * 1.2) / 10) * height) + height / 2, height / 2 - 2.5);
+        const sliceHeight = Math.max((height / 2 - y) * 2, 5);
+        context.moveTo(x + slicePadding / 2, y);
+        context.lineTo(x + slicePadding / 2, y + sliceHeight);
+        x += sliceWidth;
+    }
+    context.stroke();
+};
+
+const rtkAudioVisualizerCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{display:block;width:-moz-fit-content;width:fit-content}.hideMuted{padding:var(--rtk-space-1, 4px)}canvas,rtk-icon{height:var(--rtk-space-6, 24px);width:var(--rtk-space-6, 24px)}:host([size='sm']){transform:scale(0.9)}canvas{display:none}canvas.visible{display:block}canvas.bars{--tw-text-opacity:1;color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-text-opacity))}";
+const RtkAudioVisualizerStyle0 = rtkAudioVisualizerCss;
+
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkAudioVisualizer = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Variant */
+        this.variant = 'bars';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        /** Hide when there is no audio / audio is muted */
+        this.hideMuted = false;
+        /** Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack */
+        this.isScreenShare = false;
+        this.volume = 0;
+    }
+    connectedCallback() {
+        this.participantChanged(this.participant);
+    }
+    componentDidLoad() {
+        drawBarsVisualizer(this.visualizer, 0);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.hark) === null || _a === void 0 ? void 0 : _a.stop();
+        this.audioUpdateListener &&
+            ((_b = this.participant) === null || _b === void 0 ? void 0 : _b.removeListener('audioUpdate', this.audioUpdateListener));
+        this.screenShareUpdateListener &&
+            ((_c = this.participant) === null || _c === void 0 ? void 0 : _c.removeListener('screenShareUpdate', this.screenShareUpdateListener));
+    }
+    participantChanged(participant) {
+        if (participant != null) {
+            this.audioUpdateListener = ({ audioEnabled, audioTrack }) => {
+                var _a;
+                (_a = this.hark) === null || _a === void 0 ? void 0 : _a.stop();
+                if (audioEnabled && audioTrack != null) {
+                    this.audioEnabled = true;
+                    const stream = new MediaStream();
+                    stream.addTrack(audioTrack);
+                    this.calcVolume(stream);
+                    // initial draw with volume: 0
+                    drawBarsVisualizer(this.visualizer, 0);
+                }
+                else {
+                    this.volume = 0;
+                    this.audioEnabled = false;
+                }
+            };
+            if (this.isScreenShare) {
+                this.screenShareUpdateListener = ({ screenShareEnabled, screenShareTracks }) => {
+                    this.audioUpdateListener({
+                        audioEnabled: screenShareEnabled && screenShareTracks.audio != null,
+                        audioTrack: screenShareTracks.audio,
+                    });
+                };
+                this.screenShareUpdateListener({
+                    screenShareEnabled: participant.screenShareEnabled,
+                    screenShareTracks: {
+                        audio: participant.screenShareTracks.audio,
+                        video: participant.screenShareTracks.video,
+                    },
+                });
+                participant.addListener('screenShareUpdate', this.screenShareUpdateListener);
+            }
+            else {
+                this.audioUpdateListener(participant);
+                participant.addListener('audioUpdate', this.audioUpdateListener);
+            }
+        }
+    }
+    /**
+     * Determines the volume from a given MediaStream and updates the components state
+     * @param stream A MediaStream with AudioTrack(s) added
+     */
+    calcVolume(stream) {
+        this.hark = hark(stream, {
+            play: false,
+            interval: 1000 / 10,
+        });
+        this.hark.on('volume_change', (dBs) => {
+            const prevVolume = this.volume;
+            // The exact formula to convert from dBs (-100..0) to linear (0..1) is:
+            //   Math.pow(10, dBs / 20)
+            // However it does not produce a visually useful output, so let exagerate
+            // it a bit. Also, let convert it from 0..1 to 0..10 and avoid value 1 to
+            // minimize component renderings.
+            // if dBs is -Inifnity, set vol to 0
+            let audioVol = Math.round(10 ** (dBs / 115) * 10);
+            if (audioVol < 3)
+                audioVol = 0;
+            let volume = Math.round((prevVolume * 2 + audioVol) / 3);
+            if (prevVolume !== volume) {
+                this.volume = volume;
+                drawBarsVisualizer(this.visualizer, this.volume);
+            }
+        });
+    }
+    render() {
+        return (h(Host, { key: '349422ab6a49e3c2dd84f0f41b51828dfd571d20' }, h("div", { key: '7564acaefc95a3610db3020a8e0de44f9d8bff48', class: {
+                hideMuted: this.hideMuted,
+            } }, h("canvas", { key: '870ff1f131c8727ac52b6126fbb3c0080756c82d', width: "24", height: "24", class: {
+                bars: true,
+                visible: this.audioEnabled,
+            }, ref: (el) => (this.visualizer = el), part: "canvas" }), !this.isScreenShare && !this.audioEnabled && this.hideMuted !== true && (h("rtk-icon", { key: '868d229037f6029ec95ab38b1345783a95fe5c6d', icon: this.iconPack.mic_off, part: "mic-off-icon" })))));
+    }
+    static get watchers() { return {
+        "participant": ["participantChanged"]
+    }; }
+};
+__decorate$3([
+    SyncWithStore()
+], RtkAudioVisualizer.prototype, "size", void 0);
+__decorate$3([
+    SyncWithStore()
+], RtkAudioVisualizer.prototype, "iconPack", void 0);
+__decorate$3([
+    SyncWithStore()
+], RtkAudioVisualizer.prototype, "t", void 0);
+RtkAudioVisualizer.style = RtkAudioVisualizerStyle0;
+
+const rtkMicrophoneSelectorCss = ".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{margin-bottom:var(--rtk-space-2, 8px);display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.inline.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0\\.5, 2px)}.inline.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline.container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}";
+const RtkMicrophoneSelectorStyle0 = rtkMicrophoneSelectorCss;
+
+var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkMicrophoneSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** variant */
+        this.variant = 'full';
+        /** Language */
+        this.t = useLanguage();
+        this.audioinputDevices = [];
+        this.canProduceAudio = true;
+        this.currentDevices = { audio: undefined };
+        this.stageStateListener = () => {
+            this.canProduceAudio = this.meeting.self.permissions.canProduceAudio === 'ALLOWED';
+        };
+        this.deviceListUpdateListener = async () => {
+            const devices = await this.meeting.self.getAudioDevices();
+            this.audioinputDevices = devices;
+        };
+        this.deviceUpdateListener = ({ device }) => {
+            if (device.kind === 'audioinput') {
+                this.currentDevices = {
+                    audio: device,
+                };
+            }
+        };
+        this.mediaPermissionUpdateListener = async ({ kind, message }) => {
+            if (!this.meeting)
+                return;
+            if (kind === 'audio' && message === 'ACCEPTED') {
+                this.audioinputDevices = await this.meeting.self.getAudioDevices();
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c, _d, _e;
+        (_b = (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.stage) === null || _b === void 0 ? void 0 : _b.removeListener('stageStatusUpdate', this.stageStateListener);
+        (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
+        (_d = this.meeting) === null || _d === void 0 ? void 0 : _d.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+        (_e = this.meeting) === null || _e === void 0 ? void 0 : _e.self.removeListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+    }
+    meetingChanged(meeting) {
+        if (meeting == null)
+            return;
+        writeTask(async () => {
+            var _a, _b;
+            const { self, stage } = meeting;
+            const audioDevices = await meeting.self.getAudioDevices();
+            const currentAudioDevice = (_a = meeting.self.getCurrentDevices()) === null || _a === void 0 ? void 0 : _a.audio;
+            this.currentDevices = {
+                audio: currentAudioDevice,
+            };
+            this.canProduceAudio = this.meeting.self.permissions.canProduceAudio === 'ALLOWED';
+            stage === null || stage === void 0 ? void 0 : stage.addListener('stageStatusUpdate', this.stageStateListener);
+            self.addListener('deviceListUpdate', this.deviceListUpdateListener);
+            self.addListener('deviceUpdate', this.deviceUpdateListener);
+            self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdateListener);
+            if (currentAudioDevice != undefined) {
+                this.audioinputDevices = [
+                    (_b = audioDevices.find((device) => device.deviceId === currentAudioDevice.deviceId)) !== null && _b !== void 0 ? _b : currentAudioDevice,
+                    ...audioDevices.filter((device) => device.deviceId !== currentAudioDevice.deviceId),
+                ];
+            }
+            else {
+                this.audioinputDevices = audioDevices;
+            }
+        });
+    }
+    setDevice(deviceId) {
+        var _a;
+        if (disableSettingSinkId(this.meeting))
+            return;
+        const device = this.audioinputDevices.find((d) => d.deviceId === deviceId);
+        if (device != null) {
+            this.currentDevices = {
+                audio: device,
+            };
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.setDevice(device);
+        }
+    }
+    render() {
+        if (this.meeting == null)
+            return null;
+        let unnamedMicCount = 0;
+        return (h(Host, null, this.canProduceAudio && (h("div", { part: "microphone-selection", class: 'group container ' + this.variant }, h("label", { slot: "label" }, this.variant !== 'inline' && this.t('settings.microphone_input'), h("rtk-icon", { icon: this.iconPack.mic_on, size: "sm" })), h("div", { class: "row" }, h("select", { class: "rtk-select", onChange: (e) => this.setDevice(e.target.value) }, this.audioinputDevices.map(({ deviceId, label }) => {
+            var _a;
+            return (h("option", { value: deviceId, selected: ((_a = this.currentDevices.audio) === null || _a === void 0 ? void 0 : _a.deviceId) === deviceId }, label || `Microphone ${++unnamedMicCount}`));
+        })), h("slot", { name: "indicator" }))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$2([
+    SyncWithStore()
+], RtkMicrophoneSelector.prototype, "meeting", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkMicrophoneSelector.prototype, "size", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkMicrophoneSelector.prototype, "iconPack", void 0);
+__decorate$2([
+    SyncWithStore()
+], RtkMicrophoneSelector.prototype, "t", void 0);
+RtkMicrophoneSelector.style = RtkMicrophoneSelectorStyle0;
+
+const rtkSpeakerSelectorCss = ".rtk-select{--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-background-700, 44 44 44) / var(--tw-bg-opacity));color:rgb(var(--rtk-colors-text-1000, 255 255 255))}.rtk-select:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)}.rtk-select{display:block;border-radius:var(--rtk-border-radius-sm, 4px);border-width:var(--rtk-border-width-none, 0);border-style:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:var(--rtk-space-3, 12px);font-size:16px;--icon-size:var(--rtk-select-chevron-size, var(--rtk-space-6, 24px));--icon-right-position:var(--rtk-select-chevron-right-position, var(--rtk-space-2, 8px));background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e\");background-position:right var(--icon-right-position) center;background-repeat:no-repeat;background-size:var(--icon-size) var(--icon-size);padding-right:calc(var(--icon-right-position) * 5);width:100%;max-width:100%;text-overflow:ellipsis}.inline .rtk-select{margin-top:var(--rtk-space-1, 4px);width:100%;padding-top:var(--rtk-space-1, 4px);padding-bottom:var(--rtk-space-1, 4px);padding-left:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-1\\.5, 6px);padding-right:var(--rtk-space-8, 32px);font-size:14px}.row{display:flex;width:100%;align-items:center;justify-content:space-between;gap:var(--rtk-space-3, 12px)}.group{margin-top:var(--rtk-space-2, 8px);margin-bottom:var(--rtk-space-2, 8px)}.group>*{margin-bottom:var(--rtk-space-2, 8px)}.group>*:last-child{margin-bottom:var(--rtk-space-0, 0px)}.group select{flex:1 1 0%}.inline.group{margin-top:var(--rtk-space-0, 0px);margin-bottom:var(--rtk-space-0\\.5, 2px)}.inline.group>*{margin-bottom:var(--rtk-space-0, 0px)}label{display:flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;align-items:center;gap:var(--rtk-space-1, 4px);font-size:14px}.inline .container{display:flex;align-items:center;justify-content:flex-start;gap:var(--rtk-space-2, 8px);padding-left:var(--rtk-space-2, 8px);padding-right:var(--rtk-space-2, 8px)}";
+const RtkSpeakerSelectorStyle0 = rtkSpeakerSelectorCss;
+
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkSpeakerSelector = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** variant */
+        this.variant = 'full';
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.speakerDevices = [];
+        this.currentDevices = { speaker: undefined };
+        this.deviceListUpdateListener = async () => {
+            const devices = await this.meeting.self.getSpeakerDevices();
+            this.speakerDevices = devices;
+        };
+        this.deviceUpdateListener = ({ device }) => {
+            if (device.kind === 'audiooutput') {
+                this.currentDevices = {
+                    speaker: device,
+                };
+            }
+        };
+        this.mediaPermissionUpdate = async ({ kind, message }) => {
+            if (!this.meeting)
+                return;
+            if (kind === 'audio' && message === 'ACCEPTED') {
+                this.speakerDevices = await this.meeting.self.getSpeakerDevices();
+            }
+        };
+    }
+    connectedCallback() {
+        this.meetingChanged(this.meeting);
+    }
+    disconnectedCallback() {
+        var _a, _b, _c;
+        (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.removeListener('deviceListUpdate', this.deviceListUpdateListener);
+        (_b = this.meeting) === null || _b === void 0 ? void 0 : _b.self.removeListener('deviceUpdate', this.deviceUpdateListener);
+        (_c = this.meeting) === null || _c === void 0 ? void 0 : _c.self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdate);
+    }
+    meetingChanged(meeting) {
+        if (meeting == null)
+            return;
+        writeTask(async () => {
+            var _a, _b;
+            const { self } = meeting;
+            const speakerDevices = await meeting.self.getSpeakerDevices();
+            const currentSpeakerDevice = (_a = meeting.self.getCurrentDevices()) === null || _a === void 0 ? void 0 : _a.speaker;
+            this.currentDevices = {
+                speaker: currentSpeakerDevice,
+            };
+            self.addListener('deviceListUpdate', this.deviceListUpdateListener);
+            self.addListener('deviceUpdate', this.deviceUpdateListener);
+            self.addListener('mediaPermissionUpdate', this.mediaPermissionUpdate);
+            if (currentSpeakerDevice != undefined) {
+                this.speakerDevices = [
+                    (_b = speakerDevices.find((device) => device.deviceId === currentSpeakerDevice.deviceId)) !== null && _b !== void 0 ? _b : currentSpeakerDevice,
+                    ...speakerDevices.filter((device) => device.deviceId !== currentSpeakerDevice.deviceId),
+                ];
+            }
+            else {
+                this.speakerDevices = speakerDevices;
+            }
+        });
+    }
+    testAudio() {
+        var _a;
+        (_a = this.testAudioEl) === null || _a === void 0 ? void 0 : _a.play();
+    }
+    setDevice(deviceId) {
+        var _a, _b;
+        if (disableSettingSinkId(this.meeting))
+            return;
+        const device = this.speakerDevices.find((d) => d.deviceId === deviceId);
+        this.currentDevices = {
+            speaker: device,
+        };
+        if (device != null) {
+            (_a = this.meeting) === null || _a === void 0 ? void 0 : _a.self.setDevice(device);
+            (_b = this.testAudioEl) === null || _b === void 0 ? void 0 : _b.setSinkId(device.deviceId);
+        }
+    }
+    render() {
+        if (this.meeting == null)
+            return null;
+        let unnamedSpeakerCount = 0;
+        return (h(Host, null, h("audio", { preload: "auto", src: "https://assets.dyte.io/ui-kit/speaker-test.mp3", ref: (el) => (this.testAudioEl = el) }), h("div", { class: 'group ' + this.variant, part: "speaker-selection" }, this.speakerDevices.length > 0 && !disableSettingSinkId(this.meeting) && (h("div", { class: "container" }, h("label", null, this.variant !== 'inline' && this.t('settings.speaker_output'), h("rtk-icon", { icon: this.iconPack.speaker, size: "sm" })), h("div", { class: "row" }, h("select", { class: "rtk-select", onChange: (e) => this.setDevice(e.target.value) }, this.speakerDevices.map(({ deviceId, label }) => {
+            var _a;
+            return (h("option", { value: deviceId, selected: ((_a = this.currentDevices.speaker) === null || _a === void 0 ? void 0 : _a.deviceId) === deviceId }, label || `Speaker ${++unnamedSpeakerCount}`));
+        }))))), this.variant === 'full' && (h("rtk-button", { variant: "secondary", onClick: () => this.testAudio() }, h("rtk-icon", { icon: this.iconPack.speaker, slot: "start" }), this.t('test'))))));
+    }
+    static get watchers() { return {
+        "meeting": ["meetingChanged"]
+    }; }
+};
+__decorate$1([
+    SyncWithStore()
+], RtkSpeakerSelector.prototype, "meeting", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkSpeakerSelector.prototype, "states", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkSpeakerSelector.prototype, "size", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkSpeakerSelector.prototype, "iconPack", void 0);
+__decorate$1([
+    SyncWithStore()
+], RtkSpeakerSelector.prototype, "t", void 0);
+RtkSpeakerSelector.style = RtkSpeakerSelectorStyle0;
+
+const rtkSwitchCss = ":host{line-height:initial;font-family:var(--rtk-font-family, sans-serif);font-feature-settings:normal;font-variation-settings:normal}p{margin:var(--rtk-space-0, 0px);padding:var(--rtk-space-0, 0px)}:host{box-sizing:border-box;display:inline-flex;height:var(--rtk-space-6, 24px);width:var(--rtk-space-10, 40px);align-items:center;padding:var(--rtk-space-1, 4px);border-radius:9999px;background-color:rgb(var(--rtk-colors-text-600, 255 255 255 / 0.52));cursor:pointer}.switch{box-sizing:border-box;height:var(--rtk-space-4, 16px);width:var(--rtk-space-4, 16px);background-color:rgb(var(--rtk-colors-text-on-brand-1000, var(--rtk-colors-text-1000, 255 255 255)));border-radius:9999px;transition-property:var(--rtk-transition-property, all);transition-duration:200ms}:host(.checked){--tw-bg-opacity:1;background-color:rgba(var(--rtk-colors-brand-500, 33 96 253) / var(--tw-bg-opacity))}:host(.checked) .switch{transform:translateX(100%)}:host([readonly]),:host([disabled]){cursor:not-allowed;opacity:0.6}";
+const RtkSwitchStyle0 = rtkSwitchCss;
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+        r = Reflect.decorate(decorators, target, key, desc);
+    else
+        for (var i = decorators.length - 1; i >= 0; i--)
+            if (d = decorators[i])
+                r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const RtkSwitch = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.onChange = createEvent(this, "rtkChange", 4);
+        /** Whether the switch is enabled/checked */
+        this.checked = false;
+        /** Whether switch is readonly */
+        this.readonly = false;
+        /** Whether switch is readonly */
+        this.disabled = false;
+        /** Icon pack */
+        this.iconPack = defaultIconPack;
+        /** Language */
+        this.t = useLanguage();
+        this.onClick = () => {
+            if (!this.readonly && !this.disabled) {
+                this.checked = !this.checked;
+            }
+        };
+        this.onKeyPress = (e) => {
+            if (this.readonly)
+                return;
+            switch (e.key) {
+                // Enter or Space
+                case 'Enter':
+                case ' ':
+                    this.checked = !this.checked;
+                    break;
+            }
+        };
+    }
+    connectedCallback() {
+        this.checkedChange(this.checked);
+    }
+    checkedChange(checked) {
+        this.checked = checked;
+        this.onChange.emit(checked);
+    }
+    render() {
+        return (h(Host, { key: 'd52144d4eeaf1f93dc3f83971f014e4e31e80c0e', role: "switch", tabIndex: this.disabled && 0, "aria-readonly": this.readonly, "aria-checked": this.checked, "aria-disabled": this.disabled, class: { checked: this.checked }, onClick: this.onClick, onKeyPress: this.onKeyPress }, h("div", { key: 'aa51da6304b98be4d6d7c109ff488c1a684f6bb3', class: "switch", part: "switch" })));
+    }
+    static get watchers() { return {
+        "checked": ["checkedChange"]
+    }; }
+};
+__decorate([
+    SyncWithStore()
+], RtkSwitch.prototype, "iconPack", void 0);
+__decorate([
+    SyncWithStore()
+], RtkSwitch.prototype, "t", void 0);
+RtkSwitch.style = RtkSwitchStyle0;
+
+export { RtkAudioVisualizer as rtk_audio_visualizer, RtkMicrophoneSelector as rtk_microphone_selector, RtkSpeakerSelector as rtk_speaker_selector, RtkSwitch as rtk_switch };