Integrations.js
285 lines
| 1 | import { |
| 2 | ExternalLink, |
| 3 | TextControl, |
| 4 | ToggleControl, |
| 5 | } from "@wordpress/components"; |
| 6 | import { useEntityProp } from "@wordpress/core-data"; |
| 7 | import { Fragment, useState } from "@wordpress/element"; |
| 8 | import { __ } from "@wordpress/i18n"; |
| 9 | |
| 10 | const semverCompare = require("semver/functions/compare"); |
| 11 | |
| 12 | import Group from "../components/Group"; |
| 13 | import Page from "../components/Page"; |
| 14 | import BunnyClassic from "./parts/BunnyClassic/index"; |
| 15 | import BunnyStream from "./parts/BunnyStream/index"; |
| 16 | import EmailExport from "./parts/EmailExport"; |
| 17 | import CTA from "../components/CTA"; |
| 18 | |
| 19 | import ActiveCampaign from "./parts/integration/ActiveCampaign"; |
| 20 | import FluentCRM from "./parts/integration/FluentCRM"; |
| 21 | import Mailchimp from "./parts/integration/Mailchimp"; |
| 22 | import MailerLite from "./parts/integration/MailerLite"; |
| 23 | import Webhooks from "./parts/Webhooks/index.js"; |
| 24 | |
| 25 | export default () => { |
| 26 | const [editBunny, setEditBunny] = useState(false); |
| 27 | |
| 28 | const [stream, setStream] = useEntityProp( |
| 29 | "root", |
| 30 | "site", |
| 31 | "presto_player_bunny_stream" |
| 32 | ); |
| 33 | const updateStream = (data) => { |
| 34 | setStream({ |
| 35 | ...(stream || {}), |
| 36 | ...data, |
| 37 | }); |
| 38 | }; |
| 39 | |
| 40 | const [analytics, setAnalytics] = useEntityProp( |
| 41 | "root", |
| 42 | "site", |
| 43 | "presto_player_google_analytics" |
| 44 | ); |
| 45 | const updateAnalytics = (data) => { |
| 46 | setAnalytics({ |
| 47 | ...(analytics || {}), |
| 48 | ...data, |
| 49 | }); |
| 50 | }; |
| 51 | |
| 52 | const [youtube, setYoutube] = useEntityProp( |
| 53 | "root", |
| 54 | "site", |
| 55 | "presto_player_youtube" |
| 56 | ); |
| 57 | const updateYoutube = (data) => { |
| 58 | setYoutube({ |
| 59 | ...(youtube || {}), |
| 60 | ...data, |
| 61 | }); |
| 62 | }; |
| 63 | |
| 64 | const disabled = () => { |
| 65 | if (prestoPlayer?.isPremium) { |
| 66 | return false; |
| 67 | } |
| 68 | return { |
| 69 | title: __("Pro Feature", "presto-player"), |
| 70 | heading: __("Unlock Presto Player Pro", "presto-player"), |
| 71 | message: __( |
| 72 | "Get this feature and more with the Pro version of Presto Player!", |
| 73 | "presto-player" |
| 74 | ), |
| 75 | link: "https://prestoplayer.com", |
| 76 | }; |
| 77 | }; |
| 78 | |
| 79 | const showEmailIntegration = () => { |
| 80 | if (!prestoPlayer?.isPremium) { |
| 81 | return true; |
| 82 | } |
| 83 | |
| 84 | if ( |
| 85 | prestoPlayer?.proVersion && |
| 86 | semverCompare(prestoPlayer?.proVersion, "0.9.0") >= 0 |
| 87 | ) { |
| 88 | return true; |
| 89 | } |
| 90 | |
| 91 | return false; |
| 92 | }; |
| 93 | |
| 94 | const bunnySettings = () => { |
| 95 | return ( |
| 96 | <> |
| 97 | <Group |
| 98 | title={__("Bunny.net Settings", "presto-player")} |
| 99 | description={__("Modify bunny.net settings.", "presto-player")} |
| 100 | > |
| 101 | {!!window?.prestoPlayer?.isSetup?.bunny?.stream && ( |
| 102 | <Fragment> |
| 103 | <TextControl |
| 104 | label={__("Initial Quality Level", "presto-player")} |
| 105 | help={__( |
| 106 | "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.", |
| 107 | "presto-player" |
| 108 | )} |
| 109 | placeholder={"480"} |
| 110 | type="number" |
| 111 | value={stream?.hls_start_level} |
| 112 | onChange={(hls_start_level) => |
| 113 | updateStream({ hls_start_level }) |
| 114 | } |
| 115 | /> |
| 116 | |
| 117 | {<br />} |
| 118 | |
| 119 | <ToggleControl |
| 120 | label={__("Disable Classic Bunny.net Storage", "presto-player")} |
| 121 | help={__( |
| 122 | "This will disable Bunny.net classic storage in your block UI.", |
| 123 | "presto-player" |
| 124 | )} |
| 125 | checked={stream?.disable_legacy_storage} |
| 126 | onChange={(disable_legacy_storage) => |
| 127 | updateStream({ disable_legacy_storage }) |
| 128 | } |
| 129 | /> |
| 130 | |
| 131 | {<br />} |
| 132 | </Fragment> |
| 133 | )} |
| 134 | |
| 135 | <ToggleControl |
| 136 | label={__("Edit Bunny.net Settings", "presto-player")} |
| 137 | help={__( |
| 138 | "Edit Bunny.net connection settings. Only edit this if you know what you're doing.", |
| 139 | "presto-player" |
| 140 | )} |
| 141 | checked={editBunny} |
| 142 | onChange={setEditBunny} |
| 143 | /> |
| 144 | |
| 145 | {!!editBunny && ( |
| 146 | <> |
| 147 | <BunnyStream /> |
| 148 | <BunnyClassic /> |
| 149 | </> |
| 150 | )} |
| 151 | </Group> |
| 152 | </> |
| 153 | ); |
| 154 | }; |
| 155 | |
| 156 | return ( |
| 157 | <Page |
| 158 | title={__("Integrations", "presto-player")} |
| 159 | description={__( |
| 160 | "Third party integrations and connections.", |
| 161 | "presto-player" |
| 162 | )} |
| 163 | > |
| 164 | <Group |
| 165 | title={__("Google Analytics", "presto-player")} |
| 166 | description={__( |
| 167 | "Analytics settings for media plays, watch times and more.", |
| 168 | "presto-player" |
| 169 | )} |
| 170 | disabled={disabled()} |
| 171 | > |
| 172 | <ToggleControl |
| 173 | className="presto-player__setting--google-analytics" |
| 174 | label={__("Enable", "presto-player")} |
| 175 | help={__( |
| 176 | "Send analytics events to your Google Analytics account.", |
| 177 | "presto-player" |
| 178 | )} |
| 179 | checked={analytics?.enable} |
| 180 | onChange={(enable) => updateAnalytics({ enable })} |
| 181 | /> |
| 182 | |
| 183 | <ToggleControl |
| 184 | className="presto-player__setting--use-existing-tag" |
| 185 | label={__("Use existing on-page tag?", "presto-player")} |
| 186 | help={__( |
| 187 | "Should we use an existing google analytics (v4) tag? If not, we'll output one for you.", |
| 188 | "presto-player" |
| 189 | )} |
| 190 | checked={analytics?.use_existing_tag} |
| 191 | onChange={(use_existing_tag) => updateAnalytics({ use_existing_tag })} |
| 192 | /> |
| 193 | |
| 194 | <TextControl |
| 195 | label={__("Measurement ID", "presto-player")} |
| 196 | help={__( |
| 197 | "Enter a Google Analytics Measurement ID, which can be found on your analytics admin page.", |
| 198 | "presto-player" |
| 199 | )} |
| 200 | value={analytics?.measurement_id} |
| 201 | onChange={(measurement_id) => updateAnalytics({ measurement_id })} |
| 202 | /> |
| 203 | </Group> |
| 204 | |
| 205 | <Group |
| 206 | title={__("YouTube", "presto-player")} |
| 207 | description={__("Settings for YouTube videos.", "presto-player")} |
| 208 | > |
| 209 | <ToggleControl |
| 210 | className="presto-player__setting--youtube-nocookie" |
| 211 | label={__("Privacy-Enhanced Mode", "presto-player")} |
| 212 | help={__( |
| 213 | "Embed YouTube videos without using cookies that track viewing behaviour.", |
| 214 | "presto-player" |
| 215 | )} |
| 216 | checked={youtube?.nocookie} |
| 217 | onChange={(nocookie) => updateYoutube({ nocookie })} |
| 218 | /> |
| 219 | |
| 220 | <TextControl |
| 221 | label={__("Channel ID", "presto-player")} |
| 222 | help={ |
| 223 | <div> |
| 224 | {__( |
| 225 | "Enter the ID of your channel to enable Youtube Subscribe button functionality.", |
| 226 | "presto-player" |
| 227 | )}{" "} |
| 228 | <ExternalLink href="https://support.google.com/youtube/answer/3250431?hl=en"> |
| 229 | {__("Find my channel id", "presto-player")} |
| 230 | </ExternalLink> |
| 231 | </div> |
| 232 | } |
| 233 | value={youtube?.channel_id} |
| 234 | onChange={(channel_id) => updateYoutube({ channel_id })} |
| 235 | /> |
| 236 | </Group> |
| 237 | |
| 238 | {showEmailIntegration() && ( |
| 239 | <Group |
| 240 | hideSaveButton={true} |
| 241 | title={__("Email Capture", "presto-player")} |
| 242 | description={__( |
| 243 | "Integrate Presto Player with an email provider for email capture.", |
| 244 | "presto-player" |
| 245 | )} |
| 246 | disabled={disabled()} |
| 247 | > |
| 248 | <ActiveCampaign /> |
| 249 | <FluentCRM /> |
| 250 | <Mailchimp /> |
| 251 | <MailerLite /> |
| 252 | {prestoPlayer?.proVersion && |
| 253 | semverCompare(prestoPlayer?.proVersion, "1.2.0") >= 0 && ( |
| 254 | <Webhooks /> |
| 255 | )} |
| 256 | <EmailExport /> |
| 257 | </Group> |
| 258 | )} |
| 259 | |
| 260 | {!window?.prestoPlayer?.isSetup?.bunny ? ( |
| 261 | <Group> |
| 262 | <CTA |
| 263 | className="presto-player__setting--bunny-cta" |
| 264 | option={{ |
| 265 | name: __("Bunny.net Video", "presto-player"), |
| 266 | help: __( |
| 267 | "To get started with Bunny.net, add a Bunny.net video to your page.", |
| 268 | "presto-player" |
| 269 | ), |
| 270 | type: "cta", |
| 271 | button: { |
| 272 | text: "Learn More", |
| 273 | link: "https://prestoplayer.com/secure-video-with-bunny-net", |
| 274 | target: "_blank", |
| 275 | }, |
| 276 | }} |
| 277 | /> |
| 278 | </Group> |
| 279 | ) : ( |
| 280 | bunnySettings() |
| 281 | )} |
| 282 | </Page> |
| 283 | ); |
| 284 | }; |
| 285 |