Skip to content

Commit

Permalink
Video Block: refactor setting panel (#67044)
Browse files Browse the repository at this point in the history 
Co-authored-by: up1512001 <[email protected]>
Co-authored-by: aaronrobertshaw <[email protected]>
Co-authored-by: t-hamano <[email protected]>
  • Loading branch information
@up1512001 @aaronrobertshaw @t-hamano
4 people authored Dec 27, 2024
1 parent a65c1be commit b4424d8
Show file tree
Hide file tree
Showing 3 changed files with 212 additions and 114 deletions.
136 changes: 97 additions & 39 deletions packages/block-library/src/video/edit-common-settings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,11 @@
* WordPress dependencies
*/
import { __, _x } from '@wordpress/i18n';
import { ToggleControl, SelectControl } from '@wordpress/components';
import {
ToggleControl,
SelectControl,
__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { useMemo, useCallback, Platform } from '@wordpress/element';

const options = [
Expand Down Expand Up @@ -47,50 +51,104 @@ const VideoSettings = ( { setAttributes, attributes } ) => {

return (
<>
<ToggleControl
__nextHasNoMarginBottom
<ToolsPanelItem
label={ __( 'Autoplay' ) }
onChange={ toggleFactory.autoplay }
checked={ !! autoplay }
help={ getAutoplayHelp }
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! autoplay }
onDeselect={ () => {
setAttributes( { autoplay: false } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Autoplay' ) }
onChange={ toggleFactory.autoplay }
checked={ !! autoplay }
help={ getAutoplayHelp }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Loop' ) }
onChange={ toggleFactory.loop }
checked={ !! loop }
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! loop }
onDeselect={ () => {
setAttributes( { loop: false } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Loop' ) }
onChange={ toggleFactory.loop }
checked={ !! loop }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Muted' ) }
onChange={ toggleFactory.muted }
checked={ !! muted }
/>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! muted }
onDeselect={ () => {
setAttributes( { muted: false } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Muted' ) }
onChange={ toggleFactory.muted }
checked={ !! muted }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Playback controls' ) }
onChange={ toggleFactory.controls }
checked={ !! controls }
/>
<ToggleControl
__nextHasNoMarginBottom
/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
isShownByDefault
hasValue={ () => ! controls }
onDeselect={ () => {
setAttributes( { controls: true } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Playback controls' ) }
onChange={ toggleFactory.controls }
checked={ !! controls }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Play inline' ) }
onChange={ toggleFactory.playsInline }
checked={ !! playsInline }
help={ __(
'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
) }
/>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
isShownByDefault
hasValue={ () => !! playsInline }
onDeselect={ () => {
setAttributes( { playsInline: false } );
} }
>
<ToggleControl
__nextHasNoMarginBottom
/* translators: Setting to play videos within the webpage on mobile browsers rather than opening in a fullscreen player. */
label={ __( 'Play inline' ) }
onChange={ toggleFactory.playsInline }
checked={ playsInline }
help={ __(
'When enabled, videos will play directly within the webpage on mobile browsers, instead of opening in a fullscreen player.'
) }
/>
</ToolsPanelItem>
<ToolsPanelItem
label={ __( 'Preload' ) }
value={ preload }
onChange={ onChangePreload }
options={ options }
hideCancelButton
/>
isShownByDefault
hasValue={ () => preload !== 'metadata' }
onDeselect={ () => {
setAttributes( { preload: 'metadata' } );
} }
>
<SelectControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Preload' ) }
value={ preload }
onChange={ onChangePreload }
options={ options }
hideCancelButton
/>
</ToolsPanelItem>
</>
);
};
Expand Down
104 changes: 29 additions & 75 deletions packages/block-library/src/video/edit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,21 @@ import clsx from 'clsx';
*/
import { isBlobURL } from '@wordpress/blob';
import {
BaseControl,
Button,
Disabled,
PanelBody,
Spinner,
Placeholder,
__experimentalToolsPanel as ToolsPanel,
} from '@wordpress/components';
import {
BlockControls,
BlockIcon,
InspectorControls,
MediaPlaceholder,
MediaUpload,
MediaUploadCheck,
MediaReplaceFlow,
useBlockProps,
} from '@wordpress/block-editor';
import { useRef, useEffect, useState } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { __ } from '@wordpress/i18n';
import { useInstanceId } from '@wordpress/compose';
import { useDispatch } from '@wordpress/data';
import { video as icon } from '@wordpress/icons';
Expand All @@ -35,15 +31,18 @@ import { store as noticesStore } from '@wordpress/notices';
/**
* Internal dependencies
*/
import PosterImage from './poster-image';
import { createUpgradedEmbedBlock } from '../embed/util';
import { useUploadMediaFromBlobURL } from '../utils/hooks';
import {
useUploadMediaFromBlobURL,
useToolsPanelDropdownMenuProps,
} from '../utils/hooks';
import VideoCommonSettings from './edit-common-settings';
import TracksEditor from './tracks-editor';
import Tracks from './tracks';
import { Caption } from '../utils/caption';

const ALLOWED_MEDIA_TYPES = [ 'video' ];
const VIDEO_POSTER_ALLOWED_MEDIA_TYPES = [ 'image' ];

function VideoEdit( {
isSelected: isSingleSelected,
Expand All @@ -55,9 +54,9 @@ function VideoEdit( {
} ) {
const instanceId = useInstanceId( VideoEdit );
const videoPlayer = useRef();
const posterImageButton = useRef();
const { id, controls, poster, src, tracks } = attributes;
const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
const dropdownMenuProps = useToolsPanelDropdownMenuProps();

useUploadMediaFromBlobURL( {
url: temporaryURL,
Expand Down Expand Up @@ -174,19 +173,6 @@ function VideoEdit( {
);
}

function onSelectPoster( image ) {
setAttributes( { poster: image.url } );
}

function onRemovePoster() {
setAttributes( { poster: undefined } );

// Move focus back to the Media Upload button.
posterImageButton.current.focus();
}

const videoPosterDescription = `video-block__poster-image-description-${ instanceId }`;

return (
<>
{ isSingleSelected && (
Expand Down Expand Up @@ -214,63 +200,31 @@ function VideoEdit( {
</>
) }
<InspectorControls>
<PanelBody title={ __( 'Settings' ) }>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
autoplay: false,
controls: true,
loop: false,
muted: false,
playsInline: false,
preload: 'metadata',
poster: '',
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<VideoCommonSettings
setAttributes={ setAttributes }
attributes={ attributes }
/>
<MediaUploadCheck>
<div className="editor-video-poster-control">
<BaseControl.VisualLabel>
{ __( 'Poster image' ) }
</BaseControl.VisualLabel>
<MediaUpload
title={ __( 'Select poster image' ) }
onSelect={ onSelectPoster }
allowedTypes={
VIDEO_POSTER_ALLOWED_MEDIA_TYPES
}
render={ ( { open } ) => (
<Button
__next40pxDefaultSize
variant="primary"
onClick={ open }
ref={ posterImageButton }
aria-describedby={
videoPosterDescription
}
>
{ ! poster
? __( 'Select' )
: __( 'Replace' ) }
</Button>
) }
/>
<p id={ videoPosterDescription } hidden>
{ poster
? sprintf(
/* translators: %s: poster image URL. */
__(
'The current poster image url is %s'
),
poster
)
: __(
'There is no poster image currently selected'
) }
</p>
{ !! poster && (
<Button
__next40pxDefaultSize
onClick={ onRemovePoster }
variant="tertiary"
>
{ __( 'Remove' ) }
</Button>
) }
</div>
</MediaUploadCheck>
</PanelBody>
<PosterImage
poster={ poster }
setAttributes={ setAttributes }
instanceId={ instanceId }
/>
</ToolsPanel>
</InspectorControls>
<figure { ...blockProps }>
{ /*
Expand Down
Loading

1 comment on commit b4424d8

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in b4424d8.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12514225769
📝 Reported issues:

Please sign in to comment.