update 2.0.2

5MayRain · Aug 8, 2021 · 2a66fb1 · 2a66fb1
1 parent ca6fd76
commit 2a66fb1
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -4,8 +4,11 @@
 
 
 ## 预览
-![light](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/light.jpg)
-![dark](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/dark.jpg)
+![light](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/light.jpg)
+![dark](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/dark.jpg)
+![caption](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/caption.jpg)
+![thumbnails-dplayer](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/thumbnails-dplayer.jpg)
+![thumbnails-plyr](https://cdn.jsdelivr.net/gh/5MayRain/[email protected]/screenshot/thumbnails-plyr.jpg)
 
 nexmoe:  [demo.zgh.workers.dev/](https://demo.zgh.workers.dev/)
 
@@ -39,13 +42,22 @@ themeConfig				//主题配置
 
 ## 更新日志
 
+### v2.0.2
+- 支持缩略图
+- DPlayer 缩略图名必须为 `thumbnails.jpg` [预览](https://demo.zgh.workers.dev/1:/Video/Live/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun.flv?a=view)
+- Plyr 缩略图文件名必须为 `thumbnails.vtt` [预览](https://demo.zgh.workers.dev/1:/Video/Live/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun.mp4?a=view)
+- 缩略图要和视频处于同一个目录下
+- 缩略图生成 [Plyr](https://github.com/radiantmediaplayer/rmp-create-vtt-thumbnails) [DPlayer](https://github.com/MoePlayer/DPlayer-thumbnails)
+
 ### v2.0.1
-- 添加plyr播放器
+- 添加 Plyr 播放器
 - 支持播放 `hls` [预览](https://demo.zgh.workers.dev/1:/Video/Live/LiSA%20-%20Rising%20Hope/LiSA%20-%20Rising%20Hope.m3u8?a=view)
 - 支持播放 `flv` [预览](https://demo.zgh.workers.dev/1:/Video/Live/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun/%E5%8D%97%E6%9D%A1%E7%88%B1%E4%B9%83%20-%20Only%20My%20Railgun.flv?a=view)
 - 支持外挂字幕，字幕仅支持 `Webvtt` 格式 [预览](https://demo.zgh.workers.dev/1:/Video/Movie/%E9%A6%99%E6%B8%AF/%E6%91%A9%E7%99%BB%E4%BB%99%E5%B1%A5%E5%A5%87%E7%BC%98/%E6%91%A9%E7%99%BB%E4%BB%99%E5%B1%A5%E5%A5%87%E7%BC%98.mp4?a=view)
-- 字幕文件名必须和视频名相同，否则不可用
-- 视频封面的格式需为 `jpg` ，名字需和视频名相同
+- 字幕文件名必须和视频名相同，且处于同一个目录下
+- 视频封面的格式需为 `jpg` ，名字需和视频名相同，且处于同一个目录下
+- DPlayer 字幕不可用
+- 仅 `hls` 和 `flv` 使用 DPlayer 播放，其它使用 Plyr 播放 
 
 ### v2.0.0
 - 之前的版本不在适用

diff --git a/dist/index.js b/dist/index.js
@@ -1,7 +1,7 @@
 const authConfig = {
   "siteName": "GoIndex",  // 网站名称
   "siteIcon": "//cdn.jsdelivr.net/gh/5MayRain/[email protected]/images/favicon.ico", //网站图标
-  "version": "2.0.1", // 程序版本
+  "version": "2.0.2", // 程序版本
   "client_id": "",
   "client_secret": "",
   "refresh_token": "",  // 授权token
@@ -152,7 +152,7 @@ function html(current_drive_order = 0, model = {}) {
     window.ThemeConfig = JSON.parse('${JSON.stringify(themeConfig)}');
   </script>
   <script src="//cdn.jsdelivr.net/combine/gh/jquery/[email protected]/dist/jquery.min.js"></script>
-  <script src="${themeConfig.url}@${authConfig.version}/dist/themes/${themeConfig.theme}/app.js"></script>
+  <script src="${themeConfig.url}@${authConfig.version}/dist/themes/${themeConfig.theme}/app.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/js/mdui.min.js"></script>
 </head>
 <body>

diff --git a/dist/themes/dark/app.js b/dist/themes/dark/app.js
@@ -272,9 +272,7 @@ function requestSearch(params, resultCallback) {
 // 渲染文件列表
 function list(path) {
     var content = `
-  <div id="head_md" class="mdui-typo" style="display:none;padding: 20px 0;"></div>
-
-   <div class="mdui-row"> 
+    <div class="mdui-row"> 
     <ul class="mdui-list"> 
      <li class="mdui-list-item th"> 
       <div class="mdui-col-xs-12 mdui-col-sm-7">
@@ -824,6 +822,8 @@ function file_video(path) {
     const url = window.location.origin + path;
     var ext = url.split('.').pop().toLowerCase().toLowerCase();
     var urlPath = url.replace(`.${ext}`, "");
+    var fileName = urlPath.split('/').pop();
+    urlPath = urlPath.substring(0, urlPath.lastIndexOf('/') + 1);
     let player_items = [{
                 text: 'MXPlayer(Free)',
                 href: `intent:${url}#Intent;package=com.mxtech.videoplayer.ad;S.title=${path};end`,
@@ -859,8 +859,7 @@ function file_video(path) {
     var playerType;
 
     const plyrUI = `
-  <video id="plyr" class="mdui-video-fluid mdui-center" playsinline controls >
-    <source src="${url}" type="video/mp4" />
+  <video id="player" class="mdui-video-fluid mdui-center" playsinline controls >
   </video>`;
     const dpUI = `
   <div id="dplayer" class="mdui-video-fluid mdui-center" ></div>
@@ -873,7 +872,7 @@ function file_video(path) {
         playerUI = dpUI;
     } else if (ext == 'm3u8') {
         playerType = 'customHls';
-        playerUI = plyrUI;
+        playerUI = dpUI;
     } else if (ext == 'mpd') {
         playerType = 'customDash';
         playerUI = dpUI;
@@ -913,17 +912,25 @@ function file_video(path) {
     if (ext == 'm3u8') {
         const video = document.querySelector('video');
         const player = new Plyr(video, {
+            controls: ['play-large', 'restart', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'fullscreen'],
+            settings: ['captions', 'quality', 'speed', 'loop'],
             i18n: {
                 speed: '速度',
                 normal: '正常',
                 quality: '质量',
                 captions: '字幕',
                 disabled: '禁用',
             },
+            blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+            autoplay: true,
+            disableContextMenu: false,
+            loop: {
+                active: true
+            },
             captions: {
                 active: true,
                 update: true,
-                language: 'en'
+                language: 'auto'
             },
         });
 
@@ -940,15 +947,22 @@ function file_video(path) {
         }
         window.player = player;
     } else {
-        const player = new Plyr('#plyr', {
-            blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+        const player = new Plyr('#player', {
+            controls: ['play-large', 'restart', 'play', 'progress', 'current-time', 'duration', 'mute', 'volume', 'captions', 'settings', 'pip', 'fullscreen'],
+            settings: ['captions', 'quality', 'speed', 'loop'],
             i18n: {
                 speed: '速度',
                 normal: '正常',
                 quality: '质量',
                 captions: '字幕',
                 disabled: '禁用',
             },
+            blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
+            autoplay: true,
+            disableContextMenu: false,
+            loop: {
+                active: true
+            },
         });
         player.source = {
             type: 'video',
@@ -957,12 +971,16 @@ function file_video(path) {
                 type: 'video/' + playerType,
                 size: 1080,
             }, ],
-            poster: urlPath + '.jpg',
+            poster: urlPath + fileName + '.jpg',
+            previewThumbnails: {
+                enabled: true,
+                src: urlPath + 'thumbnails.vtt',
+            },
             tracks: [{
                 kind: 'captions',
                 label: 'default',
                 srclang: 'cn',
-                src: urlPath + '.vtt',
+                src: urlPath + fileName + '.vtt',
                 default: true,
             }, ],
         };
@@ -971,15 +989,16 @@ function file_video(path) {
 
     const dp = new DPlayer({
         container: document.getElementById('dplayer'),
-        autoplay: false,
+        autoplay: true,
         theme: '#b7daff',
-        loop: false,
+        loop: true,
         lang: 'zh-cn',
         screenshot: true,
         hotkey: true,
         preload: 'auto',
         video: {
-            pic: urlPath + '.jpg',
+            pic: urlPath + fileName + '.jpg',
+            thumbnails: urlPath + 'thumbnails.jpg',
             quality: [{
                 name: 'HD',
                 url: url,
@@ -1012,7 +1031,7 @@ function file_video(path) {
             defaultQuality: 0,
         },
         subtitle: {
-            url: urlPath + '.vtt',
+            url: urlPath + fileName + '.vtt',
             type: 'webvtt',
             fontSize: '25px',
             bottom: '10%',
@@ -1025,12 +1044,14 @@ function file_video(path) {
 // 文件展示 音频 |mp3|flac|m4a|wav|ogg|
 function file_audio(path) {
     var url = window.location.origin + path;
+    var ext = url.split('.').pop().toLowerCase().toLowerCase();
+    const plyrUI = `
+  <audio id="player" class="mdui-center" playsinline controls >
+  </audio>`;
     var content = `
 <div class="mdui-container-fluid">
   <br>
-  <audio class="mdui-center" preload controls>
-    <source src="${url}"">
-  </audio>
+  ` + plyrUI + `
   <br>
   <!-- 固定标签 -->
   <div class="mdui-textfield">
@@ -1045,6 +1066,32 @@ function file_audio(path) {
 <a href="${url}" class="mdui-fab mdui-fab-fixed mdui-ripple mdui-color-theme-accent"><i class="mdui-icon material-icons">file_download</i></a>
   `;
     $('#content').html(content);
+
+    var playerType;
+
+    if (ext == 'ogg') {
+        playerType = 'ogg';
+    } else {
+        playerType = 'mpeg';
+    }
+
+    const player = new Plyr('audio', {
+        i18n: {
+            speed: '速度',
+            normal: '正常',
+            quality: '质量',
+            captions: '字幕',
+            disabled: '禁用',
+        },
+    });
+    player.source = {
+        type: 'audio',
+        sources: [{
+            src: url,
+            type: 'audio/' + playerType,
+        }, ],
+    };
+    window.player = player;
 }
 
 // 文件展示 pdf  pdf