@qualified-salesforce/web 0.0.1-oidc-bootstrap

package/widget/multimodal_v2/components/meetings/utils.js

@@ -0,0 +1,328 @@
+import { toIntlLocale } from "../../utils/locale.js";
+
+
+function getDefaultTimeZone() {
+    return new Intl.DateTimeFormat().resolvedOptions().timeZone;
+}
+/**
+ * Format time according to locale conventions.
+ * Uses Intl.DateTimeFormat to respect each locale's native time format:
+ * - en-US: 12-hour with AM/PM (e.g., "3:00 PM")
+ * - fr-FR: 24-hour (e.g., "15:00")
+ * - fr-CA: 24-hour with "h" (e.g., "15 h 00")
+ * - zh-CN: 12-hour with Chinese AM/PM (e.g., "下午3:00")
+ * - ja-JP: 24-hour (e.g., "15:00")
+ * - etc.
+ */ function formatTime(iso, tz, locale) {
+    const date = new Date(iso);
+    const intlLocale = toIntlLocale(locale);
+    try {
+        return new Intl.DateTimeFormat(intlLocale, {
+            timeZone: tz || undefined,
+            hour: "numeric",
+            minute: "2-digit",
+            timeZoneName: "short"
+        }).format(date);
+    } catch (unused) {
+        return date.toLocaleString();
+    }
+}
+/**
+ * Format time without timezone name.
+ * Uses Intl.DateTimeFormat to respect each locale's native time format.
+ */ function formatTimeShort(iso, tz, locale) {
+    const d = new Date(iso);
+    const intlLocale = toIntlLocale(locale);
+    try {
+        return d.toLocaleTimeString(intlLocale, {
+            hour: "numeric",
+            minute: "2-digit",
+            timeZone: tz || undefined
+        });
+    } catch (unused) {
+        return d.toLocaleTimeString();
+    }
+}
+function formatMonthTitle(dateKey, locale) {
+    const [y, m, d] = dateKey.split("-").map((n)=>parseInt(n, 10));
+    const date = new Date(y, m - 1, d);
+    const intlLocale = toIntlLocale(locale);
+    return new Intl.DateTimeFormat(intlLocale, {
+        month: "long",
+        year: "numeric"
+    }).format(date);
+}
+function formatDate(iso, tz, locale) {
+    var _parts_find;
+    const d = new Date(iso);
+    const intlLocale = toIntlLocale(locale);
+    const opts = {
+        weekday: "long",
+        month: "long",
+        day: "numeric",
+        year: "numeric",
+        timeZone: tz || undefined
+    };
+    const parts = new Intl.DateTimeFormat(intlLocale, opts).formatToParts(d);
+    const dayNum = Number(((_parts_find = parts.find((p)=>p.type === "day")) == null ? void 0 : _parts_find.value) || d.getDate());
+    // Only add ordinal suffix for English locales
+    const isEnglish = intlLocale.startsWith("en");
+    const withOrdinal = parts.map((p)=>p.type === "day" && isEnglish ? "" + dayNum + ordinal(dayNum) : p.value).join("");
+    return withOrdinal;
+}
+/**
+ * "Thu, Jul 30" — the summary rail's restatement of the chosen day, which sits in a
+ * 264px column and has to stay on one line beside its icon. `formatDate` above spells
+ * the weekday, month and year out in full for the details card, which has the width.
+ */ function formatDateCompact(iso, tz, locale) {
+    const date = new Date(iso);
+    const intlLocale = toIntlLocale(locale);
+    try {
+        return new Intl.DateTimeFormat(intlLocale, {
+            timeZone: tz || undefined,
+            weekday: "short",
+            month: "short",
+            day: "numeric"
+        }).format(date);
+    } catch (unused) {
+        return date.toLocaleDateString();
+    }
+}
+function formatDayShort(date, locale) {
+    const intlLocale = toIntlLocale(locale);
+    return date.toLocaleDateString(intlLocale, {
+        weekday: "short"
+    });
+}
+function ordinal(n) {
+    const s = [
+        "th",
+        "st",
+        "nd",
+        "rd"
+    ];
+    const v = n % 100;
+    return s[(v - 20) % 10] || s[v] || s[0];
+}
+/**
+ * Returns the first Sunday of the week containing the given date
+ * @param isoTimestamp - ISO 8601 timestamp string
+ * @param timeZone - IANA timeZone identifier (e.g., 'America/New_York')
+ * @returns The Date object for the first Sunday of that week
+ */ function getFirstSundayOfWeek(isoTimestamp, timeZone) {
+    var _parts_find, _parts_find1, _parts_find2;
+    // Create a date in the target timeZone
+    const date = new Date(isoTimestamp);
+    // Get the date components in the target timeZone (en-US format for consistency)
+    const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+    });
+    const parts = formatter.formatToParts(date);
+    const year = (_parts_find = parts.find((p)=>p.type === "year")) == null ? void 0 : _parts_find.value;
+    const month = (_parts_find1 = parts.find((p)=>p.type === "month")) == null ? void 0 : _parts_find1.value;
+    const day = (_parts_find2 = parts.find((p)=>p.type === "day")) == null ? void 0 : _parts_find2.value;
+    // Create a date object for the day in the target timeZone at midnight
+    const localDate = new Date(year + "-" + month + "-" + day + "T00:00:00");
+    // Get the day of the week (0 = Sunday)
+    const dayOfWeek = localDate.getDay();
+    // Calculate the Sunday of that week
+    const sunday = new Date(localDate);
+    sunday.setDate(localDate.getDate() - dayOfWeek);
+    return sunday;
+}
+/**
+ * Binary search to find the first slot on or after the target date
+ * @param slots - Sorted array of slots
+ * @param targetDate - Target date to search for
+ * @returns Index of the first slot >= targetDate, or slots.length if none found
+ */ function findFirstSlotIndexFrom(slots, targetDate) {
+    let left = 0;
+    let right = slots.length;
+    while(left < right){
+        const mid = Math.floor((left + right) / 2);
+        const slotDate = new Date(slots[mid].startsAt);
+        if (slotDate >= targetDate) {
+            right = mid;
+        } else {
+            left = mid + 1;
+        }
+    }
+    return left;
+}
+/**
+ * Builds an array of calendar days for the week containing the given time slot
+ * @param slot - Calendar event time slot with startsAt ISO timestamp
+ * @param timeZone - IANA timeZone identifier
+ * @param slots - SORTED array of all calendar event time slots
+ * @param locale - Optional locale for day name formatting
+ * @returns Array of calendar days with abbreviated day names, date values, and slots for each day
+ */ function buildCalendarDays(slot, timeZone, slots, locale) {
+    const firstSunday = getFirstSundayOfWeek(slot.startsAt, timeZone);
+    // First, create calendar days with empty slots
+    const days = [];
+    for(let i = 0; i < 7; i++){
+        const currentDate = new Date(firstSunday);
+        currentDate.setDate(firstSunday.getDate() + i);
+        days.push({
+            day: formatDayShort(currentDate, locale),
+            value: currentDate.getDate(),
+            slots: [],
+            isSelected: false,
+            isDisabled: false
+        });
+    }
+    // Use binary search to find the first slot in this week
+    const startIndex = findFirstSlotIndexFrom(slots, firstSunday);
+    if (startIndex >= slots.length) {
+        return days;
+    }
+    const weekEnd = new Date(firstSunday);
+    weekEnd.setDate(firstSunday.getDate() + 7); // Start of next week
+    // Now iterate through slots starting from startIndex until we go past the week
+    let currentDayIndex = 0;
+    const nextDayStart = new Date(firstSunday);
+    nextDayStart.setDate(firstSunday.getDate() + 1); // Monday
+    for(let slotIndex = startIndex; slotIndex < slots.length; slotIndex++){
+        const slotDate = new Date(slots[slotIndex].startsAt);
+        // Stop if we've gone past this week
+        if (slotDate >= weekEnd) {
+            break;
+        }
+        // Move to next day if current slot is on or after the next day
+        while(currentDayIndex < 6 && slotDate >= nextDayStart){
+            currentDayIndex++;
+            nextDayStart.setDate(nextDayStart.getDate() + 1);
+        }
+        // Add slot to the current day
+        days[currentDayIndex].slots.push(slots[slotIndex]);
+    }
+    for (const day of days){
+        day.isDisabled = day.slots.length === 0;
+        day.isSelected = new Date(slot.startsAt).getDate() === day.value;
+    }
+    return days;
+}
+/**
+ * Finds all timeslots on the same day as the given timeslot
+ * @param targetSlot - The reference timeslot
+ * @param sortedSlots - SORTED array of all timeslots
+ * @param timeZone - IANA timeZone identifier for day comparison
+ * @returns Array of all slots that fall on the same day as targetSlot
+ */ function getSameDaySlots(targetSlot, sortedSlots, timeZone) {
+    var _parts_find, _parts_find1, _parts_find2;
+    const targetDate = new Date(targetSlot.startsAt);
+    // Get the start of the day in the target timeZone (YYYY-MM-DD format)
+    const formatter = new Intl.DateTimeFormat("en-US", {
+        timeZone,
+        year: "numeric",
+        month: "2-digit",
+        day: "2-digit"
+    });
+    const parts = formatter.formatToParts(targetDate);
+    const year = (_parts_find = parts.find((p)=>p.type === "year")) == null ? void 0 : _parts_find.value;
+    const month = (_parts_find1 = parts.find((p)=>p.type === "month")) == null ? void 0 : _parts_find1.value;
+    const day = (_parts_find2 = parts.find((p)=>p.type === "day")) == null ? void 0 : _parts_find2.value;
+    const dayStart = new Date(year + "-" + month + "-" + day + "T00:00:00");
+    // Get the start of the next day
+    const nextDayStart = new Date(dayStart);
+    nextDayStart.setDate(dayStart.getDate() + 1);
+    // Find the first slot on this day
+    const startIndex = findFirstSlotIndexFrom(sortedSlots, dayStart);
+    if (startIndex >= sortedSlots.length) {
+        return []; // No slots found on or after this day
+    }
+    // Collect all slots on this day
+    const sameDaySlots = [];
+    for(let i = startIndex; i < sortedSlots.length; i++){
+        const slotDate = new Date(sortedSlots[i].startsAt);
+        // Stop when we reach the next day
+        if (slotDate >= nextDayStart) {
+            break;
+        }
+        sameDaySlots.push(sortedSlots[i]);
+    }
+    return sameDaySlots;
+}
+/**
+ * Returns a Set of all unique days (as Date objects) that contain slots
+ * @param slots - Array of timeslots
+ * @param timezone - IANA timezone identifier
+ * @returns Set of Date objects representing days with slots (each date is set to midnight in the timezone)
+ */ function getDaysWithSlots(slots, timeZone) {
+    const daysSet = new Set();
+    let lastDateString = "";
+    for (const slot of slots){
+        var _parts_find, _parts_find1, _parts_find2;
+        const slotDate = new Date(slot.startsAt);
+        // Get the date string in the target timezone (YYYY-MM-DD format)
+        const formatter = new Intl.DateTimeFormat("en-US", {
+            timeZone,
+            year: "numeric",
+            month: "2-digit",
+            day: "2-digit"
+        });
+        const parts = formatter.formatToParts(slotDate);
+        const year = (_parts_find = parts.find((p)=>p.type === "year")) == null ? void 0 : _parts_find.value;
+        const month = (_parts_find1 = parts.find((p)=>p.type === "month")) == null ? void 0 : _parts_find1.value;
+        const day = (_parts_find2 = parts.find((p)=>p.type === "day")) == null ? void 0 : _parts_find2.value;
+        const dateString = year + "-" + month + "-" + day;
+        // Only create a new Date object if this is a different day than the last one
+        if (dateString !== lastDateString) {
+            // Create a Date object for midnight of this day
+            daysSet.add(new Date("" + dateString + "T00:00:00"));
+            lastDateString = dateString;
+        }
+    }
+    return daysSet;
+}
+/**
+ * Finds the first slot in the week AFTER the week containing the given slot
+ * @param targetSlot - The reference slot
+ * @param sortedSlots - SORTED array of all slots
+ * @param timeZone - IANA timeZone identifier used to compute week boundaries
+ * @returns The first slot in the next week, or null if none found
+ */ function getNextSlotAfterWeek(targetSlot, sortedSlots, timeZone) {
+    // Start of the current week (Sunday) in the target timeZone
+    const currentWeekSunday = getFirstSundayOfWeek(targetSlot.startsAt, timeZone);
+    // Start of the next week and its end
+    const nextWeekStart = new Date(currentWeekSunday);
+    nextWeekStart.setDate(currentWeekSunday.getDate() + 7);
+    const nextWeekEnd = new Date(nextWeekStart);
+    nextWeekEnd.setDate(nextWeekStart.getDate() + 7);
+    // Find first slot on or after the start of next week
+    const index = findFirstSlotIndexFrom(sortedSlots, nextWeekStart);
+    if (index >= sortedSlots.length) return null;
+    const candidate = sortedSlots[index];
+    const candidateDate = new Date(candidate.startsAt);
+    // Ensure the candidate lies within the next week
+    return candidateDate < nextWeekEnd ? candidate : null;
+}
+/**
+ * Finds the first slot in the week BEFORE the week containing the given slot
+ * @param targetSlot - The reference slot
+ * @param sortedSlots - SORTED array of all slots
+ * @param timeZone - IANA timeZone identifier used to compute week boundaries
+ * @returns The first slot in the previous week, or null if none found
+ */ function getPrevSlotBeforeWeek(targetSlot, sortedSlots, timeZone) {
+    // Start of the current week (Sunday) in the target timeZone
+    const currentWeekSunday = getFirstSundayOfWeek(targetSlot.startsAt, timeZone);
+    // Previous week boundaries
+    const prevWeekStart = new Date(currentWeekSunday);
+    prevWeekStart.setDate(currentWeekSunday.getDate() - 7);
+    const prevWeekEnd = new Date(currentWeekSunday);
+    // Find first slot on or after the start of previous week
+    const index = findFirstSlotIndexFrom(sortedSlots, prevWeekStart);
+    if (index >= sortedSlots.length) return null;
+    const candidate = sortedSlots[index];
+    const candidateDate = new Date(candidate.startsAt);
+    // Ensure the candidate lies before the start of current week (i.e., within the previous week)
+    return candidateDate < prevWeekEnd ? candidate : null;
+}
+
+var utils_formatDayShort = /* unused export */ undefined;
+var utils_getDaysWithSlots = /* unused export */ undefined;
+var utils_getFirstSundayOfWeek = /* unused export */ undefined;
+export { buildCalendarDays, findFirstSlotIndexFrom, formatDate, formatDateCompact, formatMonthTitle, formatTime, formatTimeShort, getDefaultTimeZone, getNextSlotAfterWeek, getPrevSlotBeforeWeek, getSameDaySlots, utils_formatDayShort as formatDayShort, utils_getDaysWithSlots as getDaysWithSlots, utils_getFirstSundayOfWeek as getFirstSundayOfWeek };

