@stream-io/video-react-sdk 0.0.1-alpha.9

package/dist/src/components/CallRecordingList/CallRecordingList.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CallRecordingListHeader as DefaultCallRecordingListHeader, } from './CallRecordingListHeader';
+import { CallRecordingListItem as DefaultCallRecordingListItem, } from './CallRecordingListItem';
+import { EmptyCallRecordingListing as DefaultEmptyCallRecordingList } from './EmptyCallRecordingListing';
+import { LoadingCallRecordingListing as DefaultLoadingCallRecordingList, } from './LoadingCallRecordingListing';
+export const CallRecordingList = ({ callRecordings, CallRecordingListHeader = DefaultCallRecordingListHeader, CallRecordingListItem = DefaultCallRecordingListItem, EmptyCallRecordingList = DefaultEmptyCallRecordingList, loading, LoadingCallRecordingList = DefaultLoadingCallRecordingList, }) => {
+    return (_jsxs("div", Object.assign({ className: "str-video__call-recording-list" }, { children: [_jsx(CallRecordingListHeader, { callRecordings: callRecordings }), _jsx("div", Object.assign({ className: "str-video__call-recording-list__listing" }, { children: loading ? (_jsx(LoadingCallRecordingList, { callRecordings: callRecordings })) : callRecordings.length ? (callRecordings.map((recording) => (_jsx(CallRecordingListItem, { recording: recording }, recording.filename)))) : (_jsx(EmptyCallRecordingList, {})) }))] })));
+};
+//# sourceMappingURL=CallRecordingList.js.map

package/dist/src/components/CallRecordingList/CallRecordingList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingList.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/CallRecordingList.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,uBAAuB,IAAI,8BAA8B,GAE1D,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,qBAAqB,IAAI,4BAA4B,GAEtD,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,IAAI,6BAA6B,EAAE,MAAM,6BAA6B,CAAC;AACzG,OAAO,EACL,2BAA2B,IAAI,+BAA+B,GAE/D,MAAM,+BAA+B,CAAC;AAiBvC,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,cAAc,EACd,uBAAuB,GAAG,8BAA8B,EACxD,qBAAqB,GAAG,4BAA4B,EACpD,sBAAsB,GAAG,6BAA6B,EACtD,OAAO,EACP,wBAAwB,GAAG,+BAA+B,GACnC,EAAE,EAAE;IAC3B,OAAO,CACL,6BAAK,SAAS,EAAC,gCAAgC,iBAC7C,KAAC,uBAAuB,IAAC,cAAc,EAAE,cAAc,GAAI,EAC3D,4BAAK,SAAS,EAAC,yCAAyC,gBACrD,OAAO,CAAC,CAAC,CAAC,CACT,KAAC,wBAAwB,IAAC,cAAc,EAAE,cAAc,GAAI,CAC7D,CAAC,CAAC,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAC1B,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAChC,KAAC,qBAAqB,IACpB,SAAS,EAAE,SAAS,IACf,SAAS,CAAC,QAAQ,CACvB,CACH,CAAC,CACH,CAAC,CAAC,CAAC,CACF,KAAC,sBAAsB,KAAG,CAC3B,IACG,KACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallRecordingList/CallRecordingListHeader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CallRecording } from '@stream-io/video-client';
+export type CallRecordingListHeaderProps = {
+    /** Array of CallRecording objects */
+    callRecordings: CallRecording[];
+};
+export declare const CallRecordingListHeader: ({ callRecordings, }: CallRecordingListHeaderProps) => JSX.Element;

package/dist/src/components/CallRecordingList/CallRecordingListHeader.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCall } from '@stream-io/video-react-bindings';
+import { IconButton } from '../Button';
+export const CallRecordingListHeader = ({ callRecordings, }) => {
+    const activeCall = useCall();
+    return (_jsxs("div", Object.assign({ className: "str-video__call-recording-list__header" }, { children: [_jsxs("div", Object.assign({ className: "str-video__call-recording-list__title" }, { children: [_jsx("span", { children: "Call Recordings" }), callRecordings.length ? _jsxs("span", { children: ["(", callRecordings.length, ")"] }) : null] })), _jsx(IconButton, { icon: "refresh", title: "Refresh", onClick: () => activeCall === null || activeCall === void 0 ? void 0 : activeCall.queryRecordings() })] })));
+};
+//# sourceMappingURL=CallRecordingListHeader.js.map

package/dist/src/components/CallRecordingList/CallRecordingListHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingListHeader.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/CallRecordingListHeader.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,OAAO,EAAE,MAAM,iCAAiC,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAOvC,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,cAAc,GACe,EAAE,EAAE;IACjC,MAAM,UAAU,GAAG,OAAO,EAAE,CAAC;IAE7B,OAAO,CACL,6BAAK,SAAS,EAAC,wCAAwC,iBACrD,6BAAK,SAAS,EAAC,uCAAuC,iBACpD,6CAA4B,EAC3B,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,gCAAQ,cAAc,CAAC,MAAM,SAAS,CAAC,CAAC,CAAC,IAAI,KAClE,EACN,KAAC,UAAU,IACT,IAAI,EAAC,SAAS,EACd,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,EAAE,GAC5C,KACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallRecordingList/CallRecordingListItem.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CallRecording } from '@stream-io/video-client';
+export type CallRecordingListItemProps = {
+    /** Array of CallRecording objects */
+    recording: CallRecording;
+};
+export declare const CallRecordingListItem: ({ recording, }: CallRecordingListItemProps) => JSX.Element;

