VideoSelector.jsx — Presto Player 1.8.2

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

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

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

VideoSelector.jsx

223 lines

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