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