VideoPress: Add/use preview hook

projects/packages/videopress/changelog/update-add-use-preview-hook

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Add usePreview hook

projects/packages/videopress/src/client/block-editor/blocks/video/edit.tsx

@@ -11,7 +11,7 @@ import {
 import { createBlock } from '@wordpress/blocks';
 import { Spinner, Placeholder, Button, withNotices, ToolbarButton } from '@wordpress/components';
 import { store as coreStore } from '@wordpress/core-data';
-import { useSelect, useDispatch } from '@wordpress/data';
+import { useDispatch } from '@wordpress/data';
 import { useEffect, useState, useCallback, useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { caption as captionIcon } from '@wordpress/icons';
@@ -22,6 +22,7 @@ import debugFactory from 'debug';
  */
 import { isStandaloneActive, isVideoPressActive } from '../../../lib/connection';
 import { buildVideoPressURL, getVideoPressUrl } from '../../../lib/url';
+import { usePreview } from '../../hooks/use-preview';
 import { useSyncMedia } from '../../hooks/use-video-data-update';
 import ConnectBanner from './components/banner/connect-banner';
 import ColorPanel from './components/color-panel';
@@ -155,24 +156,7 @@ export default function VideoPressEdit( {
 	const { filename, private_enabled_for_site: privateEnabledForSite } = videoData;
 
 	// Get video preview status.
-	const defaultPreview = { html: null, scripts: [], width: null, height: null };
-	const { preview, isRequestingEmbedPreview } = useSelect(
-		select => {
-			if ( ! videoPressUrl ) {
-				return {
-					preview: defaultPreview,
-					isRequestingEmbedPreview: false,
-				};
-			}
-
-			return {
-				preview: select( coreStore ).getEmbedPreview( videoPressUrl ) || defaultPreview,
-				isRequestingEmbedPreview:
-					select( coreStore ).isRequestingEmbedPreview( videoPressUrl ) || false,
-			};
-		},
-		[ videoPressUrl ]
-	);
+	const { preview, isRequestingEmbedPreview } = usePreview( videoPressUrl );
 
 	// Pick video properties from preview.
 	const { html: previewHtml, scripts, width: previewWidth, height: previewHeight } = preview;

projects/packages/videopress/src/client/block-editor/blocks/video/types.ts

@@ -96,3 +96,10 @@ export type DetailsPanelProps = VideoControlProps & {
 	updateError: object | null;
 	isRequestingVideoData: boolean;
 };
+
+export type VideoPreview = {
+	html?: string;
+	scripts: Array< string >;
+	width?: number;
+	height?: number;
+};

projects/packages/videopress/src/client/block-editor/hooks/use-preview.ts

@@ -0,0 +1,32 @@
+/*
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+/*
+ * Internal dependencies
+ */
+import { VideoPreview } from '../blocks/video/types';
+
+export type UsePreviewResult = {
+	preview: VideoPreview;
+	isRequestingEmbedPreview: boolean;
+};
+
+const defaultPreview: VideoPreview = { html: null, scripts: [], width: null, height: null };
+
+export const usePreview = ( videoPressUrl?: string ): UsePreviewResult => {
+	return useSelect(
+		select => {
+			if ( ! videoPressUrl ) {
+				return { preview: defaultPreview, isRequestingEmbedPreview: false };
+			}
+			return {
+				preview: select( coreStore ).getEmbedPreview( videoPressUrl ) || defaultPreview,
+				isRequestingEmbedPreview:
+					select( coreStore ).isRequestingEmbedPreview( videoPressUrl ) || false,
+			};
+		},
+		[ videoPressUrl ]
+	);
+};