fix: external video product issues (close #454) (#455)

* fix: external video product issues (close #454) * Update types and fix prop issue in test * add changeset Co-authored-by: Anthony Frehner <[email protected]>
Shopify · Mar 4, 2022 · 81ac653 · 81ac653
1 parent 47f23f9
commit 81ac653
Show file tree

Hide file tree

Showing 12 changed files with 26 additions and 43 deletions.
diff --git a/.changeset/mean-mirrors-worry.md b/.changeset/mean-mirrors-worry.md
@@ -0,0 +1,5 @@
+---
+'@shopify/hydrogen': minor
+---
+
+Updated the ExternalVideo component to use the new `embedUrl` Storefront API ([introduced in 2022-04](https://shopify.dev/api/release-notes/2022-04#non-encoded-object-ids-in-the-graphql-storefront-api)) on ExternalVideo.
diff --git a/packages/hydrogen/src/components/ExternalVideo/ExternalVideo.tsx b/packages/hydrogen/src/components/ExternalVideo/ExternalVideo.tsx
@@ -5,7 +5,7 @@ import {ExternalVideoFragment as Fragment} from '../../graphql/graphql-constants
 import type {ExternalVideoFragmentFragment} from './ExternalVideoFragment';
 
 export interface ExternalVideoProps {
-  /** An object with the keys `host`, `embeddedUrl`, and `id`. Refer to the Storefront API's
+  /** An object with the keys `host`, `embedUrl`, and `id`. Refer to the Storefront API's
    * [`ExternalVideo` type](/api/storefront/reference/products/externalvideo).
    */
   data: ExternalVideoFragmentFragment;
@@ -35,7 +35,7 @@ export function ExternalVideo<TTag extends React.ElementType = 'iframe'>(
     ...passthroughProps
   } = props;
 
-  const url = useEmbeddedVideoUrl(data.embeddedUrl, options);
+  const url = useEmbeddedVideoUrl(data.embedUrl, options);
 
   return (
     <iframe

diff --git a/packages/hydrogen/src/components/ExternalVideo/ExternalVideoFragment.graphql b/packages/hydrogen/src/components/ExternalVideo/ExternalVideoFragment.graphql
@@ -1,5 +1,5 @@
 fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
diff --git a/packages/hydrogen/src/components/ExternalVideo/ExternalVideoFragment.ts b/packages/hydrogen/src/components/ExternalVideo/ExternalVideoFragment.ts
@@ -7,4 +7,4 @@ import * as Types from '../../graphql/types/types';
 
 export type ExternalVideoFragmentFragment = {
   __typename?: 'ExternalVideo';
-} & Pick<Types.ExternalVideo, 'id' | 'embeddedUrl' | 'host'>;
+} & Pick<Types.ExternalVideo, 'id' | 'embedUrl' | 'host'>;
diff --git a/packages/hydrogen/src/components/ExternalVideo/README.md b/packages/hydrogen/src/components/ExternalVideo/README.md
@@ -47,10 +47,10 @@ export default function MyProductVideo() {
 
 ## Props
 
-| Name     | Type                                                                                    | Description                                                                                                                                                                                                                       |
-| -------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| data     | <code>Pick<<wbr>ExternalVideoType, "host" &#124; "embeddedUrl" &#124; "id"<wbr>></code> | An object with the keys `host`, `embeddedUrl`, and `id`. Refer to the Storefront API's [`ExternalVideo` type](/api/storefront/reference/products/externalvideo).                                                                  |
-| options? | <code>YouTube &#124; Vimeo</code>                                                       | An object containing the options available for either [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters). |
+| Name     | Type                                                                                 | Description                                                                                                                                                                                                                       |
+| -------- | ------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| video    | <code>Pick<<wbr>ExternalVideoType, "host" &#124; "embedUrl" &#124; "id"<wbr>></code> | An object with the keys `host`, `embedUrl`, and `id`. Refer to the Storefront API's [`ExternalVideo` type](/api/storefront/reference/products/externalvideo).                                                                     |
+| options? | <code>YouTube &#124; Vimeo</code>                                                    | An object containing the options available for either [YouTube](https://developers.google.com/youtube/player_parameters#Parameters) or [Vimeo](https://vimeo.zendesk.com/hc/en-us/articles/360001494447-Using-Player-Parameters). |
 
 ## Component type
 
@@ -63,7 +63,7 @@ The following fragment is available as a string for your GraphQL query using `Ex
 ```graphql
 fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
 ```

diff --git a/packages/hydrogen/src/components/ExternalVideo/docs/fragment.md b/packages/hydrogen/src/components/ExternalVideo/docs/fragment.md
@@ -5,7 +5,7 @@ The following fragment is available as a string for your GraphQL query using `Ex
 ```graphql
 fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
 ```
diff --git a/packages/hydrogen/src/components/ExternalVideo/tests/ExternalVideo.test.tsx b/packages/hydrogen/src/components/ExternalVideo/tests/ExternalVideo.test.tsx
@@ -9,7 +9,7 @@ describe('<ExternalVideo />', () => {
     const component = mount(<ExternalVideo data={video} />);
 
     expect(component).toContainReactComponent('iframe', {
-      src: video.embeddedUrl,
+      src: video.embedUrl,
       id: video.id,
       allow:
         'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture',
@@ -45,7 +45,7 @@ describe('<ExternalVideo />', () => {
     const component = mount(
       <ExternalVideo
         data={getExternalVideoData({
-          embeddedUrl: 'https://www.youtube.com/embed/a2YSgfwXc9c',
+          embedUrl: 'https://www.youtube.com/embed/a2YSgfwXc9c',
         })}
         options={options}
       />
@@ -65,19 +65,4 @@ describe('<ExternalVideo />', () => {
       className: 'fancy',
     });
   });
-
-  it('transforms a valid youtube shortened url to an embed compatibile url', () => {
-    const invalidUrl = 'https://youtu.be/a2YSgfwXc9c';
-    const validUrl = invalidUrl.replace(/youtu\.be/, 'www.youtube.com/embed');
-    const component = mount(
-      <ExternalVideo
-        data={getExternalVideoData({
-          embeddedUrl: invalidUrl,
-        })}
-      />
-    );
-    expect(component).toContainReactComponent('iframe', {
-      src: validUrl,
-    });
-  });
 });
diff --git a/packages/hydrogen/src/components/MediaFile/MediaFileFragment.ts b/packages/hydrogen/src/components/MediaFile/MediaFileFragment.ts
@@ -7,10 +7,7 @@ import * as Types from '../../graphql/types/types';
 
 export type MediaFileFragment_ExternalVideo_Fragment = {
   __typename?: 'ExternalVideo';
-} & Pick<
-  Types.ExternalVideo,
-  'mediaContentType' | 'id' | 'embeddedUrl' | 'host'
->;
+} & Pick<Types.ExternalVideo, 'mediaContentType' | 'id' | 'embedUrl' | 'host'>;
 
 export type MediaFileFragment_MediaImage_Fragment = {
   __typename?: 'MediaImage';

diff --git a/packages/hydrogen/src/components/ProductProvider/ProductProviderFragment.ts b/packages/hydrogen/src/components/ProductProvider/ProductProviderFragment.ts
@@ -25,7 +25,7 @@ export type ProductProviderFragmentFragment = {__typename?: 'Product'} & Pick<
           node:
             | ({__typename?: 'ExternalVideo'} & Pick<
                 Types.ExternalVideo,
-                'mediaContentType' | 'id' | 'embeddedUrl' | 'host'
+                'mediaContentType' | 'id' | 'embedUrl' | 'host'
               >)
             | ({__typename?: 'MediaImage'} & Pick<
                 Types.MediaImage,

diff --git a/packages/hydrogen/src/graphql/graphql-constants.ts b/packages/hydrogen/src/graphql/graphql-constants.ts
@@ -1980,7 +1980,7 @@ fragment ImageFragment on Image {
 *```
 * fragment ExternalVideoFragment on ExternalVideo {
 *   id
-*   embeddedUrl
+*   embedUrl
 *   host
 * }
 * 
@@ -1989,7 +1989,7 @@ fragment ImageFragment on Image {
 */
 export const ExternalVideoFragment = `fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
 
@@ -2108,7 +2108,7 @@ export const Localization = `query Localization {
  *
  * fragment ExternalVideoFragment on ExternalVideo {
  *   id
- *   embeddedUrl
+ *   embedUrl
  *   host
  * }
  *
@@ -2169,7 +2169,7 @@ fragment VideoFragment on Video {
 
 fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
 
@@ -2484,7 +2484,7 @@ export const MoneyFragment = `fragment MoneyFragment on MoneyV2 {
  *
  * fragment ExternalVideoFragment on ExternalVideo {
  *   id
- *   embeddedUrl
+ *   embedUrl
  *   host
  * }
  *
@@ -2792,7 +2792,7 @@ fragment VideoFragment on Video {
 
 fragment ExternalVideoFragment on ExternalVideo {
   id
-  embeddedUrl
+  embedUrl
   host
 }
 

diff --git a/packages/hydrogen/src/utilities/tests/media.ts b/packages/hydrogen/src/utilities/tests/media.ts
@@ -49,7 +49,7 @@ export function getExternalVideoData(
   return {
     id: externalVideo.id ?? faker.random.words(),
     mediaContentType: MediaContentType.ExternalVideo,
-    embeddedUrl: externalVideo.embeddedUrl ?? faker.internet.url(),
+    embedUrl: externalVideo.embedUrl ?? faker.internet.url(),
     host:
       externalVideo.host ?? faker.datatype.number({max: 2, min: 1}) === 1
         ? MediaHost.Youtube

diff --git a/packages/hydrogen/src/utilities/video_parameters.ts b/packages/hydrogen/src/utilities/video_parameters.ts
@@ -68,10 +68,6 @@ export function addParametersToEmbeddedVideoUrl(
 }
 
 export function useEmbeddedVideoUrl(url: string, parameters?: YouTube | Vimeo) {
-  // Ensure a youtube shortened url is changed to an iFrame compatible embed link.
-  // TODO: Fix is needed for SFAPI version 2022-01. Starting 2022-04 embeddedUrl has been marked as deprecated and replaced with
-  // embedUrl. When the pinned SFAPI version is 2022-04 line can be removed in favor of changes on PR #455
-  url = url.replace(/youtu\.be/, 'www.youtube.com/embed');
   return useMemo(() => {
     if (!parameters) {
       return url;