Skip to content

Commit

Permalink
Merge pull request #1155 from Automattic/add/amp_media_blocks
Browse files Browse the repository at this point in the history 
[Gutenberg] Add AMP media blocks
  • Loading branch information
@westonruter
westonruter authored May 23, 2018
2 parents a4dca62 + f9bbe30 commit 91108da
Show file tree
Hide file tree
Showing 10 changed files with 1,197 additions and 6 deletions.
183 changes: 183 additions & 0 deletions blocks/amp-brid-player/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
/**
* Internal block libraries.
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const {
PanelBody,
TextControl,
SelectControl,
Placeholder,
ToggleControl
} = wp.components;

/**
* Register block.
*/
export default registerBlockType(
'amp/amp-brid-player',
{
title: __( 'AMP Brid Player' ),
description: __( 'Displays the Brid Player used in Brid.tv Video Platform.' ),
category: 'common',
icon: 'embed-generic',
keywords: [
__( 'Embed' )
],

attributes: {
autoPlay: {
default: false
},
dataPartner: {
type: 'number'
},
dataPlayer: {
type: 'number'
},
dataVideo: {
type: 'number'
},
dataPlaylist: {
type: 'number'
},
dataOutstream: {
type: 'number'
},
layout: {
type: 'string',
default: 'responsive'
},
width: {
type: 'number',
default: 600
},
height: {
type: 'number',
default: 400
}
},

edit( { attributes, isSelected, setAttributes } ) {
const { autoPlay, dataPartner, dataPlayer, dataVideo, dataPlaylist, dataOutstream, layout, height, width } = attributes;
const ampLayoutOptions = [
{ value: 'responsive', label: __( 'Responsive' ) },
{ value: 'fixed-height', label: __( 'Fixed height' ) },
{ value: 'fixed', label: __( 'Fixed' ) },
{ value: 'fill', label: __( 'Fill' ) },
{ value: 'flex-item', label: __( 'Flex-item' ) },
{ value: 'nodisplay', label: __( 'No Display' ) }

];
let url = false;
if ( dataPartner && dataPlayer && ( dataVideo || dataPlaylist || dataOutstream ) ) {
url = `http://cdn.brid.tv/live/partners/${dataPartner}`;
}
return (
<Fragment>
{
isSelected && (
<InspectorControls key='inspector'>
<PanelBody title={ __( 'Brid Player Settings' ) }>
<TextControl
label={ __( 'Brid.tv partner ID (required)' ) }
value={ dataPartner }
onChange={ value => ( setAttributes( { dataPartner: value } ) ) }
/>
<TextControl
label={ __( 'Brid.tv player ID (required)' ) }
value={ dataPlayer }
onChange={ value => ( setAttributes( { dataPlayer: value } ) ) }
/>
<TextControl
label={ __( 'Video ID (one of video / playlist / outstream ID is required)' ) }
value={ dataVideo }
onChange={ value => ( setAttributes( { dataVideo: value } ) ) }
/>
<TextControl
label={ __( 'Outstream unit ID (one of video / playlist / outstream ID is required)' ) }
value={ dataOutstream }
onChange={ value => ( setAttributes( { dataOutstream: value } ) ) }
/>
<TextControl
label={ __( 'Playlist ID (one of video / playlist / outstream ID is required)' ) }
value={ dataPlaylist }
onChange={ value => ( setAttributes( { dataPlaylist: value } ) ) }
/>
<ToggleControl
label={ __( 'Autoplay' ) }
checked={ autoPlay }
onChange={ () => ( setAttributes( { autoPlay: ! autoPlay } ) ) }
/>
<SelectControl
label={ __( 'Layout' ) }
value={ layout }
options={ ampLayoutOptions }
onChange={ value => ( setAttributes( { layout: value } ) ) }
/>
<TextControl
type="number"
label={ __( 'Width (px)' ) }
value={ width !== undefined ? width : '' }
onChange={ value => ( setAttributes( { width: value } ) ) }
/>
<TextControl
type="number"
label={ __( 'Height (px)' ) }
value={ height }
onChange={ value => ( setAttributes( { height: value } ) ) }
/>
</PanelBody>
</InspectorControls>
)
}
{
url && (
<Placeholder label={ __( 'Brid Player' ) }>
<p className="components-placeholder__error">{ url }</p>
<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
</Placeholder>
)

}
{
! url && (
<Placeholder label={ __( 'Brid Player' ) }>
<p>{ __( 'Add required data to use the block.' ) }</p>
</Placeholder>
)
}
</Fragment>
);
},

save( { attributes } ) {
let bridProps = {
layout: attributes.layout,
height: attributes.height,
'data-player': attributes.dataPlayer,
'data-partner': attributes.dataPartner
};
if ( 'fixed-height' !== attributes.layout && attributes.width ) {
bridProps.width = attributes.width;
}
if ( attributes.dataPlaylist ) {
bridProps[ 'data-playlist' ] = attributes.dataPlaylist;
}
if ( attributes.dataVideo ) {
bridProps[ 'data-video' ] = attributes.dataVideo;
}
if ( attributes.dataOutstream ) {
bridProps[ 'data-outstream' ] = attributes.dataOutstream;
}
if ( attributes.autoPlay ) {
bridProps.autoplay = attributes.autoPlay;
}
return (
<amp-brid-player { ...bridProps }></amp-brid-player>
);
}
}
);
155 changes: 155 additions & 0 deletions blocks/amp-ima-video/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
/**
* Internal block libraries.
*/
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { InspectorControls } = wp.editor;
const { Fragment } = wp.element;
const {
PanelBody,
TextControl,
SelectControl,
Placeholder,
ToggleControl
} = wp.components;

