add mp3 file support and add autoplay mp3 for theme GoogleImage

lib/DirScanner.php

@@ -46,6 +46,7 @@ Class DirScanner {
         'webp',    //图片
         'gif',     //图片
         'ico',     //图标
+        'mp3',     //音乐
         'mp4',     //视频
         'ts',      //视频
         'm3u8',    //视频
@@ -60,9 +61,10 @@ Class DirScanner {
         'webp' => 512000,         //图片
         'gif' => 512000,          //图片
         'ico' => 51200,           //图标
-        'mp4' => 104857600,     //视频
+        'mp3' => 10485760,      //音乐，10M
-        'ts' => 10485760,       //视频
+        'mp4' => 104857600,     //视频，100M
-        'm3u8' => 10485760,     //视频
+        'ts' => 10485760,       //视频，10M
+        'm3u8' => 10485760,     //视频，10M
     );
     protected $securedFileExtensions = array(            //开启Nginx防盗链的文件类型
         'jpg',     //图片
@@ -71,6 +73,7 @@ Class DirScanner {
         'webp',    //图片
         'gif',     //图片
         'ico',     //图标
+        'mp3',     //音乐
         'mp4',     //视频
         'ts',      //视频
         'm3u8',    //视频
@@ -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 {
 
     //获取指定目录下名称为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;
                         }

themes/googleimage/controller/ListController.php

@@ -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 {
             }
         }
         $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);
     }
 

themes/googleimage/controller/SiteController.php

@@ -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 {
             $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 {
             $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);
     }
 

themes/googleimage/views/site/index.php

@@ -114,3 +114,56 @@ 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 } ?>

www/css/googleimage.css

@@ -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) {