<commit_before>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import { useCallback } from 'react';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { Media, Row } from '../form';
import { Note, ExpandedTextInput } from './shared';
import { SimplePanel } from './panel';
import { getCommonValue, useCommonObjectValue } from './utils';

const DEFAULT_RESOURCE = { poster: null, title: null, alt: null };

function VideoAccessibilityPanel({ selectedElements, pushUpdate }) {
  const resource = useCommonObjectValue(
    selectedElements,
    'resource',
    DEFAULT_RESOURCE
  );
  const poster = getCommonValue(selectedElements, 'poster') || resource.poster;
  const title = getCommonValue(selectedElements, 'title') || resource.title;
  const alt = getCommonValue(selectedElements, 'alt') || resource.alt;

  const handleChangePoster = useCallback(
    (image) => {
      pushUpdate(
        {
          poster: image.sizes?.medium?.url || image.url,
        },
        true
      );
    },
    [pushUpdate]
  );

  return (
    <SimplePanel
      name="videoAccessibility"
      title={__('Accessibility', 'web-stories')}
    >
      <Row>
        <Media
          value={poster}
          onChange={handleChangePoster}
          title={__('Select as video poster', 'web-stories')}
          buttonInsertText={__('Set as video poster', 'web-stories')}
          type={'image'}
        />
      </Row>
      <Row>
        <ExpandedTextInput
          placeholder={__('Title', 'web-stories')}
          value={title || ''}
          onChange={(value) => pushUpdate({ title: value })}
          clear
        />
      </Row>
      <Row>
        <ExpandedTextInput
          placeholder={__('Assistive text', 'web-stories')}
          value={alt || ''}
          onChange={(value) => pushUpdate({ alt: value })}
          clear
        />
      </Row>
      <Row>
        <Note>{__('Text for visually impaired users.', 'web-stories')}</Note>
      </Row><commit_msg>Change the way videoAccessibility.js resolves an empty string in the text input.<commit_after>/*
 * Copyright 2020 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import { useCallback } from 'react';

/**
 * WordPress dependencies
 */
import { __ } from '@wordpress/i18n';

/**
 * Internal dependencies
 */
import { Media, Row } from '../form';
import { Note, ExpandedTextInput } from './shared';
import { SimplePanel } from './panel';
import { getCommonValue, useCommonObjectValue } from './utils';

const DEFAULT_RESOURCE = { poster: null, title: null, alt: null };

function VideoAccessibilityPanel({ selectedElements, pushUpdate }) {
  const resource = useCommonObjectValue(
    selectedElements,
    'resource',
    DEFAULT_RESOURCE
  );

  const _defaultForUndefined = (s, d) => (s === undefined ? d : s);

  const poster = _defaultForUndefined(
    getCommonValue(selectedElements, 'poster'),
    resource.poster
  );
  const title = _defaultForUndefined(
    getCommonValue(selectedElements, 'title'),
    resource.title
  );
  const alt = _defaultForUndefined(
    getCommonValue(selectedElements, 'alt'),
    resource.alt
  );

  const handleChangePoster = useCallback(
    (image) => {
      pushUpdate(
        {
          poster: image.sizes?.medium?.url || image.url,
        },
        true
      );
    },
    [pushUpdate]
  );

  return (
    <SimplePanel
      name="videoAccessibility"
      title={__('Accessibility', 'web-stories')}
    >
      <Row>
        <Media
          value={poster}
          onChange={handleChangePoster}
          title={__('Select as video poster', 'web-stories')}
          buttonInsertText={__('Set as video poster', 'web-stories')}
          type={'image'}
        />
      </Row>
      <Row>
        <ExpandedTextInput
          placeholder={__('Title', 'web-stories')}
          value={title || ''}
          onChange={(value) => pushUpdate({ title: value || null })}
          clear
        />
      </Row>
      <Row>
        <ExpandedTextInput
          placeholder={__('Assistive text', 'web-stories')}
          value={alt || ''}
          onChange={(value) => pushUpdate({ alt: value || null })}
          clear
        />
      </Row>
      <Row>
        <Note>{__('Text for visually impaired users.', 'web-stories')}</Note>
      </Row>
{'fraction_non_alphanumeric': 0.12944574833002348, 'fraction_numerical': 0.003610760064993681, 'mean_word_length': 2.733153638814016, 'pattern_counts': {'":': 0, '<': 31, '<?xml version=': 0, '>': 38, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2402514', 'n_tokens_mistral': 1545, 'n_tokens_neox': 1532, 'n_words': 451}