@conecli/cone-render 0.8.15-taroUpdate.6 → 0.8.15-videoAndInView.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/base/CustomVideo/index.module.scss +66 -0
- package/dist/components/base/CustomVideo/index.tsx +1 -0
- package/dist/components/base/InOrOutViewObserver/index.module.scss +0 -0
- package/dist/components/base/InOrOutViewObserver/index.tsx +1 -0
- package/dist/components/base/InViewRender/index.tsx +1 -1
- package/dist/interface/component.ts +1 -1
- package/dist/open/components/index.ts +1 -1
- package/dist/utils/connectNativeJsBridge.ts +1 -1
- package/package.json +15 -13
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
.d-video-wrap{
|
|
2
|
+
position: relative;
|
|
3
|
+
overflow: hidden;
|
|
4
|
+
|
|
5
|
+
.d-video-play {
|
|
6
|
+
display: block;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
width: 100%;
|
|
9
|
+
height: 100%;
|
|
10
|
+
background-color: transparent;
|
|
11
|
+
-webkit-backface-visibility: hidden;
|
|
12
|
+
-webkit-transform: translate3d(0, 0, 0);
|
|
13
|
+
object-fit: fill;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.d-video-mute-btn{
|
|
17
|
+
position: absolute;
|
|
18
|
+
width: 51px;
|
|
19
|
+
height: 51px;
|
|
20
|
+
background-repeat: no-repeat;
|
|
21
|
+
background-position: 50% 50%;
|
|
22
|
+
background-size: 50%;
|
|
23
|
+
}
|
|
24
|
+
.d-mute-btn-topLeft{
|
|
25
|
+
left: 10px;
|
|
26
|
+
top: 10px;
|
|
27
|
+
}
|
|
28
|
+
.d-mute-btn-topRight{
|
|
29
|
+
right: 10px;
|
|
30
|
+
top: 10px;
|
|
31
|
+
}
|
|
32
|
+
.d-mute-btn-bottomLeft{
|
|
33
|
+
left: 10px;
|
|
34
|
+
bottom: 10px;
|
|
35
|
+
}
|
|
36
|
+
.d-mute-btn-bottomRight{
|
|
37
|
+
right: 10px;
|
|
38
|
+
bottom: 10px;
|
|
39
|
+
}
|
|
40
|
+
.d-is-muted{
|
|
41
|
+
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");
|
|
42
|
+
}
|
|
43
|
+
.d-not-muted{
|
|
44
|
+
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==");
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.d-video-play-btn{
|
|
48
|
+
position: absolute;
|
|
49
|
+
width: 120px;
|
|
50
|
+
height: 120px;
|
|
51
|
+
background-repeat: no-repeat;
|
|
52
|
+
background-position: 50% 50%;
|
|
53
|
+
background-size: 50%;
|
|
54
|
+
top: 50%;
|
|
55
|
+
left: 50%;
|
|
56
|
+
transform: translateX(-50%) translateY(-50%);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.d-is-pause{
|
|
60
|
+
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAeCAYAAAAy2w7YAAAAAXNSR0IArs4c6QAAAWhJREFUSA1j+P///0cgBoHjQGzCQCsAtgJB/AMy5wCxGNXtQ9iBwvoA5BUCMQvVLEQxHpNzDSjkRhXLMM3GKrIeKKpEkYVYjcUu+AMo3ALE3GRZiN1MvKKPgbIRJFuG10j8koeA0gZEW4jfLIKyf4EqpgOxMEELCRpFnIJ3QGU5QMyM00LizCFa1SWgSkeslhFtBGkKVwGVy6FYSJp+klR/A6quB2JOkIWMIK0oNlOf8xBoZDE9LAI7nYn6HsBq4l96WHQEaLUpAyiOaASeAM2NgvuPBpaACt82IEYtfKls0UagecpwXyAzqGTRdaA57sjmYrAptAjUsCkGYlYMg9EFyLQI1IiZB8Ti6Obh5JNh0QmgHlOcBuKSIMGi50C18UDMiMssvOJEWPQLqKYbiHnxGkRIkoBF24DyaoTMIEoeh0W3geI+RBlArCI0iz4D+RVAzEasfqLVAQ19AcSg5LoYiKWI1kiiQgCMBLnEEcfDSgAAAABJRU5ErkJggg==");
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.d-not-pause{
|
|
64
|
+
background-image: none;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import Taro from '@tarojs/taro'
|
|
2
|
TaroEventType,
|
|
1
3
|
const {
|
|
2
4
|
children,
|
|
3
5
|
inViewCallback,
|
|
4
6
|
outViewCallback,
|
|
5
7
|
threshold
|
|
6
8
|
} = props
|
|
7
9
|
const [componentShowState, setComponentShowState] = useState(false)
|
|
8
10
|
const componentObserverRef = useRef<HTMLElement | null>(null)
|
|
9
11
|
const componentShowStateRef = useRef(false)
|
|
10
12
|
if (isH5AndJdShopView) {
|
|
11
13
|
useEffect(() => {
|
|
12
14
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
|
13
15
|
dealPageScrollInfo(latestRes)
|
|
14
16
|
Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
|
|
15
17
|
dealPageScrollInfo(res)
|
|
16
18
|
})
|
|
17
19
|
Taro.eventCenter.on(TaroEventType.PAGE_DOCUMENT_VISIBILITY_CHANGE, (state) => {
|
|
18
20
|
state === 0 && handleInOrOutView(false)
|
|
19
21
|
})
|
|
20
22
|
}, [])
|
|
21
23
|
useEffect(() => {
|
|
22
24
|
if (componentShowState) {
|
|
23
25
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
24
26
|
console.log('app=>in可视区域')
|
|
25
27
|
} else {
|
|
26
28
|
typeof outViewCallback === 'function' && outViewCallback()
|
|
27
29
|
console.log('app=>out可视区域')
|
|
28
30
|
}
|
|
29
31
|
}, [componentShowState])
|
|
30
32
|
|
|
31
33
|
const handleInOrOutView = (type: boolean) => {
|
|
32
34
|
componentShowStateRef.current = type
|
|
33
35
|
setComponentShowState(type)
|
|
34
36
|
}
|
|
35
37
|
|
|
36
38
|
const dealPageScrollInfo = (res) => {
|
|
37
39
|
const { displayHeight, offSetY } = res
|
|
38
40
|
if (componentObserverRef.current) {
|
|
39
41
|
const eleClientRect =
|
|
40
42
|
componentObserverRef.current.getBoundingClientRect()
|
|
41
43
|
const eleOffsetTop = Math.ceil(eleClientRect.top)
|
|
42
44
|
const eleHeight = Math.ceil(eleClientRect.height)
|
|
43
45
|
console.log('==========================eleOffsetTop, eleHeight', eleOffsetTop, eleHeight)
|
|
44
46
|
if (eleOffsetTop >= 0 && eleOffsetTop < displayHeight) {
|
|
45
47
|
const isOutView = offSetY > eleOffsetTop + Math.ceil(eleHeight * (1 - threshold))
|
|
46
48
|
handleInOrOutView(isOutView ? false : true)
|
|
47
49
|
} else {
|
|
48
50
|
const isInView = (offSetY > eleOffsetTop - displayHeight + Math.ceil(eleHeight * threshold)) && (offSetY < eleOffsetTop + Math.ceil(eleHeight * (1 - threshold)))
|
|
49
51
|
handleInOrOutView(isInView ? true : false)
|
|
50
52
|
}
|
|
51
53
|
}
|
|
52
54
|
}
|
|
53
55
|
return (
|
|
54
56
|
<View ref={componentObserverRef}>
|
|
55
57
|
{children}
|
|
56
58
|
</View>
|
|
57
59
|
)
|
|
58
60
|
} else {
|
|
59
61
|
const rootDom = document.querySelector('#J_shopHomeRoot')
|
|
60
62
|
const { ref, inView } = useInView({
|
|
61
63
|
threshold,
|
|
62
64
|
triggerOnce: false,
|
|
63
65
|
root: rootDom || null,
|
|
64
66
|
rootMargin: `0px 0px 0px 0px`,
|
|
65
67
|
})
|
|
66
68
|
useEffect(() => {
|
|
67
69
|
if (inView) {
|
|
68
70
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
69
71
|
console.log('其他h5=>in可视区域')
|
|
70
72
|
} else {
|
|
71
73
|
typeof outViewCallback === 'function' && outViewCallback()
|
|
72
74
|
console.log('其他h5=>out可视区域')
|
|
73
75
|
}
|
|
74
76
|
}, [inView])
|
|
75
77
|
return (
|
|
76
78
|
<View ref={ref}>
|
|
77
79
|
{children}
|
|
78
80
|
</View>
|
|
79
81
|
)
|
|
80
82
|
}
|
|
81
83
|
children: null,
|
|
82
84
|
className: '',
|
|
83
85
|
inViewCallback: null,
|
|
84
86
|
outViewCallback: null,
|
|
85
87
|
threshold: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Taro from '@tarojs/taro'
|
|
2
1
|
inViewCallback
|
|
3
2
|
if (isH5AndJdShopView) {
|
|
4
3
|
useEffect(() => {
|
|
5
4
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
|
6
5
|
!componentShowStateRef.current && dealPageScrollInfo(latestRes)
|
|
7
6
|
Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
|
|
8
7
|
!componentShowStateRef.current && dealPageScrollInfo(res)
|
|
9
8
|
})
|
|
10
9
|
}, [])
|
|
11
10
|
useEffect(() => {
|
|
12
11
|
if(componentShowState){
|
|
13
12
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
14
13
|
console.log('InViewRender -- 店铺H5 展示啦!')
|
|
15
14
|
}
|
|
16
15
|
}, [componentShowState])
|
|
17
16
|
|
|
18
17
|
const dealPageScrollInfo = (res) => {
|
|
19
18
|
if (componentLazyRef.current) {
|
|
20
19
|
const eleClientRect =
|
|
21
20
|
componentLazyRef.current.getBoundingClientRect()
|
|
22
21
|
const getContainerHeightOffSetY = res.displayHeight + res.offSetY
|
|
23
22
|
const eleOffsetTop = Math.ceil(eleClientRect.top)
|
|
24
23
|
if (!componentShowStateRef.current) {
|
|
25
24
|
if (getContainerHeightOffSetY > eleOffsetTop) {
|
|
26
25
|
componentShowStateRef.current = true
|
|
27
26
|
setComponentShowState(true)
|
|
28
27
|
Taro.nextTick(() => {
|
|
29
28
|
setComponentRenderShowState(true)
|
|
30
29
|
})
|
|
31
30
|
}
|
|
32
31
|
}
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
return (
|
|
36
35
|
<View
|
|
37
36
|
ref={componentLazyRef}
|
|
38
37
|
className={classNames(
|
|
39
38
|
lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
|
|
40
39
|
'd-app-floor-lazy-load',
|
|
41
40
|
)}
|
|
42
41
|
style={{
|
|
43
42
|
minHeight: `${
|
|
44
43
|
componentRenderShowState ? 'auto' : height + (typeof height === 'number'? 'px': '')
|
|
45
44
|
}`,
|
|
46
45
|
backgroundColor: componentRenderShowState
|
|
47
46
|
? 'transparent'
|
|
48
47
|
: '#ffffff',
|
|
49
48
|
}}
|
|
50
49
|
>
|
|
51
50
|
{componentShowState ? children : placeholder}
|
|
52
51
|
</View>
|
|
53
52
|
)
|
|
54
53
|
} else {
|
|
55
54
|
const rootDom = document.querySelector('#J_shopHomeRoot')
|
|
56
55
|
const { ref, inView } = useInView({
|
|
57
56
|
threshold: 0,
|
|
58
57
|
triggerOnce: true,
|
|
59
58
|
root: rootDom,
|
|
60
59
|
rootMargin: `0px 0px 0px 0px`,
|
|
61
60
|
})
|
|
62
61
|
useEffect(() => {
|
|
63
62
|
if(inView){
|
|
64
63
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
65
64
|
console.log('InViewRender -- 其它H5 展示啦!')
|
|
66
65
|
}
|
|
67
66
|
}, [inView])
|
|
68
67
|
return (
|
|
69
68
|
<View
|
|
70
69
|
ref={ref}
|
|
71
70
|
style={{
|
|
72
71
|
minHeight: `${inView ? 'auto' : height + 'px'}`,
|
|
73
72
|
backgroundColor: 'transparent',
|
|
74
73
|
}}
|
|
75
74
|
>
|
|
76
75
|
{inView ? children : placeholder}
|
|
77
76
|
</View>
|
|
78
77
|
)
|
|
79
78
|
}
|
|
80
79
|
inViewCallback: null,
|
|
80
|
+
import Taro from '@tarojs/taro'
|
|
81
81
|
TaroEventType,
|
|
82
82
|
const {
|
|
83
83
|
children,
|
|
84
84
|
placeholder,
|
|
85
85
|
height,
|
|
86
86
|
inViewCallback
|
|
87
87
|
} = props
|
|
88
88
|
const [componentShowState, setComponentShowState] = useState(false)
|
|
89
89
|
const [componentRenderShowState, setComponentRenderShowState] =
|
|
90
90
|
useState(false)
|
|
91
91
|
const componentLazyRef = useRef<HTMLElement | null>(null)
|
|
92
92
|
const componentShowStateRef = useRef(false)
|
|
93
93
|
if (isH5AndJdShopView) {
|
|
94
94
|
useEffect(() => {
|
|
95
95
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
|
96
96
|
!componentShowStateRef.current && dealPageScrollInfo(latestRes)
|
|
97
97
|
Taro.eventCenter.on(TaroEventType.PAGE_SCROLL, (res) => {
|
|
98
98
|
!componentShowStateRef.current && dealPageScrollInfo(res)
|
|
99
99
|
})
|
|
100
100
|
}, [])
|
|
101
101
|
useEffect(() => {
|
|
102
102
|
if (componentShowState) {
|
|
103
103
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
104
104
|
console.log('InViewRender -- 店铺H5 展示啦!')
|
|
105
105
|
}
|
|
106
106
|
}, [componentShowState])
|
|
107
107
|
|
|
108
108
|
const dealPageScrollInfo = (res) => {
|
|
109
109
|
if (componentLazyRef.current) {
|
|
110
110
|
const eleClientRect =
|
|
111
111
|
componentLazyRef.current.getBoundingClientRect()
|
|
112
112
|
const getContainerHeightOffSetY = res.displayHeight + res.offSetY
|
|
113
113
|
const eleOffsetTop = Math.ceil(eleClientRect.top)
|
|
114
114
|
if (!componentShowStateRef.current) {
|
|
115
115
|
if (getContainerHeightOffSetY > eleOffsetTop) {
|
|
116
116
|
componentShowStateRef.current = true
|
|
117
117
|
setComponentShowState(true)
|
|
118
118
|
Taro.nextTick(() => {
|
|
119
119
|
setComponentRenderShowState(true)
|
|
120
120
|
})
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
}
|
|
124
124
|
}
|
|
125
125
|
return (
|
|
126
126
|
<View
|
|
127
127
|
ref={componentLazyRef}
|
|
128
128
|
className={classNames(
|
|
129
129
|
lazyLayoutLoadStyle['d-app-floor-lazy-layout-load'],
|
|
130
130
|
'd-app-floor-lazy-load',
|
|
131
131
|
)}
|
|
132
132
|
style={{
|
|
133
133
|
minHeight: `${componentRenderShowState ? 'auto' : height + (typeof height === 'number' ? 'px' : '')
|
|
134
134
|
}`,
|
|
135
135
|
backgroundColor: componentRenderShowState
|
|
136
136
|
? 'transparent'
|
|
137
137
|
: '#ffffff',
|
|
138
138
|
}}
|
|
139
139
|
>
|
|
140
140
|
{componentShowState ? children : placeholder}
|
|
141
141
|
</View>
|
|
142
142
|
)
|
|
143
143
|
} else {
|
|
144
144
|
const rootDom = document.querySelector('#J_shopHomeRoot')
|
|
145
145
|
const { ref, inView } = useInView({
|
|
146
146
|
threshold: 0,
|
|
147
147
|
triggerOnce: true,
|
|
148
148
|
root: rootDom || null,
|
|
149
149
|
rootMargin: `0px 0px 0px 0px`,
|
|
150
150
|
})
|
|
151
151
|
useEffect(() => {
|
|
152
152
|
if (inView) {
|
|
153
153
|
typeof inViewCallback === 'function' && inViewCallback()
|
|
154
154
|
console.log('InViewRender -- 其它H5 展示啦!')
|
|
155
155
|
}
|
|
156
156
|
}, [inView])
|
|
157
157
|
return (
|
|
158
158
|
<View
|
|
159
159
|
ref={ref}
|
|
160
160
|
style={{
|
|
161
161
|
minHeight: `${inView ? 'auto' : height + 'px'}`,
|
|
162
162
|
backgroundColor: 'transparent',
|
|
163
163
|
}}
|
|
164
164
|
>
|
|
165
165
|
{inView ? children : placeholder}
|
|
166
166
|
</View>
|
|
167
167
|
)
|
|
168
168
|
}
|
|
169
169
|
children: null,
|
|
170
170
|
placeholder: null,
|
|
171
171
|
height: 1,
|
|
172
172
|
className: '',
|
|
173
173
|
lazyNodeClassName: '',
|
|
174
174
|
inViewCallback: null,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React from 'react'
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import Taro from '@tarojs/taro'
|
|
2
1
|
latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = {
|
|
3
2
|
displayHeight: 1920,
|
|
4
3
|
offSetY: 0
|
|
5
4
|
}
|
|
6
5
|
console.log('>>>>>>>>>>>>>>>>>>> render taroEventSendPageScrollInfo origin time:', Date.now(), 'res:', options)
|
|
7
6
|
if(options){
|
|
8
7
|
latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = options
|
|
9
8
|
}
|
|
10
9
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
|
10
|
+
import Taro from '@tarojs/taro'
|
|
11
11
|
latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = {
|
|
12
12
|
displayHeight: 1920,
|
|
13
13
|
offSetY: 0
|
|
14
14
|
}
|
|
15
15
|
console.log('>>>>>>>>>>>>>>>>>>> render taroEventSendPageScrollInfo origin time:', Date.now(), 'res:', options)
|
|
16
16
|
if(options){
|
|
17
17
|
latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] = options
|
|
18
18
|
}
|
|
19
19
|
const latestRes = latestFromNativeMsgStorage[TaroEventType.PAGE_SCROLL] || {}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@conecli/cone-render",
|
|
3
|
-
"version": "0.8.15-
|
|
3
|
+
"version": "0.8.15-videoAndInView.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"files": [
|
|
6
6
|
"dist/"
|
|
@@ -61,16 +61,16 @@
|
|
|
61
61
|
],
|
|
62
62
|
"author": "conecli",
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@tarojs/cli": "3.
|
|
65
|
-
"@tarojs/components": "3.
|
|
66
|
-
"@tarojs/plugin-framework-react": "3.
|
|
67
|
-
"@tarojs/react": "3.
|
|
68
|
-
"@tarojs/runtime": "3.
|
|
69
|
-
"@tarojs/shared": "3.
|
|
70
|
-
"@tarojs/taro": "3.
|
|
71
|
-
"@tarojs/
|
|
72
|
-
"@tarojs/taro-loader": "3.
|
|
73
|
-
"@tarojs/webpack5-runner": "3.
|
|
64
|
+
"@tarojs/cli": "^3.5.4",
|
|
65
|
+
"@tarojs/components": "3.5.4",
|
|
66
|
+
"@tarojs/plugin-framework-react": "3.5.4",
|
|
67
|
+
"@tarojs/react": "3.5.4",
|
|
68
|
+
"@tarojs/runtime": "3.5.4",
|
|
69
|
+
"@tarojs/shared": "3.5.4",
|
|
70
|
+
"@tarojs/taro": "3.5.4",
|
|
71
|
+
"@tarojs/taro-h5": "3.5.4",
|
|
72
|
+
"@tarojs/taro-loader": "3.5.4",
|
|
73
|
+
"@tarojs/webpack5-runner": "3.5.4",
|
|
74
74
|
"art-template": "^4.13.2",
|
|
75
75
|
"gulp-filter": "^7.0.0",
|
|
76
76
|
"normalize.css": "^8.0.1",
|
|
@@ -85,15 +85,17 @@
|
|
|
85
85
|
"@babel/core": "^7.8.0",
|
|
86
86
|
"@babel/runtime": "^7.17.9",
|
|
87
87
|
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
|
|
88
|
+
"@swc/core": "^1.2.242",
|
|
89
|
+
"@swc/register": "^0.1.10",
|
|
88
90
|
"@types/react": "^18.0.17",
|
|
89
91
|
"@types/webpack-env": "^1.13.6",
|
|
90
92
|
"@typescript-eslint/eslint-plugin": "^5.20.0",
|
|
91
93
|
"@typescript-eslint/parser": "^5.20.0",
|
|
92
|
-
"babel-preset-taro": "3.
|
|
94
|
+
"babel-preset-taro": "3.5.4",
|
|
93
95
|
"del": "^6.1.1",
|
|
94
96
|
"escodegen": "^2.0.0",
|
|
95
97
|
"eslint": "^6.8.0",
|
|
96
|
-
"eslint-config-taro": "3.
|
|
98
|
+
"eslint-config-taro": "3.5.4",
|
|
97
99
|
"eslint-plugin-import": "^2.12.0",
|
|
98
100
|
"eslint-plugin-react": "^7.8.2",
|
|
99
101
|
"eslint-plugin-react-hooks": "^4.2.0",
|