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: Watermark.js

/**
 * WordPress dependencies
 */
const { __ } = wp.i18n;

const {
  ToggleControl,
  BaseControl,
  RadioControl,
  Flex,
  RangeControl,
} = wp.components;

const { useEffect } = wp.element;

import DynamicText from "../overlays/components/DynamicText";

import ColorPopup from "../components/ColorPopup";

export default ({ state, updateState, className }) => {
  const { watermark } = state;

const updateWatermarkState = (updated) => {
    updateState({
      ...state,
      watermark: {
        ...watermark,
        ...updated,
      },
    });
  };

return (
    <div className={className}>
      <BaseControl>
        <h3>{__("Dynamic Watermark Text", "presto-player")}</h3>
      </BaseControl>
      <BaseControl className="presto-player__control--watermark">
        <ToggleControl
          label={__("Enable", "presto-player")}
          help={__(
            "Add a simulated dynamic watermark over your video.",
            "presto-player"
          )}
          onChange={(enabled) => {
            updateWatermarkState({
              enabled,
            });
          }}
          checked={watermark?.enabled}
        />
      </BaseControl>

{watermark?.enabled && (
        <div>
          <DynamicText
            text={watermark?.text}
            update={({ text }) => {
              updateWatermarkState({
                text,
              });
            }}
          />

<BaseControl className={className}>
            <RadioControl
              label={__("Position", "presto-player")}
              options={[
                { label: __("Top Right", "presto-player"), value: "top-right" },
                { label: __("Top Left", "presto-player"), value: "top-left" },
                {
                  label: __("Change Every 10 Seconds", "presto-player"),
                  value: "randomize",
                },
              ]}
              selected={watermark?.position || "top-right"}
              onChange={(position) =>
                updateWatermarkState({
                  position,
                })
              }
            />
          </BaseControl>

<BaseControl className="presto-player__control-text-color">
            <Flex>
              <BaseControl.VisualLabel>
                {__("Text Color", "presto-player")}
              </BaseControl.VisualLabel>
              <ColorPopup
                color={watermark?.color || "#fff"}
                setColor={(value) =>
                  updateWatermarkState({
                    color: value && value.hex,
                  })
                }
              />
            </Flex>
          </BaseControl>

<BaseControl className="presto-player__control-text-color">
            <Flex>
              <BaseControl.VisualLabel>
                {__("Background Color", "presto-player")}
              </BaseControl.VisualLabel>
              <ColorPopup
                color={watermark?.backgroundColor || "#333"}
                setColor={(value) =>
                  updateWatermarkState({
                    backgroundColor: value && value.hex,
                  })
                }
              />
            </Flex>
          </BaseControl>

<BaseControl>
            <RangeControl
              label={__("Opacity", "presto-player")}
              help={__("Opacity percentage of the watermark.", "presto-player")}
              value={watermark?.opacity || 100}
              onChange={(opacity) => updateWatermarkState({ opacity })}
              min={0}
              max={100}
            />
          </BaseControl>
        </div>
      )}
    </div>
  );
};