From be7eee98da5c48d8c4e1330961f24c451d3c8799 Mon Sep 17 00:00:00 2001 From: Davide Favia Date: Tue, 4 Apr 2017 15:33:41 +0200 Subject: [PATCH] Plugin implementation (#1) * Similar behaviors for Android & iOS * Updated README with arguments type for callbacks --- CHANGELOG.md | 3 + README.md | 82 +++++++++++++------ package.json | 12 +++ plugin.xml | 47 +++++++++++ src/android/com/davidefavia/InAppYouTube.java | 72 ++++++++++++++++ src/ios/InAppYouTube.h | 8 ++ src/ios/InAppYouTube.m | 47 +++++++++++ www/plugin.js | 13 +++ 8 files changed, 258 insertions(+), 26 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 package.json create mode 100644 plugin.xml create mode 100644 src/android/com/davidefavia/InAppYouTube.java create mode 100644 src/ios/InAppYouTube.h create mode 100644 src/ios/InAppYouTube.m create mode 100644 www/plugin.js diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..f16ceb8 --- /dev/null +++ b/CHANGELOG.md @@ -0,0 +1,3 @@ +# v1.0.0 (2017-04-04) + +First release. diff --git a/README.md b/README.md index 04f90e3..108a709 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # cordova-plugin-in-app-youtube -Open YouTube video in app or using the browser as fallback for Android & iOS. +Open YouTube video in app or use the browser as fallback for Android & iOS. Plugin goal is to show YouTube video via native app or mobile website to count for views. + +If you need to stream YouTube video content without using its own player, just check [Glitchbone/CordovaYoutubeVideoPlayer](https://github.com/Glitchbone/CordovaYoutubeVideoPlayer) project. ## Getting Started @@ -9,7 +11,7 @@ This plugin has been tested with Cordova 6.5.0, Android 7.1.1 and iOS 10.3. Install via Cordova: ``` -$ cordova plugin install https://github.com/davidefavia/cordova-plugin-in-app-youtube +$ cordova plugin add https://github.com/davidefavia/cordova-plugin-in-app-youtube ``` ## Reference @@ -23,34 +25,62 @@ It opens a YouTube video. |Parameter|Type|Default|Description| |-|:-:|:-:|-| |videoId|string||YouTube video identifier, _e.g._ `9bZkp7q19f0`.| -|options|object|{}|Use `fullscreen = true` to enable fullscreen (only Android).| -|successCallback|function|function() {}|Returns plugin result object with videoId, options and type key. type can be `application` or `webview` depending on which application opened the video.| -|errorCallback|function|function() {}|Returns error or exception message.| +|options|object|{}|Use `fullscreen = true` to enable fullscreen.| +|successCallback|function|function() {}|Plugin returns result object with `videoId` (string), `options` (object) and `type` (string) key. `type` can be `application` or `webview` depending on which application opened the video.| +|errorCallback|function|function() {}|Plugin returns error or exception message (string).| Platforms have different behaviors. -#### Android - -- It shows the video using the YouTube activity if the native app is installed. On back button press the native video closes and the WebView gets focus. It is possible to play fullscreen video. -- It opens default web browser if the native YouTube app is not installed. - -#### iOS - -- It shows the video using the native YouTube app if it is installed. It is NOT possible to play fullscreen video. -- It opens default web browser if the native YouTube app is not installed. There is a back link in the statusbar to go back to Cordova application. - -## Versioning - -I use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/davidefavia/cordova-plugin-in-app-youtube/tags). - -## Author - -[davidefavia](https://github.com/davidefavia) +|Platform|YouTube app installed|fullscreen option|Behavior| +|:-:|:-:|:-:|-| +|Android|Yes|true|YouTube app plays video in landscape mode (even if your app forbids this orientation) in fullscreen inside your app. Back button lets Cordova WebView take focus back.| +|Android|Yes|false|YouTube app plays video in portrait mode inside your app. Some related content is shown below the video player. Back button lets the Cordova WebView take focus back.| +|Android|No|true|URL `https://www.youtube.com/embed/` is opened in the default browser in full window size, browser toolbar is visible. Video is stopped by default due to Chrome for Android policies.| +|Android|No|false|URL `https://www.youtube.com/watch?v=` is opened in the default browser, browser toolbar is visible. Video is stopped by default due to Chrome for Android policies.| +|iOS|Yes|true|YouTube app plays video in portrait mode outside your app. Some related content is shown below the video player. Back button in top corner lets the Cordova WebView take focus back.| +|iOS|Yes|false|YouTube app plays video in portrait mode outside your app. Some related content is shown below the video player. Back button in top corner lets the Cordova WebView take focus back.| +|iOS|No|true|URL `https://www.youtube.com/embed/` is opened in the Safari in full window size, toolbar is visible. Video is stopped by default due to Apple policies.| +|iOS|No|false|URL `https://www.youtube.com/watch?v=` is opened in the default browser, browser toolbar is visible. Video is stopped by default due to Apple policies.| + +## Example + +```js + + + + Device Ready Example + + + + + + + +``` ## License This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. - -## Acknowledgments - -* [https://github.com/Glitchbone/CordovaYoutubeVideoPlayer] diff --git a/package.json b/package.json new file mode 100644 index 0000000..047818f --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "cordova-plugin-in-app-youtube", + "version": "1.0.0", + "cordova": { + "id": "cordova-plugin-in-app-youtube", + "platforms": [ + "android", + "ios", + ] + }, + "description": "Open YouTube video in app" +} diff --git a/plugin.xml b/plugin.xml new file mode 100644 index 0000000..8d56d2c --- /dev/null +++ b/plugin.xml @@ -0,0 +1,47 @@ + + + Cordova Plugin in app YouTube + + MIT + + https://github.com/davidefavia/cordova-plugin-in-app-youtube.git + https://github.com/davidefavia/cordova-plugin-in-app-youtube/issues + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + youtube + + + + + + diff --git a/src/android/com/davidefavia/InAppYouTube.java b/src/android/com/davidefavia/InAppYouTube.java new file mode 100644 index 0000000..1dd34d3 --- /dev/null +++ b/src/android/com/davidefavia/InAppYouTube.java @@ -0,0 +1,72 @@ +/** + */ +package com.davidefavia; + +import org.apache.cordova.CallbackContext; +import org.apache.cordova.CordovaInterface; +import org.apache.cordova.CordovaPlugin; +import org.apache.cordova.CordovaWebView; +import org.apache.cordova.PluginResult; +import org.apache.cordova.PluginResult.Status; +import org.json.JSONObject; +import org.json.JSONArray; +import org.json.JSONException; + +import android.content.Intent; +import android.net.Uri; +import android.util.Log; +import android.content.ActivityNotFoundException; + +import java.util.Date; + +public class InAppYouTube extends CordovaPlugin { + private static final String TAG = "InAppYouTube"; + + public void initialize(CordovaInterface cordova, CordovaWebView webView) { + super.initialize(cordova, webView); + + Log.d(TAG, "Initializing InAppYouTube"); + } + + public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException { + if(action.equals("openVideo")) { + String videoId = args.getString(0); + JSONObject options = args.getJSONObject(1); + this.openVideo(videoId, options, callbackContext); + } + return true; + } + + private void openVideo(String videoId, JSONObject options, CallbackContext callbackContext) { + Boolean isFullScreen = options.optBoolean("fullscreen"); + String webUrl; + if(isFullScreen) { + webUrl = "https://www.youtube.com/embed/" + videoId; + } else { + webUrl = "https://www.youtube.com/watch?v=" + videoId; + } + Intent appIntent = new Intent(Intent.ACTION_VIEW, Uri.parse("vnd.youtube://" + videoId)); + Intent webIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(webUrl)); + Log.d(TAG, "fullscreen: " + String.valueOf(options.optBoolean("fullscreen"))); + String type; + try { + appIntent.putExtra("force_fullscreen", isFullScreen); + this.cordova.getActivity().startActivity(appIntent); + type = "application"; + } catch (ActivityNotFoundException ex) { + this.cordova.getActivity().startActivity(webIntent); + type = "webview"; + } + try { + JSONObject json = new JSONObject(); + json.put("videoId", videoId); + json.put("options", options); + json.put("type", type); + callbackContext.success(json); + } catch (JSONException e) { + Log.e(TAG, e.toString()); + callbackContext.error(e.toString()); + } + } + +} diff --git a/src/ios/InAppYouTube.h b/src/ios/InAppYouTube.h new file mode 100644 index 0000000..5ffe731 --- /dev/null +++ b/src/ios/InAppYouTube.h @@ -0,0 +1,8 @@ +#import + +@interface InAppYouTube : CDVPlugin { +} + +- (void)openVideo:(CDVInvokedUrlCommand *)command; + +@end diff --git a/src/ios/InAppYouTube.m b/src/ios/InAppYouTube.m new file mode 100644 index 0000000..8a7e311 --- /dev/null +++ b/src/ios/InAppYouTube.m @@ -0,0 +1,47 @@ +#import "InAppYouTube.h" + +#import + +@implementation InAppYouTube + +- (void)pluginInitialize { +} + +- (void)openVideo:(CDVInvokedUrlCommand *)command { + NSString* videoId = [command.arguments objectAtIndex:0]; + NSDictionary* options = [command.arguments objectAtIndex:1]; + BOOL isFullScreen = [options[@"fullscreen"] boolValue]; + + NSURL *linkToAppURL = [NSURL URLWithString:[NSString stringWithFormat:@"youtube://watch?v=%@",videoId]]; + NSURL *linkToWebURL = [NSURL URLWithString:[NSString stringWithFormat:@"https://www.youtube.com/watch?v=%@",videoId]]; + if(isFullScreen) { + linkToWebURL = [NSURL URLWithString:[NSString stringWithFormat:@"https://www.youtube.com/embed/%@",videoId]]; + } + + NSMutableDictionary *dictionary = [NSMutableDictionary dictionary]; + [dictionary setObject:videoId forKey:@"videoId"]; + [dictionary setObject:options forKey:@"options"]; + + // http://stackoverflow.com/a/35409477 + if ([[UIApplication sharedApplication] canOpenURL:linkToAppURL]) { + // @TODO Check for fullscreen + // Can open the youtube app URL so launch the youTube app with this URL + [[UIApplication sharedApplication] openURL:linkToAppURL]; + [dictionary setObject:@"application" forKey:@"type"]; + } else { + // Can't open the youtube app URL so launch Safari instead + // https://useyourloaf.com/blog/openurl-deprecated-in-ios10/ + UIApplication *application = [UIApplication sharedApplication]; + if ([application respondsToSelector:@selector(openURL:options:completionHandler:)]) { + [application openURL:linkToWebURL options:@{} completionHandler:nil]; + } else { + [application openURL:linkToWebURL]; + } + [dictionary setObject:@"webview" forKey:@"type"]; + } + + CDVPluginResult *result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK messageAsDictionary:dictionary]; + [self.commandDelegate sendPluginResult:result callbackId:command.callbackId]; +} + +@end diff --git a/www/plugin.js b/www/plugin.js new file mode 100644 index 0000000..af5b22a --- /dev/null +++ b/www/plugin.js @@ -0,0 +1,13 @@ +var exec = require('cordova/exec'); + +var PLUGIN_NAME = 'InAppYouTube'; + +var noop = function() {}; + +var InAppYouTube = { + openVideo: function(videoId, options, successCallback, errorCallback) { + exec(successCallback || noop, errorCallback || noop, PLUGIN_NAME, 'openVideo', [videoId, options || {}]); + } +}; + +module.exports = InAppYouTube;