docs: add GitHub Pages (#87)

* docs: init website

.gitignore

@@ -13,3 +13,7 @@ package-lock.json
 
 # Editor
 .vscode
+
+# gatsby
+.cache
+website/public

.travis.yml

@@ -6,8 +6,9 @@ node_js:
 script:
   - yarn run format
   - yarn run lint
-  - yarn run build
+  - yarn run build:lib
   - yarn run test:coverage
+  - yarn workspace website run build
 
 after_success:
   - npx codecov --file=./coverage/lcov.info

package.json

@@ -10,7 +10,8 @@
   "license": "MIT",
   "workspaces": [
     "packages/*",
-    "example"
+    "example",
+    "website"
   ],
   "keywords": [
     "zhihu",
@@ -36,8 +37,9 @@
     "test": "jest",
     "test:coverage": "jest --coverage",
     "test:watch": "jest --watch --notify",
-    "build:lib": "lerna run build --parallel --ignore example --ignore griffith-standalone",
+    "build:lib": "lerna run build --parallel --ignore example --ignore website --ignore griffith-standalone",
     "build:standalone": "lerna run --scope griffith-standalone build",
+    "build:website": "lerna run --scope website build",
     "build": "yarn build:lib && yarn build:standalone",
     "build:watch": "lerna run build:watch --stream --parallel",
     "release": "yarn build && lerna publish",

website/gatsby-config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  siteMetadata: {
+    title: `Griffith`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/md`,
+        name: 'markdown-pages',
+      },
+    },
+    `gatsby-transformer-remark`,
+    `gatsby-plugin-react-helmet`,
+  ],
+}

website/md/build-options.md

@@ -0,0 +1,33 @@
+We rely on [hls.js](https://github.com/video-dev/hls.js/) to play M3U8 format video. If you don't want to build hls.js into your app, you can use the following methods:
+
+### Use the external option of webpack
+
+Add the following options to your webpack configuration:
+
+```js
+externals: {
+  'hls.js/dist/hls.light.min': 'Hls',
+},
+```
+
+Then manually load hls.js in html:
+
+```html
+<script src="https://unpkg.com/hls.js@0.7.11/dist/hls.light.min.js"></script>
+```
+
+### Remove M3U8 support
+
+If you are sure that you will not support M3U8 video, you may not use hls.js.
+
+Add the following options to your webpack configuration:
+
+```js
+plugins: [
+  new webpack.DefinePlugin({
+    __WITHOUT_HLSJS__: JSON.stringify(true),
+  }),
+],
+```
+
+Note: In this case, an error warning is issued if an attempt is made to play an M3U8 video.

website/md/griffith-standalone.md

@@ -0,0 +1,23 @@
+griffith-standalone is a umd js file bundled with React, React DOM and other dependencies. You can use it by add a `script` tag in your HTML file.
+
+```html
+<div id="player"></div>
+<script
+  crossorigin
+  src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"
+></script>
+<script>
+  const target = document.getElementById('player')
+
+  // create player instance
+  const player = Griffith.createPlayer(element)
+
+  // load video
+  player.render(props)
+
+  // dispose video
+  player.dispose()
+</script>
+```
+
+Read [Griffith docs](/usage/) to know about `props`.

website/md/quick-start.md

@@ -0,0 +1,45 @@
+### React application
+
+```bash
+yarn add griffith
+```
+
+```js
+import Player from 'griffith'
+
+const sources = {
+  hd: {
+    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
+  },
+  sd: {
+    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
+  },
+}
+
+render(<Player sources={sources} />)
+```
+
+[Detailed usage](./usage)
+
+**Note: Griffith is not supporting SSR application**
+
+### non-React application
+
+```html
+<script src="https://unpkg.com/griffith-standalone/dist/index.umd.min.js"></script>
+```
+
+```js
+const sources = {
+  hd: {
+    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_hd.mp4',
+  },
+  sd: {
+    play_url: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
+  },
+}
+
+Griffith.createPlayer(element).render({sources})
+```
+
+[Standalone mode detailed usage](./griffith-standalone)

website/md/technical-details.md

@@ -0,0 +1,58 @@
+| format | parse        | Media Source Extension (MSE)                         |
+| ------ | ------------ | ---------------------------------------------------- |
+| M3U8   | HLS          | [hls.js](https://github.com/video-dev/hls.js/)       |
+| mp4    | griffith-mp4 | [griffith-mp4.js](https://github.com/zhihu/griffith) |
+
+### Confirm whether HLS is supported
+
+```js
+document.createElement('video').canPlayType('application/vnd.apple.mpegURL')
+```
+
+Currently supported browsers are: Safari, Edge, Chrome, Chrome for Android.
+
+### Confirm whether MSE is supported
+
+[hls.js's `Hls.isSupported()` method](https://github.com/video-dev/hls.js/blob/master/src/is-supported.js) is used to determine whether MSE is supported.
+
+<details>
+
+<summary>Code</summary>
+
+<p>
+
+```js
+function getMediaSource() {
+  if (typeof window !== 'undefined') {
+    return window.MediaSource || window.WebKitMediaSource
+  }
+}
+
+function isSupported() {
+  const mediaSource = getMediaSource()
+  const sourceBuffer = window.SourceBuffer || window.WebKitSourceBuffer
+  const isTypeSupported =
+    mediaSource &&
+    typeof mediaSource.isTypeSupported === 'function' &&
+    mediaSource.isTypeSupported('video/mp4; codecs="avc1.42E01E,mp4a.40.2"')
+
+  // if SourceBuffer is exposed ensure its API is valid
+  // safari and old version of Chrome doe not expose SourceBuffer globally so checking SourceBuffer.prototype is impossible
+  const sourceBufferValidAPI =
+    !sourceBuffer ||
+    (sourceBuffer.prototype &&
+      typeof sourceBuffer.prototype.appendBuffer === 'function' &&
+      typeof sourceBuffer.prototype.remove === 'function')
+  return !!isTypeSupported && !!sourceBufferValidAPI
+}
+```
+
+</p>
+
+</details>
+
+Support details: https://caniuse.com/#feat=mediasource
+
+### Video quality switching
+
+The API returns multiple quality URLs, users can manually switch video quality, and the player can automatically switch video quality.

website/md/usage.md

@@ -0,0 +1,57 @@
+```bash
+yarn add griffith
+# Griffith uses hls.js to play m3u8 format video.
+# If you don't want to install hls.js, please ref the build part.
+```
+
+```js
+import Player from 'griffith'
+
+render(<Player {...props} />)
+```
+
+### `Props`
+
+| Name                  | Type                                             | Default   | Description                                                              |
+| --------------------- | ------------------------------------------------ | --------- | ------------------------------------------------------------------------ |
+| `id`                  | `string`                                         |           | Unique identifier of the player instance                                 |
+| `title`               | `string`                                         |           | Video title                                                              |
+| `cover`               | `string`                                         |           | Video cover image                                                        |
+| `duration`            | `number`                                         |           | Initial video duration. Use actual values after video metadata is loaded |
+| `sources`             | `sources`                                        |           | Video playback data                                                      |
+| `standalone`          | `boolean`                                        | `false`   | Enable standalone mode                                                   |
+| `onBeforePlay`        | `function`                                       | `void`    | Callback function before video playback                                  |
+| `shouldObserveResize` | `boolean`                                        | `false`   | Listen to the window resize                                              |
+| `initialObjectFit`    | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit                                                               |
+| `useMSE`              | `boolean`                                        | `false`   | Enable Media Source Extensions™                                          |
+| `locale`              | `en \| ja \| zh-Hans \| zh-Hant`                 | `en`      | UI Locale                                                                |
+
+`sources`:
+
+```ts
+interface sources {
+  [key in ('ld' | 'sd' | 'hd')]: {
+    bitrate?: number
+    duration?: number
+    format?: string
+    height?: number
+    width?: number
+    play_url: string
+    size?: number
+  }
+}
+```
+
+### Standalone mode
+
+The standalone mode indicates that the player is the only content of the document and is generally used as an internal page of the iframe.
+
+The behavior in standalone mode is:
+
+- Will set the title of the document to the title of the video.
+- Enable shortcut support (listen to the keydown event on document).
+- Will send a message to the parent page, the parent page can listen to these events and then communicate with the player.
+
+### Cross-window meesage with player
+
+use [griffith-message](../packages/griffith-message#README)

website/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "website",
+  "version": "1.4.4",
+  "private": true,
+  "scripts": {
+    "build": "gatsby build",
+    "start": "gatsby develop"
+  },
+  "dependencies": {
+    "gatsby": "^2.3.27",
+    "gatsby-plugin-react-helmet": "^3.0.12",
+    "gatsby-source-filesystem": "^2.0.32",
+    "gatsby-transformer-remark": "^2.3.11",
+    "griffith": "1.4.3",
+    "normalize.css": "^8.0.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-helmet": "^5.2.0"
+  }
+}

website/src/components/CodeBlock/CodeBlock.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const CodeBlock = ({children}) => (
+  <pre>
+    <code>{children}</code>
+  </pre>
+)
+
+export default CodeBlock

website/src/components/CodeBlock/index.js

@@ -0,0 +1 @@
+export {default} from './CodeBlock'

website/src/components/Features/Features.css

@@ -0,0 +1,12 @@
+.features-grid {
+  display: flex;
+}
+
+.features-grid > div {
+  flex: 1;
+  margin-left: 1em;
+}
+
+.features-grid > div:first-child {
+  margin-left: 0;
+}

website/src/components/Features/Features.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import './Features.css'
+
+const Features = () => (
+  <section className="features-grid">
+    <div>
+      <h3>Streaming</h3>
+      <p>
+        Griffith makes streaming easy. Whether your video format is mp4 or hls,
+        Griffith can use Media Source Extension (MSE) for segment loading.
+      </p>
+    </div>
+    <div>
+      <h3>Extensibility</h3>
+      <p>
+        Griffith makes it simple to support video features in React apps. It
+        also supports the UMD (Universal Module Definition) patterns for direct
+        use in the browser if your application is not based on React.
+      </p>
+    </div>
+    <div>
+      <h3>Reliability</h3>
+      <p>
+        Griffith has been widely used in the web and mobile web of{' '}
+        <a
+          href="https://www.zhihu.com"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Zhihu
+        </a>
+        .
+      </p>
+    </div>
+  </section>
+)
+
+export default Features

website/src/components/Features/index.js

@@ -0,0 +1 @@
+export {default} from './Features'

website/src/components/MainContent/MainContent.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const MainContent = ({children}) => (
+  <main className="main-content">{children}</main>
+)
+
+export default MainContent

website/src/components/MainContent/index.js

@@ -0,0 +1 @@
+export {default} from './MainContent'