@conecli/cone-render 0.8.19 → 0.8.20-beta.2

package/dist/components/base/CustomVideo/index.tsx

@@ -1 +1 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react'
      if (!isH5 || !ref.current) return
      playVideo()
      manualPauseStateRef.current = false
    }
      if (!isH5 || !ref.current) return
      pauseVideo()
      manualPauseStateRef.current = true
    }
    if (!isH5 || !ref.current) return
  }, [])
+import Taro from '@tarojs/taro';
  isH5,
  addHttps,
  isH5AndJdShopView,
  draBusinessCustomReport,
  isJdAndIosDevice,
  const {
    isSystemVideo,
    floorData,
    style,
    videoStyle,
    src,
    width,
    height,
    controls,
    id,
    poster,
    autoplay: isvAutoplay,
    loop,
    showMuteBtn: isvShowMuteBtn,
    muteButtonPostion,
    showFullscreenBtn,
    muteBtnPicSrcObj,
    muteBtnClassName,
    muteBtnStyle,
    objectFit,
    mockAutoplay,
    threshold = 0.6,
    onPlayCallback,
    onPauseCallback,
    onVideoApiCall,
    inViewCallback,
    outViewCallback,
  } = props;
  const { wifiVideoAutoPlay } = global.info.sysInfo;
  const isFollowAppVideoPlayStatus = global.getDynamicConfig('isFollowAppVideoPlayStatus');
  let showMuteBtn = isvShowMuteBtn;
  let autoplay = isvAutoplay;
  if (isSystemVideo) {
    showMuteBtn = false;
    autoplay = wifiVideoAutoPlay;
  } else {
    if (isvAutoplay && isFollowAppVideoPlayStatus) {
      autoplay = wifiVideoAutoPlay;
    }
  }
  console.log(
    'CustomVideo',
    'isSystemVideo:',
    isSystemVideo,
    'wifiVideoAutoPlay:',
    wifiVideoAutoPlay,
    ',isvAutoplay:',
    isvAutoplay,
    ',isFollowAppVideoPlayStatus:',
    isFollowAppVideoPlayStatus,
    ',autoplay:',
    autoplay,
    ',id:',
    id,
  );
  const [videoMutedState, setVideoMutedState] = useState(MUTED);
  const lastPlayStatusRef = useRef(-1);
  const manualPauseStateRef = useRef(false);
  const initPlayStatusRef = useRef(false);
  const isInViewStateRef = useRef(false);
  const disposeRef = useRef<Function | null>();
  const initFloorIndexRef = useRef(-1);
  ref === null && (ref = useRef<HTMLVideoElement | null>());
  
  const playVideo = useCallback(() => {
    if (ref && ref.current) {
      console.log(`CustomVideo id:${id} 开始播放视频`);
      const result = ref.current.play();
      result &&
        result
          .then(() => {
            console.log(`播放视频成功`);
          })
          .catch((e) => {
            console.log('CustomVideo playVideo ', e.name, ':', e.message);
          });
    }
  }, []);
  
  const pauseVideo = useCallback(() => {
    if (ref && ref.current) {
      console.log(`CustomVideo id:${id} 暂停视频`);
      ref.current.pause();
    }
  }, []);
  
  const handleIosFirstScreenVideoPause = useCallback(() => {
    const floorIndex = initFloorIndexRef.current;
    if (ref.current && floorIndex >= 0 && floorIndex < 4) {
      ref.current.setAttribute('data-init-pause', true);
      if (!ref.current.paused) {
        ref.current.pause();
      } else {
        setTimeout(() => {
          !ref.current.paused && ref.current.pause();
        }, 1500);
      }
    }
  }, []);
  
  useEffect(() => {
    isJdAndIosDevice &&
      autoplay &&
      mockAutoplay &&
      Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE_INIT_NOW_TIME, (res) => {
        console.log('app初始化可见性变化=>', res, '如果是0，表示不可见');
        res === 0 && handleIosFirstScreenVideoPause();
      });
  }, []);
  
  useEffect(() => {
    if (!isH5 || !ref.current) return;
    if (floorData && floorData.hasOwnProperty('containerIndex')) {
      initFloorIndexRef.current = floorData.containerIndex;
    } else {
      const containerNode = ref.current.closest('[data-container-id]');
      if (containerNode) {
        initFloorIndexRef.current = Number(containerNode.getAttribute('data-container-index'));
      }
    }
    if (autoplay && mockAutoplay) {
      
      const callInitAutoplay = () => {
        console.log(`CustomVideo id:${id} 触发初始化autoplay callInitAutoplay`);
        if (
          autoplay &&
          mockAutoplay &&
          !initPlayStatusRef.current &&
          isInViewStateRef.current &&
          ref.current.paused
        ) {
          playVideo();
        }
      };
      const onWeixinJSBridgeReady = (e) => {
        callInitAutoplay();
      };
      const onTouchstart = (e) => {
        callInitAutoplay();
      };
      const onScroll = (e) => {
        callInitAutoplay();
      };
      const onPlay = (e) => {
        if (!initPlayStatusRef.current) {
          const dispose = disposeRef.current;
          dispose && dispose();
          disposeRef.current = null;
        }
        initPlayStatusRef.current = true;
      };
      document?.addEventListener('WeixinJSBridgeReady', onWeixinJSBridgeReady);
      document?.addEventListener('touchstart', onTouchstart);
      document?.addEventListener('scroll', onScroll);
      ref.current.addEventListener('play', onPlay);
      const dispose = () => {
        console.log('调用dispose');
        document?.removeEventListener('WeixinJSBridgeReady', onWeixinJSBridgeReady);
        document?.removeEventListener('touchstart', onTouchstart);
        document?.removeEventListener('scroll', onScroll);
        ref?.current?.removeEventListener('play', onPlay);
      };
      disposeRef.current = dispose;
    }
    const handleVideoPlayApiCall = () => {
      if (!isH5 || !ref.current) return;
      playVideo();
      manualPauseStateRef.current = false;
    };
    const handleVideoPauseApiCall = () => {
      if (!isH5 || !ref.current) return;
      manualPauseStateRef.current = true;
      pauseVideo();
    };
    
    const handleVideoSeekApiCall = (position: number) => {
      if (!isH5 || !ref.current) return;
      if (typeof position === 'undefined' || typeof position !== 'number') return;
      ref.current.currentTime = position;
    };
    
    if (onVideoApiCall) {
      onVideoApiCall({
        play: handleVideoPlayApiCall,
        pause: handleVideoPauseApiCall,
        seek: handleVideoSeekApiCall,
      });
    }
    return () => {
      const dispose = disposeRef.current;
      dispose && dispose();
      disposeRef.current = null;
    };
  }, []);
  
  const handleMuted = useCallback(() => {
    if (!isH5 || !ref.current) return;
    const handleMutedState = ref.current.muted;
    if (handleMutedState === true) {
      ref.current.muted = false;
      setVideoMutedState(false);
    } else {
      ref.current.muted = true;
      setVideoMutedState(true);
    }
  }, [videoMutedState]);
  
  const handleVideoInViewCallback = useCallback(() => {
    if (!isH5 || !ref.current) return;
    console.log(
      `
        )} CustomVideo handleVideoInViewCallback id:${id} 进入可视区域 lastPlayStatusRef.current:${lastPlayStatusRef.current},paused:${ref.current.paused}`,
    );
    isInViewStateRef.current = true;
    if (
      autoplay &&
      ((mockAutoplay && !initPlayStatusRef.current) || lastPlayStatusRef.current === -1) &&
      ref.current.paused
    ) {
      console.log(`CustomVideo id:${id} 首次进入可视区域`);
      playVideo();
    } else if (lastPlayStatusRef.current === 1 && ref.current.paused) {
      console.log(`CustomVideo id:${id} 非首次进入可视区域`);
      playVideo();
    }
    typeof inViewCallback === 'function' && inViewCallback();
  }, []);
  
  const handleVideoOutViewCallback = useCallback(() => {
    if (!isH5 || !ref.current) return;
    isInViewStateRef.current = false;
    console.log(
      `CustomVideo handleVideoOutViewCallback id:${id} 不在可视区域，视频暂停，lastPlayStatusRef：${lastPlayStatusRef.current}`,
    );
    pauseVideo();
    typeof outViewCallback === 'function' && outViewCallback();
  }, []);
  
  const getVideoWidthAndHeightStyle = () => {
    const style = {};
    width && (style['width'] = width);
    height && (style['height'] = height);
    return style;
  };
  
  const getMuteBtnBackgroundImageStyle = useCallback(() => {
    const isMutedPicSrc = muteBtnPicSrcObj?.IS_MUTED;
    const notMutedPicSrc = muteBtnPicSrcObj?.NOT_MUTED;
    const finalIsMutedPicSrc =
      typeof isMutedPicSrc !== 'undefined' && isMutedPicSrc !== ''
        ? isMutedPicSrc
        : DEFAULT_MUTE_BTN_PIC.IS_MUTED;
    const finalNotMutedPicSrc =
      typeof notMutedPicSrc !== 'undefined' && notMutedPicSrc !== ''
        ? notMutedPicSrc
        : DEFAULT_MUTE_BTN_PIC.NOT_MUTED;
    return {
      backgroundImage: `url(${videoMutedState ? finalIsMutedPicSrc : finalNotMutedPicSrc})`,
    };
  }, [videoMutedState]);
  return src ? (
    <InOrOutViewObserver
      inViewCallback={handleVideoInViewCallback}
      outViewCallback={handleVideoOutViewCallback}
      threshold={threshold}
    >
      {isH5 ? (
        <View
          className={customVideoStyle['d-video-wrap']}
          style={{ ...style, ...getVideoWidthAndHeightStyle() }}
        >
          <video
            style={{ ...videoStyle }}
            className={classNames(customVideoStyle['d-video-play'], {
              'd-video-forbid-fullscreen-button': isSystemVideo,
            })}
            id={id}
            data-jd-video={true}
            src={src}
            controls={controls}
            poster={poster ? addHttps(poster) : ''}
            ref={ref}
            loop={loop}
            autoPlay={autoplay}
            muted={MUTED}
            x5-playsinline="true"
            playsInline
            webkit-playsinline="true"
            controlsList={isH5AndJdShopView ? 'nodownload nofullscreen noremoteplayback' : ''}
            onError={(e) => {
              const errMsg = formatVedioErrorMsg(e.target?.error);
              const data = {
                type: 'video',
                subType: 'CustomVideo',
                isSystemVideo,
                src,
                autoplay,
                errMsg,
                isH5,
              };
              console.log('CustomVideo error 1:', data);
              draBusinessCustomReport(data);
            }}
            onPlay={(e) => {
              lastPlayStatusRef.current = 1;
              onPlayCallback && onPlayCallback(e);
            }}
            onPause={(e) => {
              if (isInViewStateRef.current) {
                lastPlayStatusRef.current = 0;
              }
              onPauseCallback && onPauseCallback(e);
            }}
          />
          {!controls && showMuteBtn && (
            <View
              className={classNames(
                customVideoStyle['d-video-mute-btn'],
                customVideoStyle[`d-mute-btn-${muteButtonPostion}`],
                `${muteBtnClassName}`,
              )}
              style={{ ...getMuteBtnBackgroundImageStyle(), ...muteBtnStyle }}
              onClick={handleMuted}
            ></View>
          )}
        </View>
      ) : (
        <Video
          style={{ ...videoStyle }}
          ref={ref}
          className={customVideoStyle['d-video-play']}
          src={src}
          id={id}
          controls={controls}
          poster={poster ? addHttps(poster) : ''}
          loop={loop}
          data-jd-video={true}
          autoplay={autoplay}
          muted={MUTED}
          showMuteBtn={showMuteBtn}
          showFullscreenBtn={showFullscreenBtn}
          objectFit={objectFit}
          onError={(e) => {
            const errMsg = formatVedioErrorMsg(e.target?.error);
            const data = {
              type: 'video',
              subType: 'CustomVideo',
              isSystemVideo,
              src,
              autoplay,
              errMsg,
              isH5,
            };
            console.log('CustomVideo error 2:', data);
            draBusinessCustomReport(data);
          }}
          onPlay={(e) => {
            lastPlayStatusRef.current = 1;
            onPlayCallback && onPlayCallback(e);
          }}
          onPause={(e) => {
            if (isInViewStateRef.current) {
              lastPlayStatusRef.current = 0;
            }
            onPauseCallback && onPauseCallback(e);
          }}
        />
      )}
    </InOrOutViewObserver>
  ) : null;
  return process.env.BUILD_TYPE !== BUILD_TYPE.DECORATE;
  isSystemVideo: false,
  id: '',
  style: {},
  videoStyle: {},
  className: '',
  src: '',
  width: '100%',
  height: '100%',
  controls: false,
  poster: '',
  autoplay: true,
  mockAutoplay: getDefaultMockAutoplay(),
  loop: true,
  showMuteBtn: true,
  muteButtonPostion: 'topLeft',
  muteBtnPicSrcObj: DEFAULT_MUTE_BTN_PIC,
  muteBtnClassName: '',
  muteBtnStyle: {},
  showFullscreenBtn: false,
  objectFit: 'cover',
  threshold: 0.6,

