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.83, at includes/widgets/Video_Popup/Video_Popup.php

936 lines 35.4 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
844	// With no template picked the widget prints a placeholder instead of
845	// the panel markup, so these lookups come back empty. Bail out rather
846	// than throwing on insertBefore and losing the handlers below.
847	if (!offCanvas \|\| !overlay) {
848	return;
849	}
850	const video = offCanvas ? offCanvas.querySelector('.king-addons-video-popup-video') : null;
851	const autoplayEnabled = " . $hosted_autoplay_js . ";
852	const popupButton = document.querySelector('.king-addons-video-popup-button-" . esc_js((string) $this_ID) . "');
853
854	/**
855	* Opens the video popup and optionally starts self-hosted video playback.
856	*
857	* @return {void}
858	*/
859	function openPopup() {
860	offCanvas.classList.add('king-addons-video-popup-active');
861	overlay.style.display = 'block';
862	document.body.style.pointerEvents = 'none';
863	setTimeout(function () {
864	overlay.style.opacity = '1';
865	}, 1);
866	setTimeout(function () {
867	document.body.style.pointerEvents = '';
868	}, 500);
869
870	if (autoplayEnabled && video) {
871	video.play().catch(function () {});
872	}
873	}
874
875	/**
876	* Closes the video popup and stops self-hosted video playback.
877	*
878	* @return {void}
879	*/
880	function closePopup() {
881	offCanvas.classList.remove('king-addons-video-popup-active');
882	overlay.style.opacity = '0';
883	document.body.style.pointerEvents = 'none';
884
885	if (video) {
886	video.pause();
887	video.currentTime = 0;
888	}
889
890	setTimeout(function () {
891	overlay.style.display = 'none';
892	document.body.style.pointerEvents = '';
893	}, 500);
894	}
895
896	/**
897	* Toggles popup visibility based on the current active state.
898	*
899	* @return {void}
900	*/
901	function togglePopup() {
902	if (offCanvas.classList.contains('king-addons-video-popup-active')) {
903	closePopup();
904	} else {
905	openPopup();
906	}
907	}
908
909	// Moves all Popupes to right after the <body> opens
910	document.body.insertBefore(overlay, document.body.firstChild);
911	document.body.insertBefore(offCanvas, document.body.firstChild);
912
913	// Change display from none to block to prevent dancing of the Popup before the DOM content loaded
914	offCanvas.style.display = 'block';
915
916	overlay.addEventListener('click', closePopup);
917
918	if (popupButton) {
919	popupButton.addEventListener('click', togglePopup);
920	}";
921
922	$inline_js_2 = "";
923	if ('' != $settings['kng_video_popup_class']) {
924	$inline_js_2 = "
925	// Adds click listener for custom triggers that have the custom class
926	const customOffCanvasTrigger = document.querySelectorAll('." . esc_js($settings['kng_video_popup_class']) . "');
927	customOffCanvasTrigger.forEach(element => element.addEventListener('click', togglePopup));
928	customOffCanvasTrigger.forEach(element => element.style.cursor = 'pointer'); ";
929	}
930
931	$inline_js_3 = "});";
932
933	$inline_js = $inline_js_1 . $inline_js_2 . $inline_js_3;
934	wp_print_inline_script_tag($inline_js);
935	}
936	}