[JW8-12117] Update custom receiver app

README.md

@@ -24,6 +24,8 @@ We're using gulp as build system, currently the following tasks are available:
 $ gulp --tasks-simple
 serve         # starts a http server that serves the receiver.
 clean         # cleans the build directories.
+clean-debug   # cleans the build-debug directory.
+clean-release # cleans the build-release directory.
 watch         # watches the src directories for changes.
 default       # invokes build.
 build         # builds a debug and a release version of the receiver.
@@ -43,25 +45,26 @@ There are two options to build the Receiver Application URL.
 
 #### Using a JW Player Key
 
-1. Build and serve the receiver on a secure server that supports **HTTPS** (i.e. `https://domain.com/receiver`)
+1. Build and serve the receiver on a secure server that supports **HTTPS** (i.e. `https://domain.com/`)
 2. [URI Encode](http://meyerweb.com/eric/tools/dencoder/) your JW Player Key (i.e. `A1jqZjIUo28r0w==` becomes `A1jqZjIUo28r0w%3D%3D`)
-3. The URL is then `https://domain.com/receiver?key=A1jqZjIUo28r0w%3D%3D`
+3. The URL is then `https://domain.com/?key=A1jqZjIUo28r0w%3D%3D`
 4. To verify it is setup correct, load the URL in the browser, which will display a page with a spinner in the middle
 
 **Note:** You will not be able to customize the appearance of the receiver with this method
 
 #### Using a Configuration File
 
-1. Build and serve the receiver on a secure server that supports **HTTPS** (i.e. `https://domain.com/receiver`)
+1. Build and serve the receiver on a secure server that supports **HTTPS** (i.e. `https://domain.com/`)
 2. In the `config` folder, rename the `sample` directory to the application name you would like to use
 3. Update `config/{directoryName}/config.json` in the directory with the desired config values
-3. The URL is then `https://domain.com/receiver?appName={directoryName}`
+3. The URL is then `https://domain.com/?appName={directoryName}`
 4. To verify it is setup correct, load the URL in the browser, which will display a page with a spinner in the middle
 
 ### Receiver Application ID
 
 1. Sign in to the [Google Cast SDK Developer Console](https://cast.google.com/u/0/publish/#/signup)
 2. [Register](https://developers.google.com/cast/docs/registration) your Custom Receiver URL to obtain an application ID 
+3. You must also [register] (https://developers.google.com/cast/docs/debugging/remote_debugger) your Chromecast device if you want to debug 
 
 ### Setting up JW Player
 

gulpfile.js

@@ -5,7 +5,6 @@ let connect = require('gulp-connect');
 let mustache = require('gulp-mustache');
 let less = require('gulp-less');
 let rollup = require('rollup');
-let minifier = require('uglify-js-harmony').minify;
 let uglify = require('rollup-plugin-uglify');
 let del = require('del');
 let child_process = require('child_process');
@@ -15,7 +14,7 @@ const DEST_DEBUG = 'bin-debug/';
 const DEST_RELEASE = 'bin-release/';
 
 // The jwplayer.js version we are targeting.
-const PLAYER_VERSION = '8.1.3';
+const PLAYER_VERSION = '8.24.4';
 
 function buildTarget(target) {
     const DEST = target == 'debug' ? DEST_DEBUG : DEST_RELEASE;
@@ -61,55 +60,71 @@ function buildTarget(target) {
     // Minify release builds
     let plugins = [];
     if (target == 'release') {
-        plugins.push(uglify({}, minifier));
+        plugins.push(uglify.uglify());
     }
 
     // Rollup JS
     return rollup.rollup({
-            entry: 'src/js/main.js',
+            input: './src/js/main.js',
             plugins: plugins,
+        }).then((bundle) => {
+            return bundle.write({
+            //sourceMap: target != 'release',
+            file: `./${DEST}/app.js`,
+            name: 'JWCast',
+            format: 'iife',
             globals: {
                 jwplayer: 'jwplayer',
                 cast: 'cast',
                 google: 'google'
             }
-        }).then((bundle) => {
-            bundle.write({
-            //sourceMap: target != 'release',
-            dest: DEST + 'app.js',
-            format: 'iife',
-            moduleName: 'JWCast'
         });
-});
+    });
 }
 
 // Serves bin-debug/ and config/ at localhost:8080.
-gulp.task('serve', () => {
+gulp.task('serve', (cb) => {
     connect.server({
-    root: ['bin-debug', 'config'],
-    port: 8080
-});
+        root: ['bin-debug', 'config'],
+        port: 8080,
+        livereload: true,
+        name: 'Custom Receiver' 
+    });
+
+    cb();
 });
 
 // Cleanup task, deletes bin-debug and bin-release.
-gulp.task('clean', () => { return del(['bin-debug/', 'bin-release/']) });
-
-// Watch task: will recompile when changes have been detected.
-gulp.task('watch', ['clean', 'build'], () => {
-    gulp.watch(['src/**/*.js', 'src/*.html', 'src/style/**/*.less'], ['build']);
+gulp.task('clean', () => { 
+    return del(['bin-debug', 'bin-release']);
 });
 
-// Task invoked when gulp is being executed without parameters.
-gulp.task('default', ['build']);
+// Delete bin-debug
+gulp.task('clean-debug', () => { 
+    return del(['bin-debug']);
+});
 
-// Builds a debug and a release package.
-gulp.task('build', ['clean', 'build:debug', 'build:release']);
+// Delete bin-release
+gulp.task('clean-release', () => { 
+    return del(['bin-release']);
+});
 
 // Builds a debug package.
-gulp.task('build:debug', ['clean'], () => { return buildTarget('debug') });
+gulp.task('build:debug', gulp.series('clean-debug', () => { return buildTarget('debug') }));
 
 // Builds a release package.
-gulp.task('build:release', ['clean'], () => { return buildTarget('release') });
+gulp.task('build:release', gulp.series('clean-release', () => { return buildTarget('release') }));
+
+// Builds a debug and a release package.
+gulp.task('build', gulp.series('build:debug', 'build:release'));
+
+// Watch task: will recompile when changes have been detected.
+gulp.task('watch', () => {
+    return gulp.watch(['src/**/*.js', 'src/*.html', 'src/style/**/*.less'], gulp.series('build'));
+});
+
+// Task invoked when gulp is being executed without parameters.
+gulp.task('default', gulp.series('build'));
 
 // Development task: serves bin-debug and watches for changes.
-gulp.task('dev', ['watch', 'serve']);
+gulp.task('dev', gulp.series('serve', 'watch'));

package.json

@@ -6,16 +6,16 @@
   "version": "1.0.0",
   "license": "CC-BY-NC-SA-3.0",
   "devDependencies": {
-    "del": "2.2.2",
-    "eslint": "3.12.0",
+    "del": "6.0.0",
+    "eslint": "8.4.1",
     "eslint-config-jwplayer-base": "7.1.0",
-    "eslint-plugin-import": "1.16.0",
-    "gulp": "3.9.1",
-    "gulp-connect": "5.0.0",
-    "gulp-less": "3.3.0",
-    "gulp-mustache": "2.3.0",
-    "rollup": "0.36.4",
-    "rollup-plugin-uglify": "1.0.1",
+    "eslint-plugin-import": "2.25.3",
+    "gulp": "4.0.2",
+    "gulp-connect": "5.7.0",
+    "gulp-less": "5.0.0",
+    "gulp-mustache": "5.0.0",
+    "rollup": "2.61.1",
+    "rollup-plugin-uglify": "6.0.4",
     "uglify-js-harmony": "2.7.7"
   },
   "engines": {

src/index.html

@@ -9,7 +9,10 @@
 	<link rel="stylesheet" href="css/theme/theme-dark.css" />
 	<link rel="stylesheet" href="css/theme/theme-light.css" />
 
-	<script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
+	<!-- <script src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script> -->
+	<script src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js"></script>
+	<!-- Cast Debug Logger -->
+	<script src="//www.gstatic.com/cast/sdk/libs/devtools/debug_layer/caf_receiver_logger.js"></script>
 	<script src="{{{jwplayer}}}"></script>
 	<script src="app.js"></script>
 </head>