uikit 3.19.3-dev.a3bfd535a → 3.19.4-dev.1a3d20074

package/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-dev.a3bfd535a",
+  "version": "3.19.4-dev.1a3d20074",
   "main": "dist/js/uikit.js",
   "style": "dist/css/uikit.css",
   "sideEffects": [

package/src/js/core/icon.js

@@ -122,14 +122,15 @@ export const Search = {
     i18n: { toggle: 'Open Search', submit: 'Submit Search' },
 
     beforeConnect() {
-        const isToggle = hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle');
-        this.icon = isToggle 
-            ? 'search-toggle-icon' 
+        const isToggle =
+            hasClass(this.$el, 'uk-search-toggle') || hasClass(this.$el, 'uk-navbar-toggle');
+        this.icon = isToggle
+            ? 'search-toggle-icon'
             : hasClass(this.$el, 'uk-search-icon') && closest(this.$el, '.uk-search-large')
-                ? 'search-large'
-                : closest(this.$el, '.uk-search-navbar')
-                  ? 'search-navbar'
-                  : this.$props.icon;
+              ? 'search-large'
+              : closest(this.$el, '.uk-search-navbar')
+                ? 'search-navbar'
+                : this.$props.icon;
 
         if (hasAttr(this.$el, 'aria-label')) {
             return;

package/src/js/core/video.js

@@ -1,4 +1,16 @@
-import { hasAttr, isTag, isVideo, mute, parent, pause, play } from 'uikit-util';
+import {
+    hasAttr,
+    includes,
+    isTag,
+    isTouch,
+    isVideo,
+    mute,
+    parent,
+    pause,
+    play,
+    pointerEnter,
+    pointerLeave,
+} from 'uikit-util';
 import { intersection } from '../api/observables';
 
 export default {
@@ -14,7 +26,7 @@ export default {
         autoplay: true,
     },
 
-    connected() {
+    beforeConnect() {
         if (this.autoplay === 'inview' && !hasAttr(this.$el, 'preload')) {
             this.$el.preload = 'none';
         }
@@ -23,14 +35,50 @@ export default {
             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) {
@@ -45,3 +93,7 @@ export default {
         }),
     ],
 };
+
+function isPlaying(videoEl) {
+    return !videoEl.paused && !videoEl.ended;
+}

package/tests/video.html

@@ -14,7 +14,7 @@
 
             <h1>Video</h1>
 
-            <div class="uk-grid uk-child-width-1-2@s">
+            <div class="uk-grid uk-child-width-1-3@s">
                 <div>
 
                     <h3>Autoplay</h3>
@@ -30,6 +30,14 @@
                     <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
                     <iframe src="https://www.youtube-nocookie.com/embed/c2pz2mlSfXA?autoplay=0&amp;showinfo=0&amp;rel=0&amp;modestbranding=1&amp;playsinline=1" width="1920" height="1080" allowfullscreen uk-responsive uk-video="automute: true; autoplay: inview"></iframe>
                 </div>
+
+                <div>
+
+                    <h3>Autoplay Hover</h3>
+
+                    <button class="uk-button uk-button-default uk-margin-bottom" type="button" uk-toggle="target: +">Toggle Video</button>
+                    <video src="https://yootheme.com/site/images/media/yootheme-pro.mp4" width="1920" height="1080" playsinline uk-video="automute: true; autoplay: hover"></video>
+                </div>
             </div>
 
             <h2>JavaScript Options</h2>
@@ -48,7 +56,7 @@
                         <td><code>autoplay</code></td>
                         <td>Boolean, String</td>
                         <td>true</td>
-                        <td>The video automatically plays/pauses when visible/hidden on the page. A value of `inview` will delay loading the video and play/pause the video as it enters/leaves the viewport.</td>
+                        <td>The video automatically plays/pauses when visible/hidden on the page. A value of `inview` will delay loading the video and play/pause the video as it enters/leaves the viewport. A value of `hover` will play the video as it is being hovered.</td>
                     </tr>
                     <tr>
                         <td><code>automute</code></td>