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