/**
* 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 && }
(
{
if (!prestoPlayer?.isPremium) {
dispatch("presto-player/player").setProModal(true);
return;
}
open();
}}
aria-describedby={`video-block__logo-image-description-${instanceId}`}
>
{!branding?.logo
? __("Select", "presto-player")
: __("Replace", "presto-player")}
)}
/>
>
)}
{branding?.logo
? sprintf(
/* translators: %s: poster image URL. */
__("The current logo image url is %s", "presto-player"),
branding?.logo
)
: __(
"There is no logo image currently selected",
"presto-player"
)}
{!!branding?.logo && (
{__("Remove", "presto-player")}
)}
{!!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 && (
{
dispatch("presto-player/player").updateBranding(
"color",
prestoPlayer?.defaults?.color || "#00b3ff"
);
setPickerRender(pickerRender + 1);
}}
>
{__("Reset Color", "presto-player")}
)}
{__("Save Branding", "presto-player")}
);
}
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;
}