@enact/limestone 1.3.0

package/VideoPlayer/VideoPlayer.module.css

@@ -0,0 +1,164 @@
+.videoPlayer {
+  --liftDistance: 0rem;
+  overflow: hidden;
+}
+.videoPlayer .video {
+  height: 100%;
+  width: 100%;
+}
+.videoPlayer .preloadVideo {
+  display: none;
+}
+.videoPlayer .overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.videoPlayer .overlay::after {
+  content: "";
+  position: absolute;
+  top: auto;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 80%;
+  transform-origin: bottom;
+}
+.videoPlayer .fullscreen .miniFeedback {
+  display: inline-flex;
+  align-items: center;
+  font-size: var(--primitive-font-size-60);
+  font-weight: var(--primitive-font-weight-regular);
+  height: 3.5rem;
+  line-height: 1.4em;
+  margin-bottom: 1.5rem;
+  z-index: 50;
+  bottom: auto;
+  pointer-events: none;
+}
+.videoPlayer .fullscreen .back {
+  position: absolute;
+  z-index: 100;
+  top: 2.125rem;
+  left: 2.75rem;
+  right: initial;
+}
+:global(.enact-locale-right-to-left) .videoPlayer .fullscreen .back {
+  left: initial;
+  right: 2.75rem;
+}
+.videoPlayer .fullscreen .bottom {
+  position: absolute;
+  z-index: 100;
+  bottom: 0;
+  left: 2.75rem;
+  right: 2.75rem;
+}
+.videoPlayer .fullscreen .bottom.lift {
+  transform: translateY(calc(var(--liftDistance) * -1));
+  transition: transform 0.3s linear;
+}
+:global(.noAnimation) .videoPlayer .fullscreen .bottom.lift {
+  transition: none;
+}
+.videoPlayer .fullscreen .bottom.hidden {
+  pointer-events: none;
+}
+.videoPlayer .fullscreen .bottom.hidden .sliderContainer {
+  position: absolute;
+  width: 100%;
+}
+.videoPlayer .fullscreen .bottom .infoFrame {
+  display: flex;
+  padding: var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
+  margin-bottom: 1.25rem;
+}
+.videoPlayer .fullscreen .bottom .sliderContainer {
+  display: flex;
+  align-items: center;
+  height: 2.75rem;
+  padding: 0 var(--primitive-spacing-48);
+}
+.videoPlayer .fullscreen .bottom .sliderContainer > *:first-child {
+  text-align: right;
+}
+:global(.enact-locale-right-to-left) .videoPlayer .fullscreen .bottom .sliderContainer {
+  direction: ltr;
+}
+.videoPlayer .controlsHandleAbove {
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: 0;
+}
+.videoPlayer:global(.neutral) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+.videoPlayer:global(.neutral) .fullscreen .bottom {
+  background-color: transparent;
+}
+.videoPlayer:global(.neutral) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}
+:global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .fullscreen .bottom {
+  background-color: transparent;
+}
+:global(.enact-a11y-high-contrast) .videoPlayer:global(.neutral):global(.highContrast) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}
+.videoPlayer:global(.light) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+.videoPlayer:global(.light) .fullscreen .bottom {
+  background-color: transparent;
+}
+.videoPlayer:global(.light) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}
+.videoPlayer:global(.game) {
+  --semantic-color-surface-default: #2d224c;
+  --semantic-color-surface-default-focused: #6d2fa1;
+  --semantic-color-on-surface-main-focused: #e6e6e6;
+}
+.videoPlayer:global(.game) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+.videoPlayer:global(.game) .fullscreen .bottom {
+  background-color: transparent;
+}
+.videoPlayer:global(.game) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}
+:global(.green) .videoPlayer:global(.game) {
+  --semantic-color-surface-default: #1F2C24;
+  --semantic-color-surface-default-focused: #3ea07d;
+}
+:global(.green) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.green) .videoPlayer:global(.game) .fullscreen .bottom {
+  background-color: transparent;
+}
+:global(.green) .videoPlayer:global(.game) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}
+:global(.orange) .videoPlayer:global(.game) {
+  --semantic-color-surface-default: #422923;
+  --semantic-color-surface-default-focused: #b85f23;
+}
+:global(.orange) .videoPlayer:global(.game) .fullscreen .miniFeedback {
+  color: var(--semantic-color-on-background-main);
+}
+:global(.orange) .videoPlayer:global(.game) .fullscreen .bottom {
+  background-color: transparent;
+}
+:global(.orange) .videoPlayer:global(.game) .overlay.scrim::after {
+  background: linear-gradient(180deg, transparent 0%, #000 100%);
+}

package/VideoPlayer/package.json

@@ -0,0 +1,3 @@
+{
+	"main": "VideoPlayer.js"
+}

package/VideoPlayer/tests/Video-specs.js

@@ -0,0 +1,235 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _Video = _interopRequireDefault(require("../Video"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+/* global HTMLMediaElement */
+
+describe('VideoPlayer.Video', function () {
+  beforeEach(function () {
+    jest.spyOn(HTMLMediaElement.prototype, 'load').mockImplementation(function () {
+      return true;
+    });
+  });
+  afterEach(function () {
+    HTMLMediaElement.prototype.load.mockRestore();
+  });
+  describe('changing sources', function () {
+    // Failures in these tests will often result in the following error. The error is misleading
+    // but indicates the nodes aren't reused as expected.
+    // TypeError: Cannot assign to read only property 'Symbol(impl)' of object '[object DOMImplementation]'
+
+    test('should use the same node when changing the `source`', function () {
+      var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render.rerender;
+      var expected = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: "def.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id');
+      expect(actual).toBe(expected);
+    });
+    test('should not render `preloadSource` when not present', function () {
+      (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(actual).toBeNull();
+    });
+    test('should use same `source` when removing `source` and no `preload`', function () {
+      var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render2.rerender;
+      var expected = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: undefined
+      }) // eslint-disable-line no-undefined
+      );
+      var actual = _react.screen.getByTestId('video-id');
+      expect(actual).toBe(expected);
+    });
+    test('should use same `source` when adding `source` and no `preload`', function () {
+      var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id"
+        })),
+        rerender = _render3.rerender;
+      var expected = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id');
+      expect(actual).toBe(expected);
+    });
+    test('should use the same node when adding `preloadSource`', function () {
+      var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render4.rerender;
+      var expected = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "def.mp4",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id');
+      expect(actual).toBe(expected);
+    });
+    test('should render `preloadSource` when added', function () {
+      var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render5.rerender;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "def.mp4",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(actual).not.toBeNull();
+      expect(actual.tagName).toBe('VIDEO');
+    });
+    test('should use the same node when adding `preloadSource` the same as source', function () {
+      var _render6 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render6.rerender;
+      var expected = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "abc.mp4",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id');
+      expect(actual).toBe(expected);
+    });
+    test('should use the same node when changing `preloadSource`', function () {
+      var _render7 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          preloadSource: "def.mp4",
+          source: "abc.mp4"
+        })),
+        rerender = _render7.rerender;
+      var expected = _react.screen.getByTestId('video-id').nextElementSibling;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "ghi.mp4",
+        source: "abc.mp4"
+      }));
+      var actual = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(actual).toBe(expected);
+    });
+    test('should swap nodes when swapping `source` and `preloadSource`', function () {
+      var _render8 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          preloadSource: "def.mp4",
+          source: "abc.mp4"
+        })),
+        rerender = _render8.rerender;
+      var source = _react.screen.getByTestId('video-id');
+      var preload = _react.screen.getByTestId('video-id').nextElementSibling;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "abc.mp4",
+        source: "def.mp4"
+      }));
+      var newSource = _react.screen.getByTestId('video-id');
+      var newPreload = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(newSource).toBe(preload);
+      expect(newPreload).toBe(source);
+    });
+    test('should reuse preload node when moving `preloadSource` to `source`', function () {
+      var _render9 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          preloadSource: "def.mp4",
+          source: "abc.mp4"
+        })),
+        rerender = _render9.rerender;
+      var preload = _react.screen.getByTestId('video-id').nextElementSibling;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: null,
+        source: "def.mp4"
+      }));
+      var newSource = _react.screen.getByTestId('video-id');
+      var newPreload = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(newSource).toBe(preload);
+      expect(newPreload).toBeFalsy();
+    });
+    test('should reuse both nodes when both `preloadSource` and `source` change', function () {
+      var _render0 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          preloadSource: "def.mp4",
+          source: "abc.mp4"
+        })),
+        rerender = _render0.rerender;
+      var source = _react.screen.getByTestId('video-id');
+      var preload = _react.screen.getByTestId('video-id').nextElementSibling;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "jkl.mp4",
+        source: "ghi.mp4"
+      }));
+      var newSource = _react.screen.getByTestId('video-id');
+      var newPreload = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(newSource).toBe(source);
+      expect(newPreload).toBe(preload);
+    });
+    test('should reuse source node over two changes', function () {
+      var _render1 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render1.rerender;
+      var firstSource = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: "def.mp4"
+      }));
+      var secondSource = _react.screen.getByTestId('video-id');
+      expect(secondSource).toBe(firstSource);
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        source: "ghi.mp4"
+      }));
+      var thirdSource = _react.screen.getByTestId('video-id');
+      expect(thirdSource).toBe(firstSource);
+    });
+    test('should swap nodes when preload does not exist initially', function () {
+      var _render10 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+          "data-testid": "video-id",
+          source: "abc.mp4"
+        })),
+        rerender = _render10.rerender;
+      var source = _react.screen.getByTestId('video-id');
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "def.mp4",
+        source: "abc.mp4"
+      }));
+      var preload = _react.screen.getByTestId('video-id').nextElementSibling;
+      rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_Video["default"], {
+        "data-testid": "video-id",
+        preloadSource: "abc.mp4",
+        source: "def.mp4"
+      }));
+      var newSource = _react.screen.getByTestId('video-id');
+      var newPreload = _react.screen.getByTestId('video-id').nextElementSibling;
+      expect(newSource).toBe(preload);
+      expect(newPreload).toBe(source);
+    });
+  });
+});

