feat(video): cross-platform compatibility

packages/nutui-taro-demo/src/pages/index/index.tsx

@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { View, Image, Text, ScrollView, Button, Input } from '@tarojs/components'
+import { View, Image, Text, ScrollView, Button, Input, Video } from '@tarojs/components'
 import pkg from '@/packages/../config.json'
 import packageJson from '@/packages/../../package.json'
 import './index.scss'
@@ -10,7 +10,7 @@ const navs = pkg.nav
 
 
 // hack taro load button xml
-console.log(Button, Input )
+console.log(Button, Input, Video )
 
 // try {
 //     console.log('xxx', Schema)

src/config.json

@@ -1133,7 +1133,7 @@
           "author": "swag~jun"
         },
         {
-          "version": "2.0.0",
+          "version": "3.0.0",
           "name": "Video",
           "type": "component",
           "cName": "视频播放器",

src/packages/trendarrow/demo.taro.tsx

@@ -12,6 +12,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import { harmonyAndRn } from '@/utils/platform-taro'
 
 const TrendArrowDemo = () => {
   const [translated] = useTranslate({
@@ -64,8 +65,12 @@ const TrendArrowDemo = () => {
         <Demo6 />
         <View className="h2">{translated.title7}</View>
         <Demo7 />
-        <View className="h2">{translated.title8}</View>
-        <Demo8 />
+        {!harmonyAndRn() && (
+          <>
+            <View className="h2">{translated.title8}</View>
+            <Demo8 />
+          </>
+        )}
       </ScrollView>
     </>
   )

src/packages/trendarrow/trendarrow.taro.tsx

@@ -26,8 +26,8 @@ const defaultProps = {
   left: false,
   sync: true,
   color: '#333',
-  riseColor: harmony() ? '#ff0f23' : 'var(--nutui-brand-6)',
-  dropColor: harmony() ? '#14cc33' : 'var(--nutui-secondary-1)',
+  riseColor: harmony() ? '#ff0f23' : '#ff0f23',
+  dropColor: harmony() ? '#14cc33' : '#14cc33',
   riseIcon: null,
   dropIcon: null,
 } as TrendArrowProps

src/packages/video/demo.taro.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import Taro from '@tarojs/taro'
 import { ScrollView, View } from '@tarojs/components'
 import { useTranslate } from '@/sites/assets/locale/taro'
+
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -44,9 +45,7 @@ const VideoDemo = () => {
   return (
     <>
       <Header />
-      <ScrollView
-        className={`demo full ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}
-      >
+      <ScrollView className={`demo ${Taro.getEnv() === 'WEB' ? 'web' : ''}`}>
         <View className="h2">{translated.basic}</View>
         <Demo1 />
         <View className="h2">{translated.autoPlay}</View>

src/packages/video/demos/taro/demo1.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo1 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -14,14 +15,14 @@ const Demo1 = () => {
   const playend = (elm: any) => console.log('playend', elm)
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
           source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo2.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo2 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -16,14 +17,14 @@ const Demo2 = () => {
   const playend = (elm: any) => console.log('playend', elm)
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
           source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo3.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo3 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -15,14 +16,14 @@ const Demo3 = () => {
   const playend = (elm: any) => console.log('playend', elm)
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
           source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo4.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo4 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -23,7 +24,7 @@ const Demo4 = () => {
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo5.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo5 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -15,14 +16,14 @@ const Demo5 = () => {
   const playend = (elm: any) => console.log('playend', elm)
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
           source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo6.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo6 = () => {
-  const [source, setSource] = useState({
+  const [source] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/video_NutUI.mp4',
     type: 'video/mp4',
   })
@@ -19,14 +20,14 @@ const Demo6 = () => {
   const playend = (elm: any) => console.log('playend', elm)
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
           source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
     </>

src/packages/video/demos/taro/demo7.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { Cell, Video, Button } from '@nutui/nutui-react-taro'
+import pxTransform from '@/utils/px-transform'
 
 const Demo7 = () => {
-  const [source1, setSource1] = useState({
+  const [source, setSource] = useState({
     src: 'https://storage.360buyimg.com/nutui/video/legao-%E6%9D%A8%E8%BF%9B%E5%86%9B.mp4',
     type: 'video/mp4',
   })
@@ -14,23 +15,23 @@ const Demo7 = () => {
   const playend = (elm: any) => console.log('playend', elm)
 
   const changeVideo = () => {
-    setSource1({ ...source1, src: 'https://vjs.zencdn.net/v/oceans.mp4' })
+    setSource({ ...source, src: 'https://vjs.zencdn.net/v/oceans.mp4' })
   }
   return (
     <>
-      <Cell style={{ padding: '0' }}>
+      <Cell style={{ padding: 0 }}>
         <Video
-          source={source1}
+          source={source}
           options={options}
           onPlay={play}
           onPause={pause}
           onPlayEnd={playend}
-          style={{ height: '163px' }}
+          style={{ height: pxTransform(163) }}
         />
       </Cell>
       <Button
         type="primary"
-        style={{ marginBottom: '60px' }}
+        style={{ marginBottom: pxTransform(60) }}
         onClick={changeVideo}
       >
         视频切换

src/packages/video/video.taro.tsx

@@ -6,6 +6,7 @@ import {
   BaseEventOrig,
   View,
 } from '@tarojs/components'
+import { mergeProps } from '@/utils/merge-props'
 
 export interface VideoProps extends Omit<VideoPropsTaro, 'src'> {
   source: {
@@ -32,7 +33,7 @@ const defaultProps = {
   },
   options: {
     controls: true,
-    muted: false, // 默认不是静音
+    muted: false,
     autoplay: false,
     poster: '',
     playsinline: false,
@@ -43,7 +44,6 @@ const defaultProps = {
 const classPrefix = `nut-video`
 export const Video: FunctionComponent<Partial<VideoProps>> = (props) => {
   const {
-    children,
     source,
     options,
     className,
@@ -52,16 +52,13 @@ export const Video: FunctionComponent<Partial<VideoProps>> = (props) => {
     onPause,
     onPlayEnd,
     ...restProps
-  } = {
-    ...defaultProps,
-    ...props,
-  }
+  } = mergeProps(defaultProps, props)
   const classes = classNames(classPrefix, className)
 
   return (
     <View className={classes} style={style}>
       <VideoTaro
-        className="nut-video-player"
+        className={`${classPrefix}-player`}
         muted={options.muted}
         autoplay={options.autoplay}
         loop={options.loop}