king-addons / includes / widgets / Video_Popup / Video_Popup.php

Video_Popup.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.78, at includes/widgets/Video_Popup/Video_Popup.php

929 lines 35.1 KB

Raw Download Zip

1	<?php /** @noinspection SpellCheckingInspection, DuplicatedCode, PhpUnused */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Group_Control_Border;
7	use Elementor\Group_Control_Box_Shadow;
8	use Elementor\Icons_Manager;
9	use Elementor\Plugin;
10	use Elementor\Widget_Base;
11
12	if (!defined('ABSPATH')) {
13	exit; // Exit if accessed directly.
14	}
15
16
17
18	class Video_Popup extends Widget_Base
19	{
20
21
22	public function get_name(): string
23	{
24	return 'king-addons-video-popup';
25	}
26
27	public function get_title(): string
28	{
29	return esc_html__('Video Popup', 'king-addons');
30	}
31
32	public function get_icon(): string
33	{
34	/** @noinspection SpellCheckingInspection */
35	return 'king-addons-icon king-addons-video-popup';
36	}
37
38	public function get_style_depends(): array
39	{
40	return [KING_ADDONS_ASSETS_UNIQUE_KEY . '-video-popup-style'];
41	}
42
43	public function get_categories(): array
44	{
45	return ['king-addons'];
46	}
47
48	public function get_keywords(): array
49	{
50	return ['off', 'canvas', 'offcanvas', 'ofcavas', 'off-canvas', 'content', 'button', 'sidebar', 'side', 'bar',
51	'menu', 'popup', 'nav', 'navigation', 'animation', 'effect', 'animated', 'template', 'link', 'left',
52	'right', 'top', 'bottom', 'vertical', 'horizontal', 'mouse', 'hover', 'over', 'hover over', 'picture',
53	'float', 'floating', 'sticky', 'click', 'target', 'point', 'king', 'addons', 'mouseover', 'page', 'center',
54	'kingaddons', 'king-addons', 'off canvas', 'pop up', 'popup', 'lightbox', 'box', 'modal', 'window', 'tab',
55	'appear', 'show', 'hide', 'up', 'video', 'play', 'player', 'frame', 'iframe', 'embed', 'file', 'mp4', 'url',
56	'youtube', 'vimeo', 'dailymotion', 'videopress', 'hosted', 'source', 'external', 'internal', 'hosting'];
57	}
58
59	public function get_custom_help_url()
60	{
61	return 'mailto:bug@kingaddons.com?subject=Bug Report - King Addons&body=Please describe the issue';
62	}
63
64	protected function register_controls(): void
65	{
66	/** START TAB: CONTENT ===================== */
67	/** SECTION: General ===================== */
68	$this->start_controls_section(
69	'kng_video_popup_section_general',
70	[
71	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('General', 'king-addons'),
72	]
73	);
74
75	/** VIDEO */
76
77	$this->add_control(
78	'kng_video_popup_video_type',
79	[
80	'label' => '<b>' . esc_html__('Source', 'king-addons') . '</b>',
81	'type' => Controls_Manager::SELECT,
82	'default' => 'youtube',
83	'options' => [
84	'youtube' => esc_html__('YouTube', 'king-addons'),
85	'vimeo' => esc_html__('Vimeo', 'king-addons'),
86	'hosted' => esc_html__('Self Hosted', 'king-addons'),
87	'external-hosted' => esc_html__('External Hosted', 'king-addons'),
88	],
89	]
90	);
91
92	$this->add_control(
93	'kng_video_popup_youtube_url_notice',
94	[
95	'type' => Controls_Manager::NOTICE,
96	'notice_type' => 'warning',
97	'dismissible' => false,
98	'heading' => esc_html__( 'Link code of the video', 'king-addons' ),
99	'content' => esc_html__( 'For example for https://www.youtube.com/watch?v=XHOmBV4js_E it will be XHOmBV4js_E', 'king-addons' ),
100	'condition' => [
101	'kng_video_popup_video_type' => 'youtube',
102	],
103	]
104	);
105
106	$this->add_control(
107	'kng_video_popup_youtube_url',
108	[
109	'label' => '<b>' . esc_html__('Link code of the video', 'king-addons') . '</b>',
110	'type' => Controls_Manager::TEXT,
111	'placeholder' => esc_html__('Enter your video code', 'king-addons') . ' (YouTube)',
112	'default' => 'XHOmBV4js_E',
113	'label_block' => false,
114	'condition' => [
115	'kng_video_popup_video_type' => 'youtube',
116	],
117	'ai' => [
118	'active' => false,
119	],
120	]
121	);
122
123	$this->add_control(
124	'kng_video_popup_vimeo_url_notice',
125	[
126	'type' => Controls_Manager::NOTICE,
127	'notice_type' => 'warning',
128	'dismissible' => false,
129	'heading' => esc_html__( 'Link code of the video', 'king-addons' ),
130	'content' => esc_html__( 'For example for https://vimeo.com/235215203 it will be 235215203', 'king-addons' ),
131	'condition' => [
132	'kng_video_popup_video_type' => 'vimeo',
133	],
134	]
135	);
136
137	$this->add_control(
138	'kng_video_popup_vimeo_url',
139	[
140	'label' => '<b>' . esc_html__('Link code of the video', 'king-addons') . '</b>',
141	'type' => Controls_Manager::TEXT,
142	'placeholder' => esc_html__('Enter your video code', 'king-addons') . ' (Vimeo)',
143	'default' => '235215203',
144	'label_block' => false,
145	'condition' => [
146	'kng_video_popup_video_type' => 'vimeo',
147	],
148	'ai' => [
149	'active' => false,
150	],
151	]
152	);
153
154	$this->add_control(
155	'kng_video_popup_hosted_url',
156	[
157	'label' => esc_html__('Choose Video File', 'king-addons'),
158	'type' => Controls_Manager::MEDIA,
159	'media_types' => [
160	'video',
161	],
162	'condition' => [
163	'kng_video_popup_video_type' => 'hosted',
164	],
165	]
166	);
167
168	$this->add_control(
169	'kng_video_popup_external_url',
170	[
171	'label' => esc_html__('URL', 'king-addons'),
172	'type' => Controls_Manager::URL,
173	'label_block' => true,
174	'placeholder' => esc_html__('Enter your URL', 'king-addons'),
175	'condition' => [
176	'kng_video_popup_video_type' => 'external-hosted',
177	],
178	]
179	);
180
181	$this->add_control(
182	'kng_video_popup_hosted_autoplay',
183	[
184	'label' => esc_html__('Autoplay on Open', 'king-addons'),
185	'type' => Controls_Manager::SWITCHER,
186	'label_on' => esc_html__('Yes', 'king-addons'),
187	'label_off' => esc_html__('No', 'king-addons'),
188	'return_value' => 'yes',
189	'default' => 'yes',
190	'description' => esc_html__('Start playback when the popup opens. Playback stops when the popup is closed.', 'king-addons'),
191	'condition' => [
192	'kng_video_popup_video_type' => ['hosted', 'external-hosted'],
193	],
194	]
195	);
196
197	$this->add_control(
198	'kng_video_popup_start_time',
199	[
200	'label' => esc_html__('Start Time', 'king-addons'),
201	'type' => Controls_Manager::NUMBER,
202	'description' => esc_html__('Specify a start time (in seconds)', 'king-addons'),
203	'condition' => [
204	'kng_video_popup_video_type' => 'youtube',
205	],
206	'separator' => 'before',
207	]
208	);
209
210	/** END: VIDEO */
211
212	$this->add_control(
213	'kng_video_popup_box_position',
214	[
215	'label' => esc_html__('Box Animation Direction', 'king-addons'),
216	'type' => Controls_Manager::CHOOSE,
217	'default' => 'bottom',
218	'options' => [
219	'top' => [
220	'title' => esc_html__('Top', 'king-addons'),
221	'icon' => 'eicon-v-align-bottom',
222	],
223	'right' => [
224	'title' => esc_html__('Right', 'king-addons'),
225	'icon' => 'eicon-h-align-left',
226	],
227	'bottom' => [
228	'title' => esc_html__('Bottom', 'king-addons'),
229	'icon' => 'eicon-v-align-top',
230	],
231	'left' => [
232	'title' => esc_html__('Left', 'king-addons'),
233	'icon' => 'eicon-h-align-right',
234	],
235	],
236	'separator' => 'before',
237	]
238	);
239
240	$this->add_control(
241	'kng_video_popup_box_max_width_switcher',
242	[
243	'label' => esc_html__('Set Maximum Width of popup box', 'king-addons'),
244	'type' => Controls_Manager::SWITCHER,
245	'separator' => 'before'
246	]
247	);
248
249	$this->add_responsive_control(
250	'kng_video_popup_box_max_width',
251	[
252	'label' => esc_html__('Maximum Width (px)', 'king-addons'),
253	'type' => Controls_Manager::NUMBER,
254	'min' => 0,
255	'step' => 1,
256	'default' => '',
257	'selectors' => [
258	'.king-addons-video-popup-{{ID}}' => 'max-width: {{VALUE}}px;',
259	],
260	'condition' => [
261	'kng_video_popup_box_max_width_switcher!' => '',
262	]
263	]
264	);
265
266	$this->add_control(
267	'kng_video_popup_box_max_height_switcher',
268	[
269	'label' => esc_html__('Set Maximum Height of popup box', 'king-addons'),
270	'type' => Controls_Manager::SWITCHER
271	]
272	);
273
274	$this->add_responsive_control(
275	'kng_video_popup_box_max_height',
276	[
277	'label' => esc_html__('Maximum Height (px)', 'king-addons'),
278	'type' => Controls_Manager::NUMBER,
279	'min' => 0,
280	'step' => 1,
281	'default' => '',
282	'selectors' => [
283	'.king-addons-video-popup-{{ID}}' => 'max-height: {{VALUE}}px;',
284	],
285	'condition' => [
286	'kng_video_popup_box_max_height_switcher!' => '',
287	]
288	]
289	);
290
291	$this->add_control(
292	'kng_video_popup_disable_btn',
293	[
294	'label' => esc_html__('Disable Button', 'king-addons'),
295	'type' => Controls_Manager::SWITCHER,
296	'description' => esc_html__('This is a useful feature if there is a need to set a custom element as the trigger instead of the default button.', 'king-addons'),
297	'separator' => 'before'
298	]
299	);
300
301	$this->add_control(
302	'kng_video_popup_class',
303	[
304	'label' => esc_html__('CSS Class of trigger element (optional)', 'king-addons'),
305	'description' => esc_html__('Apply a specific CSS class to your custom trigger element, such as a button, text, a menu item, etc. You can add the class in the Advanced tab of the new trigger element. Then, enter the same class in this field as well. This way, the Popup will open when you click on the trigger element. Please check the result on the live website, due to limitations of the Elementor preview mode.', 'king-addons'),
306	'type' => Controls_Manager::TEXT,
307	'placeholder' => esc_html__('Type your class here', 'king-addons'),
308	'label_block' => true,
309	'ai' => [
310	'active' => false,
311	],
312	]
313	);
314
315	$this->end_controls_section();
316	/** END SECTION: General ===================== */
317	/** END TAB: CONTENT ===================== */
318
319	/** TAB: STYLE ===================== */
320	/** SECTION: Button ===================== */
321	$this->start_controls_section(
322	'kng_video_popup_section_style_btn',
323	[
324	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Button', 'king-addons'),
325	'tab' => Controls_Manager::TAB_STYLE,
326	]
327	);
328
329	$this->add_control(
330	'kng_video_popup_btn_icon',
331	[
332	'label' => esc_html__('Select Icon', 'king-addons'),
333	'type' => Controls_Manager::ICONS,
334	'skin' => 'inline',
335	'label_block' => false,
336	'exclude_inline_options' => ['svg'],
337	'default' => [
338	'value' => 'fas fa-play',
339	'library' => 'fa-solid',
340	],
341	]
342	);
343
344	$this->add_responsive_control(
345	'kng_video_popup_btn_h_position',
346	[
347	'label' => esc_html__('Button Horizontal Position', 'king-addons'),
348	'type' => Controls_Manager::CHOOSE,
349	'default' => 'center',
350	'options' => [
351	'left' => [
352	'title' => esc_html__('Left', 'king-addons'),
353	'icon' => 'eicon-h-align-left',
354	],
355	'center' => [
356	'title' => esc_html__('Center', 'king-addons'),
357	'icon' => 'eicon-h-align-center',
358	],
359	'right' => [
360	'title' => esc_html__('Right', 'king-addons'),
361	'icon' => 'eicon-h-align-right',
362	],
363	],
364	'selectors' => [
365	'{{WRAPPER}}' => 'text-align: {{VALUE}};',
366	],
367	]
368	);
369
370	$this->add_responsive_control(
371	'kng_video_popup_btn_icon_size',
372	[
373	'label' => esc_html__('Icon Size', 'king-addons'),
374	'type' => Controls_Manager::NUMBER,
375	'step' => 1,
376	'min' => 0,
377	'default' => 20,
378	'selectors' => [
379	'{{WRAPPER}} .king-addons-video-popup-button i' => 'font-size: {{VALUE}}px; width: {{VALUE}}px;',
380	'{{WRAPPER}} .king-addons-video-popup-button img' => 'width: {{VALUE}}px; height: {{VALUE}}px;',
381	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'width: {{VALUE}}px; height: {{VALUE}}px;'
382	],
383	]
384	);
385
386	$this->add_responsive_control(
387	'kng_video_popup_btn_transition_icon',
388	[
389	'label' => esc_html__('Transition duration for icon on hover (ms)', 'king-addons'),
390	'type' => Controls_Manager::NUMBER,
391	'min' => 0,
392	'step' => 10,
393	'default' => 300,
394	'selectors' => [
395	'{{WRAPPER}} .king-addons-video-popup-button i' => 'transition: all {{SIZE}}ms;',
396	'{{WRAPPER}} .king-addons-video-popup-button img' => 'transition: all {{SIZE}}ms;',
397	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'transition: all {{SIZE}}ms;',
398	'{{WRAPPER}} .king-addons-video-popup-button-wrap .king-addons-video-popup-button' => 'transition: all {{SIZE}}ms;',
399	],
400	]
401	);
402
403	$this->add_control(
404	'kng_video_popup_btn_scale_switcher',
405	[
406	'label' => esc_html__('Scale button on hover', 'king-addons'),
407	'type' => Controls_Manager::SWITCHER,
408	'default' => 'yes',
409	]
410	);
411
412	$this->add_responsive_control(
413	'kng_video_popup_btn_scale_hover',
414	[
415	'label' => esc_html__('Scale on hover', 'king-addons'),
416	'type' => Controls_Manager::NUMBER,
417	'min' => 0,
418	'step' => 0.01,
419	'default' => 1.1,
420	'selectors' => [
421	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button' => 'transform: scale({{SIZE}});'
422	],
423	'condition' => [
424	'kng_video_popup_btn_scale_switcher' => 'yes',
425	]
426	]
427	);
428
429	$this->add_control(
430	'kng_video_popup_btn_effect_type',
431	[
432	'label' => esc_html__('Button Effect', 'king-addons'),
433	'type' => Controls_Manager::SELECT,
434	'default' => 'ripple',
435	'options' => [
436	'none' => esc_html__('None', 'king-addons'),
437	'ripple' => esc_html__('Ripple', 'king-addons'),
438	],
439	'separator' => 'before',
440	]
441	);
442
443	$this->add_control(
444	'kng_video_popup_btn_effect_ripple_color',
445	[
446	'label' => esc_html__('Ripple Color', 'king-addons'),
447	'type' => Controls_Manager::COLOR,
448	'default' => '#000000',
449	'selectors' => [
450	'{{WRAPPER}} .king-addons-video-popup-button.king-addons-video-popup-button-effect-ripple:before' => 'border: 1px solid {{VALUE}};',
451	],
452	'condition' => [
453	'kng_video_popup_btn_effect_type' => 'ripple',
454	],
455	]
456	);
457
458	$this->add_responsive_control(
459	'kng_video_popup_btn_padding',
460	[
461	'label' => esc_html__('Padding', 'king-addons'),
462	'type' => Controls_Manager::DIMENSIONS,
463	'size_units' => ['px'],
464	'default' => [
465	'top' => 30,
466	'right' => 30,
467	'bottom' => 30,
468	'left' => 30,
469	],
470	'selectors' => [
471	'{{WRAPPER}} .king-addons-video-popup-button' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
472	],
473	'separator' => 'before',
474	]
475	);
476
477	$this->add_responsive_control(
478	'kng_video_popup_btn_margin',
479	[
480	'label' => esc_html__('Margin', 'king-addons'),
481	'type' => Controls_Manager::DIMENSIONS,
482	'size_units' => ['px'],
483	'default' => [
484	'top' => 30,
485	'right' => 30,
486	'bottom' => 30,
487	'left' => 30,
488	],
489	'selectors' => [
490	'{{WRAPPER}} .king-addons-video-popup-button' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
491	]
492	]
493	);
494
495	$this->add_control(
496	'kng_video_popup_btn_tabs_title',
497	[
498	'label' => '<b>' . esc_html__('Button Styles', 'king-addons') . '</b>',
499	'type' => Controls_Manager::RAW_HTML,
500	'separator' => 'before'
501	]
502	);
503
504	$this->start_controls_tabs('kng_video_popup_btn_tabs');
505
506	$this->start_controls_tab(
507	'kng_video_popup_btn_tab_normal',
508	[
509	'label' => esc_html__('Normal', 'king-addons'),
510	]
511	);
512
513	$this->add_control(
514	'kng_video_popup_btn_txt_color',
515	[
516	'label' => esc_html__('Icon Color', 'king-addons'),
517	'type' => Controls_Manager::COLOR,
518	'default' => '#000000',
519	'selectors' => [
520	'{{WRAPPER}} .king-addons-video-popup-button i' => 'color: {{VALUE}}',
521	'{{WRAPPER}} .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
522	],
523	]
524	);
525
526	$this->add_control(
527	'kng_video_popup_btn_bg_color',
528	[
529	'label' => esc_html__('Background Color', 'king-addons'),
530	'type' => Controls_Manager::COLOR,
531	'default' => '#ededed',
532	'selectors' => [
533	'{{WRAPPER}} .king-addons-video-popup-button' => 'background-color: {{VALUE}}',
534	],
535	]
536	);
537
538	$this->add_group_control(
539	Group_Control_Box_Shadow::get_type(),
540	[
541	'name' => 'kng_video_popup_btn_box_shadow',
542	'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
543	]
544	);
545
546	$this->add_group_control(
547	Group_Control_Border::get_type(),
548	[
549	'name' => 'kng_video_popup_btn_border',
550	'selector' => '{{WRAPPER}} .king-addons-video-popup-button',
551	'fields_options' => [
552	'border' => [
553	'default' => 'none',
554	],
555	],
556	]
557	);
558
559	$this->add_responsive_control(
560	'kng_video_popup_btn_border_radius',
561	[
562	'label' => esc_html__('Border Radius', 'king-addons'),
563	'type' => Controls_Manager::DIMENSIONS,
564	'size_units' => ['px', '%'],
565	'default' => [
566	'top' => 100,
567	'right' => 100,
568	'bottom' => 100,
569	'left' => 100,
570	'unit' => '%',
571	],
572	'selectors' => [
573	'{{WRAPPER}} .king-addons-video-popup-button' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
574	]
575	]
576	);
577
578	$this->end_controls_tab();
579
580	$this->start_controls_tab(
581	'kng_video_popup_btn_tab_hover',
582	[
583	'label' => esc_html__('Hover', 'king-addons'),
584	]
585	);
586
587	$this->add_control(
588	'kng_video_popup_btn_txt_color_hover',
589	[
590	'label' => esc_html__('Icon Color', 'king-addons'),
591	'type' => Controls_Manager::COLOR,
592	'selectors' => [
593	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button i' => 'color: {{VALUE}}',
594	'{{WRAPPER}} .king-addons-video-popup-button-wrap:hover .king-addons-video-popup-button svg' => 'fill: {{VALUE}}',
595	],
596	]
597	);
598
599	$this->add_control(
600	'kng_video_popup_btn_bg_color_hover',
601	[
602	'label' => esc_html__('Background Color', 'king-addons'),
603	'type' => Controls_Manager::COLOR,
604	'selectors' => [
605	'{{WRAPPER}} .king-addons-video-popup-button:hover' => 'background-color: {{VALUE}}',
606	],
607	]
608	);
609
610	$this->add_group_control(
611	Group_Control_Box_Shadow::get_type(),
612	[
613	'name' => 'kng_video_popup_btn_box_shadow_hover',
614	'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
615	]
616	);
617
618	$this->add_group_control(
619	Group_Control_Border::get_type(),
620	[
621	'name' => 'kng_video_popup_btn_border_hover',
622	'selector' => '{{WRAPPER}} .king-addons-video-popup-button:hover',
623	]
624	);
625
626	$this->add_responsive_control(
627	'kng_video_popup_btn_border_radius_hover',
628	[
629	'label' => esc_html__('Border Radius', 'king-addons'),
630	'type' => Controls_Manager::DIMENSIONS,
631	'size_units' => ['px', '%'],
632	'selectors' => [
633	'{{WRAPPER}} .king-addons-video-popup-button:hover' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
634	]
635	]
636	);
637
638	$this->end_controls_tab();
639
640	$this->end_controls_tabs();
641
642	$this->end_controls_section();
643	/** END SECTION: Button ===================== */
644
645	/** SECTION: Popup box ===================== */
646	$this->start_controls_section(
647	'kng_video_popup_section_style_off_canvas_box',
648	[
649	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Popup box', 'king-addons'),
650	'tab' => Controls_Manager::TAB_STYLE,
651	]
652	);
653
654	$this->add_control(
655	'kng_video_popup_box_bg_color',
656	[
657	'label' => esc_html__('Background Color', 'king-addons'),
658	'type' => Controls_Manager::COLOR,
659	'default' => '',
660	'selectors' => [
661	'.king-addons-video-popup-{{ID}}' => 'background-color: {{VALUE}};',
662	],
663	]
664	);
665
666	$this->add_responsive_control(
667	'kkng_video_popup_box_padding',
668	[
669	'label' => esc_html__('Padding', 'king-addons'),
670	'type' => Controls_Manager::DIMENSIONS,
671	'size_units' => ['px', '%'],
672	'default' => [
673	'top' => 0,
674	'right' => 0,
675	'bottom' => 0,
676	'left' => 0,
677	'unit' => 'px',
678	],
679	'selectors' => [
680	'.king-addons-video-popup-{{ID}}' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
681	]
682	]
683	);
684
685	$this->add_group_control(
686	Group_Control_Box_Shadow::get_type(),
687	[
688	'name' => 'kng_video_popup_box_box_shadow',
689	'selector' => '.king-addons-video-popup-{{ID}}',
690	]
691	);
692
693	$this->add_group_control(
694	Group_Control_Border::get_type(),
695	[
696	'name' => 'kng_video_popup_box_border',
697	'selector' => '.king-addons-video-popup-{{ID}}',
698	'fields_options' => [
699	'border' => [
700	'default' => 'none',
701	],
702	],
703	]
704	);
705
706	$this->add_responsive_control(
707	'kng_video_popup_box_border_radius',
708	[
709	'label' => esc_html__('Border Radius', 'king-addons'),
710	'type' => Controls_Manager::DIMENSIONS,
711	'size_units' => ['px', '%'],
712	'default' => [
713	'top' => 0,
714	'right' => 0,
715	'bottom' => 0,
716	'left' => 0,
717	'unit' => 'px',
718	],
719	'selectors' => [
720	'.king-addons-video-popup-{{ID}}' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
721	]
722	]
723	);
724
725	$this->add_control(
726	'kng_video_popup_box_z_index',
727	[
728	'label' => esc_html__('Z-Index of Popup box (optional)', 'king-addons'),
729	'description' => esc_html__('Note: The Popup box may not display over all elements in the Elementor preview mode here, due to limitations of the Elementor preview mode. However, the Popup box will display properly over all elements on the live website. Please check it there.', 'king-addons'),
730	'type' => Controls_Manager::NUMBER,
731	'step' => 1,
732	'default' => 999999,
733	'separator' => 'before',
734	'selectors' => [
735	'.king-addons-video-popup-{{ID}}' => 'z-index: {{VALUE}};',
736	'.king-addons-video-popup-overlay-{{ID}}' => 'z-index: calc({{VALUE}} - 1);',
737	],
738	]
739	);
740
741	$this->end_controls_section();
742	/** END SECTION: Popup box ===================== */
743
744	/** SECTION: Overlay ===================== */
745	$this->start_controls_section(
746	'kng_video_popup_overlay',
747	[
748	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Overlay', 'king-addons'),
749	'tab' => Controls_Manager::TAB_STYLE,
750	]
751	);
752
753	$this->add_control(
754	'kng_video_popup_overlay_color',
755	[
756	'label' => esc_html__('Overlay Background Color', 'king-addons'),
757	'type' => Controls_Manager::COLOR,
758	'default' => 'rgba(0, 0, 0, 0.85)',
759	'selectors' => [
760	'.king-addons-video-popup-overlay-{{ID}}' => 'background-color: {{VALUE}};',
761	],
762	]
763	);
764
765	$this->end_controls_section();
766	/** END SECTION: Overlay ===================== */
767	/** END TAB: STYLE ===================== */
768	}
769
770	protected function render(): void
771	{
772	$settings = $this->get_settings_for_display();
773	$this_ID = $this->get_id();
774	$class_ID = 'king-addons-video-popup-' . $this_ID;
775	$overlay_ID = 'king-addons-video-popup-overlay-' . $this_ID;
776
777	$is_hosted_video = in_array($settings['kng_video_popup_video_type'], ['hosted', 'external-hosted'], true);
778	$hosted_autoplay = $is_hosted_video && ('yes' === ($settings['kng_video_popup_hosted_autoplay'] ?? 'yes'));
779
780	// Overlay
781	echo '<div class="king-addons-video-popup-overlay ' . esc_attr($overlay_ID) . '"></div>';
782
783	// START: Popup box
784	echo '<div class="king-addons-video-popup ' .
785	esc_attr($class_ID) . ' king-addons-video-popup-position-' .
786	esc_attr($settings['kng_video_popup_box_position']) . ' king-addons-video-popup-animation-slide"';
787	if (!Plugin::$instance->editor->is_edit_mode()) {
788	echo ' style="display: none;"';
789	}
790	echo '>';
791
792	/** VIDEO */
793	echo '<div class="king-addons-video-popup-container">';
794
795	// YouTube
796	if ('youtube' === $settings['kng_video_popup_video_type']) {
797	echo '<iframe src="https://www.youtube.com/embed/' . esc_html($settings['kng_video_popup_youtube_url']) . (('' !== $settings['kng_video_popup_start_time']) ? '?start=' . esc_html($settings['kng_video_popup_start_time']) : '') . '" frameborder="0" allowfullscreen></iframe>';
798	}
799
800	// Vimeo
801	if ('vimeo' === $settings['kng_video_popup_video_type']) {
802	echo '<iframe src="https://player.vimeo.com/video/' . esc_html($settings['kng_video_popup_vimeo_url']) . '" frameborder="0" allowfullscreen ></iframe>';
803	}
804
805	// Hosted
806	if ('hosted' === $settings['kng_video_popup_video_type']) {
807	echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_hosted_url']['url']) . '" controls playsinline></video>';
808	}
809
810	// External Hosted
811	if ('external-hosted' === $settings['kng_video_popup_video_type']) {
812	echo '<video class="king-addons-video-popup-video" src="' . esc_url($settings['kng_video_popup_external_url']['url']) . '" controls playsinline></video>';
813	}
814
815	echo '</div>';
816	/** END: VIDEO */
817
818	// END: Popup box
819	echo '</div>';
820
821	if ('' == $settings['kng_video_popup_disable_btn']) {
822
823	echo '<div class="king-addons-video-popup-button-wrap">';
824
825	echo '<button type="button" class="king-addons-video-popup-button king-addons-video-popup-button-' .
826	esc_attr($this_ID) . ' king-addons-video-popup-button-effect-' . esc_attr($settings['kng_video_popup_btn_effect_type']) . '">';
827
828	Icons_Manager::render_icon($settings['kng_video_popup_btn_icon']);
829
830	echo '</button>';
831
832	echo '</div>';
833
834	}
835
836	$hosted_autoplay_js = $hosted_autoplay ? 'true' : 'false';
837
838	$inline_js_1 = "
839	document.addEventListener('DOMContentLoaded', function () {
840
841	const offCanvas = document.querySelector('." . esc_js($class_ID) . "');
842	const overlay = document.querySelector('." . esc_js($overlay_ID) . "');
843	const video = offCanvas ? offCanvas.querySelector('.king-addons-video-popup-video') : null;
844	const autoplayEnabled = " . $hosted_autoplay_js . ";
845	const popupButton = document.querySelector('.king-addons-video-popup-button-" . esc_js((string) $this_ID) . "');
846
847	/**
848	* Opens the video popup and optionally starts self-hosted video playback.
849	*
850	* @return {void}
851	*/
852	function openPopup() {
853	offCanvas.classList.add('king-addons-video-popup-active');
854	overlay.style.display = 'block';
855	document.body.style.pointerEvents = 'none';
856	setTimeout(function () {
857	overlay.style.opacity = '1';
858	}, 1);
859	setTimeout(function () {
860	document.body.style.pointerEvents = '';
861	}, 500);
862
863	if (autoplayEnabled && video) {
864	video.play().catch(function () {});
865	}
866	}
867
868	/**
869	* Closes the video popup and stops self-hosted video playback.
870	*
871	* @return {void}
872	*/
873	function closePopup() {
874	offCanvas.classList.remove('king-addons-video-popup-active');
875	overlay.style.opacity = '0';
876	document.body.style.pointerEvents = 'none';
877
878	if (video) {
879	video.pause();
880	video.currentTime = 0;
881	}
882
883	setTimeout(function () {
884	overlay.style.display = 'none';
885	document.body.style.pointerEvents = '';
886	}, 500);
887	}
888
889	/**
890	* Toggles popup visibility based on the current active state.
891	*
892	* @return {void}
893	*/
894	function togglePopup() {
895	if (offCanvas.classList.contains('king-addons-video-popup-active')) {
896	closePopup();
897	} else {
898	openPopup();
899	}
900	}
901
902	// Moves all Popupes to right after the <body> opens
903	document.body.insertBefore(overlay, document.body.firstChild);
904	document.body.insertBefore(offCanvas, document.body.firstChild);
905
906	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
907	offCanvas.style.display = 'block';
908
909	overlay.addEventListener('click', closePopup);
910
911	if (popupButton) {
912	popupButton.addEventListener('click', togglePopup);
913	}";
914
915	$inline_js_2 = "";
916	if ('' != $settings['kng_video_popup_class']) {
917	$inline_js_2 = "
918	// Adds click listener for custom triggers that have the custom class
919	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
920	customOffCanvasTrigger.forEach(element => element.addEventListener('click', togglePopup));
921	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
922	}
923
924	$inline_js_3 = "});";
925
926	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
927	wp_print_inline_script_tag($inline_js);
928	}
929	}