@ -3,96 +3,27 @@
import React , { Component } from 'react' ;
import { TouchableOpacity , View } from 'react-native' ;
import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet' ;
import { RecordingLabel , RecordingExpandedLabel } from '../../../recording' ;
import { TranscribingExpandedLabel , TranscribingLabel } from '../../../transcribing' ;
import { VideoQualityExpandedLabel , VideoQualityLabel } from '../../../video-quality' ;
import { TranscribingLabel } from '../../../transcribing' ;
import { VideoQualityLabel } from '../../../video-quality' ;
import InsecureRoomNameExpandedLabel from './InsecureRoomNameExpandedLabel ';
import { LabelHitSlop , LABEL _ID _INSECURE _ROOM _NAME , LABEL _ID _QUALITY , LABEL _ID _TRANSCRIBING } from './constants' ;
import styles from './styles' ;
import { InsecureRoomNameLabel } from './' ;
type Props = { }
type State = {
type Props = {
/ * *
* String to show which { @ code ExpandedLabel } to be shown . ( Equals to th e
* label IDs below . ) .
* Creates a function to be invoked when the onPress of the touchables ar e
* triggered .
* /
visibleExpandedLabel : ? string
createOnPress : Function
}
const LABEL _ID _QUALITY = 'quality' ;
const LABEL _ID _RECORDING = 'recording' ;
const LABEL _ID _STREAMING = 'streaming' ;
const LABEL _ID _TRANSCRIBING = 'transcribing' ;
const LABEL _ID _INSECURE _ROOM _NAME = 'insecure-room-name' ;
const LabelHitSlop = {
top : 10 ,
bottom : 10 ,
left : 0 ,
right : 0
} ;
/ * *
* The { @ code ExpandedLabel } components to be rendered for the individual
* { @ code Label } s .
* /
const EXPANDED _LABELS = {
[ LABEL _ID _QUALITY ] : VideoQualityExpandedLabel ,
[ LABEL _ID _RECORDING ] : {
component : RecordingExpandedLabel ,
props : {
mode : JitsiRecordingConstants . mode . FILE
}
} ,
[ LABEL _ID _STREAMING ] : {
component : RecordingExpandedLabel ,
props : {
mode : JitsiRecordingConstants . mode . STREAM
}
} ,
[ LABEL _ID _TRANSCRIBING ] : TranscribingExpandedLabel ,
[ LABEL _ID _INSECURE _ROOM _NAME ] : InsecureRoomNameExpandedLabel
} ;
/ * *
* Timeout to hide the { @ ExpandedLabel } .
* /
const EXPANDED _LABEL _TIMEOUT = 5000 ;
/ * *
* A container that renders the conference indicators , if any .
* /
class Labels extends Component < Props , State > {
/ * *
* Timeout for the expanded labels to disappear .
* /
expandedLabelTimeout : TimeoutID ;
/ * *
* Instantiates a new instance of { @ code Labels } .
*
* @ inheritdoc
* /
constructor ( props : Props ) {
super ( props ) ;
this . state = {
visibleExpandedLabel : undefined
} ;
}
/ * *
* Implements React { @ code Component } ' s componentWillUnmount .
*
* @ inheritdoc
* /
componentWillUnmount ( ) {
clearTimeout ( this . expandedLabelTimeout ) ;
}
class Labels extends Component < Props > {
/ * *
* Implements React { @ code Component } ' s render .
@ -101,99 +32,34 @@ class Labels extends Component<Props, State> {
* /
render ( ) {
return (
< >
< View pointerEvents = 'box-none' >
< View
pointerEvents = 'box-none'
style = { styles . indicatorContainer } >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { this . _createOnPress ( LABEL _ID _RECORDING ) } >
< RecordingLabel mode = { JitsiRecordingConstants . mode . FILE } / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = { this . _createOnPress ( LABEL _ID _STREAMING ) } >
< RecordingLabel mode = { JitsiRecordingConstants . mode . STREAM } / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . _createOnPress ( LABEL _ID _TRANSCRIBING )
} >
< TranscribingLabel / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . _createOnPress ( LABEL _ID _INSECURE _ROOM _NAME )
} >
< InsecureRoomNameLabel / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . _createOnPress ( LABEL _ID _QUALITY ) } >
< VideoQualityLabel / >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
< View pointerEvents = 'box-none' >
< View
pointerEvents = 'box-none'
style = { styles . indicatorContainer } >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . props . createOnPress ( LABEL _ID _TRANSCRIBING )
} >
< TranscribingLabel / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . props . createOnPress ( LABEL _ID _INSECURE _ROOM _NAME )
} >
< InsecureRoomNameLabel / >
< / T o u c h a b l e O p a c i t y >
< TouchableOpacity
hitSlop = { LabelHitSlop }
onPress = {
this . props . createOnPress ( LABEL _ID _QUALITY ) } >
< VideoQualityLabel / >
< / T o u c h a b l e O p a c i t y >
< / V i e w >
{ this . _renderExpandedLabel ( ) }
< / >
< / V i e w >
) ;
}
/ * *
* Creates a function to be invoked when the onPress of the touchables are
* triggered .
*
* @ param { string } label - The identifier of the label that ' s onLayout is
* triggered .
* @ returns { Function }
* /
_createOnPress ( label ) {
return ( ) => {
let { visibleExpandedLabel } = this . state ;
visibleExpandedLabel
= visibleExpandedLabel === label ? undefined : label ;
clearTimeout ( this . expandedLabelTimeout ) ;
this . setState ( {
visibleExpandedLabel
} ) ;
if ( visibleExpandedLabel ) {
this . expandedLabelTimeout = setTimeout ( ( ) => {
this . setState ( {
visibleExpandedLabel : undefined
} ) ;
} , EXPANDED _LABEL _TIMEOUT ) ;
}
} ;
}
/ * *
* Rendes the expanded ( explaining ) label for the label that was touched .
*
* @ returns { React$Element }
* /
_renderExpandedLabel ( ) {
const { visibleExpandedLabel } = this . state ;
if ( visibleExpandedLabel ) {
const expandedLabel = EXPANDED _LABELS [ visibleExpandedLabel ] ;
if ( expandedLabel ) {
const LabelComponent = expandedLabel . component || expandedLabel ;
const { props } = expandedLabel || { } ;
return < LabelComponent { ... props } / > ;
}
}
return null ;
}
}
export default Labels ;
Robert Pintilii
3 years ago
committed by