Feature/mouseinput swipe

addons/README.md

@@ -115,7 +115,7 @@ The base class from which addons are inherited. If you use the function interfac
    | `changingActiveImage` | Notification before changing the current image.                                             |
    |                       | *Argument*: currentImageIndex, fadeTime (ms)                                                |
    | `changedActiveImage`  | Notification that the current image has been changed.                                       |
-   |                       | *Argument*: currentImageIndex (ms)                                                          |
+   |                       | *Argument*: currentImageIndex                                                               |
 
    </details>
 

css/style.css

@@ -145,6 +145,12 @@ h1 {
   color: white;
 }
 
+.touch-bar:hover,
+.touchBarElement:hover {
+  cursor: pointer;
+}
+
+
 .disabled-icon {
   color: #333;
 }

js/defaultConfig.js

@@ -182,6 +182,19 @@ var defaultConfig = {
     ]
   },
 
+  gestures: {
+      // enable gesture support
+      enabled: true,
+      // swipe image out duration
+      swipeAnimationDuration: 400,
+      // fade in duration for the loading image
+      swipeFadeInImgDuration: 800,
+      // percent per event for pinch/zoom gestures
+      zoomPercentPerEvent: 1.5,
+      // maximum factor for zoom/shrink operations
+      maxScaleFactor: 5
+  },
+
   // options for the addonHandler class
   addonInterface: {
     // configure which types should be logged

js/renderer.js

@@ -9,6 +9,7 @@ const velocity = require("velocity-animate");
 const logger = remote.getGlobal("rendererLogger");
 const config = remote.getGlobal("config");
 const {TouchBar, TouchBarElement} = require("./js/touchBar.js")
+const initGestures = require('./js/touchGestures.js');
 
 // Inform that Renderer started
 logger.info("Renderer started ...");
@@ -52,6 +53,17 @@ if (config.playSoundOnRecieve !== false) {
 
 if (config.touchBar) {
   touchBar = new TouchBar(touchBarElements, config.touchBar)
+  // initialize swipe/pinch gestures
+  if (config.gestures.enabled) {
+    initGestures(config, {
+      pauseCallback: () => {
+        if (!isPaused) {
+          pause();
+        }
+      },
+      loadImage: loadImage
+    });
+  }
 } else {
   // handle touch events for navigation and voice reply
   $("body").on('touchstart', function() {
@@ -727,10 +739,12 @@ function loadImage(isNext, fadeTime, goToLatest = false) {
       cleanUp();
     } else {
       $assetDiv.velocity("fadeIn", {
-        duration: fadeTime
+        duration: fadeTime,
+        queue: false
       });
       $currentAsset.velocity("fadeOut", {
         duration: fadeTime,
+        queue: false,
         complete: function() {
           $(this).remove();
           cleanUp();

js/touchBar.js

@@ -31,7 +31,7 @@ class TouchBar {
         el.classList = name + " touchBarElement";
         el.style.lineHeight = self.height;
         el.style.fontSize = ($('#touch-bar-container').height()*0.8) + 'px';
-        $(el).on('touchend', function(event) {
+        $(el).on('click', function(event) {
           // don't bubble up events to prevent disappearing sweetalert messages
           event.preventDefault();
           clearTimeout(self.autoHideTimerId);
@@ -47,7 +47,7 @@ class TouchBar {
 
     touchBarContainer.appendChild(touchBarBlur);
     touchBarContainer.appendChild(touchBar);
-    $("#touch-container").on('touchend', function(event) {
+    $("#touch-container").on('click', function(event) {
       self.toggle()
     });
   }

js/touchGestures.js

@@ -0,0 +1,61 @@
+const Hammer = require('hammerjs');
+
+/**
+ * Initialize touch gesture handling
+ * @param  {object} config  TeleFrame configuration object
+ * @param  {object} options object providing callbacks for loadImage and pause
+ * {
+ *  loadImage: function loadImage(next, fadeTime) {...},
+ *  pause: function pause() {...}
+ *  }
+ * @return {undefined}
+ */
+const initGestures = (config, options) => {
+  // initialize swipe/pinch gestures
+  new Hammer.Manager(document.getElementById('touch-container'), {
+    recognizers: [
+      [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }],
+      [Hammer.Pinch]
+    ]
+  })
+  // Subscribe to the desired events
+  .on('swipe pinch', function(event) {
+    switch(event.type) {
+      case 'swipe':
+        if (typeof options.loadImage !== 'function') {
+          $('.imgcontainer').animate({ left: (event.offsetDirection === Hammer.DIRECTION_LEFT ? '-=' : '+=') + '100%'}, 50,
+            () => $(event.offsetDirection === Hammer.DIRECTION_LEFT ? '.nextImage' : '.previousImage').trigger('click')
+          );
+        } else {
+          $('.imgcontainer').animate({ left: (event.offsetDirection === Hammer.DIRECTION_LEFT ? '-=' : '+=') + '110%'}, config.gestures.swipeAnimationDuration);
+          options.loadImage(event.offsetDirection === Hammer.DIRECTION_LEFT, config.gestures.swipeFadeInImgDuration);
+        }
+        break;
+      case 'pinch':
+        if (event.scale) {
+          const MAX_SCALE_FACTOR = config.gestures.maxScaleFactor;
+          const ZOOM_PERCENT = config.gestures.zoomPercentPerEvent;
+          const $assetContainer = $container.find('.imgcontainer');
+          if (typeof options.pauseCallback === 'function') {
+            options.pauseCallback();
+          }
+          if ($assetContainer.length > 0) {
+            let attrib = 'height';
+            // get the current zomm (starts with '100%')
+            let currentZoom = $assetContainer[0].style.width;
+            if (currentZoom) {
+              attrib = 'width';
+            } else {
+              currentZoom = $assetContainer[0].style.height;
+            }
+            currentZoom = parseInt(currentZoom.replace('%', '')) || 100;
+            $assetContainer.css(`max-${attrib}`, '');
+            $assetContainer[attrib](Math.min((100 * MAX_SCALE_FACTOR), Math.max((100 / MAX_SCALE_FACTOR), currentZoom + (event.scale > 1.0 ? ZOOM_PERCENT : -ZOOM_PERCENT))) + '%');
+          }
+        }
+        break;
+    }
+  });
+}
+
+module.exports = initGestures;

main.js

@@ -28,6 +28,8 @@ if(config.switchLedsOff){
 }
 
 app.commandLine.appendSwitch("autoplay-policy", "no-user-gesture-required");
+// avoid deprecation warning from electron 8
+app.allowRendererProcessReuse = true;
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win;

package.json

@@ -19,19 +19,20 @@
   },
   "homepage": "https://github.com/LukeSkywalker92/teleframe#readme",
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.12.0",
+    "@fortawesome/fontawesome-free": "^5.12.1",
     "chroma-js": "^2.1.0",
     "dotenv": "^8.2.0",
-    "electron": "^7.2.4",
+    "electron": "^8.1.0",
+    "hammerjs": "^2.0.8",
     "image-downloader": "^3.5.0",
     "jquery": "^3.5.0",
     "moment": "^2.24.0",
     "node-audiorecorder": "^1.4.2",
     "node-schedule": "^1.3.2",
     "randomcolor": "^0.5.4",
     "sweetalert": "^2.1.2",
-    "sweetalert2": "^9.5.4",
-    "telegraf": "^3.35.0",
+    "sweetalert2": "^9.10.1",
+    "telegraf": "^3.36.0",
     "velocity-animate": "^1.5.2",
     "winston": "^3.2.1"
   }