<?php
/**
 * Player Template: cover-flow.
 *
 * Allow User CSS Overrides: true
 * Show Audio Info: true
 * Show Playlist: true
 * Default Accent Color: #8e804f
 * Default Accent 2 Color: #544434
 * Default Base Color: #442e2e
 * Default Text Color: #f2f2f2
 * Default Waveform Color: #a19696
 * Default Ring Base Color: #442e2e
 *
 * @package The Studio Player
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}
$thespl_playlist_id = isset( $thespl_context['playlist_id'] ) ? (int) $thespl_context['playlist_id'] : 0;
if ( $thespl_playlist_id <= 0 ) {
	return;
}
$thespl_template_slug = isset( $thespl_context['template'] ) && is_string( $thespl_context['template'] ) ? sanitize_key( $thespl_context['template'] ) : 'cover-flow';
if ( '' === $thespl_template_slug ) {
	$thespl_template_slug = 'cover-flow';
}
$thespl_wrapper_id               = 'thespl-player-' . $thespl_playlist_id . '-' . wp_rand( 1000, 9999 );
$thespl_design                   = function_exists( 'thespl_design_get_schema' ) ? thespl_design_get_schema( $thespl_playlist_id, $thespl_template_slug ) : get_post_meta( $thespl_playlist_id, '_thespl_playlist_design', true );
$thespl_design                   = is_array( $thespl_design ) ? $thespl_design : array();
$thespl_settings                 = function_exists( 'thespl_get_player_settings' ) ? thespl_get_player_settings() : array();
$thespl_global_debug_enabled     = ! empty( $thespl_settings['debug_console_enabled'] );
$thespl_allow_user_css_overrides = function_exists( 'thespl_template_allows_user_css_overrides' ) ? thespl_template_allows_user_css_overrides( $thespl_template_slug ) : true;
$thespl_audio_pref               = function_exists( 'thespl_template_get_show_audio_info_pref' ) ? thespl_template_get_show_audio_info_pref( $thespl_template_slug ) : null;
$thespl_playlist_pref            = function_exists( 'thespl_template_get_show_playlist_pref' ) ? thespl_template_get_show_playlist_pref( $thespl_template_slug ) : null;
$thespl_basecol                  = isset( $thespl_design['base_color'] ) && is_string( $thespl_design['base_color'] ) ? sanitize_hex_color( $thespl_design['base_color'] ) : '#050816';
$thespl_accent                   = isset( $thespl_design['accent_color'] ) && is_string( $thespl_design['accent_color'] ) ? sanitize_hex_color( $thespl_design['accent_color'] ) : '#22d3ee';
$thespl_accent2                  = isset( $thespl_design['accent_2_color'] ) && is_string( $thespl_design['accent_2_color'] ) ? sanitize_hex_color( $thespl_design['accent_2_color'] ) : '#a5f3fc';
$thespl_textcol                  = isset( $thespl_design['text_color'] ) && is_string( $thespl_design['text_color'] ) ? sanitize_hex_color( $thespl_design['text_color'] ) : '#f9fafb';
$thespl_ringbase                 = isset( $thespl_design['ring_base_color'] ) && is_string( $thespl_design['ring_base_color'] ) ? sanitize_hex_color( $thespl_design['ring_base_color'] ) : '#222222';
$thespl_buffer_alpha             = 0.3;
if ( isset( $thespl_design['buffer_ring_alpha'] ) ) {
	$thespl_buffer_alpha_value = (float) $thespl_design['buffer_ring_alpha'];
	if ( $thespl_buffer_alpha_value >= 0.0 && $thespl_buffer_alpha_value <= 1.0 ) {
		$thespl_buffer_alpha = $thespl_buffer_alpha_value; }
}
$thespl_buffer_color = '';
if ( '' !== $thespl_accent && function_exists( 'thespl_hex_to_rgb' ) ) {
	$thespl_accent_rgb = thespl_hex_to_rgb( $thespl_accent );
	if ( is_array( $thespl_accent_rgb ) && 3 === count( $thespl_accent_rgb ) ) {
		$thespl_buffer_color = sprintf( 'rgba(%d,%d,%d,%.3f)', $thespl_accent_rgb[0], $thespl_accent_rgb[1], $thespl_accent_rgb[2], $thespl_buffer_alpha );
	}
}
$thespl_show_pl = ! isset( $thespl_design['show_playlist'] ) ? true : (bool) $thespl_design['show_playlist'];
$thespl_show_ai = ! isset( $thespl_design['show_audio_info'] ) ? true : (bool) $thespl_design['show_audio_info'];
if ( ! $thespl_allow_user_css_overrides ) {
	if ( null !== $thespl_playlist_pref ) {
		$thespl_show_pl = (bool) $thespl_playlist_pref; }
	if ( null !== $thespl_audio_pref ) {
		$thespl_show_ai = (bool) $thespl_audio_pref;    }
}
$thespl_audio_info_box_enabled = ( ! $thespl_allow_user_css_overrides && null !== $thespl_audio_pref ) ? (bool) $thespl_audio_pref : true;
$thespl_wrapper_classes        = 'thespl-player thespl-cover-flow';
if ( ! $thespl_show_pl ) {
	$thespl_wrapper_classes .= ' thespl-hide-playlist'; }
if ( ! $thespl_show_ai ) {
	$thespl_wrapper_classes .= ' thespl-hide-audio-info'; }
$thespl_btn_bg     = isset( $thespl_design['button_bg_color'] ) && is_string( $thespl_design['button_bg_color'] ) ? sanitize_hex_color( $thespl_design['button_bg_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, $thespl_accent, 0.22 ) : $thespl_basecol );
$thespl_btn_text   = isset( $thespl_design['button_text_color'] ) && is_string( $thespl_design['button_text_color'] ) ? sanitize_hex_color( $thespl_design['button_text_color'] ) : ( function_exists( 'thespl_best_text_on_bg' ) ? thespl_best_text_on_bg( $thespl_btn_bg ) : $thespl_textcol );
$thespl_btn_act_bg = isset( $thespl_design['button_active_bg_color'] ) && is_string( $thespl_design['button_active_bg_color'] ) ? sanitize_hex_color( $thespl_design['button_active_bg_color'] ) : $thespl_accent;
$thespl_btn_act_tx = isset( $thespl_design['button_active_text_color'] ) && is_string( $thespl_design['button_active_text_color'] ) ? sanitize_hex_color( $thespl_design['button_active_text_color'] ) : ( function_exists( 'thespl_best_text_on_bg' ) ? thespl_best_text_on_bg( $thespl_btn_act_bg ) : $thespl_basecol );
$thespl_chip_bg    = isset( $thespl_design['chip_bg_color'] ) && is_string( $thespl_design['chip_bg_color'] ) ? sanitize_hex_color( $thespl_design['chip_bg_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, '#ffffff', 0.07 ) : $thespl_basecol );
$thespl_chip_br    = isset( $thespl_design['chip_br_color'] ) && is_string( $thespl_design['chip_br_color'] ) ? sanitize_hex_color( $thespl_design['chip_br_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, '#ffffff', 0.16 ) : $thespl_basecol );
$thespl_panel_bg   = isset( $thespl_design['panel_bg_color'] ) && is_string( $thespl_design['panel_bg_color'] ) ? sanitize_hex_color( $thespl_design['panel_bg_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, '#000000', 0.18 ) : $thespl_basecol );
$thespl_panel_br   = isset( $thespl_design['panel_br_color'] ) && is_string( $thespl_design['panel_br_color'] ) ? sanitize_hex_color( $thespl_design['panel_br_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, '#ffffff', 0.11 ) : $thespl_basecol );
$thespl_wave_col   = isset( $thespl_design['waveform_color'] ) && is_string( $thespl_design['waveform_color'] ) ? sanitize_hex_color( $thespl_design['waveform_color'] ) : '#5a5a5a';
$thespl_shadow_col = isset( $thespl_design['shadow_color'] ) && is_string( $thespl_design['shadow_color'] ) ? sanitize_hex_color( $thespl_design['shadow_color'] ) : ( function_exists( 'thespl_mix_hex' ) ? thespl_mix_hex( $thespl_basecol, '#000000', 0.55 ) : $thespl_basecol );
$thespl_style_vars = function_exists( 'thespl_design_schema_to_css_vars' ) ? thespl_design_schema_to_css_vars( $thespl_design ) : '';
$thespl_extra_css  = array(
	'--thespl-bg'                 => $thespl_basecol,
	'--thespl-text'               => $thespl_textcol,
	'--thespl-accent'             => $thespl_accent,
	'--thespl-accent-2'           => $thespl_accent2,
	'--thespl-ring-base'          => $thespl_ringbase,
	'--thespl-button-bg'          => $thespl_btn_bg,
	'--thespl-button-text'        => $thespl_btn_text,
	'--thespl-button-active-bg'   => $thespl_btn_act_bg,
	'--thespl-button-active-text' => $thespl_btn_act_tx,
	'--thespl-chip-bg'            => $thespl_chip_bg,
	'--thespl-chip-br'            => $thespl_chip_br,
	'--thespl-panel-bg'           => $thespl_panel_bg,
	'--thespl-panel-br'           => $thespl_panel_br,
	'--thespl-waveform'           => $thespl_wave_col,
	'--thespl-shadow'             => $thespl_shadow_col,
);
foreach ( $thespl_extra_css as $thespl_css_key => $thespl_css_value ) {
	if ( '' === $thespl_css_value ) {
		continue; }
	$thespl_style_vars .= ( '' !== $thespl_style_vars ? ';' : '' ) . $thespl_css_key . ':' . $thespl_css_value;
}
if ( '' !== $thespl_buffer_color ) {
	$thespl_style_vars .= ( '' !== $thespl_style_vars ? ';' : '' ) . '--thespl-buffered:' . $thespl_buffer_color;
}
$thespl_core_ui_attr = 'off';
if ( isset( $thespl_context['core_ui_enabled'] ) ) {
	$thespl_core_ui_attr = $thespl_context['core_ui_enabled'] ? 'on' : 'off';
}
$thespl_debug_console_enabled   = (bool) $thespl_global_debug_enabled;
$thespl_audio_info_enabled_attr = ( $thespl_audio_info_box_enabled && $thespl_show_ai ) ? '1' : '0';
?>
<div
	id="<?php echo esc_attr( $thespl_wrapper_id ); ?>"
	class="<?php echo esc_attr( $thespl_wrapper_classes ); ?>"
	style="<?php echo esc_attr( $thespl_style_vars ); ?>"
	data-playlist-id="<?php echo esc_attr( (string) $thespl_playlist_id ); ?>"
	data-template-slug="<?php echo esc_attr( $thespl_template_slug ); ?>"
	data-debug="<?php echo esc_attr( $thespl_debug_console_enabled ? '1' : '0' ); ?>"
	data-thespl-core-ui="<?php echo esc_attr( $thespl_core_ui_attr ); ?>"
	data-thespl-audio-info-enabled="<?php echo esc_attr( $thespl_audio_info_enabled_attr ); ?>"
	data-thespl-i18n-status-buffering="<?php echo esc_attr__( 'Buffering', 'the-studio-player' ); ?>"
	data-thespl-i18n-status-ready="<?php echo esc_attr__( 'Ready', 'the-studio-player' ); ?>"
	data-thespl-i18n-status-paused="<?php echo esc_attr__( 'Paused', 'the-studio-player' ); ?>"
	data-thespl-i18n-status-stopped="<?php echo esc_attr__( 'Stopped', 'the-studio-player' ); ?>"
	data-thespl-i18n-binaural-message="<?php echo esc_attr__( 'Binaural audio – use headphones', 'the-studio-player' ); ?>"
	data-thespl-infotext-mode="scroll"
>
	<div class="thespl-cf-header">
		<div class="thespl-cf-track-info">
			<div class="thespl-cf-track-title"></div>
			<div class="thespl-cf-track-artist"></div>
		</div>
		<div class="thespl-cf-time">
			<span class="thespl-cf-time-current">0:00</span>
			<span class="thespl-cf-time-sep">/</span>
			<span class="thespl-cf-time-total">0:00</span>
		</div>
	</div>

	<div class="thespl-player__canvas-wrap">
		<canvas class="thespl-player__canvas" width="900" height="140"></canvas>
	</div>

	<div class="thespl-player__status" role="status" aria-live="polite"></div>
	<div class="thespl-player__infotext" role="status" aria-live="polite"></div>

	<div class="thespl-cf-controls-row">
		<div class="thespl-player__variants" role="tablist"></div>
		<div class="thespl-player__controls">
			<button type="button" class="thespl-player__btn thespl-player__btn--legacy thespl-player__btn--play" tabindex="-1" aria-hidden="true"></button>
			<button type="button" class="thespl-player__btn thespl-player__btn--legacy thespl-player__btn--pause" tabindex="-1" aria-hidden="true"></button>
			<button type="button" class="thespl-player__btn thespl-player__btn--toggle" aria-pressed="false" data-state="play" aria-label="<?php echo esc_attr__( 'Play', 'the-studio-player' ); ?>">
				<span class="thespl-player__btn-icon" aria-hidden="true"></span>
			</button>
			<button type="button" class="thespl-player__btn thespl-player__btn--stop" aria-label="<?php echo esc_attr__( 'Stop', 'the-studio-player' ); ?>">
				<span class="thespl-player__btn-icon" aria-hidden="true"></span>
			</button>
		</div>
	</div>

	<div class="thespl-cf-coverflow-shell">
		<button type="button" class="thespl-cf-arrow thespl-cf-arrow--prev" aria-label="<?php echo esc_attr__( 'Previous', 'the-studio-player' ); ?>">&#8249;</button>
		<div class="thespl-cf-stage">
			<div class="thespl-player__playlist" role="list" aria-label="<?php echo esc_attr__( 'Playlist', 'the-studio-player' ); ?>"></div>
		</div>
		<button type="button" class="thespl-cf-arrow thespl-cf-arrow--next" aria-label="<?php echo esc_attr__( 'Next', 'the-studio-player' ); ?>">&#8250;</button>
		<div class="thespl-cf-vignette thespl-cf-vignette--left"  aria-hidden="true"></div>
		<div class="thespl-cf-vignette thespl-cf-vignette--right" aria-hidden="true"></div>
	</div>

	<?php if ( $thespl_audio_info_box_enabled && $thespl_show_ai ) : ?>
		<?php $thespl_audio_info_panel_id = $thespl_wrapper_id . '-audio-info-panel'; ?>
		<div class="thespl-player__audio-info-toggle-wrap">
			<button
				type="button"
				class="thespl-player__audio-info-toggle"
				aria-expanded="false"
				aria-controls="<?php echo esc_attr( $thespl_audio_info_panel_id ); ?>"
				data-label-open="<?php echo esc_attr__( 'Show Audio Info', 'the-studio-player' ); ?>"
				data-label-close="<?php echo esc_attr__( 'Hide Audio Info', 'the-studio-player' ); ?>"
			>
				<span class="thespl-player__audio-info-toggle-label"><?php echo esc_html__( 'Show Audio Info', 'the-studio-player' ); ?></span>
				<span class="thespl-player__audio-info-toggle-arrow" aria-hidden="true"></span>
			</button>
		</div>
		<div id="<?php echo esc_attr( $thespl_audio_info_panel_id ); ?>" class="thespl-player__audio-info-panel is-collapsed" aria-hidden="true">
			<div class="thespl-player__audio-info" role="status" aria-live="polite">
				<div class="thespl-player__audio-info-head">
					<div class="thespl-player__audio-info-title"><?php echo esc_html__( 'Audio Info', 'the-studio-player' ); ?></div>
					<div class="thespl-player__audio-info-build">
						<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_version"></span>
						<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_codename"></span>
						<span class="thespl-player__audio-info-build-item" data-thespl-audio-info="plugin_build"></span>
					</div>
				</div>
				<div class="thespl-player__audio-info-grid">
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Track', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="track"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Variant', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="variant"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Sample Rate', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="sample_rate"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Bit Depth', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="bit_depth"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Channels', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="channels"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'AudioContext', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="audiocontext"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Playback', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="playback"></span>
					</div>
					<div class="thespl-player__audio-info-item">
						<span class="thespl-player__audio-info-key"><?php echo esc_html__( 'Buffer', 'the-studio-player' ); ?></span>
						<span class="thespl-player__audio-info-val" data-thespl-audio-info="buffer"></span>
					</div>
				</div>
				<div class="thespl-player__audio-info-levels" data-thespl-audio-info-levels></div>
			</div>
		</div>
	<?php endif; ?>
	<div class="thespl-player__metafoot" data-thespl-meta="picho"></div>
	<audio class="thespl-player__audio" preload="metadata" crossorigin="anonymous"></audio>
</div>
