@ilo-org/react 0.8.14-next.1 → 0.9.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @ilo-org/react
 
+## 0.9.0-next.3
+
+### Patch Changes
+
+- Updated dependencies [6d089ba7f]
+- Updated dependencies [a8ce5d3fc]
+  - @ilo-org/styles@0.11.3-next.3
+
+## 0.9.0-next.2
+
+### Minor Changes
+
+- 55f0c47aa: Added chained hover effect for video play button
+
+### Patch Changes
+
+- ca463b9b7: added full width on mobile viewport for affected cards
+- Updated dependencies [55f0c47aa]
+- Updated dependencies [b976f7221]
+- Updated dependencies [ca463b9b7]
+  - @ilo-org/styles@0.11.3-next.2
+
 ## 0.8.14-next.1
 
 ### Patch Changes

package/lib/cjs/{DailyMotion-2cda261d.js → DailyMotion-e06c9a92.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Facebook-40bd92e7.js → Facebook-d58c4f38.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{FilePlayer-b5a2e7b1.js → FilePlayer-fd6ea462.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Kaltura-8544b000.js → Kaltura-60c01a5d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Mixcloud-2c92778a.js → Mixcloud-124760a9.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Preview-a5f6c0c7.js → Preview-81296819.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{SoundCloud-ff297faf.js → SoundCloud-1739c1f1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Streamable-612542e7.js → Streamable-837b9cf6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Twitch-246c531e.js → Twitch-bf2a7602.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{VideoPlayer-d576de50.js → VideoPlayer-e2de3674.js}

@@ -634,7 +634,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-1fbce80b.js'); }).then(function (n) { return n.YouTube; });
+	    './YouTube-588e57ea.js'); }).then(function (n) { return n.YouTube; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -643,7 +643,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-ff297faf.js'); }).then(function (n) { return n.SoundCloud; });
+	    './SoundCloud-1739c1f1.js'); }).then(function (n) { return n.SoundCloud; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -652,7 +652,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-38a72f3d.js'); }).then(function (n) { return n.Vimeo; });
+	    './Vimeo-fc878336.js'); }).then(function (n) { return n.Vimeo; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -661,7 +661,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-40bd92e7.js'); }).then(function (n) { return n.Facebook; });
+	    './Facebook-d58c4f38.js'); }).then(function (n) { return n.Facebook; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -670,7 +670,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-612542e7.js'); }).then(function (n) { return n.Streamable; });
+	    './Streamable-837b9cf6.js'); }).then(function (n) { return n.Streamable; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -679,7 +679,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-1280865c.js'); }).then(function (n) { return n.Wistia; });
+	    './Wistia-7aa618d2.js'); }).then(function (n) { return n.Wistia; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -688,7 +688,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-246c531e.js'); }).then(function (n) { return n.Twitch; });
+	    './Twitch-bf2a7602.js'); }).then(function (n) { return n.Twitch; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -697,7 +697,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-2cda261d.js'); }).then(function (n) { return n.DailyMotion; });
+	    './DailyMotion-e06c9a92.js'); }).then(function (n) { return n.DailyMotion; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -706,7 +706,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-2c92778a.js'); }).then(function (n) { return n.Mixcloud; });
+	    './Mixcloud-124760a9.js'); }).then(function (n) { return n.Mixcloud; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -715,7 +715,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-e1bb2e3d.js'); }).then(function (n) { return n.Vidyard; });
+	    './Vidyard-1256273d.js'); }).then(function (n) { return n.Vidyard; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -724,7 +724,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-8544b000.js'); }).then(function (n) { return n.Kaltura; });
+	    './Kaltura-60c01a5d.js'); }).then(function (n) { return n.Kaltura; });
 	  })
 	}, {
 	  key: 'file',
@@ -736,7 +736,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return Promise.resolve().then(function () { return require(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-b5a2e7b1.js'); }).then(function (n) { return n.FilePlayer; });
+	    './FilePlayer-fd6ea462.js'); }).then(function (n) { return n.FilePlayer; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -1661,7 +1661,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return Promise.resolve().then(function () { return require(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-a5f6c0c7.js'); }).then(function (n) { return n.Preview; });
+  './Preview-81296819.js'); }).then(function (n) { return n.Preview; });
 });
 var IS_BROWSER = typeof window !== 'undefined' && window.document;
 var IS_GLOBAL = typeof commonjsGlobal !== 'undefined' && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -2043,12 +2043,22 @@ const VideoPlayer = ({ controls, src, poster, youtube, tracks, }) => {
         setPlaying(false);
         setSeeking(false);
     };
+    const handlePlayHover = require$$0.useCallback((event, state) => {
+        const element = event.currentTarget;
+        if (!element.classList.contains(`${controlsClasses}--play`)) {
+            return;
+        }
+        const duration = element.previousSibling;
+        if (duration instanceof HTMLLabelElement) {
+            duration.classList.toggle(`${controlsClasses}--duration--hovered`, state);
+        }
+    }, [controlsClasses]);
     return (jsxRuntime.jsxs("div", Object.assign({ className: `${baseClass}--container`, ref: videoContainer }, { children: [jsxRuntime.jsx(ReactPlayer, { className: playerClasses, config: playerconfig, loop: false, muted: muted, playing: playing, ref: videoElement, url: src, width: "100%", height: "100%", progressInterval: 30, volume: volume, onProgress: handleProgress, onDuration: handleDuration, onEnded: handleEnded }), jsxRuntime.jsxs("picture", Object.assign({ className: `${baseClass}--poster ${showposter ? "show" : ""}` }, { children: [(poster === null || poster === void 0 ? void 0 : poster.url) &&
                         poster.url
                             .sort((a, b) => parseFloat(a.breakpoint) - parseFloat(b.breakpoint))
                             .slice(1)
                             .reverse()
-                            .map((item, index) => (jsxRuntime.jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), jsxRuntime.jsx("img", { src: (_a = poster === null || poster === void 0 ? void 0 : poster.url[0]) === null || _a === void 0 ? void 0 : _a.src, alt: poster === null || poster === void 0 ? void 0 : poster.alt })] })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses} ${showposter ? "notplayed" : ""}` }, { children: [jsxRuntime.jsx("label", Object.assign({ className: `${controlsClasses}--duration ${showposter ? "show" : ""}` }, { children: duration })), jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--${!playing ? "play" : "pause"}`, onClick: togglePlay }, { children: jsxRuntime.jsx("span", { children: !playing ? controls && controls.play : controls && controls.pause }) })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses}--progress ${showposter ? "" : "show"}` }, { children: [jsxRuntime.jsx("input", { type: "range", min: 0, max: 0.999999, step: "any", value: playhead, onMouseDown: handleSeekMouseDown, onChange: handleSeekChange, onMouseUp: handleSeekMouseUp, className: `${controlsClasses}--progress-playhead` }), jsxRuntime.jsx("progress", { className: `${controlsClasses}--progress-current`, max: 1, value: playhead }), jsxRuntime.jsx("progress", { className: `${controlsClasses}--progress-loaded`, max: 1, value: buffer }), jsxRuntime.jsx("div", Object.assign({ className: `${controlsClasses}--progress-played-container` }, { children: jsxRuntime.jsx("label", Object.assign({ className: `${controlsClasses}--progress-played`, style: { ["--playhead"]: `${playhead * 100}%` } }, { children: playedtime })) }))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses}--volume ${showposter ? "" : "show"}`, onMouseEnter: showVolumeSlider, onMouseLeave: hideVolumeSlider }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--showvolume ${muted ? "muted" : ""}`, onClick: toggleMute }, { children: jsxRuntime.jsx("span", { children: controls && controls.volume }) })), jsxRuntime.jsx("div", Object.assign({ className: `${controlsClasses}--setvolume-container` }, { children: jsxRuntime.jsx("input", { className: `${controlsClasses}--setvolume ${showvolume ? "show" : ""}`, type: "range", step: "0.5", defaultValue: volume, min: "1", max: "10", onChange: handleVolumeChange, onMouseLeave: hideVolumeSlider }) }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--fullscreen ${showposter ? "" : "show"}`, onClick: toggleFullscreen }, { children: jsxRuntime.jsx("span", { children: controls && controls.fullscreen }) }))] }))] })));
+                            .map((item, index) => (jsxRuntime.jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), jsxRuntime.jsx("img", { src: (_a = poster === null || poster === void 0 ? void 0 : poster.url[0]) === null || _a === void 0 ? void 0 : _a.src, alt: poster === null || poster === void 0 ? void 0 : poster.alt })] })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses} ${showposter ? "notplayed" : ""}` }, { children: [jsxRuntime.jsx("label", Object.assign({ className: `${controlsClasses}--duration ${showposter ? "show" : ""}` }, { children: duration })), jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--${!playing ? "play" : "pause"}`, onClick: togglePlay, onMouseOver: (e) => handlePlayHover(e, true), onFocus: (e) => handlePlayHover(e, true), onMouseOut: (e) => handlePlayHover(e, false), onBlur: (e) => handlePlayHover(e, false) }, { children: jsxRuntime.jsx("span", { children: !playing ? controls && controls.play : controls && controls.pause }) })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses}--progress ${showposter ? "" : "show"}` }, { children: [jsxRuntime.jsx("input", { type: "range", min: 0, max: 0.999999, step: "any", value: playhead, onMouseDown: handleSeekMouseDown, onChange: handleSeekChange, onMouseUp: handleSeekMouseUp, className: `${controlsClasses}--progress-playhead` }), jsxRuntime.jsx("progress", { className: `${controlsClasses}--progress-current`, max: 1, value: playhead }), jsxRuntime.jsx("progress", { className: `${controlsClasses}--progress-loaded`, max: 1, value: buffer }), jsxRuntime.jsx("div", Object.assign({ className: `${controlsClasses}--progress-played-container` }, { children: jsxRuntime.jsx("label", Object.assign({ className: `${controlsClasses}--progress-played`, style: { ["--playhead"]: `${playhead * 100}%` } }, { children: playedtime })) }))] })), jsxRuntime.jsxs("div", Object.assign({ className: `${controlsClasses}--volume ${showposter ? "" : "show"}`, onMouseEnter: showVolumeSlider, onMouseLeave: hideVolumeSlider }, { children: [jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--showvolume ${muted ? "muted" : ""}`, onClick: toggleMute }, { children: jsxRuntime.jsx("span", { children: controls && controls.volume }) })), jsxRuntime.jsx("div", Object.assign({ className: `${controlsClasses}--setvolume-container` }, { children: jsxRuntime.jsx("input", { className: `${controlsClasses}--setvolume ${showvolume ? "show" : ""}`, type: "range", step: "0.5", defaultValue: volume, min: "1", max: "10", onChange: handleVolumeChange, onMouseLeave: hideVolumeSlider }) }))] })), jsxRuntime.jsx("button", Object.assign({ className: `${controlsClasses}--fullscreen ${showposter ? "" : "show"}`, onClick: toggleFullscreen }, { children: jsxRuntime.jsx("span", { children: controls && controls.fullscreen }) }))] }))] })));
 };
 
 exports.VideoPlayer = VideoPlayer;