package/dist/src/components/CallRecordingList/CallRecordingListItem.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { CopyToClipboardButtonWithPopup } from '../Button';
+export const CallRecordingListItem = ({ recording, }) => {
+    return (_jsxs("div", Object.assign({ className: "str-video__call-recording-list-item" }, { children: [_jsx("div", Object.assign({ className: "str-video__call-recording-list-item__info" }, { children: _jsx("div", Object.assign({ className: "str-video__call-recording-list-item__created" }, { children: new Date(recording.end_time).toLocaleString() })) })), _jsxs("div", Object.assign({ className: "str-video__call-recording-list-item__actions" }, { children: [_jsx("a", Object.assign({ className: clsx('str-video__call-recording-list-item__action-button', 'str-video__call-recording-list-item__action-button--download'), role: "button", href: recording.url, download: recording.filename, title: "Download the recording" }, { children: _jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__download-button--icon') }) })), _jsx(CopyToClipboardButtonWithPopup, { Button: CopyUrlButton, copyValue: recording.url })] }))] })));
+};
+const CopyUrlButton = forwardRef((props, ref) => {
+    return (_jsx("button", Object.assign({}, props, { className: clsx('str-video__call-recording-list-item__action-button', 'str-video__call-recording-list-item__action-button--copy-link'), ref: ref, title: "Copy the recording link" }, { children: _jsx("span", { className: clsx('str-video__call-recording-list-item__action-button-icon', 'str-video__copy-button--icon') }) })));
+});
+//# sourceMappingURL=CallRecordingListItem.js.map

package/dist/src/components/CallRecordingList/CallRecordingListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CallRecordingListItem.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/CallRecordingListItem.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAc,EAAgC,UAAU,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,8BAA8B,EAAE,MAAM,WAAW,CAAC;AAM3D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,SAAS,GACkB,EAAE,EAAE;IAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,qCAAqC,iBAClD,4BAAK,SAAS,EAAC,2CAA2C,gBACxD,4BAAK,SAAS,EAAC,8CAA8C,gBAC1D,IAAI,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,cAAc,EAAE,IAC1C,IACF,EACN,6BAAK,SAAS,EAAC,8CAA8C,iBAC3D,0BACE,SAAS,EAAE,IAAI,CACb,oDAAoD,EACpD,8DAA8D,CAC/D,EACD,IAAI,EAAC,QAAQ,EACb,IAAI,EAAE,SAAS,CAAC,GAAG,EACnB,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,KAAK,EAAC,wBAAwB,gBAE9B,eACE,SAAS,EAAE,IAAI,CACb,yDAAyD,EACzD,kCAAkC,CACnC,GACD,IACA,EACJ,KAAC,8BAA8B,IAC7B,MAAM,EAAE,aAAa,EACrB,SAAS,EAAE,SAAS,CAAC,GAAG,GACxB,KACE,KACF,CACP,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,UAAU,CAC9B,CAAC,KAA+B,EAAE,GAAoC,EAAE,EAAE;IACxE,OAAO,CACL,iCACM,KAAK,IACT,SAAS,EAAE,IAAI,CACb,oDAAoD,EACpD,+DAA+D,CAChE,EACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAC,yBAAyB,gBAE/B,eACE,SAAS,EAAE,IAAI,CACb,yDAAyD,EACzD,8BAA8B,CAC/B,GACD,IACK,CACV,CAAC;AACJ,CAAC,CACF,CAAC"}

package/dist/src/components/CallRecordingList/EmptyCallRecordingListing.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EmptyCallRecordingListing: () => JSX.Element;

package/dist/src/components/CallRecordingList/EmptyCallRecordingListing.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const EmptyCallRecordingListing = () => {
+    return (_jsxs("div", Object.assign({ className: "str-video__call-recording-list__listing str-video__call-recording-list__listing--empty" }, { children: [_jsx("div", { className: "str-video__call-recording-list__listing--icon-empty" }), _jsx("p", Object.assign({ className: "str-video__call-recording-list__listing--text-empty" }, { children: "No recordings available" }))] })));
+};
+//# sourceMappingURL=EmptyCallRecordingListing.js.map

package/dist/src/components/CallRecordingList/EmptyCallRecordingListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyCallRecordingListing.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/EmptyCallRecordingListing.tsx"],"names":[],"mappings":";AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC5C,OAAO,CACL,6BAAK,SAAS,EAAC,wFAAwF,iBACrG,cAAK,SAAS,EAAC,qDAAqD,GAAG,EACvE,0BAAG,SAAS,EAAC,qDAAqD,6CAG9D,KACA,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallRecordingList/LoadingCallRecordingListing.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { CallRecording } from '@stream-io/video-client';
+export type LoadingCallRecordingListProps = {
+    /** Array of CallRecording objects */
+    callRecordings: CallRecording[];
+};
+export declare const LoadingCallRecordingListing: ({ callRecordings, }: LoadingCallRecordingListProps) => JSX.Element;

package/dist/src/components/CallRecordingList/LoadingCallRecordingListing.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CallRecordingListItem } from './CallRecordingListItem';
+import { LoadingIndicator } from '../LoadingIndicator';
+export const LoadingCallRecordingListing = ({ callRecordings, }) => {
+    return (_jsxs(_Fragment, { children: [callRecordings.map((recording) => (_jsx(CallRecordingListItem, { recording: recording }, recording.filename))), _jsx(LoadingIndicator, { text: "Recording getting ready" })] }));
+};
+//# sourceMappingURL=LoadingCallRecordingListing.js.map

package/dist/src/components/CallRecordingList/LoadingCallRecordingListing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingCallRecordingListing.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/LoadingCallRecordingListing.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAOvD,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,cAAc,GACgB,EAAE,EAAE;IAClC,OAAO,CACL,8BACG,cAAc,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACjC,KAAC,qBAAqB,IAAC,SAAS,EAAE,SAAS,IAAO,SAAS,CAAC,QAAQ,CAAI,CACzE,CAAC,EACF,KAAC,gBAAgB,IAAC,IAAI,EAAC,yBAAyB,GAAG,IAClD,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/CallRecordingList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './CallRecordingList';
+export * from './CallRecordingListHeader';
+export * from './CallRecordingListItem';
+export * from './EmptyCallRecordingListing';
+export * from './LoadingCallRecordingListing';

package/dist/src/components/CallRecordingList/index.js

@@ -0,0 +1,6 @@
+export * from './CallRecordingList';
+export * from './CallRecordingListHeader';
+export * from './CallRecordingListItem';
+export * from './EmptyCallRecordingListing';
+export * from './LoadingCallRecordingListing';
+//# sourceMappingURL=index.js.map

package/dist/src/components/CallRecordingList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/CallRecordingList/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AACxC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,+BAA+B,CAAC"}

package/dist/src/components/Debug/DebugParticipantPublishQuality.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Call, StreamVideoParticipant } from '@stream-io/video-client';
+export declare const DebugParticipantPublishQuality: (props: {
+    participant: StreamVideoParticipant;
+    call: Call;
+}) => JSX.Element;

package/dist/src/components/Debug/DebugParticipantPublishQuality.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+export const DebugParticipantPublishQuality = (props) => {
+    const { call, participant } = props;
+    const [quality, setQuality] = useState();
+    const [publishStats, setPublishStats] = useState(() => ({
+        f: true,
+        h: true,
+        q: true,
+    }));
+    useEffect(() => {
+        return call.on('changePublishQuality', (event) => {
+            if (event.eventPayload.oneofKind !== 'changePublishQuality')
+                return;
+            const { videoSenders } = event.eventPayload.changePublishQuality;
+            // FIXME OL: support additional layers (like screenshare)
+            const [videoLayer] = videoSenders.map(({ layers }) => {
+                return layers.map((l) => ({ [l.name]: l.active }));
+            });
+            setPublishStats((s) => (Object.assign(Object.assign({}, s), videoLayer)));
+        });
+    }, [call]);
+    return (_jsxs("select", Object.assign({ title: `Published tracks: ${JSON.stringify(publishStats)}`, value: quality, onChange: (e) => {
+            const value = e.target.value;
+            setQuality(value);
+            let w = 960;
+            let h = 540;
+            if (value === 'h') {
+                w = w / 2; // 480
+                h = h / 2; // 270
+            }
+            else if (value === 'q') {
+                w = w / 4; // 240
+                h = h / 4; // 135
+            }
+            call.updateSubscriptionsPartial('video', {
+                [participant.sessionId]: {
+                    dimension: {
+                        width: w,
+                        height: h,
+                    },
+                },
+            });
+        } }, { children: [_jsx("option", Object.assign({ value: "f" }, { children: "High (f)" })), _jsx("option", Object.assign({ value: "h" }, { children: "Medium (h)" })), _jsx("option", Object.assign({ value: "q" }, { children: "Low (q)" }))] })));
+};
+//# sourceMappingURL=DebugParticipantPublishQuality.js.map

package/dist/src/components/Debug/DebugParticipantPublishQuality.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugParticipantPublishQuality.js","sourceRoot":"","sources":["../../../../src/components/Debug/DebugParticipantPublishQuality.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,KAG9C,EAAE,EAAE;IACH,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IACpC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,EAAU,CAAC;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACtD,CAAC,EAAE,IAAI;QACP,CAAC,EAAE,IAAI;QACP,CAAC,EAAE,IAAI;KACR,CAAC,CAAC,CAAC;IAEJ,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,IAAI,CAAC,EAAE,CAAC,sBAAsB,EAAE,CAAC,KAAK,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,YAAY,CAAC,SAAS,KAAK,sBAAsB;gBAAE,OAAO;YACpE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAC,oBAAoB,CAAC;YACjE,yDAAyD;YACzD,MAAM,CAAC,UAAU,CAAC,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE;gBACnD,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;YACrD,CAAC,CAAC,CAAC;YACH,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,iCAClB,CAAC,GACD,UAAU,EACb,CAAC,CAAC;QACN,CAAC,CAAC,CAAC;IACL,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,OAAO,CACL,gCACE,KAAK,EAAE,qBAAqB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,EAAE,EAC1D,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,MAAM,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,CAAC;YAClB,IAAI,CAAC,GAAG,GAAG,CAAC;YACZ,IAAI,CAAC,GAAG,GAAG,CAAC;YACZ,IAAI,KAAK,KAAK,GAAG,EAAE;gBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;gBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;aAClB;iBAAM,IAAI,KAAK,KAAK,GAAG,EAAE;gBACxB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;gBACjB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;aAClB;YACD,IAAI,CAAC,0BAA0B,CAAC,OAAO,EAAE;gBACvC,CAAC,WAAW,CAAC,SAAS,CAAC,EAAE;oBACvB,SAAS,EAAE;wBACT,KAAK,EAAE,CAAC;wBACR,MAAM,EAAE,CAAC;qBACV;iBACF;aACF,CAAC,CAAC;QACL,CAAC,iBAED,+BAAQ,KAAK,EAAC,GAAG,8BAAkB,EACnC,+BAAQ,KAAK,EAAC,GAAG,gCAAoB,EACrC,+BAAQ,KAAK,EAAC,GAAG,6BAAiB,KAC3B,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/Debug/DebugStatsView.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { Call } from '@stream-io/video-client';
+export declare const DebugStatsView: (props: {
+    call: Call;
+    kind: 'subscriber' | 'publisher';
+    mediaStream?: MediaStream;
+}) => JSX.Element;

package/dist/src/components/Debug/DebugStatsView.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useRtcStats } from '../../hooks/useRtcStats';
+import { useFloatingUIPreset } from '../../hooks';
+export const DebugStatsView = (props) => {
+    var _a;
+    const { call, kind, mediaStream } = props;
+    const stats = useRtcStats(call, kind, mediaStream);
+    const { refs, strategy, y, x } = useFloatingUIPreset({
+        placement: 'top',
+        strategy: 'absolute',
+    });
+    const [isPopperOpen, setIsPopperOpen] = useState(false);
+    const [videoTrack] = (_a = mediaStream === null || mediaStream === void 0 ? void 0 : mediaStream.getVideoTracks()) !== null && _a !== void 0 ? _a : [];
+    const settings = videoTrack === null || videoTrack === void 0 ? void 0 : videoTrack.getSettings();
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "str-video__debug__track-stats-icon", tabIndex: 0, ref: refs.setReference, title: settings &&
+                    `${settings.width}x${settings.height}@${Math.round(settings.frameRate || 0)}`, onClick: () => {
+                    setIsPopperOpen((v) => !v);
+                } }), isPopperOpen && (_jsx("div", Object.assign({ className: "str-video__debug__track-stats", ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y !== null && y !== void 0 ? y : 0,
+                    left: x !== null && x !== void 0 ? x : 0,
+                    overflowY: 'auto',
+                } }, { children: _jsx("pre", { children: JSON.stringify(stats, null, 2) }) })))] }));
+};
+//# sourceMappingURL=DebugStatsView.js.map

package/dist/src/components/Debug/DebugStatsView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugStatsView.js","sourceRoot":"","sources":["../../../../src/components/Debug/DebugStatsView.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAElD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAI9B,EAAE,EAAE;;IACH,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,CAAC;IAC1C,MAAM,KAAK,GAAG,WAAW,CAAC,IAAI,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IAEnD,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,mBAAmB,CAAC;QACnD,SAAS,EAAE,KAAK;QAChB,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;IAEH,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,CAAC,UAAU,CAAC,GAAG,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,cAAc,EAAE,mCAAI,EAAE,CAAC;IACzD,MAAM,QAAQ,GAAG,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,WAAW,EAAE,CAAC;IAC3C,OAAO,CACL,8BACE,eACE,SAAS,EAAC,oCAAoC,EAC9C,QAAQ,EAAE,CAAC,EACX,GAAG,EAAE,IAAI,CAAC,YAAY,EACtB,KAAK,EACH,QAAQ;oBACR,GAAG,QAAQ,CAAC,KAAK,IAAI,QAAQ,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAChD,QAAQ,CAAC,SAAS,IAAI,CAAC,CACxB,EAAE,EAEL,OAAO,EAAE,GAAG,EAAE;oBACZ,eAAe,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBAC7B,CAAC,GACD,EACD,YAAY,IAAI,CACf,4BACE,SAAS,EAAC,+BAA+B,EACzC,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;oBACL,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACX,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACZ,SAAS,EAAE,MAAM;iBAClB,gBAED,wBAAM,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,GAAO,IACvC,CACP,IACA,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/Debug/useIsDebugMode.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+export declare const useIsDebugMode: () => boolean;
+export declare const useDebugPreferredVideoCodec: () => string | null | undefined;

package/dist/src/components/Debug/useIsDebugMode.js

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+const useQueryParams = () => {
+    return useMemo(() => typeof window === 'undefined'
+        ? null
+        : new URLSearchParams(window.location.search), []);
+};
+/**
+ * Internal purpose hook. Enables certain development mode tools.
+ */
+export const useIsDebugMode = () => {
+    const params = useQueryParams();
+    return !!(params === null || params === void 0 ? void 0 : params.get('debug'));
+};
+export const useDebugPreferredVideoCodec = () => {
+    const params = useQueryParams();
+    return params === null || params === void 0 ? void 0 : params.get('video_codec');
+};
+//# sourceMappingURL=useIsDebugMode.js.map

package/dist/src/components/Debug/useIsDebugMode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsDebugMode.js","sourceRoot":"","sources":["../../../../src/components/Debug/useIsDebugMode.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEhC,MAAM,cAAc,GAAG,GAAG,EAAE;IAC1B,OAAO,OAAO,CACZ,GAAG,EAAE,CACH,OAAO,MAAM,KAAK,WAAW;QAC3B,CAAC,CAAC,IAAI;QACN,CAAC,CAAC,IAAI,eAAe,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,EACjD,EAAE,CACH,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,OAAO,CAAC,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,OAAO,CAAC,CAAA,CAAC;AAChC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,MAAM,MAAM,GAAG,cAAc,EAAE,CAAC;IAChC,OAAO,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,GAAG,CAAC,aAAa,CAAC,CAAC;AACpC,CAAC,CAAC"}

package/dist/src/components/DeviceSettings/DeviceSelector.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const DeviceSelector: (props: {
+    devices: MediaDeviceInfo[];
+    selectedDeviceId?: string | undefined;
+    title: string;
+    onChange?: ((deviceId: string) => void) | undefined;
+}) => JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSelector.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+const DeviceSelectorOption = ({ disabled, id, label, onChange, name, selected, defaultChecked, value, }) => {
+    return (_jsxs("label", Object.assign({ className: clsx('str-video__device-settings__option', {
+            'str-video__device-settings__option--selected': selected,
+            'str-video__device-settings__option--disabled': disabled,
+        }), htmlFor: id }, { children: [_jsx("input", { type: "radio", name: name, onChange: onChange, value: value, id: id, checked: selected, defaultChecked: defaultChecked, disabled: disabled }), label] })));
+};
+export const DeviceSelector = (props) => {
+    const { devices = [], selectedDeviceId: selectedDeviceFromProps, title, onChange, } = props;
+    const inputGroupName = title.replace(' ', '-').toLowerCase();
+    // sometimes the browser (Chrome) will report the system-default device
+    // with an id of 'default'. In case when it doesn't, we'll select the first
+    // available device.
+    let selectedDeviceId = selectedDeviceFromProps;
+    if (devices.length > 0 &&
+        !devices.find((d) => d.deviceId === selectedDeviceId)) {
+        selectedDeviceId = devices[0].deviceId;
+    }
+    return (_jsxs("div", Object.assign({ className: "str-video__device-settings__device-kind" }, { children: [_jsx("div", Object.assign({ className: "str-video__device-settings__device-selector-title" }, { children: title })), !devices.length ? (_jsx(DeviceSelectorOption, { id: `${inputGroupName}--default`, label: "Default", name: inputGroupName, defaultChecked: true, value: "default" })) : (devices.map((device) => {
+                return (_jsx(DeviceSelectorOption, { id: `${inputGroupName}--${device.deviceId}`, value: device.deviceId, label: device.label, onChange: (e) => {
+                        onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
+                    }, name: inputGroupName, selected: device.deviceId === selectedDeviceId || devices.length === 1 }, device.deviceId));
+            }))] })));
+};
+//# sourceMappingURL=DeviceSelector.js.map

package/dist/src/components/DeviceSettings/DeviceSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelector.js","sourceRoot":"","sources":["../../../../src/components/DeviceSettings/DeviceSelector.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAcxB,MAAM,oBAAoB,GAAG,CAAC,EAC5B,QAAQ,EACR,EAAE,EACF,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,cAAc,EACd,KAAK,GACqB,EAAE,EAAE;IAC9B,OAAO,CACL,+BACE,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;YACpD,8CAA8C,EAAE,QAAQ;YACxD,8CAA8C,EAAE,QAAQ;SACzD,CAAC,EACF,OAAO,EAAE,EAAE,iBAEX,gBACE,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,QAAQ,EACjB,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,GAClB,EACD,KAAK,KACA,CACT,CAAC;AACJ,CAAC,CAAC;AACF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAK9B,EAAE,EAAE;IACH,MAAM,EACJ,OAAO,GAAG,EAAE,EACZ,gBAAgB,EAAE,uBAAuB,EACzC,KAAK,EACL,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE,CAAC;IAE7D,uEAAuE;IACvE,2EAA2E;IAC3E,oBAAoB;IACpB,IAAI,gBAAgB,GAAG,uBAAuB,CAAC;IAC/C,IACE,OAAO,CAAC,MAAM,GAAG,CAAC;QAClB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,KAAK,gBAAgB,CAAC,EACrD;QACA,gBAAgB,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;KACxC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,yCAAyC,iBACtD,4BAAK,SAAS,EAAC,mDAAmD,gBAC/D,KAAK,IACF,EACL,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CACjB,KAAC,oBAAoB,IACnB,EAAE,EAAE,GAAG,cAAc,WAAW,EAChC,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,cAAc,EACpB,cAAc,QACd,KAAK,EAAC,SAAS,GACf,CACH,CAAC,CAAC,CAAC,CACF,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;gBACrB,OAAO,CACL,KAAC,oBAAoB,IACnB,EAAE,EAAE,GAAG,cAAc,KAAK,MAAM,CAAC,QAAQ,EAAE,EAC3C,KAAK,EAAE,MAAM,CAAC,QAAQ,EACtB,KAAK,EAAE,MAAM,CAAC,KAAK,EAEnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;oBAC7B,CAAC,EACD,IAAI,EAAE,cAAc,EACpB,QAAQ,EACN,MAAM,CAAC,QAAQ,KAAK,gBAAgB,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,IANzD,MAAM,CAAC,QAAQ,CAQpB,CACH,CAAC;YACJ,CAAC,CAAC,CACH,KACG,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export type DeviceSelectorAudioInputProps = {
+    title?: string;
+};
+export declare const DeviceSelectorAudioInput: ({ title, }: DeviceSelectorAudioInputProps) => JSX.Element;
+export type DeviceSelectorAudioOutputProps = {
+    title?: string;
+};
+export declare const DeviceSelectorAudioOutput: ({ title, }: DeviceSelectorAudioOutputProps) => JSX.Element | null;

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DeviceSelector } from './DeviceSelector';
+import { useMediaDevices } from '../../core/contexts';
+export const DeviceSelectorAudioInput = ({ title = 'Select a Mic', }) => {
+    const { audioInputDevices, selectedAudioInputDeviceId, switchDevice } = useMediaDevices();
+    return (_jsx(DeviceSelector, { devices: audioInputDevices, selectedDeviceId: selectedAudioInputDeviceId, onChange: (deviceId) => {
+            switchDevice('audioinput', deviceId);
+        }, title: title }));
+};
+export const DeviceSelectorAudioOutput = ({ title = 'Select speakers', }) => {
+    const { audioOutputDevices, isAudioOutputChangeSupported, selectedAudioOutputDeviceId, switchDevice, } = useMediaDevices();
+    if (!isAudioOutputChangeSupported)
+        return null;
+    return (_jsx(DeviceSelector, { devices: audioOutputDevices, selectedDeviceId: selectedAudioOutputDeviceId, onChange: (deviceId) => {
+            switchDevice('audiooutput', deviceId);
+        }, title: title }));
+};
+//# sourceMappingURL=DeviceSelectorAudio.js.map

package/dist/src/components/DeviceSettings/DeviceSelectorAudio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorAudio.js","sourceRoot":"","sources":["../../../../src/components/DeviceSettings/DeviceSelectorAudio.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAMtD,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,KAAK,GAAG,cAAc,GACQ,EAAE,EAAE;IAClC,MAAM,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,YAAY,EAAE,GACnE,eAAe,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,iBAAiB,EAC1B,gBAAgB,EAAE,0BAA0B,EAC5C,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACvC,CAAC,EACD,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC;AAMF,MAAM,CAAC,MAAM,yBAAyB,GAAG,CAAC,EACxC,KAAK,GAAG,iBAAiB,GACM,EAAE,EAAE;IACnC,MAAM,EACJ,kBAAkB,EAClB,4BAA4B,EAC5B,2BAA2B,EAC3B,YAAY,GACb,GAAG,eAAe,EAAE,CAAC;IAEtB,IAAI,CAAC,4BAA4B;QAAE,OAAO,IAAI,CAAC;IAE/C,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,kBAAkB,EAC3B,gBAAgB,EAAE,2BAA2B,EAC7C,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;QACxC,CAAC,EACD,KAAK,EAAE,KAAK,GACZ,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type DeviceSelectorVideoProps = {
+    title?: string;
+};
+export declare const DeviceSelectorVideo: ({ title }: DeviceSelectorVideoProps) => JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DeviceSelector } from './DeviceSelector';
+import { useMediaDevices } from '../../core/contexts';
+export const DeviceSelectorVideo = ({ title }) => {
+    const { videoDevices, selectedVideoDeviceId, switchDevice } = useMediaDevices();
+    return (_jsx(DeviceSelector, { devices: videoDevices, selectedDeviceId: selectedVideoDeviceId, onChange: (deviceId) => {
+            switchDevice('videoinput', deviceId);
+        }, title: title || 'Select a Camera' }));
+};
+//# sourceMappingURL=DeviceSelectorVideo.js.map

