feat: 创建日历组件

src/pages/index/index.config.ts

@@ -1,6 +1,8 @@
 export default {
   navigationBarTitleText: '首页',
+  navigationStyle: 'default',
   usingComponents: {
-    'custom': 'plugin://myPlugin/custom'
+    'custom': 'plugin://myPlugin/custom',
+    'calendar': 'plugin://myPlugin/calendar'
   }
 }

src/pages/index/index.tsx

@@ -26,7 +26,7 @@ const Index: React.FC = () => {
 
   return (
     <View className='index'>
-      <custom props={{ onClick }}/>
+      <calendar />
     </View>
   )
 }

src/plugin/components/calendar/index.tsx

@@ -0,0 +1,9 @@
+import { View } from "@tarojs/components"
+
+function Calendar() {
+  return (
+    <View></View>
+  )
+}
+
+export default Calendar

src/plugin/components/custom/index.tsx

@@ -1,27 +1,61 @@
-import Taro, { useLoad, useReady, useUnload } from '@tarojs/taro'
+import Taro, { useLoad, useReady, useUnload, useScope } from '@tarojs/taro'
 import { PropsWithChildren, useState } from 'react'
 import { View, Video, Navigator, Image } from '@tarojs/components'
 import useGetCustomClient from '@/hooks/useGetCustomClient'
+import { wrapProps } from '@/plugin/share'
 import './index.less'
 
-const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
+// const WEB_VIEW_URL = 'plugin-private://wxf7261ed54f2e450e/pages/customPage/index'
 const VIDEO_SRC = 'https://xycdn.yishihui.com/ad/prod/video/material_AD_1708595757_1708595757542.mp4'
 const VIDEO_COVER = 'http://rescdn.yishihui.com/ad/prod/video/material_AD_1702267670_1702267670233.mp4?x-oss-process=video/snapshot,t_5000,f_jpg,w_0,h_0,m_fast'
 
 // 在一些场景下 loadedMetaFiredInOnce 被触发了很多次
 let loadedMetaFiredInOnce = 0
-let durationTime = 0
 
