PR for main to dev backmerge

.github/workflows/auto-pr-dev-to-main.yml

@@ -0,0 +1,22 @@
+name: Create PR from dev to main
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - dev
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'main'
+          pr_title: 'QA Handover PR'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**'
+          pr_label: 'release'

.github/workflows/auto-pr-prebuilt-branch.yml → .github/workflows/auto-pr-main-to-dev.yml

@@ -1,4 +1,4 @@
-name: Create PR from main to main-prebuilt
+name: Create PR from main to dev
 on:
   pull_request:
     types: [closed]
@@ -16,7 +16,7 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           source_branch: ''
-          destination_branch: 'main-prebuilt'
-          pr_title: 'PR for Prebuilt Link QA deployment'
-          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main-prebuilt**'
-          pr_label: 'Prebuilt Link QA deployment'
+          destination_branch: 'dev'
+          pr_title: 'PR for main to dev backmerge'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **dev**'
+          pr_label: 'backmerge'

.github/workflows/auto-pr-main-to-production.yml

@@ -0,0 +1,22 @@
+name: Create PR from main to production
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'production'
+          pr_title: 'Production release PR'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **production**'
+          pr_label: 'release'

.github/workflows/auto-pr-production-to-main.yml

@@ -0,0 +1,22 @@
+name: Create PR from production to main
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - production
+
+jobs:
+  pull-request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - name: pull-request
+        uses: repo-sync/pull-request@v2
+        if: github.event.pull_request.merged == true
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          source_branch: ''
+          destination_branch: 'main'
+          pr_title: 'Hotfix backmerge to main'
+          pr_body: ':robot: Automated PR from **${{ github.ref }}** to **main**'
+          pr_label: 'backmerge'

.github/workflows/deploy-dev.yml

@@ -1,15 +1,14 @@
 name: Deploy Dev
 on:
   workflow_dispatch:
-    inputs:
-      buildEnvForDev:
-        description: 'which env to build - qa/prod for dev-app, applies only if env is dev'
-        type: 'choice'
-        required: false
-        default: prod
-        options:
-          - prod
-          - qa
+  push:
+    branches:
+      - dev
+    paths-ignore:
+      - 'cypress/**'
+      - 'playwright/**'
+      - 'internal-docs/**'
+      - '.github/**'
 
 jobs:
   build:
@@ -38,9 +37,9 @@ jobs:
       REACT_APP_ENV: ${{ github.event.inputs.buildEnvForDev }}
       REACT_APP_ZIPY_KEY: ${{ secrets.ZIPY_KEY }}
       REACT_APP_ENABLE_BEAM_SPEAKERS_LOGGING: 'true'
-      REACT_APP_INIT_ENDPOINT: https://qa-init.100ms.live/init
-      REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api-nonprod.100ms.live/v2/layouts/ui
-      REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth-nonprod.100ms.live/v2/token
+      REACT_APP_INIT_ENDPOINT: https://prod-in3.100ms.live/init
+      REACT_APP_ROOM_LAYOUT_ENDPOINT: https://api.100ms.live/v2/layouts/ui
+      REACT_APP_TOKEN_BY_ROOM_CODE_ENDPOINT: https://auth.100ms.live/v2/token
     steps:
       - name: log inputs
         run: |

packages/hms-video-web/src/media/tracks/HMSLocalVideoTrack.ts

@@ -344,6 +344,7 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
     return newSettings;
   };
 