package/dist/src/components/DeviceSettings/DeviceSelectorVideo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSelectorVideo.js","sourceRoot":"","sources":["../../../../src/components/DeviceSettings/DeviceSelectorVideo.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAMtD,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,EAAE,KAAK,EAA4B,EAAE,EAAE;IACzE,MAAM,EAAE,YAAY,EAAE,qBAAqB,EAAE,YAAY,EAAE,GACzD,eAAe,EAAE,CAAC;IAEpB,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,YAAY,EACrB,gBAAgB,EAAE,qBAAqB,EACvC,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;YACrB,YAAY,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC;QACvC,CAAC,EACD,KAAK,EAAE,KAAK,IAAI,iBAAiB,GACjC,CACH,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/DeviceSettings/DeviceSettings.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const DeviceSettings: () => JSX.Element;

package/dist/src/components/DeviceSettings/DeviceSettings.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { MenuToggle } from '../Menu';
+import { DeviceSelectorAudioInput, DeviceSelectorAudioOutput, } from './DeviceSelectorAudio';
+import { DeviceSelectorVideo } from './DeviceSelectorVideo';
+import { IconButton } from '../Button';
+import clsx from 'clsx';
+export const DeviceSettings = () => {
+    return (_jsx(MenuToggle, Object.assign({ placement: "bottom-end", ToggleButton: ToggleMenuButton }, { children: _jsx(Menu, {}) })));
+};
+const Menu = () => (_jsxs("div", Object.assign({ className: "str-video__device-settings" }, { children: [_jsx(DeviceSelectorVideo, {}), _jsx(DeviceSelectorAudioInput, {}), _jsx(DeviceSelectorAudioOutput, {})] })));
+const ToggleMenuButton = forwardRef(({ menuShown }, ref) => (_jsx(IconButton, { className: clsx('str-video__device-settings__button', {
+        'str-video__device-settings__button--active': menuShown,
+    }), title: "Toggle device menu", icon: "device-settings", ref: ref })));
+//# sourceMappingURL=DeviceSettings.js.map

