After successfully creating my initial android app for phonegap 5.1 that plays an audio stream, I am currently facing an issue. I am unable to locate any solutions: How can I display audio controls and metadata of my audio stream on the lock screen as well as the dropdown status bar?
I am utilizing the org.apache.cordova.media plugin.
Here's my recommendation: give https://github.com/katzer/cordova-plugin-local-notifications a try - I tried it on android and with the latest lollipop update, you can display notifications with action buttons.
You can easily customize the plugin to include your own action buttons. Take a look at this reference guide: http://developer.android.com/guide/topics/ui/notifiers/notifications.html
To populate the notification content (such as song title, duration, etc.), you'll need to use your Media plugin APIs.
In order to customize the lockscreen and display audio controls, you will need to incorporate some native code into your app. While there is a Phonegap Plugin available for this purpose, it should be noted that this plugin is only compatible with iOS: https://github.com/shi11/RemoteControls.
To install the RemoteControls plugin using the Cordova Command Line Interface, execute the following command:
cordova plugin add com.rd11.remote-controls
Then, whenever you wish to update the lockscreen, use the following code snippet:
var params = [artist, title, album, image, duration, elapsedTime];
window.remoteControls.updateMetas(function(success) {
console.log('Metas successfully updated!');
}, function(fail) {
console.log('Oops! Something went wrong');
}, params);
If you are looking to create a persistent notification with player controls, no existing plugin seems to cater to this requirement. In such cases, you may need to develop a custom plugin or utilize a JavascriptInterface to achieve this functionality.
The property controlsAboveOverlay in Fabric.js is a boolean that, when set to true, will display the controls (borders, corners, etc.) of an object above the overlay image. The overlay image is an image that can be placed on top of the canvas. Currently, ...
Currently, I am creating connection and registration screens, with a profile button on the bottom tab bar. The objective is for the user to be directed to their profile page if they are logged in (user data stored in Redux), or to a landing screen with log ...
I am in the process of integrating a javascript application with a third-party API that manages names in a database. The challenge I am facing is that the third-party application uses utf8_general_ci collation to determine name uniqueness, while my applica ...
I need to send in my application and upload the necessary file for the submission. However, I can only upload the files after the application is successfully submitted. To achieve this, I have included the upload function within the success callback of the ...
Currently working with Vue and babel. I have a function that's been exported // Inside file a.js export async function get() { ... } I am trying to link this exported function to a static method of MyClass // Inside file b.js import myInterface fr ...
const UserJwt = (props) => { const { jwt } = props; const [jwtToken, setJwtToken] = useState(null); useEffect(() => { if (jwt) { setAuthToken(jwt); setJwtToken(jwt); } }, [jwt]); return <MobilePurchaseScreen {...pro ...
Currently, I am working on designing a navigation bar using MUI. My goal is to create a navbar with some space on both sides similar to the one seen on If you take a look at Stackoverflow's navbar, you will notice that it also has space on either sid ...
There are some unique elements (.worker) with inline styles that are dynamically generated through Perl. I want to change the background when hovering over them and then revert back to the original Perl-generated style. The only way to override the inline ...
I am looking to create a Sidebar that sticks to the window while scrolling, but stops when it reaches the footer. I have managed to get it partially working, but there is a small issue that I can't seem to solve. Test it live here: Everything seems ...
<div ng-click="changeChatThread(thread, true)" class="item ui three column grid thread_item ng-scope active-thread" ng-class="{'active-thread' : selectedThread === thread.chat_id}" ng-repeat="thread in threads | orderBy:'-last_ts' | ...
How can I make each image with a specific class clickable? I would like jQuery to: Retrieve the src attribute of the image. Enclose the image within an a href tag that includes that src URL. .clickable { padding: 20px; border: 1px ...
Utilizing ng-messages to show error messages for form validation in my application. I have a multi-language app, how can I implement ng-messages to support multiple languages? HTML Form <div class="messages" ng-messages="myForm.email.$error"> & ...
Currently, my code displays the data in address books, but I would like it to be shown in a table instead. I attempted to use document.write to create the table, but I'm unsure how to populate the table with the data rather than the address book forma ...
Within Vuejs, I have a method that updates multiple variables based on user selection. methods: { updateChart(){ this.chart1.series[1].data = [this.$store.state.selectedcities[0].value[1]]; this.chart1.series[2].data = [this.$store.state.selecte ...
My goal is to access JSON data from an online web service that queries a MySQL database for a specific string and use Javascript to present it on an HTML page. My challenge lies in effectively displaying the retrieved information. The relevant part of my ...
Struggling to craft a diagonal navigation system similar to the images below. Despite its seemingly simplicity, I'm stuck investing too much time in figuring it out. My goal is for the menu container to smoothly reveal from right to left when clicking ...
On my website, I encountered an issue when trying to register without entering any information into the required fields. The errors were correctly displayed in this screenshot: However, after inserting random characters into each field and attempting to r ...
While attempting to create a clock that displays time in real-time after adding a time zone, I encountered an issue where the time was being printed multiple times. My objective is to have it printed once and dynamically change according to the different t ...
I am in the process of creating a straightforward web application where users can input phrases. The app works fine, except for one issue - it doesn't display new additions from other users instantly. I am aware that socket.io could solve this problem ...
I am new to using the Froala editor and I am currently working on a feature where I need to save text in the textarea of the editor when the user clicks outside of it using Ajax. The ID of the content editor is #id_content. Here is a snippet of my form in ...