rn-verto-typescript
Version:
Verto Free Switch with React Native Type Script
122 lines (121 loc) • 4.35 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_native_1 = require("react-native");
const Button_1 = __importDefault(require("../../components/Button"));
const ToolboxImage_enum_1 = require("../../enums/ToolboxImage.enum");
const hooks_1 = __importDefault(require("../../hooks/hooks"));
const animationDuration = 250;
const Toolbox = (props) => {
const opacity = react_1.useState(new react_native_1.Animated.Value(0))[0];
const [toolboxVisible, setToolboxVisible] = react_1.useState(false);
let timer;
react_1.useEffect(() => {
fadeIn();
return () => clearFadeOutTimeout(true);
}, []);
hooks_1.default(() => {
clearFadeOutTimeout(true);
if (!toolboxVisible) {
fadeIn();
}
else {
fadeOut();
}
}, [props.showToolbox]);
const clearFadeOutTimeout = (onlyClear = false) => {
if (timer) {
clearTimeout(timer);
}
if (!onlyClear) {
timer = setTimeout(() => {
fadeOut();
}, 5000);
}
};
const fadeIn = () => {
if (toolboxVisible)
return;
setTimeout(() => {
setToolboxVisible(true);
}, animationDuration);
react_native_1.Animated.timing(opacity, {
toValue: 1,
duration: animationDuration,
useNativeDriver: true
}).start();
clearFadeOutTimeout();
};
const fadeOut = () => {
if (!toolboxVisible) {
return;
}
setTimeout(() => {
setToolboxVisible(false);
}, animationDuration);
react_native_1.Animated.timing(opacity, {
toValue: 0,
duration: animationDuration,
useNativeDriver: true
}).start();
};
const audioSwitchHandler = () => {
if (audioSwitchHandler) {
props.audioSwitchHandler();
}
};
const hangupHandler = () => {
if (props.hangupHandler) {
props.hangupHandler();
}
};
const cameraSwitchHandler = () => {
if (props.videoSwitchHandler) {
props.videoSwitchHandler();
}
};
return (toolboxVisible &&
<react_native_1.Animated.View {...props} style={{ ...styles(opacity).container, ...props.style }}>
<Button_1.default style={styles(opacity).button} onPress={audioSwitchHandler} fileIndex={props.audioFileIndex}></Button_1.default>
<Button_1.default backgroundColor={'red'} width={56} height={56} iconWidth={28} iconHeight={28} onPress={hangupHandler} fileIndex={ToolboxImage_enum_1.ToolboxImage.Hangup}></Button_1.default>
<Button_1.default style={styles(opacity).button} onPress={cameraSwitchHandler} fileIndex={props.videoFileIndex}></Button_1.default>
</react_native_1.Animated.View>);
};
const styles = (opacity) => react_native_1.StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
maxHeight: 64,
backgroundColor: 'transparent',
opacity: opacity
},
button: {
backgroundColor: 'white',
marginHorizontal: 28
}
});
exports.default = Toolbox;