react-native-awesome-medialib
Version:
A useful media selector module base on native component
302 lines (246 loc) • 10.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaLibraryPage = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _reactNativeGestureHandler = require("react-native-gesture-handler");
var _reactNativeIphoneXHelper = require("react-native-iphone-x-helper");
var _reactNativeRootSiblings = require("react-native-root-siblings");
var _reactNativeAwesomeNavigation = require("react-native-awesome-navigation");
var _ProgressHUD = _interopRequireDefault(require("../components/basic/ProgressHUD"));
var _ThreeStageNavigationBar = _interopRequireDefault(require("../components/basic/ThreeStageNavigationBar"));
var _NativeMediaLibraryView = require("../components/NativeMediaLibraryView");
var _MediaLibraryBottomToolBar = require("../components/basic/MediaLibraryBottomToolBar");
var _MediaLibraryAlbumItem = require("../components/basic/MediaLibraryAlbumItem");
var _MediaLibraryBridge = require("../bridge/MediaLibraryBridge");
var _Colors = require("../utils/Colors");
var _PermissionChecker = require("../utils/PermissionChecker");
var _Utils = require("../utils/Utils");
var _dismiss_white_button = _interopRequireDefault(require("../images/dismiss_white_button.png"));
var _down_white_arrow = _interopRequireDefault(require("../images/down_white_arrow.png"));
var _RxEventBus = require("../utils/RxEventBus");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const MediaLibraryPage = props => {
var _props$maxSelectedMed, _props$isVideoOnly;
const [maxSelectedMediaCount] = (0, _react.useState)((_props$maxSelectedMed = props.maxSelectedMediaCount) !== null && _props$maxSelectedMed !== void 0 ? _props$maxSelectedMed : 9);
const [isVideoOnly] = (0, _react.useState)((_props$isVideoOnly = props.isVideoOnly) !== null && _props$isVideoOnly !== void 0 ? _props$isVideoOnly : false);
const [selectedMediaCount, setSelectedMediaCount] = (0, _react.useState)(0);
const [showProgressHUD, setShowProgressHUD] = (0, _react.useState)(false);
const [currentAlbum, setCurrentAlbum] = (0, _react.useState)();
const [albumListVisable, setAlbumListVisable] = (0, _react.useState)(false);
const [albumDataModel, setAlbumDataModel] = (0, _react.useState)([]);
const initalLibrary = async callback => {
if (_reactNative.Platform.OS === 'ios') {
const libraryAuthGranted = await (0, _MediaLibraryBridge.requestLibraryAuthorization)();
if (libraryAuthGranted) fetchMediaResource();
if (!isVideoOnly) {
const cameraAuthGranted = await (0, _MediaLibraryBridge.requestCameraAuthorization)();
if (cameraAuthGranted) (0, _MediaLibraryBridge.startCameraPreview)();
}
} else {
const isAuthorized = await _reactNative.PermissionsAndroid.check(_reactNative.PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE);
if (!isAuthorized) {
(0, _PermissionChecker.requestSinglePermission)(_reactNative.PermissionsAndroid.PERMISSIONS.READ_EXTERNAL_STORAGE, callback);
} else {
fetchMediaResource();
}
}
};
const readPermissionAndroidCallback = granted => {
if (granted === _reactNative.PermissionsAndroid.RESULTS.GRANTED) {
fetchMediaResource();
} else {
console.warn("to do when deny permission");
}
};
const fetchMediaResource = async () => {
(0, _MediaLibraryBridge.fetchAllAssets)(isVideoOnly);
const res = await (0, _MediaLibraryBridge.fetchAllAlbums)();
if (res && res.length > 0) {
const models = (0, _Utils.processAlbumModel)(res);
setAlbumDataModel(models); // iOS首次进入默认展示第一个相册
setCurrentAlbum(models[0]);
}
};
(0, _reactNativeAwesomeNavigation.useVisibleEffect)(props.screenID, (0, _react.useCallback)(() => {
(0, _MediaLibraryBridge.startCameraPreview)();
return () => {
(0, _MediaLibraryBridge.stopCameraPreview)();
};
}, []));
(0, _react.useEffect)(() => {
initalLibrary(readPermissionAndroidCallback);
return () => {
(0, _MediaLibraryBridge.clear)();
};
}, []);
const bottomToolBar = () => {
return props.isVideoOnly || albumListVisable ? null : /*#__PURE__*/_react.default.createElement(_MediaLibraryBottomToolBar.MediaLibraryBottomToolBar, {
onDoneButtonPress: onFinishSelect,
selectedMediaCount: selectedMediaCount
});
};
const progressHUD = () => /*#__PURE__*/_react.default.createElement(_ProgressHUD.default, {
color: _Colors.white
});
const renderItem = ({
item
}) => {
return /*#__PURE__*/_react.default.createElement(_MediaLibraryAlbumItem.MediaLibraryAlbumItem, {
albumCount: item.count,
albumCover: item.cover,
albumName: item.name,
onItemPress: () => onSelectAlbum(item)
});
};
const onSelectAlbum = item => {
(0, _MediaLibraryBridge.onSelectAlbumAtIndex)(item.index);
setAlbumListVisable(false);
setCurrentAlbum(item);
};
const showAlbumList = async () => {
if (albumListVisable) {
setAlbumListVisable(false);
return;
}
if (albumDataModel.length > 0) {
setAlbumListVisable(true);
return;
}
setShowProgressHUD(true);
try {
const res = await (0, _MediaLibraryBridge.fetchAllAlbums)();
if (res && res.length > 0) {
const models = (0, _Utils.processAlbumModel)(res);
setAlbumDataModel(models);
setShowProgressHUD(false);
setAlbumListVisable(true);
}
} catch (error) {
setShowProgressHUD(false);
}
};
const navigationLeft = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.navigationBarLeftItem
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => props.navigator.dismiss()
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: _dismiss_white_button.default
})));
const navigationMiddle = () => /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
activeOpacity: 1,
onPress: () => showAlbumList(),
style: {
flexDirection: 'row',
alignItems: 'center'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: {
fontSize: 16,
fontWeight: '600',
color: _Colors.white
}
}, currentAlbum === null || currentAlbum === void 0 ? void 0 : currentAlbum.name), currentAlbum ? /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: _down_white_arrow.default
}) : null));
const onFinishSelect = async () => {
(0, _MediaLibraryBridge.onNextStepPress)();
setShowProgressHUD(true);
try {
const res = await (0, _MediaLibraryBridge.finishSelectMedia)();
await props.navigator.dismiss();
_RxEventBus.rxEventBus.sendWithValue(_RxEventBus.OnNextStepNotification, {
dataList: res,
from: props.from
});
} catch (error) {
onShowToast('导出失败');
} finally {
setShowProgressHUD(false);
}
};
const onPushCameraPage = () => {
props.navigator.push('CameraPage');
};
const onPushPreviewPage = async () => {
if (isVideoOnly) {
try {
const res = await (0, _MediaLibraryBridge.fetchVideoURL)();
if (res) {
props.navigator.push('VideoPreviewPage', {
url: res.url,
scale: res.scale
});
}
} catch (error) {
onShowToast(error.message);
}
} else {
props.navigator.push('MediaLibraryPhotoPreviewPage', {
from: props.from
});
}
};
const onShowToast = desc => {
(0, _Utils.showToast)(desc, (0, _reactNativeIphoneXHelper.isIphoneX)() ? 119 : 98);
};
const onMediaItemSelect = e => {
setSelectedMediaCount(e.nativeEvent.selectedMediaCount);
};
const onAlbumUpdate = e => {
const newAlbums = e.nativeEvent.newAlbums;
const models = (0, _Utils.processAlbumModel)(newAlbums);
setAlbumDataModel(models);
};
return /*#__PURE__*/_react.default.createElement(_reactNativeRootSiblings.RootSiblingParent, null, /*#__PURE__*/_react.default.createElement(_reactNative.StatusBar, {
backgroundColor: _Colors.black,
barStyle: "light-content"
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.container
}, /*#__PURE__*/_react.default.createElement(_ThreeStageNavigationBar.default, {
leftItem: () => navigationLeft(),
middleItem: () => navigationMiddle(),
style: {
backgroundColor: _Colors.black1A
}
}), /*#__PURE__*/_react.default.createElement(_NativeMediaLibraryView.MediaLibrary, {
maxSelectedMediaCount: maxSelectedMediaCount,
onAlbumUpdate: onAlbumUpdate,
onMediaItemSelect: onMediaItemSelect,
onPushCameraPage: onPushCameraPage,
onPushPreviewPage: onPushPreviewPage,
onShowToast: onShowToast,
style: {
flex: 1,
width: '100%',
height: '100%',
backgroundColor: _Colors.black1A
}
}), bottomToolBar(), albumListVisable ? /*#__PURE__*/_react.default.createElement(_reactNativeGestureHandler.FlatList, {
data: albumDataModel,
keyExtractor: item => item.index.toString(),
renderItem: renderItem,
style: _Utils.albumListStyle.list
}) : null, showProgressHUD ? progressHUD() : null));
};
exports.MediaLibraryPage = MediaLibraryPage;
const styles = _reactNative.StyleSheet.create({
container: {
flex: 1,
width: '100%',
height: '100%',
flexDirection: 'column',
backgroundColor: _Colors.black1A
},
navigationBarLeftItem: {
marginLeft: 16
}
});
MediaLibraryPage.navigationItem = {
hideNavigationBar: true
};
//# sourceMappingURL=MediaLibraryPage.js.map