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