| 1 | {"version":3,"sources":["@wordpress/block-library/src/media-text/media-container.js"],"names":["ALLOWED_MEDIA_TYPES","MediaContainer","props","mediaId","onSelectMedia","open","mediaAlt","mediaUrl","className","renderToolbarEditButton","icon","title","mediaPosition","mediaType","mediaWidth","commitWidthChange","onWidthChange","onResize","event","direction","elt","parseInt","style","width","onResizeStop","enablePositions","right","left","mediaElement","renderImage","renderVideo","renderPlaceholder","Component"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { IconButton, ResizableBox, Toolbar } from '@wordpress/components';\nimport {\n\tBlockControls,\n\tBlockIcon,\n\tMediaPlaceholder,\n\tMediaUpload,\n} from '@wordpress/block-editor';\nimport { Component, Fragment } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport icon from './media-container-icon';\n\n/**\n * Constants\n */\nconst ALLOWED_MEDIA_TYPES = [ 'image', 'video' ];\n\nclass MediaContainer extends Component {\n\trenderToolbarEditButton() {\n\t\tconst { mediaId, onSelectMedia } = this.props;\n\t\treturn (\n\t\t\t<BlockControls>\n\t\t\t\t<Toolbar>\n\t\t\t\t\t<MediaUpload\n\t\t\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t\t\t\tvalue={ mediaId }\n\t\t\t\t\t\trender={ ( { open } ) => (\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\tclassName=\"components-toolbar__control\"\n\t\t\t\t\t\t\t\tlabel={ __( 'Edit media' ) }\n\t\t\t\t\t\t\t\ticon=\"edit\"\n\t\t\t\t\t\t\t\tonClick={ open }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t/>\n\t\t\t\t</Toolbar>\n\t\t\t</BlockControls>\n\t\t);\n\t}\n\n\trenderImage() {\n\t\tconst { mediaAlt, mediaUrl, className } = this.props;\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t{ this.renderToolbarEditButton() }\n\t\t\t\t<figure className={ className }>\n\t\t\t\t\t<img src={ mediaUrl } alt={ mediaAlt } />\n\t\t\t\t</figure>\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\trenderVideo() {\n\t\tconst { mediaUrl, className } = this.props;\n\t\treturn (\n\t\t\t<Fragment>\n\t\t\t\t{ this.renderToolbarEditButton() }\n\t\t\t\t<figure className={ className }>\n\t\t\t\t\t<video controls src={ mediaUrl } />\n\t\t\t\t</figure>\n\t\t\t</Fragment>\n\t\t);\n\t}\n\n\trenderPlaceholder() {\n\t\tconst { onSelectMedia, className } = this.props;\n\t\treturn (\n\t\t\t<MediaPlaceholder\n\t\t\t\ticon={ <BlockIcon icon={ icon } /> }\n\t\t\t\tlabels={ {\n\t\t\t\t\ttitle: __( 'Media area' ),\n\t\t\t\t} }\n\t\t\t\tclassName={ className }\n\t\t\t\tonSelect={ onSelectMedia }\n\t\t\t\taccept=\"image/*,video/*\"\n\t\t\t\tallowedTypes={ ALLOWED_MEDIA_TYPES }\n\t\t\t/>\n\t\t);\n\t}\n\n\trender() {\n\t\tconst { mediaPosition, mediaUrl, mediaType, mediaWidth, commitWidthChange, onWidthChange } = this.props;\n\t\tif ( mediaType && mediaUrl ) {\n\t\t\tconst onResize = ( event, direction, elt ) => {\n\t\t\t\tonWidthChange( parseInt( elt.style.width ) );\n\t\t\t};\n\t\t\tconst onResizeStop = ( event, direction, elt ) => {\n\t\t\t\tcommitWidthChange( parseInt( elt.style.width ) );\n\t\t\t};\n\t\t\tconst enablePositions = {\n\t\t\t\tright: mediaPosition === 'left',\n\t\t\t\tleft: mediaPosition === 'right',\n\t\t\t};\n\n\t\t\tlet mediaElement = null;\n\t\t\tswitch ( mediaType ) {\n\t\t\t\tcase 'image':\n\t\t\t\t\tmediaElement = this.renderImage();\n\t\t\t\t\tbreak;\n\t\t\t\tcase 'video':\n\t\t\t\t\tmediaElement = this.renderVideo();\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t\treturn (\n\t\t\t\t<ResizableBox\n\t\t\t\t\tclassName=\"editor-media-container__resizer\"\n\t\t\t\t\tsize={ { width: mediaWidth + '%' } }\n\t\t\t\t\tminWidth=\"10%\"\n\t\t\t\t\tmaxWidth=\"100%\"\n\t\t\t\t\tenable={ enablePositions }\n\t\t\t\t\tonResize={ onResize }\n\t\t\t\t\tonResizeStop={ onResizeStop }\n\t\t\t\t\taxis=\"x\"\n\t\t\t\t>\n\t\t\t\t\t{ mediaElement }\n\t\t\t\t</ResizableBox>\n\t\t\t);\n\t\t}\n\t\treturn this.renderPlaceholder();\n\t}\n}\n\nexport default MediaContainer;\n"]} |