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.

.gitignore

@@ -4,3 +4,4 @@ dist/
 app/dist/
 .npmrc
 .vscode/
+.DS_Store

.npmignore

@@ -0,0 +1,3 @@
+*
+!dist/**/*
+dist/storybook/**/*

.storybook/main.ts

@@ -0,0 +1,26 @@
+
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../story/stories/**/*.mdx", "../story/stories/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  babel: (options) => ({
+    ...options,
+    configFile: './story/.babelrc.json'
+  }),
+};
+
+
+
+export default config;

.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import { PrestoContextDecorator } from "../story/stories/prep";
+import "./style.css"
+
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+    options: {
+      method: 'alphabetical',
+      order: ['Intro'],
+    },
+  },
+  decorators: [PrestoContextDecorator],
+};
+
+export default preview;

.storybook/style.css

@@ -0,0 +1,21 @@
+button.docblock-code-toggle {
+  font-style:italic;
+}
+
+.sb-clpp-anchor {
+  font-size: 1em;
+  cursor: pointer;
+  color: #2c98db;
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular",
+    "San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif
+}
+.sb-clpp-anchor:visited {
+  color: #205576; 
+}
+.sb-clpp-anchor:hover {
+  color: #58baf6;
+}
+
+.css-79elbk {
+  display: none;
+}

.storybook/theme.ts

@@ -0,0 +1,9 @@
+import { create } from '@storybook/theming/create';
+
+export default create({
+  base: 'light',
+  brandTitle: 'My custom Storybook',
+  brandUrl: '#',
+  brandImage: 'https://castlabs.com/wp-content/uploads/castlabs-logo.svg',
+  brandTarget: '_self',
+});

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)
 

README_INTERNAL.md

@@ -35,3 +35,6 @@ npm run publish
 npm run test
 ```
 
+## Docs
+
+We are transitioning to use `Storybook` for public docs. Once that is done `app` can be deleted.

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)
+}