[更新]更新视频组件配置,调整直播弹出样式

components/swiperVideo/swiperVideo.js

@@ -31,8 +31,9 @@ Component({
      * 组件的初始数据
      */
     data: {
-        controls: false,
+        controls: true,
-        showPlay: false,
+        showPlay: true,
+        showFull: false,
         isPlay  : false,
         playId  : 0
     },
@@ -60,7 +61,6 @@ Component({
                 videoContextPrev.play()
 
             this.setData({
-                isPlay: true,
                 playId: prevId
             })
         },

components/swiperVideo/swiperVideo.wxml

@@ -8,6 +8,8 @@
             controls="{{controls}}"
             object-fit="{{fit}}"
             show-center-play-btn="{{showPlay}}"
+            show-fullscreen-btn="{{showFull}}"
+            enable-progress-gesture="{{false}}"
             data-videoid="{{item.video_id}}"
             bindtap="videoPlay"
             bindplay="vipdeBindPlay"
@@ -17,5 +19,7 @@
         >
         </video>
         <image class="videoCover" src="{{item.cover}}" mode="aspectFill"></image>
+        <!-- 视频播放按钮 -->
+        <!-- <cover-image class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icons/play_icon.png"></cover-image> -->
     </swiper-item>
 </swiper>

components/swiperVideo/swiperVideo.wxss

@@ -23,13 +23,14 @@
 
 /* 视频按钮 */
 .videoLayer-play{
-    position: relative;
+    position: absolute;
     width: 78rpx;
     height: 78rpx;
     left: calc(50% - 39rpx);
     top: calc(50% - 39rpx);
     opacity: 0;
     transition: all .5s;
+    z-index: 99;
 }
 
 .videoLayer-play.show{

pages/shortVideo/index.js

@@ -5,7 +5,6 @@
  */
 
 Page({
-
     /**
      * 页面的初始数据
      */
@@ -15,6 +14,8 @@ Page({
         videoId     : "",   //当前播放的视频id
         playState   : true, //视频播放状态
         rooms       : [],   //直播列表
+        sysInfo     : {},   //系统信息
+        showLive    : false //直播层状态
     },
 
     /**
@@ -31,17 +32,36 @@ Page({
     },
 
     /**
-     * 获取直播间列表
+     * 生命周期函数--监听页面显示
      */
     onShow(){
+        // 获取直播间列表
         wx.$api.live.rooms().then(res=>{
-            console.log(res.list)
             this.setData({
-                rooms: res.list
+                rooms   : res.list,
+                sysInfo : wx.getSystemInfoSync().safeArea
             })
+            console.log(this.data.sysInfo)
         })
     },
 
+    /**
+     * 展示直播数量
+     */
+    onLiveLay(e){
+        if(e.currentTarget.dataset.type == "video"){
+            if(this.data.showLive){
+                this.setData({
+                    showLive: false
+                })
+            }
+        }else{
+            this.setData({
+                showLive: !this.data.showLive
+            })
+        }
+    },
+
     /***
      * 视频的播放状态
      */

pages/shortVideo/index.wxml

@@ -1,5 +1,14 @@
+<!-- 直播列表 -->
+<scroll-view class="live-rooms" scroll-x>
+    <block wx:for="{{rooms}}" wx:key="rooms">
+        <navigator class="live-rooms-nav" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
+            <image class="live-rooms-cover" src="{{item.cover_img}}" mode="aspectFill"></image>
+        </navigator>
+    </block>
+</scroll-view>
 
-<view class="videos-content">
+<!-- 短视频 -->
+<view class="videos-content {{showLive ? 'marginTop': ''}}" bindtouchstart="onLiveLay" data-type="video">
     <swiperViode
         wx:if="{{videoList.length > 0}}"
         class="swiper-viode"
@@ -10,16 +19,10 @@
         bind:swiperindex="swiperIndex"
     >
     </swiperViode>
-    <!-- 直播列表 -->
+    <!-- 直播 -->
-    <view class="live-rooms">
+    <view class="videoLayer-live" wx:if="{{rooms.length > 0 && !showLive}}" catchtap="onLiveLay">
-        <block wx:for="{{rooms}}" wx:key="rooms">
+        <text>{{rooms.length}}个直播</text>
-            <navigator class="live-rooms-nav" url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}">
-                <image class="live-rooms-cover" src="{{item.cover_img}}" mode="aspectFill"></image>
-            </navigator>
-        </block>
     </view>
-    <!-- 视频播放按钮 -->
-    <view class="videoLayer-play {{!isPlay ? 'show': ''}}" src="/static/icons/play_icon.png"></view>
     <!-- 视频信息 -->
     <view class="video-info">
         <view class="video-user">@ {{videoList[videoIndex].company.name || "-"}}</view>

pages/shortVideo/index.wxss

@@ -4,8 +4,6 @@
  *  匆匆数载恍如梦，岁月迢迢华发增。
  *  碌碌无为枉半生，一朝惊醒万事空。
  */
-
-
 page{
     background: #0e0c1a;
 }
@@ -17,22 +15,29 @@
 }
 
 .videos-content{
+    margin-top: 0;
     position: relative;
     height: 100vh;
     box-sizing: border-box;
     padding-bottom: calc(48px + env(safe-area-inset-bottom));
+    transition: margin-top .5s;
+}
+
+.videos-content.marginTop{
+    margin-top: calc(134px + env(safe-area-inset-top));
 }
 
 /* 直播信息 */
 .live-rooms{
     position: absolute;
-    top: calc(180rpx + env(safe-area-inset-bottom));
+    top: 0;
-    left: 30rpx;
+    padding-top: calc(60px + env(safe-area-inset-top));
+    white-space: nowrap;
 }
 
 .live-rooms-cover{
-    width: 98rpx;
+    width: 52px;
-    height: 98rpx;
+    height: 52px;
     border-radius: 50%;
     vertical-align: top;
 }
@@ -40,13 +45,17 @@
 .live-rooms-nav{
     position: relative;
     display: inline-block;
-    width: 98rpx;
+    width: 52px;
-    height: 98rpx;
+    height: 52px;
-    margin-left: 30rpx;
+    margin: 0 15rpx;
 }
 
 .live-rooms-nav:first-child{
-    margin-left: 0;
+    margin-left: 30rpx;
+}
+
+.live-rooms-nav:last-child{
+    margin-right: 30rpx;
 }
 
 .live-rooms-nav::before,
@@ -56,8 +65,8 @@
 }
 
 .live-rooms-nav::before{
-    width: 98rpx;
+    width: 52px;
-    height: 98rpx;
+    height: 52px;
     border:solid 4rpx #FF8C37;
     border-radius: 50%;
     box-sizing: border-box;
@@ -67,8 +76,8 @@
     content: "直播中";
     position: absolute;
     bottom: 0;
-    left: 10rpx;
+    left: 5px;
-    width: 78rpx;
+    width: 42px;
     background: #FF8C37;
     color: white;
     height: 32rpx;
@@ -78,10 +87,29 @@
     border-radius: 16rpx;
 }
 
+/* 直播数量 */
+.videoLayer-live{
+    position: absolute;
+    top: calc(60px + env(safe-area-inset-top));
+    left: 30rpx;
+    right: 30rpx;
+    color: white;
+    text-align: center;
+}
+
+.videoLayer-live text{
+    background: rgba(0, 0, 0, .5);
+    padding: 0 20rpx;
+    line-height: 50rpx;
+    font-size: 26rpx;
+    border-radius: 25rpx;
+    display: inline-block;
+}
+
 /* 视频信息 */
 .video-info{
     position: absolute;
-    bottom: calc(78px + env(safe-area-inset-bottom));
+    bottom: calc(88px + env(safe-area-inset-bottom));
     left: 30rpx;
     width: calc(100% - 218rpx);
 }
@@ -107,7 +135,7 @@
 .video-tool{
     position: absolute;
     right: 30rpx;
-    bottom: calc(78px + env(safe-area-inset-bottom));
+    bottom: calc(88px + env(safe-area-inset-bottom));
 }
 
 .video-tool-item{