haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(base/media): SS mobile align (#12743) 

* feat(base/media/native): updated styles and converted VideoTransform.js to tsx
This commit is contained in:
Calinteodor 2023-01-10 15:31:57 +02:00 committed by GitHub
parent 720d4555ab
commit 450da1a6df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
react/features/base/media/components/native/VideoTransform.js → react/features/base/media/components/native/VideoTransform.tsx
View File

@ -1,15 +1,17 @@
// @flow
import React, { Component } from 'react';
import { PanResponder, PixelRatio, View } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { type Dispatch } from 'redux';
import { connect } from '../../../redux';
import { ASPECT_RATIO_WIDE } from '../../../responsive-ui';
import { IReduxState } from '../../../../app/types';
import { connect } from '../../../redux/functions';
import { ASPECT_RATIO_WIDE } from '../../../responsive-ui/constants';
import { storeVideoTransform } from '../../actions';
// @ts-ignore
import styles from './styles';
/**
* The default/initial transform (= no transform).
*/
@ -55,9 +57,9 @@ const TAP_TIMEOUT_MS = 400;
* Type of a transform object this component is capable of handling.
*/
type Transform = {
scale: number,
translateX: number,
translateY: number
scale: number;
translateX: number;
translateY: number;
};
type Props = {
@ -65,43 +67,43 @@ type Props = {
/**
* The current aspect ratio of the screen.
*/
_aspectRatio: Symbol,
_aspectRatio: Symbol;
/**
* The children components of this view.
* Action to dispatch when the component is unmounted.
*/
children: Object,
/**
* Transformation is only enabled when this flag is true.
*/
enabled: boolean,
/**
* Function to invoke when a press event is detected.
*/
onPress?: Function,
/**
* The id of the current stream that is displayed.
*/
streamId: string,
/**
* Style of the top level transformable view.
*/
style: Object,
_onUnmount: Function;
/**
* The stored transforms retrieved from Redux to be initially applied
* to different streams.
*/
_transforms: Object,
_transforms: Object;
/**
* Action to dispatch when the component is unmounted.
* The children components of this view.
*/
_onUnmount: Function
children: Object;
/**
* Transformation is only enabled when this flag is true.
*/
enabled: boolean;
/**
* Function to invoke when a press event is detected.
*/
onPress?: Function;
/**
* The id of the current stream that is displayed.
*/
streamId: string;
/**
* Style of the top level transformable view.
*/
style: Object;
};
type State = {
@ -109,12 +111,12 @@ type State = {
/**
* The current (non-transformed) layout of the View.
*/
layout: ?Object,
layout: any;
/**
* The current transform that is applied.
*/
transform: Transform
transform: Transform;
};
/**
@ -129,14 +131,14 @@ class VideoTransform extends Component<Props, State> {
/**
* The initial distance of the fingers on pinch start.
*/
initialDistance: ?number;
initialDistance: number;
/**
* The initial position of the finger on touch start.
*/
initialPosition: {
x: number,
y: number
x: number;
y: number;
};
/**
@ -233,14 +235,17 @@ class VideoTransform extends Component<Props, State> {
videoTransformedViewContainerStyles,
style
] }
// @ts-ignore
{ ...this.gestureHandlers.panHandlers }>
<View
<SafeAreaView
edges = { [ 'bottom', 'left' ] }
style = { [
styles.videoTranformedView,
this._getTransformStyle()
] }>
{ children }
</View>
</SafeAreaView>
</View>
);
}
@ -281,15 +286,13 @@ class VideoTransform extends Component<Props, State> {
};
}
_didMove: Object => boolean;
/**
* Determines if there was large enough movement to be handled.
*
* @param {Object} gestureState - The gesture state.
* @returns {boolean}
*/
_didMove({ dx, dy }) {
_didMove({ dx, dy }: any) {
return Math.abs(dx) > this.moveThreshold
|| Math.abs(dy) > this.moveThreshold;
}
@ -302,14 +305,13 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {Object | null}
*/
_getSavedTransform(streamId) {
_getSavedTransform(streamId: string) {
const { enabled, _transforms } = this.props;
// @ts-ignore
return (enabled && _transforms[streamId]) || null;
}
_getTouchDistance: Object => number;
/**
* Calculates the touch distance on a pinch event.
*
@ -317,15 +319,13 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {number}
*/
_getTouchDistance({ nativeEvent: { touches } }) {
_getTouchDistance({ nativeEvent: { touches } }: any) {
const dx = Math.abs(touches[0].pageX - touches[1].pageX);
const dy = Math.abs(touches[0].pageY - touches[1].pageY);
return Math.sqrt(Math.pow(dx, 2) + Math.pow(dy, 2));
}
_getTouchPosition: Object => Object;
/**
* Calculates the position of the touch event.
*
@ -333,15 +333,13 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {Object}
*/
_getTouchPosition({ nativeEvent: { touches } }) {
_getTouchPosition({ nativeEvent: { touches } }: any) {
return {
x: touches[0].pageX,
y: touches[0].pageY
};
}
_getTransformStyle: () => Object;
/**
* Generates a transform style object to be used on the component.
*
@ -473,8 +471,6 @@ class VideoTransform extends Component<Props, State> {
}
}
_onGesture: (string, ?Object | number) => void;
/**
* Handles gestures and converts them to transforms.
*
@ -494,7 +490,7 @@ class VideoTransform extends Component<Props, State> {
* @param {?Object | number} value - The value of the gesture, if any.
* @returns {void}
*/
_onGesture(type, value) {
_onGesture(type: string, value: any) {
let transform;
switch (type) {
@ -528,8 +524,6 @@ class VideoTransform extends Component<Props, State> {
this.lastTap = 0;
}
_onLayout: Object => void;
/**
* Callback for the onLayout of the component.
*
@ -537,7 +531,7 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {void}
*/
_onLayout({ nativeEvent: { layout: { x, y, width, height } } }) {
_onLayout({ nativeEvent: { layout: { x, y, width, height } } }: any) {
this.setState({
layout: {
x,
@ -548,8 +542,6 @@ class VideoTransform extends Component<Props, State> {
});
}
_onMoveShouldSetPanResponder: (Object, Object) => boolean;
/**
* Function to decide whether the responder should respond to a move event.
*
@ -558,14 +550,12 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {boolean}
*/
_onMoveShouldSetPanResponder(evt, gestureState) {
_onMoveShouldSetPanResponder(evt: Object, gestureState: any) {
return this.props.enabled
&& (this._didMove(gestureState)
|| gestureState.numberActiveTouches === 2);
}
_onPanResponderGrant: (Object, Object) => void;
/**
* Calculates the initial touch distance.
*
@ -574,7 +564,7 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {void}
*/
_onPanResponderGrant(evt, { numberActiveTouches }) {
_onPanResponderGrant(evt: Object, { numberActiveTouches }: any) {
if (numberActiveTouches === 1) {
this.initialPosition = this._getTouchPosition(evt);
this.lastTap = Date.now();
@ -584,8 +574,6 @@ class VideoTransform extends Component<Props, State> {
}
}
_onPanResponderMove: (Object, Object) => void;
/**
* Handles the PanResponder move (touch move) event.
*
@ -594,7 +582,7 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {void}
*/
_onPanResponderMove(evt, gestureState) {
_onPanResponderMove(evt: Object, gestureState: any) {
if (gestureState.numberActiveTouches === 2) {
// this is a zoom event
if (
@ -628,8 +616,6 @@ class VideoTransform extends Component<Props, State> {
}
}
_onPanResponderRelease: () => void;
/**
* Handles the PanResponder gesture end event.
*
@ -638,8 +624,11 @@ class VideoTransform extends Component<Props, State> {
*/
_onPanResponderRelease() {
if (this.lastTap && Date.now() - this.lastTap < TAP_TIMEOUT_MS) {
// @ts-ignore
this._onGesture('press');
}
// @ts-ignore
delete this.initialDistance;
this.initialPosition = {
x: 0,
@ -647,8 +636,6 @@ class VideoTransform extends Component<Props, State> {
};
}
_onStartShouldSetPanResponder: () => boolean;
/**
* Function to decide whether the responder should respond to a start
* (touch) event.
@ -668,7 +655,7 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {void}
*/
_restoreTransform(streamId) {
_restoreTransform(streamId: string) {
const savedTransform = this._getSavedTransform(streamId);
if (savedTransform) {
@ -687,7 +674,7 @@ class VideoTransform extends Component<Props, State> {
* @private
* @returns {void}
*/
_storeTransform(streamId, transform) {
_storeTransform(streamId: string, transform: Transform) {
const { _onUnmount, enabled } = this.props;
if (enabled) {
@ -715,7 +702,7 @@ function _mapDispatchToProps(dispatch: Dispatch<any>) {
* @private
* @returns {void}
*/
_onUnmount(streamId, transform) {
_onUnmount(streamId: string, transform: Transform) {
dispatch(storeVideoTransform(streamId, transform));
}
};
@ -730,7 +717,7 @@ function _mapDispatchToProps(dispatch: Dispatch<any>) {
* _transforms: Object
* }}
*/
function _mapStateToProps(state) {
function _mapStateToProps(state: IReduxState) {
return {
_aspectRatio: state['features/base/responsive-ui'].aspectRatio,

2
react/features/base/media/components/native/styles.js
View File

@ -23,7 +23,7 @@ export default StyleSheet.create({
videoTransformedViewContainerWide: {
overflow: 'hidden',
paddingRight: '14%'
paddingRight: '16%'
},
/**