parts
5 years ago
ActionBar.js
5 years ago
Behavior.js
5 years ago
CTA.js
5 years ago
Controls.js
5 years ago
Edit.js
5 years ago
Email.js
5 years ago
Preset.js
5 years ago
Preview.js
5 years ago
Style.js
5 years ago
index.js
5 years ago
Preview.js
104 lines
| 1 | const { __ } = wp.i18n; |
| 2 | const { Disabled } = wp.components; |
| 3 | import { PrestoCtaOverlayUi, PrestoEmailOverlayUi } from "@presto-player/react"; |
| 4 | import Player from "../Player"; |
| 5 | const { useState, useEffect } = wp.element; |
| 6 | |
| 7 | export default ({ state, branding, menu }) => { |
| 8 | const [renderKey, setRenderKey] = useState(1); |
| 9 | const { email_collection, cta } = state; |
| 10 | |
| 11 | useEffect(() => { |
| 12 | setRenderKey(renderKey + 1); |
| 13 | }, [ |
| 14 | state.skin, |
| 15 | state["play-large"], |
| 16 | state.rewind, |
| 17 | state.play, |
| 18 | state["fast-forward"], |
| 19 | state.progress, |
| 20 | state["current-time"], |
| 21 | state.mute, |
| 22 | state.volume, |
| 23 | state.speed, |
| 24 | state.pip, |
| 25 | state.fullscreen, |
| 26 | state.captions, |
| 27 | state.hide_logo, |
| 28 | ]); |
| 29 | |
| 30 | const previews = { |
| 31 | email: !!email_collection?.enabled && ( |
| 32 | <PrestoEmailOverlayUi |
| 33 | className="email-overlay" |
| 34 | slot="player-end" |
| 35 | headline={email_collection?.headline} |
| 36 | defaultHeadline={__( |
| 37 | "Enter your email to watch this video.", |
| 38 | "presto-player" |
| 39 | )} |
| 40 | bottomText={email_collection?.bottom_text} |
| 41 | allowSkip={email_collection?.allow_skip} |
| 42 | skipText={__("Skip", "presto-player")} |
| 43 | buttonText={email_collection?.button_text} |
| 44 | placeholder={__("Email address", "presto-player")} |
| 45 | i18n={window.prestoPlayer.i18n} |
| 46 | /> |
| 47 | ), |
| 48 | cta: !!cta?.enabled && ( |
| 49 | <PrestoCtaOverlayUi |
| 50 | className="cta-overlay" |
| 51 | style={{ |
| 52 | "--presto-player-button-border-radius": `${cta.button_radius}px`, |
| 53 | ...(cta?.background_opacity |
| 54 | ? { |
| 55 | "--presto-player-cta-background-opacity": `${ |
| 56 | cta?.background_opacity / 100 |
| 57 | }`, |
| 58 | } |
| 59 | : {}), |
| 60 | ...(cta.button_color |
| 61 | ? { |
| 62 | "--presto-player-button-color": `${cta.button_color}`, |
| 63 | } |
| 64 | : {}), |
| 65 | ...(cta.button_text_color |
| 66 | ? { |
| 67 | "--presto-player-button-text": `${cta.button_text_color}`, |
| 68 | } |
| 69 | : {}), |
| 70 | }} |
| 71 | slot="player-end" |
| 72 | headline={cta?.headline} |
| 73 | bottom-text={cta?.bottom_text} |
| 74 | button-link={cta?.button_link} |
| 75 | allow-skip={cta?.percentage !== 100 && cta?.show_skip} |
| 76 | borderRadius={cta?.border_radius} |
| 77 | allow-rewatch={cta?.percentage === 100 && cta?.show_rewatch} |
| 78 | skip-text={__("Skip", "presto-player")} |
| 79 | show-button={cta?.show_button} |
| 80 | button-text={cta?.button_text} |
| 81 | i18n={window.prestoPlayer.i18n} |
| 82 | /> |
| 83 | ), |
| 84 | }; |
| 85 | |
| 86 | return ( |
| 87 | <Disabled isDisabled={!previews["email"]}> |
| 88 | <div className="presto-player__wrapper"> |
| 89 | <Player |
| 90 | preset={state} |
| 91 | branding={branding} |
| 92 | attributes={{ |
| 93 | chapters: [], |
| 94 | poster: "https://source.unsplash.com/daily", |
| 95 | }} |
| 96 | setAttributes={() => {}} |
| 97 | key={renderKey} |
| 98 | adminPreview={previews[menu]} |
| 99 | /> |
| 100 | </div> |
| 101 | </Disabled> |
| 102 | ); |
| 103 | }; |
| 104 |