name = esc_html__( 'Audio', 'et_builder' ); $this->slug = 'et_pb_audio'; $this->fb_support = true; $this->whitelisted_fields = array( 'audio', 'title', 'artist_name', 'album_name', 'image_url', 'background_color', 'background_layout', 'admin_label', 'module_id', 'module_class', ); $this->fields_defaults = array( 'background_color' => array( et_builder_accent_color(), 'add_default_setting' ), 'background_layout' => array( 'dark' ), 'text_orientation' => array( 'center' ), ); $this->main_css_element = '%%order_class%%.et_pb_audio_module'; $this->options_toggles = array( 'general' => array( 'toggles' => array( 'main_content' => esc_html__( 'Text', 'et_builder' ), 'audio' => esc_html__( 'Audio', 'et_builder' ), 'image' => esc_html__( 'Image', 'et_builder' ), ), ), 'advanced' => array( 'toggles' => array( 'text' => array( 'title' => esc_html__( 'Text', 'et_builder' ), 'priority' => 49, ), 'image' => array( 'title' => esc_html__( 'Image', 'et_builder' ), 'priority' => 51, ), ), ), ); $this->advanced_options = array( 'fonts' => array( 'title' => array( 'label' => esc_html__( 'Title', 'et_builder' ), 'css' => array( 'main' => "{$this->main_css_element} h2, {$this->main_css_element} h1.et_pb_module_header, {$this->main_css_element} h3.et_pb_module_header, {$this->main_css_element} h4.et_pb_module_header, {$this->main_css_element} h5.et_pb_module_header, {$this->main_css_element} h6.et_pb_module_header", 'important' => 'plugin_only', ), 'header_level' => array( 'default' => 'h2', ), ), 'caption' => array( 'label' => esc_html__( 'Caption', 'et_builder' ), 'css' => array( 'line_height' => "{$this->main_css_element} p", 'main' => "{$this->main_css_element} p", 'plugin_main' => "{$this->main_css_element} p, {$this->main_css_element} p strong", ), ), ), 'background' => array( 'settings' => array( 'color' => 'alpha', ), 'css' => array( 'important' => true, ), ), 'custom_margin_padding' => array( 'css' => array( 'important' => 'all', 'padding' => '.et_pb_column %%order_class%% .et_pb_audio_module_content', ), ), 'max_width' => array( 'css' => array( 'module_alignment' => '%%order_class%%.et_pb_audio_module.et_pb_module', ), ), 'text' => array( 'css' => array( 'text_orientation' => '%%order_class%% .et_pb_audio_module_content', 'text_shadow' => '%%order_class%% .et_pb_audio_module_content', ), ), 'filters' => array( 'css' => array( 'main' => '%%order_class%%', ), 'child_filters_target' => array( 'tab_slug' => 'advanced', 'toggle_slug' => 'image', ), ), 'image' => array( 'css' => array( 'main' => '%%order_class%% .et_pb_audio_cover_art', ), ), ); $this->custom_css_options = array( 'audio_cover_art' => array( 'label' => esc_html__( 'Audio Cover Art', 'et_builder' ), 'selector' => '.et_pb_audio_cover_art', ), 'audio_content' => array( 'label' => esc_html__( 'Audio Content', 'et_builder' ), 'selector' => '.et_pb_audio_module_content', ), 'audio_title' => array( 'label' => esc_html__( 'Audio Title', 'et_builder' ), 'selector' => '.et_pb_audio_module_content h2', ), 'audio_meta' => array( 'label' => esc_html__( 'Audio Meta', 'et_builder' ), 'selector' => '.et_audio_module_meta', ), 'audio_buttons' => array( 'label' => esc_html__( 'Player Buttons', 'et_builder' ), 'selector' => "{$this->main_css_element} .mejs-button.mejs-playpause-button button:before,{$this->main_css_element} .mejs-button.mejs-volume-button.mejs-mute button:before", ), 'audio_timer' => array( 'label' => esc_html__( 'Player Timer', 'et_builder' ), 'selector' => '.mejs-time.mejs-currenttime-container.custom', ), 'audio_sliders' => array( 'label' => esc_html__( 'Player Sliders', 'et_builder' ), 'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-total,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total", ), 'audio_sliders_current' => array( 'label' => esc_html__( 'Player Sliders Current', 'et_builder' ), 'selector' => "{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-time-rail .mejs-time-handle,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current,{$this->main_css_element} .et_audio_container .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle", ), ); } function get_fields() { $fields = array( 'audio' => array( 'label' => esc_html__( 'Audio', 'et_builder' ), 'type' => 'upload', 'option_category' => 'basic_option', 'data_type' => 'audio', 'upload_button_text' => esc_attr__( 'Upload an audio file', 'et_builder' ), 'choose_text' => esc_attr__( 'Choose an Audio file', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Audio for the module', 'et_builder' ), 'description' => esc_html__( 'Define the audio file for use in the module. To remove an audio file from the module, simply delete the URL from the settings field.', 'et_builder' ), 'toggle_slug' => 'audio', 'computed_affects' => array( '__audio', ), ), 'title' => array( 'label' => esc_html__( 'Title', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Define a title.', 'et_builder' ), 'toggle_slug' => 'main_content', ), 'artist_name' => array( 'label' => esc_html__( 'Artist Name', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Define an artist name.', 'et_builder' ), 'toggle_slug' => 'main_content', ), 'album_name' => array( 'label' => esc_html__( 'Album name', 'et_builder' ), 'type' => 'text', 'option_category' => 'basic_option', 'description' => esc_html__( 'Define an album name.', 'et_builder' ), 'toggle_slug' => 'main_content', ), 'image_url' => array( 'label' => esc_html__( 'Cover Art Image URL', 'et_builder' ), 'type' => 'upload', 'option_category' => 'basic_option', 'upload_button_text' => esc_attr__( 'Upload an image', 'et_builder' ), 'choose_text' => esc_attr__( 'Choose an Image', 'et_builder' ), 'update_text' => esc_attr__( 'Set As Image', 'et_builder' ), 'description' => esc_html__( 'Upload your desired image, or type in the URL to the image you would like to display.', 'et_builder' ), 'toggle_slug' => 'image', 'computed_affects' => array( '__audio', ), ), 'background_color' => array( 'label' => esc_html__( 'Background Color', 'et_builder' ), 'type' => 'color-alpha', 'toggle_slug' => 'background', 'description' => esc_html__( 'Define a custom background color for your module, or leave blank to use the default color.', 'et_builder' ), ), 'background_layout' => array( 'label' => esc_html__( 'Text Color', 'et_builder' ), 'type' => 'select', 'option_category' => 'color_option', 'options' => array( 'dark' => esc_html__( 'Light', 'et_builder' ), 'light' => esc_html__( 'Dark', 'et_builder' ), ), 'tab_slug' => 'advanced', 'toggle_slug' => 'text', 'description' => esc_html__( 'Here you can choose whether your text should be light or dark. If you are working with a dark background, then your text should be light. If your background is light, then your text should be set to dark.', 'et_builder' ), ), 'disabled_on' => array( 'label' => esc_html__( 'Disable on', 'et_builder' ), 'type' => 'multiple_checkboxes', 'options' => array( 'phone' => esc_html__( 'Phone', 'et_builder' ), 'tablet' => esc_html__( 'Tablet', 'et_builder' ), 'desktop' => esc_html__( 'Desktop', 'et_builder' ), ), 'additional_att' => 'disable_on', 'option_category' => 'configuration', 'description' => esc_html__( 'This will disable the module on selected devices', 'et_builder' ), 'tab_slug' => 'custom_css', 'toggle_slug' => 'visibility', ), 'admin_label' => array( 'label' => esc_html__( 'Admin Label', 'et_builder' ), 'type' => 'text', 'description' => esc_html__( 'This will change the label of the module in the builder for easy identification.', 'et_builder' ), 'toggle_slug' => 'admin_label', ), 'module_id' => array( 'label' => esc_html__( 'CSS ID', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), 'module_class' => array( 'label' => esc_html__( 'CSS Class', 'et_builder' ), 'type' => 'text', 'option_category' => 'configuration', 'tab_slug' => 'custom_css', 'toggle_slug' => 'classes', 'option_class' => 'et_pb_custom_css_regular', ), '__audio' => array( 'type' => 'computed', 'computed_callback' => array( 'ET_Builder_Module_Audio', 'get_audio' ), 'computed_depends_on' => array( 'audio', ), 'computed_minimum' => array( 'audio', ), ), ); return $fields; } static function get_audio( $args = array(), $conditional_tags = array(), $current_page = array() ) { $defaults = array( 'audio' => '', ); $args = wp_parse_args( $args, $defaults ); // remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module remove_all_filters( 'wp_audio_shortcode_library' ); remove_all_filters( 'wp_audio_shortcode' ); remove_all_filters( 'wp_audio_shortcode_class' ); return do_shortcode( sprintf( '[audio src="%s" /]', $args['audio'] ) ); } function shortcode_callback( $atts, $content = null, $function_name ) { global $wp_version; $module_id = $this->shortcode_atts['module_id']; $module_class = $this->shortcode_atts['module_class']; $audio = $this->shortcode_atts['audio']; $title = $this->shortcode_atts['title']; $artist_name = $this->shortcode_atts['artist_name']; $album_name = $this->shortcode_atts['album_name']; $image_url = $this->shortcode_atts['image_url']; $background_color = '' !== $this->shortcode_atts['background_color'] ? $this->shortcode_atts['background_color'] : $this->fields_defaults['background_color'][0]; $background_layout = $this->shortcode_atts['background_layout']; $header_level = $this->shortcode_atts['title_level']; $wp_48_or_lower = version_compare( $wp_version, '4.9' ) === -1 ? 'et_pb_audio_legacy' : ''; $module_class = ET_Builder_Element::add_module_order_class( $module_class, $function_name ); $meta = $cover_art = ''; $class = " et_pb_module et_pb_bg_layout_{$background_layout}"; if ( 'light' === $background_layout ) { $class .= ' et_pb_text_color_dark'; } if ( '' !== $artist_name || '' !== $album_name ) { if ( '' !== $artist_name && '' !== $album_name ) { $album_name = ' | ' . $album_name; } if ( '' !== $artist_name ) { $artist_name = sprintf( et_get_safe_localization( _x( 'by %1$s', 'Audio Module meta information', 'et_builder' ) ), esc_html( $artist_name ) ); } $meta = sprintf( '%1$s%2$s', $artist_name, esc_html( $album_name ) ); $meta = sprintf( '

%1$s

', $meta ); } if ( '' !== $image_url ) { $cover_art = sprintf( '
', esc_attr( $image_url ) ); } $video_background = $this->video_background(); $parallax_image_background = $this->get_parallax_image_background(); // some themes do not include these styles/scripts so we need to enqueue them in this module wp_enqueue_style( 'wp-mediaelement' ); wp_enqueue_script( 'et-builder-mediaelement' ); // remove all filters from WP audio shortcode to make sure current theme doesn't add any elements into audio module remove_all_filters( 'wp_audio_shortcode_library' ); remove_all_filters( 'wp_audio_shortcode' ); remove_all_filters( 'wp_audio_shortcode_class' ); $video_background = $this->video_background(); // Images: Add CSS Filters and Mix Blend Mode rules (if set) if ( array_key_exists( 'image', $this->advanced_options ) && array_key_exists( 'css', $this->advanced_options['image'] ) ) { $module_class .= $this->generate_css_filters( $function_name, 'child_', self::$data_utils->array_get( $this->advanced_options['image']['css'], 'main', '%%order_class%%' ) ); } $output = sprintf( ' %13$s %11$s %6$s
%1$s %2$s %3$s
', ( '' !== $title ? sprintf( '<%1$s class="et_pb_module_header">%2$s', et_pb_process_header_level( $header_level, 'h2' ), esc_html( $title ) ) : '' ), $meta, self::get_audio( array( 'audio' => $audio, ) ), esc_attr( $class ), sprintf( ' style="background-color: %1$s;"', esc_attr( $background_color ) ), $cover_art, ( '' === $image_url ? ' et_pb_audio_no_image' : '' ), ( '' !== $module_id ? sprintf( ' id="%1$s"', esc_attr( $module_id ) ) : '' ), ( '' !== $module_class ? sprintf( ' %1$s', esc_attr( $module_class ) ) : '' ), '' !== $video_background ? ' et_pb_section_video et_pb_preload' : '', $video_background, '' !== $parallax_image_background ? ' et_pb_section_parallax' : '', $parallax_image_background, $wp_48_or_lower ); return $output; } public function process_box_shadow( $function_name ) { /** * @var ET_Builder_Module_Field_BoxShadow $boxShadow */ $boxShadow = ET_Builder_Module_Fields_Factory::get( 'BoxShadow' ); $selector = '.' . self::get_module_order_class( $function_name ); self::set_style( $function_name, $boxShadow->get_style( $selector, $this->shortcode_atts ) ); } } new ET_Builder_Module_Audio;