Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Video Block: refactor setting panel #67044

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from
+212 −114
Open

Video Block: refactor setting panel #67044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c97a35
chore: convert video panelbody to toolspanel
up1512001 Nov 15, 2024
a631118
chore: move poster methods to its file
up1512001 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 97 additions & 39 deletions packages/block-library/src/video/edit-common-settings.js
View file
Open in desktop
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: false } );
} }
>
<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
Open in desktop
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: false,
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
Loading