package/dist/src/components/DeviceSettings/DeviceSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeviceSettings.js","sourceRoot":"","sources":["../../../../src/components/DeviceSettings/DeviceSettings.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,UAAU,EAAyB,MAAM,SAAS,CAAC;AAC5D,OAAO,EACL,wBAAwB,EACxB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,MAAM,CAAC,MAAM,cAAc,GAAG,GAAG,EAAE;IACjC,OAAO,CACL,KAAC,UAAU,kBAAC,SAAS,EAAC,YAAY,EAAC,YAAY,EAAE,gBAAgB,gBAC/D,KAAC,IAAI,KAAG,IACG,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,IAAI,GAAG,GAAG,EAAE,CAAC,CACjB,6BAAK,SAAS,EAAC,4BAA4B,iBACzC,KAAC,mBAAmB,KAAG,EACvB,KAAC,wBAAwB,KAAG,EAC5B,KAAC,yBAAyB,KAAG,KACzB,CACP,CAAC;AAEF,MAAM,gBAAgB,GAAG,UAAU,CACjC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE,CAAC,CACtB,KAAC,UAAU,IACT,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE;QACpD,4CAA4C,EAAE,SAAS;KACxD,CAAC,EACF,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAC,iBAAiB,EACtB,GAAG,EAAE,GAAG,GAER,CACH,CACF,CAAC"}

