Media list - audio/video downloads

The media list custom page type allows you to create a playlist of audio or video files that can be played and also downloaded*  (Downloads not available with all plans).

In a media list, when an app user clicks a list item, the media player opens up to play the file. If the file is downloaded, it can be played while offline.

File types supported: .mp3, .m4a, .mov, .mp4, .pdf

Note: The media list does not open a detail view, it just plays the media when clicked. If you'd like more of a "podcast" look, where it shows a detail view when the item is clicked, see this article.

To create a media list, first setup your media in WordPress. Next, add the media list custom page in your app and rebuild.

Video Tutorial

1. Setup the Media in WordPress

First, login to your WordPress site, and visit the AppPresser => Settings page.

Under Media Post Types, select the post types you will use in your media list. For example, podcasts, or posts.

Next, you need to add the media urls for the app. Visit a post that you want to show in your media list, and scroll down to the AppPresser Media URL meta box. Enter the full url of the media file and save.

Do this for each post you want in your media list. Only posts that have this media url will show up in the app.

If you have a lot of media and you don't want to do this manually, see the advanced setup below.

Advanced Setup

You can add AppPresser Media URLs programatically using the appp_media_url post meta field.

If you have existing media, you just need to loop through your posts and save the media url in the appp_media_url post meta field.

Depending on your setup, that would look something like this:

<?php
// This example is for the Seriously Simple Podcasting plugin. To use with a different plugin, just replace the post type and meta key
// You would only run this one time, don't leave this code active on your site
$the_query = new WP_Query( array( 'post_type' => 'podcast', 'posts_per_page' => 999 ) );
// The Loop
if ( $the_query->have_posts() ) {
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		
	    	// replace audio_file with the meta key to your existing media url. No markup, should just be a url string.
	    	$url = get_post_meta( $the_query->post->ID, 'audio_file' , 1 );
	    
	    	// save meta field for the app
	    	if( $url ) {
			update_post_meta( $the_query->post->ID, 'appp_media_url', $url );
			// optionally add an image when the media is played
			// $featured_url = wp_get_attachment_url( get_post_thumbnail_id( $the_query->post->ID ) );
			// update_post_meta( $the_query->post->ID, 'appp_media_image', $featured_url );
		}
	}
	/* Restore original Post Data */
	wp_reset_postdata();
} else {
	// no posts found
}

See: https://gist.github.com/scottopolis/2463c4b543412f1798f3545a48200a4f#file-appp_media_url-php

You would need to run that code one time inside a plugin, you do not need to leave it active.

2. Enable Playback Setting

To use the media player, you must enable media playback on native devices. Visit the Settings tab, and check "Enable Media Playback", then save.

3. Create Media List Custom Page

After you have setup your media posts, it's time to add them to your app.

Visit your app customizer, and click Custom Pages => Add New. 

Choose the Media List.

Enter a title, and the WP-API route to your media posts. For example, if you are using normal posts in a specific category, you would put: 

https://mysite.com/wp-json/wp/v2/posts?categories=ID

You could also use a custom post type, or any other API route to your posts. Remember that only the posts that have the appp_media_url post meta field will show up in your media list.

Choose whether you'd like to allow downloads, and add the name of custom icons if you like. The default icons are "play" and "download." You can also choose to show the post featured image on the left side instead of the play icon.

Save, add the page to your menu, and rebuild your app.

That's it!

You'll need to install your app on a device to test out the download functionality, but playing media will work in the browser.

Show Images While Playing Audio

To add an image inside the media modal while the media is playing (for example album artwork) you can install this plugin: https://gist.github.com/scottopolis/066965aa7d0fd9d77ac4a68545c5880d

(Download that file, upload it to wp-content/plugins, and activate it like normal). The plugin will add the post featured image as the media image. It works for any media post type that is set, that has a featured image, and is saved or updated.

If you'd like to programatically update old posts to add a media image, you could do something like this: https://gist.github.com/scottopolis/f0a8954179dc4699018274b2cc1efda4