← All changes | includes/blocks/player/block.php +180 -0 2.7.6 → 2.14.0 View file →

		@@ -1,0 +1,180 @@
	1	+<?php
	2	+namespace ABlocks\Blocks\Player;
	3	+
	4	+if ( ! defined( 'ABSPATH' ) ) {
	5	+ exit;
	6	+}
	7	+
	8	+use ABlocks\Classes\BlockBaseAbstract;
	9	+use ABlocks\Classes\CssGeneratorV2;
	10	+use ABlocks\Controls\CssFilter;
	11	+use ABlocks\Controls\Color;
	12	+
	13	+class Block extends BlockBaseAbstract {
	14	+ protected $block_name = 'player';
	15	+ protected $style_depends = [ 'ablocks-plyr-style' ];
	16	+ protected $script_depends = [ 'ablocks-plyr-script' ];
	17	+
	18	+ public function build_css( $attributes ) {
	19	+
	20	+ // Generate CSS start
	21	+ $css_generator = new CssGeneratorV2( $attributes, $this->block_name );
	22	+
	23	+ $css_generator->add_class_styles(
	24	+ '{{WRAPPER}} .ablocks-block-youtube-container > .plyr--video > .plyr__controls',
	25	+ $this->get_youtube_progress_style_css( $attributes ),
	26	+ $this->get_youtube_progress_style_css( $attributes, 'Tablet' ),
	27	+ $this->get_youtube_progress_style_css( $attributes, 'Mobile' ),
	28	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_youtube_progress_style_css( $attributes, $device ); } )
	29	+ );
	30	+ $css_generator->add_class_styles(
	31	+ '{{WRAPPER}} .ablocks-block-youtube-container > .plyr--youtube > .plyr__control--overlaid',
	32	+ $this->get_youtube_play_pause__button_style_css( $attributes ),
	33	+ $this->get_youtube_play_pause__button_style_css( $attributes, 'Tablet' ),
	34	+ $this->get_youtube_play_pause__button_style_css( $attributes, 'Mobile' ),
	35	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_youtube_play_pause__button_style_css( $attributes, $device ); } )
	36	+ );
	37	+ $css_generator->add_class_styles(
	38	+ '{{WRAPPER}} .ablocks-block-selfhosted-container > .plyr--video > .plyr__controls',
	39	+ $this->get_self_video_style_css( $attributes ),
	40	+ $this->get_self_video_style_css( $attributes, 'Tablet' ),
	41	+ $this->get_self_video_style_css( $attributes, 'Mobile' ),
	42	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_self_video_style_css( $attributes, $device ); } )
	43	+ );
	44	+ $css_generator->add_class_styles(
	45	+ '{{WRAPPER}} .ablocks-block-selfhosted-container > .plyr--html5 > .plyr__control--overlaid',
	46	+ $this->get_self_host_control_style_css( $attributes ),
	47	+ $this->get_self_host_control_style_css( $attributes, 'Tablet' ),
	48	+ $this->get_self_host_control_style_css( $attributes, 'Mobile' ),
	49	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_self_host_control_style_css( $attributes, $device ); } )
	50	+ );
	51	+ $css_generator->add_class_styles(
	52	+ '{{WRAPPER}} .ablocks-block-vimeo-container > .plyr--video > .plyr__controls',
	53	+ $this->get_vimeo_video_style_css( $attributes ),
	54	+ $this->get_vimeo_video_style_css( $attributes, 'Tablet' ),
	55	+ $this->get_vimeo_video_style_css( $attributes, 'Mobile' ),
	56	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_vimeo_video_style_css( $attributes, $device ); } )
	57	+ );
	58	+ $css_generator->add_class_styles(
	59	+ '{{WRAPPER}} .ablocks-block-vimeo-container > .plyr--vimeo > .plyr__control--overlaid',
	60	+ $this->get_vimeo_player_control_style_css( $attributes ),
	61	+ $this->get_vimeo_player_control_style_css( $attributes, 'Tablet' ),
	62	+ $this->get_vimeo_player_control_style_css( $attributes, 'Mobile' ),
	63	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_vimeo_player_control_style_css( $attributes, $device ); } )
	64	+ );
	65	+ $css_generator->add_class_styles(
	66	+ '{{WRAPPER}} .plyr__poster',
	67	+ $this->get_poster_image( $attributes ),
	68	+ $this->get_poster_image( $attributes, 'Tablet' ),
	69	+ $this->get_poster_image( $attributes, 'Mobile' ),
	70	+ $css_generator->custom_device_map( function ( $device ) use ( $attributes ) { return $this->get_poster_image( $attributes, $device ); } )
	71	+ );
	72	+
	73	+ return $css_generator->generate_css();
	74	+ // Generate CSS end
	75	+ }
	76	+ public function get_youtube_progress_style_css( $attributes, $device = '' ) {
	77	+ $css = [];
	78	+
	79	+ if ( isset( $attributes['youtubeIconSize'] ) ) {
	80	+ $css['--plyr-control-icon-size'] = $attributes['youtubeIconSize'] . 'px';
	81	+ }
	82	+ $css['padding'] = '0';
	83	+ return array_merge(
	84	+ [ '--plyr-color-main' => Color::get_css( isset( $attributes['youtubeProgressColor'] ) ? $attributes['youtubeProgressColor'] : '' ) ],
	85	+ [ '--plyr-video-controls-background' => Color::get_css( isset( $attributes['playerbgColor'] ) ? $attributes['playerbgColor'] : '' ) ],
	86	+ $css
	87	+ );
	88	+ }
	89	+ public function get_youtube_play_pause__button_style_css( $attributes, $device = '' ) {
	90	+ $css = [];
	91	+
	92	+ if ( isset( $attributes['youtubeUiColor'] ) ) {
	93	+ $css['--plyr-color-main'] = Color::get_css(
	94	+ isset( $attributes['youtubeUiColor'] ) ? $attributes['youtubeUiColor'] : '');
	95	+
	96	+ }
	97	+
	98	+ if ( isset( $attributes['youtubePlayPauseIconSize'] ) ) {
	99	+ $css['--plyr-control-icon-size'] = $attributes['youtubePlayPauseIconSize'] . 'px';
	100	+ }
	101	+
	102	+ return $css;
	103	+ }
	104	+ public function get_self_video_style_css( $attributes, $device = '' ) {
	105	+ $css = [];
	106	+
	107	+ if ( isset( $attributes['selfVideoProgressUiColor'] ) ) {
	108	+ $css['--plyr-color-main'] = Color::get_css(
	109	+ isset( $attributes['selfVideoProgressUiColor'] ) ? $attributes['selfVideoProgressUiColor'] : '');
	110	+ }
	111	+
	112	+ if ( isset( $attributes['selfHostedPlayIconSize'] ) ) {
	113	+ $css['--plyr-control-icon-size'] = $attributes['selfHostedPlayIconSize'] . 'px';
	114	+ }
	115	+ if ( isset( $attributes['selfVideobgColor'] ) ) {
	116	+ $css['--plyr-video-controls-background'] = Color::get_css(
	117	+ isset( $attributes['selfVideobgColor'] ) ? $attributes['selfVideobgColor'] : '');
	118	+ }
	119	+ $css['padding'] = '0';
	120	+
	121	+ return $css;
	122	+ }
	123	+ public function get_self_host_control_style_css( $attributes, $device = '' ) {
	124	+ $css = [];
	125	+
	126	+ if ( isset( $attributes['selfVideoUiColor'] ) ) {
	127	+ $css['--plyr-color-main'] = Color::get_css(
	128	+ isset( $attributes['selfVideoUiColor'] ) ? $attributes['selfVideoUiColor'] : '');
	129	+
	130	+ }
	131	+
	132	+ if ( isset( $attributes['selfHostedIconSize'] ) ) {
	133	+ $css['--plyr-control-icon-size'] = $attributes['selfHostedIconSize'] . 'px';
	134	+ }
	135	+
	136	+ return $css;
	137	+ }
	138	+ public function get_vimeo_video_style_css( $attributes, $device = '' ) {
	139	+ $css = [];
	140	+
	141	+ if ( isset( $attributes['vimeoProgressUiColor'] ) ) {
	142	+ $css['--plyr-color-main'] = Color::get_css(
	143	+ isset( $attributes['vimeoProgressUiColor'] ) ? $attributes['vimeoProgressUiColor'] : '');
	144	+
	145	+ }
	146	+
	147	+ if ( isset( $attributes['vimeoPlayIconSize'] ) ) {
	148	+ $css['--plyr-control-icon-size'] = $attributes['vimeoPlayIconSize'] . 'px';
	149	+ }
	150	+ if ( isset( $attributes['vimeobgColor'] ) ) {
	151	+ $css['--plyr-video-controls-background'] = Color::get_css(
	152	+ isset( $attributes['vimeobgColor'] ) ? $attributes['vimeobgColor'] : '');
	153	+ }
	154	+ $css['padding'] = '0';
	155	+
	156	+ return $css;
	157	+ }
	158	+ public function get_vimeo_player_control_style_css( $attributes, $device = '' ) {
	159	+ $css = [];
	160	+ $css['--plyr-color-main'] = Color::get_css(
	161	+ isset( $attributes['vimeoUiColor'] ) ? $attributes['vimeoUiColor'] : '');
	162	+
	163	+ if ( isset( $attributes['vimeoIconSize'] ) ) {
	164	+ $css['--plyr-control-icon-size'] = $attributes['vimeoIconSize'] . 'px';
	165	+ }
	166	+
	167	+ return $css;
	168	+ }
	169	+ public function get_poster_image( $attributes, $device = '' ) {
	170	+ $css = [];
	171	+
	172	+ if ( ! empty( $attributes['posterImage'] ) ) {
	173	+ $css['background-image'] = 'url(' . esc_url( $attributes['posterImage'] ) . ') !important';
	174	+ }
	175	+
	176	+ $css['background-size'] = 'cover';
	177	+
	178	+ return $css;
	179	+ }
	180	+}