瀏覽代碼

Merge pull request #37 from ckeditor/t/31

Internal: Made the feature output semantic by default. Closes #31.
Piotrek Koszuliński 7 年之前
父節點
當前提交
2979ed895d

+ 0 - 3
packages/ckeditor5-media-embed/docs/_snippets/features/media-embed.js

@@ -15,9 +15,6 @@ ClassicEditor
 				'mediaEmbed', '|', 'heading', '|', 'bold', 'italic', '|', 'undo', 'redo'
 			],
 			viewportTopOffset: 60
-		},
-		mediaEmbed: {
-			semanticDataOutput: true
 		}
 	} )
 	.then( editor => {

+ 33 - 27
packages/ckeditor5-media-embed/docs/features/media-embed.md

@@ -20,13 +20,17 @@ You can use the "Insert media" button in the toolbar to embed media like the fol
 
 ## Installation
 
+<info-box info>
+	This feature is enabled by default in all builds. The installation instructions are for developers interested in building their own, custom editor.
+</info-box>
+
 To add this feature to your editor, install the [`@ckeditor/ckeditor5-media-embed`](https://www.npmjs.com/package/@ckeditor/ckeditor5-media-embed) package:
 
 ```bash
 npm install --save @ckeditor/ckeditor5-media-embed
 ```
 
-Then add `'MediaEmbed'` to your plugin list and {@link module:media-embed/mediaembed~MediaEmbedConfig configure} the feature:
+Then add `MediaEmbed` to your plugin list and {@link module:media-embed/mediaembed~MediaEmbedConfig configure} the feature (if needed):
 
 ```js
 import MediaEmbed from '@ckeditor/ckeditor5-media-embed/src/mediaembed';
@@ -49,35 +53,37 @@ ClassicEditor
 
 ## Configuration
 
-### Output type
+### Data output format
 
-The data output format of the feature can be configured using the {@link module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput `config.mediaEmbed.semanticDataOutput`} option.
+The data output format of the feature can be configured using the {@link module:media-embed/mediaembed~MediaEmbedConfig#mediaPreviewsInData `config.mediaEmbed.mediaPreviewsInData`} option.
+
+<info-box info>
+	This option does not change how media are displayed inside the editor – the previewable ones will still be displayed with previews. It only affects the output data (see below).
+</info-box>
 
-#### Non–semantic output
+#### Semantic data output (default)
 
-By default the media embed feature outputs media in the same way it works in the editor, this is, if this media is "previewable", the media preview (HTML) is saved to the database:
+By default, the media embed feature outputs semantic `<oembed>` tags for previewable and non-previewable media. That being so, it works best when the application processes (expands) the media on the server–side or [directly in the front–end](#displaying-embedded-media-on-your-website), preserving the versatile database representation:
 
 ```html
 <figure class="media">
-	<div data-oembed-url="https://media-url">
-		<iframe src="https://media-preview-url"></iframe>
-	</div>
+	<oembed url="https://media-url"></oembed>
 </figure>
 ```
 
-Currently, the preview is only available for content providers for which CKEditor 5 can predict an `<iframe>` code – this is YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an `<iframe>` code and it does not, so far, allows retrieving this code from an external oEmbed service. Therefore, for non previewable media it produces the semantic output:
+#### Including previews in data
+
+Optionally, by setting `mediaEmbed.mediaPreviewsInData` to `true` you can configure the media embed feature to output media in the same way they look in the editor, this is, if this media is "previewable", the media preview (HTML) is saved to the database:
 
 ```html
 <figure class="media">
-	<oembed url="https://media-url"></oembed>
+	<div data-oembed-url="https://media-url">
+		<iframe src="https://media-preview-url"></iframe>
+	</div>
 </figure>
 ```
 
-This means that, unless you [limited the list of providers](#media-providers) to only those which are previewable, you need to [make sure that media are displayed on your website](#displaying-embedded-media-on-your-website).
-
-#### Semantic output
-
-Optionally, by setting `mediaEmbed.semanticDataOutput` to `true` you can configure the media embed feature to output semantic `<oembed>` tags for previewable and non-previewable media. This option works best when the application processes (expands) the media on the server–side or [directly in the front–end](#displaying-embedded-media-on-your-website), preserving the versatile database representation:
+Currently, the preview is only available for content providers for which CKEditor 5 can predict an `<iframe>` code – this is YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an `<iframe>` code and it does not, so far, allows retrieving this code from an external oEmbed service. Therefore, for non previewable media it produces the default semantic output:
 
 ```html
 <figure class="media">
@@ -85,9 +91,7 @@ Optionally, by setting `mediaEmbed.semanticDataOutput` to `true` you can configu
 </figure>
 ```
 
-<info-box info>
-	This option does not change how media are displayed inside the editor – the previewable ones will still be displayed with previews.
-</info-box>
+This means that, unless you [limited the list of providers](#media-providers) to only those which are previewable, you need to [make sure that media are displayed on your website](#displaying-embedded-media-on-your-website).
 
 ### Media providers
 
@@ -98,7 +102,7 @@ Names of providers **with previews**:
 * `'dailymotion'`,
 * `'spotify'`,
 * `'youtube'`,
-* `'vimeo'`
+* `'vimeo'`.
 
 Names of providers **without previews**:
 
@@ -106,7 +110,7 @@ Names of providers **without previews**:
 * `'twitter'`,
 * `'googleMaps'`,
 * `'flickr'`,
-* `'facebook'`
+* `'facebook'`.
 
 <info-box notice>
 	The default media provider configuration does not support all possible media URLs, only the most common are included. Services like Iframely or Embedly support thousands of media providers and it is up to you to define which you want to allow.
@@ -120,7 +124,7 @@ To extend the default list of default providers, use {@link module:media-embed/m
 
 To remove certain providers, use {@link module:media-embed/mediaembed~MediaEmbedConfig#removeProviders `config.mediaEmbed.removeProviders`}.
 
-For instance, to leave only the previewable providers use this
+For instance, to leave only the previewable providers configure this feature as follows:
 
 ```js
 ClassicEditor
@@ -151,7 +155,7 @@ ClassicEditor
 					url: /^example\.com\/media\/(\w+)/,
 
 					// To be defined only if the media is previewable:
-					html: mediaId => '...'
+					html: match => '...'
 				},
 				...
 			]
@@ -161,9 +165,11 @@ ClassicEditor
 	.catch( ... );
 ```
 
+You can take inspirtation from the default configuration of this feature which you can find in: https://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js
+
 ## Displaying embedded media on your website
 
-The media embed feature produces output that may not contain previews of some embedded media. That happens for all media types when the feature is configured to produce a [semantic output](#semantic-output) and for non-previewable media in the default configuration. That means that you need to transform the output `<oembed>` elements into real media on your target website.
+By default, the media embed feature produces output that does not contain previews of embedded media, called the [semantic output](#semantic-data-output-default). That means that you need to transform the output `<oembed>` elements into real media on your target website.
 
 There are many ways to do that. The simplest, plug-and-play solutions are described here. You can also implement this transformation as part of your backend service and you can use different services than described in this section.
 
@@ -203,7 +209,7 @@ using this short code snippet:
 
 #### Non-semantic data
 
-Additionally, despite the fact that the media preview is included for some media types (unless you [configured the media embed feature otherwise](#semantic-output)), you can still use Iframely for media embeds like the following one:
+When the feature is configured to [include media previews](#including-previews-in-data) in output, you can still use Iframely for media embeds like the following one:
 
 ```html
 <figure class="media">
@@ -298,15 +304,15 @@ In this case, the code is almost the same as with the semantic data but you shou
 
 ## Automatic media embed on paste
 
-By default, the `'MediaEmbed'` plugin loads the {@link module:media-embed/automediaembed~AutoMediaEmbed `'AutoMediaEmbed'`} as a dependency.
+By default, the {@link module:media-embed/mediaembed~MediaEmbed} plugin loads the {@link module:media-embed/automediaembed~AutoMediaEmbed} as a dependency.
 
-The `AutoMediaEmbed` plugin recognizes media links in the pasted content and embeds them shortly after they are injected into the document to speed up the editing. Just like the "traditional" embedding (i.e. using the button in the toolbar), the automatic embedding works for all media providers specified in the [configuration](#media-providers).
+The {@link module:media-embed/automediaembed~AutoMediaEmbed} plugin recognizes media links in the pasted content and embeds them shortly after they are injected into the document to speed up the editing. Just like the "traditional" embedding (i.e. by using the button in the toolbar), the automatic embedding works for all media providers specified in the [configuration](#media-providers).
 
 <info-box>
 	The media URL must be the only content pasted to be properly embedded. Multiple links (`"http://media.url http://another.media.url"`) as well as bigger chunks of the content (`"This link http://media.url will not be auto–embedded when pasted."`) are ignored.
 </info-box>
 
-If the automatic embedding was unexpected, for instance when the link was meant to remain in the content as text, simply undo the action. To do that, use the toolbar button or the {@link features/keyboard-support keystroke}.
+If the automatic embedding was unexpected, for instance when the link was meant to remain in the content as text, simply undo the action (by clicking the "Undo" button in the toolbar or using the <kbd>Ctrl/⌘</kbd>+<kbd>Z</kbd> keystrokes).
 
 ## Styling media in editor content
 

+ 2 - 8
packages/ckeditor5-media-embed/src/converters.js

@@ -31,18 +31,12 @@ import ViewPosition from '@ckeditor/ckeditor5-engine/src/view/position';
  * @param {module:media-embed/mediaregistry~MediaRegistry} registry The registry providing
  * the media and their content.
  * @param {Object} options
- * @param {String} [options.semanticDataOutput] When `true`, the converter will create view in the semantic form.
+ * @param {String} [options.renderMediaPreview] When `true`, the converter will create view in the non-semantic form.
  * @param {String} [options.renderForEditingView] When `true`, the converter will create a view specific for the
  * editing pipeline (e.g. including CSS classes, content placeholders).
  * @returns {Function}
  */
 export function modelToViewUrlAttributeConverter( registry, options ) {
-	const mediaViewElementOptions = {
-		useSemanticWrapper: options.semanticDataOutput,
-		renderContent: !options.semanticDataOutput,
-		renderForEditingView: options.renderForEditingView
-	};
-
 	return dispatcher => {
 		dispatcher.on( 'attribute:url:media', converter );
 	};
@@ -59,7 +53,7 @@ export function modelToViewUrlAttributeConverter( registry, options ) {
 		// TODO: removing it and creating it from scratch is a hack. We can do better than that.
 		viewWriter.remove( ViewRange.createIn( figure ) );
 
-		const mediaViewElement = registry.getMediaViewElement( viewWriter, url, mediaViewElementOptions );
+		const mediaViewElement = registry.getMediaViewElement( viewWriter, url, options );
 
 		viewWriter.insert( ViewPosition.createAt( figure ), mediaViewElement );
 	}

+ 12 - 8
packages/ckeditor5-media-embed/src/mediaembed.js

@@ -100,8 +100,8 @@ export default class MediaEmbed extends Plugin {
  * preview of a media identified by a certain id or a hash. When not defined, the media embed feature
  * will use a generic media representation in the view and output data.
  * Note that when
- * {@link module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput `config.mediaEmbed.semanticDataOutput`}
- * is `true`, the rendering function **will not** be used for the media in the editor data output.
+ * {@link module:media-embed/mediaembed~MediaEmbedConfig#mediaPreviewsInData `config.mediaEmbed.mediaPreviewsInData`}
+ * is `true`, the rendering function **will always** be used for the media in the editor data output.
  */
 
 /**
@@ -114,7 +114,8 @@ export default class MediaEmbed extends Plugin {
 
 /**
  * The configuration of the media embed features.
- * Used by the media embed features in the `@ckeditor/ckeditor5-media-embed` package.
+ *
+ * Read more about {@glink features/media-embed#configuration configuring the media embed feature}.
  *
  *		ClassicEditor
  *			.create( editorElement, {
@@ -153,7 +154,7 @@ export default class MediaEmbed extends Plugin {
  * only the most common are included.
  *
  * **Note**: Media without are always represented in the data using the "semantic" markup. See
- * {@link module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput `config.mediaEmbed.semanticDataOutput`} to
+ * {@link module:media-embed/mediaembed~MediaEmbedConfig#mediaPreviewsInData `config.mediaEmbed.mediaPreviewsInData`} to
  * learn more about possible data outputs.
  *
  * **Note:**: The priority of media providers corresponds to the order of configuration. The first provider
@@ -180,6 +181,9 @@ export default class MediaEmbed extends Plugin {
  *			.then( ... )
  *			.catch( ... );
  *
+ * You can take inspirtation from the default configuration of this feature which you can find in:
+ * https://github.com/ckeditor/ckeditor5-media-embed/blob/master/src/mediaembedediting.js
+ *
  * To **extend** the list of default providers, use
  * {@link module:media-embed/mediaembed~MediaEmbedConfig#extraProviders `config.mediaEmbed.extraProviders`}.
  *
@@ -230,14 +234,14 @@ export default class MediaEmbed extends Plugin {
 /**
  * Controls the data format produced by the feature.
  *
- * When `true`, the feature produces "semantic" data, i.e. it does not include the preview of
+ * When `false` (default), the feature produces "semantic" data, i.e. it does not include the preview of
  * the media, just the `<oembed>` tag with the `url` attribute:
  *
  *		<figure class="media">
  *			<oembed url="https://url"></oembed>
  *		</figure>
  *
- * when `false` (default), the media is represented in the output in the same way it looks in the editor,
+ * When `true`, the media is represented in the output in the same way it looks in the editor,
  * i.e. the media preview is saved to the database:
  *
  *		<figure class="media">
@@ -247,9 +251,9 @@ export default class MediaEmbed extends Plugin {
  *		</figure>
  *
  * **Note:** Preview–less media are always represented in the data using the "semantic" markup
- * regardless of the value of the `semanticDataOutput`. Learn more about different kinds of media
+ * regardless of the value of the `mediaPreviewsInData`. Learn more about different kinds of media
  * in the {@link module:media-embed/mediaembed~MediaEmbedConfig#providers `config.mediaEmbed.providers`}
  * configuration description.
  *
- * @member {Boolean} [module:media-embed/mediaembed~MediaEmbedConfig#semanticDataOutput=false]
+ * @member {Boolean} [module:media-embed/mediaembed~MediaEmbedConfig#mediaPreviewsInData=false]
  */

+ 4 - 6
packages/ckeditor5-media-embed/src/mediaembedediting.js

@@ -156,7 +156,7 @@ export default class MediaEmbedEditing extends Plugin {
 		const schema = editor.model.schema;
 		const t = editor.t;
 		const conversion = editor.conversion;
-		const semanticDataOutput = editor.config.get( 'mediaEmbed.semanticDataOutput' );
+		const renderMediaPreview = editor.config.get( 'mediaEmbed.mediaPreviewsInData' );
 		const registry = this.registry;
 
 		editor.commands.add( 'mediaEmbed', new MediaEmbedCommand( editor ) );
@@ -176,8 +176,7 @@ export default class MediaEmbedEditing extends Plugin {
 				const url = modelElement.getAttribute( 'url' );
 
 				return createMediaFigureElement( viewWriter, registry, url, {
-					useSemanticWrapper: semanticDataOutput || !url,
-					renderContent: !semanticDataOutput
+					renderMediaPreview: url && renderMediaPreview
 				} );
 			}
 		} ) );
@@ -185,7 +184,7 @@ export default class MediaEmbedEditing extends Plugin {
 		// Model -> Data (url -> data-oembed-url)
 		conversion.for( 'dataDowncast' ).add(
 			modelToViewUrlAttributeConverter( registry, {
-				semanticDataOutput
+				renderMediaPreview
 			} ) );
 
 		// Model -> View (element)
@@ -194,8 +193,7 @@ export default class MediaEmbedEditing extends Plugin {
 			view: ( modelElement, viewWriter ) => {
 				const url = modelElement.getAttribute( 'url' );
 				const figure = createMediaFigureElement( viewWriter, registry, url, {
-					renderForEditingView: true,
-					renderContent: true
+					renderForEditingView: true
 				} );
 
 				return toMediaWidget( figure, viewWriter, t( 'media widget' ) );

+ 17 - 19
packages/ckeditor5-media-embed/src/mediaregistry.js

@@ -90,8 +90,7 @@ export default class MediaRegistry {
 	 * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer used to produce a view element.
 	 * @param {String} url The url to be translated into a view element.
 	 * @param {Object} options
-	 * @param {String} [options.renderContent]
-	 * @param {String} [options.useSemanticWrapper]
+	 * @param {String} [options.renderMediaPreview]
 	 * @param {String} [options.renderForEditingView]
 	 * @returns {module:engine/view/element~Element}
 	 */
@@ -114,7 +113,7 @@ export default class MediaRegistry {
 		url = url.trim();
 
 		for ( const definition of this.providerDefinitions ) {
-			const contentRenderer = definition.html;
+			const previewRenderer = definition.html;
 			let pattern = definition.url;
 
 			if ( !Array.isArray( pattern ) ) {
@@ -125,7 +124,7 @@ export default class MediaRegistry {
 				const match = this._getUrlMatches( url, subPattern );
 
 				if ( match ) {
-					return new Media( this.locale, url, match, contentRenderer );
+					return new Media( this.locale, url, match, previewRenderer );
 				}
 			}
 		}
@@ -177,7 +176,7 @@ export default class MediaRegistry {
  * @private
  */
 class Media {
-	constructor( locale, url, match, contentRenderer ) {
+	constructor( locale, url, match, previewRenderer ) {
 		/**
 		 * The URL this Media instance represents.
 		 *
@@ -205,7 +204,7 @@ class Media {
 		 *
 		 * @member {Function}
 		 */
-		this._contentRenderer = contentRenderer;
+		this._previewRenderer = previewRenderer;
 	}
 
 	/**
@@ -213,21 +212,14 @@ class Media {
 	 *
 	 * @param {module:engine/view/downcastwriter~DowncastWriter} writer The view writer used to produce a view element.
 	 * @param {Object} options
-	 * @param {String} [options.renderContent]
-	 * @param {String} [options.useSemanticWrapper]
+	 * @param {String} [options.renderMediaPreview]
 	 * @param {String} [options.renderForEditingView]
 	 * @returns {module:engine/view/element~Element}
 	 */
 	getViewElement( writer, options ) {
 		const attributes = {};
 
-		if ( options.useSemanticWrapper || ( this.url && !this._contentRenderer && !options.renderForEditingView ) ) {
-			if ( this.url ) {
-				attributes.url = this.url;
-			}
-
-			return writer.createEmptyElement( 'oembed', attributes );
-		} else {
+		if ( options.renderForEditingView || ( options.renderMediaPreview && this.url && this._previewRenderer ) ) {
 			if ( this.url ) {
 				attributes[ 'data-oembed-url' ] = this.url;
 			}
@@ -236,7 +228,7 @@ class Media {
 				attributes.class = 'ck-media__wrapper';
 			}
 
-			const mediaHtml = this._getContentHtml( options );
+			const mediaHtml = this._getPreviewHtml( options );
 
 			return writer.createUIElement( 'div', attributes, function( domDocument ) {
 				const domElement = this.toDomElement( domDocument );
@@ -245,6 +237,12 @@ class Media {
 
 				return domElement;
 			} );
+		} else {
+			if ( this.url ) {
+				attributes.url = this.url;
+			}
+
+			return writer.createEmptyElement( 'oembed', attributes );
 		}
 	}
 
@@ -256,9 +254,9 @@ class Media {
 	 * @param {String} [options.renderForEditingView]
 	 * @returns {String}
 	 */
-	_getContentHtml( options ) {
-		if ( this._contentRenderer ) {
-			return this._contentRenderer( this._match );
+	_getPreviewHtml( options ) {
+		if ( this._previewRenderer ) {
+			return this._previewRenderer( this._match );
 		} else {
 			// The placeholder only makes sense for editing view and media which have URLs.
 			// Placeholder is never displayed in data and URL-less media have no content.

+ 0 - 1
packages/ckeditor5-media-embed/src/utils.js

@@ -45,7 +45,6 @@ export function toMediaWidget( viewElement, writer, label ) {
  * @param {module:media-embed/mediaregistry~MediaRegistry} registry
  * @param {String} url
  * @param {Object} options
- * @param {String} [options.renderContent]
  * @param {String} [options.useSemanticWrapper]
  * @param {String} [options.renderForEditingView]
  * @returns {module:engine/view/containerelement~ContainerElement}

+ 4 - 1
packages/ckeditor5-media-embed/tests/manual/mediaembed.js

@@ -14,7 +14,10 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, MediaEmbed ],
 		toolbar: [
 			'heading', '|', 'mediaEmbed', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'undo', 'redo'
-		]
+		],
+		mediaEmbed: {
+			mediaPreviewsInData: true
+		}
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 1 - 4
packages/ckeditor5-media-embed/tests/manual/semanticmediaembed.js

@@ -14,10 +14,7 @@ ClassicEditor
 		plugins: [ ArticlePluginSet, MediaEmbed ],
 		toolbar: [
 			'heading', '|', 'mediaEmbed', '|', 'bold', 'italic', 'bulletedList', 'numberedList', 'blockQuote', 'link', 'undo', 'redo'
-		],
-		mediaEmbed: {
-			semanticDataOutput: true
-		}
+		]
 	} )
 	.then( editor => {
 		window.editor = editor;

+ 10 - 13
packages/ckeditor5-media-embed/tests/mediaembedediting.js

@@ -131,9 +131,7 @@ describe( 'MediaEmbedEditing', () => {
 
 				describe( 'default value', () => {
 					beforeEach( () => {
-						return createTestEditor( {
-							semanticDataOutput: true
-						} )
+						return createTestEditor()
 							.then( newEditor => {
 								editor = newEditor;
 								view = editor.editing.view;
@@ -475,10 +473,9 @@ describe( 'MediaEmbedEditing', () => {
 		} );
 
 		describe( 'conversion in the data pipeline', () => {
-			describe( 'semanticDataOutput=true', () => {
+			describe( 'mediaPreviewsInData=false', () => {
 				beforeEach( () => {
 					return createTestEditor( {
-						semanticDataOutput: true,
 						providers: providerDefinitions
 					} )
 						.then( newEditor => {
@@ -603,7 +600,6 @@ describe( 'MediaEmbedEditing', () => {
 
 					it( 'should not convert unknown media', () => {
 						return createTestEditor( {
-							semanticDataOutput: true,
 							providers: [
 								testProviders.A
 							]
@@ -622,10 +618,11 @@ describe( 'MediaEmbedEditing', () => {
 				} );
 			} );
 
-			describe( 'semanticDataOutput=false', () => {
+			describe( 'mediaPreviewsInData=true', () => {
 				beforeEach( () => {
 					return createTestEditor( {
-						providers: providerDefinitions
+						providers: providerDefinitions,
+						mediaPreviewsInData: true
 					} )
 						.then( newEditor => {
 							editor = newEditor;
@@ -794,11 +791,10 @@ describe( 'MediaEmbedEditing', () => {
 		} );
 
 		describe( 'conversion in the editing pipeline', () => {
-			describe( 'semanticDataOutput=true', () => {
+			describe( 'mediaPreviewsInData=false', () => {
 				beforeEach( () => {
 					return createTestEditor( {
-						providers: providerDefinitions,
-						semanticDataOutput: true
+						providers: providerDefinitions
 					} )
 						.then( newEditor => {
 							editor = newEditor;
@@ -811,10 +807,11 @@ describe( 'MediaEmbedEditing', () => {
 				test();
 			} );
 
-			describe( 'semanticDataOutput=false', () => {
+			describe( 'mediaPreviewsInData=true', () => {
 				beforeEach( () => {
 					return createTestEditor( {
-						providers: providerDefinitions
+						providers: providerDefinitions,
+						mediaPreviewsInData: true
 					} )
 						.then( newEditor => {
 							editor = newEditor;

+ 1 - 1
packages/ckeditor5-media-embed/tests/mediaregistry.js

@@ -114,7 +114,7 @@ describe( 'MediaRegistry', () => {
 		it( 'passes the entire match array to render function', () => {
 			const media = mediaRegistry._getMedia( 'https://www.youtube.com/watch?v=euqbMkM-QQk' );
 
-			media._getContentHtml();
+			media._getPreviewHtml();
 
 			expect( htmlSpy.calledOnce ).to.equal( true );
 			expect( htmlSpy.firstCall.args[ 0 ] ).to.deep.equal( [