Create a completely custom media frame (WIP)

custom-modal-metabox.js

/**
 * @type {Object} JavaScript namespace for our application.
 */
var Custom_Modal = {};

(function($, Custom_Modal) {
    
    var $ = jQuery;
    
    _.extend( Custom_Modal, { view: {}, controller: {} } );
    
    Custom_Modal.view.HelloWorld = wp.media.View.extend( {
		className: 'hello-world-frame',
		template:  wp.media.template( 'hello-world' ) // <script type="text/html" id="tmpl-hello-world">
	} );

	Custom_Modal.view.GenerateStyle = wp.media.View.extend( {
		className: 'generate-style-frame',
		template:  wp.media.template( 'generate-style' ) // <script type="text/html" id="tmpl-hello-world">
	} );

	Custom_Modal.controller.HelloWorld = wp.media.controller.State.extend( {
		defaults: {
			id:       'hello-world-state',
			menu:     'default',
			content:  'hello_world_state'
		}
	} );

	Custom_Modal.controller.GenerateStyle = wp.media.controller.State.extend( {
		defaults: {
			id:       'generate-style-state',
			menu:     'default',
			content:  'generate_style_state'
		}
	} );
	
    var MediaFrame = wp.media.view.MediaFrame;

    Custom_Modal.frame = MediaFrame.extend({
        regions:   ['menu','title','content','toolbar'],
        
        initialize: function() {
    		// Call 'initialize' directly on the parent class.
    		MediaFrame.prototype.initialize.apply( this, arguments );
    
    		_.defaults( this.options, {
    			selection: [],
    			library:   {},
    			multiple:  false,
    			state:    'hello-world',
    			modal:    true,
			    uploader: false
    		});
    
    		//this.createSelection();
    		this.createStates();
    		//this.bindHandlers();
    	},
    	
    	/**
    	 * Create the default states on the frame.
    	 */
    	createStates: function() {
    		var options = this.options;
    
    		if ( this.options.states ) {
    			return;
    		}
    
    		// Add the default states.
    		this.states.add([
                new Custom_Modal.controller.HelloWorld( {
					title:    'Hello World',
					id:       'hello-world-state',
					priority: 50
				} ),
				new Custom_Modal.controller.GenerateStyle( {
					title:    'Generate Style',
					id:       'generate-world-state',
					priority: 50
				} )
				
			]);
    	},
    	
    	
    
    });
    
    $( '.open-custom-modal' ).on( 'click', function(e) { console.log('click');
        
        e.preventDefault();
        
        
        frame = new Custom_Modal.frame({
		    
		    // Set the title of the modal.
			title: custom_modal_metabox_i18n.title,

			// Customize the submit button.
			button: {
				// Set the text of the button.
				text: custom_modal_metabox_i18n.close,

			},
						
		 //   state:    'insert'
        });
        
        
        frame.open();
      
     
    });
        
    
})(jQuery, Custom_Modal);

custom-modal.php

<?php
/*
Plugin Name: Custom Modal Frame
Plugin URI: https://kathyisawesome.com
Description: Use WP Media Frame for totally custom content
Version: 1.0.0
Author: Kathy Darling
Author URI: https://kathyisawesome.com
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: custom-modal
*/

add_action( 'admin_enqueue_scripts', 'custom_modal_metabox_scripts', 20 );
function custom_modal_metabox_scripts( $hook ){

	// special script for dealing with textareas- needs to run AFTER all the tinyMCE init scripts, so make 'editor' a requirement
	wp_register_script( 'custom-modal-metabox', plugin_dir_url( __FILE__ ) . 'custom-modal-metabox.js', array( 'jquery', 'editor', 'media-upload' ), '1.0.0', true );
	
}


add_action( 'add_meta_boxes','custom_modal_metabox' );
function custom_modal_metabox(){
	add_meta_box( '_custom_modal_frame', __( 'Custom modal test','custom-modal' ), 'custom_modal_metabox_callback', array( 'page', 'post' ), 'advanced', 'high' );
}


function custom_modal_metabox_callback(){ ?>
	<button class="button open-custom-modal"><?php _e( 'Open Modal', 'custom_modal_frame' );?></button>
<?php

	wp_enqueue_script( 'custom-modal-metabox' );
	
	$translation_array = array(
    	'first_section' => __('First Section', 'custom-modal' ),
    	'second_section' => __('Second Section', 'custom-modal' ),
    	'title' => __( 'A custom modal', 'custom-modal' ),
    	'close' => __('Close this modal', 'custom-modal' ),

    );
    wp_localize_script( 'custom-modal-metabox', 'custom_modal_metabox_i18n', $translation_array );	

	add_action( 'print_media_templates', 'custom_modal_print_templates' );
}







function custom_modal_print_templates(){ ?>
	<script type="text/html" id="tmpl-hello-content">
		<strong>hello world</strong>
	</script>

	<script type="text/html" id="tmpl-guacamole-content">
		<strong>Guacamole is happiness</strong>
	</script>
	<?php
}

hello, i'm trying to work with this example, but the media appears empty
https://snag.gy/VzOc4K.jpg

hello, i'm trying to work with this example, but the media appears empty
https://snag.gy/VzOc4K.jpg

Probably too late to help @quadlayers, but I found to fix the example just setting the 'state' in the frame call of the javascript to the id of one of the state controllers ('hello-world-state' or 'generate-style-state') you'll resolve the js error that caused the modal not to load.

Can someone tell me how to add custom content in the media content section? The template what I am using is not working here.