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