@mpxjs/webpack-plugin 2.9.73 → 2.10.0

package/lib/runtime/components/react/dist/mpx-video.jsx

@@ -0,0 +1,248 @@
+/**
+ * ✔ src
+ * ✘ duration
+ * ✔ controls
+ * ✘ danmu-list
+ * ✘ danmu-btn
+ * ✘ enable-danmu
+ * ✔ autoplay
+ * ✔ loop
+ * ✔ muted
+ * ✔ initial-time
+ * ✘ page-gesture
+ * ✘ direction
+ * ✘ show-progress
+ * ✘ show-fullscreen-btn
+ * ✘ show-play-btn
+ * ✘ show-center-play-btn
+ * ✘ enable-progress-gesture
+ * ✔ object-fit
+ * ✔ poster
+ * ✘ show-mute-btn
+ * ✘ title
+ * ✘ play-btn-position
+ * ✘ enable-play-gesture
+ * ✘ auto-pause-if-navigate
+ * ✘ auto-pause-if-open-native
+ * ✘ vslide-gesture
+ * ✘ vslide-gesture-in-fullscreen
+ * ✘ show-bottom-progress(use show-progress)
+ * ✘ ad-unit-id
+ * ✘ poster-for-crawler
+ * ✘ show-casting-button
+ * ✘ picture-in-picture-mode
+ * ✘ picture-in-picture-show-progress
+ * ✘ picture-in-picture-init-position
+ * ✔ enable-auto-rotation (only ios)
+ * ✘ show-screen-lock-button
+ * ✘ show-snapshot-button
+ * ✘ show-background-playback-button
+ * ✘ background-poster
+ * ✘ referrer-policy
+ * ✔ is-drm
+ * ✘ is-live
+ * ✔ provision-url(android)
+ * ✔ certificate-url(ios)
+ * ✔ license-url
+ * ✔ preferred-peak-bit-rate
+ * ✔ bindplay
+ * ✔ bindpause
+ * ✔ bindended
+ * ✘ bindtimeupdate
+ * ✔ bindfullscreenchange
+ * ✔ bindwaiting
+ * ✔ binderror
+ * ✘ bindprogress
+ * ✔ bindloadedmetadata
+ * ✔ bindcontrolstoggle(only android)
+ * ✘ bindenterpictureinpicture
+ * ✘ bindleavepictureinpicture
+ * ✔ bindseekcomplete
+ * ✘ bindcastinguserselect
+ * ✘ bindcastingstatechange
+ * ✘ bindcastinginterrupt
+ */
+import { useRef, forwardRef, createElement } from 'react';
+import Video, { DRMType } from 'react-native-video';
+import { StyleSheet, View, Platform } from 'react-native';
+import { splitProps, useTransformStyle, useLayout, extendObject } from './utils';
+import useInnerProps, { getCustomEvent } from './getInnerListeners';
+import useNodesRef from './useNodesRef';
+const styles = StyleSheet.create({
+    container: {
+        width: 300,
+        height: 225
+    },
+    video: {
+        flex: 1
+    }
+});
+const MpxVideo = forwardRef((videoProps, ref) => {
+    const { innerProps: props = {} } = splitProps(videoProps);
+    const { src, autoplay = false, loop = false, muted = false, controls = true, poster = '', bindplay, bindpause, bindended, bindtimeupdate, bindfullscreenchange, bindwaiting, binderror, bindloadedmetadata, bindcontrolstoggle, bindseekcomplete, style, 'initial-time': initialTime = 0, 'object-fit': objectFit = 'contain', 'is-drm': isDrm = false, 'provision-url': provisionUrl, 'certificate-url': certificateUrl, 'license-url': licenseUrl, 'preferred-peak-bit-rate': preferredPeakBitRate = 0, 'enable-auto-rotation': enableAutoRotation = false, 'enable-var': enableVar, 'external-var-context': externalVarContext, 'parent-font-size': parentFontSize, 'parent-width': parentWidth, 'parent-height': parentHeight } = props;
+    const videoRef = useRef(null);
+    const viewRef = useRef(null);
+    const videoInfoRef = useRef({});
+    const propsRef = useRef({});
+    propsRef.current = props;
+    const { normalStyle, hasSelfPercent, setWidth, setHeight } = useTransformStyle(extendObject({}, styles.container, style), {
+        enableVar,
+        externalVarContext,
+        parentFontSize,
+        parentWidth,
+        parentHeight
+    });
+    const { layoutRef, layoutStyle, layoutProps } = useLayout({
+        props,
+        hasSelfPercent,
+        setWidth,
+        setHeight,
+        nodeRef: viewRef
+    });
+    useNodesRef(props, ref, viewRef, {
+        style: normalStyle,
+        node: {
+            play,
+            pause,
+            stop,
+            seek,
+            requestFullScreen,
+            exitFullScreen
+        }
+    });
+    function handleProgress(data) {
+        const { currentTime } = data;
+        bindtimeupdate && bindtimeupdate(getCustomEvent('timeupdate', {}, {
+            detail: {
+                currentTime,
+                duration: videoInfoRef.current.duration
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleEnd() {
+        bindended(getCustomEvent('end', {}, { layoutRef }, propsRef.current));
+    }
+    function handleWaiting({ isBuffering }) {
+        if (isBuffering) {
+            bindwaiting(getCustomEvent('waiting', {}, { layoutRef }, propsRef.current));
+        }
+    }
+    function handleSeekcomplete({ seekTime }) {
+        // 手动拖拽进度条场景，android 可以触发，ios 不可以
+        bindseekcomplete(getCustomEvent('seekcomplete', {}, {
+            detail: {
+                position: Platform.OS === 'android' ? seekTime * 1000 : seekTime
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleEnterFullScreen() {
+        bindfullscreenchange && bindfullscreenchange(getCustomEvent('fullscreenchange', {}, { detail: { fullScreen: 1 }, layoutRef }, propsRef.current));
+    }
+    function handleExitFullScreen() {
+        bindfullscreenchange && bindfullscreenchange(getCustomEvent('fullscreenchange', {}, { detail: { fullScreen: 0 }, layoutRef }, propsRef.current));
+    }
+    function handlePlaybackRateChange({ playbackRate }) {
+        if (playbackRate === 0) {
+            bindpause && bindpause(getCustomEvent('pause', {}, { layoutRef }, propsRef.current));
+        }
+        else {
+            bindplay && bindplay(getCustomEvent('play', {}, { layoutRef }, propsRef.current));
+        }
+    }
+    function handleAndroidControlsVisibilityChange({ isVisible }) {
+        bindcontrolstoggle(getCustomEvent('progress', {}, {
+            detail: {
+                show: isVisible
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleVideoLoad(data) {
+        const { naturalSize, duration } = data;
+        if (initialTime) {
+            videoRef.current && videoRef.current.seek(initialTime);
+        }
+        videoInfoRef.current = data;
+        bindloadedmetadata && bindloadedmetadata(getCustomEvent('loadedmetadata', {}, {
+            detail: {
+                width: naturalSize.width,
+                height: naturalSize.height,
+                duration
+            },
+            layoutRef
+        }, propsRef.current));
+    }
+    function handleError({ error }) {
+        binderror && binderror(getCustomEvent('play', {}, { detail: { errMsg: error.localizedFailureReason }, layoutRef }, propsRef.current));
+    }
+    function play() {
+        videoRef.current && videoRef.current.resume();
+    }
+    function pause() {
+        videoRef.current && videoRef.current.pause();
+    }
+    function seek(position) {
+        videoRef.current && videoRef.current.seek(position);
+    }
+    function stop() {
+        videoRef.current && videoRef.current.pause();
+        seek(0);
+    }
+    function exitFullScreen() {
+        videoRef.current && videoRef.current.setFullScreen(false);
+    }
+    function requestFullScreen() {
+        videoRef.current && videoRef.current.setFullScreen(true);
+    }
+    const source = {
+        uri: src
+    };
+    if (isDrm) {
+        source.drm = {
+            type: DRMType.FAIRPLAY,
+            certificateUrl: Platform.OS === 'android' ? provisionUrl : certificateUrl,
+            licenseServer: licenseUrl
+        };
+    }
+    const innerProps = useInnerProps(props, extendObject({
+        style: styles.video,
+        ref: videoRef,
+        source,
+        paused: !autoplay,
+        repeat: loop,
+        muted,
+        controls,
+        maxBitRate: preferredPeakBitRate,
+        fullscreenAutorotate: enableAutoRotation,
+        resizeMode: objectFit === 'fill' ? 'stretch' : objectFit,
+        poster: controls ? poster : '',
+        onProgress: bindtimeupdate && handleProgress,
+        onEnd: bindended && handleEnd,
+        onError: binderror && handleError,
+        onBuffer: bindwaiting && handleWaiting,
+        onSeek: bindseekcomplete && handleSeekcomplete,
+        onPlaybackRateChange: (bindpause || bindplay) && handlePlaybackRateChange,
+        onFullscreenPlayerDidPresent: bindfullscreenchange && handleEnterFullScreen,
+        onFullscreenPlayerWillDismiss: bindfullscreenchange && handleExitFullScreen,
+        onControlsVisibilityChange: bindcontrolstoggle && handleAndroidControlsVisibilityChange,
+        onLoad: handleVideoLoad
+    }, layoutProps), [
+        'src',
+        'autoplay',
+        'loop',
+        'bindplay',
+        'bindpause',
+        'bindended',
+        'bindtimeupdate',
+        'bindfullscreenchange',
+        'bindwaiting',
+        'binderror',
+        'bindloadedmetadata',
+        'bindcontrolstoggle',
+        'bindseekcomplete'
+    ], { layoutRef });
+    return createElement(View, { style: extendObject({}, normalStyle, layoutStyle), ref: viewRef }, createElement(Video, innerProps));
+});
+export default MpxVideo;

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,21 +1,62 @@
-import { forwardRef, useRef, useContext, useMemo, createElement } from 'react';
-import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils';
-import { Portal } from '@ant-design/react-native';
+import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { warn, isFunction } from '@mpxjs/utils';
+import Portal from './mpx-portal/index';
 import { getCustomEvent } from './getInnerListeners';
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy';
 import { WebView } from 'react-native-webview';
 import useNodesRef from './useNodesRef';
-import { getCurrentPage, extendObject } from './utils';
+import { getCurrentPage, useNavigation } from './utils';
 import { RouteContext } from './context';
+import { StyleSheet, View, Text } from 'react-native';
+const styles = StyleSheet.create({
+    loadErrorContext: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    loadErrorText: {
+        fontSize: 12,
+        color: '#666666',
+        paddingTop: '40%',
+        paddingBottom: 20,
+        paddingLeft: '10%',
+        paddingRight: '10%',
+        textAlign: 'center'
+    },
+    loadErrorButton: {
+        color: '#666666',
+        textAlign: 'center',
+        padding: 10,
+        borderColor: '#666666',
+        borderStyle: 'solid',
+        borderWidth: StyleSheet.hairlineWidth,
+        borderRadius: 10
+    }
+});
 const _WebView = forwardRef((props, ref) => {
     const { src, bindmessage, bindload, binderror } = props;
     const mpx = global.__mpx;
+    const errorText = {
+        'zh-CN': {
+            text: '网络不可用，请检查网络设置',
+            button: '重新加载'
+        },
+        'en-US': {
+            text: 'The network is not available. Please check the network settings',
+            button: 'Reload'
+        }
+    };
+    const currentErrorText = errorText[mpx.i18n.locale || 'zh-CN'];
     if (props.style) {
         warn('The web-view component does not support the style prop.');
     }
-    const pageId = useContext(RouteContext);
+    const { pageId } = useContext(RouteContext) || {};
+    const [pageLoadErr, setPageLoadErr] = useState(false);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const webViewRef = useRef(null);
+    const fristLoaded = useRef(false);
+    const isLoadError = useRef(false);
+    const statusCode = useRef('');
+    const [isLoaded, setIsLoaded] = useState(true);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -23,31 +64,35 @@ const _WebView = forwardRef((props, ref) => {
         top: 0,
         bottom: 0
     };
+    const canGoBack = useRef(false);
+    const isNavigateBack = useRef(false);
+    const beforeRemoveHandle = (e) => {
+        if (canGoBack.current && !isNavigateBack.current) {
+            webViewRef.current?.goBack();
+            e.preventDefault();
+        }
+        isNavigateBack.current = false;
+    };
+    const navigation = useNavigation();
+    useEffect(() => {
+        const beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
+        return () => {
+            if (isFunction(beforeRemoveSubscription)) {
+                beforeRemoveSubscription();
+            }
+        };
+    }, []);
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
     if (!src) {
         return null;
     }
-    const _load = function (res) {
-        const result = {
-            type: 'load',
-            timeStamp: res.timeStamp,
-            detail: {
-                src: res.nativeEvent?.url
-            }
-        };
-        bindload(result);
-    };
-    const _error = function (res) {
-        const result = {
-            type: 'error',
-            timeStamp: res.timeStamp,
-            detail: {
-                src: ''
-            }
-        };
-        binderror(result);
+    const _reload = function () {
+        if (__mpx_mode__ === 'android') {
+            fristLoaded.current = false; // 安卓需要重新设置
+        }
+        setPageLoadErr(false);
     };
     const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
@@ -73,12 +118,25 @@ const _WebView = forwardRef((props, ref) => {
         }
       });
     }
+    true;
   `;
+    const sendMessage = function (params) {
+        return `
+      window.mpxWebviewMessageCallback && window.mpxWebviewMessageCallback(${params})
+      true;
+    `;
+    };
     const _changeUrl = function (navState) {
         if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
+            canGoBack.current = navState.canGoBack;
             currentPage.__webViewUrl = navState.url;
         }
     };
+    const _onLoadProgress = function (event) {
+        if (__mpx_mode__ === 'android') {
+            canGoBack.current = event.nativeEvent.canGoBack;
+        }
+    };
     const _message = function (res) {
         let data = {};
         let asyncCallback;
@@ -99,7 +157,6 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle;
                     if (title) {
-                        const navigation = getFocusedNavigation();
                         navigation && navigation.setOptions({ title });
                     }
                 }
@@ -118,6 +175,7 @@ const _WebView = forwardRef((props, ref) => {
                 asyncCallback = navObj.navigateTo(...params);
                 break;
             case 'navigateBack':
+                isNavigateBack.current = true;
                 asyncCallback = navObj.navigateBack(...params);
                 break;
             case 'redirectTo':
@@ -146,45 +204,86 @@ const _WebView = forwardRef((props, ref) => {
         }
         asyncCallback && asyncCallback.then((res) => {
             if (webViewRef.current?.postMessage) {
-                const test = JSON.stringify({
+                const result = JSON.stringify({
                     type,
                     callbackId: data.callbackId,
                     result: res
                 });
-                webViewRef.current.postMessage(test);
+                webViewRef.current.injectJavaScript(sendMessage(result));
             }
         }).catch((error) => {
             if (webViewRef.current?.postMessage) {
-                const test = JSON.stringify({
+                const result = JSON.stringify({
                     type,
                     callbackId: data.callbackId,
                     error
                 });
-                webViewRef.current.postMessage(test);
+                webViewRef.current.injectJavaScript(sendMessage(result));
             }
         });
     };
-    const events = {};
-    if (bindload) {
-        extendObject(events, {
-            onLoad: _load
-        });
-    }
-    if (binderror) {
-        extendObject(events, {
-            onError: _error
-        });
-    }
-    extendObject(events, {
-        onMessage: _message
-    });
-    return createElement(Portal, null, createElement(WebView, extendObject({
-        style: defaultWebViewStyle,
-        source: { uri: src },
-        ref: webViewRef,
-        javaScriptEnabled: true,
-        onNavigationStateChange: _changeUrl
-    }, events)));
+    const onLoadEndHandle = function (res) {
+        fristLoaded.current = true;
+        setIsLoaded(true);
+        const src = res.nativeEvent?.url;
+        if (isLoadError.current) {
+            isLoadError.current = false;
+            isNavigateBack.current = false;
+            const result = {
+                type: 'error',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src,
+                    statusCode: statusCode.current
+                }
+            };
+            binderror && binderror(result);
+        }
+        else {
+            const result = {
+                type: 'load',
+                timeStamp: res.timeStamp,
+                detail: {
+                    src
+                }
+            };
+            bindload?.(result);
+        }
+    };
+    const onLoadEnd = function (res) {
+        if (__mpx_mode__ === 'android') {
+            setTimeout(() => {
+                onLoadEndHandle(res);
+            }, 0);
+        }
+        else {
+            onLoadEndHandle(res);
+        }
+    };
+    const onHttpError = function (res) {
+        isLoadError.current = true;
+        statusCode.current = res.nativeEvent?.statusCode;
+    };
+    const onError = function () {
+        statusCode.current = '';
+        isLoadError.current = true;
+        if (!fristLoaded.current) {
+            setPageLoadErr(true);
+        }
+    };
+    const onLoadStart = function () {
+        if (!fristLoaded.current) {
+            setIsLoaded(false);
+        }
+    };
+    return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+            ? (<View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>)
+            : (<WebView style={defaultWebViewStyle} source={{ uri: src }} ref={webViewRef} javaScriptEnabled={true} onNavigationStateChange={_changeUrl} onMessage={_message} injectedJavaScript={injectedJavaScript} onLoadProgress={_onLoadProgress} onLoadEnd={onLoadEnd} onHttpError={onHttpError} onError={onError} onLoadStart={onLoadStart} allowsBackForwardNavigationGestures={isLoaded}></WebView>)}
+      </Portal>);
 });
 _WebView.displayName = 'MpxWebview';
 export default _WebView;

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -4,10 +4,10 @@ import { error } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
-    ease: Easing.ease,
-    'ease-in': Easing.in(Easing.ease),
-    'ease-in-out': Easing.inOut(Easing.ease),
-    'ease-out': Easing.out(Easing.ease)
+    ease: Easing.inOut(Easing.ease),
+    'ease-in': Easing.in(Easing.poly(3)),
+    'ease-in-out': Easing.inOut(Easing.poly(3)),
+    'ease-out': Easing.out(Easing.poly(3))
     // 'step-start': '',
     // 'step-end': ''
 };

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,10 +1,9 @@
 import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
 import { Image } from 'react-native';
 import { isObject, isFunction, isNumber, hasOwn, diffAndCloneA, error, warn } from '@mpxjs/utils';
-import { VarContext, ScrollViewContext } from './context';
+import { VarContext, ScrollViewContext, RouteContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
-import { useNavigation } from '@react-navigation/native';
 import FastImage from '@d11/react-native-fast-image';
 import { runOnJS } from 'react-native-reanimated';
 import { Gesture } from 'react-native-gesture-handler';
@@ -36,6 +35,10 @@ function getSafeAreaInset(name, navigation) {
     const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
 }
+export function useNavigation() {
+    const { navigation } = useContext(RouteContext) || {};
+    return navigation;
+}
 export function omit(obj, fields) {
     const shallowCopy = extendObject({}, obj);
     for (let i = 0; i < fields.length; i += 1) {
@@ -438,6 +441,7 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
     const hasLayoutRef = useRef(false);
     const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}; }, [hasLayoutRef.current]);
     const layoutProps = {};
+    const navigation = useNavigation();
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
         layoutProps.onLayout = (e) => {
@@ -449,7 +453,8 @@ export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout
             }
             if (enableOffset) {
                 nodeRef.current?.measure((x, y, width, height, offsetLeft, offsetTop) => {
-                    layoutRef.current = { x, y, width, height, offsetLeft, offsetTop };
+                    const { y: navigationY = 0 } = navigation?.layout || {};
+                    layoutRef.current = { x, y: y - navigationY, width, height, offsetLeft, offsetTop: offsetTop - navigationY };
                 });
             }
             onLayout && onLayout(e);

package/lib/runtime/components/react/getInnerListeners.ts

@@ -1,7 +1,6 @@
 import { useRef, useMemo, RefObject } from 'react'
 import { hasOwn, collectDataset } from '@mpxjs/utils'
-import { useNavigation } from '@react-navigation/native'
-import { omit, extendObject } from './utils'
+import { omit, extendObject, useNavigation } from './utils'
 import eventConfigMap from './event.config'
 import {
   Props,

package/lib/runtime/components/react/mpx-button.tsx

@@ -219,7 +219,7 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     bindtap
   } = props
 
-  const pageId = useContext(RouteContext)
+  const { pageId } = useContext(RouteContext) || {}
 
   const formContext = useContext(FormContext)