/**
* Register block.
*/
export default registerBlockType(
'amp/amp-ima-video',
{
title: __( 'AMP IMA Video' ),
description: __( 'Embeds a video player for instream video ads that are integrated with the IMA SDK' ),
category: 'common',
icon: 'embed-generic',
keywords: [
__( 'Embed' )
],

// @todo Perhaps later add subtitles option and additional source options?
attributes: {
dataDelayAdRequest: {
default: false
},
dataTag: {
type: 'string'
},
dataSrc: {
type: 'string'
},
dataPoster: {
type: 'string'
},
layout: {
type: 'string',
default: 'responsive'
},
width: {
type: 'number',
default: 600
},
height: {
type: 'number',
default: 400
}
},

edit( { attributes, isSelected, setAttributes } ) {
const { dataDelayAdRequest, dataTag, dataSrc, dataPoster, layout, height, width } = attributes;
const ampLayoutOptions = [
{ value: 'responsive', label: __( 'Responsive' ) },
{ value: 'fixed', label: __( 'Fixed' ) }

];
let dataSet = false;
if ( dataTag && dataSrc ) {
dataSet = true;
}
return (
<Fragment>
{
isSelected && (
<InspectorControls key='inspector'>
<PanelBody title={ __( 'IMA Video Settings' ) }>
<TextControl
label={ __( 'Https URL for your VAST ad document (required)' ) }
value={ dataTag }
onChange={ value => ( setAttributes( { dataTag: value } ) ) }
/>
<TextControl
label={ __( 'Https URL of your video content (required)' ) }
value={ dataSrc }
onChange={ value => ( setAttributes( { dataSrc: value } ) ) }
/>
<TextControl
label={ __( 'Https URL to preview image' ) }
value={ dataPoster }
onChange={ value => ( setAttributes( { dataPoster: value } ) ) }
/>
<ToggleControl
label={ __( 'Delay Ad Request' ) }
checked={ dataDelayAdRequest }
onChange={ () => ( setAttributes( { dataDelayAdRequest: ! dataDelayAdRequest } ) ) }
/>
<SelectControl
label={ __( 'Layout' ) }
value={ layout }
options={ ampLayoutOptions }
onChange={ value => ( setAttributes( { layout: value } ) ) }
/>
<TextControl
type="number"
label={ __( 'Width (px)' ) }
value={ width !== undefined ? width : '' }
onChange={ value => ( setAttributes( { width: value } ) ) }
/>
<TextControl
type="number"
label={ __( 'Height (px)' ) }
value={ height }
onChange={ value => ( setAttributes( { height: value } ) ) }
/>
</PanelBody>
</InspectorControls>
)
}
{
dataSet && (
<Placeholder label={ __( 'IMA Video' ) }>
<p className="components-placeholder__error">{ dataSrc }</p>
<p className="components-placeholder__error">{ __( 'Previews for this are unavailable in the editor, sorry!' ) }</p>
</Placeholder>
)
}
{
! dataSet && (
<Placeholder label={ __( 'IMA Video' ) }>
<p>{ __( 'Add required data to use the block.' ) }</p>
</Placeholder>
)
}
</Fragment>
);
},

save( { attributes } ) {
let imaProps = {
layout: attributes.layout,
height: attributes.height,
width: attributes.width,
'data-tag': attributes.dataTag,
'data-src': attributes.dataSrc
};
if ( attributes.dataPoster ) {
imaProps[ 'data-poster' ] = attributes.dataPoster;
}
if ( attributes.dataDelayAdRequest ) {
imaProps[ 'data-delay-ad-request' ] = attributes.dataDelayAdRequest;
}
return (
<amp-ima-video { ...imaProps }></amp-ima-video>
);
}
}
);
Loading

0 comments on commit 91108da

Please sign in to comment.