+  // eslint-disable-next-line complexity
   private handleSettingsChange = async (settings: HMSVideoTrackSettings) => {
     const stream = this.stream as HMSLocalStream;
     const hasPropertyChanged = generateHasPropertyChanged(settings, this.settings);
@@ -352,10 +353,14 @@ export class HMSLocalVideoTrack extends HMSVideoTrack {
     }
 
     if (hasPropertyChanged('width') || hasPropertyChanged('height') || hasPropertyChanged('advanced')) {
-      const track = await this.replaceTrackWith(settings);
-      await this.replaceSender(track, this.enabled);
-      this.nativeTrack = track;
-      this.videoHandler.updateSinks();
+      if (this.source === 'video') {
+        const track = await this.replaceTrackWith(settings);
+        await this.replaceSender(track, this.enabled);
+        this.nativeTrack = track;
+        this.videoHandler.updateSinks();
+      } else {
+        await this.nativeTrack.applyConstraints(settings.toConstraints());
+      }
     }
   };
 

packages/roomkit-react/src/Prebuilt/App.tsx

@@ -40,6 +40,7 @@ import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
+import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
 import {
   useRoomLayoutLeaveScreen,
   useRoomLayoutPreviewScreen,
@@ -261,6 +262,7 @@ const Redirector = ({ showPreview }: { showPreview: boolean }) => {
 const RouteList = () => {
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  useAutoStartStreaming();
   return (
     <Routes>
       {isPreviewScreenEnabled ? (

packages/roomkit-react/src/Prebuilt/common/PeersSorter.ts

@@ -60,7 +60,7 @@ class PeersSorter {
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
     const lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length >= this.tilesPerPage) {
+    while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
       lruPeerArray.pop();
     }
     this.lruPeers = new Set([speaker.id, ...lruPeerArray]);

packages/roomkit-react/src/Prebuilt/common/constants.js

@@ -93,5 +93,3 @@ export const SESSION_STORE_KEY = {
   PINNED_MESSAGE: 'pinnedMessage',
   SPOTLIGHT: 'spotlight',
 };
-
-export const ROLE_CHANGE_DECLINED = 'role_change_declined';

packages/roomkit-react/src/Prebuilt/common/utils.js

@@ -40,7 +40,7 @@ export const arrayIntersection = (a, b) => {
 
 export const getMetadata = metadataString => {
   try {
-    return metadataString === '' ? {} : JSON.parse(metadataString);
+    return !metadataString ? {} : JSON.parse(metadataString);
   } catch (error) {
     return {};
   }

packages/roomkit-react/src/Prebuilt/components/Chat/ChatBody.jsx

@@ -271,7 +271,7 @@ const ChatMessage = React.memo(({ index, style = {}, message, setRowHeight, onPi
                 variant="xs"
                 css={{
                   ml: '$4',
-                  color: '$on_primary_medium',
+                  color: '$on_surface_medium',
                   flexShrink: 0,
                 }}
               >

packages/roomkit-react/src/Prebuilt/components/Chat/ChatFooter.jsx

@@ -130,6 +130,7 @@ export const ChatFooter = ({ role, peerId, onSend, children /* onSelect, selecti
         >
           {children}
           <TextArea
+            css={{ c: '$on_surface_high' }}
             placeholder="Send a message...."
             ref={inputRef}
             autoFocus

packages/roomkit-react/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -21,12 +21,11 @@ import {
 } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
-import { useRoomLayout } from '../../provider/roomLayoutProvider';
 import { ChatParticipantHeader } from '../Chat/ChatParticipantHeader';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
-import { RoleChangeModal } from '../RoleChangeModal';
 import { ToastManager } from '../Toast/ToastManager';
 import { RoleAccordion } from './RoleAccordion';
+import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
 import { isInternalRole } from '../../common/utils';
@@ -46,7 +45,6 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
-  const [selectedPeerId, setSelectedPeerId] = useState(null);
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -75,16 +73,7 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
-          setSelectedPeerId={setSelectedPeerId}
         />
-        {selectedPeerId && (
-          <RoleChangeModal
-            peerId={selectedPeerId}
-            onOpenChange={value => {
-              !value && setSelectedPeerId(null);
-            }}
-          />
-        )}
       </Flex>
     </Fragment>
   );
@@ -126,13 +115,7 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({
-  peersOrderedByRoles = {},
-  isConnected,
-  setSelectedPeerId,
-  filter,
-  handRaisedList = [],
-}) => {
+const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
   return (
     <Flex
       direction="column"
@@ -149,7 +132,6 @@ const VirtualizedParticipants = ({
         roleName="Hand Raised"
         filter={filter}
         isConnected={isConnected}
-        setSelectedPeerId={setSelectedPeerId}
         isHandRaisedAccordion
       />
       {Object.keys(peersOrderedByRoles).map(role => (
@@ -158,15 +140,14 @@ const VirtualizedParticipants = ({
           peerList={peersOrderedByRoles[role]}
           roleName={role}
           isConnected={isConnected}
-          setSelectedPeerId={setSelectedPeerId}
           filter={filter}
         />
       ))}
     </Flex>
   );
 };
 
-export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
+export const Participant = ({ peer, isConnected }) => {
   const localPeerId = useHMSStore(selectLocalPeerID);
   return (
     <Flex
@@ -186,14 +167,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
-        <ParticipantActions
-          peerId={peer.id}
-          isLocal={peer.id === localPeerId}
-          role={peer.roleName}
-          onSettings={() => {
-            setSelectedPeerId(peer.id);
-          }}
-        />
+        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
       ) : null}
     </Flex>
   );
@@ -202,7 +176,7 @@ export const Participant = ({ peer, isConnected, setSelectedPeerId }) => {
 /**
  * shows settings to change for a participant like changing their role
  */
-const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) => {
+const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
   const isHandRaised = useHMSStore(selectPeerMetadata(peerId))?.isHandRaised;
   const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
   const shouldShowMoreActions = canChangeRole;
@@ -214,7 +188,6 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       css={{
         flexShrink: 0,
         gap: '$8',
-        mt: '$2',
       }}
     >
       <ConnectionIndicator peerId={peerId} />
@@ -238,23 +211,22 @@ const ParticipantActions = React.memo(({ onSettings, peerId, role, isLocal }) =>
       ) : null}
 
       {shouldShowMoreActions && !isInternalRole(role) && !isLocal ? (
-        <ParticipantMoreActions onRoleChange={onSettings} peerId={peerId} role={role} />
+        <ParticipantMoreActions peerId={peerId} role={role} />
       ) : null}
     </Flex>
   );
 });
 
-const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
+const ParticipantMoreActions = ({ peerId, role }) => {
   const hmsActions = useHMSActions();
   const { changeRole: canChangeRole, removeOthers: canRemoveOthers } = useHMSStore(selectPermissions);
-  const layout = useRoomLayout();
+  const { elements } = useRoomLayoutConferencingScreen();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = [],
-  } = layout?.screens?.conferencing?.default?.elements.on_stage_exp || {};
-  const canBringToStage = off_stage_roles.includes(role);
+  } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
   const localPeerId = useHMSStore(selectLocalPeerID);
@@ -296,21 +268,14 @@ const ParticipantMoreActions = ({ onRoleChange, peerId, role }) => {
       </Dropdown.Trigger>
       <Dropdown.Portal>
         <Dropdown.Content align="end" sideOffset={8} css={{ w: '$64', bg: '$surface_default' }}>
-          {canChangeRole && canBringToStage ? (
+          {canChangeRole ? (
             <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => handleStageAction()}>
               <ChangeRoleIcon />
               <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
                 {isInStage ? remove_from_stage_label : bring_to_stage_label}
               </Text>
             </Dropdown.Item>
-          ) : (
-            <Dropdown.Item css={{ bg: '$surface_default' }} onClick={() => onRoleChange(peerId)}>
-              <ChangeRoleIcon />
-              <Text variant="sm" css={{ ml: '$4', fontWeight: '$semiBold', c: '$on_surface_high' }}>
-                Change Role
-              </Text>
-            </Dropdown.Item>
-          )}
+          ) : null}
 
           {!isLocal && canRemoveOthers && (
             <Dropdown.Item