<?php

namespace ElementPack\Modules\AudioPlayer\Widgets;

use ElementPack\Base\Module_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Background;
use Elementor\Repeater;
use Elementor\Modules\DynamicTags\Module as TagsModule;

use ElementPack\Modules\AudioPlayer\Skins;
use ElementPack\Modules\AudioPlayer\Skins\Skin_Showcase;

use ElementPack;

if (!defined('ABSPATH'))
	exit; // Exit if accessed directly

class Audio_Player extends Module_Base
{

	public function get_name()
	{
		return 'bdt-audio-player';
	}

	public function get_title()
	{
		return BDTEP . esc_html__('Audio Player', 'bdthemes-element-pack');
	}

	public function get_icon()
	{
		return 'bdt-wi-audio-player';
	}

	public function get_categories()
	{
		return ['element-pack'];
	}

	public function get_keywords()
	{
		return ['audio', 'player', 'sounder'];
	}

	public function get_style_depends()
	{
		if ($this->ep_is_edit_mode()) {
			return ['swiper', 'ep-styles', 'ep-font'];
		} else {
			return ['swiper', 'ep-audio-player', 'ep-font'];
		}
	}

	public function get_script_depends()
	{
		if ($this->ep_is_edit_mode()) {
			return ['swiper', 'jplayer', 'ep-scripts'];
		} else {
			return ['swiper', 'jplayer', 'ep-audio-player'];
		}
	}

	public function get_custom_help_url()
	{
		return 'https://youtu.be/VHAEO1xLVxU';
	}

	protected function register_skins()
	{
		$this->add_skin(new Skins\Skin_Poster($this));
		$this->add_skin(new Skin_Showcase($this));
	}

	public function has_widget_inner_wrapper(): bool
	{
		return !\Elementor\Plugin::$instance->experiments->is_feature_active('e_optimized_markup');
	}
	protected function is_dynamic_content(): bool
	{
		return false;
	}

