@livekit/components-core - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

dist/index.d.ts

 export * from './observables';
-export * from './component-interfaces';
+export * from './components';
 export * from './constants';
 export * from './utils';
 //# sourceMappingURL=index.d.ts.map

dist/index.js

 export * from './observables';
-export * from './component-interfaces';
+export * from './components';
 export * from './constants';
 export * from './utils';
 //# sourceMappingURL=index.js.map

dist/observables/room.js

@@ -122,7 +122,9 @@ import { __awaiter } from "tslib";
         deviceSubscriber = subscriber;
-        navigator.mediaDevices.addEventListener('devicechange', onDeviceChange);
-        return () => navigator.mediaDevices.removeEventListener('devicechange', onDeviceChange);
+        navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices.addEventListener('devicechange', onDeviceChange);
+        return () => navigator === null || navigator === void 0 ? void 0 : navigator.mediaDevices.removeEventListener('devicechange', onDeviceChange);
     });
     // because we rely on an async function, trigger the first update instead of using startWith
-    onDeviceChange();
+    if (typeof window !== 'undefined') {
+        onDeviceChange();
+    }
     return observable;
@@ -129,0 +131,0 @@ };

dist/utils.d.ts

 import type { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import type { UnprefixedClassNames } from '@livekit/components-styles/dist/types_unprefixed/styles.scss';
-import { Participant, TrackPublication } from 'livekit-client';
+import { Participant, Track, TrackPublication } from 'livekit-client';
 export declare const kebabize: (str: string) => string;
@@ -12,2 +12,16 @@ /**
 export declare const attachIfSubscribed: (publication: TrackPublication | undefined, element: HTMLMediaElement | null | undefined) => void;
+export declare type PinState = {
+    pinnedParticipant?: Participant;
+    pinnedTrackSource?: Track.Source;
+};
+export declare function isParticipantTrackPinned(participant: Participant, pinState: PinState | undefined, source: Track.Source): boolean;
+/**
+ * Default sort for participants, it'll order participants by:
+ * 1. dominant speaker (speaker with the loudest audio level)
+ * 2. local participant
+ * 3. other speakers that are recently active
+ * 4. participants with video on
+ * 5. by joinedAt
+ */
+export declare function sortParticipantsByVolume(participants: Participant[]): Participant[];
 //# sourceMappingURL=utils.d.ts.map

dist/utils.js

@@ -1,2 +0,2 @@
-import { LocalParticipant, RemoteParticipant } from 'livekit-client';
+import { LocalParticipant, RemoteParticipant, Track, } from 'livekit-client';
 import { cssPrefix } from './constants';
@@ -25,2 +25,92 @@ export const kebabize = (str) => str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 };
+export function isParticipantTrackPinned(participant, pinState, source) {
+    if (pinState === undefined) {
+        console.warn(`pinState not set: `, pinState);
+        return false;
+    }
+    if (pinState.pinnedParticipant === undefined || pinState.pinnedTrackSource === undefined) {
+        console.warn(`pinState not set: `, pinState);
+        return false;
+    }
+    if (pinState.pinnedTrackSource !== source) {
+        return false;
+    }
+    if (pinState.pinnedParticipant.identity === participant.identity) {
+        console.log(`Participant has same identity as pinned.`, pinState);
+        switch (pinState.pinnedTrackSource) {
+            case Track.Source.Camera:
+                return participant.isCameraEnabled;
+                break;
+            case Track.Source.ScreenShare:
+                return participant.isScreenShareEnabled;
+                break;
+            default:
+                return false;
+                break;
+        }
+    }
+    else {
+        return false;
+    }
+}
+/**
+ * Default sort for participants, it'll order participants by:
+ * 1. dominant speaker (speaker with the loudest audio level)
+ * 2. local participant
+ * 3. other speakers that are recently active
+ * 4. participants with video on
+ * 5. by joinedAt
+ */
+export function sortParticipantsByVolume(participants) {
+    const sortedParticipants = [...participants];
+    sortedParticipants.sort((a, b) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        // loudest speaker first
+        if (a.isSpeaking && b.isSpeaking) {
+            return b.audioLevel - a.audioLevel;
+        }
+        // speaker goes first
+        if (a.isSpeaking !== b.isSpeaking) {
+            if (a.isSpeaking) {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        }
+        // last active speaker first
+        if (a.lastSpokeAt !== b.lastSpokeAt) {
+            const aLast = (_b = (_a = a.lastSpokeAt) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0;
+            const bLast = (_d = (_c = b.lastSpokeAt) === null || _c === void 0 ? void 0 : _c.getTime()) !== null && _d !== void 0 ? _d : 0;
+            return bLast - aLast;
+        }
+        // video on
+        const aVideo = a.videoTracks.size > 0;
+        const bVideo = b.videoTracks.size > 0;
+        if (aVideo !== bVideo) {
+            if (aVideo) {
+                return -1;
+            }
+            else {
+                return 1;
+            }
+        }
+        // joinedAt
+        return ((_f = (_e = a.joinedAt) === null || _e === void 0 ? void 0 : _e.getTime()) !== null && _f !== void 0 ? _f : 0) - ((_h = (_g = b.joinedAt) === null || _g === void 0 ? void 0 : _g.getTime()) !== null && _h !== void 0 ? _h : 0);
+    });
+    const localParticipant = sortedParticipants.find((p) => p instanceof LocalParticipant);
+    if (localParticipant) {
+        const localIdx = sortedParticipants.indexOf(localParticipant);
+        if (localIdx >= 0) {
+            sortedParticipants.splice(localIdx, 1);
+            if (sortedParticipants.length > 0) {
+                sortedParticipants.splice(1, 0, localParticipant);
+            }
+            else {
+                sortedParticipants.push(localParticipant);
+            }
+        }
+    }
+    return sortedParticipants;
+}
 //# sourceMappingURL=utils.js.map

package.json

 {
-  "version": "0.1.1",
+  "version": "0.1.2",
   "license": "MIT",
@@ -25,3 +25,3 @@ "typings": "dist/index.d.ts",
   "peerDependencies": {
-    "livekit-client": "^1.4.2",
+    "livekit-client": "^1.4.3",
     "livekit-server-sdk": "latest"
@@ -35,3 +35,3 @@ },
     "typescript": "^4.7.4",
-    "@livekit/components-styles": "0.1.1"
+    "@livekit/components-styles": "0.1.2"
   },
@@ -38,0 +38,0 @@ "dependencies": {

README.md

@@ -1,103 +0,14 @@
-# TSDX User Guide
+# LiveKit Components **Core**
 
-Congrats! You just saved yourself hours of work by bootstrapping this project with TSDX. Let’s get you oriented with what’s here and how to use it.
-
-> This TSDX setup is meant for developing libraries (not apps!) that can be published to NPM. If you’re looking to build a Node app, you could use `ts-node-dev`, plain `ts-node`, or simple `tsc`.
-
-> If you’re new to TypeScript, checkout [this handy cheatsheet](https://devhints.io/typescript)
-
-## Commands
-
-TSDX scaffolds your new library inside `/src`.
-
-To run TSDX, use:
-
-```bash
-npm start # or yarn start
-```
-
-This builds to `/dist` and runs the project in watch mode so any edits you save inside `src` causes a rebuild to `/dist`.
-
-To do a one-off build, use `npm run build` or `yarn build`.
-
-To run tests, use `npm test` or `yarn test`.
-
-## Configuration
-
-Code quality is set up for you with `prettier`, `husky`, and `lint-staged`. Adjust the respective fields in `package.json` accordingly.
-
-### Jest
-
-Jest tests are set up to run with `npm test` or `yarn test`.
-
-### Bundle Analysis
-
-[`size-limit`](https://github.com/ai/size-limit) is set up to calculate the real cost of your library with `npm run size` and visualize the bundle with `npm run analyze`.
-
-#### Setup Files
-
-This is the folder structure we set up for you:
-
-```txt
-/src
-  index.tsx       # EDIT THIS
-/test
-  blah.test.tsx   # EDIT THIS
-.gitignore
-package.json
-README.md         # EDIT THIS
-tsconfig.json
-```
-
-### Rollup
-
-TSDX uses [Rollup](https://rollupjs.org) as a bundler and generates multiple rollup configs for various module formats and build settings. See [Optimizations](#optimizations) for details.
-
-### TypeScript
-
-`tsconfig.json` is set up to interpret `dom` and `esnext` types, as well as `react` for `jsx`. Adjust according to your needs.
-
-## Continuous Integration
-
-### GitHub Actions
-
-Two actions are added by default:
-
-- `main` which installs deps w/ cache, lints, tests, and builds on all pushes against a Node and OS matrix
-- `size` which comments cost comparison of your library on every pull request using [`size-limit`](https://github.com/ai/size-limit)
-
-## Optimizations
-
-Please see the main `tsdx` [optimizations docs](https://github.com/palmerhq/tsdx#optimizations). In particular, know that you can take advantage of development-only optimizations:
-
-```js
-// ./types/index.d.ts
-declare var __DEV__: boolean;
-
-// inside your code...
-if (__DEV__) {
-  console.log('foo');
-}
-```
-
-You can also choose to install and use [invariant](https://github.com/palmerhq/tsdx#invariant) and [warning](https://github.com/palmerhq/tsdx#warning) functions.
-
-## Module Formats
-
-CJS, ESModules, and UMD module formats are supported.
-
-The appropriate paths are configured in `package.json` and `dist/index.js` accordingly. Please report if any issues are found.
-
-## Named Exports
-
-Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.
-
-## Including Styles
-
-There are many ways to ship styles, including with CSS-in-JS. TSDX has no opinion on this, configure how you like.
-
-For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.
-
-## Publishing to NPM
-
-We recommend using [np](https://github.com/sindresorhus/np).
+<!--NAV_START-->
+## Monorepo Navigation
+* [Home](/README.md)
+* **Framework Implementations**:
+    * [React](/packages/react/README.md)
+    * [Vue](/packages/vue/README.md)
+* **Documentation**
+    * [Storybook](/docs/storybook/README.md)
+* **Internal Packages**
+    * [Core 👈](/packages/core/README.md)
+    * [Styles](/packages/styles/README.md)
+<!--NAV_END-->)

src/index.ts

 export * from './observables';
-export * from './component-interfaces';
+export * from './components';
 export * from './constants';
 export * from './utils';

src/observables/room.ts

@@ -187,7 +187,9 @@ import { map, Observable, startWith, Subscriber, Subscription } from 'rxjs';
     deviceSubscriber = subscriber;
-    navigator.mediaDevices.addEventListener('devicechange', onDeviceChange);
-    return () => navigator.mediaDevices.removeEventListener('devicechange', onDeviceChange);
+    navigator?.mediaDevices.addEventListener('devicechange', onDeviceChange);
+    return () => navigator?.mediaDevices.removeEventListener('devicechange', onDeviceChange);
   });
   // because we rely on an async function, trigger the first update instead of using startWith
-  onDeviceChange();
+  if (typeof window !== 'undefined') {
+    onDeviceChange();
+  }
   return observable;
@@ -194,0 +196,0 @@ };

src/utils.ts

 import type { ClassNames } from '@livekit/components-styles/dist/types/general/styles.css';
 import type { UnprefixedClassNames } from '@livekit/components-styles/dist/types_unprefixed/styles.scss';
-import { LocalParticipant, Participant, RemoteParticipant, TrackPublication } from 'livekit-client';
+import {
+  LocalParticipant,
+  Participant,
+  RemoteParticipant,
+  Track,
+  TrackPublication,
+} from 'livekit-client';
 import { cssPrefix } from './constants';
@@ -33,1 +39,105 @@ export const kebabize = (str: string) =>
 };
+
+export type PinState = {
+  pinnedParticipant?: Participant;
+  pinnedTrackSource?: Track.Source;
+};
+
+export function isParticipantTrackPinned(
+  participant: Participant,
+  pinState: PinState | undefined,
+  source: Track.Source,
+): boolean {
+  if (pinState === undefined) {
+    console.warn(`pinState not set: `, pinState);
+    return false;
+  }
+
+  if (pinState.pinnedParticipant === undefined || pinState.pinnedTrackSource === undefined) {
+    console.warn(`pinState not set: `, pinState);
+    return false;
+  }
+
+  if (pinState.pinnedTrackSource !== source) {
+    return false;
+  }
+
+  if (pinState.pinnedParticipant.identity === participant.identity) {
+    console.log(`Participant has same identity as pinned.`, pinState);
+    switch (pinState.pinnedTrackSource) {
+      case Track.Source.Camera:
+        return participant.isCameraEnabled;
+        break;
+      case Track.Source.ScreenShare:
+        return participant.isScreenShareEnabled;
+        break;
+
+      default:
+        return false;
+        break;
+    }
+  } else {
+    return false;
+  }
+}
+
+/**
+ * Default sort for participants, it'll order participants by:
+ * 1. dominant speaker (speaker with the loudest audio level)
+ * 2. local participant
+ * 3. other speakers that are recently active
+ * 4. participants with video on
+ * 5. by joinedAt
+ */
+export function sortParticipantsByVolume(participants: Participant[]): Participant[] {
+  const sortedParticipants = [...participants];
+  sortedParticipants.sort((a, b) => {
+    // loudest speaker first
+    if (a.isSpeaking && b.isSpeaking) {
+      return b.audioLevel - a.audioLevel;
+    }
+
+    // speaker goes first
+    if (a.isSpeaking !== b.isSpeaking) {
+      if (a.isSpeaking) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+
+    // last active speaker first
+    if (a.lastSpokeAt !== b.lastSpokeAt) {
+      const aLast = a.lastSpokeAt?.getTime() ?? 0;
+      const bLast = b.lastSpokeAt?.getTime() ?? 0;
+      return bLast - aLast;
+    }
+
+    // video on
+    const aVideo = a.videoTracks.size > 0;
+    const bVideo = b.videoTracks.size > 0;
+    if (aVideo !== bVideo) {
+      if (aVideo) {
+        return -1;
+      } else {
+        return 1;
+      }
+    }
+
+    // joinedAt
+    return (a.joinedAt?.getTime() ?? 0) - (b.joinedAt?.getTime() ?? 0);
+  });
+  const localParticipant = sortedParticipants.find((p) => p instanceof LocalParticipant);
+  if (localParticipant) {
+    const localIdx = sortedParticipants.indexOf(localParticipant);
+    if (localIdx >= 0) {
+      sortedParticipants.splice(localIdx, 1);
+      if (sortedParticipants.length > 0) {
+        sortedParticipants.splice(1, 0, localParticipant);
+      } else {
+        sortedParticipants.push(localParticipant);
+      }
+    }
+  }
+  return sortedParticipants;
+}

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

96907

increased by1.91%

Lines of code

1611

increased by10.12%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of package files

102

decreased by-4.67%

Number of lines in readme file

15

decreased by-85.58%

No dependency changes