video play page done

themes/videoblog/controller/ListController.php

@@ -61,11 +61,20 @@ Class ListController extends Controller {
     protected function getBreadcrumbs($menus, $subcate) {
         $breads = [];
 
-        array_push($breads, [
+        if (!empty($subcate['directory'])) {
-            'id' => $subcate['id'],
+            array_push($breads, [
-            'name' => $subcate['directory'],
+                'id' => $subcate['id'],
-            'url' => $subcate['path'],
+                'name' => $subcate['directory'],
-        ]);
+                'url' => $subcate['path'],
+            ]);
+        }else {     //如果是文件
+            array_push($breads, [
+                'id' => $subcate['id'],
+                'name' => $subcate['filename'],
+                'url' => $subcate['path'],
+            ]);
+        }
+        
 
         $parent = !empty($menus[$subcate['pid']]) ? $menus[$subcate['pid']] : null;
         while($parent) {

themes/videoblog/controller/ViewController.php

@@ -9,15 +9,22 @@ require_once __DIR__ . '/ListController.php';
 Class ViewController extends ListController {
 
     public function actionIndex() {
+        $fileId = $this->get('id', '');
+        if (!empty($fileId)) {
+            $fileId = preg_replace('/\W/', '', $fileId);
+        }
+
         //获取数据
         $scanner = new DirScanner();
         $scanner->setWebRoot(FSC::$app['config']['content_directory']);
         $dirTree = $scanner->scan(__DIR__ . '/../../../www/' . FSC::$app['config']['content_directory'], 4);
         $scanResults = $scanner->getScanResults();
+        if (empty($scanResults[$fileId])) {
+            throw new Exception("404 - 文件编号 {$fileId} 找不到", 404);
+        }
 
         //获取目录
         $menus = $scanner->getMenus();
-        $cateId = $this->get('id', $menus[0]['id']);
 
         $titles = [];
         $htmlReadme = '';
@@ -32,12 +39,12 @@ Class ViewController extends ListController {
         }
 
         //获取目录面包屑
-        $subcate = $scanResults[$cateId];
+        $video = $scanResults[$fileId];
-        $breadcrumbs = $this->getBreadcrumbs($menus, $subcate);
+        $breadcrumbs = $this->getBreadcrumbs($scanResults, $video);
 
         //获取当前目录下的readme
         $htmlCateReadme = '';
-        $cateReadmeFile = $scanner->getDefaultReadme($cateId);
+        $cateReadmeFile = $scanner->getDefaultReadme($fileId);
         if (!empty($cateReadmeFile)) {
             $Parsedown = new Parsedown();
             $content = file_get_contents($cateReadmeFile['realpath']);
@@ -46,14 +53,14 @@ Class ViewController extends ListController {
         }
 
         $pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
-        if (!empty($subcate)) {
+        if (!empty($video)) {
-            $pageTitle = "{$subcate['directory']}的照片，来自{$pageTitle}";
+            $pageTitle = "{$video['directory']}，来自{$pageTitle}";
-            if (!empty($subcate['title'])) {
+            if (!empty($video['title'])) {
-                $pageTitle = $subcate['title'];
+                $pageTitle = $video['title'];
             }
         }
-        $viewName = '//site/index';     //共享视图
+        $viewName = 'index';
-        $params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme');
+        $params = compact('fileId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme', 'video');
         return $this->render($viewName, $params, $pageTitle);
     }
 

themes/videoblog/views/site/index.php

@@ -61,10 +61,10 @@ eof;
 		}
 
 		if (!empty($category['directories'])) {		//两级目录支持
-			//如果已经是二级目录了，则当三级目录为视频目录，打开播放网页
 			$playBtnCls = '';
 			$playBtn = '';
-			if (!empty($selectedId)) {
+			//如果已经是二级目录了，则当三级目录为视频目录，打开播放网页
+			if (!empty($selectedId) && count($breadcrumbs) >= 2) {
 				$playBtnCls = ' video-js vjs-big-play-centered';
 				$playBtn = <<<eof
 			<button class="vjs-big-play-button" type="button" title="Play Video" aria-disabled="false" style="display:none">
@@ -76,8 +76,10 @@ eof;
 			
 
 			foreach($category['directories'] as $dir) {
+				$playUrl = !empty($playBtn) ? "/view/?id={$dir['id']}" : $dir['path'];
+				$openInBlank = !empty($playBtn) ? ' target="_blank"' : '';
 				echo <<<eof
-			<a href="{$dir['path']}" class="img-item">
+			<a href="{$playUrl}" class="img-item"{$openInBlank}>
 				<span class="img-con{$playBtnCls}">
 eof;
 
@@ -135,7 +137,7 @@ eof;
 
 				$title = !empty($category['title']) ? $category['title'] : $file['filename'];
 				echo <<<eof
-	<a href="{$file['path']}" class="img-item img-preview" target="_blank">
+	<a href="/view/?id={$file['id']}" class="img-item img-preview" target="_blank">
 		<span class="img-con video-js vjs-big-play-centered">
 			<img data-src="{$snapshot}" class="lazyload" alt="snapshot of {$title}">
 			<span class="duration">{$duration}</span>

themes/videoblog/views/view/index.php

@@ -0,0 +1,37 @@
+<?php
+$videoUrl = '';
+$poster = '';
+$imgExts = ['jpg', 'jpeg', 'png', 'gif'];
+$videoExts = ['mp4', 'm3u8'];
+
+if (!empty($viewData['video'])) {
+    $video = $viewData['video'];
+    if (!empty($video['directory'])) {      //如果是目录，则找出里面第一个mp4作为播放地址
+        $poster = $video['snapshot'];
+        if (!empty($video['files'])) {
+            foreach ($video['files'] as $id => $item) {
+                if (empty($poster) && in_array($item['extension'], $imgExts)) {
+                    $poster = $item['path'];
+                }
+
+                if (in_array($item['extension'], $videoExts)) {
+                    $videoUrl = $item['path'];
+                    break;
+                }
+            }
+        }
+        
+    }else {
+        $videoUrl = $video['path'];
+    }
+}
+?><div class="video">
+    <video class="video-js vjs-big-play-centered vjs-fluid vjs-16-9"
+        controls
+        playsinline
+        data-setup='{"autoplay":"muted"}'
+        poster="<?php echo !empty($viewData['video']['snapshot']) ? $viewData['video']['snapshot'] : ''; ?>" 
+        id="myvideo">
+        <source src="<?php echo $videoUrl; ?>" type="video/mp4">
+    </video>
+</div>