package/lib/cjs/{Vidyard-e1bb2e3d.js → Vidyard-1256273d.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Vimeo-38a72f3d.js → Vimeo-fc878336.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{Wistia-1280865c.js → Wistia-7aa618d2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/{YouTube-1fbce80b.js → YouTube-588e57ea.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var components_Video_VideoPlayer = require('./VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('./VideoPlayer-e2de3674.js');
 var require$$0 = require('react');
 
 function _mergeNamespaces(n, m) {

package/lib/cjs/components/Video/Video.js

@@ -3,7 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var classNames = require('classnames');
 var hooks_useGlobalSettings = require('../../hooks/useGlobalSettings.js');
-var components_Video_VideoPlayer = require('../../VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-e2de3674.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');

package/lib/cjs/components/Video/VideoPlayer.js

@@ -2,7 +2,7 @@
 
 require('react/jsx-runtime');
 require('react');
-var components_Video_VideoPlayer = require('../../VideoPlayer-d576de50.js');
+var components_Video_VideoPlayer = require('../../VideoPlayer-e2de3674.js');
 require('react-dom');
 require('classnames');
 require('../../hooks/useGlobalSettings.js');

package/lib/cjs/components/Video/index.js

@@ -7,7 +7,7 @@ require('../../hooks/useGlobalSettings.js');
 require('tslib');
 require('react');
 require('../../GlobalCtx-97e4b433.js');
-require('../../VideoPlayer-d576de50.js');
+require('../../VideoPlayer-e2de3674.js');
 require('../../index-0af02e81.js');
 require('react-dom');
 require('../../utils/hoursMinutesSeconds.js');

package/lib/cjs/components/index.js

@@ -73,7 +73,7 @@ require('./Hero/HeroCard.js');
 require('./SocialMedia/SocialMedia.js');
 require('./Input/Input.js');
 require('./FormElement/FormElement.js');
-require('../VideoPlayer-d576de50.js');
+require('../VideoPlayer-e2de3674.js');
 require('../utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('@ilo-org/icons-react');

package/lib/cjs/index.js

@@ -74,7 +74,7 @@ require('./components/Hero/HeroCard.js');
 require('./components/SocialMedia/SocialMedia.js');
 require('./components/Input/Input.js');
 require('./components/FormElement/FormElement.js');
-require('./VideoPlayer-d576de50.js');
+require('./VideoPlayer-e2de3674.js');
 require('./utils/hoursMinutesSeconds.js');
 require('screenfull');
 require('./components/Logo/Logo.js');

package/lib/esm/{DailyMotion-89500a59.js → DailyMotion-2e38ef76.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Facebook-7abf2b6b.js → Facebook-4a2334f4.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{FilePlayer-c5879d9f.js → FilePlayer-40e1ae01.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Kaltura-424e97bb.js → Kaltura-c80bdfb7.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Mixcloud-a9c98513.js → Mixcloud-b0f9376b.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Preview-05e5eb47.js → Preview-07219fbc.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{SoundCloud-0853e0b6.js → SoundCloud-78094ae3.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Streamable-da3fc8b6.js → Streamable-44c36485.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Twitch-25eb6a7b.js → Twitch-cec3b85d.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{VideoPlayer-a5fa87ce.js → VideoPlayer-b5d125fd.js}

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import require$$0, { useState, createRef } from 'react';
+import require$$0, { useState, createRef, useCallback } from 'react';
 import { p as propTypes$1 } from './index-623ce3f5.js';
 import { findDOMNode } from 'react-dom';
 import classNames from 'classnames';
@@ -632,7 +632,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerYouTube' */
-	    './YouTube-9fef7faa.js').then(function (n) { return n.Y; });
+	    './YouTube-2e7e24ca.js').then(function (n) { return n.Y; });
 	  })
 	}, {
 	  key: 'soundcloud',
@@ -641,7 +641,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerSoundCloud' */
-	    './SoundCloud-0853e0b6.js').then(function (n) { return n.S; });
+	    './SoundCloud-78094ae3.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'vimeo',
@@ -650,7 +650,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVimeo' */
-	    './Vimeo-4dc64c92.js').then(function (n) { return n.V; });
+	    './Vimeo-dd76c909.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'facebook',
@@ -659,7 +659,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFacebook' */
-	    './Facebook-7abf2b6b.js').then(function (n) { return n.F; });
+	    './Facebook-4a2334f4.js').then(function (n) { return n.F; });
 	  })
 	}, {
 	  key: 'streamable',
@@ -668,7 +668,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerStreamable' */
-	    './Streamable-da3fc8b6.js').then(function (n) { return n.S; });
+	    './Streamable-44c36485.js').then(function (n) { return n.S; });
 	  })
 	}, {
 	  key: 'wistia',
@@ -677,7 +677,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerWistia' */
-	    './Wistia-7f9e5ea3.js').then(function (n) { return n.W; });
+	    './Wistia-d98e9e9e.js').then(function (n) { return n.W; });
 	  })
 	}, {
 	  key: 'twitch',
@@ -686,7 +686,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerTwitch' */
-	    './Twitch-25eb6a7b.js').then(function (n) { return n.T; });
+	    './Twitch-cec3b85d.js').then(function (n) { return n.T; });
 	  })
 	}, {
 	  key: 'dailymotion',
@@ -695,7 +695,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerDailyMotion' */
-	    './DailyMotion-89500a59.js').then(function (n) { return n.D; });
+	    './DailyMotion-2e38ef76.js').then(function (n) { return n.D; });
 	  })
 	}, {
 	  key: 'mixcloud',
@@ -704,7 +704,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerMixcloud' */
-	    './Mixcloud-a9c98513.js').then(function (n) { return n.M; });
+	    './Mixcloud-b0f9376b.js').then(function (n) { return n.M; });
 	  })
 	}, {
 	  key: 'vidyard',
@@ -713,7 +713,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerVidyard' */
-	    './Vidyard-7284e1ca.js').then(function (n) { return n.V; });
+	    './Vidyard-44d40c02.js').then(function (n) { return n.V; });
 	  })
 	}, {
 	  key: 'kaltura',
@@ -722,7 +722,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerKaltura' */
-	    './Kaltura-424e97bb.js').then(function (n) { return n.K; });
+	    './Kaltura-c80bdfb7.js').then(function (n) { return n.K; });
 	  })
 	}, {
 	  key: 'file',
@@ -734,7 +734,7 @@ patterns.canPlay = canPlay;
 	  lazyPlayer: /*#__PURE__*/(0, _react.lazy)(function () {
 	    return import(
 	    /* webpackChunkName: 'reactPlayerFilePlayer' */
-	    './FilePlayer-c5879d9f.js').then(function (n) { return n.F; });
+	    './FilePlayer-40e1ae01.js').then(function (n) { return n.F; });
 	  })
 	}];
 	exports["default"] = _default;
