vimeography / lib / admin / app / src / components / GalleryEditor / BasicSettings / BasicSettings.tsx

BasicSettings.tsx in Vimeography: Vimeo Video Gallery WordPress Plugin 2.2, at lib/admin/app/src/components/GalleryEditor/BasicSettings/BasicSettings.tsx

132 lines 4.5 KB

Raw Download Zip

1	import * as React from "react";
2	import { NavLink, Route, Switch } from "react-router-dom";
3	import GalleryContext from "~/context/Gallery";
4
5	const Setting = ({ children }) => <div className="vm-mb-4">{children}</div>;
6
7	const SettingLabel = ({ children }) => (
8	<label className="vm-font-semibold vm-text-gray-700 vm-block vm-mb-1">
9	{children}
10	</label>
11	);
12
13	const BasicSettings = () => {
14	const ctx = React.useContext(GalleryContext);
15
16	const [isRefreshing, setIsRefreshing] = React.useState(false);
17
18	const handleUpdate = (payload) => {
19	ctx.dispatch({
20	type: `EDIT_GALLERY_STATE`,
21	payload,
22	});
23	};
24
25	return (
26	<div className="vm-p-4">
27	<Setting>
28	<SettingLabel>Refresh the videos every</SettingLabel>
29	{/* Specifies how frequently Vimeography should check your Vimeo source for any new videos that may have been added. */}
30
31	<div className="vm-flex vm-items-center vm-justify-between">
32	<select
33	className=""
34	value={ctx.state.cache_timeout}
35	onChange={(e) =>
36	handleUpdate({ cache_timeout: parseInt(e.target.value) })
37	}
38	>
39	<option value="0">page load</option>
40	<option value="900">15 minutes</option>
41	<option value="1800">30 minutes</option>
42	<option value="3600">hour</option>
43	<option value="86400">day</option>
44	<option value="604800">week</option>
45	<option value="2419200">month</option>
46	</select>
47
48	<button
49	className="vm-flex vm-items-center vm-text-blue-500 vm-outline-none focus:vm-outline-none vm-border-0 vm-bg-transparent vm-cursor-pointer"
50	onClick={() => {
51	setIsRefreshing(true);
52	const url =
53	window.location.href +
54	`&vimeography-action=refresh_gallery_cache`;
55	window.location.href = url;
56	}}
57	>
58	<svg
59	className={`vm-w-4 vm-h-4 vm-mr-1 ${
60	isRefreshing ? "vm-animate-spin" : ""
61	}`}
62	fill="currentColor"
63	viewBox="0 0 20 20"
64	xmlns="http://www.w3.org/2000/svg"
65	>
66	<path
67	fillRule="evenodd"
68	d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
69	clipRule="evenodd"
70	/>
71	</svg>
72	{isRefreshing ? "Refreshing…" : "Force refresh"}
73	</button>
74	</div>
75	</Setting>
76	<Setting>
77	<SettingLabel>Number of videos</SettingLabel>
78	<input
79	type="number"
80	min="0"
81	max="25"
82	value={ctx.state.video_limit}
83	onChange={(e) =>
84	handleUpdate({ video_limit: parseInt(e.target.value) })
85	}
86	className="vm-mb-2 vm-w-24"
87	/>
88	<p className="vm-text-xs vm-text-gray-400">
89	Specifies the number of videos that will appear in your gallery. Set
90	to 0 for the maximum amount. You can display unlimited videos with{" "}
91	<a
92	className="vm-text-blue-500"
93	href="https://vimeography.com/pro"
94	target="_blank"
95	>
96	Vimeography Pro.
97	</a>
98	</p>
99	</Setting>
100	<Setting>
101	<SettingLabel>Max gallery width</SettingLabel>
102	<input
103	type="text"
104	placeholder="eg. 960px, 35%"
105	value={ctx.state.gallery_width}
106	onChange={(e) => handleUpdate({ gallery_width: e.target.value })}
107	className="vm-mb-2"
108	/>
109	<p className="vm-text-xs vm-text-gray-400">
110	Specifies the maximum width that your gallery container can expand to.
111	</p>
112	</Setting>
113	<Setting>
114	<SettingLabel>Featured video URL</SettingLabel>
115	<input
116	type="text"
117	placeholder="eg. https://vimeo.com/3567483"
118	value={ctx.state.featured_video}
119	onChange={(e) => handleUpdate({ featured_video: e.target.value })}
120	className="vm-mb-2 vm-w-full"
121	/>
122	<p className="vm-text-xs vm-text-gray-400">
123	Sets the specified video as the first video that appears in your
124	gallery.
125	</p>
126	</Setting>
127	</div>
128	);
129	};
130
131	export default BasicSettings;
132