fix: external video product issues (close #454)

Shopify · Jan 12, 2022 · 2a44610 · 2a44610
1 parent fa41651
commit 2a44610
Show file tree

Hide file tree

Showing 13 changed files with 31 additions and 25 deletions.
diff --git a/packages/dev/src/components/Gallery.client.jsx b/packages/dev/src/components/Gallery.client.jsx
@@ -15,7 +15,8 @@ export default function Gallery() {
   const galleryMedia = media.filter((med) => {
     if (
       med.mediaContentType === MODEL_3D_TYPE ||
-      med.mediaContentType === VIDEO_TYPE
+      med.mediaContentType === VIDEO_TYPE ||
+      med.mediaContentType === EXTERNAL_VIDEO_TYPE
     ) {
       return true;
     }
@@ -63,3 +64,4 @@ const MODEL_3D_PROPS = {
   interactionPromptThreshold: '0',
 };
 const VIDEO_TYPE = 'VIDEO';
+const EXTERNAL_VIDEO_TYPE = 'EXTERNAL_VIDEO';
diff --git a/packages/hydrogen/CHANGELOG.md b/packages/hydrogen/CHANGELOG.md
@@ -9,6 +9,8 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 - fix: replace log abbreviations with full text.
 - feature: add optional `locale` param to `useShopQuery` to be used as `Accept-Language` in the store Storefront API query
+- fix: render error in `Gallery.client.jsx` component when product resource has an external video.
+- fix: update ExternalVideo to new Storefront API schema to use `embedUrl` which provides an embed compatible url that the now depercated `embeddedUrl` field did not.
 
 ## 0.8.2 - 2022-01-07
 

diff --git a/packages/hydrogen/graphql.schema.json b/packages/hydrogen/graphql.schema.json
@@ -13642,7 +13642,7 @@
             "deprecationReason": null
           },
           {
-            "name": "embeddedUrl",
+            "name": "embedUrl",
             "description": "The URL.",
             "args": [],
             "type": {

diff --git a/packages/hydrogen/src/components/ExternalVideo/ExternalVideo.tsx b/packages/hydrogen/src/components/ExternalVideo/ExternalVideo.tsx
@@ -5,10 +5,10 @@ import {ExternalVideoFragment as Fragment} from '../../graphql/graphql-constants
 import {ExternalVideo as ExternalVideoType} from '../../graphql/types/types';
 
 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).
    */
-  video: Pick<ExternalVideoType, 'host' | 'embeddedUrl' | 'id'>;
+  video: Pick<ExternalVideoType, 'host' | 'embedUrl' | 'id'>;
   /** 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).
@@ -35,7 +35,7 @@ export function ExternalVideo<TTag extends React.ElementType = 'iframe'>(
     ...passthroughProps
   } = props;
 
-  const url = useEmbeddedVideoUrl(video.embeddedUrl, options);
+  const url = useEmbeddedVideoUrl(video.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
@@ -2,4 +2,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                                                                                                                                                                                                                       |
-| -------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| video    | <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 video={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
         video={getExternalVideo({
-          embeddedUrl: 'https://www.youtube.com/embed/a2YSgfwXc9c',
+          embedUrl: 'https://www.youtube.com/embed/a2YSgfwXc9c',
         })}
         options={options}
       />

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/graphql/schema.json b/packages/hydrogen/src/graphql/schema.json
@@ -13290,7 +13290,7 @@
               "deprecationReason": null
             },
             {
-              "name": "embeddedUrl",
+              "name": "embedUrl",
               "description": "The URL.",
               "args": [],
               "type": {

diff --git a/packages/hydrogen/src/graphql/types/types.ts b/packages/hydrogen/src/graphql/types/types.ts
@@ -3054,8 +3054,10 @@ export type ExternalVideo = Node &
     __typename?: 'ExternalVideo';
     /** A word or phrase to share the nature or contents of a media. */
     alt?: Maybe<Scalars['String']>;
-    /** The URL. */
-    embeddedUrl: Scalars['URL'];
+    /** The embed compatible URL of the video for the respective host.  */
+    embedUrl: Scalars['URL'];
+    /** The origin URL of the video on the respective host. */
+    originUrl: Scalars['URL'];
     /** The host of the external video. */
     host: MediaHost;
     /** A globally-unique identifier. */

diff --git a/packages/hydrogen/src/utilities/tests/media.ts b/packages/hydrogen/src/utilities/tests/media.ts
@@ -47,7 +47,7 @@ export function getExternalVideo(externalVideo: Partial<ExternalVideo> = {}) {
   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