PLAT-80843: Add Shaka Video Player sample

pattern-shaka-video-player/.gitignore

@@ -0,0 +1,15 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+dist
+
+# misc
+.DS_Store
+npm-debug.log

pattern-shaka-video-player/README.md

@@ -0,0 +1,9 @@
+## Shaka Video Player pattern
+
+A sample Enact application that demonstrates how to use [shaka-player](https://shaka-player-demo.appspot.com/docs/api/index.html).
+
+Run `npm install` then `npm run serve` to have the app running on [http://localhost:8080](http://localhost:8080), where you can view it in your browser.
+
+---
+
+This project was bootstrapped with the Enact [cli](https://github.com/enactjs/cli).

pattern-shaka-video-player/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "shaka-app",
+	"version": "1.0.0",
+	"description": "A sample Enact app that showcases a VideoPlayer powered by Shaka Player",
+	"author": "@teckliew",
+	"main": "src/index.js",
+	"scripts": {
+		"serve": "enact serve",
+		"pack": "enact pack",
+		"pack-p": "enact pack -p",
+		"watch": "enact pack --watch",
+		"clean": "enact clean",
+		"lint": "enact lint .",
+		"license": "enact license",
+		"test": "enact test",
+		"test-watch": "enact test --watch"
+	},
+	"license": "Apache-2.0",
+	"private": true,
+	"repository": "",
+	"enact": {
+		"theme": "moonstone"
+	},
+	"eslintConfig": {
+		"extends": "enact"
+	},
+	"eslintIgnore": [
+		"node_modules/*",
+		"build/*",
+		"dist/*"
+	],
+	"dependencies": {
+		"@enact/core": "^3.0.0-beta.1",
+		"@enact/i18n": "^3.0.0-beta.1",
+		"@enact/moonstone": "^3.0.0-beta.1",
+		"@enact/spotlight": "^3.0.0-beta.1",
+		"@enact/ui": "^2.0.0",
+		"ilib": "^14.3.0",
+		"prop-types": "^15.6.2",
+		"react": "^16.8.0",
+		"react-dom": "^16.8.0",
+		"shaka-player": "^2.5.2"
+	}
+}

pattern-shaka-video-player/resources/ilibmanifest.json

@@ -0,0 +1,3 @@
+{
+	"files": []
+}

pattern-shaka-video-player/src/App/App.js

@@ -0,0 +1,27 @@
+import kind from '@enact/core/kind';
+import MoonstoneDecorator from '@enact/moonstone/MoonstoneDecorator';
+import Panels from '@enact/moonstone/Panels';
+import React from 'react';
+
+import MainPanel from '../views/MainPanel';
+
+import css from './App.module.less';
+
+const App = kind({
+	name: 'App',
+
+	styles: {
+		css,
+		className: 'app'
+	},
+
+	render: (props) => (
+		<div {...props}>
+			<Panels>
+				<MainPanel />
+			</Panels>
+		</div>
+	)
+});
+
+export default MoonstoneDecorator(App);

pattern-shaka-video-player/src/App/App.module.less

@@ -0,0 +1,3 @@
+.app {
+	// styles can be put here
+}

pattern-shaka-video-player/src/App/package.json

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

pattern-shaka-video-player/src/components/ShakaVideoPlayer.js

@@ -0,0 +1,89 @@
+import {forward, handle} from '@enact/core/handle';
+import hoc from '@enact/core/hoc';
+import VideoPlayer from "@enact/moonstone/VideoPlayer";
+import PropTypes from 'prop-types';
+import React from 'react';
+import shaka from 'shaka-player';
+
+const ShakaVideoPlayerDecorator = hoc((config, Wrapped) => {
+	return class extends React.Component {
+		static displayName = 'ShakaVideoPlayerDecorator'
+
+		static propTypes = {
+			config: PropTypes.object,
+			manifestUri: PropTypes.string,
+			onError: PropTypes.func
+		}
+
+		componentDidMount () {
+			// Install built-in polyfills to patch browser incompatibilities.
+			shaka.polyfill.installAll();
+
+			// Check to see if the browser supports the basic APIs Shaka needs.
+			if (shaka.Player.isBrowserSupported()) {
+				// Everything looks good!
+				this.initPlayer();
+			} else {
+				// This browser does not have the minimum set of APIs we need.
+				console.error('Browser not supported!');
+			}
+		}
+
+		onErrorEvent = (event) => {
+			// Extract the shaka.util.Error object from the event.
+			this.onError(event.detail);
+		}
+
+		onError = handle(
+			forward('onError')
+		).bindAs(this, 'onError')
+
+		initPlayer = () => {
+			// Create a Player instance with videoNode.
+			const player = new shaka.Player(this.videoNode);
+
+			// Listen for error events.
+			player.addEventListener('error', this.onErrorEvent);
+
+			// Try to load a manifest.
+			// This is an asynchronous process.
+			player
+				.load(this.props.manifestUri)
+				.then(function () {
+					// This runs if the asynchronous load is successful.
+					console.log('The video has now been loaded!');
+				})
+				.catch(this.onError); // onError is executed if the asynchronous load fails.
+
+			// Configuration for the player here
+			// https://shaka-player-demo.appspot.com/docs/api/tutorial-config.html
+			const playerConfig = {...config, ...this.props.config};
+			player.configure(playerConfig);
+		}
+
+		setWrappedRef = (node) => {
+			if (node && node.getVideoNode) {
+				// By default, moonstone/VideoPlayer uses ui/Media for its videoComponent. To get
+				// the underlying <video> node, we're using the private `media` member.
+				this.videoNode = node.getVideoNode().media;
+			}
+		}
+
+		render () {
+			const props = {...this.props};
+
+			delete props.config;
+			delete props.manifestUri;
+
+			return <Wrapped {...props} ref={this.setWrappedRef} />
+		}
+	}
+});
+
+const ShakaVideoPlayer = ShakaVideoPlayerDecorator(VideoPlayer);
+
+export default ShakaVideoPlayer;
+export {
+	ShakaVideoPlayer,
+	ShakaVideoPlayerDecorator
+};

pattern-shaka-video-player/src/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import {render} from 'react-dom';
+import App from './App';
+
+const appElement = (<App />);
+
+// In a browser environment, render instead of exporting
+if (typeof window !== 'undefined') {
+	render(appElement, document.getElementById('root'));
+}
+
+export default appElement;

pattern-shaka-video-player/src/views/MainPanel.js

@@ -0,0 +1,26 @@
+import kind from '@enact/core/kind';
+import {Panel, Header} from '@enact/moonstone/Panels';
+import React from 'react';
+import ShakaVideoPlayer from '../components/ShakaVideoPlayer';
+
+const sintelManifestUri = 'https://storage.googleapis.com/shaka-demo-assets/sintel/dash.mpd';
+const playerConfig = {
+	preferredAudioLanguage: 'en-US',
+	playRangeStart: 420
+};
+
+const MainPanel = kind({
+	name: 'MainPanel',
+
+	render: (props) => (
+		<Panel {...props}>
+			<Header title="VideoPlayer" titleBelow="powered by Shaka Player" />
+			<ShakaVideoPlayer
+				config={playerConfig}
+				manifestUri={sintelManifestUri}
+			/>
+		</Panel>
+	)
+});
+
+export default MainPanel;