package/dist/src/components/DeviceSettings/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DeviceSettings';
+export * from './DeviceSelector';
+export * from './DeviceSelectorAudio';
+export * from './DeviceSelectorVideo';

package/dist/src/components/DeviceSettings/index.js

@@ -0,0 +1,5 @@
+export * from './DeviceSettings';
+export * from './DeviceSelector';
+export * from './DeviceSelectorAudio';
+export * from './DeviceSelectorVideo';
+//# sourceMappingURL=index.js.map

package/dist/src/components/DeviceSettings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/DeviceSettings/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC"}

package/dist/src/components/Icon/Icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type IconProps = {
+    icon: string;
+};
+export declare const Icon: ({ icon }: IconProps) => JSX.Element;

package/dist/src/components/Icon/Icon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { clsx } from 'clsx';
+export const Icon = ({ icon }) => (_jsx("span", { className: clsx('str-video__icon', icon && `str-video__icon--${icon}`) }));
+//# sourceMappingURL=Icon.js.map

package/dist/src/components/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAM5B,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAa,EAAE,EAAE,CAAC,CAC3C,eACE,SAAS,EAAE,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,oBAAoB,IAAI,EAAE,CAAC,GACtE,CACH,CAAC"}

package/dist/src/components/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/src/components/Icon/index.js

