When you visit a website in Chrome and play a <audio> element, chrome adds a notification with a play/pause btn to the notifications area. Is it possible to do the same with a webview app?
I've managed to get things up and running in Android Studio, but can't figure out the notification thing
Any pointers?
Edit: Here's an example of what I mean: https://developers.google.com/web/updates/2015/07/media-notifications Is that even possible?
Here's an example that I made, this is allot for StackOverflow but there's no documentation for this. https://gist.github.com/DrBrad/7574712c6140ccc468212afa04d9e458
Put this in the WebChromeClient.java
@Override
public void onProgressChanged(final WebView view, int newProgress){
super.onProgressChanged(view, newProgress);
if(newProgress == 100){
String code = "var videoElement;" +
"for(var i = 0; i < document.getElementsByTagName('video').length; i++){" +
" var vid = document.getElementsByTagName('video')[0];" +
" vid.onplay = function(){" +
" videoElement = vid;" +
" JSOUT.videoAction('true');" +
" };" +
" vid.onpause = function(){" +
" videoElement = vid;" +
" JSOUT.videoAction('false');" +
" };" +
"}";
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
wv.evaluateJavascript(code, null);
}else{
wv.loadUrl("javascript:"+code);
}
}
}
Put this in the JSInterface.java
public class JSInterface {
public static boolean playing;
@JavascriptInterface
public void videoAction(String type){
Log.e("Info", type);
playing = Boolean.parseBoolean(type);
if(playing){
NotificationManager mNotificationManager = (NotificationManager) activity.getSystemService(Context.NOTIFICATION_SERVICE);
Notification.Builder builder = new Notification.Builder(activity);
Notification notification = builder.getNotification();
notification.icon = R.drawable.icon;
RemoteViews contentView = new RemoteViews(activity.getPackageName(), R.layout.custom_notification);
notification.contentView = contentView;
notification.flags |= Notification.FLAG_ONGOING_EVENT;
contentView.setTextViewText(R.id.title, "Browser");
contentView.setTextViewText(R.id.desc, "This is a description. - PLAYING");
contentView.setImageViewResource(R.id.pausePlay, R.drawable.pause);
PendingIntent pendingSwitchIntent = PendingIntent.getBroadcast(activity, 0, new Intent(activity, NotificationPausePlay.class), 0);
contentView.setOnClickPendingIntent(R.id.pausePlay, pendingSwitchIntent);
mNotificationManager.notify(99, notification);
}else{
NotificationManager mNotificationManager = (NotificationManager) activity.getSystemService(Context.NOTIFICATION_SERVICE);
Notification.Builder builder = new Notification.Builder(activity);
Notification notification = builder.getNotification();
notification.icon = R.drawable.icon;
RemoteViews contentView = new RemoteViews(activity.getPackageName(), R.layout.custom_notification);
notification.contentView = contentView;
notification.flags |= Notification.FLAG_ONGOING_EVENT;
contentView.setTextViewText(R.id.title, "Browser");
contentView.setTextViewText(R.id.desc, "This is a description. - PAUSED");
contentView.setImageViewResource(R.id.pausePlay, R.drawable.play);
PendingIntent pendingSwitchIntent = PendingIntent.getBroadcast(activity, 0, new Intent(activity, NotificationPausePlay.class), 0);
contentView.setOnClickPendingIntent(R.id.pausePlay, pendingSwitchIntent);
mNotificationManager.notify(99, notification);
}
}
}
Put this in NotificationPausePlay.java
public class NotificationPausePlay extends BroadcastReceiver {
@Override
public void onReceive(Context context, Intent intent){
Log.e("Here", "I am here");
if(playing){
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
wv.evaluateJavascript("videoElement.pause();", null);
}else{
wv.loadUrl("javascript:videoElement.pause();");
}
NotificationManager mNotificationManager = (NotificationManager) activity.getSystemService(Context.NOTIFICATION_SERVICE);
Notification.Builder builder = new Notification.Builder(activity);
Notification notification = builder.getNotification();
notification.icon = R.drawable.icon;
RemoteViews contentView = new RemoteViews(activity.getPackageName(), R.layout.custom_notification);
notification.contentView = contentView;
notification.flags |= Notification.FLAG_ONGOING_EVENT;
contentView.setTextViewText(R.id.title, "Browser");
contentView.setTextViewText(R.id.desc, "This is a description. - PAUSED");
contentView.setImageViewResource(R.id.pausePlay, R.drawable.play);
PendingIntent pendingSwitchIntent = PendingIntent.getBroadcast(activity, 0, new Intent(activity, NotificationPausePlay.class), 0);
contentView.setOnClickPendingIntent(R.id.pausePlay, pendingSwitchIntent);
mNotificationManager.notify(99, notification);
playing = false;
}else{
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT){
wv.evaluateJavascript("videoElement.play();", null);
}else{
wv.loadUrl("javascript:videoElement.play();");
}
NotificationManager mNotificationManager = (NotificationManager) activity.getSystemService(Context.NOTIFICATION_SERVICE);
Notification.Builder builder = new Notification.Builder(activity);
Notification notification = builder.getNotification();
notification.icon = R.drawable.icon;
RemoteViews contentView = new RemoteViews(activity.getPackageName(), R.layout.custom_notification);
notification.contentView = contentView;
notification.flags |= Notification.FLAG_ONGOING_EVENT;
contentView.setTextViewText(R.id.title, "Browser");
contentView.setTextViewText(R.id.desc, "This is a description. - PLAYING");
contentView.setImageViewResource(R.id.pausePlay, R.drawable.play);
PendingIntent pendingSwitchIntent = PendingIntent.getBroadcast(activity, 0, new Intent(activity, NotificationPausePlay.class), 0);
contentView.setOnClickPendingIntent(R.id.pausePlay, pendingSwitchIntent);
mNotificationManager.notify(99, notification);
playing = true;
}
}
}
Put this in the custom_notification.xml
<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="10dp"
android:background="#e6e6e6">
<ImageView
android:layout_width="45dp"
android:layout_height="45dp"
android:id="@+id/icon"
android:src="@drawable/icon"
android:layout_centerVertical="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginRight="10dp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/title"
android:textSize="16dp"
android:textStyle="bold"
android:textColor="#000000"
android:singleLine="true"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/icon"
android:layout_toEndOf="@+id/icon"
android:layout_toLeftOf="@+id/pausePlay"
android:layout_toStartOf="@+id/pausePlay" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/desc"
android:textSize="16dp"
android:textColor="#5f5f5f"
android:singleLine="true"
android:layout_below="@+id/title"
android:layout_toRightOf="@+id/icon"
android:layout_toEndOf="@+id/icon"
android:layout_toLeftOf="@+id/pausePlay"
android:layout_toStartOf="@+id/pausePlay"/>
<ImageButton
android:layout_width="40dp"
android:layout_height="40dp"
android:id="@+id/pausePlay"
android:scaleType="fitXY"
android:background="#e6e6e6"
android:layout_centerVertical="true"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true" />
</RelativeLayout>
add this to the webview
wv.setWebChromeClient(new webChromeClient());
wv.addJavascriptInterface(new JSInterface(), "JSOUT");
add this to the manifest under </activity>
<receiver android:name=".NotificationPausePlay" />
