Integrations.js
358 lines
| 1 | const { __ } = wp.i18n; |
| 2 | const { ToggleControl: Toggle, ExternalLink } = wp.components; |
| 3 | const { useState, Fragment } = wp.element; |
| 4 | |
| 5 | const semverCompare = require("semver/functions/compare"); |
| 6 | |
| 7 | import { getSettings, getSetting } from "@/admin/settings/util"; |
| 8 | |
| 9 | import Group from "../components/Group"; |
| 10 | import Page from "../components/Page"; |
| 11 | |
| 12 | import TextControl from "../components/TextControl"; |
| 13 | import ToggleControl from "../components/ToggleControl"; |
| 14 | import Mailchimp from "./parts/integration/Mailchimp"; |
| 15 | import MailerLite from "./parts/integration/MailerLite"; |
| 16 | import FluentCRM from "./parts/integration/FluentCRM"; |
| 17 | import ActiveCampaign from "./parts/integration/ActiveCampaign"; |
| 18 | import EmailExport from "./parts/EmailExport"; |
| 19 | import CTA from "../components/CTA"; |
| 20 | import BunnyStream from "./parts/BunnyStream"; |
| 21 | |
| 22 | export default () => { |
| 23 | const settings = getSettings(); |
| 24 | const [editBunny, setEditBunny] = useState(false); |
| 25 | |
| 26 | const disabled = () => { |
| 27 | if (prestoPlayer?.isPremium) { |
| 28 | return false; |
| 29 | } |
| 30 | return { |
| 31 | title: __("Pro Feature", "presto-player"), |
| 32 | heading: __("Unlock Presto Player Pro", "presto-player"), |
| 33 | message: __( |
| 34 | "Get this feature and more with the Pro version of Presto Player!", |
| 35 | "presto-player" |
| 36 | ), |
| 37 | link: "https://prestoplayer.com", |
| 38 | }; |
| 39 | }; |
| 40 | |
| 41 | const showEmailIntegration = () => { |
| 42 | if (!prestoPlayer?.isPremium) { |
| 43 | return true; |
| 44 | } |
| 45 | |
| 46 | if ( |
| 47 | prestoPlayer?.proVersion && |
| 48 | semverCompare(prestoPlayer?.proVersion, "0.9.0") >= 0 |
| 49 | ) { |
| 50 | return true; |
| 51 | } |
| 52 | |
| 53 | return false; |
| 54 | }; |
| 55 | |
| 56 | const bunnySettings = () => { |
| 57 | return ( |
| 58 | <> |
| 59 | <Group |
| 60 | title={__("Bunny.net Settings", "presto-player")} |
| 61 | description={__("Modify bunny.net settings.", "presto-player")} |
| 62 | > |
| 63 | {settings?.presto_player_bunny_stream && ( |
| 64 | <Fragment> |
| 65 | <TextControl |
| 66 | option={{ |
| 67 | id: "hls_start_level", |
| 68 | name: __("Initial Quality Level", "presto-player"), |
| 69 | help: __( |
| 70 | "You can set the default quality start level for all streams (i.e. 240, 360, 480, 720, 1080, etc). Set this lower to prevent initial buffering if your users have slow connections. Set this higher to start with a higher quality stream.", |
| 71 | "presto-player" |
| 72 | ), |
| 73 | }} |
| 74 | placeholder={"480"} |
| 75 | type="number" |
| 76 | value={settings?.presto_player_bunny_stream?.hls_start_level} |
| 77 | optionName="bunny_stream" |
| 78 | /> |
| 79 | {<br />} |
| 80 | |
| 81 | <ToggleControl |
| 82 | className="presto-player__setting--use-existing-tag" |
| 83 | option={{ |
| 84 | id: "disable_legacy_storage", |
| 85 | name: __( |
| 86 | "Disable Classic Bunny.net Storage", |
| 87 | "presto-player" |
| 88 | ), |
| 89 | help: __( |
| 90 | "This will disable Bunny.net classic storage in your block UI.", |
| 91 | "presto-player" |
| 92 | ), |
| 93 | }} |
| 94 | value={ |
| 95 | settings?.presto_player_bunny_stream?.disable_legacy_storage |
| 96 | } |
| 97 | optionName="bunny_stream" |
| 98 | /> |
| 99 | |
| 100 | {<br />} |
| 101 | </Fragment> |
| 102 | )} |
| 103 | |
| 104 | <Toggle |
| 105 | label={__("Edit Bunny.net Settings", "presto-player")} |
| 106 | help={__( |
| 107 | "Edit Bunny.net connection settings. Only edit this if you know what you're doing.", |
| 108 | "presto-player" |
| 109 | )} |
| 110 | checked={editBunny} |
| 111 | onChange={setEditBunny} |
| 112 | /> |
| 113 | {!!editBunny && ( |
| 114 | <> |
| 115 | {settings?.presto_player_bunny_stream_public && ( |
| 116 | <Fragment> |
| 117 | <h2 style={{ marginTop: "40px" }}> |
| 118 | {__("Bunny.net Stream", "presto-player")} |
| 119 | </h2> |
| 120 | <BunnyStream /> |
| 121 | </Fragment> |
| 122 | )} |
| 123 | |
| 124 | <h2 style={{ marginTop: "40px" }}> |
| 125 | {__("Bunny.net Storage (Classic)", "presto-player")} |
| 126 | </h2> |
| 127 | <p style={{ fontSize: "12px", color: "#757575" }}> |
| 128 | {__( |
| 129 | 'Note: To Change your API key, please click "Reconnect" from a bunny block.', |
| 130 | "presto-player" |
| 131 | )} |
| 132 | </p> |
| 133 | <TextControl |
| 134 | className="presto-player__setting--pull_public_id" |
| 135 | option={{ |
| 136 | id: "public_id", |
| 137 | name: __("Public ID", "presto-player"), |
| 138 | help: __( |
| 139 | "The ID of the public pull zone to use.", |
| 140 | "presto-player" |
| 141 | ), |
| 142 | }} |
| 143 | value={settings?.presto_player_bunny_pull_zones?.public_id} |
| 144 | optionName="bunny_pull_zones" |
| 145 | /> |
| 146 | |
| 147 | <TextControl |
| 148 | className="presto-player__setting--pull_private_name" |
| 149 | option={{ |
| 150 | id: "public_hostname", |
| 151 | name: __("Public Host Name", "presto-player"), |
| 152 | help: __( |
| 153 | "The hostname to use for this pullzone.", |
| 154 | "presto-player" |
| 155 | ), |
| 156 | }} |
| 157 | value={ |
| 158 | settings?.presto_player_bunny_pull_zones?.public_hostname |
| 159 | } |
| 160 | optionName="bunny_pull_zones" |
| 161 | /> |
| 162 | |
| 163 | <TextControl |
| 164 | className="presto-player__setting--pull_private_id" |
| 165 | option={{ |
| 166 | id: "private_id", |
| 167 | name: __("Private ID", "presto-player"), |
| 168 | help: __( |
| 169 | "The ID of the private pull zone to use.", |
| 170 | "presto-player" |
| 171 | ), |
| 172 | }} |
| 173 | value={settings?.presto_player_bunny_pull_zones?.private_id} |
| 174 | optionName="bunny_pull_zones" |
| 175 | /> |
| 176 | |
| 177 | <TextControl |
| 178 | className="presto-player__setting--pull_private_name" |
| 179 | option={{ |
| 180 | id: "private_hostname", |
| 181 | name: __("Private Host Name", "presto-player"), |
| 182 | help: __( |
| 183 | "The hostname to use for this pullzone.", |
| 184 | "presto-player" |
| 185 | ), |
| 186 | }} |
| 187 | value={ |
| 188 | settings?.presto_player_bunny_pull_zones?.private_hostname |
| 189 | } |
| 190 | optionName="bunny_pull_zones" |
| 191 | /> |
| 192 | |
| 193 | <TextControl |
| 194 | className="presto-player__setting--pull_private_name" |
| 195 | option={{ |
| 196 | id: "private_security_key", |
| 197 | name: __( |
| 198 | "Private Url Token Authentication Key", |
| 199 | "presto-player" |
| 200 | ), |
| 201 | help: __( |
| 202 | "Update the security token used to sign private urls.", |
| 203 | "presto-player" |
| 204 | ), |
| 205 | type: "password", |
| 206 | }} |
| 207 | value={ |
| 208 | settings?.presto_player_bunny_pull_zones?.private_security_key |
| 209 | } |
| 210 | optionName="bunny_pull_zones" |
| 211 | /> |
| 212 | </> |
| 213 | )} |
| 214 | </Group> |
| 215 | </> |
| 216 | ); |
| 217 | }; |
| 218 | |
| 219 | return ( |
| 220 | <Page |
| 221 | title={__("Integrations", "presto-player")} |
| 222 | description={__( |
| 223 | "Third party integrations and connections.", |
| 224 | "presto-player" |
| 225 | )} |
| 226 | > |
| 227 | <Group |
| 228 | title={__("Google Analytics", "presto-player")} |
| 229 | description={__( |
| 230 | "Analytics settings for media plays, watch times and more.", |
| 231 | "presto-player" |
| 232 | )} |
| 233 | disabled={disabled()} |
| 234 | > |
| 235 | <ToggleControl |
| 236 | className="presto-player__setting--google-analytics" |
| 237 | option={{ |
| 238 | id: "enable", |
| 239 | name: __("Enable", "presto-player"), |
| 240 | help: __( |
| 241 | "Send analytics events to your Google Analytics account.", |
| 242 | "presto-player" |
| 243 | ), |
| 244 | }} |
| 245 | value={getSetting("google_analytics", "enable")} |
| 246 | optionName="google_analytics" |
| 247 | /> |
| 248 | <ToggleControl |
| 249 | className="presto-player__setting--use-existing-tag" |
| 250 | option={{ |
| 251 | id: "use_existing_tag", |
| 252 | name: __("Use existing on-page tag?", "presto-player"), |
| 253 | help: __( |
| 254 | "Should we use an existing google analytics (v4) tag? If not, we'll output one for you.", |
| 255 | "presto-player" |
| 256 | ), |
| 257 | }} |
| 258 | value={getSetting("google_analytics", "use_existing_tag")} |
| 259 | optionName="google_analytics" |
| 260 | /> |
| 261 | <TextControl |
| 262 | className="presto-player__setting--measurement-id" |
| 263 | option={{ |
| 264 | id: "measurement_id", |
| 265 | name: __("Measurement ID", "presto-player"), |
| 266 | help: __( |
| 267 | "Enter a Google Analytics Measurement ID, which can be found on your analytics admin page.", |
| 268 | "presto-player" |
| 269 | ), |
| 270 | }} |
| 271 | value={getSetting("google_analytics", "measurement_id")} |
| 272 | optionName="google_analytics" |
| 273 | /> |
| 274 | </Group> |
| 275 | |
| 276 | <Group |
| 277 | title={__("YouTube", "presto-player")} |
| 278 | description={__("Settings for YouTube videos.", "presto-player")} |
| 279 | > |
| 280 | <ToggleControl |
| 281 | className="presto-player__setting--youtube-nocookie" |
| 282 | option={{ |
| 283 | id: "nocookie", |
| 284 | name: __("Privacy-Enhanced Mode", "presto-player"), |
| 285 | help: __( |
| 286 | "Embed YouTube videos without using cookies that track viewing behaviour.", |
| 287 | "presto-player" |
| 288 | ), |
| 289 | }} |
| 290 | value={getSetting("youtube", "nocookie")} |
| 291 | optionName="youtube" |
| 292 | /> |
| 293 | <TextControl |
| 294 | className="presto-player__setting--youtube-channel-id" |
| 295 | option={{ |
| 296 | id: "channel_id", |
| 297 | name: __("Channel ID", "presto-player"), |
| 298 | help: ( |
| 299 | <div> |
| 300 | {__( |
| 301 | "Enter the ID of your channel to enable Youtube Subscribe button functionality.", |
| 302 | "presto-player" |
| 303 | )}{" "} |
| 304 | <ExternalLink href="https://support.google.com/youtube/answer/3250431?hl=en"> |
| 305 | {__("Find my channel id", "presto-player")} |
| 306 | </ExternalLink> |
| 307 | </div> |
| 308 | ), |
| 309 | }} |
| 310 | value={getSetting("youtube", "channel_id")} |
| 311 | optionName="youtube" |
| 312 | /> |
| 313 | </Group> |
| 314 | |
| 315 | {showEmailIntegration() && ( |
| 316 | <Group |
| 317 | hideSaveButton={true} |
| 318 | title={__("Email Capture", "presto-player")} |
| 319 | description={__( |
| 320 | "Integrate Presto Player with an email provider for email capture.", |
| 321 | "presto-player" |
| 322 | )} |
| 323 | disabled={disabled()} |
| 324 | > |
| 325 | <ActiveCampaign settings={settings?.presto_player_activecampaign} /> |
| 326 | <FluentCRM settings={settings?.presto_player_fluentcrm} /> |
| 327 | <Mailchimp settings={settings?.presto_player_mailchimp} /> |
| 328 | <MailerLite settings={settings?.presto_player_mailerlite} /> |
| 329 | <EmailExport /> |
| 330 | </Group> |
| 331 | )} |
| 332 | |
| 333 | {!window?.prestoPlayer?.isSetup?.bunny ? ( |
| 334 | <Group> |
| 335 | <CTA |
| 336 | className="presto-player__setting--bunny-cta" |
| 337 | option={{ |
| 338 | name: __("Bunny.net Video", "presto-player"), |
| 339 | help: __( |
| 340 | "To get started with Bunny.net, add a Bunny.net video to your page.", |
| 341 | "presto-player" |
| 342 | ), |
| 343 | type: "cta", |
| 344 | button: { |
| 345 | text: "Learn More", |
| 346 | link: "https://prestoplayer.com/secure-video-with-bunny-net", |
| 347 | target: "_blank", |
| 348 | }, |
| 349 | }} |
| 350 | /> |
| 351 | </Group> |
| 352 | ) : ( |
| 353 | bunnySettings() |
| 354 | )} |
| 355 | </Page> |
| 356 | ); |
| 357 | }; |
| 358 |