config/index.ts

@@ -6,7 +6,7 @@ import prodConfig from './prod'
 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
 export default defineConfig(async (merge, { command, mode }) => {
   const baseConfig: UserConfigExport = {
-    projectName: ' pqVideoMiniprogram',
+    projectName: ' longvideoImerse',
     date: '2024-2-7',
     designWidth: 750,
     deviceRatio: {

package.json

@@ -1,5 +1,5 @@
 {
-  "name": " pqVideoMiniprogram",
+  "name": "longvideoImerse",
   "version": "1.0.0",
   "private": true,
   "description": " 票圈视频新小程序，票圈好看视频",

project.config.json

@@ -1,6 +1,6 @@
 {
   "miniprogramRoot": "./dist",
-  "projectname": " pqVideoMiniprogram",
+  "projectname": " longvideoImerse",
   "description": " 票圈视频新小程序，票圈好看视频",
   "appid": "wxf275bb93cdcc9d87",
   "setting": {

project.tt.json

@@ -1,6 +1,6 @@
 {
   "miniprogramRoot": "./",
-  "projectname": " pqVideoMiniprogram",
+  "projectname": " longvideoImerse",
   "appid": "testAppId",
   "setting": {
     "es6": false,

src/app.tsx

@@ -22,6 +22,8 @@ function App({ children }: PropsWithChildren<any>) {
 
     useLaunch(async (launch) => {
         globalApp()
+        // system info
+        updateSystem()
         console.log('hhz - launch option:', launch)
 
         // create session id
@@ -44,8 +46,6 @@ function App({ children }: PropsWithChildren<any>) {
         //
         getAccountInfoInApp()
 
-        // system info
-        updateSystem()
     })
 
 

src/components/VideoSwiper/index.less

@@ -19,6 +19,17 @@
                 height: calc(100% - 6px);
             }
 
+            .plaBtn {
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translateX(-50%) translateY(-50%);
+                image {
+                    width: 110px;
+                    height: 100px;
+                }
+            }
+
             .progress-bg {
                 position: absolute;
                 bottom: 0;
@@ -169,20 +180,22 @@
 
         .video-introduce {
             box-sizing: border-box;
-            width: calc(100% - 120px);
             position: absolute;
+            width: 100%;
             left: 0;
             bottom: 40px;
             color: #fff;
             font-size: 32px;
-            padding: 0 20px;
+            padding: 10px 20px 0;
             text-shadow: #000 1px 0 6px;
-            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), 10%, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0.1));
+            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, .3));
 
             .video-user-info {
                 display: flex;
                 align-items: center;
                 font-size: 36px;
+                font-weight: 500;
+                width: calc(100% - 120px);
 
                 .avatar {
                     width: 50px;
@@ -194,10 +207,11 @@
 
             .video-title {
                 margin: 20px 0;
+                width: calc(100% - 120px);
             }
 
             .redShareBtn {
-                width: 90%;
+                width: calc(90% - 120px);
                 height: 80px;
                 background-color: #EE2C4F;
                 border-radius: 8px;
@@ -207,6 +221,8 @@
                 line-height: 80px;
                 color: #fff;
                 text-shadow: none;
+                margin-left: 0;
+                margin-right: auto;
             }
         }
 

src/components/VideoSwiper/index.tsx

@@ -16,16 +16,18 @@ let activeIndex = 0
 let lastSwiperItemIndex = 0     // 上个 item 索引
 let currentListIndex = 0 // 大视频列表的索引
 let isUp = false
+let swiperRefreshing = false
 
 const videoViewedMap = new Map()
 
-export default function VideoSwiper({ list, onFinish, needResumePlay, flushList }) {
+export default function VideoSwiper({ list, onFinish, needResumePlay, flushList, onRefresh }) {
     const [currentIndex, setCurrentIndex] = useState(0)
     const [circular, setCircular] = useState(false)
     const [videoList, setVideoList] = useState<VideoInfo[]>(list.slice(0, 3))
     const [seekProgress, setSeekProgress] = useState(false)
     const [needPlayerResume, setNeedPlayerResume] = useState(false)
 
+    
     useReady(() => {
         activeIndex = 0
         videoViewedMap.clear()
@@ -45,6 +47,20 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList
         setSeekProgress(e || false)
     }
 
+    function onTransition(e) {
+        console.log('swo:', e.detail)
+        let {dy = 0} = e.detail
+        if (!swiperRefreshing && dy < -50 && currentListIndex == 0 && currentIndex == 0) {
+            swiperRefreshing = true
+            setTimeout(() => {
+                onRefresh()
+            }, 250);
+        }else if (swiperRefreshing && dy == 0) {
+            swiperRefreshing = false
+
+        }
+    }
+
     function onSwiperChange(res) {
         const { detail } = res || {}
         const { current } = detail || {}
@@ -68,9 +84,6 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList
         const { current } = detail || {}
 
         if (activeIndex == current) {
-            if (currentListIndex == 0) {
-                onFinish(-99)
-            }
             return
         }
         activeIndex = current
@@ -139,13 +152,15 @@ export default function VideoSwiper({ list, onFinish, needResumePlay, flushList
             className='video-swiper'
             vertical
             circular={circular}
+            duration={200}
             current={currentIndex}
             onChange={onSwiperChange}
+            onTransition={onTransition}
             onAnimationFinish={onAnimationFinish}
         >
             {videoList.map((video, index) => {
                 return (
-                    <SwiperItem className='video-swiper-item' key={video.id}>
+                    <SwiperItem className='video-swiper-item' key={video.id} >
                         <CustomVideo
                             video={video}
                             current={currentIndex}
@@ -345,6 +360,9 @@ function CustomVideo({ video, current, index, onTimeUpdate, onProgressMove, need
                 onSeekComplete={onSeekCom}
                 onTap={onTapVideo}
             />
+            {(playerState == PlayState.pause) && <View className='plaBtn'>
+                <Image src='http://weapppiccdn.yishihui.com/wxicon/common/icon_play_btn_dark2.png'/>
+            </View>}
             <View className='progress-bg'
                 onTouchStart={onTouchStart}
                 onTouchMove={onTouchMove}

src/components/VideoSwiper/index.wxss

@@ -18,6 +18,16 @@
   width: 100%;
   height: calc(100% - 6px);
 }
+.video-swiper .video-swiper-item .custom-video .plaBtn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+.video-swiper .video-swiper-item .custom-video .plaBtn image {
+  width: 110px;
+  height: 100px;
+}
 .video-swiper .video-swiper-item .custom-video .progress-bg {
   position: absolute;
   bottom: 0;
@@ -148,20 +158,22 @@
 }
 .video-swiper .video-swiper-item .video-introduce {
   box-sizing: border-box;
-  width: calc(100% - 120px);
   position: absolute;
+  width: 100%;
   left: 0;
   bottom: 40px;
   color: #fff;
   font-size: 32px;
-  padding: 0 20px;
+  padding: 10px 20px 0;
   text-shadow: #000 1px 0 6px;
-  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), 10%, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
+  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3));
 }
 .video-swiper .video-swiper-item .video-introduce .video-user-info {
   display: flex;
   align-items: center;
   font-size: 36px;
+  font-weight: 500;
+  width: calc(100% - 120px);
 }
 .video-swiper .video-swiper-item .video-introduce .video-user-info .avatar {
   width: 50px;
@@ -171,9 +183,10 @@
 }
 .video-swiper .video-swiper-item .video-introduce .video-title {
   margin: 20px 0;
+  width: calc(100% - 120px);
 }
 .video-swiper .video-swiper-item .video-introduce .redShareBtn {
-  width: 90%;
+  width: calc(90% - 120px);
   height: 80px;
   background-color: #EE2C4F;
   border-radius: 8px;
@@ -182,6 +195,8 @@
   line-height: 80px;
   color: #fff;
   text-shadow: none;
+  margin-left: 0;
+  margin-right: auto;
 }
 .video-swiper .video-swiper-item .video-bar {
   display: flex;

src/custom-tab-bar/index.less

@@ -28,7 +28,7 @@
     flex-direction: column;
 
     .line {
-        width: 100px;
+        width: 60px;
         height: 8px;
         margin-top: 20px;
         background-color: white;

src/custom-tab-bar/index.tsx

@@ -10,7 +10,7 @@ export default class Index extends Component {
         color: '#999999',
         selectedColor: '#ffffff',
         backgroundColor: '#000000',
-        fontSize: 22,
+        fontSize: 16,
         list: [
             {
                 pagePath: '/pages/category/index',

src/custom-tab-bar/index.wxss

@@ -26,7 +26,7 @@
   flex-direction: column;
 }
 .tab-bar-item .line {
-  width: 100px;
+  width: 60px;
   height: 8px;
   margin-top: 20px;
   background-color: white;

src/env/index.ts

@@ -0,0 +1,64 @@
+import Taro from "@tarojs/taro"
+
+export const ENV_LIST = ['development', 'staging', 'production']
+
+export const ENV = process.env.APP_ENV
+
+export function storageEnv(env) {
+  Taro.setStorage({
+    key: 'env',
+    data: env
+  })
+}
+
+let handleEnv
+
+function changeEnvByShack() {
+  let flag = true
+
+  return ({ x, y, z }) => {
+    if (!flag)
+    return
+  
+    if (x > 1 || y > 1 || z > 1) {
+      flag = false
+      Taro.vibrateLong()
+  
+      Taro.showActionSheet({
+        itemList: ['测试环境', '预发环境', '正式环境'],
+        success (res) {
+          changeLocalEnv(res.tapIndex)
+
+          setTimeout(() => {
+            flag = true
+          }, 200)
+        },
+        fail () {
+          flag = true
+        }
+      })
+    }
+  }
+}
+
+export function changeLocalEnv(tapIndex) {
+  Taro.clearStorageSync()
+  storageEnv(ENV_LIST[tapIndex])
+}
+
+export function onEnvByShake() {
+  if (ENV === 'production')
+    return
+
+  handleEnv = changeEnvByShack()
+  Taro.onAccelerometerChange(handleEnv)
+}
+
+export function offEnvByShake() {
+  if (Taro.canIUse('offAccelerometerChange')) {
+    Taro.offAccelerometerChange(handleEnv)
+  } else {
+    Taro.stopAccelerometer()
+  }
+}
+

src/index.html

@@ -8,7 +8,7 @@
   <meta name="format-detection" content="telephone=no,address=no">
   <meta name="apple-mobile-web-app-status-bar-style" content="white">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
-  <title> pqVideoMiniprogram</title>
+  <title> longvideoImerse</title>
   <script><%= htmlWebpackPlugin.options.script %></script>
 </head>
 <body>

src/pages/category/index.config.ts

@@ -2,4 +2,5 @@ export default definePageConfig({
     navigationBarTitleText: '首页',
     navigationStyle: 'custom',
     usingComponents: {},
+    enablePullDownRefresh: false
 })

src/pages/category/index.less

@@ -5,4 +5,14 @@
     position: absolute;
     top: 0;
 
+    .noData {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        font-size: 40px;
+        font-weight: 400;
+        color: #333;
+        background-color: rgb(157, 200, 113);
+    }
 }

src/pages/category/index.tsx

@@ -7,7 +7,7 @@ import { videoListV2 } from '@/http/api'
 import VideoSwiper from '@/components/VideoSwiper'
 import { sharePageAppMessage } from '@/shareHelper'
 import Route from '@/class/Route'
-import { filterCardProps, pxToRpx } from '@/utils/index'
+import { filterCardProps, pxToRpx, pageHeight } from '@/utils/index'
 import { CATEGORY_PAGESOURCE } from '@/const/index'
 
 // import { getTopSafeHeight, throttle, formatSecondsAsTime, getPreIds } from '@/utils'
@@ -29,6 +29,8 @@ export default function Index() {
     const [toSharePage, setToSharePage] = useState(false)
     const [flushList, setFlushList] = useState(false)
     const [botHeight, setBotHeight] = useState(0)
+    const [showNoView, setShowNoView] = useState(false)
+
     useLoad(() => {
         const { redirect } = params
         let dur = 0
@@ -43,10 +45,8 @@ export default function Index() {
             fecthVideoListV2()
         }, dur);
 
-        const systemInfo = Taro.$global.get('systemInfo')
-        let { screenHeight = 0 } = systemInfo
-        let { bottom = 0 } = systemInfo.safeArea || {}
-        setBotHeight(screenHeight - bottom)
+        setBotHeight(pageHeight())
+
     })
 
     useDidShow(() => {
@@ -67,7 +67,13 @@ export default function Index() {
     })
 
     usePullDownRefresh(() => {
-        console.log('usePullDownRefresh')
+        console.log('usePullDownRefresh', activeIndex)
+
+        if (activeIndex ==0 ) {
+            fecthVideoListV2(true)
+        }
+
+
     })
 
     useShareAppMessage((shareRes) => {
@@ -81,6 +87,11 @@ export default function Index() {
 
     // const fecthVideoList = throttle(fecthVideoListV2)
     function fecthVideoListV2(cleanOldCardList = false) {
+        if (refresherTriggered) {
+            return 
+        }
+        setRefresherTriggered(true)
+
         if (cleanOldCardList)
             pageNo = 1
 
@@ -98,7 +109,6 @@ export default function Index() {
 
             if (cleanOldCardList) {
                 oldCardList = []
-                setRefresherTriggered(false)
             }
 
             pageNo++
@@ -114,17 +124,31 @@ export default function Index() {
                 }, 300);
             }
 
+            setTimeout(() => {
+                setRefresherTriggered(false)
+            }, 300);
+
+
+
         }).catch(() => {
+            setRefresherTriggered(false)
+            if (videoList.length == 0) {
+                setShowNoView(true)
+            }
         })
     }
 
+    function onSwiperRefresh() {
+        showNoView && setShowNoView(false)
 
-    function onAnimationFinish(current) {
-        if (current == -99) {
+        if (activeIndex ==0 ) {
             fecthVideoListV2(true)
-
-            return
         }
+        // fecthVideoListV2()
+
+    }
+
+    function onAnimationFinish(current) {
         activeIndex = current
         if (current >= videoList.length - 4) {
             fecthVideoListV2()
@@ -133,11 +157,13 @@ export default function Index() {
 
     return (
         <View className='category-page' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
+            {showNoView && <View className='noData' onClick={onSwiperRefresh}>请刷新重试</View>}
             <VideoSwiper
                 list={videoList}
                 flushList={flushList}
                 needResumePlay={needResumePlay}
                 onFinish={onAnimationFinish}
+                onRefresh={onSwiperRefresh}
             />
 
         </View>

src/pages/category/index.wxss

@@ -5,3 +5,13 @@
   position: absolute;
   top: 0;
 }
+.category-page .noData {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translateX(-50%) translateY(-50%);
+  font-size: 40px;
+  font-weight: 400;
+  color: #333;
+  background-color: #9dc871;
+}

src/pages/home/home.tsx

@@ -3,6 +3,8 @@ import type CustomTabBar from '../../custom-tab-bar'
 import { View, Image, Button } from '@tarojs/components'
 import Taro, { useLoad, useDidShow } from '@tarojs/taro'
 import Route from '@/class/Route'
+import { filterCardProps, pageHeight, pxToRpx } from '@/utils/index'
+
 
 
 import './home.less'
@@ -10,8 +12,10 @@ import './home.less'
 export default function Home() {
     const page = useMemo(() => Taro.getCurrentInstance().page, [])
     const [userInfo, setUserInfo] = useState({ avatarUrl: '', nickName: '' })
+    const [botHeight, setBotHeight] = useState(0)
 
     useLoad(() => {
+        setBotHeight(pageHeight())
     })
 
     useDidShow(() => {
@@ -33,7 +37,7 @@ export default function Home() {
     }
 
     return (
-        <View className='home-page'>
+        <View className='home-page' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
             <View className='head-bg'>
                 <View className='baseInfo'>
                     <Image src={userInfo.avatarUrl}></Image>

src/pages/share/share.less

@@ -9,8 +9,8 @@
         position: absolute;
         top: 40px;
         left: 40px;
-        width: 80px;
-        height: 80px;
+        width: 64px;
+        height: 64px;
         z-index: 999;
 
         image {
@@ -18,4 +18,9 @@
             height: 100%;
         }
     }
+
+    .swiper-bg {
+        width: 100%;
+        height: calc(100% - 110px);
+    }
 }

src/pages/share/share.tsx

@@ -6,7 +6,7 @@ import VideoSwiper from "@/components/VideoSwiper";
 import { videoDetail, recommendSharePageList } from '@/http/api'
 import { USER_SHARE_PAGESOURCE, RECOMMEND_PAGESOURCE } from '@/const/index'
 import './share.less'
-import { filterCardProps } from '@/utils/index'
+import { filterCardProps, pageHeight, pxToRpx, getMenuButtonBoundingClientRect } from '@/utils/index'
 import { sharePageAppMessage, returnedCrowdClickReport } from '@/shareHelper'
 
 let flushList = false
@@ -34,10 +34,16 @@ export default function Share() {
             nickName: params.nickName || '',
         }
     }])
+    const [botHeight, setBotHeight] = useState(0)
+    const [backBtnTop, setBackBtnTop] = useState(0)
+
 
     useLoad(() => {
         console.log('pa', params)
 
+        setBotHeight(pageHeight())
+        setBackBtnTop(getMenuButtonBoundingClientRect().top)
+
         getVideoDetail()
         setTimeout(() => {
             getRecommendList()
@@ -115,11 +121,6 @@ export default function Share() {
     }
 
     function onAnimationFinish(current) {
-        if (current == -99) {
-            // fecthVideoListV2(true)
-
-            return
-        }
         activeIndex = current
         if (current >= videoList.length - 4) {
             getRecommendList()
@@ -129,16 +130,24 @@ export default function Share() {
         Taro.navigateBack()
     }
 
+    function onRefresh() {
+        
+    }
+
     return (
         <View className='share-page'>
-            <View className='backBtn' onClick={backBtnAction}>
+            <View className='backBtn' onClick={backBtnAction} style={{top: `${pxToRpx(backBtnTop)}px;`}}>
                 <Image src='https://weapppiccdn.yishihui.com/wxicon/common/share_backbtn.png' />
             </View>
-            <VideoSwiper
-                list={videoList}
-                onFinish={onAnimationFinish}
-                needResumePlay={needResumePlay}
-                flushList={flushList} />
+            <View className='swiper-bg' style={{ height: 'calc(100% - ' +  `${Math.floor(pxToRpx(55))}px - ` + `${botHeight}px);` }}>
+                <VideoSwiper
+                    list={videoList}
+                    onFinish={onAnimationFinish}
+                    needResumePlay={needResumePlay}
+                    flushList={flushList} 
+                    onRefresh={onRefresh}/>
+
+            </View>
         </View>
     )
 }

src/pages/share/share.wxss

@@ -9,11 +9,15 @@
   position: absolute;
   top: 40px;
   left: 40px;
-  width: 80px;
-  height: 80px;
+  width: 64px;
+  height: 64px;
   z-index: 999;
 }
 .share-page .backBtn image {
   width: 100%;
   height: 100%;
 }
+.share-page .swiper-bg {
+  width: 100%;
+  height: calc(100% - 110px);
+}

src/utils/index.ts

@@ -259,7 +259,18 @@ export function getOption(options) {
 }
 
 export function pxToRpx(num) {
-    const systemInfo = Taro.$global.get('systemInfo')
+    const systemInfo = Taro.$global.get('systemInfo') || {}
     let { screenWidth = 375 } = systemInfo
     return num / 375 * screenWidth
+}
+
+export function pageHeight() {
+    const systemInfo = Taro.$global.get('systemInfo')
+    let { screenHeight = 0 } = systemInfo
+    let { bottom = 0 } = systemInfo.safeArea || {}
+    return screenHeight - bottom
+}
+export function getMenuButtonBoundingClientRect(){
+    let rect = Taro.getMenuButtonBoundingClientRect() || {}
+    return {top : rect.top || 38}
 }