Browse Source

add mp3 file support and add autoplay mp3 for theme GoogleImage

master
filesite 2 years ago
parent
commit
61990f40dc
  1. 29
      lib/DirScanner.php
  2. 12
      themes/googleimage/controller/ListController.php
  3. 13
      themes/googleimage/controller/SiteController.php
  4. 199
      themes/googleimage/views/site/index.php
  5. 4
      www/css/googleimage.css

29
lib/DirScanner.php

@ -46,6 +46,7 @@ Class DirScanner { @@ -46,6 +46,7 @@ Class DirScanner {
'webp', //图片
'gif', //图片
'ico', //图标
'mp3', //音乐
'mp4', //视频
'ts', //视频
'm3u8', //视频
@ -60,17 +61,19 @@ Class DirScanner { @@ -60,17 +61,19 @@ Class DirScanner {
'webp' => 512000, //图片
'gif' => 512000, //图片
'ico' => 51200, //图标
'mp4' => 104857600, //视频
'ts' => 10485760, //视频
'm3u8' => 10485760, //视频
'mp3' => 10485760, //音乐,10M
'mp4' => 104857600, //视频,100M
'ts' => 10485760, //视频,10M
'm3u8' => 10485760, //视频,10M
);
protected $securedFileExtensions = array( //开启Nginx防盗链的文件类型
'jpg', //图片
'jpeg', //图片
'jpeg', //图片
'png', //图片
'webp', //图片
'webp', //图片
'gif', //图片
'ico', //图标
'mp3', //音乐
'mp4', //视频
'ts', //视频
'm3u8', //视频
@ -368,6 +371,7 @@ Class DirScanner { @@ -368,6 +371,7 @@ Class DirScanner {
'webp' => "{$webRoot}{$directory}{$filename}.{$extension}",
'gif' => "{$webRoot}{$directory}{$filename}.{$extension}",
'ico' => "{$webRoot}{$directory}{$filename}.{$extension}",
'mp3' => "{$webRoot}{$directory}{$filename}.{$extension}",
'mp4' => "{$webRoot}{$directory}{$filename}.{$extension}",
'ts' => "{$webRoot}{$directory}{$filename}.{$extension}",
);
@ -719,26 +723,31 @@ Class DirScanner { @@ -719,26 +723,31 @@ Class DirScanner {
//获取指定目录下名称为README.md的文件
public function getDefaultReadme($dirid = '') {
return $this->getDefaultFile('md', $dirid);
}
//根据扩展名在根目录下或者指定目录下获取一个文件
public function getDefaultFile($extension, $dirid = '') {
$readme = null;
$md = null;
if (empty($dirid) && !empty($this->tree)) {
foreach($this->tree as $id => $file) {
if (!empty($file['extension']) && $file['extension'] == 'md') {
if (!empty($file['extension']) && $file['extension'] == $extension) {
$md = $file;
if (strtoupper($file['filename']) == 'README') {
if ($extension == 'md' && strtoupper($file['filename']) == 'README') {
$readme = $file;
break;
}
}
}
}else if (!empty($this->scanResults)) {
}else if (!empty($dirid) && !empty($this->scanResults)) {
$directory = $this->scanResults[$dirid];
if (!empty($directory) && !empty($directory['files'])) {
foreach($directory['files'] as $id => $file) {
if (!empty($file['extension']) && $file['extension'] == 'md') {
if (!empty($file['extension']) && $file['extension'] == $extension) {
if (empty($md)) {$md = $file;} //取第一个md文件
if (strtoupper($file['filename']) == 'README') {
if ($extension == 'md' && strtoupper($file['filename']) == 'README') {
$readme = $file;
break;
}

12
themes/googleimage/controller/ListController.php

@ -58,6 +58,13 @@ Class ListController extends Controller { @@ -58,6 +58,13 @@ Class ListController extends Controller {
$htmlCateReadme = $scanner->fixMDUrls($cateReadmeFile['realpath'], $htmlCateReadme);
}
//获取默认mp3文件
$rootCateId = $this->get('id', '');
$mp3File = $scanner->getDefaultFile('mp3', $rootCateId);
if (empty($mp3File)) {
$mp3File = $scanner->getDefaultFile('mp3');
}
$pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
if (!empty($subcate)) {
$pageTitle = "{$subcate['directory']}的照片,来自{$pageTitle}";
@ -66,7 +73,10 @@ Class ListController extends Controller { @@ -66,7 +73,10 @@ Class ListController extends Controller {
}
}
$viewName = '//site/index'; //共享视图
$params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme');
$params = compact(
'cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'breadcrumbs', 'htmlCateReadme',
'mp3File'
);
return $this->render($viewName, $params, $pageTitle);
}

13
themes/googleimage/controller/SiteController.php

@ -18,7 +18,6 @@ Class SiteController extends Controller { @@ -18,7 +18,6 @@ Class SiteController extends Controller {
$scanner->setWebRoot(FSC::$app['config']['content_directory']);
$dirTree = $scanner->scan(__DIR__ . '/../../../www/' . FSC::$app['config']['content_directory'], 4);
$scanResults = $scanner->getScanResults();
//获取目录
$menus = $scanner->getMenus();
@ -56,6 +55,13 @@ Class SiteController extends Controller { @@ -56,6 +55,13 @@ Class SiteController extends Controller {
$htmlCateReadme = $scanner->fixMDUrls($cateReadmeFile['realpath'], $htmlCateReadme);
}
//获取默认mp3文件
$rootCateId = $this->get('id', '');
$mp3File = $scanner->getDefaultFile('mp3', $rootCateId);
if (empty($mp3File)) {
$mp3File = $scanner->getDefaultFile('mp3');
}
$pageTitle = !empty($titles) ? $titles[0]['name'] : "FileSite.io - 无数据库、基于文件和目录的Markdown文档、网址导航、图书、图片、视频网站PHP开源系统";
if (!empty($readmeFile['title'])) {
$pageTitle = $readmeFile['title'];
@ -64,7 +70,10 @@ Class SiteController extends Controller { @@ -64,7 +70,10 @@ Class SiteController extends Controller {
$pageTitle = "{$subcate['directory']}照片,来自{$pageTitle}";
}
$viewName = 'index';
$params = compact('cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'htmlCateReadme');
$params = compact(
'cateId', 'dirTree', 'scanResults', 'menus', 'htmlReadme', 'htmlCateReadme',
'mp3File'
);
return $this->render($viewName, $params, $pageTitle);
}

199
themes/googleimage/views/site/index.php

@ -2,13 +2,13 @@ @@ -2,13 +2,13 @@
<?php
$selectedId = $viewData['cateId'];
$breadcrumbs = !empty($viewData['breadcrumbs']) ? $viewData['breadcrumbs'] : [];
if (!empty($viewData['menus'])) { //只显示第一级目录
foreach($viewData['menus'] as $index => $item) {
$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'selected' : '';
echo <<<eof
<a href="/?id={$item['id']}" class="{$selected}">{$item['directory']}</a>
if (!empty($viewData['menus'])) { //只显示第一级目录
foreach($viewData['menus'] as $index => $item) {
$selected = $item['id'] == $selectedId || (!empty($breadcrumbs) && $item['id'] == $breadcrumbs[0]['id']) ? 'selected' : '';
echo <<<eof
<a href="/?id={$item['id']}" class="{$selected}">{$item['directory']}</a>
eof;
}
}
}
?>
</div>
@ -17,100 +17,153 @@ eof; @@ -17,100 +17,153 @@ eof;
<?php
if (!empty($breadcrumbs)) {
echo <<<eof
<div class="breadcrumbs">
<small>当前位置:</small>
echo <<<eof
<div class="breadcrumbs">
<small>当前位置:</small>
eof;
foreach($breadcrumbs as $bread) {
if ($bread['id'] != $selectedId) {
echo <<<eof
<a href="{$bread['url']}">{$bread['name']}</a> /
foreach($breadcrumbs as $bread) {
if ($bread['id'] != $selectedId) {
echo <<<eof
<a href="{$bread['url']}">{$bread['name']}</a> /
eof;
}else {
echo <<<eof
<strong>{$bread['name']}</strong>
}else {
echo <<<eof
<strong>{$bread['name']}</strong>
eof;
}
}
}
}
echo <<<eof
</div>
echo <<<eof
</div>
eof;
}
?>
<div class="content">
<?php
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
<?php
$imgExts = !empty(FSC::$app['config']['supportedImageExts']) ? FSC::$app['config']['supportedImageExts'] : array('jpg', 'jpeg', 'png', 'webp', 'gif');
$category = !empty($viewData['scanResults'][$selectedId]) ? $viewData['scanResults'][$selectedId] : [];
//当前目录的描述介绍
if (!empty($category['description'])) {
echo <<<eof
<p class="catedesc">{$category['description']}</p>
//当前目录的描述介绍
if (!empty($category['description'])) {
echo <<<eof
<p class="catedesc">{$category['description']}</p>
eof;
}
}
//当前目录的readme详细介绍
if (!empty($viewData['htmlCateReadme'])) {
echo <<<eof
<div class="cateinfo markdown-body">{$viewData['htmlCateReadme']}</div>
//当前目录的readme详细介绍
if (!empty($viewData['htmlCateReadme'])) {
echo <<<eof
<div class="cateinfo markdown-body">{$viewData['htmlCateReadme']}</div>
eof;
}
}
if (!empty($category['directories'])) { //两级目录支持
foreach($category['directories'] as $dir) {
echo <<<eof
<a href="{$dir['path']}" class="img-item">
if (!empty($category['directories'])) { //两级目录支持
foreach($category['directories'] as $dir) {
echo <<<eof
<a href="{$dir['path']}" class="img-item">
eof;
if (!empty($dir['snapshot'])) {
echo <<<eof
<img data-src="{$dir['snapshot']}" class="lazyload" alt="{$dir['directory']}">
if (!empty($dir['snapshot'])) {
echo <<<eof
<img data-src="{$dir['snapshot']}" class="lazyload" alt="{$dir['directory']}">
eof;
}else if (!empty($dir['files'])) {
$first_img = array_shift($dir['files']);
if (!in_array($first_img['extension'], $imgExts)) {
foreach($dir['files'] as $file) {
if (in_array($file['extension'], $imgExts)) {
$first_img = $file;
break;
}
}
}
}else if (!empty($dir['files'])) {
$first_img = array_shift($dir['files']);
if (!in_array($first_img['extension'], $imgExts)) {
foreach($dir['files'] as $file) {
if (in_array($file['extension'], $imgExts)) {
$first_img = $file;
break;
}
}
}
if (in_array($first_img['extension'], $imgExts)) {
echo <<<eof
<img data-src="{$first_img['path']}" class="lazyload" alt="{$first_img['filename']}">
if (in_array($first_img['extension'], $imgExts)) {
echo <<<eof
<img data-src="{$first_img['path']}" class="lazyload" alt="{$first_img['filename']}">
eof;
}else {
echo <<<eof
<img src="/img/default.png" alt="default image">
eof;
}
}
}
}
$title = !empty($dir['title']) ? $dir['title'] : $dir['directory'];
echo <<<eof
<strong>{$title}</strong>
</a>
$title = !empty($dir['title']) ? $dir['title'] : $dir['directory'];
echo <<<eof
<strong>{$title}</strong>
</a>
eof;
}
}
}
}
if (!empty($category['files'])) { //一级目录支持
foreach($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;}
if (!empty($category['files'])) { //一级目录支持
foreach($category['files'] as $file) {
if (!in_array($file['extension'], $imgExts)) {continue;}
$title = !empty($file['title']) ? $file['title'] : $file['filename'];
echo <<<eof
<a href="{$file['path']}" class="img-item img-preview" target="_blank">
<img data-src="{$file['path']}" class="lazyload" alt="{$file['filename']}">
<strong>{$title}</strong>
</a>
$title = !empty($file['title']) ? $file['title'] : $file['filename'];
echo <<<eof
<a href="{$file['path']}" class="img-item img-preview" target="_blank">
<img data-src="{$file['path']}" class="lazyload" alt="{$file['filename']}">
<strong>{$title}</strong>
</a>
eof;
}
}
?>
}
}
?>
</div>
<?php if (!empty($viewData['mp3File'])) { ?>
<audio autoplay controls loop preload="auto" id="music" class="hide">
<source src="<?=$viewData['mp3File']['path']?>" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="mbtns" onclick="playMusic()">
<div class="mbtn playing hide" id="btn_playing">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cassette-fill" viewBox="0 0 16 16">
<path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h.191l1.862-3.724A.5.5 0 0 1 4 10h8a.5.5 0 0 1 .447.276L14.31 14h.191a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13ZM4 7a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm8 0a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM6 6a1 1 0 0 1 1-1h2a1 1 0 0 1 0 2H7a1 1 0 0 1-1-1Z"/>
<path d="m13.191 14-1.5-3H4.309l-1.5 3h10.382Z"/>
</svg>
</div>
<div class="mbtn paused" id="btn_paused">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cassette" viewBox="0 0 16 16">
<path d="M4 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm9-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7 6a1 1 0 0 0 0 2h2a1 1 0 1 0 0-2H7Z"/>
<path d="M1.5 2A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 14.5 2h-13ZM1 3.5a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-.691l-1.362-2.724A.5.5 0 0 0 12 10H4a.5.5 0 0 0-.447.276L2.19 13H1.5a.5.5 0 0 1-.5-.5v-9ZM11.691 11l1 2H3.309l1-2h7.382Z"/>
</svg>
</div>
</div>
<script>
function playMusic() {
var mp3 = document.getElementById('music');
var playingBtn = document.getElementById('btn_playing'),
pausedBtn = document.getElementById('btn_paused');
try {
if (mp3.paused) {
mp3.play();
playingBtn.className = playingBtn.className.replace(' hide', '');
pausedBtn.className = pausedBtn.className.replace(' hide', '') + ' hide';
}else {
mp3.pause();
pausedBtn.className = pausedBtn.className.replace(' hide', '');
playingBtn.className = playingBtn.className.replace(' hide', '') + ' hide';
}
}catch(e){}
}
function detectMusicAutoPlaying() {
var mp3 = document.getElementById('music');
var playingBtn = document.getElementById('btn_playing'),
pausedBtn = document.getElementById('btn_paused');
try {
if (!mp3.paused) {
playingBtn.className = pausedBtn.className.replace(' hide', '');
pausedBtn.className = playingBtn.className.replace(' hide', '') + ' hide';
if (typeof(timer) != 'undefined') {clearInterval(timer);}
}
}catch(e){}
}
var timer = setInterval(detectMusicAutoPlaying, 50);
</script>
<?php } ?>

4
www/css/googleimage.css

@ -26,6 +26,10 @@ a{color: #aaadb2;text-decoration: none} @@ -26,6 +26,10 @@ a{color: #aaadb2;text-decoration: none}
.img-item strong{display: block;color: #bdc1c6;font-family: Roboto,Arial,sans-serif;font-size: 12px;letter-spacing: .2px;line-height: 20px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.catedesc{padding: 0 10px}
.cateinfo{margin-bottom: 1em;padding: 5px 10px 10px 10px}
.hide{display:none}
.mbtns{position:fixed;width:30px;height:30px;z-index:100;right:15px;top:102px;border-radius:5px;cursor:pointer}
.mbtn{width:100%;height:100%;color:#FFF}
.mbtn svg{width:100%;height:100%}
/* for mobile */
@media only screen and (max-width: 767px) {

Loading…
Cancel
Save