Merge branch 'release/v3.19.4'

uikit · Apr 9, 2024 · 132539e · 132539e
2 parents 8c0252f + fbb8b3b
commit 132539e
Show file tree

Hide file tree

Showing 14 changed files with 181 additions and 79 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -20,7 +20,7 @@ Please open an issues only for a bug report or feature request. Make sure no one
 ### UIkit Version
 
 _Check if the issue is reproducible with the latest stable version._
-3.19.3
+3.19.4
 
 ### Actual Behavior
 

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.19.4 (April 9, 2024)
+
+### Added
+
+- Add `hover` mode to `autoplay` option in Video component
+
 ## 3.19.2 (March 12, 2024)
 
 ### Added

diff --git a/dist/css/uikit-rtl.css b/dist/css/uikit-rtl.css
@@ -1,4 +1,4 @@
-/*! UIkit 3.19.3 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.19.4 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */

diff --git a/dist/css/uikit-rtl.min.css b/dist/css/uikit-rtl.min.css
diff --git a/dist/css/uikit.css b/dist/css/uikit.css
@@ -1,4 +1,4 @@
-/*! UIkit 3.19.3 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.19.4 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 /* ========================================================================
    Component: Base
  ========================================================================== */

diff --git a/dist/css/uikit.min.css b/dist/css/uikit.min.css
diff --git a/dist/js/uikit-icons.js b/dist/js/uikit-icons.js
diff --git a/dist/js/uikit-icons.min.js b/dist/js/uikit-icons.min.js
diff --git a/dist/js/uikit.js b/dist/js/uikit.js
@@ -1,4 +1,4 @@
-/*! UIkit 3.19.3 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
+/*! UIkit 3.19.4 | https://www.getuikit.com | (c) 2014 - 2024 YOOtheme | MIT License */
 
 (function (global, factory) {
     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
@@ -3534,7 +3534,7 @@
     };
     App.util = util;
     App.options = {};
-    App.version = "3.19.3";
+    App.version = "3.19.4";
 
     const PREFIX = "uk-";
     const DATA = "__uikit__";
@@ -6646,20 +6646,53 @@
         automute: false,
         autoplay: true
       },
-      connected() {
+      beforeConnect() {
         if (this.autoplay === "inview" && !hasAttr(this.$el, "preload")) {
           this.$el.preload = "none";
         }
         if (isTag(this.$el, "iframe") && !hasAttr(this.$el, "allow")) {
           this.$el.allow = "autoplay";
         }
+        if (this.autoplay === "hover") {
+          if (isTag(this.$el, "video")) {
+            this.$el.tabindex = 0;
+          } else {
+            this.autoplay = true;
+          }
+        }
         if (this.automute) {
           mute(this.$el);
         }
       },
+      events: [
+        {
+          name: `${pointerEnter} focusin`,
+          filter() {
+            return includes(this.autoplay, "hover");
+          },
+          handler(e) {
+            if (!isTouch(e) || !isPlaying(this.$el)) {
+              play(this.$el);
+            } else {
+              pause(this.$el);
+            }
+          }
+        },
+        {
+          name: `${pointerLeave} focusout`,
+          filter() {
+            return includes(this.autoplay, "hover");
+          },
+          handler(e) {
+            if (!isTouch(e)) {
+              pause(this.$el);
+            }
+          }
+        }
+      ],
       observe: [
         intersection({
-          filter: ({ $el, autoplay }) => autoplay && isVideo($el),
+          filter: ({ $el, autoplay }) => autoplay && autoplay !== "hover" && isVideo($el),
           handler([{ isIntersecting }]) {
             if (!document.fullscreenElement) {
               if (isIntersecting) {
@@ -6674,6 +6707,9 @@
         })
       ]
     };
+    function isPlaying(videoEl) {
+      return !videoEl.paused && !videoEl.ended;
+    }
 
     var cover = {
       mixins: [Video],

diff --git a/dist/js/uikit.min.js b/dist/js/uikit.min.js
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
     "name": "uikit",
     "title": "UIkit",
     "description": "UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.",
-    "version": "3.19.3",
+    "version": "3.19.4",
     "main": "dist/js/uikit.js",
     "style": "dist/css/uikit.css",
     "sideEffects": [