@gem-sdk/components 2.4.5 → 2.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js +11 -5
  2. package/dist/cjs/video/components/HTML5Embed.liquid.js +25 -27
  3. package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js +12 -6
  4. package/dist/esm/video/components/HTML5Embed.liquid.js +25 -27
  5. package/package.json +2 -2
package/dist/cjs/product/components/ProductImagesV2/jsx/ProductImages.js CHANGED
@@ -36,6 +36,7 @@ const ProductImagesV2 = (productImageProps)=>{
36
36
  const product = core.useProduct();
37
37
  const currentDevice = core.useCurrentDevice();
38
38
  const currentVariant = core.useCurrentVariant();
39
+ const { isChangeSelectedOption } = core.useSelectedOption();
39
40
  const mode = core.useEditorMode();
40
41
  const setProductFeaturedImage = core.useProductStore((s)=>s.setProductFeaturedImage);
41
42
  const extraClass = advanced?.cssClass;
@@ -53,8 +54,12 @@ const ProductImagesV2 = (productImageProps)=>{
53
54
  const getFirst3DModal = (product)=>{
54
55
  return product?.medias?.edges.find((item)=>item?.node?.contentType === 'MODEL_3D')?.node;
55
56
  };
57
+ const isFirstActiveFeatureImage = React.useMemo(()=>setting?.typeDisplay === 'all-images' && !isChangeSelectedOption, [
58
+ isChangeSelectedOption,
59
+ setting?.typeDisplay
60
+ ]);
56
61
  const priorityFeatureImage = React.useMemo(()=>{
57
- if (setting?.typeDisplay === 'all-images') {
62
+ if (isFirstActiveFeatureImage) {
58
63
  let priorityItem;
59
64
  switch(setting?.preDisplay){
60
65
  case '1st-images':
@@ -74,10 +79,10 @@ const ProductImagesV2 = (productImageProps)=>{
74
79
  return priorityItem;
75
80
  }
76
81
  }, [
77
- setting?.typeDisplay,
82
+ isFirstActiveFeatureImage,
78
83
  setting?.preDisplay,
79
- product,
80
84
  setProductFeaturedImage,
85
+ product,
81
86
  currentVariant?.media
82
87
  ]);
83
88
  const gallery = React.useMemo(()=>{
@@ -131,7 +136,7 @@ const ProductImagesV2 = (productImageProps)=>{
131
136
  }
132
137
  };
133
138
  React.useEffect(()=>{
134
- if (currentVariant) {
139
+ if (currentVariant && !isFirstActiveFeatureImage) {
135
140
  const index = galleryIndex[currentVariant?.mediaId];
136
141
  if (index !== undefined) {
137
142
  const fImage = gallery[index] ?? product?.featuredImage;
@@ -145,7 +150,8 @@ const ProductImagesV2 = (productImageProps)=>{
145
150
  galleryIndex,
146
151
  gallery,
147
152
  product?.featuredImage,
148
- setProductFeaturedImage
153
+ setProductFeaturedImage,
154
+ isFirstActiveFeatureImage
149
155
  ]);
150
156
  const isRenderLightBox = React.useMemo(()=>{
151
157
  const isRender = core.getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || core.getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);
package/dist/cjs/video/components/HTML5Embed.liquid.js CHANGED
@@ -53,9 +53,7 @@ const HTML5Embed = (props)=>{
53
53
  ${initPreloadPoster()}
54
54
  <video
55
55
  id="${videoId}"
56
- class="${core.cls(' gp-w-full', props.className, props.isVideoComponent && !props.lazy ? '' : 'lazy', {
57
- 'gp-object-cover': props.autoplay
58
- })}"
56
+ class="${core.cls(' gp-w-full', props.className, props.isVideoComponent && !props.lazy ? '' : 'lazy')}"
59
57
  style="${props.style}"
60
58
  ${props.controls ? 'controls' : undefined}
61
59
  ${props.loop ? 'loop' : undefined}
@@ -71,32 +69,32 @@ const HTML5Embed = (props)=>{
71
69
  ${core.RenderIf(props.src.endsWith('.mp4'), `<source data-src="${props.src}" src="${srcUnLazyVideo}" type="video/mp4"></source>`)}
72
70
  </video>
73
71
  <div
74
- style="${props.style}"
75
- class="${core.cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-thumbnail-video', {
72
+ style="${props.style}"
73
+ class="${core.cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-thumbnail-video', {
76
74
  'gp-hidden': !props.thumbnail || props.autoplay
77
75
  })}"
78
- >
79
- <img
80
- id="video-thumbnail"
81
- src="${props.thumbnail ?? ''}"
82
- class="gp-w-full gp-h-full gp-object-cover"
83
- alt="Video Thumbnail"
84
- ></img>
85
- <button
86
- type="button"
87
- class="${core.cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]')}"
88
- aria-label="Play"
89
- >
90
- <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
91
- <path
92
- fill="currentColor"
93
- d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
94
- />
95
- </svg>
96
- </button>
97
- </div>
98
- </gp-lite-html5-embed>
99
- ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-lite-html5-embed.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
76
+ >
77
+ <img
78
+ id="video-thumbnail"
79
+ src="${props.thumbnail ?? ''}"
80
+ class="gp-w-full gp-h-full gp-object-cover"
81
+ alt="Video Thumbnail"
82
+ ></img>
83
+ <button
84
+ type="button"
85
+ class="${core.cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]')}"
86
+ aria-label="Play"
87
+ >
88
+ <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
89
+ <path
90
+ fill="currentColor"
91
+ d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
92
+ />
93
+ </svg>
94
+ </button>
95
+ </div>
96
+ </gp-lite-html5-embed>
97
+ ${core.RenderIf(core.isLocalEnv, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-lite-html5-embed.js' | asset_url }}" defer="defer"></script>`, `<script ${helpers.getSettingPreloadData('class="gps-link" delay', 'src')}="${core.baseAssetURL}/assets-v2/gp-lite-html5-embed.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
100
98
  <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
101
99
  <script>
102
100
  if(lazyLoadInstance){lazyLoadInstance.update()}else{var lazyLoadInstance = new LazyLoad()}
package/dist/esm/product/components/ProductImagesV2/jsx/ProductImages.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { checkAddOverFlowClass, getAspectRatio } from '../common/common.js';
3
- import { useProduct, useCurrentDevice, useCurrentVariant, useEditorMode, useProductStore, getResponsiveValueByScreen, composeBorderCss, composeCornerCss, cls, filterToolbarPreview } from '@gem-sdk/core';
3
+ import { useProduct, useCurrentDevice, useCurrentVariant, useSelectedOption, useEditorMode, useProductStore, getResponsiveValueByScreen, composeBorderCss, composeCornerCss, cls, filterToolbarPreview } from '@gem-sdk/core';
4
4
  import { useMemo, useState, useEffect, Children, isValidElement } from 'react';
5
5
  import FeatureImageWithGallery from './layouts/FeatureImageWithGallery.js';
6
6
  import GalleryOneCol from './layouts/GalleryOneCol.js';
@@ -32,6 +32,7 @@ const ProductImagesV2 = (productImageProps)=>{
32
32
  const product = useProduct();
33
33
  const currentDevice = useCurrentDevice();
34
34
  const currentVariant = useCurrentVariant();
35
+ const { isChangeSelectedOption } = useSelectedOption();
35
36
  const mode = useEditorMode();
36
37
  const setProductFeaturedImage = useProductStore((s)=>s.setProductFeaturedImage);
37
38
  const extraClass = advanced?.cssClass;
@@ -49,8 +50,12 @@ const ProductImagesV2 = (productImageProps)=>{
49
50
  const getFirst3DModal = (product)=>{
50
51
  return product?.medias?.edges.find((item)=>item?.node?.contentType === 'MODEL_3D')?.node;
51
52
  };
53
+ const isFirstActiveFeatureImage = useMemo(()=>setting?.typeDisplay === 'all-images' && !isChangeSelectedOption, [
54
+ isChangeSelectedOption,
55
+ setting?.typeDisplay
56
+ ]);
52
57
  const priorityFeatureImage = useMemo(()=>{
53
- if (setting?.typeDisplay === 'all-images') {
58
+ if (isFirstActiveFeatureImage) {
54
59
  let priorityItem;
55
60
  switch(setting?.preDisplay){
56
61
  case '1st-images':
@@ -70,10 +75,10 @@ const ProductImagesV2 = (productImageProps)=>{
70
75
  return priorityItem;
71
76
  }
72
77
  }, [
73
- setting?.typeDisplay,
78
+ isFirstActiveFeatureImage,
74
79
  setting?.preDisplay,
75
- product,
76
80
  setProductFeaturedImage,
81
+ product,
77
82
  currentVariant?.media
78
83
  ]);
79
84
  const gallery = useMemo(()=>{
@@ -127,7 +132,7 @@ const ProductImagesV2 = (productImageProps)=>{
127
132
  }
128
133
  };
129
134
  useEffect(()=>{
130
- if (currentVariant) {
135
+ if (currentVariant && !isFirstActiveFeatureImage) {
131
136
  const index = galleryIndex[currentVariant?.mediaId];
132
137
  if (index !== undefined) {
133
138
  const fImage = gallery[index] ?? product?.featuredImage;
@@ -141,7 +146,8 @@ const ProductImagesV2 = (productImageProps)=>{
141
146
  galleryIndex,
142
147
  gallery,
143
148
  product?.featuredImage,
144
- setProductFeaturedImage
149
+ setProductFeaturedImage,
150
+ isFirstActiveFeatureImage
145
151
  ]);
146
152
  const isRenderLightBox = useMemo(()=>{
147
153
  const isRender = getResponsiveValueByScreen(setting?.ftClickOpenLightBox, currentDevice) === 'popup' || getResponsiveValueByScreen(setting?.clickOpenLightBox, currentDevice);
package/dist/esm/video/components/HTML5Embed.liquid.js CHANGED
@@ -49,9 +49,7 @@ const HTML5Embed = (props)=>{
49
49
  ${initPreloadPoster()}
50
50
  <video
51
51
  id="${videoId}"
52
- class="${cls(' gp-w-full', props.className, props.isVideoComponent && !props.lazy ? '' : 'lazy', {
53
- 'gp-object-cover': props.autoplay
54
- })}"
52
+ class="${cls(' gp-w-full', props.className, props.isVideoComponent && !props.lazy ? '' : 'lazy')}"
55
53
  style="${props.style}"
56
54
  ${props.controls ? 'controls' : undefined}
57
55
  ${props.loop ? 'loop' : undefined}
@@ -67,32 +65,32 @@ const HTML5Embed = (props)=>{
67
65
  ${RenderIf(props.src.endsWith('.mp4'), `<source data-src="${props.src}" src="${srcUnLazyVideo}" type="video/mp4"></source>`)}
68
66
  </video>
69
67
  <div
70
- style="${props.style}"
71
- class="${cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-thumbnail-video', {
68
+ style="${props.style}"
69
+ class="${cls('gp-absolute gp-top-0 gp-left-0 gp-w-full gp-thumbnail-video', {
72
70
  'gp-hidden': !props.thumbnail || props.autoplay
73
71
  })}"
74
- >
75
- <img
76
- id="video-thumbnail"
77
- src="${props.thumbnail ?? ''}"
78
- class="gp-w-full gp-h-full gp-object-cover"
79
- alt="Video Thumbnail"
80
- ></img>
81
- <button
82
- type="button"
83
- class="${cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]')}"
84
- aria-label="Play"
85
- >
86
- <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
87
- <path
88
- fill="currentColor"
89
- d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
90
- />
91
- </svg>
92
- </button>
93
- </div>
94
- </gp-lite-html5-embed>
95
- ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-lite-html5-embed.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-lite-html5-embed.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
72
+ >
73
+ <img
74
+ id="video-thumbnail"
75
+ src="${props.thumbnail ?? ''}"
76
+ class="gp-w-full gp-h-full gp-object-cover"
77
+ alt="Video Thumbnail"
78
+ ></img>
79
+ <button
80
+ type="button"
81
+ class="${cls('gp-absolute gp-left-1/2 gp-top-1/2 gp-flex gp-aspect-[56/32] gp-w-14 -gp-translate-x-1/2 -gp-translate-y-1/2 gp-items-center gp-justify-center gp-rounded gp-bg-black/80 gp-transition-colors hover:gp-bg-[#ef0800]')}"
82
+ aria-label="Play"
83
+ >
84
+ <svg class="gp-w-5 gp-text-white" viewBox="0 0 24 24">
85
+ <path
86
+ fill="currentColor"
87
+ d="M5 5.274c0-1.707 1.826-2.792 3.325-1.977l12.362 6.726c1.566.853 1.566 3.101 0 3.953L8.325 20.702C6.826 21.518 5 20.432 5 18.726V5.274Z"
88
+ />
89
+ </svg>
90
+ </button>
91
+ </div>
92
+ </gp-lite-html5-embed>
93
+ ${RenderIf(isLocalEnv, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="{{ 'gp-lite-html5-embed.js' | asset_url }}" defer="defer"></script>`, `<script ${getSettingPreloadData('class="gps-link" delay', 'src')}="${baseAssetURL}/assets-v2/gp-lite-html5-embed.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
96
94
  <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.8.3/dist/lazyload.min.js"></script>
97
95
  <script>
98
96
  if(lazyLoadInstance){lazyLoadInstance.update()}else{var lazyLoadInstance = new LazyLoad()}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/components",
3
- "version": "2.4.5",
3
+ "version": "2.4.7",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",
@@ -21,7 +21,7 @@
21
21
  "format": "prettier --write \"./src/**/*.{ts,tsx}\""
22
22
  },
23
23
  "devDependencies": {
24
- "@gem-sdk/core": "2.2.0",
24
+ "@gem-sdk/core": "2.4.7",
25
25
  "@gem-sdk/styles": "2.1.31",
26
26
  "@types/react-transition-group": "^4.4.5"
27
27
  },