Behavior.js
2 years ago
Controls.js
4 years ago
Edit.js
2 weeks ago
Edit.scss
2 weeks ago
Preset.js
4 years ago
Preview.js
3 years ago
Style.js
2 weeks ago
Style.scss
2 weeks ago
index.js
2 weeks ago
index.scss
2 weeks ago
Preview.js
140 lines
| 1 | import { __ } from "@wordpress/i18n"; |
| 2 | import { Disabled } from "@wordpress/components"; |
| 3 | import { PrestoCtaOverlayUi, PrestoEmailOverlayUi } from "@presto-player/components-react"; |
| 4 | import { timeToSeconds } from "../../util"; |
| 5 | import Player from "../Player"; |
| 6 | import { useEffect, useState } from "@wordpress/element"; |
| 7 | |
| 8 | export default ({ |
| 9 | state, |
| 10 | branding, |
| 11 | menu, |
| 12 | src, |
| 13 | poster, |
| 14 | currentTime, |
| 15 | preload, |
| 16 | mediaTitle, |
| 17 | overlays, |
| 18 | isDisabled = true, |
| 19 | }) => { |
| 20 | const [renderKey, setRenderKey] = useState(1); |
| 21 | const { email_collection, cta } = state; |
| 22 | |
| 23 | useEffect(() => { |
| 24 | setRenderKey(renderKey + 1); |
| 25 | }, [ |
| 26 | state.skin, |
| 27 | state["play-large"], |
| 28 | state.rewind, |
| 29 | state.play, |
| 30 | state["fast-forward"], |
| 31 | state.progress, |
| 32 | state["current-time"], |
| 33 | state.mute, |
| 34 | state.volume, |
| 35 | state.speed, |
| 36 | state.pip, |
| 37 | state.fullscreen, |
| 38 | state.captions, |
| 39 | state.hide_logo, |
| 40 | ]); |
| 41 | |
| 42 | const previews = { |
| 43 | email: !!email_collection?.enabled && ( |
| 44 | <PrestoEmailOverlayUi |
| 45 | className="email-overlay" |
| 46 | slot="player-end" |
| 47 | headline={email_collection?.headline} |
| 48 | style={{ |
| 49 | "--presto-player-email-border-radiuss": `${email_collection?.button_radius}px`, |
| 50 | "--plyr-color-main": state?.background_color || branding?.color, |
| 51 | ...(email_collection.button_color |
| 52 | ? { |
| 53 | "--presto-player-button-color": `${email_collection.button_color}`, |
| 54 | } |
| 55 | : {}), |
| 56 | ...(email_collection.button_text_color |
| 57 | ? { |
| 58 | "--presto-player-button-text": `${email_collection.button_text_color}`, |
| 59 | } |
| 60 | : {}), |
| 61 | }} |
| 62 | defaultHeadline={__("Enter your email to play.", "presto-player")} |
| 63 | bottomText={email_collection?.bottom_text} |
| 64 | allowSkip={email_collection?.allow_skip} |
| 65 | skipText={__("Skip", "presto-player")} |
| 66 | buttonText={email_collection?.button_text} |
| 67 | placeholder={__("Email address", "presto-player")} |
| 68 | i18n={window.prestoPlayer.i18n} |
| 69 | type={"audio"} |
| 70 | /> |
| 71 | ), |
| 72 | cta: !!cta?.enabled && ( |
| 73 | <PrestoCtaOverlayUi |
| 74 | className="cta-overlay" |
| 75 | style={{ |
| 76 | "--presto-player-button-border-radius": `${cta.button_radius}px`, |
| 77 | ...(cta?.background_opacity |
| 78 | ? { |
| 79 | "--presto-player-cta-background-opacity": `${ |
| 80 | cta?.background_opacity / 100 |
| 81 | }`, |
| 82 | } |
| 83 | : {}), |
| 84 | ...(cta.button_color |
| 85 | ? { |
| 86 | "--presto-player-button-color": `${cta.button_color}`, |
| 87 | } |
| 88 | : {}), |
| 89 | ...(cta.button_text_color |
| 90 | ? { |
| 91 | "--presto-player-button-text": `${cta.button_text_color}`, |
| 92 | } |
| 93 | : {}), |
| 94 | }} |
| 95 | slot="player-end" |
| 96 | headline={cta?.headline} |
| 97 | bottom-text={cta?.bottom_text} |
| 98 | button-link={cta?.button_link} |
| 99 | allow-skip={cta?.percentage !== 100 && cta?.show_skip} |
| 100 | borderRadius={cta?.border_radius} |
| 101 | allow-rewatch={cta?.percentage === 100 && cta?.show_rewatch} |
| 102 | skip-text={__("Skip", "presto-player")} |
| 103 | show-button={cta?.show_button} |
| 104 | button-text={cta?.button_text} |
| 105 | i18n={window.prestoPlayer.i18n} |
| 106 | type={"audio"} |
| 107 | /> |
| 108 | ), |
| 109 | }; |
| 110 | |
| 111 | return ( |
| 112 | <Disabled isDisabled={isDisabled} className="disable-player"> |
| 113 | <div className="presto-player__wrapper"> |
| 114 | <Player |
| 115 | src={src || "http://something.mp3"} |
| 116 | classes={` |
| 117 | ${menu === "cta" && !!cta?.enabled && "cta-active"} |
| 118 | ${ |
| 119 | menu === "email" && !!email_collection?.enabled && "email-active" |
| 120 | }`} |
| 121 | preset={state} |
| 122 | branding={branding} |
| 123 | i18n={prestoPlayerAdmin?.i18n} |
| 124 | preload={preload} |
| 125 | attributes={{ |
| 126 | chapters: [], |
| 127 | poster: poster, |
| 128 | title: mediaTitle, |
| 129 | }} |
| 130 | type={"audio"} |
| 131 | currentTime={currentTime ? timeToSeconds(currentTime) : ""} |
| 132 | overlays={overlays} |
| 133 | key={renderKey} |
| 134 | adminPreview={previews?.[menu] || ""} |
| 135 | /> |
| 136 | </div> |
| 137 | </Disabled> |
| 138 | ); |
| 139 | }; |
| 140 |