easy-elements / widgets / video / video.php

video.php in Easy Elements for Elementor – Addons & Website Templates 1.5.0, at widgets/video/video.php

1,251 lines 37.8 KB

Raw Download Zip

1	<?php
2	namespace Easyel\EasyElements\Widgets;
3	use Elementor\Controls_Manager;
4	use Elementor\Utils;
5	use Elementor\Widget_Base;
6	use \Elementor\Group_Control_Border;
7
8	if ( ! defined( 'ABSPATH' ) ) {
9	exit;
10	}
11
12	class Easyel_Video_Popup_Widget extends \Elementor\Widget_Base {
13
14	public function get_name() {
15	return 'eel-video-popup';
16	}
17
18	public function get_title() {
19	return __( 'Video', 'easy-elements' );
20	}
21
22	public function get_icon() {
23	return 'easyicon easyelIcon-video';
24	}
25
26	public function get_categories() {
27	return [ 'easyelements_category' ];
28	}
29
30	public function get_keywords() {
31	return [ 'video', 'popup', 'link', 'click' ];
32	}
33
34	public function get_style_depends() {
35	return [
36	'eel-video-popup',
37	];
38	}
39
40	protected function register_controls() {
41	$this->start_controls_section(
42	'section_video',
43	[
44	'label' => __( 'Video Settings', 'easy-elements' ),
45	]
46	);
47
48	$this->add_control(
49	'display_type',
50	[
51	'label' => __( 'Display Type', 'easy-elements' ),
52	'type' => Controls_Manager::SELECT,
53	'default' => 'normal',
54	'options' => [
55	'normal' => __( 'Normal Only', 'easy-elements' ),
56	'popup' => __( 'Popup Only', 'easy-elements' ),
57	],
58	]
59	);
60
61	$this->add_control(
62	'video_type',
63	[
64	'label' => __( 'Video Type', 'easy-elements' ),
65	'type' => Controls_Manager::SELECT,
66	'default' => 'youtube',
67	'options' => [
68	'youtube' => __( 'YouTube', 'easy-elements' ),
69	'vimeo' => __( 'Vimeo', 'easy-elements' ),
70	'self_hosted'=> __( 'Self Hosted', 'easy-elements' ),
71	],
72	]
73	);
74
75	$this->add_control(
76	'video_url',
77	[
78	'label' => __( 'Video URL', 'easy-elements' ),
79	'type' => Controls_Manager::TEXT,
80	'default' => 'https://www.youtube.com/watch?v=hDABYoas7SY',
81	'placeholder' => __( 'https://www.youtube.com/watch?v=hDABYoas7SY', 'easy-elements' ),
82	'condition' => [
83	'video_type' => 'youtube',
84	],
85	]
86	);
87
88	$this->add_control(
89	'video_url_vimeo',
90	[
91	'label' => __( 'Video URL', 'easy-elements' ),
92	'type' => Controls_Manager::TEXT,
93	'default' => 'https://vimeo.com/347119375',
94	'placeholder' => __( 'https://vimeo.com/347119375', 'easy-elements' ),
95	'condition' => [
96	'video_type' => 'vimeo',
97	],
98	]
99	);
100
101	$this->add_control(
102	'self_hosted_video',
103	[
104	'label' => __( 'Self Hosted Video', 'easy-elements' ),
105	'type' => Controls_Manager::MEDIA,
106	'media_type' => 'video',
107	'condition' => [
108	'video_type' => 'self_hosted',
109	],
110	]
111	);
112
113	$this->add_responsive_control(
114	'video_height',
115	[
116	'label' => __( 'Video Height', 'easy-elements' ),
117	'type' => \Elementor\Controls_Manager::SLIDER,
118	'size_units' => [ 'px', 'vh' ],
119	'range' => [
120	'px' => [
121	'min' => 100,
122	'max' => 1000,
123	],
124	'vh' => [
125	'min' => 10,
126	'max' => 100,
127	],
128	],
129	'default' => [
130	'size' => 700,
131	'unit' => 'px',
132	],
133	'selectors' => [
134	'{{WRAPPER}} .eel-video-popup-wrapper iframe' => 'height: {{SIZE}}{{UNIT}};',
135	'{{WRAPPER}} .eel-video-popup-wrapper video' => 'height: {{SIZE}}{{UNIT}};',
136	],
137	'condition' => [
138	'display_type' => 'normal',
139	],
140	]
141	);
142
143	$this->add_responsive_control(
144	'video_max_width',
145	[
146	'label' => __( 'Video Max Width', 'easy-elements' ),
147	'type' => \Elementor\Controls_Manager::SLIDER,
148	'size_units' => [ 'px', '%' ],
149	'range' => [
150	'px' => [
151	'min' => 100,
152	'max' => 1920,
153	],
154	'%' => [
155	'min' => 10,
156	'max' => 100,
157	],
158	],
159	'selectors' => [
160	'{{WRAPPER}} .eel-video-popup-wrapper iframe.eel-normal-video' => 'max-width: {{SIZE}}{{UNIT}};',
161	'{{WRAPPER}} .eel-video-popup-wrapper video.eel-normal-video' => 'max-width: {{SIZE}}{{UNIT}};',
162	],
163	'condition' => [
164	'display_type' => 'normal',
165	],
166	]
167	);
168
169	$this->add_responsive_control(
170	'video_border_radius_normal',
171	[
172	'label' => __( 'Video Border Radius', 'easy-elements' ),
173	'type' => \Elementor\Controls_Manager::DIMENSIONS,
174	'size_units' => [ 'px', '%' ],
175	'selectors' => [
176	'{{WRAPPER}} .eel-video-popup-wrapper iframe.eel-normal-video' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
177	'{{WRAPPER}} .eel-video-popup-wrapper video.eel-normal-video' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
178	],
179	'condition' => [
180	'display_type' => 'normal',
181	],
182	]
183	);
184
185	$this->add_group_control(
186	\Elementor\Group_Control_Css_Filter::get_type(),
187	[
188	'name' => 'video_filters',
189	'label' => __( 'CSS Filters', 'easy-elements' ),
190	'selector' => '{{WRAPPER}} .eel-video-popup-wrapper iframe, {{WRAPPER}} .eel-video-popup-wrapper video',
191	]
192	);
193
194
195
196	$this->add_control(
197	'popup_trigger_text',
198	[
199	'label' => __( 'Trigger Text', 'easy-elements' ),
200	'type' => Controls_Manager::TEXT,
201	'default' => __( 'Play Video', 'easy-elements' ),
202	'condition' => [
203	'display_type' => 'popup',
204	],
205	]
206	);
207
208	$this->add_responsive_control(
209	'popup_icon_spacing',
210	[
211	'label' => __( 'Text Spacing', 'easy-elements' ),
212	'type' => \Elementor\Controls_Manager::SLIDER,
213	'size_units' => [ 'px' ],
214	'default' => [
215	'size' => 8,
216	'unit' => 'px',
217	],
218	'range' => [
219	'px' => [
220	'min' => 0,
221	'max' => 100,
222	],
223	],
224	'selectors' => [
225	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap + .eel-trigger-text' => 'margin-left: {{SIZE}}{{UNIT}};',
226	'{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text + .eel-icon-wrap' => 'margin-left: {{SIZE}}{{UNIT}};',
227	],
228	'condition' => [
229	'display_type' => 'popup',
230	],
231	]
232	);
233
234	$this->add_control(
235	'popup_text_color',
236	[
237	'label' => __( 'Text Color', 'easy-elements' ),
238	'type' => Controls_Manager::COLOR,
239	'selectors' => [
240	'{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text' => 'color: {{VALUE}};',
241	],
242	'condition' => [
243	'display_type' => 'popup',
244	],
245	]
246	);
247
248	$this->add_group_control(
249	\Elementor\Group_Control_Typography::get_type(),
250	[
251	'name' => 'popup_text_typography',
252	'label' => __( 'Typography', 'easy-elements' ),
253	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-trigger-text',
254	'condition' => [
255	'display_type' => 'popup',
256	],
257	]
258	);
259
260	$this->add_control(
261	'popup_icon_show',
262	[
263	'label' => __( 'Show Icon', 'easy-elements' ),
264	'type' => \Elementor\Controls_Manager::SWITCHER,
265	'label_on' => __( 'Yes', 'easy-elements' ),
266	'label_off' => __( 'No', 'easy-elements' ),
267	'return_value' => 'yes',
268	'default' => 'yes',
269	'condition' => [
270	'display_type' => 'popup',
271	],
272	]
273	);
274
275	$this->add_control(
276	'popup_icon_hover_show',
277	[
278	'label' => __( 'Default Hide & Hover Show', 'easy-elements' ),
279	'type' => \Elementor\Controls_Manager::SWITCHER,
280	'label_on' => __( 'Yes', 'easy-elements' ),
281	'label_off' => __( 'No', 'easy-elements' ),
282	'return_value' => 'yes',
283	'default' => 'no',
284	'condition' => [
285	'display_type' => 'popup',
286	'popup_icon_show' => 'yes'
287	],
288	]
289	);
290
291	$this->add_control(
292	'popup_trigger_icon',
293	[
294	'label' => __( 'Icon', 'easy-elements' ),
295	'type' => Controls_Manager::ICONS,
296	'default' => [
297	'value' => '',
298	'library' => 'fa-solid',
299	],
300	'condition' => [
301	'display_type' => 'popup',
302	'popup_icon_show' => 'yes',
303	],
304	]
305	);
306
307	$this->add_control(
308	'popup_icon_position',
309	[
310	'label' => __( 'Icon Position', 'easy-elements' ),
311	'type' => Controls_Manager::SELECT,
312	'default' => 'before',
313	'options' => [
314	'before' => __( 'Before Text', 'easy-elements' ),
315	'after' => __( 'After Text', 'easy-elements' ),
316	],
317	'condition' => [
318	'display_type' => 'popup',
319	'popup_icon_show' => 'yes',
320	],
321	]
322	);
323
324
325	$this->add_control(
326	'popup_icon_color',
327	[
328	'label' => __( 'Icon Color', 'easy-elements' ),
329	'type' => Controls_Manager::COLOR,
330	'selectors' => [
331	'{{WRAPPER}} .eel-video-popup-btn i' => 'color: {{VALUE}};',
332	'{{WRAPPER}} .eel-video-popup-btn svg' => 'color: {{VALUE}};',
333	'{{WRAPPER}} .eel-video-popup-btn svg path' => 'fill: {{VALUE}};',
334
335	],
336	'condition' => [
337	'display_type' => 'popup',
338	'popup_icon_show' => 'yes',
339	],
340	]
341	);
342
343
344	$this->add_responsive_control(
345	'icon_size',
346	[
347	'label' => __( 'Icon Size', 'easy-elements' ),
348	'type' => Controls_Manager::SLIDER,
349	'range' => [
350	'px' => [
351	'min' => 8,
352	'max' => 100,
353	],
354	],
355	'default' => [
356	'size' => 20,
357	'unit' => 'px',
358	],
359	'selectors' => [
360	'{{WRAPPER}} .eel-video-popup-btn i' => 'font-size: {{SIZE}}{{UNIT}};',
361	'{{WRAPPER}} .eel-video-popup-btn svg' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
362	'{{WRAPPER}} .eel-video-popup-btn svg path' => 'height: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}};',
363	],
364	'condition' => [
365	'display_type' => 'popup',
366	'popup_icon_show' => 'yes',
367	],
368	]
369	);
370
371	$this->add_control(
372	'icon_bg_color',
373	[
374	'label' => __( 'Circle Background Color', 'easy-elements' ),
375	'type' => Controls_Manager::COLOR,
376	'selectors' => [
377	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'background-color: {{VALUE}};',
378	],
379	'condition' => [
380	'display_type' => 'popup',
381	'popup_icon_show' => 'yes',
382	],
383	]
384	);
385
386	$this->add_responsive_control(
387	'circle_size',
388	[
389	'label' => __( 'Circle Size', 'easy-elements' ),
390	'type' => Controls_Manager::SLIDER,
391	'range' => [
392	'px' => [ 'min' => 10, 'max' => 200 ],
393	],
394	'selectors' => [
395	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}}; place-content: center;',
396	],
397	'condition' => [
398	'display_type' => 'popup',
399	'popup_icon_show' => 'yes',
400	],
401	]
402	);
403
404	$this->add_responsive_control(
405	'icon_border_radius',
406	[
407	'label' => __( 'Circle Border Radius', 'easy-elements' ),
408	'type' => \Elementor\Controls_Manager::DIMENSIONS,
409	'size_units' => [ 'px', '%' ],
410	'selectors' => [
411	'{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap, {{WRAPPER}} .eel-icon-wrap .eel-overlay-play' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
412	],
413	'condition' => [
414	'display_type' => 'popup',
415	'popup_icon_show' => 'yes',
416	],
417	]
418	);
419
420	$this->add_group_control(
421	\Elementor\Group_Control_Box_Shadow::get_type(),
422	[
423	'name' => 'circle_shadow',
424	'label' => __( 'Circle Shadow', 'easy-elements' ),
425	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
426	'condition' => [
427	'display_type' => 'popup',
428	'popup_icon_show' => 'yes',
429	],
430	]
431	);
432
433
434	$this->add_group_control(
435	Group_Control_Border::get_type(),
436	[
437	'name' => 'button_border',
438	'label' => __( 'Button Border', 'easy-elements' ),
439	'selector' => '{{WRAPPER}} .eel-video-popup-btn .eel-icon-wrap',
440	'condition' => [
441	'display_type' => 'popup',
442	'popup_icon_show' => 'yes',
443	],
444	]
445	);
446
447	$this->add_control(
448	'circle_glow',
449	[
450	'label' => __( 'Active Ripple', 'easy-elements' ),
451	'type' => \Elementor\Controls_Manager::SWITCHER,
452	'label_on' => __( 'On', 'easy-elements' ),
453	'label_off' => __( 'Off', 'easy-elements' ),
454	'return_value' => 'yes',
455	'default' => '',
456	'condition' => [
457	'display_type' => 'popup',
458	'popup_icon_show' => 'yes',
459	],
460	]
461	);
462
463	$this->add_control(
464	'glow_color',
465	[
466	'label' => __( 'Ripple Color', 'easy-elements' ),
467	'type' => Controls_Manager::COLOR,
468	'default' => 'rgba(102, 102, 102, 0.1)',
469	'selectors' => [
470	'{{WRAPPER}} .eel-video-popup-btn.eel-glow-active .eel-icon-wrap' => '--glow-color: {{VALUE}};',
471	],
472	'condition' => [
473	'display_type' => 'popup',
474	'circle_glow' => 'yes',
475	],
476	]
477	);
478
479	$this->add_group_control(
480	\Elementor\Group_Control_Background::get_type(),
481	[
482	'name' => 'wrap_background',
483	'types' => [ 'classic', 'gradient' ],
484	'selector' => '{{WRAPPER}} .eel-video-popup-wrapper',
485	'condition' => [
486	'display_type' => 'popup',
487	],
488	]
489	);
490
491	$this->add_responsive_control(
492	'wrap_radius',
493	[
494	'label' => __( 'Border Radius', 'easy-elements' ),
495	'type' => \Elementor\Controls_Manager::DIMENSIONS,
496	'size_units' => [ 'px', '%' ],
497	'selectors' => [
498	'{{WRAPPER}} .eel-video-popup-wrapper' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
499	],
500	'condition' => [
501	'display_type' => 'popup',
502	],
503	]
504	);
505
506	$this->add_responsive_control(
507	'wrap_padding',
508	[
509	'label' => __( 'Padding', 'easy-elements' ),
510	'type' => \Elementor\Controls_Manager::DIMENSIONS,
511	'size_units' => [ 'px', '%' ],
512	'selectors' => [
513	'{{WRAPPER}} .eel-video-popup-wrapper' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
514	],
515	'condition' => [
516	'display_type' => 'popup',
517	],
518	]
519	);
520	$this->end_controls_section();
521
522	$this->start_controls_section(
523	'section_video_self_options',
524	[
525	'label' => __( 'Video Settings', 'easy-elements' ),
526	'condition' => [
527	'display_type' => 'normal',
528	'video_type' => 'self_hosted',
529	],
530	]
531	);
532
533	$this->add_control(
534	'self_hosted_autoplay',
535	[
536	'label' => __( 'Autoplay', 'easy-elements' ),
537	'type' => Controls_Manager::SWITCHER,
538	'label_on' => __( 'Yes', 'easy-elements' ),
539	'label_off' => __( 'No', 'easy-elements' ),
540	'return_value' => 'yes',
541	'default' => '',
542	'condition' => [
543	'display_type' => 'normal',
544	'video_type' => 'self_hosted',
545	],
546	]
547	);
548
549	$this->add_control(
550	'self_hosted_loop',
551	[
552	'label' => __( 'Loop', 'easy-elements' ),
553	'type' => Controls_Manager::SWITCHER,
554	'label_on' => __( 'Yes', 'easy-elements' ),
555	'label_off' => __( 'No', 'easy-elements' ),
556	'return_value' => 'yes',
557	'default' => '',
558	'condition' => [
559	'display_type' => 'normal',
560	'video_type' => 'self_hosted',
561	],
562	]
563	);
564
565	$this->add_control(
566	'self_hosted_muted',
567	[
568	'label' => __( 'Muted', 'easy-elements' ),
569	'type' => Controls_Manager::SWITCHER,
570	'label_on' => __( 'Yes', 'easy-elements' ),
571	'label_off' => __( 'No', 'easy-elements' ),
572	'return_value' => 'yes',
573	'default' => '',
574	'condition' => [
575	'display_type' => 'normal',
576	'video_type' => 'self_hosted',
577	],
578	]
579	);
580
581	$this->add_control(
582	'self_hosted_controls',
583	[
584	'label' => __( 'Show Controls', 'easy-elements' ),
585	'type' => Controls_Manager::SWITCHER,
586	'label_on' => __( 'Yes', 'easy-elements' ),
587	'label_off' => __( 'No', 'easy-elements' ),
588	'return_value' => 'yes',
589	'default' => 'yes',
590	'condition' => [
591	'display_type' => 'normal',
592	'video_type' => 'self_hosted',
593	],
594	]
595	);
596	$this->end_controls_section();
597
598	$this->start_controls_section(
599	'section_video_options',
600	[
601	'label' => __( 'Video Settings', 'easy-elements' ),
602	'condition' => [
603	'display_type' => 'normal',
604	'video_type!' => 'self_hosted',
605	],
606	]
607	);
608
609	$this->add_control(
610	'autoplay',
611	[
612	'label' => __( 'Autoplay', 'easy-elements' ),
613	'type' => Controls_Manager::SWITCHER,
614	'label_on' => __( 'Yes', 'easy-elements' ),
615	'label_off'=> __( 'No', 'easy-elements' ),
616	'return_value' => 'yes',
617	'default' => '',
618	]
619	);
620
621	$this->add_control(
622	'mute',
623	[
624	'label' => __( 'Mute', 'easy-elements' ),
625	'type' => Controls_Manager::SWITCHER,
626	'label_on' => __( 'Yes', 'easy-elements' ),
627	'label_off'=> __( 'No', 'easy-elements' ),
628	'return_value' => 'yes',
629	'default' => '',
630	]
631	);
632
633	$this->add_control(
634	'loop',
635	[
636	'label' => __( 'Loop', 'easy-elements' ),
637	'type' => Controls_Manager::SWITCHER,
638	'label_on' => __( 'Yes', 'easy-elements' ),
639	'label_off'=> __( 'No', 'easy-elements' ),
640	'return_value' => 'yes',
641	'default' => '',
642	]
643	);
644
645	$this->add_control(
646	'controls',
647	[
648	'label' => __( 'Player Controls', 'easy-elements' ),
649	'type' => Controls_Manager::SWITCHER,
650	'label_on' => __( 'Yes', 'easy-elements' ),
651	'label_off'=> __( 'No', 'easy-elements' ),
652	'return_value' => 'yes',
653	'default' => 'yes',
654	]
655	);
656
657	$this->add_control(
658	'privacy_mode',
659	[
660	'label' => __( 'Privacy Mode', 'easy-elements' ),
661	'type' => Controls_Manager::SWITCHER,
662	'label_on' => __( 'On', 'easy-elements' ),
663	'label_off'=> __( 'Off', 'easy-elements' ),
664	'return_value' => 'yes',
665	'description' => __( 'YouTube nocookie / Vimeo DNT', 'easy-elements' ),
666	]
667	);
668
669	$this->add_control(
670	'yt_suggested',
671	[
672	'label' => __( 'Suggested Videos', 'easy-elements' ),
673	'type' => Controls_Manager::SWITCHER,
674	'label_on' => __( 'Show', 'easy-elements' ),
675	'label_off'=> __( 'Hide', 'easy-elements' ),
676	'return_value' => 'yes',
677	'default' => '',
678	'description' => __( 'Show suggested videos at end', 'easy-elements' ),
679	'condition' => [
680	'video_type' => 'youtube',
681	],
682	]
683	);
684
685	$this->add_control(
686	'yt_start_time',
687	[
688	'label' => __( 'Start Time (seconds)', 'easy-elements' ),
689	'type' => Controls_Manager::NUMBER,
690	'min' => 0,
691	'default' => '',
692	'description' => __( 'Start video from specific second', 'easy-elements' ),
693	'condition' => [
694	'video_type' => 'youtube',
695	],
696	]
697	);
698
699	$this->end_controls_section();
700
701
702	$this->start_controls_section(
703	'section_image_overlay',
704	[
705	'label' => __( 'Video Overlay', 'easy-elements' ),
706	'condition' => [
707	'display_type' => 'normal',
708	],
709	]
710	);
711
712	$this->add_control(
713	'show_image_overlay',
714	[
715	'label' => __( 'Image Overlay', 'easy-elements' ),
716	'type' => \Elementor\Controls_Manager::SWITCHER,
717	'label_on' => __( 'On', 'easy-elements' ),
718	'label_off'=> __( 'Off', 'easy-elements' ),
719	'return_value' => 'yes',
720	'default' => '',
721	]
722	);
723
724	$this->add_control(
725	'overlay_image',
726	[
727	'label' => __( 'Choose Image', 'easy-elements' ),
728	'type' => \Elementor\Controls_Manager::MEDIA,
729	'condition' => [
730	'show_image_overlay' => 'yes',
731	],
732	]
733	);
734
735	$this->add_control(
736	'overlay_image_size',
737	[
738	'label' => __( 'Image Resolution', 'easy-elements' ),
739	'type' => \Elementor\Controls_Manager::SELECT,
740	'default' => 'full',
741	'options' => [
742	'thumbnail' => __( 'Thumbnail', 'easy-elements' ),
743	'medium' => __( 'Medium', 'easy-elements' ),
744	'large' => __( 'Large', 'easy-elements' ),
745	'full' => __( 'Full', 'easy-elements' ),
746	],
747	'condition' => [
748	'show_image_overlay' => 'yes',
749	],
750	]
751	);
752
753	$this->add_control(
754	'overlay_play_icon',
755	[
756	'label' => __( 'Play Icon', 'easy-elements' ),
757	'type' => \Elementor\Controls_Manager::SWITCHER,
758	'default' => 'yes',
759	'condition' => [
760	'show_image_overlay' => 'yes',
761	],
762	]
763	);
764
765	$this->add_control(
766	'overlay_icon',
767	[
768	'label' => __( 'Icon', 'easy-elements' ),
769	'type' => \Elementor\Controls_Manager::ICONS,
770	'condition' => [
771	'show_image_overlay' => 'yes',
772	'overlay_play_icon' => 'yes',
773	],
774	]
775	);
776
777	$this->add_control(
778	'overlay_lightbox',
779	[
780	'label' => __( 'Lightbox', 'easy-elements' ),
781	'type' => \Elementor\Controls_Manager::SWITCHER,
782	'return_value' => 'yes',
783	'default' => '',
784	'condition' => [
785	'show_image_overlay' => 'yes',
786	],
787	]
788	);
789
790	$this->add_control(
791	'lightbox_animation',
792	[
793	'label' => __( 'Animation', 'easy-elements' ),
794	'type' => \Elementor\Controls_Manager::ANIMATION,
795	'default' => '',
796	'condition' => [
797	'overlay_lightbox' => 'yes',
798	'show_image_overlay' => 'yes',
799	],
800	]
801	);
802
803	$this->end_controls_section();
804
805	$this->start_controls_section(
806	'section_video_popup_overlay_settings',
807	[
808	'label' => __( 'Play Button Overlay Settings', 'easy-elements' ),
809	'condition' => [
810	'display_type' => 'popup',
811	],
812	]
813	);
814
815	$this->add_control(
816	'popup_play_overlay',
817	[
818	'label' => __( 'Play Overlay', 'easy-elements' ),
819	'type' => Controls_Manager::TEXT,
820	'default' => __( 'Play', 'easy-elements' ),
821	]
822	);
823
824	$this->add_control(
825	'popup_play_color',
826	[
827	'label' => esc_html__('Text Color', 'easy-elements'),
828	'type' => \Elementor\Controls_Manager::COLOR,
829	'selectors' => [
830	'{{WRAPPER}} .eel-icon-wrap .eel-overlay-play' => 'color: {{VALUE}};',
831	],
832	]
833	);
834	$this->add_group_control(
835	\Elementor\Group_Control_Typography::get_type(),
836	[
837	'name' => 'popup_play__typography',
838	'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
839	]
840	);
841
842	$this->add_group_control(
843	\Elementor\Group_Control_Background::get_type(),
844	[
845	'name' => 'background_overly_play',
846	'types' => [ 'classic', 'gradient' ],
847	'selector' => '{{WRAPPER}} .eel-icon-wrap .eel-overlay-play',
848	]
849	);
850
851	$this->end_controls_section();
852
853	$this->start_controls_section(
854	'video_icon_settings_style',
855	[
856	'label' => __( 'Video Overlay Style', 'easy-elements' ),
857	'tab' => Controls_Manager::TAB_STYLE,
858	'condition' => [
859	'display_type' => 'normal',
860	],
861	]
862	);
863
864	$this->add_control(
865	'icon_color',
866	[
867	'label' => esc_html__('Icon Color', 'easy-elements'),
868	'type' => Controls_Manager::COLOR,
869	'selectors' => [
870	'{{WRAPPER}} .eel-overlay-play-icon' => 'color: {{VALUE}};',
871	'{{WRAPPER}} .eel-overlay-play-icon svg path' => 'fill: {{VALUE}};',
872	],
873	]
874	);
875
876	$this->add_responsive_control(
877	'video_icon_size',
878	[
879	'label' => esc_html__('Icon Size', 'easy-elements'),
880	'type' => \Elementor\Controls_Manager::SLIDER,
881	'size_units' => ['px', 'em', '%'],
882	'range' => [
883	'px' => [
884	'min' => 10,
885	'max' => 200,
886	],
887	'em' => [
888	'min' => 0.5,
889	'max' => 10,
890	],
891	'%' => [
892	'min' => 10,
893	'max' => 200,
894	],
895	],
896	'selectors' => [
897	'{{WRAPPER}} .eel-overlay-play-icon i' => 'font-size: {{SIZE}}{{UNIT}};',
898	'{{WRAPPER}} .eel-overlay-play-icon svg' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
899	],
900	]
901	);
902
903	$this->add_group_control(
904	\Elementor\Group_Control_Border::get_type(),
905	[
906	'name' => 'video_border',
907	'selector' => '{{WRAPPER}} .eel-overlay-play-icon',
908	]
909	);
910
911	$this->add_group_control(
912	\Elementor\Group_Control_Background::get_type(),
913	[
914	'name' => 'video_background',
915	'types' => [ 'classic', 'gradient' ],
916	'selector' => '{{WRAPPER}} .eel-overlay-play-icon',
917	]
918	);
919	$this->add_responsive_control(
920	'video_border_radius',
921	[
922	'label' => esc_html__('Border Radius', 'easy-elements'),
923	'type' => Controls_Manager::DIMENSIONS,
924	'size_units' => [ 'px', '%', 'em' ],
925	'selectors' => [
926	'{{WRAPPER}} .eel-overlay-play-icon' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
927	],
928	]
929	);
930
931	$this->add_responsive_control(
932	'custom_circle_normal_size',
933	[
934	'label' => esc_html__('Circle Size', 'easy-elements'),
935	'type' => Controls_Manager::SLIDER,
936	'size_units' => [ 'px', 'em', '%' ],
937	'range' => [
938	'px' => [
939	'min' => 10,
940	'max' => 300,
941	],
942	'em' => [
943	'min' => 0.5,
944	'max' => 20,
945	],
946	'%' => [
947	'min' => 5,
948	'max' => 100,
949	],
950	],
951	'selectors' => [
952	'{{WRAPPER}} .eel-overlay-play-icon' => 'width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
953	],
954	]
955	);
956
957	$this->end_controls_section();
958
959	$this->start_controls_section(
960	'popup_style_section',
961	[
962	'label' => __( 'Popup Style', 'easy-elements' ),
963	'tab' => Controls_Manager::TAB_STYLE,
964	'condition' => [
965	'display_type' => 'popup',
966	],
967	]
968	);
969
970	$this->add_control(
971	'popup_overlay_bg',
972	[
973	'label' => __( 'Overlay Background', 'easy-elements' ),
974	'type' => Controls_Manager::COLOR,
975	'default' => '',
976	'selectors' => [
977	'{{WRAPPER}} .eel-video-popup-overlay' => 'background: {{VALUE}};',
978	],
979	]
980	);
981
982	$this->add_responsive_control(
983	'popup_content_max_width',
984	[
985	'label' => __( 'Popup Max Width', 'easy-elements' ),
986	'type' => Controls_Manager::SLIDER,
987	'size_units' => [ 'px', '%' ],
988	'range' => [
989	'px' => [
990	'min' => 300,
991	'max' => 1920,
992	],
993	'%' => [
994	'min' => 30,
995	'max' => 100,
996	],
997	],
998	'selectors' => [
999	'{{WRAPPER}} .eel-video-popup-content' => 'max-width: {{SIZE}}{{UNIT}};',
1000	],
1001	]
1002	);
1003
1004	$this->add_responsive_control(
1005	'popup_content_height',
1006	[
1007	'label' => __( 'Popup Height', 'easy-elements' ),
1008	'type' => Controls_Manager::SLIDER,
1009	'size_units' => [ 'px', 'vh' ],
1010	'range' => [
1011	'px' => [
1012	'min' => 200,
1013	'max' => 1080,
1014	],
1015	'vh' => [
1016	'min' => 20,
1017	'max' => 100,
1018	],
1019	],
1020	'selectors' => [
1021	'{{WRAPPER}} .eel-video-popup-iframe-wrapper' => 'height: {{SIZE}}{{UNIT}};',
1022	],
1023	]
1024	);
1025
1026	$this->add_responsive_control(
1027	'popup_content_border_radius',
1028	[
1029	'label' => __( 'Popup Border Radius', 'easy-elements' ),
1030	'type' => Controls_Manager::DIMENSIONS,
1031	'size_units' => [ 'px', '%' ],
1032	'selectors' => [
1033	'{{WRAPPER}} .eel-video-popup-content' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}}; overflow: hidden;',
1034	],
1035	]
1036	);
1037
1038	$this->add_control(
1039	'popup_close_color',
1040	[
1041	'label' => __( 'Close Button Color', 'easy-elements' ),
1042	'type' => Controls_Manager::COLOR,
1043	'selectors' => [
1044	'{{WRAPPER}} .eel-video-popup-close' => 'color: {{VALUE}};',
1045	],
1046	]
1047	);
1048
1049	$this->add_control(
1050	'popup_close_bg',
1051	[
1052	'label' => __( 'Close Button Background', 'easy-elements' ),
1053	'type' => Controls_Manager::COLOR,
1054	'selectors' => [
1055	'{{WRAPPER}} .eel-video-popup-close' => 'background: {{VALUE}};',
1056	],
1057	]
1058	);
1059
1060	$this->end_controls_section();
1061	}
1062
1063	private function get_youtube_id( $url ) {
1064	preg_match('/(?:v=\|\/)([0-9A-Za-z_-]{11}).*/', $url, $matches);
1065	return $matches[1] ?? '';
1066	}
1067
1068	private function get_vimeo_id( $url ) {
1069	preg_match('/(\d+)/', $url, $matches);
1070	return $matches[1] ?? '';
1071	}
1072
1073	protected function render() {
1074	$settings = $this->get_settings_for_display();
1075	$embed_type = $settings['video_type'];
1076	$display_type = $settings['display_type'];
1077	$video_url = '';
1078
1079	/* -----------------------------------------
1080	* Get Video URL
1081	* ----------------------------------------- */
1082	if ( $embed_type === 'self_hosted' && ! empty( $settings['self_hosted_video']['url'] ) ) {
1083	$video_url = $settings['self_hosted_video']['url'];
1084	} elseif ( $embed_type === 'youtube' && ! empty( $settings['video_url'] ) ) {
1085	$video_url = $settings['video_url'];
1086	} elseif ( $embed_type === 'vimeo' && ! empty( $settings['video_url_vimeo'] ) ) {
1087	$video_url = $settings['video_url_vimeo'];
1088	}
1089
1090	if ( empty( $video_url ) ) {
1091	return;
1092	}
1093
1094	$video_id = uniqid( 'eel_video_' );
1095	$circle_glow = ( ! empty( $settings['circle_glow'] ) && $settings['circle_glow'] === 'yes' ) ? 'eel-glow-active' : '';
1096	$icon_hide_h_show = ( ! empty( $settings['popup_icon_hover_show'] ) && $settings['popup_icon_hover_show'] === 'yes' ) ? 'eel-vicon-hide-show' : '';
1097
1098	echo '<div class="eel-video-popup-wrapper ' . esc_attr( $icon_hide_h_show ) . '">';
1099
1100	/* =====================================================================
1101	* NORMAL VIDEO
1102	* ===================================================================== */
1103	if ( $display_type === 'normal' ) {
1104
1105	// Image Overlay
1106	if ( ! empty( $settings['show_image_overlay'] ) && $settings['show_image_overlay'] === 'yes' && ! empty( $settings['overlay_image']['url'] ) ) {
1107	$overlay_size = ! empty( $settings['overlay_image_size'] ) ? $settings['overlay_image_size'] : 'full';
1108	$overlay_id = ! empty( $settings['overlay_image']['id'] ) ? $settings['overlay_image']['id'] : 0;
1109	$overlay_url = $overlay_id ? wp_get_attachment_image_url( $overlay_id, $overlay_size ) : $settings['overlay_image']['url'];
1110	$overlay_url = esc_url( $overlay_url );
1111	$bg_style = "background-image: url('{$overlay_url}'); background-size: cover; background-position: center;";
1112	$overlay_lightbox = ! empty( $settings['overlay_lightbox'] ) && $settings['overlay_lightbox'] === 'yes' ? 'yes' : 'no';
1113	$lightbox_animation = ! empty( $settings['lightbox_animation'] ) ? $settings['lightbox_animation'] : '';
1114	echo '<div class="eel-video-overlay"
1115	style="' . esc_attr($bg_style) . '"
1116	data-lightbox="' . esc_attr( $overlay_lightbox ) . '"
1117	data-video-type="' . esc_attr( $embed_type ) . '"
1118	data-video-url="' . esc_url( $video_url ) . '"
1119	data-popup-id="' . esc_attr( $video_id ) . '"
1120	data-animation="' . esc_attr( $lightbox_animation ) . '">';
1121	if ( ! empty( $settings['overlay_play_icon'] ) && $settings['overlay_play_icon'] === 'yes' ) {
1122	$icon_html = '';
1123	$icon_setting = $settings['overlay_icon'];
1124	if ( ! empty( $icon_setting['value'] ) ) {
1125	ob_start();
1126	\Elementor\Icons_Manager::render_icon( $icon_setting, [ 'aria-hidden' => 'true' ] );
1127	$icon_html = ob_get_clean();
1128	}
1129	if ( empty( $icon_html ) ) {
1130	$icon_html = '<i class="unicon-play"></i>';
1131	}
1132	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Trusted output from Elementor Icons_Manager or hardcoded HTML.
1133	echo '<span class="eel-overlay-play-icon">' . $icon_html . '</span>';
1134	}
1135
1136	echo '</div>';
1137
1138	// Create lightbox overlay structure if lightbox is enabled
1139	if ( $overlay_lightbox === 'yes' ) {
1140	$animation_class = ! empty( $lightbox_animation ) ? ' animated ' . $lightbox_animation : '';
1141	echo '<div id="' . esc_attr( $video_id ) . '" class="eel-video-popup-overlay" data-animation="' . esc_attr( $lightbox_animation ) . '">';
1142	echo '<div class="eel-video-popup-content ' . esc_attr( $animation_class ) . '">';
1143	echo '<span class="eel-video-popup-close">×</span>';
1144	echo '<div class="eel-video-popup-iframe-wrapper"></div>';
1145	echo '</div>';
1146	echo '</div>';
1147	}
1148	}
1149
1150
1151	// Self Hosted Video
1152	if ( $embed_type === 'self_hosted' ) {
1153	$bool_attrs = [];
1154	if ( ! empty( $settings['self_hosted_autoplay'] ) ) {
1155	$bool_attrs[] = 'autoplay';
1156	$bool_attrs[] = 'muted';
1157	}
1158	if ( ! empty( $settings['self_hosted_loop'] ) ) $bool_attrs[] = 'loop';
1159	if ( ! empty( $settings['self_hosted_muted'] ) ) $bool_attrs[] = 'muted';
1160	if ( ! empty( $settings['self_hosted_controls'] ) ) $bool_attrs[] = 'controls';
1161	$bool_attrs[] = 'playsinline';
1162	$bool_attrs = array_unique( $bool_attrs );
1163	$attr_string = implode( ' ', array_map( 'esc_attr', $bool_attrs ) ) . ' preload="none"';
1164	// All attributes are hardcoded whitelisted boolean values — safe to output.
1165	// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- $attr_string contains only whitelisted boolean attrs and hardcoded preload="none".
1166	echo '<video class="eel-normal-video" src="' . esc_url( $video_url ) . '" ' . $attr_string . '></video>';
1167	} else {
1168	// YouTube/Vimeo
1169	$params = [
1170	'autoplay' => ! empty( $settings['autoplay'] ) ? '1' : '0',
1171	'loop' => ! empty( $settings['loop'] ) ? '1' : '0',
1172	'controls' => ! empty( $settings['controls'] ) ? '1' : '0',
1173	];
1174	if ( ! empty( $settings['mute'] ) ) $params['mute'] = '1';
1175
1176	if ( $embed_type === 'youtube' ) {
1177	$yt_id = $this->get_youtube_id( $video_url );
1178	if ( ! $yt_id ) { echo '</div>'; return; }
1179	if ( empty( $settings['yt_suggested'] ) ) {
1180	$params['rel'] = '0';
1181	}
1182	if ( ! empty( $settings['yt_start_time'] ) ) {
1183	$params['start'] = absint( $settings['yt_start_time'] );
1184	}
1185	$yt_domain = ! empty( $settings['privacy_mode'] ) ? 'www.youtube-nocookie.com' : 'www.youtube.com';
1186	$embed_url = 'https://' . $yt_domain . '/embed/' . $yt_id . '?' . http_build_query( $params );
1187	} elseif ( $embed_type === 'vimeo' ) {
1188	$vimeo_id = $this->get_vimeo_id( $video_url );
1189	if ( ! $vimeo_id ) { echo '</div>'; return; }
1190	if ( ! empty( $settings['privacy_mode'] ) ) {
1191	$params['dnt'] = '1';
1192	}
1193	$embed_url = 'https://player.vimeo.com/video/' . $vimeo_id . '?' . http_build_query( $params );
1194	}
1195	echo '<iframe class="eel-normal-video" src="' . esc_url( $embed_url ) . '" loading="lazy" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>';
1196	}
1197	}
1198
1199	if ( $display_type === 'popup' ) {
1200
1201	$icon_html = '';
1202	$icon_setting = $settings['popup_trigger_icon'];
1203
1204	if ( ! empty( $icon_setting['value'] ) ) {
1205	ob_start();
1206	\Elementor\Icons_Manager::render_icon( $icon_setting, [ 'aria-hidden' => 'true' ] );
1207	$icon_html = ob_get_clean();
1208	}
1209	if ( empty( $icon_html ) ) {
1210	$icon_html = '<i class="unicon-play"></i>';
1211	}
1212
1213	$label = ! empty( $settings['popup_trigger_text'] ) ? wp_strip_all_tags( $settings['popup_trigger_text'] ) : 'Play Video';
1214	?>
1215
1216	<div class="eel-video-popup-btn entro-all-video-popup <?php echo esc_attr($circle_glow); ?>"
1217	data-video-type="<?php echo esc_attr( $embed_type ); ?>"
1218	data-video-src="<?php echo esc_url( $video_url ); ?>"
1219	data-popup-id="<?php echo esc_attr( $video_id ); ?>"
1220	aria-label="<?php echo esc_attr( $label ); ?>">
1221	<?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'before' ) : ?>
1222	<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Trusted output from Elementor Icons_Manager. ?>
1223	<span class="eel-icon-wrap"><?php echo $icon_html; ?>
1224	<?php if(!empty($settings['popup_play_overlay'])): ?>
1225	<span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
1226	<?php endif; ?>
1227	</span>
1228	<?php endif; ?>
1229	<?php if ( ! empty( $settings['popup_trigger_text'] ) ) : ?>
1230	<span class="eel-trigger-text"><?php echo esc_html( $settings['popup_trigger_text'] ); ?></span>
1231	<?php endif; ?>
1232	<?php if ( $settings['popup_icon_show'] === 'yes' && $settings['popup_icon_position'] === 'after' ) : ?>
1233	<?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Trusted output from Elementor Icons_Manager. ?>
1234	<span class="eel-icon-wrap"><?php echo $icon_html; ?>
1235	<?php if(!empty($settings['popup_play_overlay'])): ?>
1236	<span class="eel-overlay-play"><?php echo esc_html( $settings['popup_play_overlay'] ); ?> </span>
1237	<?php endif; ?>
1238	</span>
1239	<?php endif; ?>
1240	</div>
1241	<div id="<?php echo esc_attr( $video_id ); ?>" class="eel-video-popup-overlay">
1242	<div class="eel-video-popup-content">
1243	<span class="eel-video-popup-close">×</span>
1244	<div class="eel-video-popup-iframe-wrapper"></div>
1245	</div>
1246	</div>
1247	<?php
1248	}
1249	echo '</div>';
1250	}
1251	}