From e4e042a3ba8ae48c7b1b613b05a2c177b53663b4 Mon Sep 17 00:00:00 2001 From: Aravind Raveendran Date: Wed, 27 Mar 2024 16:39:12 +1100 Subject: [PATCH 1/3] Add Layer selection --- src/components/BottomBar/BottomBar.style.ts | 1 + src/components/BottomBar/BottomBar.tsx | 11 ++- .../SimulcastView/SimulcastView.style.ts | 48 +++++++++ .../SimulcastView/SimulcastView.tsx | 54 ++++++++++ src/components/SimulcastView/index.ts | 3 + .../StreamStats/StreamStats.style.ts | 1 + src/screens/multiview/MultiView.tsx | 35 ++++++- .../SingleStreamView.style.ts | 2 +- .../singleStreamView/SingleStreamView.tsx | 98 +++++++++++++++++-- src/store/reducers/viewer.js | 31 +++++- src/translations/en.json | 3 +- src/types/RemoteTrackSource.types.ts | 10 +- .../Icon/IconComponents/check-mark.svg | 3 + .../Icon/IconComponents/checkmark.svg | 3 + .../components/Icon/IconComponents/index.ts | 2 + 15 files changed, 284 insertions(+), 21 deletions(-) create mode 100644 src/components/SimulcastView/SimulcastView.style.ts create mode 100644 src/components/SimulcastView/SimulcastView.tsx create mode 100644 src/components/SimulcastView/index.ts create mode 100644 src/uikit/components/Icon/IconComponents/check-mark.svg create mode 100644 src/uikit/components/Icon/IconComponents/checkmark.svg diff --git a/src/components/BottomBar/BottomBar.style.ts b/src/components/BottomBar/BottomBar.style.ts index 1b4d2e6..e6d6503 100644 --- a/src/components/BottomBar/BottomBar.style.ts +++ b/src/components/BottomBar/BottomBar.style.ts @@ -7,6 +7,7 @@ const styles = AppStyleSheet.create({ alignItems: 'stretch', justifyContent: 'space-between', paddingHorizontal: 20, + width: '100%', }, }); export default styles; diff --git a/src/components/BottomBar/BottomBar.tsx b/src/components/BottomBar/BottomBar.tsx index b486734..6d1dd91 100644 --- a/src/components/BottomBar/BottomBar.tsx +++ b/src/components/BottomBar/BottomBar.tsx @@ -4,7 +4,7 @@ import { View, TouchableOpacity, Platform } from 'react-native'; import styles from './BottomBar.style'; -export const BottomBar = ({ displayStatsInformation, focus }) => { +export const BottomBar = ({ displayStatsInformation, displaySimulcastSelection, focus }) => { const iconSize = Platform.OS === 'android' && Platform.isTV ? 's' : 'm'; return ( @@ -17,6 +17,15 @@ export const BottomBar = ({ displayStatsInformation, focus }) => { > + { + displaySimulcastSelection(); + }} + > + + ); }; diff --git a/src/components/SimulcastView/SimulcastView.style.ts b/src/components/SimulcastView/SimulcastView.style.ts new file mode 100644 index 0000000..5cefc9b --- /dev/null +++ b/src/components/SimulcastView/SimulcastView.style.ts @@ -0,0 +1,48 @@ +import { AppStyleSheet as StyleSheet } from '@dolbyio/uikit-react-native'; +import { Platform } from 'react-native'; + +const styles = StyleSheet.create({ + outerContainer: { + flex: 1, + backgroundColor: '#292930E5', + marginTop: 100, + borderTopLeftRadius: 14, + borderTopRightRadius: 14, + }, + simulcastCell: { + width: '100%', + height: 50, + flexDirection: 'row', + backgroundColor: '#34343B', + marginVertical: 5, + justifyContent: 'center', + alignContent: 'center', + }, + outerContainerTV: { + height: '50%', + width: '20%', + position: 'absolute', + backgroundColor: '#292930', + bottom: 20, + left: '80%', + borderRadius: 14, + }, + innerContainer: { + marginTop: 10, + flexDirection: 'column', + alignItems: 'stretch', + justifyContent: 'space-between', + paddingHorizontal: 0, + }, + simulcastOptionsContainer: { + marginTop: Platform.isTV ? 10 : 60, + marginHorizontal: 16, + }, + closeIcon: { + flexDirection: 'row', + justifyContent: 'flex-end', + marginTop: 20, + paddingHorizontal: 20, + }, +}); +export default styles; diff --git a/src/components/SimulcastView/SimulcastView.tsx b/src/components/SimulcastView/SimulcastView.tsx new file mode 100644 index 0000000..5a2fc63 --- /dev/null +++ b/src/components/SimulcastView/SimulcastView.tsx @@ -0,0 +1,54 @@ +import React from 'react'; +import { View, TouchableOpacity, FlatList, Platform } from 'react-native'; + +import Icon from '../../uikit/components/Icon/Icon'; +import Text from '../text/Text'; + +import styles from './SimulcastView.style'; + +export const SimulcastView = ({ streamQualityList, selectedStreamQuality, onClose, onSelectStreamQuality }) => { + const isSelected = (streamQuality) => { + return selectedStreamQuality === streamQuality; + }; + const renderItem = ({ item }) => ( + { + onSelectStreamQuality(item); + }} + > + + {isSelected(item.streamQuality) && } + + {item.streamQuality} + + + + ); + + return ( + + + + + + + + + + item.streamQuality} + renderItem={renderItem} + /> + + + + ); +}; diff --git a/src/components/SimulcastView/index.ts b/src/components/SimulcastView/index.ts new file mode 100644 index 0000000..b501059 --- /dev/null +++ b/src/components/SimulcastView/index.ts @@ -0,0 +1,3 @@ +import { SimulcastView } from './SimulcastView'; + +export default SimulcastView; diff --git a/src/components/StreamStats/StreamStats.style.ts b/src/components/StreamStats/StreamStats.style.ts index 732efbf..bdcce73 100644 --- a/src/components/StreamStats/StreamStats.style.ts +++ b/src/components/StreamStats/StreamStats.style.ts @@ -16,6 +16,7 @@ const styles = StyleSheet.create({ bottom: 20, left: 20, borderRadius: 14, + position: 'absolute', }, innerContainer: { marginTop: 10, diff --git a/src/screens/multiview/MultiView.tsx b/src/screens/multiview/MultiView.tsx index 50ed313..4132ec4 100644 --- a/src/screens/multiview/MultiView.tsx +++ b/src/screens/multiview/MultiView.tsx @@ -5,6 +5,9 @@ import { MediaTrackInfo, ViewProjectSourceMapping, MediaStreamSource, + MediaStreamLayers, + MediaLayer, + LayerInfo, } from '@millicast/sdk'; import { useNetInfo } from '@react-native-community/netinfo'; import React, { useEffect, useRef, useState } from 'react'; @@ -25,7 +28,7 @@ import { import { RTCView } from 'react-native-webrtc'; import { useSelector, useDispatch } from 'react-redux'; -import { RemoteTrackSource } from '../../types/RemoteTrackSource.types'; +import { RemoteTrackSource, SimulcastQuality } from '../../types/RemoteTrackSource.types'; import { Routes } from '../../types/routes.types'; window.Logger = MillicastLogger; @@ -42,6 +45,7 @@ export const MultiView = ({ navigation }) => { const playing = useSelector((state) => state.viewerReducer.playing); const error = useSelector((state) => state.viewerReducer.error); const audioRemoteTrackSource = useSelector((state) => state.viewerReducer.audioRemoteTrackSource); + const dispatch = useDispatch(); const { routes, index } = navigation.getState(); const currentRoute = routes[index].name; @@ -51,6 +55,7 @@ export const MultiView = ({ navigation }) => { const sourceIdsRef = useRef([]); const netInfo = useNetInfo(); const audioRemoteTrackSourceRef = useRef(null); + const [isReconnectionScheduled, setIsReconnectionScheduled] = useState(false); remoteTrackSourcesRef.current = remoteTrackSources; @@ -144,6 +149,25 @@ export const MultiView = ({ navigation }) => { } }; + const buildQualityOptions = (active, layers) => { + const descendingLayers = active.sort((a, b) => b.height - a.height); + + const qualityOptions: SimulcastQuality[] = descendingLayers.map((active) => ({ + simulcastLayer: { + bitrate: active.bitrate, + encodingId: active.id, + simulcastIdx: active.simulcastIdx, + spatialLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.spatialLayerId, + temporalLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.temporalLayerId, + maxSpatialLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.maxSpatialLayerId, + maxTemporalLayerId: layers.find((layer) => layer.simulcastIdx === active.simulcastIdx)?.maxTemporalLayerId, + }, + streamQuality: `${active.height}p`, + })); + + return [{ streamQuality: 'Auto' } as SimulcastQuality, ...qualityOptions]; + }; + const subscribe = async () => { if (millicastViewRef.current?.isActive()) { return; @@ -193,6 +217,7 @@ export const MultiView = ({ navigation }) => { payload: newRemoteTrackSource, }); } + await viewer.project(sourceId, mappingForProjection); dispatch({ type: 'viewer/addRemoteTrackSource', @@ -231,11 +256,15 @@ export const MultiView = ({ navigation }) => { // A new source was multiplexed over the vad tracks break; case 'layers': + const { medias } = data; + const mediaId = Object.keys(medias)[0]; + const { active, layers } = (data as MediaStreamLayers).medias[mediaId] ?? {}; + const streamQualities = buildQualityOptions(active, layers); + dispatch({ type: 'viewer/setActiveLayers', - payload: data.medias?.['0']?.active, + payload: { mediaId, streamQualities }, }); - // Updated layer information for each simulcast/svc video track break; default: console.log('Unknown event', name); diff --git a/src/screens/singleStreamView/SingleStreamView.style.ts b/src/screens/singleStreamView/SingleStreamView.style.ts index 33859d4..9cb8ae8 100644 --- a/src/screens/singleStreamView/SingleStreamView.style.ts +++ b/src/screens/singleStreamView/SingleStreamView.style.ts @@ -13,7 +13,7 @@ const styles = () => ...StyleSheet.absoluteFill, }, bottomMultimediaContainer: { - width, + width: '100%', alignItems: 'stretch', justifyContent: 'space-between', paddingVertical: 15, diff --git a/src/screens/singleStreamView/SingleStreamView.tsx b/src/screens/singleStreamView/SingleStreamView.tsx index 2de49b4..6a18007 100644 --- a/src/screens/singleStreamView/SingleStreamView.tsx +++ b/src/screens/singleStreamView/SingleStreamView.tsx @@ -1,7 +1,7 @@ /* eslint-disable */ -import { Logger as MillicastLogger } from '@millicast/sdk'; +import { Logger as MillicastLogger, ViewProjectSourceMapping } from '@millicast/sdk'; import React, { useEffect, useRef, useState, useCallback } from 'react'; -import { View, SafeAreaView, FlatList, Dimensions, Platform } from 'react-native'; +import { View, FlatList, Dimensions, Platform, TouchableOpacity } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import { RTCView } from 'react-native-webrtc'; @@ -9,8 +9,10 @@ import { BottomBar } from '../../components/BottomBar/BottomBar'; import { StreamStats } from '../../components/StreamStats/StreamStats'; import { StreamStatusIndicator } from '../../components/StreamStatusIndicator/StreamStatusIndicator'; import { ContainerView } from '../../components/ContainerView/ContainerView'; -import { RemoteTrackSource } from '../../types/RemoteTrackSource.types'; +import { RemoteTrackSource, SimulcastQuality } from '../../types/RemoteTrackSource.types'; import makeStyles from './SingleStreamView.style'; +import Text from '../../components/text/Text'; +import { SimulcastView } from '../../components/SimulcastView/SimulcastView'; window.Logger = MillicastLogger; window.Logger.setLevel(MillicastLogger.DEBUG); @@ -20,22 +22,33 @@ export const SingleStreamView = ({ navigation }) => { const remoteTrackSources = useSelector((state) => state.viewerReducer.remoteTrackSources); const selectedSource = useSelector((state) => state.viewerReducer.selectedSource); const millicastView = useSelector((state) => state.viewerReducer.millicastView); + const activeLayers = useSelector((state) => state.viewerReducer.activeLayers); + const projectedLayers = useSelector((state) => state.viewerReducer.projectedLayers); + const dispatch = useDispatch(); const remoteTrackSourcesRef = useRef(null); const selectedSourceRef = useRef(null); const millicastViewRef = useRef(null); + const activeLayersRef = useRef(null); + const projectedLayersRef = useRef(null); selectedSourceRef.current = selectedSource; remoteTrackSourcesRef.current = remoteTrackSources; millicastViewRef.current = millicastView; + activeLayersRef.current = activeLayers; + projectedLayersRef.current = projectedLayers; const [videoTileIndex, setVideoTileIndex] = useState(-1); const [width, setWidth] = useState(Dimensions.get('window').width); const [height, setHeight] = useState(Dimensions.get('window').height); + const [streamQualities, setStreamQualities] = useState([]); const [indicatorLayout, setIndicatorLayout] = useState(styles.indicatorLayout); const [isStreamStatsModelVisible, setIsStreamStatsModelVisible] = useState(false); + const [isSimulcastSelectionVisible, setIsSimulcastSelectionVisible] = useState(false); + const [selectedStreamQuality, setSelectedStreamQuality] = useState('Auto'); + const [isFocused, setIsFocused] = useState(true); const [visibleRemoteTrackSource, setVisibleRemoteTrackSource] = useState(null); @@ -75,12 +88,69 @@ export const SingleStreamView = ({ navigation }) => { }, []); useEffect(()=> { - const streamIndex = remoteTrackSourcesRef.current.findIndex( (remoteTrackSource) => remoteTrackSource.videoMediaId === selectedSourceRef.current?.videoMediaId && remoteTrackSource.mediaStream.toURL() === selectedSourceRef.current?.mediaStream.toURL()); + const streamIndex = remoteTrackSourcesRef.current.findIndex((remoteTrackSource) => remoteTrackSource.videoMediaId === selectedSourceRef.current?.videoMediaId && remoteTrackSource.mediaStream.toURL() === selectedSourceRef.current?.mediaStream.toURL()); const remoteTrackSource = remoteTrackSources[streamIndex]; setVisibleRemoteTrackSource(remoteTrackSource); setVideoTileIndex(streamIndex); + + updateStreamQualitiesAndSelectedLayerStates(); }, [selectedSource, remoteTrackSources]); + useEffect(()=> { + updateStreamQualitiesAndSelectedLayerStates(); + }, [activeLayers]); + + useEffect(()=> { + updateStreamQualitiesAndSelectedLayerStates(); + }, [projectedLayers]); + + const updateStreamQualitiesAndSelectedLayerStates = () => { + const mediaId = selectedSourceRef.current?.videoMediaId + if (mediaId) { + const layerObjectMatchingMid = activeLayersRef.current?.find((activeLayer) => activeLayer.mediaId === mediaId); + if (layerObjectMatchingMid === undefined) { + setStreamQualities([]); + } else { + const streamQualitiesToSet = layerObjectMatchingMid.streamQualities + setStreamQualities(streamQualitiesToSet); + } + + const selectedLayer = projectedLayersRef.current?.find((layer) => layer.mediaId === mediaId); + if (selectedLayer) { + setSelectedStreamQuality(selectedLayer.streamQuality); + } else { + setSelectedStreamQuality('Auto'); + } + } + }; + + const selectStreamQuality = async (quality) => { + const simulcastQualityToSelect = streamQualities.find((streamQuality) => streamQuality.streamQuality === quality.streamQuality); + + const selectedSourceMid = selectedSourceRef.current?.videoMediaId + const sourceMatchingMid = remoteTrackSourcesRef.current.find( + (remoteTrackSource) => remoteTrackSource.videoMediaId === selectedSourceMid, + ); + + if (simulcastQualityToSelect && sourceMatchingMid) { + const videoTrackId = sourceMatchingMid.videoTrackId; + const videoMapping = { media: 'video', trackId: videoTrackId, mediaId: selectedSourceMid } as ViewProjectSourceMapping; + if (quality !== 'Auto') { + videoMapping.layer = simulcastQualityToSelect.simulcastLayer; + } + await millicastViewRef.current.unproject([selectedSourceMid]); + await millicastViewRef.current.project(sourceMatchingMid.sourceId, [videoMapping]); + + dispatch({ + type: 'viewer/setProjectedLayer', + payload: { + videoMediaId: selectedSourceMid, + streamQuality: quality.streamQuality, + } + }); + } + } + const openStreamStatsModel = () => { if(!isStreamStatsModelVisible) { setIsStreamStatsModelVisible(true); @@ -110,6 +180,20 @@ export const SingleStreamView = ({ navigation }) => { } }; + const openSimulcastModel = () => { + if(!isSimulcastSelectionVisible) { + setIsSimulcastSelectionVisible(true); + setIsFocused(false); + } + } + + const closeSimulcastModel = () => { + if(isSimulcastSelectionVisible) { + setIsSimulcastSelectionVisible(false); + setIsFocused(true); + } + } + const renderVideoItem = ({item}) => ( { viewabilityConfig={viewabilityConfig} /> - + {isStreamStatsModelVisible && } + {isSimulcastSelectionVisible && } ); -}; - +}; \ No newline at end of file diff --git a/src/store/reducers/viewer.js b/src/store/reducers/viewer.js index 773a690..c665aef 100644 --- a/src/store/reducers/viewer.js +++ b/src/store/reducers/viewer.js @@ -1,5 +1,3 @@ -import { NativeModules, Platform } from 'react-native'; - /* eslint-disable */ const initialState = { streamName: null, @@ -16,6 +14,8 @@ const initialState = { muted: false, multiView: false, streamStats: null, + projectedVideoMids: [], + projectedLayers: [], }; const viewerReducer = (state = initialState, action) => { @@ -41,9 +41,25 @@ const viewerReducer = (state = initialState, action) => { sourceIds: action.payload, }; case 'viewer/setActiveLayers': - return { - ...state, - activeLayers: action.payload, + const {mediaId, streamQualities} = action.payload; + const sourceToAddLayer = state.remoteTrackSources.find( + (remoteTrackSource) => remoteTrackSource.videoMediaId === mediaId, + ); + if (sourceToAddLayer) { + return { + ...state, + activeLayers: [...state.activeLayers.filter((activeLayer) => activeLayer.mediaId !== mediaId), {mediaId, streamQualities}] + }; + } else { + return { + ...state, + }; + } + case 'viewer/setProjectedLayer': + const {videoMediaId, streamQuality} = action.payload; + return { + ...state, + projectedLayers: [...state.projectedLayers.filter((projectedLayer) => projectedLayer.mediaId !== videoMediaId), {mediaId: videoMediaId, streamQuality}] }; case 'viewer/setPlaying': return { @@ -70,6 +86,11 @@ const viewerReducer = (state = initialState, action) => { ...state, isMediaSet: action.payload, }; + case 'viewer/addVideoMid': + return { + ...state, + sourceIds: [...state.projectedVideoMids, action.payload], + }; case 'viewer/addSourceId': return { ...state, diff --git a/src/translations/en.json b/src/translations/en.json index 0720d98..cb346ee 100644 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -34,5 +34,6 @@ "clearSavedStreamsAlertCancelButton": "Cancel", "clearSavedStreamsAlertClearButton": "Clear", "noSavedStreamsTitleText": "You don’t have any streams viewed", - "noSavedStreamssubtitleText": "View a stream to add it to your history." + "noSavedStreamssubtitleText": "View a stream to add it to your history.", + "simulcastTitle": "Simulcast selection" } diff --git a/src/types/RemoteTrackSource.types.ts b/src/types/RemoteTrackSource.types.ts index 1af3582..0e517d5 100644 --- a/src/types/RemoteTrackSource.types.ts +++ b/src/types/RemoteTrackSource.types.ts @@ -1,12 +1,16 @@ -import { ViewProjectSourceMapping } from '@millicast/sdk'; +import { ViewProjectSourceMapping, LayerInfo } from '@millicast/sdk'; -export type StreamQuality = 'Auto' | 'High' | 'Medium' | 'Low'; +export type SimulcastQuality = { + simulcastLayer?: LayerInfo; // Auto has an idx of null + streamQuality: string; +}; export interface RemoteTrackSource { audioMediaId?: string; mediaStream: MediaStream; projectMapping: ViewProjectSourceMapping[]; - quality?: StreamQuality; + quality?: string; sourceId?: string; videoMediaId?: string; + streamQualities?: SimulcastQuality[]; } diff --git a/src/uikit/components/Icon/IconComponents/check-mark.svg b/src/uikit/components/Icon/IconComponents/check-mark.svg new file mode 100644 index 0000000..2aa9766 --- /dev/null +++ b/src/uikit/components/Icon/IconComponents/check-mark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/uikit/components/Icon/IconComponents/checkmark.svg b/src/uikit/components/Icon/IconComponents/checkmark.svg new file mode 100644 index 0000000..28eadec --- /dev/null +++ b/src/uikit/components/Icon/IconComponents/checkmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/uikit/components/Icon/IconComponents/index.ts b/src/uikit/components/Icon/IconComponents/index.ts index 440fbd4..02f1a31 100644 --- a/src/uikit/components/Icon/IconComponents/index.ts +++ b/src/uikit/components/Icon/IconComponents/index.ts @@ -3,6 +3,7 @@ import cameraOff from './camera-off.svg'; import cameraReverse from './camera-reverse.svg'; import camera from './camera.svg'; import chat from './chat.svg'; +import checkmark from './checkmark.svg'; import close from './close.svg'; import copy from './copy.svg'; import dolbyLogo from './dolby.svg'; @@ -40,6 +41,7 @@ const Icons = { cameraOff, cameraReverse, chat, + checkmark, close, copy, dolbyLogo, From 99b61cdb70a57ea3400025703021279ef8ef687a Mon Sep 17 00:00:00 2001 From: Aravind Raveendran Date: Fri, 12 Apr 2024 11:38:31 +1000 Subject: [PATCH 2/3] hardcoded credentials --- src/screens/userInput/UserInput.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/screens/userInput/UserInput.tsx b/src/screens/userInput/UserInput.tsx index a38bb93..13d2ab4 100644 --- a/src/screens/userInput/UserInput.tsx +++ b/src/screens/userInput/UserInput.tsx @@ -26,8 +26,8 @@ export const UserInput = ({ navigation }) => { const MINIMUM_INPUT_LENGTH = 3; - const [streamName, setStreamName] = useState(''); - const [accountId, setAccountId] = useState(''); + const [streamName, setStreamName] = useState('prod'); + const [accountId, setAccountId] = useState('sjf6bf'); const [validation, setValidation] = useState({ valid: true }); const [isDemoButtonFocused, setIsDemoButtonFocused] = useState(false); const defaultDemoButtonIconColor = !Platform.isTV ? 'white' : 'grey'; From 41a10fd580b8572382bc4b942c844260904fab6c Mon Sep 17 00:00:00 2001 From: Aravind Raveendran Date: Fri, 12 Apr 2024 23:25:29 +1000 Subject: [PATCH 3/3] Add custom libwebrtc jar files with fix to fps drop issues observed in Android devices --- android/gradle.properties | 4 ++ package.json | 2 +- src/screens/multiview/MultiView.tsx | 2 + yarn.lock | 57 ++--------------------------- 4 files changed, 10 insertions(+), 55 deletions(-) diff --git a/android/gradle.properties b/android/gradle.properties index b5b17fb..0d79708 100644 --- a/android/gradle.properties +++ b/android/gradle.properties @@ -38,3 +38,7 @@ reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64 # to write custom TurboModules/Fabric components OR use libraries that # are providing them. newArchEnabled=false + +# Use this property to enable or disable the Hermes JS engine. +# If set to false, you will be using JSC instead. +hermesEnabled=true \ No newline at end of file diff --git a/package.json b/package.json index d2c0b90..140d317 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "react-native-screen": "^1.0.1", "react-native-screens": "^3.20.0", "react-native-svg": "^12.3.0", - "react-native-webrtc": "github:montanaeli/react-native-webrtc#2c7b6e3", + "react-native-webrtc": "github:aravind-raveendran/react-native-webrtc#045ef81", "react-redux": "^8.1.3", "redux": "^4.2.1", "redux-persist": "^6.0.0" diff --git a/src/screens/multiview/MultiView.tsx b/src/screens/multiview/MultiView.tsx index 4132ec4..ce7471e 100644 --- a/src/screens/multiview/MultiView.tsx +++ b/src/screens/multiview/MultiView.tsx @@ -261,6 +261,8 @@ export const MultiView = ({ navigation }) => { const { active, layers } = (data as MediaStreamLayers).medias[mediaId] ?? {}; const streamQualities = buildQualityOptions(active, layers); + console.log('---> data', data); + dispatch({ type: 'viewer/setActiveLayers', payload: { mediaId, streamQualities }, diff --git a/yarn.lock b/yarn.lock index 2a893a1..b31258f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1872,11 +1872,6 @@ acorn@^8.9.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a" integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg== -adm-zip@0.5.9: - version "0.5.9" - resolved "https://registry.yarnpkg.com/adm-zip/-/adm-zip-0.5.9.tgz#b33691028333821c0cf95c31374c5462f2905a83" - integrity sha512-s+3fXLkeeLjZ2kLjCBwQufpI5fuN+kIGBxu6530nVQZGVol0d7Y/M88/xw9HGGUcJjKf8LutN3VPRUBq6N7Ajg== - ajv@^6.12.4: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" @@ -2502,11 +2497,6 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2: ansi-styles "^4.1.0" supports-color "^7.1.0" -chownr@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece" - integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ== - ci-info@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46" @@ -3705,13 +3695,6 @@ fs-extra@^8.1.0: jsonfile "^4.0.0" universalify "^0.1.0" -fs-minipass@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-2.1.0.tgz#7f5036fdbf12c63c169190cbe4199c852271f9fb" - integrity sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg== - dependencies: - minipass "^3.0.0" - fs.realpath@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f" @@ -5404,21 +5387,6 @@ minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.6: resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c" integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA== -minipass@^3.0.0: - version "3.3.6" - resolved "https://registry.yarnpkg.com/minipass/-/minipass-3.3.6.tgz#7bba384db3a1520d18c9c0e5251c3444e95dd94a" - integrity sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw== - dependencies: - yallist "^4.0.0" - -minizlib@^2.1.1: - version "2.1.2" - resolved "https://registry.yarnpkg.com/minizlib/-/minizlib-2.1.2.tgz#e90d3466ba209b932451508a11ce3d3632145931" - integrity sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg== - dependencies: - minipass "^3.0.0" - yallist "^4.0.0" - mixin-deep@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" @@ -5434,11 +5402,6 @@ mkdirp@^0.5.1: dependencies: minimist "^1.2.6" -mkdirp@^1.0.3: - version "1.0.4" - resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" - integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== - ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -6186,15 +6149,13 @@ react-native-svg@^12.3.0: css-select "^5.1.0" css-tree "^1.1.3" -"react-native-webrtc@github:montanaeli/react-native-webrtc#2c7b6e3": - version "111.0.1" - resolved "https://codeload.github.com/montanaeli/react-native-webrtc/tar.gz/2c7b6e370e245dee84a72912f6e246ef885a0955" +"react-native-webrtc@github:aravind-raveendran/react-native-webrtc#045ef81": + version "118.0.5" + resolved "https://codeload.github.com/aravind-raveendran/react-native-webrtc/tar.gz/045ef81baa52189a47f8d436fbb105ff728bd5b5" dependencies: - adm-zip "0.5.9" base64-js "1.5.1" debug "4.3.4" event-target-shim "6.0.2" - tar "6.1.11" "react-native@npm:react-native-tvos@0.69.8-2": version "0.69.8-2" @@ -7124,18 +7085,6 @@ svgo@^3.0.2: csso "^5.0.5" picocolors "^1.0.0" -tar@6.1.11: - version "6.1.11" - resolved "https://registry.yarnpkg.com/tar/-/tar-6.1.11.tgz#6760a38f003afa1b2ffd0ffe9e9abbd0eab3d621" - integrity sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA== - dependencies: - chownr "^2.0.0" - fs-minipass "^2.0.0" - minipass "^3.0.0" - minizlib "^2.1.1" - mkdirp "^1.0.3" - yallist "^4.0.0" - temp@0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.3.tgz#e0c6bc4d26b903124410e4fed81103014dfc1f59"