package/dist/components/base/Dialog/index.module.scss

@@ -8,12 +8,17 @@
 	background: rgba(0, 0, 0, 0.5);
 	z-index: 222;
 	.d-dialog-wrap {
+    position: relative;
 		width: 100%;
 		height: 100%;
 		opacity: 0.01;
 		transform: scale(0);
 		animation: zoomIn 300ms;
 		animation-fill-mode: forwards;
+    box-sizing: border-box;
+    &.d-dialog-jdapp-wrap{
+      padding-bottom: 80px;
+    }
 	}
 	.d-dialog-content {
 		padding-top: 30px;
@@ -40,6 +45,7 @@
 	.d-dialog-footer {
 		.d-dialog-btn {
 			position: relative;
+      margin: 0;
 			display: block;
 			height: 88px;
 			line-height: 88px;
@@ -50,6 +56,8 @@
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			box-sizing: border-box;
+      background-color: #fff;
+      border-radius: 0;
 			&:after {
 				content: '';
 				display: block;
@@ -62,6 +70,8 @@
 				-ms-transform: scaleX(0.5);
 				transform: scaleY(0.5);
 				pointer-events: none;
+        border: none;
+        border-radius: 0;
 			}
 		}
 		.d-dialog-ensure-btn {
@@ -81,8 +91,7 @@
 			}
 		}
 		.d-dialog-cancel-btn {
-			background-color: #ffffff;
-			color: #000000;
+			color: #000;
 		}
 	}
 }
@@ -110,3 +119,14 @@
 		transform: scale3d(1, 1, 1);
 	}
 }
+:global{
+  .d-shop-pad{
+    :local{
+      
+      .d-dialog-content{
+        max-width: 520PX;
+      }
+    }
+  }
+
+}