@@ -1659,7 +1659,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var Preview = /*#__PURE__*/(0, _react.lazy)(function () {
   return import(
   /* webpackChunkName: 'reactPlayerPreview' */
-  './Preview-05e5eb47.js').then(function (n) { return n.P; });
+  './Preview-07219fbc.js').then(function (n) { return n.P; });
 });
 var IS_BROWSER = typeof window !== 'undefined' && window.document;
 var IS_GLOBAL = typeof commonjsGlobal !== 'undefined' && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -2041,12 +2041,22 @@ const VideoPlayer = ({ controls, src, poster, youtube, tracks, }) => {
         setPlaying(false);
         setSeeking(false);
     };
+    const handlePlayHover = useCallback((event, state) => {
+        const element = event.currentTarget;
+        if (!element.classList.contains(`${controlsClasses}--play`)) {
+            return;
+        }
+        const duration = element.previousSibling;
+        if (duration instanceof HTMLLabelElement) {
+            duration.classList.toggle(`${controlsClasses}--duration--hovered`, state);
+        }
+    }, [controlsClasses]);
     return (jsxs("div", Object.assign({ className: `${baseClass}--container`, ref: videoContainer }, { children: [jsx(ReactPlayer, { className: playerClasses, config: playerconfig, loop: false, muted: muted, playing: playing, ref: videoElement, url: src, width: "100%", height: "100%", progressInterval: 30, volume: volume, onProgress: handleProgress, onDuration: handleDuration, onEnded: handleEnded }), jsxs("picture", Object.assign({ className: `${baseClass}--poster ${showposter ? "show" : ""}` }, { children: [(poster === null || poster === void 0 ? void 0 : poster.url) &&
                         poster.url
                             .sort((a, b) => parseFloat(a.breakpoint) - parseFloat(b.breakpoint))
                             .slice(1)
                             .reverse()
-                            .map((item, index) => (jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), jsx("img", { src: (_a = poster === null || poster === void 0 ? void 0 : poster.url[0]) === null || _a === void 0 ? void 0 : _a.src, alt: poster === null || poster === void 0 ? void 0 : poster.alt })] })), jsxs("div", Object.assign({ className: `${controlsClasses} ${showposter ? "notplayed" : ""}` }, { children: [jsx("label", Object.assign({ className: `${controlsClasses}--duration ${showposter ? "show" : ""}` }, { children: duration })), jsx("button", Object.assign({ className: `${controlsClasses}--${!playing ? "play" : "pause"}`, onClick: togglePlay }, { children: jsx("span", { children: !playing ? controls && controls.play : controls && controls.pause }) })), jsxs("div", Object.assign({ className: `${controlsClasses}--progress ${showposter ? "" : "show"}` }, { children: [jsx("input", { type: "range", min: 0, max: 0.999999, step: "any", value: playhead, onMouseDown: handleSeekMouseDown, onChange: handleSeekChange, onMouseUp: handleSeekMouseUp, className: `${controlsClasses}--progress-playhead` }), jsx("progress", { className: `${controlsClasses}--progress-current`, max: 1, value: playhead }), jsx("progress", { className: `${controlsClasses}--progress-loaded`, max: 1, value: buffer }), jsx("div", Object.assign({ className: `${controlsClasses}--progress-played-container` }, { children: jsx("label", Object.assign({ className: `${controlsClasses}--progress-played`, style: { ["--playhead"]: `${playhead * 100}%` } }, { children: playedtime })) }))] })), jsxs("div", Object.assign({ className: `${controlsClasses}--volume ${showposter ? "" : "show"}`, onMouseEnter: showVolumeSlider, onMouseLeave: hideVolumeSlider }, { children: [jsx("button", Object.assign({ className: `${controlsClasses}--showvolume ${muted ? "muted" : ""}`, onClick: toggleMute }, { children: jsx("span", { children: controls && controls.volume }) })), jsx("div", Object.assign({ className: `${controlsClasses}--setvolume-container` }, { children: jsx("input", { className: `${controlsClasses}--setvolume ${showvolume ? "show" : ""}`, type: "range", step: "0.5", defaultValue: volume, min: "1", max: "10", onChange: handleVolumeChange, onMouseLeave: hideVolumeSlider }) }))] })), jsx("button", Object.assign({ className: `${controlsClasses}--fullscreen ${showposter ? "" : "show"}`, onClick: toggleFullscreen }, { children: jsx("span", { children: controls && controls.fullscreen }) }))] }))] })));
+                            .map((item, index) => (jsx("source", { srcSet: item.src, media: `(min-width: ${item.breakpoint}px)` }, index))), jsx("img", { src: (_a = poster === null || poster === void 0 ? void 0 : poster.url[0]) === null || _a === void 0 ? void 0 : _a.src, alt: poster === null || poster === void 0 ? void 0 : poster.alt })] })), jsxs("div", Object.assign({ className: `${controlsClasses} ${showposter ? "notplayed" : ""}` }, { children: [jsx("label", Object.assign({ className: `${controlsClasses}--duration ${showposter ? "show" : ""}` }, { children: duration })), jsx("button", Object.assign({ className: `${controlsClasses}--${!playing ? "play" : "pause"}`, onClick: togglePlay, onMouseOver: (e) => handlePlayHover(e, true), onFocus: (e) => handlePlayHover(e, true), onMouseOut: (e) => handlePlayHover(e, false), onBlur: (e) => handlePlayHover(e, false) }, { children: jsx("span", { children: !playing ? controls && controls.play : controls && controls.pause }) })), jsxs("div", Object.assign({ className: `${controlsClasses}--progress ${showposter ? "" : "show"}` }, { children: [jsx("input", { type: "range", min: 0, max: 0.999999, step: "any", value: playhead, onMouseDown: handleSeekMouseDown, onChange: handleSeekChange, onMouseUp: handleSeekMouseUp, className: `${controlsClasses}--progress-playhead` }), jsx("progress", { className: `${controlsClasses}--progress-current`, max: 1, value: playhead }), jsx("progress", { className: `${controlsClasses}--progress-loaded`, max: 1, value: buffer }), jsx("div", Object.assign({ className: `${controlsClasses}--progress-played-container` }, { children: jsx("label", Object.assign({ className: `${controlsClasses}--progress-played`, style: { ["--playhead"]: `${playhead * 100}%` } }, { children: playedtime })) }))] })), jsxs("div", Object.assign({ className: `${controlsClasses}--volume ${showposter ? "" : "show"}`, onMouseEnter: showVolumeSlider, onMouseLeave: hideVolumeSlider }, { children: [jsx("button", Object.assign({ className: `${controlsClasses}--showvolume ${muted ? "muted" : ""}`, onClick: toggleMute }, { children: jsx("span", { children: controls && controls.volume }) })), jsx("div", Object.assign({ className: `${controlsClasses}--setvolume-container` }, { children: jsx("input", { className: `${controlsClasses}--setvolume ${showvolume ? "show" : ""}`, type: "range", step: "0.5", defaultValue: volume, min: "1", max: "10", onChange: handleVolumeChange, onMouseLeave: hideVolumeSlider }) }))] })), jsx("button", Object.assign({ className: `${controlsClasses}--fullscreen ${showposter ? "" : "show"}`, onClick: toggleFullscreen }, { children: jsx("span", { children: controls && controls.fullscreen }) }))] }))] })));
 };
 
 export { VideoPlayer as V, getDefaultExportFromCjs as g, patterns as p, utils as u };

