| 1 | {"version":3,"sources":["@wordpress/block-library/src/media-text/media-container.js"],"names":["IconButton","ResizableBox","Toolbar","BlockControls","BlockIcon","MediaPlaceholder","MediaUpload","Component","Fragment","__","icon","ALLOWED_MEDIA_TYPES","MediaContainer","props","mediaId","onSelectMedia","open","mediaAlt","mediaUrl","className","renderToolbarEditButton","title","mediaPosition","mediaType","mediaWidth","commitWidthChange","onWidthChange","onResize","event","direction","elt","parseInt","style","width","onResizeStop","enablePositions","right","left","mediaElement","renderImage","renderVideo","renderPlaceholder"],"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"]} |