Geforce File Manager

NAME	SIZE	ACTIONS
📁 parts		[ DEL ]
📄 ActionBar.js	9,233 B	[ EDIT ] \| [ DEL ]
📄 Behavior.js	5,564 B	[ EDIT ] \| [ DEL ]
📄 CTA.js	10,729 B	[ EDIT ] \| [ DEL ]
📄 Controls.js	4,779 B	[ EDIT ] \| [ DEL ]
📄 Edit.js	10,235 B	[ EDIT ] \| [ DEL ]
📄 Email.js	7,520 B	[ EDIT ] \| [ DEL ]
📄 Preset.js	6,565 B	[ EDIT ] \| [ DEL ]
📄 Search.js	3,832 B	[ EDIT ] \| [ DEL ]
📄 Style.js	2,114 B	[ EDIT ] \| [ DEL ]
📄 Watermark.js	4,043 B	[ EDIT ] \| [ DEL ]
📄 index.js	3,615 B	[ EDIT ] \| [ DEL ]

[ CLOSE ]

EDIT: Style.js

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;
const { ToggleControl, BaseControl, RangeControl, SelectControl, ColorPicker } =
  wp.components;
import { css, jsx } from "@emotion/core";

export default function ({ state, updateState, className }) {
  return (
    <div className={className}>
      <BaseControl>
        <h3>{__("Style", "presto-player")}</h3>
      </BaseControl>
      <BaseControl>
        <ToggleControl
          label={__("Hide Logo", "presto-player")}
          help={__("Hides the logo on this video.", "presto-player")}
          onChange={(hide_logo) => {
            updateState({ hide_logo });
          }}
          checked={state.hide_logo}
        />
      </BaseControl>
      <BaseControl>
        <RangeControl
          label={__("Round Corners", "presto-player")}
          help={__("Player border radius size.", "presto-player")}
          value={state?.border_radius || 0}
          onChange={(border_radius) => updateState({ border_radius })}
          min={0}
          max={25}
          css={css`
            padding-left: 4px;
            .components-range-control__root {
              align-items: flex-start;
            }
          `}
        />
      </BaseControl>

<BaseControl>
        <SelectControl
          label={__("Caption Style", "presto-player")}
          labelPosition="top"
          value={state?.caption_style}
          options={[
            { label: __("Default", "presto-player"), value: "default" },
            { label: __("Full", "presto-player"), value: "full" },
          ]}
          onChange={(caption_style) => {
            updateState({ caption_style });
          }}
        />
      </BaseControl>
      <BaseControl>
        <BaseControl.VisualLabel>
          <p>{__("Caption Background", "presto-player")}</p>
        </BaseControl.VisualLabel>

<ColorPicker
          color={state?.caption_background || "#000000"}
          onChangeComplete={(value) => {
            updateState({ caption_background: value.hex });
          }}
          disableAlpha
        />
      </BaseControl>
    </div>
  );
}