show more videos in player page

themes/beauty/controller/ListController.php

@@ -32,8 +32,10 @@ Class ListController extends Controller {
         }
 
         $currentDir = $cachedParentData[$cateId];
-        if (empty($currentDir)) {
+        if (strpos($cacheParentDataId, $cateId) === false && empty($currentDir)) {
             throw new Exception("缓存数据中找不到当前目录，请返回上一页重新进入！", 404);
+        }else if (strpos($cacheParentDataId, $cateId) !== false) {
+            $currentDir = $cachedParentData;
         }
 
         $scanner->setWebRoot($this->getCurrentWebroot($currentDir['realpath']));

themes/beauty/controller/SiteController.php

@@ -427,8 +427,13 @@ Class SiteController extends Controller {
     public function actionPlayer() {
         $videoUrl = $this->get('url', '');
         $videoId = $this->get('id', '');
-        if (empty($videoUrl) || empty($videoId)) {
-            throw new Exception("缺少视频地址url或id参数！", 403);
+
+        $cateId = $this->get('pid', '');
+        $cacheParentDataId = $this->get('cid', '');
+        $page = $this->get('page', 1);
+
+        if (empty($videoUrl) || empty($videoId) || empty($cateId) || empty($cacheParentDataId)) {
+            throw new Exception("缺少参数！", 403);
         }
 
         $arr = parse_url($videoUrl);
@@ -450,7 +455,9 @@ Class SiteController extends Controller {
         $this->layout = 'player';
         $viewName = 'player';
         $params = compact(
-            'videoUrl', 'videoId', 'videoFilename', 'copyright'
+            'videoUrl', 'videoId', 'videoFilename',
+            'cateId', 'cacheParentDataId', 'page',
+            'copyright'
         );
         return $this->render($viewName, $params, $pageTitle);
     }

themes/beauty/views/site/index.php

@@ -320,7 +320,7 @@ eof;
                     $videoUrl = urlencode($file['path']);
                     echo <<<eof
 <div class="im_item bor_radius col-xs-6 col-sm-4 col-md-3 col-lg-2">
-    <a href="/site/player?url={$videoUrl}&id={$file['id']}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
+    <a href="/site/player?id={$file['id']}&pid={$file['pid']}&cid={$viewData['cacheDataId']}&url={$videoUrl}&page={$viewData['page']}" target="_blank" class="bor_radius" title="{$title} - {$file['filename']}">
         <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{$file['id']}"
             data-video-id="{$file['id']}"
             data-video-url="{$file['path']}"

themes/beauty/views/site/player.php

@@ -26,25 +26,65 @@
     </div><!-- /.container-fluid -->
 </nav>
 
-<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"
-        controls
-        playsinline
-        poster="" 
-        id="my-player">
-        <source src="<?php echo $viewData['videoUrl']; ?>" type="video/mp4">
-    </video>
-    <div class="text-right mt-2 mr-1">
-        <button class="btn btn-default mr-1 btn-snapshot">
-            <img src="/img/beauty/video_dir.png" alt="download icon" width="20">
-            生成封面图
-        </button>
-        <a class="btn btn-default" href="<?php echo $viewData['videoUrl']; ?>&download=1">
-            <img src="/img/download.png" alt="download icon" width="20">
-            下载视频
-        </a>
+
+<div class="row">
+    <div class="col col-md-9">
+        <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"
+                controls
+                playsinline
+                poster="" 
+                id="my-player">
+                <source src="<?php echo $viewData['videoUrl']; ?>" type="video/mp4">
+            </video>
+            <div class="text-right mt-2 mr-1">
+                <button class="btn btn-default mr-1 btn-snapshot">
+                    <img src="/img/beauty/video_dir.png" alt="download icon" width="20">
+                    生成封面图
+                </button>
+                <a class="btn btn-default" 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-3 morevideos">
+        <hr class="visible-xs">
+        <div class="btn_autoplay">
+            自动播放
+            <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-id="<?php echo $viewData['videoId']; ?>"
+            data-pid="<?php echo $viewData['cateId']; ?>"
+            data-cid="<?php echo $viewData['cacheParentDataId']; ?>"
+            data-page="<?php echo $viewData['page']; ?>"
+            class="othervideos">其它视频</div>
     </div>
 </div>
+
+<script type="text/template" id="template_video_item">
+    <div class="im_item col-xs-6 col-md-12">
+        <a href="{videoUrl}" class="bor_radius" title="{title}">
+            <img src="/img/beauty/video_snap.jpg" class="bor_radius im_img video-poster" id="poster_{videoId}"
+                data-video-id="{videoId}"
+                data-video-url="{videoPath}"
+                alt="">
+            <div class="im_img_title">
+                <span class="right-bottom">
+                    {title}
+                </span>
+            </div>
+            <img src="/img/video-play.svg" class="playbtn hide" alt="video play button">
+            <span class="duration">00:00:00</span>
+        </a>
+    </div>
+</script>

www/css/beauty.css

@@ -25,7 +25,7 @@ a:visited{text-decoration:none}
 a:link{text-decoration:none}
 
 .lampshow{background-color:#222}
-.main_style{padding-top:64px}
+.main_style{padding-top:64px;overflow:hidden}
 .navbar-default {
     background-color:#FFF;
 }

www/js/beauty.js

@@ -603,6 +603,79 @@ if ($('#my-player').length > 0 && typeof(videojs) != 'undefined') {
     });
 }
 
+//加载更多视频
+if ($('.othervideos').length > 0) {
+    var videoId = $('.othervideos').attr('data-id'),
+        cateId = $('.othervideos').attr('data-pid'),
+        cacheId = $('.othervideos').attr('data-cid'),
+        currentPage = $('.othervideos').attr('data-page');
+    var api = '/list/',
+        params = {
+            id: cateId,
+            cid: cacheId,
+            show: 'video',
+            dataType: 'video',
+            page: currentPage
+        };
+
+    var getVideoUrl = function(videoId, videoPath) {
+        var url = new URL(location.href);
+        var api = url.origin + url.pathname;
+
+        var newParas = [];
+        for (var key of url.searchParams.keys()) {
+            if (key != 'id' && key != 'url' && key != 'other') {
+                newParas.push(key + '=' + url.searchParams.get(key));
+            }
+        }
+        newParas.push('id=' + videoId);
+        newParas.push('url=' + encodeURIComponent(videoPath));
+
+        return api + '?other=1&' + newParas.join('&');
+    };
+
+    var renderVideos = function(ignoreId, videos) {
+        var template = $('#template_video_item').html(),
+            html = '', tmp = '';
+
+        for (var index in videos) {
+            if (videos[index].id == ignoreId) {continue;}
+            tmp = template.replace('{videoUrl}', getVideoUrl(videos[index].id, videos[index].path));
+            tmp = tmp.replaceAll('{title}', videos[index].filename);
+            tmp = tmp.replaceAll('{videoId}', videos[index].id);
+            tmp = tmp.replaceAll('{videoPath}', videos[index].path);
+
+            html += tmp;
+        }
+
+        return html;
+    };
+
+    $.ajax({
+        url: api,
+        method: 'GET',
+        dataType: 'json',
+        data: params
+    }).done(function(data) {
+        //console.log('more videos', data);
+        if (typeof(data.videos) != 'undefined' && data.videos.length > 0) {
+            $('.othervideos').html(renderVideos(videoId, data.videos));
+            setTimeout(function() {
+                $('.othervideos .video-poster').each(function(index, el) {
+                    var videoId = $(el).attr('data-video-id'),
+                        videoUrl = $(el).attr('data-video-url');
+                    getVideoMetaAndShowIt(videoId, videoUrl);
+                });
+            }, 50);
+        }else {
+            //_noMoreData = true;
+            console.warn('获取更多视频数据出错啦', data.msg);
+        }
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+        console.error('获取更多视频数据失败，错误信息：' + errorThrown);
+    });
+}
+
 
 //目录收拢、展开
 $('.btn-dir-ext').click(function(evt) {