npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

avc-sdk-react

v1.0.17

Published

## Before install Before using this library, you must publish it into your package registry, for example into gitlab or jfrog.

Downloads

71

Readme

avc-sdk-react

Before install

Before using this library, you must publish it into your package registry, for example into gitlab or jfrog.

Then update ~/.npmrc file, to be able to install it later:

@nites:registry=https://gitlab.com/api/v4/packages/npm/
//gitlab.com/api/v4/packages/npm/:_authToken=<token>

Build library

In order to build a library, run the following commands:

yarn build

It will produce a dist folder with all components and primitives.

To publish the library, run the command:

yarn publish

Documentation for connecting calls from livekit/components-react

Installation: https://docs.livekit.io/reference/components/react/

React Components: https://docs.livekit.io/reference/components/react/

FAQ: https://docs.livekit.io/reference/components/react/faq/

Local development

For faster local development, you can use yalc package to link this library with another local project.

API

SDK can be used in two ways:

  • use hooks to create custom UI

Using hooks to build custom UI:

import { useState } from 'react';
import { useVideoChat } from 'avc-sdk-react';

function CustomVideoChat() {
  const chatId = '...'; // Id of the chat to enter
  const token = '...'; // JWT token of the user
  const url = 'https://...'; // HTTPS url to video-chat app backend
  const acceptCalls = true; // Enable video/audio calls
  const authParams = { // Authorization parameters
        langCode: 'en',
        firebaseToken: 'test',
        deviceType: 2
  }

  const [ text, setText ] = useState('');
  const vc = useVideoChat({
    chatId,
    token,
    url,
    acceptCalls,
    authParams
  });

  return (
    <div>
      {vc.chat.title}

      <div>
        {vc.messages.map(message => (
          <p key={message.id}>{messate.text}</p>
        ))}
      </div>

      <input onInput={e => setText(e.target.value)}/>
      <button onClick={() => vc.sendMessage(text)}>
        Send Message
      </button>
    </div>
  );
}

Hook Parameters

The useVideoChat hook accepts the following input parameters:

  • url (string): The URL for the socket connection.

  • token (string): The authentication token for the socket connection.

  • chatId (string): The unique identifier for the chat or conversation you want to associate with the video chat functionality.

  • acceptCalls (boolean, optional, default: true): A flag to indicate whether the application should accept incoming calls. If set to false, the hook will not subscribe to call-related events.

  • authParams (Object): Authorization parameters.

Hook Returned Fields

The useVideoChat hook returns an object with the following fields and functions:

  • socket (object): Socket object

  • online (boolean): Indicates whether the user is currently online.

  • user (object): Information about the connected user.

  • currentChat (object): Information about the current chat, including its id, title, and a list of users.

  • chatsList (array): An array of user chats.

  • chat (array): Сhat received from getChat.

  • createdChat (object): Сhat received from createChat.

  • modifiedChat (object): Сhat received from modifyChat.

  • messages (array): An array of messages in the current chat. Each message includes details like chatId, text, and attachments.

  • currentUserId (string): The ID of the current user.

  • room (object): Information about the call room, including its chatId and userId.

  • calling (boolean): Indicates whether a call is currently in progress.

  • activeCall (object): Details about the active call, including its chatId and userId.

  • incomingCall (object): Details about an incoming call, including its chatId and userId.

  • chatVisible (boolean): Indicates whether the chat interface is currently visible.

  • error (object): An error message with a title and message. This can be used to display global errors in the UI.

  • filesDownloadProgress (object): A dictionary that tracks the download progress of files in the chat.

  • toggleChat (function): A function to toggle the chat interface's visibility.

  • startCall (function): Initiates a call with the specified chatId and an optional video flag to indicate video calling.

  • acceptCall (function): It accepts chatId, Accepts an incoming call.

  • declineCall (function): It accepts chatId, Declines an incoming call.

  • sendNotification (function): Sends a notification to a specific user.

  • sendMessage (function): Sends a message to the chat. It accepts text and an optional file for attachments and an optional type.

  • loadMessages (function): Loads messages in the chat, with an optional beforeId and a messageСontain for message retrieval.

  • getMessages async (function): Loads messages by the chatId, with an optional beforeId, limit and a messageСontain. Returns the requested messages

interface GetMessagesOptions {
  chatId: string;
  limit?: number;
  beforeId?: string;
  messageСontain?: string;
}

const getMessages: (options: GetMessagesOptions) => Promise<Message[]>
  • getChats async (function): Load all available chats for current user, with an optional title, contactPermission, usersType, connectionType, chatType, limit, skip. Returns the requested chats.
interface GetChats {
  skip?: number;
  limit?: number;
  title?: string;
  contactPermission?: boolean;
  usersType?: number;
  connectionType?: number;
  chatType?: number;
}

const getChats: (options?: GetChats) => Promise<Chat[]>
  • downloadFile (function): Downloads a file with the specified id and name. This function checks if the file is available and ready for download.

  • leaveCall (function): Leaves an ongoing call.

  • createChat (function): Create a new chat.

  • modifyChat (function): Modify a chat.

  • getChat (function): Load chat by chatId.