@conecli/cone-render 0.8.15-taroUpdate.3 → 0.8.15-taroUpdate.5

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

@@ -0,0 +1,66 @@
+.d-video-wrap{
+	position: relative;
+	overflow: hidden;
+
+	.d-video-play {
+		display: block;
+		overflow: hidden;
+		width: 100%;
+		height: 100%;
+		background-color: transparent;
+		-webkit-backface-visibility: hidden;
+		-webkit-transform: translate3d(0, 0, 0);
+		object-fit: fill;
+	}
+
+	.d-video-mute-btn{
+		position: absolute;
+		width: 51px;
+		height: 51px;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+		background-size: 50%;
+	}
+	.d-mute-btn-topLeft{
+		left: 10px;
+		top: 10px;
+	}
+	.d-mute-btn-topRight{
+		right: 10px;
+		top: 10px;
+	}
+	.d-mute-btn-bottomLeft{
+		left: 10px;
+		bottom: 10px;
+	}
+	.d-mute-btn-bottomRight{
+		right: 10px;
+		bottom: 10px;
+	}
+	.d-is-muted{
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAgCAYAAAB3j6rJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTk6MDMrMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjAzYjJmNjE2LTZmZTUtNDJjNC1iNTgwLTczNzZjZjI2NzdmNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjYzZjQ2NTYzLWE0ZjktOGQ0Mi1hM2FhLTY3ODJhNDBhYWNjMSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjIyYWNjMWFlLTg4ZmMtNDBlZi1iMWM1LTNmODgwY2QzYWI2MiI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MjJhY2MxYWUtODhmYy00MGVmLWIxYzUtM2Y4ODBjZDNhYjYyIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE5OjAzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDNiMmY2MTYtNmZlNS00MmM0LWI1ODAtNzM3NmNmMjY3N2Y1IiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjMzKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5PmxYVAAACLklEQVRYhc2XP2sVQRRHz40hKoqaQgVBCy1EozFlGiVFxMLGh4piYWEh+hkEP4YKAVFEEFTyughaCH6DqIVpAhYWEgIxoJE8cywyi5tNHu/tJmvyg2WZO3dmzt47/zZUtoJ6Nhsg09YDiYhKDzACTAFNYH9lEpUq80TdrT5wpV5n/ZV9KoGoo+pXV2uyKkipOaLuUceAt8DhUvQd1FsCYhR4ChzaSIBMHSOi7lOfsByFWiCgEBH1GHAF2JlMPcBt4GC3HUYEaj9wF3gVEVPtfNVTwAXgWX7CDKq/1piAZTSZBmim8qJ6sQ3EgDqb/L7kU3MH2NHtl3dQX3r3Ak21UYAYAj4A/cl0JB+RF+uMRj4iQ+p8zt7KYFLdXKHuRi0gacBhV6a6pd5bA6KRNagFJPU9qv5u47toLmW1HnoR8Q5oAK1CVQu4FBHj/wUkaXsb+4pzpVaQFPqXrN7Be4Fx9VztIOr1BLEtmX4A94E/qdwHTKjDWYM6lu81dSlnn3V570BtuLxaMs2rZ/IgYxsBovaoPwsQA4VoFWEm8ql5DiysNyURsQTMpOIMcDYiPhd8xoGr/FtNC2G6FKXD6ihwGdiVHMoeeh8jYlA9ANwE3kTEp3bO6vE03qOONzR1r/q4RGrquaFFxFxE3ALOA9+6jExpdb180y55AhirhaRTatq0GXEzL8+ZIuI9cBJ4WKiartJf9nWV/mty7UfUafW7erpqRGI9EBuprffvu9n6C1KOmsqwI5A1AAAAAElFTkSuQmCC");
+	}
+	.d-not-muted{
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDAgNzkuMTYwNDUxLCAyMDE3LzA1LzA2LTAxOjA4OjIxICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMTktMDQtMTFUMTA6MTg6MjArMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3YmE4Yjg0LTFhNTYtNGM1MS04NDVkLTNiZmYyMGI0ZDc0ZiIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjg1NGQ3MjlkLWUwNjctZjU0OC1hMTlhLTBlZjQ4OGRkYjJiOSIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjA1ODY3ZDFlLWQ3NGEtNDgyNC04MDU3LTYzYmRmMTdjODk5ZSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MDU4NjdkMWUtZDc0YS00ODI0LTgwNTctNjNiZGYxN2M4OTllIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjE4OjIwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6OTdiYThiODQtMWE1Ni00YzUxLTg0NWQtM2JmZjIwYjRkNzRmIiBzdEV2dDp3aGVuPSIyMDE5LTA0LTExVDEwOjIyOjIyKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOCAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz459+FoAAABqElEQVRYhc2XPWsVQRSGnxPjF4oGRfxoRQKGWCU2Ft7CykrQWosEyf/If0hhIPgHDEmbNJZqCFxiQEgTUGxsBUVEHgvnyrjZZJO92V1fGIaZnTPvszPszNlQ6VIjnbr/DwCoDLMNak/dUVfUK0f2rQugnlcX/FevWgFQH6gf3autRgHUC+piiXHzAOmtPx9gXgug8itQx9SXwDpw47AGKXZWvXvQmNFCwE3gCXA2dY0Az4GrRzHONA9cU/vAbERsllEOyh31e8USV2mrMPdG9uyn+rDom2/BHHCm5puWKiKmgdtAnz+rvaxO5mNygEvHaZ5BfADuARvAaWBpP4DGFBHfgBngFzClTrUKkCDeA+9S837rAEnbqb7VFcCpVJ/oCmCw959aB1AfAROpudYqgDoOLKRmPyLelAF8bcD4pPoMeAtcB34AT4uDBqXXwFG8XXUU/72MIuK1OgE8Bs6l7mEvo8up7lN1Ge0n9aK6VHMFZvJTr9S3CiALaCQhqZOSvegMIAvu2UVSWpigLC1fbQ0gm6in7qpfLCQbhwGIYcyPQ53/G3YO8BtUtd35bvKcVwAAAABJRU5ErkJggg==");
+	}
+
+	.d-video-play-btn{
+		position: absolute;
+		width: 120px;
+		height: 120px;
+		background-repeat: no-repeat;
+		background-position: 50% 50%;
+		background-size: 50%;
+		top: 50%;
+		left: 50%;
+		transform: translateX(-50%) translateY(-50%);
+	}
+
+	.d-is-pause{
+		background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==");
+	}
+
+	.d-not-pause{
+		background-image: none;
+	}
+}

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

