Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@100mslive/hms-video-store

Package Overview
Dependencies
Maintainers
12
Versions
730
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@100mslive/hms-video-store

This is an addon to the core sdk provided by 100ms. It abstracts away the intricacies of data management and provides a flux based reactive data store where data flows in only one direction.

  • 0.1.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
26K
increased by20.09%
Maintainers
12
Weekly downloads
 
Created
Source

100ms Reactive Store

Test Size Publish Bundle Size Tree shaking

Architecture

This is an addon to the core sdk provided by 100ms. It abstracts away the intricacies of data management and provides a flux based reactive data store where data flows in only one direction.

The complexity of managing the state of a room is not a trivial task and can spiral out of control very fast. For example, multiple UI components can be interested in a simple data point such as whether the user is currently muted. The mute action itself can be taken from multiple different places in the UI or even by a remote participant. Local states and improper handling of actions or missing corner cases, state duplication etc. have a high potential to make the data mutually inconsistent and out of sync with the source of truth.

This is an opinionated reactive layer on top of our core sdk which takes some control in order to provide an even easier usability and integration experience. Your UI components can forget about local states, and tracking what actions are happening, instead focusing only on giving the best possible experience to the end users.

There are two important pieces, store for what you want to show and actions for what you want to do -

  1. Store - The core store interface for reading data usually using selectors. The store acts as a single source of truth for any data related to the room. There are two exposed functions -
    • getState(selector) -> get the current state of the UI, true at the time of function call
    • subscribe(callback, selector) -> subscribe to a portion of the state selected by the passed in selector such that whenever the portion changes, the passed in callback is notified.
  2. Actions - The actions interface for dispatching actions which in turn may reach out to server and update the store. Check the interface with detailed doc here.

We also provide optimized and efficient selectors for most common use cases. These are available in this folder.

Important Note: The data received from either getState or Subscribe is immutable, the object received is frozen, and it is not allowed to mutate it. You'll get an error if you try to mutate this data in any way. Immutability of the store is how we ensure it to be consistent and reflect the truth at any point of time.

How To Use

const manager = new HMSReactiveStore();
const hmsActions = manager.getHMSActions();
const hmsStore = manager.getStore();

const toggleAudio = () => {
    const isEnabled = hmsStore.getState(selectIsLocalAudioEnabled);
    hmsActions.setLocalAudioEnabled(!isEnabled);
}

const onSpeakerUpdate = (speaker, prevSpeaker) => {
    console.log("speaker changed from - ", prevSpeaker, ", to - ", speaker);
}

hmsStore.subscribe(onSpeakerUpdate, selectDominantSpeakerName);

Framework specific wrappers

Most of the popular javascript frameworks are reactive in nature and have some kind of associated concept which can simplify development further. We plan to provide a few framework specific wrappers as well for smoother integration.

React

We provide two hooks one for reading for the store and another for taking actions. We provide a HMSRoomProvider component which takes care of initialization and making these hooks available to your UI components.

function join() {
    const isConnected = useHMSStore(selectIsConnectedToRoom);
    const hmsActions = useHMSActions();
    
    return <>
        {
            !isConnected && 
            <Button onClick={hmsActions.join()}>Join</Button>
        }
        </>
}

Out of Box Support for Redux Devtools Extension

Store State

Store State

Store Graph

Store State

Keywords

FAQs

Package last updated on 30 May 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc