视频全屏播放下添加播放列表

src/components/UserExchangeModal/index.tsx

@@ -76,7 +76,7 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
   }
 
   const handleExchange = () => {
-    if(inputValue.length === 8){
+    // if(inputValue.length === 8){
       Taro.request({
         url: 'https://interapi.jm-kid.com/api/product/exchange',
         method: 'POST',
@@ -103,12 +103,12 @@ export default function UserExchangeModal({ isOpen, setIsOpen }: Props) {
           console.log('兑换失败=>', err)
         }
       })
-    }else{
-      Taro.showToast({
-        title: '兑换码格式错误',
-        icon: 'none'
-      })
-    }
+    // }else{
+    //   Taro.showToast({
+    //     title: '兑换码格式错误',
+    //     icon: 'none'
+    //   })
+    // }
 
   }
 

src/pages/DisplayVideo/index.less

@@ -13,7 +13,14 @@
     .jimeiVideo {
       width: 100%;
       height: 100%
-      }
+    }
+    .select-epi {
+      z-index: 1000;
+      position: absolute;
+      bottom: 7.4rem;
+      right: 3rem;
+      color: #fff;
+    }
   }
 }
 
@@ -100,3 +107,62 @@
           }
       }
 }
+
+.fullDisplayList {
+  position: fixed;
+  top: 0;
+  right: 2rem;
+  // width: 90vw;
+  width: 12rem;
+  height: 100vh;
+  // white-space: nowrap;
+  padding: 1rem 1rem 0;
+  color: white;
+  // overflow: hidden;
+  background-color: rgba(0, 0, 0, .3);
+  .card-epi {
+    margin-bottom: .8rem;
+    font-size: 1.1rem;
+  }
+  .card-inner {
+    height: 90vh;
+    overflow-x: scroll;
+  }
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  .card {
+    // display: inline-block;
+    // display: flex;
+    min-width: 12rem;
+    margin-bottom: 1rem;
+
+  }
+  .card-image-wrap {
+    position: relative;
+    width: 12rem;
+    height: 6rem;
+    margin-bottom: .3rem;
+    border-radius: 1rem;
+    overflow: hidden;
+  }
+  .card-image {
+    width: 100%;
+    height: 100%;
+  }
+  .card-playing-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    font-size: 1rem;
+    font-weight: 600;
+    text-align: center;
+    line-height: 5rem;
+    background-color: rgba(0, 0, 0, .6);
+  }
+  .card-title {
+    font-size: .9rem;
+  }
+}

src/pages/DisplayVideo/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import Taro, { useLoad, useShareAppMessage, useShareTimeline } from '@tarojs/taro'
-import { View, Text, Video, Image, ScrollView } from '@tarojs/components'
+import { View, Text, Video, Image, ScrollView, CoverView, CoverImage } from '@tarojs/components'
 
 import './index.less'
 
@@ -108,6 +108,10 @@ export default function Index() {
 
   const [isFree, setisFree] = useState(false)
 
+  const [isFullscreen, setIsFullscreen] = useState(false)
+
+  const [playListOpen, setPlayListOpen] = useState(false)
+
   useShareAppMessage((res) => {
     if (res.from === 'button') {
       console.log(res.target);
@@ -346,6 +350,22 @@ export default function Index() {
     return result;
   }
 
+  // 视频全屏回调
+  const fullScreenChange = (e: any) => {
+    const { fullScreen } = e.detail
+    fullScreen || setPlayListOpen(false)
+    setIsFullscreen(fullScreen)
+  }
+
+  // 展示选集列表
+  const showPlayList = () => {
+    setPlayListOpen(!playListOpen)
+  }
+
+  const videoClick = () => {
+    setPlayListOpen(false)
+  }
+
   return (
     <View className='bgview' style={{ width: '100%', overflow: 'hidden' }}>
       {/* pad小程序 */}
@@ -353,21 +373,31 @@ export default function Index() {
         <View className='content'>
           {
             !isFree ?
-              <Video
-                className='jimeiVideo'
-                src={displayindex['src']}
-                poster={displayindex['poster']}
-                initialTime={0}
-                controls
-                autoplay
-                loop={false}
-                muted={false}
-                onEnded={() => continuePlay()}
-                onPlay={() => provingCdKey()}
-                direction={90}
-                id='topvideo'
-                objectFit='contain'
-              ></Video> :
+              <>
+                <Video
+                  className='jimeiVideo'
+                  title={displayindex.title}
+                  src={displayindex['src']}
+                  poster={displayindex['poster']}
+                  initialTime={0}
+                  controls
+                  autoplay
+                  enablePlayGesture
+                  vslideGesture
+                  showScreenLockButton
+                  showBackgroundPlaybackButton
+                  loop={false}
+                  muted={false}
+                  onClick={() => videoClick()}
+                  onEnded={() => continuePlay()}
+                  onPlay={() => provingCdKey()}
+                  onFullScreenChange={(e) => fullScreenChange(e)}
+                  direction={90}
+                  id='topvideo'
+                  objectFit='contain'
+                ></Video>
+                {isFullscreen && <CoverView className='select-epi' onClick={showPlayList}>选集</CoverView>}
+               </> :
               null
           }
           {
@@ -411,6 +441,32 @@ export default function Index() {
           )
         }
       </ScrollView>
+
+      {/* 全屏播放状态下的视频列表 */}
+      {
+        playListOpen &&
+        <CoverView
+          className='fullDisplayList'
+          scrollX
+          scrollWithAnimation
+          // enableFlex
+        >
+          <CoverView className='card-epi'>选集</CoverView>
+          <CoverView className='card-inner'>
+            {
+              alldata.map((item : any, index: number) =>
+                <CoverView className='card' key={item['ResId']} onClick={() => changedisplay(item, index)} >
+                  <CoverView className='card-image-wrap'>
+                    <CoverImage className='card-image' src={item['ResCover']} mode='aspectFill'></CoverImage>
+                    {displayindex['index'] == index && <CoverView className='card-playing-mask'>正在播放</CoverView>}
+                  </CoverView>
+                  <CoverView className='card-title'>{item['ResTitle']}</CoverView>
+                </CoverView>
+              )
+              }
+          </CoverView>
+        </CoverView>
+      }
     </View>
   )
 }

src/pages/Subscribe/index.tsx

@@ -447,10 +447,11 @@ export default function Subscribe() {
   }
 
   // 套装删除
-  const handleDelCollection = (item: any) => {
+  const handleDelCollection = (item: any, e: TouchEvent) => {
+    e.stopPropagation()
     if (item.SubscribedState === -1) {
       // 已过期，直接删除
-      debugger
+      // debugger
       Taro.request({
         url: 'https://interapi.jm-kid.com/api/mark/subscribed',
         method: 'POST',
@@ -482,10 +483,11 @@ export default function Subscribe() {
   }
 
   // 单本删除
-  const handleDelSingle = (item: any) => {
+  const handleDelSingle = (item: any, e: TouchEvent) => {
+    e.stopPropagation()
     if (item.SubscribedState === -1) {
-      // 已过期，直接删除
       debugger
+      // 已过期，直接删除
       Taro.request({
         url: 'https://interapi.jm-kid.com/api/mark/subscribed',
         method: 'POST',
@@ -630,7 +632,7 @@ export default function Subscribe() {
                     {
                       item.SubscribedState === -1 && (
                         <View className='expire'>
-                          <Image src='https://oss.jm-kid.com/wx_5colorflower/error.png' className='expire_icon' onClick={() => handleDelSingle(item)}></Image>
+                          <Image src='https://oss.jm-kid.com/wx_5colorflower/error.png' className='expire_icon' onClick={(e) => handleDelSingle(item, e)}></Image>
                           <View className='expire_text'>已 过 期</View>
                         </View>
                       )
@@ -665,7 +667,7 @@ export default function Subscribe() {
                     {
                       item.SubscribedState === -1 && (
                         <View className='expire'>
-                          <Image src='https://oss.jm-kid.com/wx_5colorflower/error.png' className='expire_icon' onClick={() => handleDelCollection(item)}></Image>
+                          <Image src='https://oss.jm-kid.com/wx_5colorflower/error.png' className='expire_icon' onClick={(e) => handleDelCollection(item, e)}></Image>
                           <View className='expire_text'>已 过 期</View>
                         </View>
                       )