@@ -0,0 +1 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'

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

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        inViewCallback,
        outViewCallback
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const componentObserverRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                dealPageScrollInfo(res)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('app=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('app=>out可视区域')
            }
        }, [componentShowState])
        
        const handleInOrOutView = (type: boolean) => {
            componentShowStateRef.current = type
            setComponentShowState(type)
        }
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = res
            if (componentObserverRef.current) {
                const eleClientRect =
                    componentObserverRef.current.getBoundingClientRect()
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                const eleHeight = Math.ceil(eleClientRect.height)
                console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
                if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
                    const isOutView = offSetY > eleOffsetTop + eleHeight
                    handleInOrOutView(isOutView ? false : true)
                } else {
                    const isInView = (offSetY > eleOffsetTop - displayHeight) && (offSetY < eleOffsetTop + eleHeight)
                    handleInOrOutView(isInView ? true : false)
                }
            }
        }
        return (
            <View ref={componentObserverRef}>
                {children}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        console.log('rootDom', rootDom)
        const { ref, inView } = useInView({
            threshold: 0, 
            triggerOnce: false, 
            root: rootDom || null, 
            rootMargin: `0px 0px 0px 0px`, 
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('其他h5=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('其他h5=>out可视区域')
            }
        }, [inView])
        return (
            <View ref={ref}>
                {children}
            </View>
        )
    }
    children: null, 
    className: '',
    inViewCallback: null, 
    outViewCallback: null 
+import Taro from '@tarojs/taro'
    TaroEventType,
    const {
        children,
        inViewCallback,
        outViewCallback,
        threshold
    } = props
    const [componentShowState, setComponentShowState] = useState(false)
    const componentObserverRef = useRef<HTMLElement | null>(null)
    const componentShowStateRef = useRef(false)
    if (isH5AndJdShopView) {
        useEffect(() => {
            const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
            dealPageScrollInfo(latestRes)
            Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
                dealPageScrollInfo(res)
            })
            Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
                state === 0 && handleInOrOutView(false)
            })
        }, [])
        useEffect(() => {
            if (componentShowState) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('app=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('app=>out可视区域')
            }
        }, [componentShowState])
        
        const handleInOrOutView = (type: boolean) => {
            componentShowStateRef.current = type
            setComponentShowState(type)
        }
        
        const dealPageScrollInfo = (res) => {
            const { displayHeight, offSetY } = res
            if (componentObserverRef.current) {
                const eleClientRect =
                    componentObserverRef.current.getBoundingClientRect()
                const eleOffsetTop = Math.ceil(eleClientRect.top)
                const eleHeight = Math.ceil(eleClientRect.height)
                console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
                if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
                    const isOutView = offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
                    handleInOrOutView(isOutView ? false : true)
                } else {
                    const isInView = (offSetY > eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold)) && (offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)))
                    handleInOrOutView(isInView ? true : false)
                }
            }
        }
        return (
            <View ref={componentObserverRef}>
                {children}
            </View>
        )
    } else {
        const rootDom = document.querySelector('#J_shopHomeRoot')
        const { ref, inView } = useInView({
            threshold, 
            triggerOnce: false, 
            root: rootDom || null, 
            rootMargin: `0px 0px 0px 0px`, 
        })
        useEffect(() => {
            if (inView) {
                typeof inViewCallback === 'function' && inViewCallback()
                console.log('其他h5=>in可视区域')
            } else {
                typeof outViewCallback === 'function' && outViewCallback()
                console.log('其他h5=>out可视区域')
            }
        }, [inView])
        return (
            <View ref={ref}>
                {children}
            </View>
        )
    }
    children: null, 
    className: '',
    inViewCallback: null, 
    outViewCallback: null, 
    threshold: 0 

package/dist/interface/component.ts

@@ -1 +1 @@
-import React from 'react'
+import React from 'react'

package/dist/open/components/index.ts

@@ -1 +1 @@
-import CountDown from '../../components/base/CountDown'
+import CountDown from "../../components/base/CountDown";

package/dist/utils/connectNativeJsBridge.ts

@@ -1 +1 @@
-import Taro from '@tarojs/taro'
    latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = {
        displayHeight: 1920,
        offSetY: 0
    }
    console.log('>>>>>>>>>>>>>>>>>>> render taroEventSendPageScrollInfo origin time:', Date.now(), 'res:', options)
    if(options){
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = options
    }
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
+import Taro from '@tarojs/taro'
    latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = {
        displayHeight: 1920,
        offSetY: 0
    }
    console.log('>>>>>>>>>>>>>>>>>>> render taroEventSendPageScrollInfo origin time:', Date.now(), 'res:', options)
    if(options){
        latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = options
    }
    const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@conecli/cone-render",
-	"version": "0.8.15-taroUpdate.3",
+	"version": "0.8.15-taroUpdate.5",
 	"private": false,
 	"files": [
 		"dist/"