@@ -0,0 +1,2 @@
+export * from './Icon';
+//# sourceMappingURL=index.js.map

package/dist/src/components/Icon/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Icon/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC"}

package/dist/src/components/LoadingIndicator/LoadingIndicator.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type LoadingIndicatorProps = {
+    className?: string;
+    /** String will be injected into class and later used to apply as a CSS mask-image to an element as data URL */
+    type?: string;
+    /** Text to be displayed under the loading indicator icon */
+    text?: string;
+    /** Tooltip to be displayed on hover */
+    tooltip?: string;
+};
+export declare const LoadingIndicator: ({ className, type, text, tooltip, }: LoadingIndicatorProps) => JSX.Element;

package/dist/src/components/LoadingIndicator/LoadingIndicator.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+export const LoadingIndicator = ({ className, type = 'spinner', text, tooltip, }) => {
+    return (_jsxs("div", Object.assign({ className: clsx('str-video__loading-indicator', className), title: tooltip }, { children: [_jsx("div", { className: clsx('str-video__loading-indicator__icon', type) }), text && _jsx("p", Object.assign({ className: "str-video__loading-indicator-text" }, { children: text }))] })));
+};
+//# sourceMappingURL=LoadingIndicator.js.map

package/dist/src/components/LoadingIndicator/LoadingIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingIndicator.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/LoadingIndicator.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,MAAM,CAAC;AAYxB,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,EAC/B,SAAS,EACT,IAAI,GAAG,SAAS,EAChB,IAAI,EACJ,OAAO,GACe,EAAE,EAAE;IAC1B,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,8BAA8B,EAAE,SAAS,CAAC,EAC1D,KAAK,EAAE,OAAO,iBAEd,cAAK,SAAS,EAAE,IAAI,CAAC,oCAAoC,EAAE,IAAI,CAAC,GAAQ,EACvE,IAAI,IAAI,0BAAG,SAAS,EAAC,mCAAmC,gBAAE,IAAI,IAAK,KAChE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/LoadingIndicator/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingIndicator';

