audioPresets
4 years ago
branding
4 years ago
chapters
5 years ago
components
5 years ago
media
5 years ago
overlays
4 years ago
presets
4 years ago
services
4 years ago
settings
4 years ago
styles
5 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
Player.js
155 lines
| 1 | import { PrestoPlayer } from "@presto-player/react"; |
| 2 | import { getProvider } from "../util"; |
| 3 | const { useSelect } = wp.data; |
| 4 | |
| 5 | export default ({ |
| 6 | src, |
| 7 | classes, |
| 8 | preset, |
| 9 | branding, |
| 10 | attributes, |
| 11 | adminPreview, |
| 12 | currentTime, |
| 13 | preload = "metadata", |
| 14 | overlays, |
| 15 | type, |
| 16 | }) => { |
| 17 | const { chapters, mutedOverlay, mutedPreview } = attributes; |
| 18 | |
| 19 | const youtube = useSelect((select) => { |
| 20 | return select("presto-player/player")?.youtube(); |
| 21 | }); |
| 22 | |
| 23 | const css = useSelect((select) => { |
| 24 | return select("presto-player/player")?.playerCSS(); |
| 25 | }); |
| 26 | |
| 27 | const convertHex = (hexCode, opacity = 1) => { |
| 28 | var hex = hexCode.replace("#", ""); |
| 29 | |
| 30 | if (hex.length === 3) { |
| 31 | hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2]; |
| 32 | } |
| 33 | |
| 34 | var r = parseInt(hex.substring(0, 2), 16), |
| 35 | g = parseInt(hex.substring(2, 4), 16), |
| 36 | b = parseInt(hex.substring(4, 6), 16); |
| 37 | |
| 38 | /* Backward compatibility for whole number based opacity values. */ |
| 39 | if (opacity > 1 && opacity <= 100) { |
| 40 | opacity = opacity / 100; |
| 41 | } |
| 42 | |
| 43 | return "rgba(" + r + "," + g + "," + b + "," + opacity + ")"; |
| 44 | }; |
| 45 | |
| 46 | const mutedOverlayContent = () => { |
| 47 | return ( |
| 48 | <div |
| 49 | className="presto-player__overlay is-image" |
| 50 | style={{ |
| 51 | position: "absolute", |
| 52 | width: `${mutedOverlay?.width || 100}%`, |
| 53 | left: `${(mutedOverlay?.focalPoint?.x || 0.5) * 100}%`, |
| 54 | top: `${(mutedOverlay?.focalPoint?.y || 0.5) * 100}%`, |
| 55 | }} |
| 56 | > |
| 57 | <img |
| 58 | src={mutedOverlay?.src} |
| 59 | style={{ |
| 60 | transform: "translateX(-50%) translateY(-50%)", |
| 61 | }} |
| 62 | /> |
| 63 | </div> |
| 64 | ); |
| 65 | }; |
| 66 | |
| 67 | return ( |
| 68 | <div |
| 69 | className={"wp-block-video presto-block-video"} |
| 70 | style={ |
| 71 | type === "audio" |
| 72 | ? { |
| 73 | "--presto-player-border-radius": `${preset?.border_radius}px`, |
| 74 | ...(preset?.background_color |
| 75 | ? { |
| 76 | "--plyr-audio-controls-background": preset.background_color, |
| 77 | } |
| 78 | : { "--plyr-audio-controls-background": branding?.color }), |
| 79 | ...(preset?.control_color |
| 80 | ? { |
| 81 | "--plyr-audio-control-color": preset.control_color, |
| 82 | "--plyr-range-thumb-background": preset.control_color, |
| 83 | "--plyr-range-fill-background": preset.control_color, |
| 84 | "--plyr-audio-progress-buffered-background": convertHex( |
| 85 | preset.control_color || branding?.color || "#00b3ff", |
| 86 | 0.5 |
| 87 | ), |
| 88 | } |
| 89 | : { |
| 90 | "--plyr-audio-control-color": "#ffffff", |
| 91 | "--plyr-range-thumb-background": "#ffffff", |
| 92 | "--plyr-range-fill-background": "#ffffff", |
| 93 | }), |
| 94 | "--plyr-range-thumb-shadow": `0px`, |
| 95 | } |
| 96 | : { |
| 97 | "--presto-player-border-radius": `${preset?.border_radius}px`, |
| 98 | ...(preset?.caption_background |
| 99 | ? { "--plyr-captions-background": preset.caption_background } |
| 100 | : {}), |
| 101 | ...(branding?.color |
| 102 | ? { "--plyr-color-main": branding.color } |
| 103 | : {}), |
| 104 | "--presto-player-email-border-radius": `${ |
| 105 | preset?.email_collection?.border_radius || 0 |
| 106 | }px`, |
| 107 | "--presto-player-logo-width": `${branding?.logo_width || 75}px`, |
| 108 | } |
| 109 | } |
| 110 | > |
| 111 | <PrestoPlayer |
| 112 | src={src} |
| 113 | css={css} |
| 114 | classes={classes} |
| 115 | currentTime={currentTime} |
| 116 | overlays={overlays} |
| 117 | isAdmin={true} |
| 118 | preload={preload} |
| 119 | preset={preset} |
| 120 | bunny={{ |
| 121 | thumbnail: attributes?.previewThumbnail, |
| 122 | preview: attributes?.preview, |
| 123 | }} |
| 124 | youtube={{ |
| 125 | channelId: youtube?.channel_id, |
| 126 | }} |
| 127 | tracks={ |
| 128 | !!preset?.captions && [ |
| 129 | { |
| 130 | kind: "captions", |
| 131 | label: "English", |
| 132 | srclang: "en", |
| 133 | src: "/path/to/captions.en.vtt", |
| 134 | default: true, |
| 135 | }, |
| 136 | ] |
| 137 | } |
| 138 | branding={branding} |
| 139 | chapters={chapters} |
| 140 | blockAttributes={attributes} |
| 141 | poster={attributes.poster} |
| 142 | provider={type === "audio" ? "audio" : getProvider(src)} |
| 143 | mediaTitle={attributes.title} |
| 144 | > |
| 145 | <div slot="player-end"> |
| 146 | {mutedPreview?.enabled && |
| 147 | mutedOverlay?.enabled && |
| 148 | mutedOverlayContent()} |
| 149 | {adminPreview} |
| 150 | </div> |
| 151 | </PrestoPlayer> |
| 152 | </div> |
| 153 | ); |
| 154 | }; |
| 155 |