package/lib/esm/{Vidyard-7284e1ca.js → Vidyard-44d40c02.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Vimeo-4dc64c92.js → Vimeo-dd76c909.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{Wistia-7f9e5ea3.js → Wistia-d98e9e9e.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/{YouTube-9fef7faa.js → YouTube-2e7e24ca.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-a5fa87ce.js';
+import { g as getDefaultExportFromCjs, p as patterns, u as utils } from './VideoPlayer-b5d125fd.js';
 import require$$0 from 'react';
 
 function _mergeNamespaces(n, m) {

package/lib/esm/components/Video/Video.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import classNames from 'classnames';
 import useGlobalSettings from '../../hooks/useGlobalSettings.js';
-import { V as VideoPlayer } from '../../VideoPlayer-a5fa87ce.js';
+import { V as VideoPlayer } from '../../VideoPlayer-b5d125fd.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';

package/lib/esm/components/Video/VideoPlayer.js

@@ -1,6 +1,6 @@
 import 'react/jsx-runtime';
 import 'react';
-export { V as default } from '../../VideoPlayer-a5fa87ce.js';
+export { V as default } from '../../VideoPlayer-b5d125fd.js';
 import 'react-dom';
 import 'classnames';
 import '../../hooks/useGlobalSettings.js';

package/lib/esm/components/Video/index.js

@@ -5,7 +5,7 @@ import '../../hooks/useGlobalSettings.js';
 import 'tslib';
 import 'react';
 import '../../GlobalCtx-7fb23cfa.js';
-import '../../VideoPlayer-a5fa87ce.js';
+import '../../VideoPlayer-b5d125fd.js';
 import '../../index-623ce3f5.js';
 import 'react-dom';
 import '../../utils/hoursMinutesSeconds.js';

package/lib/esm/components/index.js

@@ -71,7 +71,7 @@ import './Hero/HeroCard.js';
 import './SocialMedia/SocialMedia.js';
 import './Input/Input.js';
 import './FormElement/FormElement.js';
-import '../VideoPlayer-a5fa87ce.js';
+import '../VideoPlayer-b5d125fd.js';
 import '../utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import '@ilo-org/icons-react';

package/lib/esm/index.js

@@ -72,7 +72,7 @@ import './components/Hero/HeroCard.js';
 import './components/SocialMedia/SocialMedia.js';
 import './components/Input/Input.js';
 import './components/FormElement/FormElement.js';
-import './VideoPlayer-a5fa87ce.js';
+import './VideoPlayer-b5d125fd.js';
 import './utils/hoursMinutesSeconds.js';
 import 'screenfull';
 import './components/Logo/Logo.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ilo-org/react",
-  "version": "0.8.14-next.1",
+  "version": "0.9.0-next.3",
   "description": "React components for the ILO's Design System",
   "keywords": [
     "ui_patterns",
@@ -76,7 +76,7 @@
     "@ilo-org/brand-assets": "0.2.0",
     "@ilo-org/fonts": "0.1.2",
     "@ilo-org/icons-react": "0.0.21",
-    "@ilo-org/styles": "0.11.3-next.1",
+    "@ilo-org/styles": "0.11.3-next.3",
     "@ilo-org/themes": "0.7.0-next.0",
     "@ilo-org/utils": "0.0.11"
   },
@@ -126,6 +126,7 @@
     "screenfull": "^5.2.0",
     "storybook": "7.5.0-alpha.1",
     "storybook-addon-performance": "^0.17.1",
+    "storybook-addon-rtl-direction": "^0.0.19",
     "ts-dedent": "^2.2.0",
     "ts-jest": "^29.1.1",
     "tslib": "^2.3.1",

package/src/components/Video/VideoPlayer.tsx

@@ -1,4 +1,11 @@
-import { FC, createRef, useState } from "react";
+import {
+  FC,
+  FocusEvent,
+  MouseEvent,
+  createRef,
+  useCallback,
+  useState,
+} from "react";
 /* temporary way of importing ReactPlayer due to a known issue with ReactPlayer.
  * Revert to standard method of importing once RP's dev has fixed.
  */
@@ -166,6 +173,27 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
     setSeeking(false);
   };
 
+  const handlePlayHover = useCallback(
+    (
+      event: MouseEvent<HTMLButtonElement> | FocusEvent<HTMLButtonElement>,
+      state: boolean
+    ) => {
+      const element = event.currentTarget;
+      if (!element.classList.contains(`${controlsClasses}--play`)) {
+        return;
+      }
+
+      const duration = element.previousSibling;
+      if (duration instanceof HTMLLabelElement) {
+        duration.classList.toggle(
+          `${controlsClasses}--duration--hovered`,
+          state
+        );
+      }
+    },
+    [controlsClasses]
+  );
+
   return (
     <div
       className={`${baseClass}--container`}
@@ -214,6 +242,10 @@ const VideoPlayer: FC<VideoPlayerProps> = ({
         <button
           className={`${controlsClasses}--${!playing ? "play" : "pause"}`}
           onClick={togglePlay}
+          onMouseOver={(e) => handlePlayHover(e, true)}
+          onFocus={(e) => handlePlayHover(e, true)}
+          onMouseOut={(e) => handlePlayHover(e, false)}
+          onBlur={(e) => handlePlayHover(e, false)}
         >
           <span>
             {!playing ? controls && controls.play : controls && controls.pause}