package/dist/src/components/LoadingIndicator/index.js

@@ -0,0 +1,2 @@
+export * from './LoadingIndicator';
+//# sourceMappingURL=index.js.map

package/dist/src/components/LoadingIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/LoadingIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/src/components/Menu/GenericMenu.d.ts

@@ -0,0 +1,3 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+export declare const GenericMenu: ({ children }: PropsWithChildren) => JSX.Element;
+export declare const GenericMenuButtonItem: ({ children, ...rest }: Omit<ComponentProps<'button'>, 'ref'>) => JSX.Element;

package/dist/src/components/Menu/GenericMenu.js

@@ -0,0 +1,20 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+export const GenericMenu = ({ children }) => {
+    return _jsx("ul", Object.assign({ className: "str-video__generic-menu" }, { children: children }));
+};
+export const GenericMenuButtonItem = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (_jsx("li", Object.assign({ className: "str-video__generic-menu--item" }, { children: _jsx("button", Object.assign({}, rest, { children: children })) })));
+};
+//# sourceMappingURL=GenericMenu.js.map

package/dist/src/components/Menu/GenericMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GenericMenu.js","sourceRoot":"","sources":["../../../../src/components/Menu/GenericMenu.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAEA,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7D,OAAO,2BAAI,SAAS,EAAC,yBAAyB,gBAAE,QAAQ,IAAM,CAAC;AACjE,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EAGE,EAAE,EAAE;QAHN,EACpC,QAAQ,OAE8B,EADnC,IAAI,cAF6B,YAGrC,CADQ;IAEP,OAAO,CACL,2BAAI,SAAS,EAAC,+BAA+B,gBAC3C,iCAAY,IAAI,cAAG,QAAQ,IAAU,IAClC,CACN,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/Menu/MenuToggle.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, PropsWithChildren, ForwardedRef } from 'react';
+import { Placement, Strategy } from '@floating-ui/react';
+export type ToggleMenuButtonProps<E extends HTMLElement = HTMLButtonElement> = {
+    menuShown: boolean;
+    ref: ForwardedRef<E>;
+};
+export type MenuToggleProps<E extends HTMLElement> = PropsWithChildren<{
+    ToggleButton: ComponentType<ToggleMenuButtonProps<E>>;
+    placement?: Placement;
+    strategy?: Strategy;
+}>;
+export declare const MenuToggle: <E extends HTMLElement>({ ToggleButton, placement, strategy, children, }: MenuToggleProps<E>) => JSX.Element;

