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,43 @@
+{
+	"name": "shaka-app",
+	"version": "1.0.0",
+	"description": "A general template for an Enact Moonstone application.",
+	"author": "",
+	"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": "UNLICENSED",
+	"private": true,
+	"repository": "",
+	"enact": {
+		"theme": "moonstone"
+	},
+	"eslintConfig": {
+		"extends": "enact"
+	},
+	"eslintIgnore": [
+		"node_modules/*",
+		"build/*",
+		"dist/*"
+	],
+	"dependencies": {
+		"@enact/core": "^2.0.0",
+		"@enact/i18n": "^2.0.0",
+		"@enact/moonstone": "^2.0.0",
+		"@enact/spotlight": "^2.0.0",
+		"@enact/ui": "^2.0.0",
+		"prop-types": "^15.6.2",
+		"react": "^16.7.0",
+		"react-dom": "^16.7.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,76 @@
+import hoc from '@enact/core/hoc';
+import VideoPlayer from "@enact/moonstone/VideoPlayer";
+import React from 'react';
+import PropTypes from 'prop-types';
+import shaka from 'shaka-player';
+
+function initPlayer(config, manifestUri) {
+  // Create a Player instance.
+    const video = document.querySelector('video');
+    const player = new shaka.Player(video);
+
+    // Listen for error events.
+    player.addEventListener('error', onErrorEvent);
+
+    // Try to load a manifest.
+    // This is an asynchronous process.
+    player
+        .load(manifestUri)
+        .then(function() {
+            // This runs if the asynchronous load is successful.
+            console.log('The video has now been loaded!');
+        })
+        .catch(onError); // onError is executed if the asynchronous load fails.
+    // Configure player
+    player.configure(config);
+}
+
+function onErrorEvent(event) {
+    // Extract the shaka.util.Error object from the event.
+    onError(event.detail);
+}
+
+function onError(error) {
+    // Log the error.
+    console.error('Error code', error.code, 'object', error);
+}
+
+const defaultConfig = {
+    preferredAudioLanguage: 'en-US',
+    playRangeStart: 420
+};
+
+const ShakaPlayerDecorator = hoc(defaultConfig, (config, Wrapped) => {
+	return class extends React.Component {
+        static displayName = 'ShakaPlayerDecorator';
+
+        static propTypes = {
+            manifestUri: PropTypes.string
+        };
+
+        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!
+                initPlayer(config, this.props.manifestUri);
+            } else {
+                // This browser does not have the minimum set of APIs we need.
+                console.error('Browser not supported!');
+            }
+        }
+
+		render () {
+			const props = Object.assign({}, this.props);
+            delete props.manifestUri;
+
+			return <Wrapped {...props} />
+		}
+	}
+});
+
+const ShakaVideoPlayer = ShakaPlayerDecorator(VideoPlayer);
+
+export default ShakaVideoPlayer;

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,19 @@
+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 MainPanel = kind({
+	name: 'MainPanel',
+
+	render: (props) => (
+		<Panel {...props}>
+			<Header title="VideoPlayer" titleBelow="powered by Shaka Player" />
+			<ShakaVideoPlayer autoPlay manifestUri={sintelManifestUri} />
+		</Panel>
+	)
+});
+
+export default MainPanel;