DE-6498: Add Storybook

Add Storybook as a framework to develop and document UI.
So far this is groundwork, once the Storybook docs are finished,
./app folder can be deleted.

* FIXES

Several small fixes to some components such as `Duration` and
`CurrentTime`, fixes to the UI and some improvements to the API.

* FEATURES

Create `PlayPauseIndicator`.
Add CSS classes `.pp-ui-layers` and `.pp-ui-layer` intended
to stack layers of UI on top of each other (e.g. player and
its overlay).

* TOOLING

In Jest remove `transformIgnorePatterns` of `@castlabs/prestoplay`
because it is not being transformed anyway, because it is getting
mocked instead.

.storybook/preview.ts

@@ -1,3 +1,4 @@
+import { PrestoContextDecorator } from "../story/stories/prep";
 import "./style.css"
 
 import type { Preview } from "@storybook/react";
@@ -16,6 +17,7 @@ const preview: Preview = {
       order: ['Intro'],
     },
   },
+  decorators: [PrestoContextDecorator],
 };
 
 export default preview;

.storybook/style.css

@@ -15,3 +15,7 @@ button.docblock-code-toggle {
 .sb-clpp-anchor:hover {
   color: #58baf6;
 }
+
+.css-79elbk {
+  display: none;
+}

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Breaking changes
 
+* Removed `showWhenDisabled` props from `PlayerControls`, it is no longer meaningful after the recent changes
+  to controls visibility. Now controls are always visible when video is paused or idle.
 * Removed the `player` prop from all components (except `PlayerSurface`). Instead of it, all components should
   be descendants of `PlayerSurface` and this way they get access to the `player` instance from its context. 
   ```jsx
@@ -36,9 +38,19 @@
 
 ## Fixes
 
+* Fixes to `BaseThemeOverlay`:
+  * Before start of playback make sure `CurrentTime` displays a valid value of `0:00`.
+  * Make sure seek bar is visible.
+  * Improve responsiveness of the UI.
 * Improve positioning by `HoverContainer`.
 * All components now accept `style` and `className` prop and apply them to their top-most element.
 * Removed `children` prop from components that do not render any child components.
+* Fix `Duration` to display the correct value even when it is rendered after the video has been loaded.
+
+## Changes
+
+* Player controls auto-hide after 3s instead of 5s.
+* Added `mode` prop to `PlayerControls` which can be used to configure the visibility of player controls.
 
 # 0.6.0 (Beta)
 

app/src/App.tsx

@@ -3,7 +3,6 @@ import React, {
   useMemo,
   useState,
 } from 'react'
-import ClickAway from 'react-hook-click-away'
 
 import { Asset, TestAssets } from './Asset'
 import { BasicOverlayPage } from './BasicOverlayPage'
@@ -78,26 +77,24 @@ export function App() {
         <h1>PRESTOplay React Components</h1>
       </div>
 
-      <ClickAway onClickAway={() => setNavVisible(false)}>
-        <nav className={`sidenav ${navVisible ? 'visible' : ''}`} ref={navRef}>
-          <button onClick={toggleNav} className={'nav-toggle'}>Hide</button>
-          <h3>Content</h3>
-          <button onClick={selectAsset(0)} className={`${assetId === 0 ? 'selected' : ''}`}>{TestAssets[0].title}</button>
-          <button onClick={selectAsset(1)} className={`${assetId === 1 ? 'selected' : ''}`}>{TestAssets[1].title}</button>
-          <button onClick={selectAsset(2)} className={`${assetId === 2 ? 'selected' : ''}`}>{TestAssets[2].title}</button>
-          <button onClick={selectAsset(3)} className={`${assetId === 3 ? 'selected' : ''}`}>{TestAssets[3].title}</button>
-          <h3>Options</h3>
-          <label>
-            <input type={'checkbox'} checked={autoload} onChange={() => {setAutoload(!autoload)}}/>
+      <nav className={`sidenav ${navVisible ? 'visible' : ''}`} ref={navRef}>
+        <button onClick={toggleNav} className={'nav-toggle'}>Hide</button>
+        <h3>Content</h3>
+        <button onClick={selectAsset(0)} className={`${assetId === 0 ? 'selected' : ''}`}>{TestAssets[0].title}</button>
+        <button onClick={selectAsset(1)} className={`${assetId === 1 ? 'selected' : ''}`}>{TestAssets[1].title}</button>
+        <button onClick={selectAsset(2)} className={`${assetId === 2 ? 'selected' : ''}`}>{TestAssets[2].title}</button>
+        <button onClick={selectAsset(3)} className={`${assetId === 3 ? 'selected' : ''}`}>{TestAssets[3].title}</button>
+        <h3>Options</h3>
+        <label>
+          <input type={'checkbox'} checked={autoload} onChange={() => {setAutoload(!autoload)}}/>
           Auto Load
-          </label>
-          <h3>Layouts</h3>
-          <button onClick={selectPage('basic')} className={`${pageId === 'basic' ? 'selected' : ''}`}>Basic Overlay</button>
-          <button onClick={selectPage('custom')} className={`${pageId === 'custom' ? 'selected' : ''}`}>Custom Overlay</button>
-          <button onClick={selectPage('youtube')} className={`${pageId === 'youtube' ? 'selected' : ''}`}>Youtube Overlay</button>
-          <button onClick={selectPage('components')} className={`${pageId === 'components' ? 'selected' : ''}`}>Components</button>
-        </nav>
-      </ClickAway>
+        </label>
+        <h3>Layouts</h3>
+        <button onClick={selectPage('basic')} className={`${pageId === 'basic' ? 'selected' : ''}`}>Basic Overlay</button>
+        <button onClick={selectPage('custom')} className={`${pageId === 'custom' ? 'selected' : ''}`}>Custom Overlay</button>
+        <button onClick={selectPage('youtube')} className={`${pageId === 'youtube' ? 'selected' : ''}`}>Youtube Overlay</button>
+        <button onClick={selectPage('components')} className={`${pageId === 'components' ? 'selected' : ''}`}>Components</button>
+      </nav>
 
       <div>
         {page}

app/src/youtube.css

@@ -105,65 +105,6 @@
     position: relative;
 }
 
-.pp-yt-center-background {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    right: 50%;
-    bottom: 50%;
-    width: 64px;
-    height: 64px;
-
-    transform: translate(-50%,-50%);
-    z-index: -1;
-    border-radius: 32px;
-    background-color: rgba(0, 0, 0, .25);
-}
-
-.pp-yt-center-toggle .pp-ui-playpause-toggle {
-    opacity: 0;
-}
-
-.pp-yt-center-toggle.pp-ui-playpause-toggle-pause {
-    opacity: 0;
-    animation-name: center-fade;
-    animation-duration: 500ms;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease;
-}
-
-.pp-yt-center-toggle.pp-ui-playpause-toggle-play {
-    opacity: 0;
-    animation-name: center-fade-2;
-    animation-duration: 500ms;
-    animation-direction: normal;
-    animation-fill-mode: forwards;
-    animation-timing-function: ease;
-}
-
-@keyframes center-fade {
-    from {
-        opacity: .8;
-        scale: .25;
-    }
-    to {
-        opacity: 0;
-        scale: 1.75;
-    }
-}
-
-
-@keyframes center-fade-2 {
-    from {
-        opacity: .8;
-        scale: .25;
-    }
-    to {
-        opacity: 0;
-        scale: 1.75;
-    }
-}
 
 .pp-yt-gradient-bottom {
     height: 146px;

jest.config.js

@@ -5,8 +5,8 @@ module.exports = {
   },
   testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
   testEnvironment: 'jsdom',
-  transformIgnorePatterns: ['/node_modules/(?!(@castlabs/prestoplay)/)'],
   moduleNameMapper: {
     '@castlabs/prestoplay.*': '<rootDir>/tests/fake_clpp.js',
-  }
+  },
+  resolver: '<rootDir>/jest.resolver.js',
 }

jest.resolver.js

@@ -0,0 +1,31 @@
+/**
+ * Imports from @react-hook are for some reason not resolved correctly, and they end up
+ * importing ESM code instead of transpiled ES5 which causes a crash of the test suite.
+ * Fix it by correcting those paths here.
+ *
+ * (The package.json.exports field in @react-hook/ is the problem.
+ * Ideally I would fix this via the `options.packageFilter`, but that
+ * for some reason is not working - possibly a bug in Jest. So I'm just
+ * doing a simple replace here instead.)
+ */
+function fixReactHookPaths(path) {
+  const replacements = {
+    '@react-hook/resize-observer/dist/module/index.js': '@react-hook/resize-observer/dist/main/index.js',
+    '@react-hook/passive-layout-effect/dist/module/index.js': '@react-hook/passive-layout-effect/dist/main/index.js',
+    '@react-hook/latest/dist/module/index.js': '@react-hook/latest/dist/main/index.js',
+  }
+
+  Object.keys(replacements).forEach(key => {
+    path = path.replace(key, replacements[key])
+  })
+
+  return path
+}
+
+/**
+* https://jestjs.io/docs/configuration/#resolver-string
+*/
+module.exports = (path, options) => {
+  let result = options.defaultResolver(path, options)
+  return fixReactHookPaths(result)
+}

package.json

@@ -99,6 +99,6 @@
     "react"
   ],
   "dependencies": {
-    "react-hook-click-away": "^1.0.0"
+    "@react-hook/resize-observer": "^1.2.6"
   }
 }