From fbd023c0320e99db6b8ea01cf77a357c0e2ffc63 Mon Sep 17 00:00:00 2001
From: Prateek Rastogi <prastogi34@gmail.com>
Date: Thu, 12 Apr 2018 15:52:37 +0530
Subject: [PATCH] added example of integration with videojs (#4139)

* added videojs integration example

* added videojs example

* lint fix

* Revert "lint fix"

This reverts commit 39010fa0b58a66d06b91987a5bef46c044181470.

* removed unexpected lint fix
---
 examples/with-videojs/README.md            | 41 ++++++++++++++++++++++
 examples/with-videojs/components/Player.js | 35 ++++++++++++++++++
 examples/with-videojs/next.config.js       | 20 +++++++++++
 examples/with-videojs/package.json         | 19 ++++++++++
 examples/with-videojs/pages/index.js       | 27 ++++++++++++++
 5 files changed, 142 insertions(+)
 create mode 100644 examples/with-videojs/README.md
 create mode 100644 examples/with-videojs/components/Player.js
 create mode 100644 examples/with-videojs/next.config.js
 create mode 100644 examples/with-videojs/package.json
 create mode 100644 examples/with-videojs/pages/index.js

diff --git a/examples/with-videojs/README.md b/examples/with-videojs/README.md
new file mode 100644
index 00000000..c7244c08
--- /dev/null
+++ b/examples/with-videojs/README.md
@@ -0,0 +1,41 @@
+[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-videojs)
+
+# video.js example
+
+## How to use
+
+### Using `create-next-app`
+
+Download [`create-next-app`](https://github.com/segmentio/create-next-app) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-videojs with-videojs-app
+# or
+yarn create next-app --example with-videojs with-videojs-app
+```
+
+### Download manually
+
+Download the example [or clone the repo](https://github.com/zeit/next.js):
+
+```bash
+curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-videojs
+cd with-videojs
+```
+
+Install it and run:
+
+```bash
+npm install
+npm run dev
+```
+
+Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))
+
+```bash
+now
+```
+
+## The idea behind the example
+
+This example shows how to use Next.js along with [Video.js](http://videojs.com) including handling of default styles.
diff --git a/examples/with-videojs/components/Player.js b/examples/with-videojs/components/Player.js
new file mode 100644
index 00000000..5b7d1f40
--- /dev/null
+++ b/examples/with-videojs/components/Player.js
@@ -0,0 +1,35 @@
+import React, { Component } from 'react'
+import videojs from 'video.js'
+import 'videojs-youtube'
+import 'video.js/dist/video-js.css'
+
+class Player extends Component {
+  componentDidMount () {
+    // instantiate Video.js
+    this.player = videojs(this.videoNode, this.props, function onPlayerReady () {
+      console.log('onPlayerReady', this)
+    })
+  }
+
+  // destroy player on unmount
+  componentWillUnmount () {
+    if (this.player) {
+      this.player.dispose()
+    }
+  }
+
+  // wrap the player in a div with a `data-vjs-player` attribute
+  // so videojs won't create additional wrapper in the DOM
+  // see https://github.com/videojs/video.js/pull/3856
+  render () {
+    return (
+      <div>
+        <div data-vjs-player>
+          <video ref={node => (this.videoNode = node)} className='video-js' />
+        </div>
+      </div>
+    )
+  }
+}
+
+export default Player
diff --git a/examples/with-videojs/next.config.js b/examples/with-videojs/next.config.js
new file mode 100644
index 00000000..9313dfca
--- /dev/null
+++ b/examples/with-videojs/next.config.js
@@ -0,0 +1,20 @@
+const withCss = require('@zeit/next-css')
+
+module.exports = withCss({
+  webpack (config) {
+    config.module.rules.push({
+      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
+      use: {
+        loader: 'url-loader',
+        options: {
+          limit: 100000,
+          publicPath: './',
+          outputPath: 'static/',
+          name: '[name].[ext]'
+        }
+      }
+    })
+
+    return config
+  }
+})
diff --git a/examples/with-videojs/package.json b/examples/with-videojs/package.json
new file mode 100644
index 00000000..95d9f8a6
--- /dev/null
+++ b/examples/with-videojs/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "with-videojs",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@zeit/next-css": "^0.1.2",
+    "next": "6.0.0-canary.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "url-loader": "^0.6.2",
+    "video.js": "^6.7.3",
+    "videojs-youtube": "^2.4.1"
+  },
+  "license": "ISC"
+}
diff --git a/examples/with-videojs/pages/index.js b/examples/with-videojs/pages/index.js
new file mode 100644
index 00000000..e1930fd8
--- /dev/null
+++ b/examples/with-videojs/pages/index.js
@@ -0,0 +1,27 @@
+import Head from 'next/head'
+import React from 'react'
+import Player from '../components/Player'
+
+export default class Index extends React.Component {
+  render () {
+    const videoJsOptions = {
+      techOrder: ['youtube'],
+      autoplay: true,
+      controls: true,
+      sources: [{
+        src: 'https://www.youtube.com/watch?v=jiLkBxw2pbs',
+        type: 'video/youtube'
+      }]
+    }
+
+    return (
+      <div>
+        <Head>
+          <link rel='stylesheet' href='/_next/static/style.css' />
+        </Head>
+
+        <Player {...videoJsOptions} />
+      </div>
+    )
+  }
+}