	protected function register_controls()
	{
		$this->start_controls_section(
			'section_title',
			[
				'label' => esc_html__('Audio', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'poster',
			[
				'label' => esc_html__('Choose Poster', 'bdthemes-element-pack'),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => ['active' => true],
				'default' => [
					'url' => BDTEP_ASSETS_URL . 'images/audio-thumbnail.svg',
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-poster' => 'background-image:  url("{{URL}}");',
				],
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);

		$this->add_control(
			'showcase_bg_image',
			[
				'label'   => esc_html__( 'Background Image', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::MEDIA,
				'dynamic' => [ 'active' => true ],
				'default' => [
					'url' => BDTEP_ASSETS_URL . 'images/audio-thumbnail.svg',
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--showcase-bg-image: url("{{URL}}");',
				],
				'condition' => [
					'_skin' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'layout_style',
			[
				'label' => esc_html__('Layout Style', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'style-1',
				'options' => [
					'style-1' => esc_html__('Style 01', 'bdthemes-element-pack'),
					'style-2' => esc_html__('Style 02', 'bdthemes-element-pack'),
					'style-3' => esc_html__('Style 03', 'bdthemes-element-pack'),
					'style-4' => esc_html__('Style 04', 'bdthemes-element-pack'),
					'style-5' => esc_html__('Style 05', 'bdthemes-element-pack'),
				],
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);


		$this->add_responsive_control(
			'player_height',
			[
				'label' => esc_html__('Player Height', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 1200,
						'step' => 10,
					],
				],
				'default' => [
					'size' => 400,
				],
				'selectors' => [
					'{{WRAPPER}} .skin-poster' => 'height: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);

		$this->add_control(
			'source_type',
			[
				'label' => esc_html__('Source Type', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'hosted_url',
				'options' => [
					'hosted_url' => esc_html__('Local Audio', 'bdthemes-element-pack'),
					'remote_url' => esc_html__('Remote Audio', 'bdthemes-element-pack'),
				],
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'hosted_url',
			[
				'label' => esc_html__('Local Audio', 'bdthemes-element-pack'),
				'type' => Controls_Manager::MEDIA,
				'dynamic' => [
					'active' => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'media_type' => 'audio',
				'default' => [
					'url' => BDTEP_ASSETS_URL . 'others/intro.mp3',
				],
				'condition' => [
					'source_type' => 'hosted_url',
					'_skin!' 	  => 'bdt-showcase',
				]
			]
		);

		$this->add_control(
			'remote_url',
			[
				'label' => esc_html__('Remote URL', 'bdthemes-element-pack'),
				'description' => 'If you want to add any streaming audio url so please add <b>;stream/1</b> at the end of your url for example: http://cast.com:9942/;stream/1',
				'type' => Controls_Manager::URL,
				'show_external' => false,
				'default' => [
					'url' => BDTEP_ASSETS_URL . 'others/intro.mp3',
				],
				'placeholder' => 'https://example.com/music.mp3',
				'dynamic' => [
					'active' => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::URL_CATEGORY,
					],
				],
				'condition' => [
					'source_type' => 'remote_url',
					'_skin!' => 'bdt-showcase',
				]
			]
		);

		$this->add_control(
			'audio_title',
			[
				'label' => esc_html__('Audio Title', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'tooltip',
				'options' => [
					'tooltip' => esc_html__('Tooltip', 'bdthemes-element-pack'),
					'inline' => esc_html__('Inline', 'bdthemes-element-pack'),
					'none' => esc_html__('None', 'bdthemes-element-pack'),
				],
				'prefix_class' => 'bdt-audio-player-title-',
				'render_type' => 'template',
				'condition' => [
					'_skin' => '',
				],
			]
		);

		$this->add_control(
			'title',
			[
				'label' => esc_html__('Title', 'bdthemes-element-pack'),
				'type' => Controls_Manager::TEXT,
				'default' => esc_html__('Audio Title', 'bdthemes-element-pack'),
				'label_block' => true,
				'dynamic' => ['active' => true],
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'author_name',
			[
				'label' => esc_html__('Author Name', 'bdthemes-element-pack'),
				'type' => Controls_Manager::TEXT,
				'dynamic' => ['active' => true],
				'default' => 'John Duo',
				'placeholder' => 'Author Name',
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);

		$this->add_responsive_control(
			'player_width',
			[
				'label' => esc_html__('Player Width', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'size_units' => ['px', '%'],
				'range' => [
					'px' => [
						'min' => 100,
						'max' => 1200,
					],
					'%' => [
						'min' => 10,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player' => 'max-width: {{SIZE}}{{UNIT}};',
				],
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_responsive_control(
			'player_align',
			[
				'label' => esc_html__('Alignment', 'bdthemes-element-pack'),
				'type' => Controls_Manager::CHOOSE,
				'default' => 'start',
				'options' => [
					'start' => [
						'title' => esc_html__('Start', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-center',
					],
					'end' => [
						'title' => esc_html__('End', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-right',
					],
				],

				// 'condition' => [
				// 	'player_width!' => '',
				// 	'fixed_player!' => 'yes'
				// ],
				// 'prefix_class' => 'elementor%s-align-',
				// 'render_type' => 'template',
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-info-wrapper .bdt-audio-info' => 'text-align: {{VALUE}};',
				],
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'fixed_player',
			[
				'label' => esc_html__('Fixed Player', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-audio-player-fixed-',
				'condition' => [
					'_skin' => '',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * ------------------------------------------------------------------
		 * Showcase Skin | Content Tab > Showcase Playlist
		 *
		 * Repeater-based playlist. Each item supplies cover, artist, title,
		 * audio file, and optional default-like state for the frontend player.
		 * ------------------------------------------------------------------
		 */
		$this->start_controls_section(
			'showcase_playlist_section',
			[
				'label' => esc_html__('Showcase Playlist', 'bdthemes-element-pack'),
				'condition' => [
					'_skin' => 'bdt-showcase',
				],
			]
		);

		$showcase_repeater = new Repeater();

		$showcase_repeater->add_control(
			'cover',
			[
				'label'   => esc_html__( 'Cover Image', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::MEDIA,
				'default' => [
					'url' => BDTEP_ASSETS_URL . 'images/audio-thumbnail.svg',
				],
			]
		);
		
		$showcase_repeater->add_control(
			'artist',
			[
				'label'       => esc_html__( 'Artist', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Artist Name', 'bdthemes-element-pack' ),
				'label_block' => true,
			]
		);
		
		$showcase_repeater->add_control(
			'song_title',
			[
				'label'       => esc_html__( 'Title', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::TEXT,
				'default'     => esc_html__( 'Song Title', 'bdthemes-element-pack' ),
				'label_block' => true,
			]
		);
		
		$showcase_repeater->add_control(
			'song_url',
			[
				'label'      => esc_html__( 'Local Audio', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::MEDIA,
				'dynamic'    => [
					'active'     => true,
					'categories' => [
						TagsModule::POST_META_CATEGORY,
						TagsModule::MEDIA_CATEGORY,
					],
				],
				'media_type' => 'audio',
				'default'    => [
					'url' => BDTEP_ASSETS_URL . 'others/intro.mp3',
				],
			]
		);
		
		$showcase_repeater->add_control(
			'is_liked',
			[
				'label'        => esc_html__( 'Liked by Default', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
				'return_value' => 'yes',
			]
		);

		$showcase_playlist_defaults = array_map(
			static function ( $cover_index ) {
				return [
					'artist'     => esc_html__( 'Artist Name', 'bdthemes-element-pack' ),
					'song_title' => esc_html__( 'Song Title', 'bdthemes-element-pack' ),
					'song_url'   => [
						'url' => BDTEP_ASSETS_URL . 'others/intro.mp3',
					],
					'cover'      => [
						'url' => BDTEP_ASSETS_URL . 'images/gallery/item-' . $cover_index . '.svg',
					],
				];
			},
			range( 1, 5 )
		);

		$this->add_control(
			'showcase_playlist',
			[
				'type'        => Controls_Manager::REPEATER,
				'fields'      => $showcase_repeater->get_controls(),
				'title_field' => '{{{ artist }}} - {{{ song_title }}}',
				'default'     => $showcase_playlist_defaults,
				'condition'   => [
					'_skin' => 'bdt-showcase',
				],
			]
		);
		
		$this->add_control(
			'showcase_initial_song',
			[
				'label'       => esc_html__( 'Initial Song Number', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::NUMBER,
				'default'     => 3,
				'min'         => 1,
				'step'        => 1,
				'condition'   => [
					'_skin' => 'bdt-showcase',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * ------------------------------------------------------------------
		 * Showcase Skin | Content Tab > Showcase Playback
		 *
		 * Core playback behaviour: autoplay, single-track loop, playlist auto-next,
		 * and the initial volume level passed to the frontend script.
		 * ------------------------------------------------------------------
		 */
		$this->start_controls_section(
			'section_showcase_playback',
			[
				'label'     => esc_html__( 'Showcase Playback', 'bdthemes-element-pack' ),
				'condition' => [
					'_skin' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'showcase_autoplay',
			[
				'label'       => esc_html__( 'Auto Play', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'showcase_autoplay_notice',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw'  => esc_html__( 'Note: Autoplay may not work in all browsers due to browser restrictions. User interaction may be required to start audio playback.', 'bdthemes-element-pack' ),
				'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
				'condition'       => [
					'showcase_autoplay' => 'yes',
				],
			]
		);

		$this->add_control(
			'showcase_auto_next',
			[
				'label'        => esc_html__( 'Auto Play Next', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'showcase_auto_next_notice',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw'  => esc_html__( 'Enable to automatically continue to the next song. Disable to stop playback at the end of the current track.', 'bdthemes-element-pack' ),
				'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
				'condition'       => [
					'showcase_auto_next' => 'yes',
				],
			]
		);

		$this->add_control(
			'showcase_loop',
			[
				'label'       => esc_html__( 'Loop', 'bdthemes-element-pack' ),
				'type'        => Controls_Manager::SWITCHER,
				'condition'   => [
					'showcase_auto_next!' => 'yes',
				],
			]
		);

		$this->add_control(
			'showcase_loop_notice',
			[
				'type' => Controls_Manager::RAW_HTML,
				'raw'  => esc_html__( 'When enabled, the current track will automatically replay after it ends.', 'bdthemes-element-pack' ),
				'content_classes' => 'elementor-panel-alert elementor-panel-alert-warning',
				'condition'       => [
					'showcase_loop' => 'yes',
				],
			]
		);

		$this->add_control(
			'showcase_volume_level',
			[
				'label'   => esc_html__( 'Default Volume', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::SLIDER,
				'range'   => [
					'px' => [
						'min'  => 0,
						'max'  => 1,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 0.8,
				],
			]
		);

		$this->end_controls_section();

		/**
		 * ------------------------------------------------------------------
		 * Showcase Skin | Content Tab > Showcase Options
		 *
		 * UI toggles (shuffle, like, duration, progress time) and cover-slider
		 * settings consumed by skin-showcase.php and ep-audio-player.js.
		 * ------------------------------------------------------------------
		 */
		$this->start_controls_section(
			'section_showcase_options',
			[
				'label'     => esc_html__( 'Showcase Options', 'bdthemes-element-pack' ),
				'condition' => [
					'_skin' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'showcase_heading_display',
			[
				'label'     => esc_html__( 'Display', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'showcase_show_shuffle',
			[
				'label'        => esc_html__( 'Shuffle Button', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'showcase_show_like',
			[
				'label'        => esc_html__( 'Like Button', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'showcase_show_duration',
			[
				'label'        => esc_html__( 'Duration', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'showcase_show_progress_time',
			[
				'label'        => esc_html__( 'Progress Time', 'bdthemes-element-pack' ),
				'description'  => esc_html__( 'Show current time and total duration beside the progress bar.', 'bdthemes-element-pack' ),
				'type'         => Controls_Manager::SWITCHER,
				'default'      => 'yes',
				'return_value' => 'yes',
			]
		);

		$this->add_control(
			'showcase_heading_slider',
			[
				'label'     => esc_html__( 'Cover Slider', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_responsive_control(
			'showcase_slider_width',
			[
				'label'      => esc_html__( 'Slider Width', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 160,
						'max' => 500,
					],
				],
				'default'    => [
					'size' => 300,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-swiper' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_swiper_speed',
			[
				'label'   => esc_html__( 'Transition Speed (ms)', 'bdthemes-element-pack' ),
				'type'    => Controls_Manager::NUMBER,
				'default' => 700,
				'min'     => 200,
				'max'     => 3000,
				'step'    => 50,
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_content_additional',
			[
				'label' => esc_html__('Additional Options', 'bdthemes-element-pack'),
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'seek_bar',
			[
				'label' => esc_html__('Seek Bar', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'time_duration',
			[
				'label' => esc_html__('Time/Duration(s)', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'both',
				'options' => [
					'' => esc_html__('None', 'bdthemes-element-pack'),
					'time' => esc_html__('Time', 'bdthemes-element-pack'),
					'duration' => esc_html__('Duration', 'bdthemes-element-pack'),
					'both' => esc_html__('Both', 'bdthemes-element-pack'),
				],
			]
		);

		$this->add_control(
			'time_restrict',
			[
				'label' => esc_html__('Restrict Time', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'description' => esc_html__('After some second player will stop', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'restrict_duration',
			[
				'label' => esc_html__('Restrict Duration(s)', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'step' => 2,
						'max' => 200
					]
				],
				'default' => [
					'size' => 10
				],
				'condition' => [
					'time_restrict' => 'yes'
				]
			]
		);

		$this->add_control(
			'volume_mute',
			[
				'label' => esc_html__('Volume Mute/Unmute', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'volume_bar',
			[
				'label' => esc_html__('Volume Bar', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
				'condition' => [
					'_skin!' => 'bdt-poster',
				],
			]
		);

		$this->add_control(
			'smooth_show',
			[
				'label' => esc_html__('Smoothly Enter', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'keyboard_enable',
			[
				'label' => esc_html__('Keyboard Enable', 'bdthemes-element-pack'),
				'description' => esc_html__('for example: when you press p=Play, m=Mute, >=Volume + <=Volume -, l=Loop etc  ', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'default' => 'yes',
			]
		);

		$this->add_control(
			'autoplay',
			[
				'label' => esc_html__('Auto Play', 'bdthemes-element-pack'),
				'description' => esc_html__('Some latest browser does not support this feature for not annoying user.', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'loop',
			[
				'label' => esc_html__('Loop', 'bdthemes-element-pack'),
				'description' => esc_html__('If you set yes so your music will automatically repeat again and again.', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
			]
		);

		$this->add_control(
			'volume_level',
			[
				'label' => esc_html__('Default Volume', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 0,
						'max' => 1,
						'step' => 0.1,
					],
				],
				'default' => [
					'size' => 0.8,
				],
			]
		);

		$this->end_controls_section();

		/**
		 * Skin Default Style
		 */
		$this->start_controls_section(
			'section_style_skin_default',
			[
				'label' => esc_html__('Audio Player', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin' => ''
				]
			]
		);
		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'skin_default_background',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-default',
			]
		);
		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'skin_default_border',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-default',
				'separator' => 'before'
			]
		);
		$this->add_responsive_control(
			'skin_default_border_radius',
			[
				'label' => esc_html__('Border Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-default' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'skin_default_padding',
			[
				'label' => esc_html__('Padding', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-default' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_responsive_control(
			'skin_default_margin',
			[
				'label' => esc_html__('Margin', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-default' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);
		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'skin_default_box_shadow',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-default',
			]
		);
		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_skin_poster',
			[
				'label' => esc_html__('Skin Poster', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin' => 'bdt-poster'
				]
			]
		);

		$this->add_control(
			'thumb_style',
			[
				'label' => esc_html__('Thumb Style', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SWITCHER,
				'prefix_class' => 'bdt-audio-player-poster-thumb-',
				'render_type' => 'template'
			]
		);

		$this->add_responsive_control(
			'skin_poster_align',
			[
				'label' => esc_html__('Alignment', 'bdthemes-element-pack'),
				'type' => Controls_Manager::CHOOSE,
				'default' => 'center',
				'options' => [
					'left' => [
						'title' => esc_html__('Top', 'bdthemes-element-pack'),
						'icon' => 'eicon-h-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'bdthemes-element-pack'),
						'icon' => 'eicon-h-align-center',
					],
					'right' => [
						'title' => esc_html__('Bottom', 'bdthemes-element-pack'),
						'icon' => 'eicon-h-align-right',
					],
				],
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name' => 'skin_poster_background',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-poster',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'skin_poster__border',
				'label' => esc_html__('Border', 'bdthemes-element-pack'),
				'placeholder' => '1px',
				'default' => '1px',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-poster',
				'separator' => 'before'
			]
		);

		$this->add_responsive_control(
			'skin_poster__radius',
			[
				'label' => esc_html__('Border Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', 'em', '%'],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-poster' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'skin_poster_padding',
			[
				'label' => esc_html__('Padding', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .skin-poster' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name' => 'skin_poster_css_filters',
				'separator' => 'before',
				'selector' => '{{WRAPPER}} .bdt-audio-player-poster',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_thumbnail',
			[
				'label' => esc_html__('Thumbnail', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin' => 'bdt-poster',
					'thumb_style' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'thumb_width',
			[
				'label' => esc_html__('Width (px)', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 20,
						'max' => 400,
						'step' => 5
					]
				],
				'default' => [
					'size' => 150
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'thumbnail_margin',
			[
				'label' => esc_html__('Margin', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'thumbnail_padding',
			[
				'label' => esc_html__('Padding', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs('thumbnail_effects');

		$this->start_controls_tab(
			'normal',
			[
				'label' => esc_html__('Normal', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'opacity',
			[
				'label' => esc_html__('Opacity', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'max' => 1,
						'min' => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name' => 'css_filters',
				'separator' => 'before',
				'selector' => '{{WRAPPER}} .bdt-audio-player-thumb img',
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'hover',
			[
				'label' => esc_html__('Hover', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'opacity_hover',
			[
				'label' => esc_html__('Opacity', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'max' => 1,
						'min' => 0.10,
						'step' => 0.01,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img:hover' => 'opacity: {{SIZE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Css_Filter::get_type(),
			[
				'name' => 'css_filters_hover',
				'selector' => '{{WRAPPER}} .bdt-audio-player-thumb img:hover',
			]
		);

		$this->add_control(
			'background_hover_transition',
			[
				'label' => esc_html__('Transition Duration (s)', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'max' => 3,
						'step' => 0.1,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img' => 'transition-duration: {{SIZE}}s',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name' => 'thumbnail_border',
				'separator' => 'before',
				'selector' => '{{WRAPPER}} .bdt-audio-player-thumb img',
			]
		);

		$this->add_responsive_control(
			'thumbnail_radius',
			[
				'label' => esc_html__('Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-thumb img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'thumbnail_shadow',
				'selector' => '{{WRAPPER}} .bdt-audio-player-thumb img',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_play_button',
			[
				'label' => esc_html__('Play/Pause Button', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->start_controls_tabs('tabs_play_button');

		$this->start_controls_tab(
			'tab_play_button_normal',
			[
				'label' => esc_html__('Normal', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'play_button_icon_color',
			[
				'label' => esc_html__('Icon Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play svg *, {{WRAPPER}} .jp-audio .jp-pause svg *' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_button_background',
			[
				'label' => esc_html__('Background Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_button_border',
			[
				'label' => esc_html__('Border Type', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => [
					'' => esc_html__('None', 'bdthemes-element-pack'),
					'solid' => esc_html__('Solid', 'bdthemes-element-pack'),
					'dotted' => esc_html__('Dotted', 'bdthemes-element-pack'),
					'dashed' => esc_html__('Dashed', 'bdthemes-element-pack'),
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_button_border_width',
			[
				'label' => esc_html__('Border Width', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'default' => [
					'top' => '1',
					'bottom' => '1',
					'left' => '1',
					'right' => '1',
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'play_button_border!' => '',
				],
			]
		);

		$this->add_control(
			'play_button_border_color',
			[
				'label' => esc_html__('Border Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'default' => '#d5d5d5',
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'play_button_border!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'play_button_radius',
			[
				'label' => esc_html__('Border Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'play_button_shadow',
				'selector' => '{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause',
			]
		);

		$this->add_responsive_control(
			'play_button_size',
			[
				'label' => esc_html__('Size', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 30,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play, {{WRAPPER}} .jp-audio .jp-pause' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: calc({{SIZE}}{{UNIT}} - 4px);',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_play_button_hover',
			[
				'label' => esc_html__('Hover', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'play_button_hover_icon_color',
			[
				'label' => esc_html__('Icon Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play:hover svg *, {{WRAPPER}} .jp-audio .jp-pause:hover svg *' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_button_hover_background',
			[
				'label' => esc_html__('Background Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play:hover, {{WRAPPER}} .jp-audio .jp-pause:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'play_button_hover_border_color',
			[
				'label' => esc_html__('Border Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'condition' => [
					'play_button_border_border!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-play:hover, {{WRAPPER}} .jp-audio .jp-pause:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'play_button_hover_shadow',
				'selector' => '{{WRAPPER}} .jp-audio .jp-play:hover, {{WRAPPER}} .jp-audio .jp-pause:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_time',
			[
				'label' => esc_html__('Time/Duration', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'time_duration!' => '',
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'time_color',
			[
				'label' => esc_html__('Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-current-time, {{WRAPPER}} .jp-audio .jp-duration' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'time_typography',
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_4,
				'selector' => '{{WRAPPER}} .jp-audio .jp-current-time, {{WRAPPER}} .jp-audio .jp-duration',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_seek_bar',
			[
				'label' => esc_html__('Seek Bar', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'seek_bar' => 'yes',
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->add_control(
			'seek_bar_height',
			[
				'label' => esc_html__('Bar Height', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-seek-bar' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'seek_bar_color',
			[
				'label' => esc_html__('Bar Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-seek-bar' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'seek_bar_adjust_color',
			[
				'label' => esc_html__('Active Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-seek-bar .jp-play-bar' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'seek_bar_radius',
			[
				'label' => esc_html__('Border Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-seek-bar .jp-play-bar, {{WRAPPER}} .jp-audio .jp-seek-bar' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_audio_title',
			[
				'label' => esc_html__('Audio Title', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'audio_title' => 'inline',
					'_skin' => '',
				]
			]
		);

		$this->add_control(
			'audio_title_color',
			[
				'label' => esc_html__('Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-title' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'audio_title_align',
			[
				'label' => esc_html__('Alignment', 'bdthemes-element-pack'),
				'type' => Controls_Manager::CHOOSE,
				'options' => [
					'left' => [
						'title' => esc_html__('Left', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-left',
					],
					'center' => [
						'title' => esc_html__('Center', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-center',
					],
					'right' => [
						'title' => esc_html__('Right', 'bdthemes-element-pack'),
						'icon' => 'eicon-text-align-right',
					],
				],
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-title' => 'text-align: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'audio_title_typography',
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-audio-title'
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_volume_button',
			[
				'label' => esc_html__('Volume Button', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'volume_mute' => 'yes',
					'_skin!' => 'bdt-showcase',
				],
			]
		);

		$this->start_controls_tabs('tabs_volume_button');

		$this->start_controls_tab(
			'tab_volume_button_normal',
			[
				'label' => esc_html__('Normal', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'volume_button_icon_color',
			[
				'label' => esc_html__('Icon Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute svg *, {{WRAPPER}} .jp-audio .jp-unmute svg *' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_button_background',
			[
				'label' => esc_html__('Background Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_button_border',
			[
				'label' => esc_html__('Border Type', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => [
					'' => esc_html__('None', 'bdthemes-element-pack'),
					'solid' => esc_html__('Solid', 'bdthemes-element-pack'),
					'dotted' => esc_html__('Dotted', 'bdthemes-element-pack'),
					'dashed' => esc_html__('Dashed', 'bdthemes-element-pack'),
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'border-style: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_button_border_width',
			[
				'label' => esc_html__('Border Width', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px'],
				'default' => [
					'top' => '1',
					'bottom' => '1',
					'left' => '1',
					'right' => '1',
					'unit' => 'px',
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'border-width: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
				'condition' => [
					'volume_button_border!' => '',
				],
			]
		);

		$this->add_control(
			'volume_button_border_color',
			[
				'label' => esc_html__('Border Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'default' => '#d5d5d5',
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'border-color: {{VALUE}};',
				],
				'condition' => [
					'volume_button_border!' => '',
				],
			]
		);

		$this->add_responsive_control(
			'volume_button_radius',
			[
				'label' => esc_html__('Border Radius', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'size_units' => ['px', '%'],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'volume_button_shadow',
				'selector' => '{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute',
			]
		);

		$this->add_responsive_control(
			'volume_button_size',
			[
				'label' => esc_html__('Size', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 30,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute, {{WRAPPER}} .jp-audio .jp-unmute' => 'height: {{SIZE}}{{UNIT}};width: {{SIZE}}{{UNIT}};line-height: calc({{SIZE}}{{UNIT}} - 4px);',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_volume_button_hover',
			[
				'label' => esc_html__('Hover', 'bdthemes-element-pack'),
			]
		);

		$this->add_control(
			'volume_button_hover_icon_color',
			[
				'label' => esc_html__('Icon Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute:hover svg *, {{WRAPPER}} .jp-audio .jp-unmute:hover svg *' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_button_hover_background',
			[
				'label' => esc_html__('Background Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute:hover, {{WRAPPER}} .jp-audio .jp-unmute:hover' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_button_hover_border_color',
			[
				'label' => esc_html__('Border Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'condition' => [
					'volume_button_border_border!' => '',
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-mute:hover, {{WRAPPER}} .jp-audio .jp-unmute:hover' => 'border-color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name' => 'volume_button_hover_shadow',
				'selector' => '{{WRAPPER}} .jp-audio .jp-mute:hover, {{WRAPPER}} .jp-audio .jp-unmute:hover',
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_volume_bar',
			[
				'label' => esc_html__('Volume Bar', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'volume_bar' => 'yes',
					'_skin' => '',
				],
			]
		);

		$this->add_control(
			'volume_bar_height',
			[
				'label' => esc_html__('Bar Height', 'bdthemes-element-pack'),
				'type' => Controls_Manager::SLIDER,
				'range' => [
					'px' => [
						'min' => 1,
						'max' => 100,
					],
				],
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-volume-bar' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'volume_bar_color',
			[
				'label' => esc_html__('Bar Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-volume-bar' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'volume_bar_adjust_color',
			[
				'label' => esc_html__('Active Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .jp-audio .jp-volume-bar .jp-volume-bar-value' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_skin_audio_title',
			[
				'label' => esc_html__('Audio Title', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);

		$this->add_responsive_control(
			'skin_audio_title_padding',
			[
				'label' => esc_html__('Padding', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-title' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'skin_audio_title_color',
			[
				'label' => esc_html__('Text Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-title' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'skin_audio_title_text_shadow',
				'selector' => '{{WRAPPER}} .bdt-audio-player-title',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'skin_audio_title_typography',
				'label' => esc_html__('Typography', 'bdthemes-element-pack'),
				//'scheme'   => Schemes\Typography::TYPOGRAPHY_1,
				'selector' => '{{WRAPPER}} .bdt-audio-player-title',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_skin_author_name',
			[
				'label' => esc_html__('Author Name', 'bdthemes-element-pack'),
				'tab' => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin' => 'bdt-poster',
				],
			]
		);

		$this->add_responsive_control(
			'skin_author_name_padding',
			[
				'label' => esc_html__('Padding', 'bdthemes-element-pack'),
				'type' => Controls_Manager::DIMENSIONS,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-artist' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'skin_author_name_color',
			[
				'label' => esc_html__('Text Color', 'bdthemes-element-pack'),
				'type' => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player-artist span' => 'color: {{VALUE}}',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Text_Shadow::get_type(),
			[
				'name' => 'skin_author_name_text_shadow',
				'selector' => '{{WRAPPER}} .bdt-audio-player-artist span',
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name' => 'skin_author_name_typography',
				'label' => esc_html__('Typography', 'bdthemes-element-pack'),
				'selector' => '{{WRAPPER}} .bdt-audio-player-artist span',
			]
		);

		$this->end_controls_section();

		/**
		 * ==================================================================
		 * Showcase Skin | Style Tab
		 *
		 * All sections below are scoped to `_skin => bdt-showcase` via
		 * `$showcase_skin_condition`. Controls map to CSS variables and
		 * showcase-specific class selectors in audio-player.css.
		 * ==================================================================
		 */
		$showcase_skin_condition = [
			'_skin' => 'bdt-showcase',
		];

		$this->start_controls_section(
			'section_style_showcase_container',
			[
				'label'     => esc_html__( 'Showcase Container', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_responsive_control(
			'showcase_min_height',
			[
				'label'      => esc_html__( 'Min Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'vh' ],
				'range'      => [
					'px' => [
						'min' => 400,
						'max' => 1200,
					],
					'vh' => [
						'min' => 40,
						'max' => 100,
					],
				],
				'default'    => [
					'size' => 650,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => 'min-height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-audio-player.skin-showcase .bdt-ap-showcase-main' => 'min-height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_overlay_color',
			[
				'label'     => esc_html__( 'Overlay Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '',
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase .bdt-ap-showcase-content' => 'background-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_blur_level',
			[
				'label'      => esc_html__( 'Blur Level', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 40,
						'step' => 1,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase .bdt-ap-showcase-content' => 'backdrop-filter: blur({{SIZE}}{{UNIT}}); -webkit-backdrop-filter: blur({{SIZE}}{{UNIT}});',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_border_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'showcase_box_shadow',
				'selector' => '{{WRAPPER}} .bdt-audio-player.skin-showcase',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_showcase_slider',
			[
				'label'     => esc_html__( 'Cover Slider', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'showcase_slide_bg',
				'label'    => esc_html__( 'Slide Background', 'bdthemes-element-pack' ),
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'showcase_slide_border',
				'label'    => esc_html__( 'Slide Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide',
			]
		);

		$this->add_responsive_control(
			'showcase_slide_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_slide_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'showcase_slide_shadow',
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide',
			]
		);

		$this->add_control(
			'showcase_slide_title_color',
			[
				'label'     => esc_html__( 'Title Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide h3' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'showcase_slide_title_typography',
				'label'    => esc_html__( 'Title Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide h3',
			]
		);

		$this->add_responsive_control(
			'showcase_slide_thumb_radius',
			[
				'label'      => esc_html__( 'Image Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-swiper .swiper-slide img' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_showcase_playlist',
			[
				'label'     => esc_html__( 'Playlist', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_control(
			'showcase_active_color',
			[
				'label'     => esc_html__( 'Active Item Background', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--active-clr: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_playlist_item_border_color',
			[
				'label'     => esc_html__( 'Item Border Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-playlist-item' => 'border-bottom-color: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_playlist_item_padding',
			[
				'label'      => esc_html__( 'Item Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-playlist-item' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_playlist_item_spacing',
			[
				'label'      => esc_html__( 'Item Spacing', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 40,
					],
				],
				'default'    => [
					'size' => 15,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-playlist-item' => 'margin-bottom: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_playlist_thumb_size',
			[
				'label'      => esc_html__( 'Thumbnail Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ '%' ],
				'range'      => [
					'%' => [
						'min' => 30,
						'max' => 100,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-playlist-item img' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_playlist_items_heading',
			[
				'label'     => esc_html__( 'Artist', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'showcase_playlist_artist_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-song p:nth-child(1)' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'showcase_playlist_artist_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-song p:nth-child(1)',
			]
		);

		$this->add_control(
			'showcase_playlist_title_heading',
			[
				'label'     => esc_html__( 'Song Title', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'showcase_playlist_title_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-song p:nth-child(2)' => 'color: {{VALUE}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'showcase_playlist_title_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-song p:nth-child(2)',
			]
		);

		$this->add_control(
			'showcase_playlist_duration_heading',
			[
				'label'     => esc_html__( 'Duration', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::HEADING,
				'separator' => 'before',
			]
		);

		$this->add_control(
			'showcase_playlist_duration_color',
			[
				'label'     => esc_html__( 'Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-duration' => 'color: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-playlist-item > p' => 'color: {{VALUE}};',
				],
				'condition' => [
					'showcase_show_duration' => 'yes',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'     => 'showcase_playlist_duration_typography',
				'label'    => esc_html__( 'Typography', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-duration, {{WRAPPER}} .bdt-ap-showcase-playlist-item > p',
				'condition' => [
					'showcase_show_duration' => 'yes',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_showcase_player',
			[
				'label'     => esc_html__( 'Player Bar', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'showcase_player_background',
				'label'    => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'    => [ 'classic', 'gradient' ],
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-player',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'showcase_player_border',
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-player',
			]
		);

		$this->add_responsive_control(
			'showcase_player_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', '%' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_player_padding',
			[
				'label'      => esc_html__( 'Padding', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			[
				'name'     => 'showcase_player_shadow',
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-player',
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_showcase_controls',
			[
				'label'     => esc_html__( 'Controls', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_control(
			'showcase_control_color',
			[
				'label'     => esc_html__( 'Icons Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-icon-btn' => 'color: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-icon' => 'color: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-icon-btn svg' => 'fill: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-icon svg' => 'fill: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-icon svg path' => 'fill: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_controls_gap',
			[
				'label'      => esc_html__( 'Controls Gap', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 60,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-controls' => 'column-gap: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_controls_icon_size',
			[
				'label'      => esc_html__( 'Icons Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', 'em', 'rem' ],
				'range'      => [
					'px' => [
						'min' => 10,
						'max' => 80,
					],
					'em' => [
						'min' => 0.5,
						'max' => 5,
					],
					'rem' => [
						'min' => 0.5,
						'max' => 5,
					],
				],
				'default' => [
					'size' => 28,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-icon-btn' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-icon-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-icon' => 'font-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_volume_style_heading',
			[
				'label' => esc_html__( 'Volume Range', 'bdthemes-element-pack' ),
				'type'  => Controls_Manager::HEADING,
			]
		);

		$this->add_responsive_control(
			'showcase_volume_range_width',
			[
				'label'      => esc_html__( 'Range Width', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range'      => [
					'px' => [
						'min' => 40,
						'max' => 200,
					],
					'%' => [
						'min' => 20,
						'max' => 100,
					],
				],
				'default' => [
					'size' => 72,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-volume' => '--volume-range-width: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-range' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_volume_range_height',
			[
				'label'      => esc_html__( 'Range Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 2,
						'max' => 30,
					],
				],
				'default' => [
					'size' => 4,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-volume' => '--volume-range-height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-range' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-range::-webkit-slider-runnable-track' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-range::-moz-range-track' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_volume_track_color',
			[
				'label'     => esc_html__( 'Track Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--volume-track-clr: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_volume_fill_color',
			[
				'label'     => esc_html__( 'Fill Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--volume-fill-clr: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_volume_circle_color',
			[
				'label'     => esc_html__( 'Circle Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-volume-range::-webkit-slider-thumb' => 'background: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-volume-range::-moz-range-thumb'    => 'background: {{VALUE}};',
				],
			]
		);

		$this->end_controls_section();

		$this->start_controls_section(
			'section_style_showcase_like',
			[
				'label'     => esc_html__( 'Like Button', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => [
					'_skin'                  => 'bdt-showcase',
					'showcase_show_like'     => 'yes',
				],
			]
		);

		$this->add_control(
			'showcase_like_color',
			[
				'label'     => esc_html__( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--like-icon-clr: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-like-btn:not(.is-liked) svg' => 'stroke: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-like-btn:not(.is-liked) svg path' => 'stroke: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_liked_color',
			[
				'label'     => esc_html__( 'Liked Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-audio-player.skin-showcase' => '--like-liked-clr: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-like-btn.is-liked svg' => 'fill: {{VALUE}}; stroke: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-like-btn.is-liked svg path' => 'fill: {{VALUE}}; stroke: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_like_size',
			[
				'label'      => esc_html__( 'Icon Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 14,
						'max' => 36,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-like-btn svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

		/**
		 * --- Play / Pause button ---------------------------------------------
		 * Shared size controls live outside tabs; Normal/Hover tabs style
		 * background, border, and icon colour independently.
		 */
		$this->start_controls_section(
			'section_style_showcase_play_btn',
			[
				'label'     => esc_html__( 'Play Button', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_responsive_control(
			'showcase_play_btn_size',
			[
				'label'      => esc_html__( 'Button Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 32,
						'max' => 80,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-play-pause' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_play_btn_icon_size',
			[
				'label'      => esc_html__( 'Icon Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 12,
						'max' => 48,
					],
				],
				'default'    => [
					'size' => 22,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-play-pause svg.icon-play'  => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-play-pause svg.icon-pause' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->start_controls_tabs( 'tabs_showcase_play_btn' );

		$this->start_controls_tab(
			'tab_showcase_play_btn_normal',
			[
				'label' => esc_html__( 'Normal', 'bdthemes-element-pack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'showcase_play_btn_background',
				'label'    => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'    => [ 'classic', 'gradient' ],
				'exclude'  => [ 'image' ],
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-play-pause',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'showcase_play_btn_border',
				'label'    => esc_html__( 'Button Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-play-pause',
			]
		);

		$this->add_control(
			'showcase_play_btn_color',
			[
				'label'     => esc_html__( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-play-pause' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->start_controls_tab(
			'tab_showcase_play_btn_hover',
			[
				'label' => esc_html__( 'Hover', 'bdthemes-element-pack' ),
			]
		);

		$this->add_group_control(
			Group_Control_Background::get_type(),
			[
				'name'     => 'showcase_play_btn_hover_background',
				'label'    => esc_html__( 'Background', 'bdthemes-element-pack' ),
				'types'    => [ 'classic', 'gradient' ],
				'exclude'  => [ 'image' ],
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-play-pause:hover',
			]
		);

		$this->add_group_control(
			Group_Control_Border::get_type(),
			[
				'name'     => 'showcase_play_btn_hover_border',
				'label'    => esc_html__( 'Button Border', 'bdthemes-element-pack' ),
				'selector' => '{{WRAPPER}} .bdt-ap-showcase-play-pause:hover',
			]
		);

		$this->add_control(
			'showcase_play_btn_hover_color',
			[
				'label'     => esc_html__( 'Icon Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-play-pause:hover' => 'color: {{VALUE}};',
				],
			]
		);

		$this->end_controls_tab();

		$this->end_controls_tabs();
		$this->end_controls_section();

		/**
		 * --- Progress bar + time labels --------------------------------------
		 * Fill/track colours map to --progress-fill-clr / --progress-track-clr.
		 * JS syncs --progress-percent for accurate WebKit gradient rendering.
		 */
		$this->start_controls_section(
			'section_style_showcase_progress_bar',
			[
				'label'     => esc_html__( 'Progress Bar', 'bdthemes-element-pack' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => $showcase_skin_condition,
			]
		);

		$this->add_responsive_control(
			'showcase_progress_width',
			[
				'label'      => esc_html__( 'Width', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ '%', 'px' ],
				'range'      => [
					'%' => [
						'min' => 50,
						'max' => 100,
					],
					'px' => [
						'min' => 100,
						'max' => 600,
					],
				],
				'default'    => [
					'size' => 90,
					'unit' => '%',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-progress' => 'width: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_progress_time_color',
			[
				'label'     => esc_html__( 'Time Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-progress-current' => 'color: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-total'   => 'color: {{VALUE}};',
				],
				'condition' => [
					'showcase_show_progress_time' => 'yes',
				],
			]
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			[
				'name'      => 'showcase_progress_time_typography',
				'selector'  => '{{WRAPPER}} .bdt-ap-showcase-progress-current, {{WRAPPER}} .bdt-ap-showcase-progress-total',
				'condition' => [
					'showcase_show_progress_time' => 'yes',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_progress_height',
			[
				'label'      => esc_html__( 'Height', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 2,
						'max' => 30,
					],
				],
				'default'    => [
					'size' => 5,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => '--progress-bar-height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-webkit-slider-runnable-track' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-track' => 'height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-progress' => 'height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_control(
			'showcase_progress_track_color',
			[
				'label'     => esc_html__( 'Track Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => '--progress-track-clr: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_progress_fill_color',
			[
				'label'     => esc_html__( 'Fill Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => '--progress-fill-clr: {{VALUE}};',
				],
			]
		);

		$this->add_control(
			'showcase_progress_thumb_color',
			[
				'label'     => esc_html__( 'Circle Color', 'bdthemes-element-pack' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => '--progress-thumb-clr: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-webkit-slider-thumb' => 'background: {{VALUE}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-thumb' => 'background: {{VALUE}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_progress_thumb_size',
			[
				'label'      => esc_html__( 'Circle Size', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px' ],
				'range'      => [
					'px' => [
						'min' => 8,
						'max' => 30,
					],
				],
				'default'    => [
					'size' => 15,
					'unit' => 'px',
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-player' => '--progress-thumb-size: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-webkit-slider-thumb' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-thumb' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_progress_radius',
			[
				'label'      => esc_html__( 'Border Radius', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => [ 'px', '%' ],
				'range'      => [
					'px' => [
						'min' => 0,
						'max' => 20,
					],
				],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar' => 'border-radius: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-webkit-slider-runnable-track' => 'border-radius: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-track' => 'border-radius: {{SIZE}}{{UNIT}};',
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar::-moz-range-progress' => 'border-radius: {{SIZE}}{{UNIT}};',
				],
			]
		);

		$this->add_responsive_control(
			'showcase_progress_margin',
			[
				'label'      => esc_html__( 'Margin', 'bdthemes-element-pack' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => [ 'px', 'em' ],
				'selectors'  => [
					'{{WRAPPER}} .bdt-ap-showcase-progress-bar' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				],
			]
		);

		$this->end_controls_section();

	}

	public function render_audio_header($settings) {
		$this->add_render_attribute('audio-player', 'class', 'jp-jplayer');

		$this->add_render_attribute(
			[
				'audio-player' => [
					'data-settings' => [
						wp_json_encode(array_filter([
							'audio_title' => $settings['title'],
							'volume_level' => $settings['volume_level']['size'],
							'keyboard_enable' => ('yes' == $settings['keyboard_enable']) ? true : false,
							'smooth_show' => ('yes' == $settings['smooth_show']) ? true : false,
							'time_restrict' => ('yes' == $settings['time_restrict']) ? true : false,
							'restrict_duration' => (isset($settings['restrict_duration']['size']) ? $settings['restrict_duration']['size'] : 10),
							'autoplay' => ('yes' == $settings['autoplay']) ? true : false,
							'loop' => ('yes' == $settings['loop']) ? true : false,
							'audio_source' => ('remote_url' == $settings['source_type']) ? esc_url(do_shortcode($settings['remote_url']['url'])) : esc_url($settings['hosted_url']['url']),
						]))
					]
				]
			]
		);

		?>
		<div <?php $this->print_render_attribute_string('audio-player'); ?>></div>

		<?php
	}

	public function render_audio_default($id, $settings) {
	?>
		<div id="jp_container_<?php echo esc_attr($id); ?>" class="jp-audio" role="application" aria-label="media player">
			<div class="jp-type-playlist">
				<div class="jp-gui jp-interface">
					<div class="jp-controls bdt-grid bdt-grid-small bdt-flex-middle" data-bdt-grid>

						<?php $this->render_play_button($settings); ?>

						<?php $this->render_current_time($settings); ?>

						<?php $this->render_seek_bar($settings); ?>

						<?php $this->render_time_duration($settings); ?>

						<?php $this->render_mute_button($settings); ?>

						<?php $this->render_volume_bar($settings); ?>

					</div>

				</div>

			</div>
		</div>

		<?php
	}

	public function render_play_button($settings) {
	?>

		<div class="bdt-width-auto">
			<a href="javascript:void(0);" class="jp-play" tabindex="1"
				title="<?php esc_html_e('Play', 'bdthemes-element-pack'); ?> <?php echo esc_html($settings['title']); ?>">
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
					<path
						d="M36.1,20.2l-29-20C6.8,0,6.4-0.1,6,0.1C5.7,0.3,5.5,0.6,5.5,1v40c0,0.4,0.2,0.7,0.5,0.9C6.2,42,6.3,42,6.5,42c0.2,0,0.4-0.1,0.6-0.2l29-20c0.3-0.2,0.4-0.5,0.4-0.8S36.3,20.4,36.1,20.2z M7.5,39.1V2.9L33.7,21L7.5,39.1z" />
				</svg>
			</a>
			<a href="javascript:void(0);" class="jp-pause" tabindex="1"
				title="<?php esc_html_e('Pause', 'bdthemes-element-pack'); ?> <?php echo esc_html($settings['title']); ?>">
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
					viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
					<g>
						<path d="M14.5,0c-0.6,0-1,0.4-1,1v40c0,0.6,0.4,1,1,1s1-0.4,1-1V1C15.5,0.4,15.1,0,14.5,0z" />
						<path d="M27.5,0c-0.6,0-1,0.4-1,1v40c0,0.6,0.4,1,1,1s1-0.4,1-1V1C28.5,0.4,28.1,0,27.5,0z" />
					</g>
				</svg>
			</a>
		</div>

		<?php
	}

	public function render_seek_bar($settings) {

		$this->add_render_attribute('progress', 'title', $settings['title']);

		if ('tooltip' == $settings['audio_title'] and 'bdt-poster' !== $settings['_skin']) {
			$this->add_render_attribute('progress', 'data-bdt-tooltip');
		}

		?>

		<?php if ('yes' === $settings['seek_bar']): ?>
			<div class="bdt-width-expand">
				<div class="jp-progress" <?php $this->print_render_attribute_string('progress'); ?>>
					<?php if ('inline' === $settings['audio_title']): ?>
						<div class="bdt-audio-title">
							<?php echo esc_html($settings['title']); ?>
						</div>
					<?php endif; ?>
					<div class="jp-seek-bar">
						<div class="jp-play-bar"></div>
					</div>
				</div>
			</div>
		<?php endif;
	}

	public function render_current_time($settings) {

		?>

		<?php if ('time' === $settings['time_duration'] or 'both' === $settings['time_duration']): ?>
			<div class="bdt-width-auto">
				<div class="jp-current-time"></div>
			</div>
		<?php endif;
	}

	public function render_time_duration($settings) {

		?>

		<?php if ('duration' === $settings['time_duration'] or 'both' === $settings['time_duration']): ?>
			<div class="bdt-width-auto bdt-visible@m">
				<div class="jp-duration"></div>
			</div>
		<?php endif;
	}

	public function render_mute_button($settings) {

		?>

		<?php if ('yes' === $settings['volume_mute']): ?>
			<div class="bdt-width-auto bdt-audio-player-mute">
				<a href="javascript:void(0);" class="jp-mute" tabindex="1"
					title="<?php esc_html_e('Mute', 'bdthemes-element-pack'); ?>">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
						<g>
							<path d="M28.4,3.4c-1-0.6-2.1-0.5-3.1,0c0,0-0.1,0.1-0.1,0.1L11.6,15H1c-0.6,0-1,0.4-1,1v19c0,0.3,0.1,0.5,0.3,0.7S0.7,36,1,36
		l10.6,0l13.5,12.4c0,0,0.1,0.1,0.2,0.1c0.5,0.3,1,0.4,1.6,0.4c0.5,0,1-0.1,1.5-0.4c1-0.6,1.6-1.6,1.6-2.8V6.2C30,5,29.4,4,28.4,3.4
		z M28,45.9c0,0.4-0.2,0.8-0.6,1c-0.2,0.1-0.5,0.3-1,0L13,34.6V30c0-0.6-0.4-1-1-1s-1,0.4-1,1v4l-9,0V17h9v4c0,0.6,0.4,1,1,1
		s1-0.4,1-1v-4.5L26.4,5.1c0.5-0.2,0.9-0.1,1,0c0.4,0.2,0.6,0.6,0.6,1V45.9z" />
							<path
								d="M38.8,7.1c-0.5-0.2-1.1,0.1-1.3,0.6c-0.2,0.5,0.1,1.1,0.6,1.3C45.3,11.4,50,18,50,25.5c0,7.5-4.8,14.1-11.8,16.6
		c-0.5,0.2-0.8,0.7-0.6,1.3c0.1,0.4,0.5,0.7,0.9,0.7c0.1,0,0.2,0,0.3-0.1C46.7,41.3,52,33.9,52,25.5C52,17.2,46.7,9.8,38.8,7.1z" />
							<path d="M43,25.5c0-6-4-11.3-9.7-13c-0.5-0.2-1.1,0.2-1.2,0.7c-0.2,0.5,0.2,1.1,0.7,1.2c4.9,1.4,8.3,6,8.3,11s-3.4,9.6-8.3,11
		c-0.5,0.2-0.8,0.7-0.7,1.2c0.1,0.4,0.5,0.7,1,0.7c0.1,0,0.2,0,0.3,0C39,36.8,43,31.5,43,25.5z" />
						</g>
					</svg>
				</a>
				<a href="javascript:void(0);" class="jp-unmute" tabindex="1"
					title="<?php esc_html_e('Unmute', 'bdthemes-element-pack'); ?>">
					<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
						viewBox="0 0 54 54" style="enable-background:new 0 0 54 54;" xml:space="preserve">
						<g>
							<path d="M46.4,26l7.3-7.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L45,24.6l-7.3-7.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4l7.3,7.3l-7.3,7.3
		c-0.4,0.4-0.4,1,0,1.4c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3l7.3-7.3l7.3,7.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3
		c0.4-0.4,0.4-1,0-1.4L46.4,26z" />
							<path d="M28.4,4.4c-1-0.6-2.1-0.5-3.1,0c0,0-0.1,0.1-0.1,0.1L11.6,16H1c-0.6,0-1,0.4-1,1v19c0,0.3,0.1,0.5,0.3,0.7S0.7,37,1,37
		l10.6,0l13.5,12.4c0,0,0.1,0.1,0.2,0.1c0.5,0.3,1,0.4,1.6,0.4c0.5,0,1-0.1,1.5-0.4c1-0.6,1.6-1.6,1.6-2.8V7.2C30,6,29.4,5,28.4,4.4
		z M28,46.8c0,0.4-0.2,0.8-0.6,1c-0.2,0.1-0.5,0.3-1,0L13,35.6V31c0-0.6-0.4-1-1-1s-1,0.4-1,1v4l-9,0V18h9v4c0,0.6,0.4,1,1,1
		s1-0.4,1-1v-4.5L26.4,6.1c0.5-0.2,0.9-0.1,1,0c0.4,0.2,0.6,0.6,0.6,1V46.8z" />
						</g>
					</svg>
				</a>
			</div>
		<?php endif;
	}

	public function render_volume_bar($settings) {
		?>

		<?php if ('yes' === $settings['volume_bar']): ?>
			<div class="bdt-width-auto bdt-visible@m">
				<div class="jp-volume-bar">
					<div class="jp-volume-bar-value"></div>
				</div>
			</div>
		<?php endif;
	}

	protected function render() {
		$settings = $this->get_settings_for_display();
		$id = $this->get_id() . '-' . rand(100, 9999);
		?>
		<div class="bdt-audio-player skin-default">
			<?php $this->render_audio_header($settings); ?>
			<?php $this->render_audio_default($id, $settings); ?>
		</div>
		<?php
	}
}
