mp3 player ui improve

themes/beauty/controller/SiteController.php

@@ -603,7 +603,7 @@ Class SiteController extends Controller {
         $cateId = $this->get('pid', '');
         $cacheParentDataId = $this->get('cid', '');
         $page = $this->get('page', 1);
-        $pageSize = $this->get('limit', 24);
+        $pageSize = $this->get('limit', 100);
 
         if (empty($videoUrl) || empty($videoId) || empty($cateId) || empty($cacheParentDataId)) {
             throw new Exception("缺少参数！", 403);
@@ -650,7 +650,7 @@ Class SiteController extends Controller {
         $cateId = $this->get('pid', '');
         $cacheParentDataId = $this->get('cid', '');
         $page = $this->get('page', 1);
-        $pageSize = $this->get('limit', 24);
+        $pageSize = $this->get('limit', 100);
 
         if (empty($videoUrl) || empty($videoId) || empty($cateId) || empty($cacheParentDataId)) {
             throw new Exception("缺少参数！", 403);
@@ -661,10 +661,20 @@ Class SiteController extends Controller {
 
         //增加文件后缀格式检查，区分：mp4, mov, m3u8
         $videoExtension = pathinfo($arr['path'], PATHINFO_EXTENSION);
+
         //支持m3u8地址：/m3u8/?id=xxx
         if ($videoFilename == 'm3u8') {
             $videoExtension = 'm3u8';
+
+            //从缓存数据获取文件名
+            $cacheSeconds = 86400;
+            $cachedParentData = Common::getCacheFromFile($cacheParentDataId, $cacheSeconds);
+            if (!empty($cachedParentData)) {
+                $m3u8 = $cachedParentData[$videoId];
+                $videoFilename = $m3u8['filename'] . '.m3u8';
+            }
         }
+
         $videoSourceType = Html::getMediaSourceType($videoExtension);
 
         //获取联系方式

themes/beauty/views/site/mp3player.php

@@ -27,47 +27,49 @@
 </nav>
 
 
-<div class="row">
-    <div class="col col-md-8">
+<div class="morevideos audiolist">
+    <div class="btn_autoplay text_dark ml-1">
+        自动播放：
+        <div class="btn-group" role="group">
+            <button class="btn btn-default btn-xs autoplay_disabled">关闭</button>
+            <button class="btn btn-primary btn-xs autoplay_enabled">开启</button>
+        </div>
+    </div>
+
+    <div
+        data-type="audio"
+        data-id="<?php echo $viewData['videoId']; ?>"
+        data-pid="<?php echo $viewData['cateId']; ?>"
+        data-cid="<?php echo $viewData['cacheParentDataId']; ?>"
+        data-page="<?php echo $viewData['page']; ?>"
+        data-page-size="<?php echo $viewData['pageSize']; ?>"
+        class="row othervideos ml-1"><div class="ml-1">...</div></div>
+</div>
+<div class="audioplayer" style="background:url('/img/beauty/audio_bg.jpg') top center">
+    <div class="row">
+        <div class="col col-md-3 col-xs-8">
             <div class="videoplayer">
                 <video
                     data-id="<?php echo $viewData['videoId']; ?>"
                     data-screenshot-start="<?php echo FSC::$app['config']['screenshot_start']; ?>"
-                class="video-js vjs-big-play-centered vjs-fluid vjs-16-9"
+                    class="video-js vjs-fill vjs-big-play-centered"
                     controls
                     playsinline
+                    data-setup='{"inactivityTimeout":0}'
                     poster="/img/beauty/audio_bg.jpg"
                     data-src="<?php echo $viewData['videoUrl']; ?>"
                     data-type="<?php echo $viewData['videoSourceType']; ?>"
                     id="my-player">
                 </video>
-            <div class="text-right mt-2 mr-1">
-                <a class="btn btn-default" href="<?php echo $viewData['videoUrl']; ?>&download=1">
+            </div>
+        </div>
+        <div class="col col-md-3 col-xs-4">
+            <a class="btn btn-default downloadbtn" href="<?php echo $viewData['videoUrl']; ?>&download=1">
                 <img src="/img/download.png" alt="download icon" width="20">
                 下载音乐
             </a>
         </div>
     </div>
-    </div>
-    <div class="col col-md-4 morevideos">
-        <hr class="visible-xs">
-        <div class="btn_autoplay text_dark">
-            自动播放：
-            <div class="btn-group" role="group">
-                <button class="btn btn-default btn-xs autoplay_disabled">关闭</button>
-                <button class="btn btn-primary btn-xs autoplay_enabled">开启</button>
-            </div>
-        </div>
-
-        <div
-            data-type="audio"
-            data-id="<?php echo $viewData['videoId']; ?>"
-            data-pid="<?php echo $viewData['cateId']; ?>"
-            data-cid="<?php echo $viewData['cacheParentDataId']; ?>"
-            data-page="<?php echo $viewData['page']; ?>"
-            data-page-size="<?php echo $viewData['pageSize']; ?>"
-            class="othervideos audiolist"><div class="ml-1">...</div></div>
-    </div>
 </div>
 
 <script type="text/template" id="template_video_item">
@@ -80,7 +82,6 @@
                 alt="">
             <span class="duration">00:00:00</span>
             <span class="title">{title}</span>
-            <!--img src="/img/video-play.svg" class="playbtn hide" alt="video play button"-->
         </a>
     </div>
 </script>

www/css/beauty.css

@@ -142,17 +142,23 @@ a:link{text-decoration:none}
 .video_previewer{display:none;position:fixed;right:4px;bottom:4px;width:200px;height:112px;overflow:hidden;z-index:1000}
 
 .othervideos{max-height:560px;overflow-y:auto;padding:4px}
-.btn_autoplay{margin:5px}
+.othervideos .im_item{height:11vw}
+.btn_autoplay{margin:5px 5px 10px 5px}
 
 .audio-list-item .im_img_title{background:none}
 .audio-list-item .im_img{width:86%;height:86%;margin:0 auto}
 .audio-list-item .title{margin-top:5px;color:#444;text-wrap:nowrap;white-space:nowrap;text-overflow:ellipsis}
 .audio-list-item .duration{bottom:17.5%;left:50%;width:50px;margin-left:-25px}
+.audiolist{max-width:600px;margin:0 auto;min-height:560px}
+.audiolist .othervideos{max-height:inherit}
 .audio-item{background:rgba(7, 7, 7, .1);padding:5px;border-radius:5px}
 .audio-item a{display:block}
 .audio-item img{float:left;width:60px;height:60px}
 .audio-item .title{display:block;margin-left:70px}
 .audio-item .duration{max-width:60px;overflow:hidden;margin-left:6px}
+.audioplayer{position:fixed;left:0;right:0;bottom:0;z-index:1000;height:120px;overflow:hidden;background-color:#000}
+.audioplayer .videoplayer{max-width:335px;height:120px;overflow:hidden;opacity:0.85}
+.audioplayer .downloadbtn{width:96px;margin:80px auto 0 auto}
 
 .mt-3{margin-top:3em}
 .mt-2{margin-top:2em}
@@ -172,7 +178,7 @@ a:link{text-decoration:none}
 .lampshow .text_dark{color:#808080}
 .lampshow .text_dark a, .lampshow .nav-tabs a{color:#f4f7fd}
 .lampshow .othervideos{background-color:inherit}
-.lampshow .btn-default{background-color:#CCC}
+.lampshow .btn-default{background-color:#EEE}
 .lampshow .audio-item{background-color:#333}
 .lampshow .audio-item .title{color:#999}
 .lampshow .audio-list-item .im_img{opacity:0.65}
@@ -195,6 +201,7 @@ a:link{text-decoration:none}
     .im_item {
         height: 45vw;
     }
+    .othervideos .im_item{height:34vw}
     .hidden-xs{display:none}
     .navbar-fixed-left,.navbar-fixed-left.closed,.versioninfo{position:static;width:100%}
     .navbar-fixed-left.closed li{display:block}