parts
6 days ago
ActionBar.js
6 days ago
ActionBar.scss
6 days ago
Behavior.js
2 years ago
CTA.js
6 days ago
CTA.scss
6 days ago
Controls.js
5 years ago
Edit.js
6 days ago
Edit.scss
6 days ago
Email.js
6 days ago
Email.scss
6 days ago
Preset.js
4 years ago
Search.js
3 years ago
Style.js
6 days ago
Style.scss
6 days ago
Watermark.js
4 years ago
index.js
6 days ago
index.scss
6 days ago
Preset.js
249 lines
| 1 | /** |
| 2 | * WordPress dependencies |
| 3 | */ |
| 4 | const { __ } = wp.i18n; |
| 5 | const { Icon, Spinner, Modal, Button, ButtonGroup } = wp.components; |
| 6 | const { useState } = wp.element; |
| 7 | |
| 8 | export default function ({ |
| 9 | preset, |
| 10 | index, |
| 11 | isActive, |
| 12 | remove, |
| 13 | setPreset, |
| 14 | onEdit, |
| 15 | }) { |
| 16 | const [loading, setLoading] = useState(false); |
| 17 | const [confirmOpen, setConfirmOpen] = useState(false); |
| 18 | |
| 19 | const openConfirm = () => setConfirmOpen(true); |
| 20 | const closeConfirm = () => setConfirmOpen(false); |
| 21 | |
| 22 | const untrashPreset = async () => {}; |
| 23 | |
| 24 | const trashPreset = async () => { |
| 25 | // remove unsaved |
| 26 | if (!preset.id) { |
| 27 | remove(preset); |
| 28 | return; |
| 29 | } |
| 30 | |
| 31 | try { |
| 32 | setLoading(true); |
| 33 | let deleted = await wp.apiFetch({ |
| 34 | method: "POST", |
| 35 | url: wp.url.addQueryArgs( |
| 36 | `${prestoPlayer.root}${prestoPlayer.prestoVersionString}preset/${preset.id}`, |
| 37 | { _method: "DELETE" } |
| 38 | ), |
| 39 | }); |
| 40 | if (deleted) { |
| 41 | remove(preset); |
| 42 | wp.data.dispatch("core/notices").createNotice( |
| 43 | "success", // Can be one of: success, info, warning, error. |
| 44 | __("Preset trashed.", "presto-player"), |
| 45 | { |
| 46 | type: "snackbar", |
| 47 | isDismissible: true, |
| 48 | // actions: [ |
| 49 | // { |
| 50 | // label: __("Undo", "presto-player"), |
| 51 | // onClick: () => { |
| 52 | // console.log("untrash"); |
| 53 | // }, |
| 54 | // }, |
| 55 | // ], |
| 56 | } |
| 57 | ); |
| 58 | } |
| 59 | } catch (e) { |
| 60 | console.error(e); |
| 61 | if (e?.message) { |
| 62 | wp.data.dispatch("core/notices").createNotice( |
| 63 | "error", // Can be one of: success, info, warning, error. |
| 64 | e.message, |
| 65 | { |
| 66 | type: "snackbar", |
| 67 | isDismissible: true, // Whether the user can dismiss the notice. |
| 68 | } |
| 69 | ); |
| 70 | } |
| 71 | } finally { |
| 72 | setConfirmOpen(false); |
| 73 | setLoading(false); |
| 74 | } |
| 75 | }; |
| 76 | |
| 77 | if (loading) { |
| 78 | return ( |
| 79 | <div |
| 80 | className="block-editor-block-styles__item" |
| 81 | role="button" |
| 82 | tabIndex={index} |
| 83 | aria-label="Fill" |
| 84 | style={{ |
| 85 | color: isActive ? "var(--wp-admin-theme-color)" : "inherit", |
| 86 | width: "calc(50% - 4px)", |
| 87 | margin: "4px 0", |
| 88 | "flex-shrink": "0", |
| 89 | cursor: "pointer", |
| 90 | overflow: "hidden", |
| 91 | "border-radius": "2px", |
| 92 | padding: "6px", |
| 93 | display: "flex", |
| 94 | "flex-direction": "column", |
| 95 | }} |
| 96 | > |
| 97 | <div |
| 98 | className="block-editor-block-styles__item-preview" |
| 99 | style={{ |
| 100 | border: isActive |
| 101 | ? "2px solid var(--wp-admin-theme-color)" |
| 102 | : "2px solid #e3e3e3", |
| 103 | margin: 0, |
| 104 | outline: "1px solid transparent", |
| 105 | padding: "0", |
| 106 | display: "flex", |
| 107 | overflow: "hidden", |
| 108 | background: "#fff", |
| 109 | "align-items": "center", |
| 110 | "flex-grow": "1", |
| 111 | "min-height": "80px", |
| 112 | "max-height": "160px", |
| 113 | }} |
| 114 | > |
| 115 | <Spinner /> |
| 116 | </div> |
| 117 | </div> |
| 118 | ); |
| 119 | } |
| 120 | |
| 121 | return ( |
| 122 | <div |
| 123 | className={`block-editor-block-styles__item presto-preset-${preset.slug}`} |
| 124 | onClick={() => { |
| 125 | setPreset(preset); |
| 126 | }} |
| 127 | role="button" |
| 128 | tabIndex={index} |
| 129 | aria-label="Fill" |
| 130 | style={{ |
| 131 | color: isActive ? "var(--wp-admin-theme-color)" : "inherit", |
| 132 | width: "calc(50% - 4px)", |
| 133 | margin: "4px 0", |
| 134 | "flex-shrink": "0", |
| 135 | cursor: "pointer", |
| 136 | overflow: "hidden", |
| 137 | "border-radius": "2px", |
| 138 | padding: "6px", |
| 139 | display: "flex", |
| 140 | "flex-direction": "column", |
| 141 | }} |
| 142 | > |
| 143 | <div |
| 144 | className="block-editor-block-styles__item-preview" |
| 145 | style={{ |
| 146 | border: isActive |
| 147 | ? "2px solid var(--wp-admin-theme-color)" |
| 148 | : "2px solid #e3e3e3", |
| 149 | margin: 0, |
| 150 | outline: "1px solid transparent", |
| 151 | padding: "0", |
| 152 | display: "flex", |
| 153 | overflow: "hidden", |
| 154 | background: "#fff", |
| 155 | "align-items": "center", |
| 156 | "flex-grow": "1", |
| 157 | "min-height": "80px", |
| 158 | "max-height": "160px", |
| 159 | }} |
| 160 | > |
| 161 | <div |
| 162 | style={{ |
| 163 | textAlign: "center", |
| 164 | width: "100%", |
| 165 | color: isActive ? "var(--wp-admin-theme-color)" : "inherit", |
| 166 | opacity: isActive ? 1 : 0.75, |
| 167 | }} |
| 168 | > |
| 169 | {preset?.icon ? ( |
| 170 | <Icon |
| 171 | icon={preset?.icon} |
| 172 | style={{ |
| 173 | fontSize: "30px", |
| 174 | width: "30px", |
| 175 | height: "30px", |
| 176 | }} |
| 177 | /> |
| 178 | ) : ( |
| 179 | <h1 style={{ opacity: 0.75 }}> |
| 180 | {preset?.name?.charAt(0)?.toUpperCase() || "Untitled"} |
| 181 | </h1> |
| 182 | )} |
| 183 | </div> |
| 184 | </div> |
| 185 | <div |
| 186 | className="block-editor-block-styles__item-label" |
| 187 | style={{ |
| 188 | fontWeight: "bold", |
| 189 | textTransform: "capitalize", |
| 190 | "text-align": "center", |
| 191 | padding: "4px 0", |
| 192 | }} |
| 193 | > |
| 194 | {preset?.name || "Untitled"} |
| 195 | </div> |
| 196 | |
| 197 | {!preset?.is_locked && ( |
| 198 | <div className="block-editor-block-styles__item-edit"> |
| 199 | <div |
| 200 | className="block-editor-block-styles__item-edit-icon" |
| 201 | onClick={onEdit} |
| 202 | > |
| 203 | <Icon icon="edit" /> |
| 204 | </div> |
| 205 | <div |
| 206 | className="block-editor-block-styles__item-edit-icon" |
| 207 | onClick={openConfirm} |
| 208 | > |
| 209 | <Icon icon="trash" /> |
| 210 | </div> |
| 211 | </div> |
| 212 | )} |
| 213 | |
| 214 | {confirmOpen && ( |
| 215 | <Modal |
| 216 | title={__("Trash Preset?", "presto-player")} |
| 217 | onRequestClose={closeConfirm} |
| 218 | style={{ maxWidth: "250px" }} |
| 219 | > |
| 220 | <p> |
| 221 | <strong>{__("Warning!", "presto-player")} </strong> |
| 222 | {__( |
| 223 | "Any videos assigned to this preset will automatically use the default preset.", |
| 224 | "presto-player" |
| 225 | )} |
| 226 | </p> |
| 227 | |
| 228 | <ButtonGroup> |
| 229 | <Button |
| 230 | isDestructive |
| 231 | onClick={trashPreset} |
| 232 | style={{ margin: "0 4px" }} |
| 233 | > |
| 234 | {__("Trash", "presto-player")} |
| 235 | </Button> |
| 236 | <Button |
| 237 | isTertiary |
| 238 | onClick={closeConfirm} |
| 239 | style={{ margin: "0 4px", boxShadow: "none" }} |
| 240 | > |
| 241 | {__("Cancel", "presto-player")} |
| 242 | </Button> |
| 243 | </ButtonGroup> |
| 244 | </Modal> |
| 245 | )} |
| 246 | </div> |
| 247 | ); |
| 248 | } |
| 249 |