package/VideoPlayer/tests/VideoPlayer-specs.js

@@ -0,0 +1,180 @@
+"use strict";
+
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _VideoPlayer = _interopRequireDefault(require("../VideoPlayer"));
+var _Button = require("../../Button");
+var _MediaPlayer = require("../../MediaPlayer");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+var focus = function focus(slider) {
+  return _react.fireEvent.focus(slider);
+};
+var keyDown = function keyDown(keyCode) {
+  return function (elm) {
+    return _react.fireEvent.keyDown(elm, {
+      keyCode: keyCode
+    });
+  };
+};
+var downKeyDown = keyDown(40);
+describe('VideoPlayer', function () {
+  test('should fire `onPlaying` with `playing` type when playing event is fired', function () {
+    var handlePlaying = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      onPlaying: handlePlaying
+    }));
+    var video = _react.screen.getByTestId('videoplayer-id');
+    var playingEvent = (0, _react.createEvent)('playing', video);
+    (0, _react.fireEvent)(video, playingEvent);
+    var expected = {
+      type: 'playing'
+    };
+    var actual = handlePlaying.mock.calls.length && handlePlaying.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should fire `onControlsAvailable` with `onControlsAvailable` type when screen clicked', function () {
+    var handleControlsAvailable = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      onControlsAvailable: handleControlsAvailable
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    downKeyDown(overlay);
+    var slider = _react.screen.getByRole('slider', {
+      hidden: true
+    });
+    focus(slider); // add to increase code coverage
+
+    var expected = {
+      type: 'onControlsAvailable'
+    };
+    var actual = handleControlsAvailable.mock.calls.length && handleControlsAvailable.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  });
+  test('should not to show media slider when noslider is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      noSlider: true
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    yield _react.screen.findByLabelText('go to previous');
+    var slider = _react.screen.queryByRole('slider', {
+      hidden: true
+    });
+    expect(slider).toBeNull();
+  }));
+  test('should fire `onBack` with `onBack` type when clicking on back button', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleBack = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      onBack: handleBack
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    var expected = {
+      type: 'onBack'
+    };
+    yield _react.screen.findByLabelText('go to previous');
+    yield user.click(_react.screen.getByLabelText('go to previous'));
+    var actual = handleBack.mock.calls.length && handleBack.mock.calls[0][0];
+    expect(actual).toMatchObject(expected);
+  }));
+  test('should toggle to show the media control', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id"
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    yield _react.screen.findByLabelText('go to previous');
+    yield user.click(overlay);
+    var backButton = _react.screen.queryByLabelText('go to previous');
+    expect(backButton).toBeNull();
+  }));
+  test('should not to show the media control when disable is true', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      disabled: true
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    var backButton = _react.screen.queryByLabelText('go to previous');
+    expect(backButton).toBeNull();
+  }));
+  test('should fire `onToggleMore` with `onToggleMore` type when ActionGide button clicked', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleToggleMore = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      onToggleMore: handleToggleMore,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MediaPlayer.MediaControls, {
+        actionGuideButtonAriaLabel: "This is ActionGide button",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+          size: "small",
+          icon: "list"
+        })
+      })
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    yield _react.screen.findByLabelText('go to previous');
+    var actionGuideButton = _react.screen.getByLabelText('This is ActionGide button');
+    var expected = {
+      type: 'onToggleMore'
+    };
+    yield user.click(actionGuideButton);
+    yield (0, _react.waitFor)(function () {
+      var actual = handleToggleMore.mock.calls.length && handleToggleMore.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should not to show the media control after the delay', /*#__PURE__*/_asyncToGenerator(function* () {
+    jest.useFakeTimers();
+    var timeout = 100;
+    var user = _userEvent["default"].setup({
+      advanceTimers: jest.advanceTimersByTime
+    });
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      autoCloseTimeout: timeout
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(250);
+    });
+    var backButton = _react.screen.queryByLabelText('go to previous');
+    expect(backButton).toBeNull();
+    jest.useRealTimers();
+  }));
+  test('should not to show the title after the delay', /*#__PURE__*/_asyncToGenerator(function* () {
+    jest.useFakeTimers();
+    var timeout = 100;
+    var user = _userEvent["default"].setup({
+      advanceTimers: jest.advanceTimersByTime
+    });
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoPlayer["default"], {
+      "data-testid": "videoplayer-id",
+      title: "Video Test",
+      titleHideDelay: timeout
+    }));
+    var overlay = _react.screen.getByTestId('videoplayer-id').nextElementSibling;
+    yield user.click(overlay);
+    var titleFrame = _react.screen.getByText('Video Test').parentElement.parentElement.parentElement;
+    expect(titleFrame).toHaveClass('visible');
+    (0, _react.act)(function () {
+      return jest.advanceTimersByTime(250);
+    });
+    expect(titleFrame).toHaveClass('hidden');
+    jest.useRealTimers();
+  }));
+});