package/widget/multimodal_v2/components/multimodal/Audio.js

@@ -0,0 +1,28 @@
+import { jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+
+
+
+
+const Audio = (param)=>{
+    let { audioTrack } = param;
+    const audioRef = utils_module_o(null);
+    useSignalEffect(()=>{
+        const audioElement = audioRef.value;
+        if (!audioElement) return;
+        if (!audioTrack.value) return;
+        audioElement.srcObject = new MediaStream([
+            audioTrack.value
+        ]);
+        return ()=>{
+            if (audioElement) {
+                audioElement.srcObject = null;
+            }
+        };
+    });
+    return /*#__PURE__*/ jsxRuntime_module_u("audio", {
+        ref: audioRef,
+        autoPlay: true
+    });
+};
+
+export { Audio };

package/widget/multimodal_v2/components/multimodal/Controls.js

@@ -0,0 +1,188 @@
+import { jsxRuntime_module_u, preact_module_k, utils_module_u } from "../../../../js/multimodal_v2.js";
+import { WarningIcon, ExpandIcon, PipIcon, MinimizeIcon, MicOffIcon, UpCaretIcon, SpinnerIcon, PinnedIcon, MicIcon } from "../../images/icons.js";
+import "../../styled-system/jsx/index.js";
+import { Text, t } from "../helpers/Localization.js";
+import { Button } from "../shared/Button.js";
+import { Dropdown } from "../shared/controls/Dropdown.js";
+import { PillToggle } from "../shared/controls/PillToggle.js";
+import { default as shared_Tooltip } from "../shared/Tooltip.js";
+import { ConversationMode as types_ConversationMode } from "../../types.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+
+
+
+
+
+
+
+
+
+
+const Controls = (param)=>{
+    let { connectingStatus, conversationMode, mic, maximize, minimizeToCorner, endCall } = param;
+    return /*#__PURE__*/ jsxRuntime_module_u(Container, {
+        "data-component-name": "Controls.Container",
+        children: [
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: conversationMode.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(PillToggle, {
+                    options: VIDEO_MODE_OPTIONS,
+                    value: conversationMode.currentMode.value,
+                    onChange: conversationMode.onChange
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: connectingStatus.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(ConnectingMessage, {
+                    "data-component-name": "Controls.ConnectingMessage",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(SpinnerIcon, {}),
+                        /*#__PURE__*/ jsxRuntime_module_u(ConnectingText, {
+                            "data-component-name": "Controls.ConnectingText",
+                            children: /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                                id: "video.connectingToAudio"
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: mic.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(preact_module_k, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                            variant: "minimal",
+                            size: "sm",
+                            iconOnly: true,
+                            onClick: mic.onToggle,
+                            disabled: !mic.hasDevicesAvailable.value,
+                            title: t(()=>mic.isOn.value ? "video.mute" : "video.unmute"),
+                            ariaLabel: t(()=>mic.isOn.value ? "video.muteMicrophone" : "video.unmuteMicrophone"),
+                            css: {
+                                marginRight: "-$sm"
+                            },
+                            children: !mic.hasDevicesAvailable.value || !mic.isOn.value ? /*#__PURE__*/ jsxRuntime_module_u(MicOffIcon, {}) : /*#__PURE__*/ jsxRuntime_module_u(MicIcon, {})
+                        }),
+                        /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                            when: mic.hasDevicesAvailable,
+                            fallback: /*#__PURE__*/ jsxRuntime_module_u(shared_Tooltip, {
+                                position: "top",
+                                content: t("video.grantMicAccess"),
+                                children: /*#__PURE__*/ jsxRuntime_module_u(WarningIcon, {})
+                            }),
+                            children: /*#__PURE__*/ jsxRuntime_module_u(Dropdown, {
+                                options: mic.devices.value,
+                                value: mic.selectedDeviceId.value,
+                                onChange: mic.onDeviceChange,
+                                ariaLabel: t("video.openMicrophoneMenu"),
+                                children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                                    variant: "minimal",
+                                    size: "xs",
+                                    ariaLabel: t("video.selectMicrophone"),
+                                    iconOnly: true,
+                                    tabIndex: -1,
+                                    css: {
+                                        transform: "rotate(180deg)"
+                                    },
+                                    children: /*#__PURE__*/ jsxRuntime_module_u(UpCaretIcon, {})
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: maximize.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "minimal",
+                    size: "sm",
+                    iconOnly: true,
+                    onClick: maximize.onToggle,
+                    ariaLabel: t(()=>maximize.isMaximized.value ? "toolbar.minimize" : "toolbar.expand"),
+                    title: t(()=>maximize.isMaximized.value ? "toolbar.minimize" : "toolbar.expand"),
+                    children: maximize.isMaximized.value ? /*#__PURE__*/ jsxRuntime_module_u(MinimizeIcon, {}) : /*#__PURE__*/ jsxRuntime_module_u(ExpandIcon, {})
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: minimizeToCorner.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "minimal",
+                    size: "sm",
+                    iconOnly: true,
+                    onClick: minimizeToCorner.onToggle,
+                    ariaLabel: t(()=>minimizeToCorner.isClosed.value ? "toolbar.expand" : "toolbar.minimize"),
+                    title: t(()=>minimizeToCorner.isClosed.value ? "toolbar.expand" : "toolbar.minimize"),
+                    children: minimizeToCorner.isClosed.value ? /*#__PURE__*/ jsxRuntime_module_u(PinnedIcon, {}) : /*#__PURE__*/ jsxRuntime_module_u(PipIcon, {})
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime_module_u(utils_module_u, {
+                when: endCall.visible,
+                children: /*#__PURE__*/ jsxRuntime_module_u(Button, {
+                    variant: "minimal",
+                    size: "sm",
+                    onClick: endCall.onClick,
+                    ariaLabel: t("video.endCall"),
+                    "data-component-name": "Controls.EndCallButton",
+                    css: {
+                        color: "[#E4251B]",
+                        fontWeight: "$semibold"
+                    },
+                    children: /*#__PURE__*/ jsxRuntime_module_u(Text, {
+                        id: "video.end"
+                    })
+                })
+            })
+        ]
+    });
+};
+const VIDEO_MODE_OPTIONS = [
+    {
+        value: types_ConversationMode.VIDEO,
+        label: t("video.videoMode"),
+        ariaLabel: t("video.videoModeAriaLabel")
+    },
+    {
+        value: types_ConversationMode.VOICE,
+        label: t("video.voiceMode"),
+        ariaLabel: t("video.voiceModeAriaLabel")
+    }
+];
+const Container = styled("div", {
+    base: {
+        display: "flex",
+        alignItems: "center",
+        gap: "[8px]",
+        zIndex: 1000
+    }
+});
+Container.displayName = "ControlsInner";
+const ConnectingMessage = styled("div", {
+    base: {
+        display: "flex",
+        padding: "[4px 8px 4px 4px]",
+        alignItems: "center",
+        gap: "[4px]",
+        borderRadius: "[100px]",
+        border: "1px solid #D0D5DD",
+        background: "$white",
+        opacity: 0.7,
+        "& svg path": {
+            fill: "[#8A9394]"
+        }
+    }
+});
+ConnectingMessage.displayName = "ConnectingMessage";
+const ConnectingText = styled("span", {
+    base: {
+        fontSize: "12px",
+        fontStyle: "normal",
+        fontWeight: "$normal",
+        lineHeight: "22px",
+        color: "[#152229]",
+        whiteSpace: "nowrap"
+    }
+});
+ConnectingText.displayName = "ConnectingText";
+
+export { Controls };

package/widget/multimodal_v2/components/multimodal/LiveVideo.js

@@ -0,0 +1,63 @@
+import { useComputed, jsxRuntime_module_u, utils_module_o, useSignalEffect } from "../../../../js/multimodal_v2.js";
+import "../../styled-system/jsx/index.js";
+import { Persisted } from "../helpers/Persisted.js";
+import { styled } from "../../styled-system/jsx/factory.js";
+
+/** @jsxImportSource preact */ 
+
+
+
+
+const LiveVideo = (props)=>{
+    var _props_id;
+    const { hidden, liveVideoRef } = useLiveVideo(props);
+    return /*#__PURE__*/ jsxRuntime_module_u(VideoElement, {
+        "data-component-name": "LiveVideo.VideoElement",
+        id: (_props_id = props.id) != null ? _props_id : "live-video",
+        elementType: "video",
+        innerRef: liveVideoRef,
+        autoplay: true,
+        muted: true,
+        playsInline: true,
+        hidden: hidden
+    });
+};
+function useLiveVideo(props) {
+    const { config } = props;
+    const hidden = useComputed(()=>!config.value);
+    const liveVideoRef = utils_module_o(null);
+    // Handle live video track
+    useSignalEffect(()=>{
+        if (!liveVideoRef.value || !config.value) return;
+        if (config.value.type === "track") {
+            liveVideoRef.value.srcObject = new MediaStream([
+                config.value.track
+            ]);
+        } else {
+            liveVideoRef.value.src = config.value.src;
+            liveVideoRef.value.loop = true;
+        }
+    });
+    return {
+        hidden,
+        liveVideoRef
+    };
+}
+const VideoElement = styled(Persisted, {
+    base: {
+        width: "[100%]",
+        height: "[100%]",
+        gridArea: "1 / 1",
+        objectFit: "contain"
+    },
+    variants: {
+        hidden: {
+            true: {
+                display: "none"
+            }
+        }
+    }
+});
+VideoElement.displayName = "VideoElement";
+
+export { LiveVideo };