v0.4.4 release, add keypress handle

FAQ.md

@@ -29,6 +29,7 @@
 3）图片控制
 * [怎么设置自动播放时每张照片停留时间？](#怎么设置自动播放时每张照片停留时间)
 * [在局域网内使用，能否所有图片使用原图而不是缩略图？](#在局域网内使用-能否所有图片使用原图而不是缩略图)
+* [怎么用键盘控制浏览图片以及自动播放？](#怎么用键盘控制浏览图片以及自动播放)
 
 
 4）外网使用相关
@@ -279,6 +280,16 @@ sortOrderOfFiles则设定排序方式，asc顺序，desc倒序。
 ```
 
 
+## 怎么用键盘控制浏览图片以及自动播放？
+
+从v0.4.4版本开始，PC下支持键盘控制，以下是快捷键：
+* 上下左右方向键控制焦点元素
+* Enter回车键进入对应目录，或者开始浏览图片
+* p - 在图片浏览模式下按p键开始自动播放
+* s - 在自动播放情况下按s键停止自动播放
+* Esc退出键，退出图片浏览
+
+
 ## 相册部署到外网了，点击图片打开有点慢怎么办？
 
 machete家庭相册默认为局域网使用，配置**enableSmallImageForWan**开启查看大图显示缩略图是关闭的，

conf/app.php

@@ -3,8 +3,8 @@
  * Config
  */
 $configs = array(
-    'version' => '0.4.3',
+    'version' => '0.4.4',
-    'releaseDate' => '2025-01-04',
+    'releaseDate' => '2025-01-14',
     'showVersion' => false,     //默认不显示版本号和发布日期
 
     'default_timezone' => 'Asia/Hong_Kong',      //timezone, check more: https://www.php.net/manual/en/timezones.asia.php

www/js/beauty.js

@@ -5,6 +5,71 @@
 //关闭videojs的ga统计
 window.HELP_IMPROVE_VIDEOJS = false;
 
+//fancybox自定义显示原图按钮
+var customToolbar_show1to1 = {
+    tpl: $('#btn_show1to1_tmp').html(),
+    click: function() {
+        var fancybox = this.instance;
+        var slide = fancybox.getSlide();
+
+        if (slide.src == slide.downloadSrc) {
+            slide.panzoom.toggleZoom();
+            return false;
+        }
+
+        fancybox.showLoading(slide);
+        //如果没有自动显示loading图标，主动加上
+        if ($(slide.el).find('.fancybox-spinner').length == 0) {
+            var spinner = '<div class="f-spinner fancybox-spinner"><svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"></circle><circle cx="25" cy="25" r="20"></circle></svg></div>';
+            $(spinner).insertBefore(slide.contentEl);
+        }
+
+        $(slide.imageEl).one('load', function() {
+            //console.log('image loaded');
+            fancybox.hideLoading(slide);
+            $(slide.el).find('.fancybox-spinner').remove();
+            slide.panzoom.toggleZoom();
+        });
+
+        slide.src = slide.downloadSrc;
+        slide.imageEl.src = slide.downloadSrc;
+    }
+};
+var fancyboxToolbar = {
+    items: {'show1to1': customToolbar_show1to1},
+    display: {
+        left: ["infobar"],
+        middle: [
+            "zoomIn",
+            "zoomOut",
+            "show1to1",
+            "rotateCCW",
+            "rotateCW",
+            "flipX",
+            "flipY",
+            "fitX",
+            "fitY",
+            "reset"
+        ],
+        right: ["slideshow", "fullscreen", "thumbs", "download", "close"],
+    },
+};
+if ($(window).width() < 640) {  //小屏幕只显示部分按钮
+    fancyboxToolbar = {
+        items: {'show1to1': customToolbar_show1to1},
+        display: {
+            left: ["infobar"],
+            middle: [
+                "zoomIn",
+                "zoomOut",
+                "show1to1",
+                "rotateCW"
+            ],
+            right: ["download", "close"]
+        }
+    };
+}
+
 if ($('#image_site').get(0)) {
 
     //获取下一页图片/视频json数据
@@ -85,72 +150,7 @@ if ($('#image_site').get(0)) {
         }, 1000);
     };
 
-    //自定义显示原图按钮
-    var customToolbar_show1to1 = {
-        tpl: $('#btn_show1to1_tmp').html(),
-        click: function() {
-            var fancybox = this.instance;
-            var slide = fancybox.getSlide();
-
-            if (slide.src == slide.downloadSrc) {
-                slide.panzoom.toggleZoom();
-                return false;
-            }
-
-            fancybox.showLoading(slide);
-            //如果没有自动显示loading图标，主动加上
-            if ($(slide.el).find('.fancybox-spinner').length == 0) {
-                var spinner = '<div class="f-spinner fancybox-spinner"><svg viewBox="0 0 50 50"><circle cx="25" cy="25" r="20"></circle><circle cx="25" cy="25" r="20"></circle></svg></div>';
-                $(spinner).insertBefore(slide.contentEl);
-            }
-
-            $(slide.imageEl).one('load', function() {
-                console.log('image loaded');
-                fancybox.hideLoading(slide);
-                $(slide.el).find('.fancybox-spinner').remove();
-                slide.panzoom.toggleZoom();
-            });
-
-            slide.src = slide.downloadSrc;
-            slide.imageEl.src = slide.downloadSrc;
-        }
-    };
-
     // 图片浏览
-    var fancyboxToolbar = {
-        items: {'show1to1': customToolbar_show1to1},
-        display: {
-            left: ["infobar"],
-            middle: [
-                "zoomIn",
-                "zoomOut",
-                "show1to1",
-                "rotateCCW",
-                "rotateCW",
-                "flipX",
-                "flipY",
-                "fitX",
-                "fitY",
-                "reset"
-            ],
-            right: ["slideshow", "fullscreen", "thumbs", "download", "close"],
-        },
-    };
-    if ($(window).width() < 640) {  //小屏幕只显示部分按钮
-        fancyboxToolbar = {
-            items: {'show1to1': customToolbar_show1to1},
-            display: {
-                left: ["infobar"],
-                middle: [
-                    "zoomIn",
-                    "zoomOut",
-                    "show1to1",
-                    "rotateCW"
-                ],
-                right: ["download", "close"]
-            }
-        };
-    }
     Fancybox.bind('[data-fancybox]', {
         Toolbar: fancyboxToolbar,
         loop: true,
@@ -168,12 +168,6 @@ if ($('#image_site').get(0)) {
             },
             endSlideshow: function(fancybox) {
                 refreshFancyBoxStatus = 'off';
-            },
-            keydown: function(fancybox, eventName) {
-                console.log(`Fancybox eventName: ${eventName}`);
-                if (eventName == 'ArrowDown') {
-                    return false;
-                }
             }
         }
     });
@@ -1006,10 +1000,14 @@ var RC_LEFT = 37;
     RC_DOWN = 40;
     RC_ENTER = 13;
 
+    RC_PLAY_PC = 80,    //Key p
+    RC_STOP_PC = 83,    //Key s
+
     //tv only
     RC_PLAY = 415,
     RC_STOP = 413;
 
+
 //support a and button
 var getNextSibling = function(el, way) {
     var next = null;
@@ -1136,7 +1134,7 @@ var keyPress = function(way) {
 
 //handle key press
 $(document.body).on('keydown', function(e) {
-    console.log('Key pressed', e.keyCode);
+    //console.log('Key pressed', e.keyCode);
 
     if (e.keyCode == RC_RIGHT) {
         keyPress('right');
@@ -1146,30 +1144,24 @@ $(document.body).on('keydown', function(e) {
         keyPress('up');
     }else if (e.keyCode == RC_DOWN) {
         keyPress('down');
-    }else if (e.keyCode == RC_PLAY) {
+    }else if (e.keyCode == RC_PLAY || e.keyCode == RC_PLAY_PC) {
         //play images
         var fancybox = Fancybox.getInstance();
         if (fancybox) {
             var autoplay = fancybox.plugins.Slideshow.ref;
             autoplay.start();
+        //}else {
+            //Fancybox.fromSelector('[data-fancybox]');
         }
-    }else if (e.keyCode == RC_STOP) {
+    }else if (e.keyCode == RC_STOP || e.keyCode == RC_STOP_PC) {
         //stop play images
         var fancybox = Fancybox.getInstance();
         if (fancybox) {
             var autoplay = fancybox.plugins.Slideshow.ref;
             autoplay.stop();
+            if (e.keyCode == RC_STOP) {
+                fancybox.close();
             }
         }
-});
-
-//TODO: handle fancybox show for tv browser
-/*
-$('a[data-fancybox]').on('dblclick', function(e) {
-    alert('double click');
-    var fancybox = Fancybox.getInstance();
-    if (fancybox) {
-        fancybox.show();
     }
 });
-*/