Release - 0.12.16 (#3116)

.github/workflows/create-release-pr.yml

@@ -6,13 +6,14 @@ on:
  description: 'which version to bump eg: prerelease, patch'
  required: true
  default: 'prerelease'
+
 
 jobs:
  create_pr:
  runs-on: ubuntu-latest
  steps:
  - name: Validate branch
- if: github.event.inputs.versionBump != 'prerelease' && github.ref != 'refs/heads/main'
+ if: github.event.inputs.versionBump != 'prerelease' && github.ref != 'refs/heads/dev'
  run: exit 1
 
  - uses: actions/checkout@v3
@@ -46,10 +47,10 @@ jobs:
 
  - uses: peter-evans/create-pull-request@v4
  with:
- commit-message: 'build: update versions for release'
- title: 'build: update versions for release'
+ commit-message: 'ci: update versions for release'
+ title: 'ci: update versions for release'
  body: |
  - @100mslive/hms-video-store - ${{ steps.version.outputs.store_version }}
- branch: release
+ branch: ci/release
  branch-suffix: short-commit-hash
  delete-branch: true

packages/hms-video-store/src/notification-manager/managers/RoomUpdateManager.ts

@@ -218,6 +218,7 @@ export class RoomUpdateManager {
  this.listener?.onRoomUpdate(HMSRoomUpdate.TRANSCRIPTION_STATE_UPDATED, room);
  }
  private convertHls(hlsNotification?: HLSNotification) {
+ // only checking for zeroth variant intialized
  const isInitialised =
  hlsNotification?.variants && hlsNotification.variants.length > 0
  ? hlsNotification.variants.some(variant => variant.state === HMSStreamingState.INITIALISED)

packages/hms-video-store/src/plugins/audio/HMSAudioPluginsManager.ts

@@ -122,6 +122,7 @@ export class HMSAudioPluginsManager {
  this.pluginsMap.set(name, plugin);
  await this.processPlugin(plugin);
  await this.connectToDestination();
+ await this.updateProcessedTrack();
  } catch (err) {
  HMSLogger.e(this.TAG, 'failed to add plugin', err);
  throw err;
@@ -213,6 +214,7 @@ export class HMSAudioPluginsManager {
  for (const plugin of plugins) {
  await this.addPlugin(plugin);
  }
+ this.updateProcessedTrack();
  }
 
  private async initAudioNodes() {
@@ -224,16 +226,19 @@ export class HMSAudioPluginsManager {
  if (!this.destinationNode) {
  this.destinationNode = this.audioContext.createMediaStreamDestination();
  this.outputTrack = this.destinationNode.stream.getAudioTracks()[0];
- try {
- await this.hmsTrack.setProcessedTrack(this.outputTrack);
- } catch (err) {
- HMSLogger.e(this.TAG, 'error in setting processed track', err);
- throw err;
- }
  }
  }
  }
 
+ private async updateProcessedTrack() {
+ try {
+ await this.hmsTrack.setProcessedTrack(this.outputTrack);
+ } catch (err) {
+ HMSLogger.e(this.TAG, 'error in setting processed track', err);
+ throw err;
+ }
+ }
+
  private async processPlugin(plugin: HMSAudioPlugin) {
  try {
  const currentNode = await plugin.processAudioTrack(

packages/hms-video-store/src/sdk/LocalTrackManager.ts

@@ -196,6 +196,7 @@ export class LocalTrackManager {
  }
  });
  }
+ // eslint-disable-next-line complexity
  async getLocalScreen(partialConfig?: HMSScreenShareConfig, optimise = false) {
  const config = await this.getOrDefaultScreenshareConfig(partialConfig);
  const screenSettings = this.getScreenshareSettings(config.videoOnly);
@@ -218,6 +219,12 @@ export class LocalTrackManager {
  googAutoGainControl: false,
  echoCancellation: false,
  };
+ } else if (partialConfig?.forceCurrentTab && partialConfig.preferCurrentTab && partialConfig.cropElement) {
+ // only need if crop element with prefer and force current tab
+ constraints.audio = {
+ echoCancellation: true,
+ noiseSuppression: true,
+ };
  }
  let stream;
  try {

packages/hms-virtual-background/src/HMSEffectsPlugin.ts

@@ -7,7 +7,7 @@ export type HMSEffectsBackground = string | MediaStream | MediaStreamTrack | HTM
 
 export class HMSEffectsPlugin implements HMSMediaStreamPlugin {
  private effects: tsvb;
- // Ranges from 0 to 1
+ // Ranges from 0 to 1, inclusive
  private blurAmount = 0;
  private background: HMSEffectsBackground = HMSVirtualBackgroundTypes.NONE;
  private backgroundType = HMSVirtualBackgroundTypes.NONE;

packages/hms-whiteboard/src/ErrorFallback.tsx

@@ -1,16 +1,17 @@
 import React, { ComponentType, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useValue } from '@tldraw/state';
-import { Editor, hardResetEditor, refreshPage } from '@tldraw/tldraw';
+import { Editor, hardResetEditor } from '@tldraw/tldraw';
 import classNames from 'classnames';
 
 const DISCORD_URL = 'https://discord.gg/pTge2BwDBq';
 
 export type TLErrorFallbackComponent = ComponentType<{
  error: unknown;
+ refresh: () => void;
  editor?: Editor;
 }>;
 
-export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
+export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh }) => {
  const containerRef = useRef<HTMLDivElement>(null);
  const [shouldShowError, setShouldShowError] = useState(process.env.NODE_ENV !== 'production');
  const [didCopy, setDidCopy] = useState(false);
@@ -24,7 +25,7 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
  () => {
  try {
  if (editor) {
- return editor.user.isDarkMode;
+ return editor.user.getIsDarkMode();
  }
  } catch {
  // we're in a funky error state so this might not work for spooky
@@ -34,7 +35,11 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
  },
  [editor],
  );
- const [isDarkMode, setIsDarkMode] = useState<null | boolean>(null);
+ const [
+ ,
+ // isDarkMode
+ setIsDarkMode,
+ ] = useState<null | boolean>(null);
  useLayoutEffect(() => {
  // if we found a theme class from the app, we can just use that
  if (isDarkModeFromApp !== null) {
@@ -81,10 +86,6 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
  setDidCopy(true);
  };
 
- const refresh = () => {
- refreshPage();
- };
-
  const resetLocalState = async () => {
  hardResetEditor();
  };
@@ -97,8 +98,11 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
  // error-boundary is sometimes used outside of the theme
  // container, so we need to provide it with a theme for our
  // styles to work correctly
- isDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light',
+ // 100ms: default light theme
+ // isDarkMode === null ? '' : isDarkMode ? 'tl-theme__dark' : 'tl-theme__light',
+ 'tl-theme__light',
  )}
+ style={{ position: 'static' }}
  >
  <div className="tl-error-boundary__overlay" />
  {/* {editor && (
@@ -152,11 +156,8 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor }) => {
  {shouldShowError ? 'Hide details' : 'Show details'}
  </button>
  <div className="tl-error-boundary__content__actions__group">
- <button className="tl-error-boundary__reset" onClick={() => setShouldShowResetConfirmation(true)}>
- Reset data
- </button>
  <button className="tl-error-boundary__refresh" onClick={refresh}>
- Refresh Page
+ Refresh
  </button>
  </div>
  </div>

packages/hms-whiteboard/src/Whiteboard.tsx

@@ -11,7 +11,20 @@ export interface WhiteboardProps {
  transparentCanvas?: boolean;
  onMount?: (args: { store?: unknown; editor?: unknown }) => void;
 }
-export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas, onMount }: WhiteboardProps) {
+export function Whiteboard(props: WhiteboardProps) {
+ const [key, setKey] = useState(Date.now() + props.token);
+
+ return <CollaborativeEditor key={key} refresh={() => setKey(Date.now() + props.token)} {...props} />;
+}
+
+function CollaborativeEditor({
+ endpoint,
+ token,
+ zoomToContent,
+ transparentCanvas,
+ onMount,
+ refresh,
+}: WhiteboardProps & { refresh: () => void }) {
  const [editor, setEditor] = useState<Editor>();
  const store = useCollaboration({
  endpoint,
@@ -27,13 +40,19 @@ export function Whiteboard({ endpoint, token, zoomToContent, transparentCanvas,
  onMount?.({ store: store.store, editor });
  };
 
+ if (store.status === 'synced-remote' && store.connectionStatus === 'offline') {
+ return <ErrorFallback error={Error('Network connection lost')} editor={editor} refresh={refresh} />;
+ }
+
  return (
  <Tldraw
  className={transparentCanvas ? 'transparent-canvas' : ''}
  autoFocus
  store={store}
  onMount={handleMount}
- components={{ ErrorFallback }}
+ components={{
+ ErrorFallback: ({ error, editor }) => <ErrorFallback editor={editor} error={error} refresh={refresh} />,
+ }}
  hideUi={editor?.getInstanceState()?.isReadonly}
  initialState={editor?.getInstanceState()?.isReadonly ? 'hand' : 'select'}
  />