package/dist/src/components/Menu/MenuToggle.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState, } from 'react';
+import { useFloatingUIPreset } from '../../hooks';
+export const MenuToggle = ({ ToggleButton, placement = 'top-start', strategy = 'absolute', children, }) => {
+    const [menuShown, setMenuShown] = useState(false);
+    const { floating, domReference, refs, x, y } = useFloatingUIPreset({
+        placement,
+        strategy,
+    });
+    useEffect(() => {
+        const handleClick = (event) => {
+            if (!floating && (domReference === null || domReference === void 0 ? void 0 : domReference.contains(event.target))) {
+                setMenuShown(true);
+            }
+            else if (floating && !(floating === null || floating === void 0 ? void 0 : floating.contains(event.target))) {
+                setMenuShown(false);
+            }
+        };
+        const handleKeyDown = (event) => {
+            if (event.key.toLowerCase() === 'escape' &&
+                !event.altKey &&
+                !event.ctrlKey) {
+                setMenuShown(false);
+            }
+        };
+        document === null || document === void 0 ? void 0 : document.addEventListener('click', handleClick, { capture: true });
+        document === null || document === void 0 ? void 0 : document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document === null || document === void 0 ? void 0 : document.removeEventListener('click', handleClick, { capture: true });
+            document === null || document === void 0 ? void 0 : document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [floating, domReference]);
+    return (_jsxs(_Fragment, { children: [menuShown && (_jsx("div", Object.assign({ className: "str-video__menu-container", ref: refs.setFloating, style: {
+                    position: strategy,
+                    top: y !== null && y !== void 0 ? y : 0,
+                    left: x !== null && x !== void 0 ? x : 0,
+                    overflowY: 'auto',
+                } }, { children: children }))), _jsx(ToggleButton, { menuShown: menuShown, ref: refs.setReference })] }));
+};
+//# sourceMappingURL=MenuToggle.js.map

package/dist/src/components/Menu/MenuToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuToggle.js","sourceRoot":"","sources":["../../../../src/components/Menu/MenuToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAGL,SAAS,EACT,QAAQ,GAET,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAalD,MAAM,CAAC,MAAM,UAAU,GAAG,CAAwB,EAChD,YAAY,EACZ,SAAS,GAAG,WAAW,EACvB,QAAQ,GAAG,UAAU,EACrB,QAAQ,GACW,EAAE,EAAE;IACvB,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,mBAAmB,CAAC;QACjE,SAAS;QACT,QAAQ;KACT,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,KAAiB,EAAE,EAAE;YACxC,IAAI,CAAC,QAAQ,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAAE;gBAC7D,YAAY,CAAC,IAAI,CAAC,CAAC;aACpB;iBAAM,IAAI,QAAQ,IAAI,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,CAAA,EAAE;gBAChE,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QAEF,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IACE,KAAK,CAAC,GAAG,CAAC,WAAW,EAAE,KAAK,QAAQ;gBACpC,CAAC,KAAK,CAAC,MAAM;gBACb,CAAC,KAAK,CAAC,OAAO,EACd;gBACA,YAAY,CAAC,KAAK,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;QACpE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACrD,OAAO,GAAG,EAAE;YACV,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC;YACvE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAC1D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,OAAO,CACL,8BACG,SAAS,IAAI,CACZ,4BACE,SAAS,EAAC,2BAA2B,EACrC,GAAG,EAAE,IAAI,CAAC,WAAW,EACrB,KAAK,EAAE;oBACL,QAAQ,EAAE,QAAQ;oBAClB,GAAG,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACX,IAAI,EAAE,CAAC,aAAD,CAAC,cAAD,CAAC,GAAI,CAAC;oBACZ,SAAS,EAAE,MAAM;iBAClB,gBAEA,QAAQ,IACL,CACP,EACD,KAAC,YAAY,IAAC,SAAS,EAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,YAAY,GAAI,IAC7D,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/src/components/Menu/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MenuToggle';
+export * from './GenericMenu';

package/dist/src/components/Menu/index.js

@@ -0,0 +1,3 @@
+export * from './MenuToggle';
+export * from './GenericMenu';
+//# sourceMappingURL=index.js.map

package/dist/src/components/Menu/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}