import { r as registerInstance, h, a as Host } from './index-55463a54.js';
import { e as defaultIconPack, i as useLanguage } from './ui-store-76bb0e8e.js';
import { h as hark } from './hark-6327d91e.js';
import { S as SyncWithStore } from './index-dafb4b7f.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() {
        if (!this.meeting)
            return null;
        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, null, h("div", { class: { 'avatar-ctr': true, speaking: this.audioEnabled, [shadowClass]: true } }, h("rtk-avatar", { participant: this.participant, size: this.size }, !this.audioEnabled && (h("div", { class: "mic-icon" }, h("rtk-icon", { icon: defaultIconPack.mic_off }))))), h("rtk-name-tag", Object.assign({ variant: "text", participant: this.participant }, defaults)), h("slot", null)));
    }
    static get watchers() { return {
        "participant": ["participantChanged"]
    }; }
};
__decorate([
    SyncWithStore()
], RtkAudioTile.prototype, "meeting", void 0);
__decorate([
    SyncWithStore()
], RtkAudioTile.prototype, "config", 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 };
