/** * WordPress dependencies */ const { __ } = wp.i18n; const { ColorPicker, Button, withNotices, BaseControl, RangeControl, } = wp.components; const { MediaUpload, MediaUploadCheck } = wp.blockEditor; const { useInstanceId } = wp.compose; const { useState } = wp.element; const { dispatch, useSelect } = wp.data; import ProBadge from "@/admin/blocks/shared/components/ProBadge"; const VIDEO_LOGO_ALLOWED_MEDIA_TYPES = ["image"]; function PlayerSettings({ setAttributes, attributes, type }) { const instanceId = useInstanceId(PlayerSettings); const [pickerRender, setPickerRender] = useState(1); // get branding options const branding = useSelect((select) => { return select("presto-player/player").branding(); }); // save options const saveOptions = async () => { await dispatch("presto-player/player").saveOptions({ branding, }); wp.data.dispatch("core/notices").createNotice( "success", // Can be one of: success, info, warning, error. "Player branding saved.", // Text string to display. { type: "snackbar", isDismissible: true, // Whether the user can dismiss the notice. // Any actions the user can perform. } ); }; function onSelectLogo(image) { dispatch("presto-player/player").updateBranding("logo", image.url); } function onRemoveLogo() { dispatch("presto-player/player").updateBranding("logo", ""); } return (
{type !== "audio" && (

{__( "Here you can select the global player branding This will apply to all players on the site.", "presto-player" )}

)} {type !== "audio" && ( <>

{__("Logo Overlay", "presto-player")}{" "} {!prestoPlayer?.isPremium && }

( )} /> )} {!!branding?.logo && ( )}
{!!branding?.logo && ( dispatch("presto-player/player").updateBranding("logo_width", width) } min={1} max={400} /> )} { dispatch("presto-player/player").updateBranding("color", value.hex); }} key={pickerRender} disableAlpha /> {branding?.color && ( )}
); } export default withNotices(PlayerSettings); html, body { font-size: 14px; font-family: "DM Sans", "Roboto", sans-serif !important; font-weight: 400; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .btn { &--cta { text-transform: uppercase; font-weight: 500; padding-left: 2.3rem; padding-right: 2.3rem; } } .primary-header { color: var(--primaryText); &--grey { color: var(--ligth-text); } font-weight: 700; margin-bottom: 1rem; text-align: center; } .secondary-header { margin-bottom: 1rem; text-align: center; } h1, .h1 { font-size: 24px; line-height: 32px; font-weight: 700; } h2, .h2 { font-size: 20px; line-height: 32px; font-weight: 700; } h3, .h3 { font-size: 16px; line-height: 24px; font-weight: 700; } h4, .h4, .h-button, .btn, button { font-size: 14px; line-height: 24px; font-weight: 700; } body, li, p { font-size: 14px; line-height: 24px; font-weight: 400; margin: 0; } .helper-text { font-size: 12px; line-height: 20px; font-weight: 400; } p { color: var(--secondaryText); } b, strong { font-weight: bold; } a { color: var(--primary); &:hover { color: var(--primary); } } .link-disabled { color: var(--ligth-text); } .text-warning-dark, a.text-warning-dark { color: var(--warning-dark) !important; &:hover { color: var(--warning-dark) !important; } } .text-warning-light, a.text-warning-light { color: var(--warning-light) !important; &:hover { color: var(--warning-light) !important; } } .text-success-light, a.text-success-light { color: var(--success-light) !important; &:hover { color: var(--success-light) !important; } } .text-success-dark, a.text-success-dark { color: var(--success-dark) !important; &:hover { color: var(--success-dark) !important; } } .text-danger-light, a.text-danger-light { color: var(--danger-light) !important; &:hover { color: var(--danger-light) !important; } } .text-header-bg, a.text-header-bg { color: var(--header-bg) !important; &:hover { color: var(--header-bg) !important; } } .text-gray-light, a.text-gray-light { color: var(--gray-light) !important; &:hover { color: var(--gray-dark) !important; } } .text-gray { color: var(--gray) !important; } a.text-gray { color: var(--gray) !important; &:hover { color: var(--gray-dark) !important; } } .text-black, a.text-black { color: var(--dark) !important; &:hover { color: var(--dark) !important; } } .text-dark, a.text-dark { color: var(--dark) !important; &:hover { color: var(--dark) !important; } } .text-light, a.text-light { color: var(--light) !important; &:hover { color: var(--light) !important; } } .text-danger, a.text-danger { color: var(--danger) !important; &:hover { color: var(--danger) !important; } } .text-warning-regular, a.text-warning-regular { color: var(--warning-regular) !important; &:hover { color: var(--warning-regular) !important; } } .text-warning, a.text-warning { color: var(--warning) !important; &:hover { color: var(--warning) !important; } } .text-info, a.text-info { color: var(--primary-hostinger) !important; &:hover { color: var(--primary-hostinger) !important; } } .text-success, a.text-success { color: var(--success) !important; &:hover { color: var(--success) !important; } } .text-header-text, a.text-header-text { color: var(--header-text) !important; &:hover { color: var(--header-text) !important; } } .text-secondary, a.text-secondary { color: var(--secondary) !important; &:hover { color: var(--secondary) !important; } } .text-primary, a.text-primary { color: var(--primary) !important; &:hover { color: var(--primary) !important; } } .text-primary-light, a.text-primary-light { color: var(--primary-light) !important; &:hover { color: var(--primary-light) !important; } } .text-meteorite-dark, a.text-meteorite-dark { color: var(--meteorite-dark) !important; &:hover { color: var(--meteorite-dark) !important; } } .text-title-1 { font-size: 40px; font-weight: 700; line-height: 48px; } .text-title-2 { font-size: 36px; font-weight: 700; line-height: 40px; } .text-title-3 { font-size: 32px; font-style: normal; font-weight: 700; } .text-heading-1 { font-size: 24px; font-weight: 700; line-height: 32px; } .text-heading-2 { font-size: 20px; font-weight: 700; line-height: 32px; } .text-heading-3 { font-size: 16px; font-weight: 700; line-height: 24px; } .text-bold-1 { font-size: 16px; font-weight: 700; line-height: 24px; } .text-bold-2 { font-size: 14px; font-weight: 700; line-height: 24px; } .text-bold-3 { font-size: 12px; font-weight: 700; line-height: 20px; } .text-body-1 { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--text_gray); } .text-body-2 { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--text_gray); } .text-body-3 { font-size: 12px; font-weight: 400; line-height: 20px; color: var(--text_gray); } .text-button-1 { font-size: 16px; font-weight: 700; line-height: 24px; } .text-button-2 { font-size: 14px; font-weight: 700; line-height: 24px; } .text-button-3 { font-size: 12px; font-weight: 700; line-height: 20px; } .text-crossed-1 { font-size: 14px; font-weight: 400; line-height: 24px; text-decoration: line-through; } .text-crossed-2 { font-size: 12px; font-weight: 400; line-height: 20px; text-decoration: line-through; } .text-caption { font-size: 12px; font-weight: 400; line-height: 12px; } .text-overline { font-size: 12px; font-weight: 700; line-height: 16px; text-transform: uppercase; } .text-link-1 { font-size: 16px; font-weight: 400; line-height: 24px; color: var(--primary); text-decoration: underline; } .text-link-2 { font-size: 14px; font-weight: 400; line-height: 24px; color: var(--primary); text-decoration: underline; } .text-link-3 { font-size: 12px; font-weight: 400; line-height: 20px; color: var(--primary); text-decoration: underline; }
Read More