VideoSelector.jsx — Presto Player 2.2.2

presto-player / src / admin / integrations / divi / fields / VideoSelector / VideoSelector.jsx

presto-player / src / admin / integrations / divi / fields / VideoSelector Last commit date

VideoSelector.jsx 3 years ago style.css 4 years ago

VideoSelector.jsx

226 lines

1	// External Dependencies
2	import createCache from "@emotion/cache";
3	import debounce from "debounce-promise";
4	import memoizeOne from "memoize-one";
5	import React, { Component } from "react";
6	import { NonceProvider } from "react-select";
7	import AsyncSelect from "react-select/async";
8
9	const { __ } = wp.i18n;
10
11	// Internal Dependencies
12	import "./style.css";
13
14	class PrestoNonceProvider extends NonceProvider {
15	createEmotionCacheCustom = function (nonce) {
16	return createCache({
17	nonce,
18	key: "custom-select-style",
19	container: this.props.container,
20	});
21	};
22
23	createEmotionCache = memoizeOne(this.createEmotionCacheCustom);
24	}
25
26	class VideoSelector extends Component {
27	static slug = "prpl_video_selector";
28
29	constructor(props) {
30	super(props);
31	this.state = { videos: [] };
32
33	const wait = 500; // milliseconds
34	const loadVideos = (inputValue) =>
35	this.loadVideos({ searchTerm: inputValue });
36	this.debouncedLoadVideos = debounce(loadVideos, wait, {
37	leading: true,
38	});
39	}
40
41	/**
42	* Search for videos
43	*
44	* @param {string} input
45	* @returns {array}
46	*/
47	fetchVideos = (input = "") => {
48	return fetch(prestoPlayer.ajaxurl, {
49	method: "POST",
50	credentials: "same-origin",
51	headers: {
52	"Content-Type": "application/x-www-form-urlencoded",
53	"Cache-Control": "no-cache",
54	},
55	body: new URLSearchParams({
56	action: "presto_fetch_videos",
57	search: input,
58	_wpnonce: prestoPlayer.nonce,
59	}),
60	})
61	.then((response) => response.json())
62	.then((response) => response.data \|\| []);
63	};
64
65	/**
66	* Fetch a specific video
67	* @param {array} input
68	* @returns {array}
69	*/
70	fetchVideo = (input = "") => {
71	if (!input) {
72	return [];
73	}
74
75	return fetch(`/wp-admin/admin-ajax.php`, {
76	method: "POST",
77	credentials: "same-origin",
78	headers: {
79	"Content-Type": "application/x-www-form-urlencoded",
80	"Cache-Control": "no-cache",
81	},
82	body: new URLSearchParams({
83	action: "presto_fetch_videos",
84	post_id: input,
85	}),
86	})
87	.then((response) => response.json())
88	.then((response) => response.data \|\| []);
89	};
90
91	/**
92	* Load the videos from the db
93	* @param {string} input
94	* @returns
95	*/
96	loadVideos = async (input) => {
97	input = {
98	searchTerm: "",
99	postId: "",
100	...input,
101	};
102
103	let [video, videos] = await Promise.all([
104	this.fetchVideo(input.postId),
105	this.fetchVideos(input.searchTerm),
106	]);
107
108	if (video[0] && !videos.find((item) => item.ID === video[0].ID)) {
109	videos.push(video[0]);
110	}
111	videos = videos.map((item) => {
112	return {
113	label: item.post_title \|\| __("Untitled", "presto-player"),
114	value: item.ID,
115	};
116	});
117
118	this.setState({ videos });
119
120	return videos;
121	};
122
123	/**
124	* Handle input value change.
125	*
126	* @param {object} event
127	*/
128	_onChange = (event) => {
129	this.props._onChange(this.props.name, event.value);
130	};
131
132	/**
133	* Handle edit video click.
134	* @returns null
135	*/
136	_onEditVideoClick = () => {
137	var video_id = this.props.value;
138	if (!video_id) {
139	return;
140	}
141	var win = window.open(
142	`/wp-admin/post.php?post=${video_id}&action=edit`,
143	"_blank"
144	);
145	win.focus();
146	};
147
148	/**
149	* Handle create video click.
150	*/
151	_onCreateVideoClick = () => {
152	var win = window.open(
153	`/wp-admin/post-new.php?post_type=pp_video_block`,
154	"_blank"
155	);
156	win.focus();
157	};
158
159	/**
160	* Determine the video label
161	* @returns {string}
162	*/
163	currentVideoLabel = () => {
164	if (!this.state.videos) {
165	return "";
166	}
167
168	const video = (this.state.videos \|\| []).find((video) => {
169	return video.value === parseInt(this.props.value);
170	});
171
172	if (!video) {
173	return "";
174	}
175
176	return video.label;
177	};
178
179	/**
180	* Render the component
181	* @returns {JSX}
182	*/
183	render() {
184	return (
185	<div className="presto-player-divi-editor">
186	<ul className="presto-player-divi-editor__inputs">
187	<li>
188	<PrestoNonceProvider container={window.parent.document.body}>
189	<AsyncSelect
190	id={`prpd_video_selector-${this.props.name}`}
191	className="prpd_video_selector"
192	classNamePrefix="prpd_video_select"
193	cacheOptions
194	defaultOptions
195	name={this.props.name}
196	value={{
197	value: this.props.value,
198	label: this.currentVideoLabel(),
199	}}
200	onChange={this._onChange}
201	loadOptions={(inputValue) =>
202	this.debouncedLoadVideos(inputValue)
203	}
204	/>
205	</PrestoNonceProvider>
206	</li>
207	<li>
208	<label>{__("Video Options", "presto-player")}</label>
209	<button type="button" onClick={this._onEditVideoClick}>
210	{__("Edit Video", "presto-player")}
211	</button>
212	</li>
213	<li>
214	<label>{__("New Video", "presto-player")}</label>
215	<button type="button" onClick={this._onCreateVideoClick}>
216	{__("Create Video", "presto-player")}
217	</button>
218	</li>
219	</ul>
220	</div>
221	);
222	}
223	}
224
225	export default VideoSelector;
226