-const noop = () => {}
 
 function PqCustom(props: PropsWithChildren<CustomPropsType>) {
-  const {
-    width, zIndex, onLoad = noop, onView = noop, onClick = noop, onClose = noop, onError = noop
-  } = props
+  let {
+    adpId,
+    autoplay,
+    loop,
+    muted,
+    showMusk,
+    zIndex,
+    openEmbeddedMiniProgram,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onStop,
+    onError,
+    onLoad,
+    onView,
+    onClick,
+    onClose
+  } = wrapProps(props)
   const [show, setShow] = useState(true)
 
-  function clickCustom() {
-    
+  function videoPlay() {
+    onPlay()
+  }
+
+  function videoPause() {
+    onPause()
+  }
+
+  function videoPlayEnded() {
+    onEnded()
+  }
+
+  function videoTimeUpdate() {
+    onTimeUpdate()
+  }
+
+  function videoStop() {
+    onStop()
+  }
+
+  function videoClick() {
     closeCustom()
   }
 
@@ -47,9 +81,18 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
 
           {/* <Navigator url={WEB_VIEW_URL}> */}
             <Custom
-              width={width}
-              zIndex={zIndex}
-              onClick={clickCustom}
+              autoplay={autoplay}
+              loop={loop}
+              muted={muted}
+              src={VIDEO_SRC}
+              poster={VIDEO_COVER}
+              onPlay={videoPlay}
+              onTimeUpdate={videoTimeUpdate}
+              onPause={videoPause}
+              onEnded={videoPlayEnded}
+              onStop={videoStop}
+
+              onClick={videoClick}
               onLoad={onLoad}
               onView={onView}
               onError={onError}
@@ -61,69 +104,59 @@ function PqCustom(props: PropsWithChildren<CustomPropsType>) {
   )
 }
 
-function Custom({ width, zIndex, onClick, onLoad, onView, onError }) {
-  const [style, setStyle] = useState({ width: '0px', height: 'px', zIndex })
+function Custom({
+  autoplay, loop, muted, src, poster,
+  onPlay, onPause, onEnded, onTimeUpdate, onStop, // 播放事件
+  onClick, onLoad, onView, onError
+}) {
+  const [style, setStyle] = useState({ width: '0px', height: 'px' })
 
   useReady(() => {
     loadedMetaFiredInOnce = 0
-    durationTime = 0
-
-    observerAdCustom()
   })
 
   useGetCustomClient((customClient) => {
     let clientWidth = customClient.width
     let clientHeight = customClient.height
-    if (width) {
-      clientWidth = width
-      clientHeight = width / 375 * 667
-    }
 
     setStyle({
-      zIndex: zIndex || 1,
       width: `${clientWidth}px`,
       height: `${clientHeight}px`
     })
   })
 
-  // TODO: 监听无效 需要再想别的办法
-  function observerAdCustom() {
-    const viewObserver = Taro.createIntersectionObserver(PqCustom, { 
-      thresholds: [0, 0.5]
-    }).relativeToViewport()
-
-    console.log(viewObserver)
-
-    viewObserver.observe('#pq-custom', res => {
-        const { intersectionRatio } = res
-        if (intersectionRatio >= 0.5) {
-          console.log('onView')
-            onView()
-            viewObserver.disconnect()
-        }
-    })
-  }
-
   function onLoadedMetaData() {
     if (loadedMetaFiredInOnce++ < 1) {
       // 上报load
       onLoad()
     }
   }
-  // 播放上报
-  function onPlay() {
-    console.log('onPlay')
-  }
-
-  // 播放进度，广告的整个生命周期中需要记录视频播放的进度
-  function onTimeUpdate(res) {
-    const { detail } = res
-    durationTime += (detail?.currentTime || 0)
-  }
 
   return (
     <View className='custom' style={style}>
-      <Video id='pq-custom' className='custom-video' autoplay={true} controls={false} loop src={VIDEO_SRC} onClick={onClick} onLoadedMetaData={onLoadedMetaData} onPlay={onPlay} onTimeUpdate={onTimeUpdate} onError={onError} objectFit='fill' poster={VIDEO_COVER} />
+      <Video
+        id='pq-custom'
+        className='custom-video'
+        objectFit='fill'
+        controls={false}
+        // video属性
+        autoplay={autoplay}
+        loop={loop}
+        muted={muted}
+        src={src}
+        poster={poster}
+        // video事件
+        onPlay={onPlay}
+        onTimeUpdate={onTimeUpdate}
+        onPause={onPause}
+        onEnded={onEnded}
+        onStop={onStop}
+        onError={onError}
+
+        // video交互
+        onClick={onClick}
+        onLoadedMetaData={onLoadedMetaData}
+      />
       <View className='custom-bottom'>
         <Image src='http://rescdn.yishihui.com/ad/prod/image/logo_AD_1702267670_1702267670233.png' className='logo' />
         <View className='title'>5天站桩入门课</View>

src/plugin/plugin.json

@@ -1,6 +1,7 @@
 {
   "publicComponents": {
-    "custom": "components/custom/index"
+    "custom": "components/custom/index",
+    "calendar": "components/calendar/index"
   },
   "pages": {
     "webview": "pages/webview/index",

src/plugin/share/index.ts

@@ -0,0 +1,48 @@
+import { PropsWithChildren } from 'react'
+
+export const noop = () => {}
+
+export function wrapProps(props: PropsWithChildren<CustomPropsType>) {
+  let {
+    adpId,
+    autoplay,
+    loop = true,
+    muted = false,
+    showMusk,
+    zIndex = 1,
+    openEmbeddedMiniProgram = noop,
+    onPlay = noop,
+    onPause = noop,
+    onEnded = noop,
+    onTimeUpdate = noop,
+    onStop = noop,
+    onError = noop,
+    onLoad = noop,
+    onView = noop,
+    onClick = noop,
+    onClose = noop
+  } = props
+
+  if (typeof zIndex !== 'number')
+    zIndex = 1
+
+  return {
+    adpId,
+    autoplay,
+    loop,
+    muted,
+    showMusk,
+    zIndex,
+    openEmbeddedMiniProgram,
+    onPlay,
+    onPause,
+    onEnded,
+    onTimeUpdate,
+    onStop,
+    onError,
+    onLoad,
+    onView,
+    onClick,
+    onClose
+  }
+}

types/global.d.ts

@@ -20,6 +20,8 @@ declare namespace NodeJS {
 declare namespace JSX {
   interface IntrinsicElements {
     custom: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & { width?: string, props: any }
+
+    calendar: React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>
   }
 }
 
@@ -27,11 +29,22 @@ declare const wx
 
 type CustomPropsType = {
   adpId: number
-  width?: number
+  autoplay?: boolean
+  loop?: boolean
+  muted?: boolean
+  showMusk?: boolean
   zIndex?: number
+  openEmbeddedMiniProgram(): void
+
+  onPlay?():void
+  onPause?():void
+  onEnded?():void
+  onTimeUpdate?():void
+  onStop?():void
+  onError?(): void
+
   onLoad?(): void
   onView?(): void
   onClick?(): void
   onClose?(): void
-  onError?(): void
 }