@gem-sdk/components 12.0.0-staging.6 → 12.0.0-staging.60

package/dist/esm/video/components/Video.liquid.js

@@ -1,6 +1,6 @@
-import{template as t}from"@gem-sdk/core";import{getAspectRatioSettings as e,getVimeoVideoId as o,vimeoVideoRegex as i,getYoutubeVideoId as s,youtubeVideoRegex as l,parseTimeVideo as m,fallbackImageVideoUrl as a}from"../common/helpers.js";import{createAttr as r,createStyle as d,createClass as u}from"@gem-sdk/system";import{getAttr as c}from"../common/attrs.js";import{getStyle as p,getYoutubeStyle as n,getVimeoStyle as y,getHtml5Style as f,getFallBackImageStyle as b}from"../common/styles.js";import{getFallbackImageClasses as j,getClasses as h}from"../common/classes.js";import k from"./HTML5Embed.liquid.js";import $ from"./LiteVimeoEmbed.liquid.js";import v from"./LiteYouTubeEmbed.liquid.js";import V from"../../image/components/NextImage.liquid.js";import{getImageSrc as z}from"../../image/common/helpers.js";let Video=({className:g,setting:L,style:N,builderAttrs:q,builderProps:C,advanced:E})=>{let{youtubeUrl:F="",vimeoUrl:I="",html5Url:R,autoplay:w=!1,loopVideo:x=!1,controls:T=!1,mute:H,poster:M,startTime:O,endTime:P}=L??{},S=z(M),{cssClass:Y}=E??{},A=e(L?.ratioOptions,L?.aspectRatio),B=r({...c({uid:C?.uid||""})}),D=d({...p(L,N)}),G=d({...n(A)}),J=d({...y(A)}),K=d({...f(A)}),Q=d({...b(L?.aspectRatio)}),U=u({...j()}),W=u({...h({className:g,builderProps:C,isInstantLP:!1,advancedCssClass:Y})}),X=()=>{switch(L?.type){case"youtube":{let t=s(F);if(!l.test(F)||!t)return V({src:a,alt:"Fallback video",className:U,style:Q});let e="";return x&&(e+=`&loop=1&playlist=${t}`),O&&(e+=`&start=${m(O)}`),P&&(e+=`&end=${m(P)}`),v({uid:C?.uid,id:t,autoplay:w,title:"Video",controls:T,params:e,adNetwork:!1,noCookie:!0,muted:!H,thumbnail:S,lazy:L.lazy??!0,preload:M?.preload,poster:M,style:G})}case"vimeo":{let t=o(I);if(!i.test(I)||!t)return V({src:a,alt:"Fallback video",className:U,style:Q});return $({muted:!H,loop:x,controls:T,thumbnail:S,thumbnailLink:M?.src,autoplay:w,lazy:L.lazy??!0,id:t,title:"Video",aspectRatio:A,poster:M,vimeoStyleIframe:J})}case"html5":if(!R)return V({src:a,alt:"Fallback video",className:U,style:Q});return k({uid:C?.uid,muted:!H,loop:x,controls:T,autoplay:w,src:R,thumbnail:S,title:"Video",poster:M,lazy:L.lazy??!0,isVideoComponent:!0,style:K})}};return t`
+import{template as t,hasTranslatedLiquid as e}from"@gem-sdk/core";import{getSettingTranslatedVideoAndThumbnail as o,getAspectRatioSettings as i,getVimeoVideoId as s,vimeoVideoRegex as l,getYoutubeVideoId as m,youtubeVideoRegex as r,parseTimeVideo as a,fallbackImageVideoUrl as d}from"../common/helpers.js";import{createAttr as u,createStyle as c,createClass as n}from"@gem-sdk/system";import{getAttr as p}from"../common/attrs.js";import{getStyle as f,getYoutubeStyle as y,getVimeoStyle as b,getHtml5Style as j,getFallBackImageStyle as V}from"../common/styles.js";import{getFallbackImageClasses as h,getClasses as k}from"../common/classes.js";import $ from"./HTML5Embed.liquid.js";import v from"./LiteVimeoEmbed.liquid.js";import g from"./LiteYouTubeEmbed.liquid.js";import L from"../../image/components/NextImage.liquid.js";import{getImageSrc as N}from"../../image/common/helpers.js";let Video=({className:q,setting:z,style:C,builderAttrs:E,builderProps:F,advanced:I,pageContext:R})=>{let w=o(z,F?.uid,R),{youtubeUrl:x="",vimeoUrl:T="",html5Url:U,autoplay:H=!1,loopVideo:M=!1,controls:O=!1,mute:P,poster:S,startTime:Y,endTime:A,lazy:B,type:D}=w??{},{youtubeUrlTranslated:G,vimeoUrlTranslated:J}=w,K=N(S),{cssClass:Q}=I??{},W=i(w?.ratioOptions,w?.aspectRatio),X=u({...p({uid:F?.uid||""})}),Z=c({...f(w,C)}),_=c({...y(W)}),tt=c({...b(W)}),te=c({...j(W)}),to=c({...V(z?.aspectRatio)}),ti=n({...h()}),ts=n({...k({className:q,builderProps:F,isInstantLP:!1,advancedCssClass:Q})}),tl=()=>{switch(D){case"youtube":{let t=m(x),o=e(G);if((!r.test(x)||!t)&&!o)return L({src:d,alt:"Fallback video",className:ti,style:to});let i="";return M&&(i+=`&loop=1&playlist=${t}`),Y&&(i+=`&start=${a(Y)}`),A&&(i+=`&end=${a(A)}`),g({uid:F?.uid,id:t??"",translatedVideoUrl:o?G:"",autoplay:H,title:"Video",controls:O,params:i,adNetwork:!1,noCookie:!0,muted:!P,thumbnail:K,lazy:B??!0,preload:S?.preload,poster:S,style:_})}case"vimeo":{let t=s(T),o=e(J);if((!l.test(T)||!t)&&!o)return L({src:d,alt:"Fallback video",className:ti,style:to});return v({muted:!P,loop:M,controls:O,thumbnail:K,thumbnailLink:S?.src,autoplay:H,lazy:B??!0,id:t??"",translatedVideoUrl:o?J:"",title:"Video",aspectRatio:W,poster:S,vimeoStyleIframe:tt})}case"html5":if(!U)return L({src:d,alt:"Fallback video",className:ti,style:to});return $({uid:F?.uid,muted:!P,loop:M,controls:O,autoplay:H,src:U,thumbnail:K,title:"Video",poster:S,lazy:B??!0,isVideoComponent:!0,style:te})}};return t`
     <div
-      ${{...q}} ${{...B}} class="${W}" style="${D}">
-      ${X()}
+      ${{...E}} ${{...X}} class="${ts}" style="${Z}">
+      ${tl()}
     </div>
   `};export{Video as default};

package/dist/esm/video/settings/Video.js

@@ -1,8 +1,8 @@
-import{VideoSettings as i}from"./configs/settings.js";import{SettingUIV1 as t}from"./configs/ui-v1.js";import{SettingUIV2 as e}from"./configs/ui-v2.js";let config={tag:"Video",label:"Video",icon:`
+import{VideoSettings as i}from"./configs/settings.js";import{SettingUIV2 as t}from"./configs/ui-v2.js";let config={tag:"Video",label:"Video",icon:`
   <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M17.3333 24V16L24 20L17.3333 24ZM20 9.33337C20 9.33337 13.3333 9.33338 8.8 9.60004C8.13333 9.73338 6.8 9.73338 5.6 10.9334C4.66667 11.8667 4.26667 14 4.26667 14C4.26667 14 4 16.4 4 18.8V21.0667C4 23.4667 4.26667 26 4.26667 26C4.26667 26 4.53333 28.1334 5.6 29.0667C6.8 30.2667 8.4 30.2667 9.06667 30.4C11.7333 30.5334 20 30.6667 20 30.6667C20 30.6667 26.6667 30.6667 31.2 30.4C31.8667 30.2667 33.2 30.2667 34.4 29.0667C35.3333 28.1334 35.7333 26 35.7333 26C35.7333 26 36 23.6 36 21.0667V18.8C36 16.4 35.7333 13.8667 35.7333 13.8667C35.7333 13.8667 35.4667 11.7334 34.4 10.8C33.2 9.60004 31.8667 9.60004 31.2 9.46671C26.6667 9.33337 20 9.33337 20 9.33337ZM20 11.7334C20.1333 11.7334 26.6667 11.7334 31.0667 12H31.2C31.7333 12 32.2667 12.1334 32.8 12.5334C32.9333 12.8 33.3333 13.6 33.3333 14.1334C33.3333 14.1334 33.6 16.4 33.6 18.6667V20.9334C33.6 23.2 33.3333 25.4667 33.3333 25.4667C33.2 26 32.9333 26.9334 32.8 27.0667C32.2667 27.6 31.8667 27.6 31.3333 27.6H31.2C26.6667 28.2667 20 28.2667 20 28.2667C19.8667 28.2667 11.8667 28.1334 9.33333 28C9.2 28 9.06667 28 8.93333 28C8.13333 27.8667 7.6 27.8667 7.2 27.4667C7.06667 27.2 6.66667 26.4 6.66667 25.8667C6.66667 25.8667 6.4 23.6 6.4 21.3334V19.0667C6.4 16.8 6.66667 14.5334 6.66667 14.5334C6.8 13.8667 7.06667 13.0667 7.2 12.8C7.73333 12.2667 8.13333 12.2667 8.66667 12.2667H8.8C13.3333 11.7334 19.8667 11.7334 20 11.7334Z" fill="currentColor"/>
   </svg>
-  `,settings:i,ui:t,uiV2:e,editorConfigs:{sideBar:{tab:{style:{hide:!0}}}},presets:[{id:"video",name:{en:"Video"},icon:{desktop:`
+  `,settings:i,ui:[],uiV2:t,editorConfigs:{sideBar:{tab:{style:{hide:!0}}}},presets:[{id:"video",name:"Video",icon:{desktop:`
           <svg width="96" height="48" viewBox="0 0 96 48" fill="none" xmlns="http://www.w3.org/2000/svg">
           <rect width="96" height="48" rx="3" fill="#424242"/>
           <path d="M48.0003 9.6665C43.3962 9.6665 39.667 13.3957 39.667 17.9998C39.667 22.604 43.3962 26.3332 48.0003 26.3332C52.6045 26.3332 56.3337 22.604 56.3337 17.9998C56.3337 13.3957 52.6045 9.6665 48.0003 9.6665ZM46.3337 21.7498V14.2498L51.3337 17.9998L46.3337 21.7498Z" fill="#D6D6D6"/>

package/dist/esm/video/settings/configs/settings.js

@@ -1 +1 @@
-import{youtubeShortsRegex as e}from"../../../helpers.js";let VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=drIt4RH_kyQ",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${e}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify.  <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];export{VideoSettings};
+import{youtubeShortsRegex as e}from"../../../helpers.js";let VideoSettings=[{id:"setting",controls:[{id:"ratioOptions",type:"ratio",min:1,useUnit:!1,useLink:!1,devices:{desktop:{default:{width:"16",height:"9"}}}},{id:"type",type:"select",label:"Video Type",options:[{label:"YouTube",value:"youtube"},{label:"Vimeo",value:"vimeo"},{label:"Video hosting",value:"html5"}],default:"html5"},{id:"youtubeUrl",type:"input",label:"Youtube Link",default:"https://www.youtube.com/watch?v=NfASaHFN1zg",placeholder:"Insert video url here",hide:!0,action:{clear:!0},actionChangeControls:[{controlID:"loopVideo",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"autoplay",condition:`${e}.test(youtubeUrl)`,newValue:!0},{controlID:"controls",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"mute",condition:`${e}.test(youtubeUrl)`,newValue:!1},{controlID:"lazy",condition:`${e}.test(youtubeUrl)`,newValue:!1}]},{id:"vimeoUrl",type:"input",label:"Vimeo Link",default:"https://vimeo.com/1095883398",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"html5Url",type:"input",label:"HTML5 Video Link",default:"https://cdn.shopify.com/videos/c/o/v/2cd3deb506b54b009063f7270ab5cf2e.mp4",placeholder:"Insert video url here",hide:!0,action:{clear:!0}},{id:"notes",type:"notes",default:'You can upload video to a hosting server e.g Shopify.  <a class="no-underline text-[#8AA4FF] font-medium leading-5" target="_blank" href="https://help.gempages.net/articles/version-7-video-element#video-url">Learn more</a>'},{id:"poster",type:"image",label:"Video Poster",hiddenSetting:{seo:!0}},{id:"preload",type:"toggle",label:"Preload",default:!0},{id:"aspectRatio",type:"select",label:"Ratio",options:[{label:"Original",value:"auto"},{label:"Square",value:"1/1"},{label:"3:2",value:"3/2"},{label:"4:3",value:"4/3"},{label:"16:9",value:"16/9"},{label:"21:9",value:"21/9"},{label:"2:3",value:"2/3"},{label:"3:4",value:"3/4"},{label:"9:16",value:"9/16"},{label:"Custom",value:"custom"}],devices:{desktop:{default:"16/9"}}},{id:"width",type:"input:stepper",min:0,label:"Aspect Width",hide:!0,devices:{desktop:{default:16}}},{id:"height",type:"input:stepper",min:1,label:"Aspect Height",hide:!0,devices:{desktop:{default:9}}},{id:"startTime",type:"input",label:"Start time",placeholder:"mm:ss",info:"Start video at xx seconds",hide:!0},{id:"endTime",type:"input",label:"End time",placeholder:"mm:ss",info:"End video at xx seconds",hide:!0},{id:"autoplay",label:"Autoplay",type:"toggle",default:!1},{id:"mute",label:"Enable Sound",type:"toggle",default:!1},{id:"loopVideo",label:"Loop Video",type:"toggle",default:!1},{id:"controls",label:"Show Control Bar",type:"toggle",default:!0,info:"Player controls display in the player"},{id:"lazy",label:"Lazy load",type:"toggle",default:!0,info:"Optimize for pagespeed loading time"}]}];export{VideoSettings};

package/dist/esm/video/settings/configs/translate.js

@@ -0,0 +1 @@
+let Video={youtubeUrl:{id:"youtubeUrl"},vimeoUrl:{id:"vimeoUrl"},html5Url:{id:"html5Url"},poster:{id:"poster",fields:["src"]}};export{Video};

package/dist/esm/video/settings/configs/ui-v2.js

@@ -1 +1 @@
-let SettingUIV2=[{label:{en:"Video source"},controls:[{label:{en:"Type"},setting:{id:"type"}},{label:{en:"Video link"},conditionDisplay:"type === 'youtube'",setting:{id:"youtubeUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{label:{en:"Video link"},conditionDisplay:"type === 'html5'",setting:{id:"html5Url"}},{label:{en:"Thumbnail"},setting:{id:"poster"},options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"type === 'youtube'",label:{en:"Start at"},setting:{id:"startTime"}},{conditionDisplay:"type === 'youtube'",label:{en:"End at"},setting:{id:"endTime"}}]}},{label:{en:"Video configure"},controls:[{label:{en:"Control bar"},setting:{id:"controls"}},{label:{en:"Sound"},setting:{id:"mute"}},{label:{en:"Lazy load"},setting:{id:"lazy"}}],moreSettings:{type:"collapse",controls:[{label:{en:"Autoplay"},setting:{id:"autoplay"},options:{disableMessage:"YouTube & Vimeo videos will not autoplay when lazy load is enabled"},conditionEnable:"type === 'html5' || (type !== 'html5' && lazy != true)"},{label:{en:"Loop video"},setting:{id:"loopVideo"}}]}},{label:{en:"Size"},controls:[{label:{en:"Frame"},setting:{id:"aspectRatio"}},{conditionDisplay:"aspectRatio === 'custom'",setting:{id:"ratioOptions"},layout:"vertical"}]},{label:{en:"Shape"},controls:[{label:{en:"Border"},setting:{id:"border",state:"normal"}},{label:{en:"Corner"},setting:{id:"rounded",state:"normal"}},{label:{en:"Shadow"},setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]}];export{SettingUIV2};
+let SettingUIV2=[{label:"Video source",controls:[{label:"Type",setting:{id:"type"}},{label:"Video link",conditionDisplay:"type === 'youtube'",setting:{id:"youtubeUrl"}},{label:"Video link",conditionDisplay:"type === 'vimeo'",setting:{id:"vimeoUrl"}},{label:"Video link",conditionDisplay:"type === 'html5'",setting:{id:"html5Url"}},{label:"Thumbnail",setting:{id:"poster"},options:{updateFields:[{field:"preload",settingId:"preload"}]},controlChangeTrigger:{settings:[{action:{controlId:"preload",valueFromField:"preload",groupType:"setting",controlType:"setting",removeDevice:!0}}],options:{noRecordHistory:!0}}}],moreSettings:{type:"collapse",controls:[{conditionDisplay:"type === 'youtube'",label:"Start at",setting:{id:"startTime"}},{conditionDisplay:"type === 'youtube'",label:"End at",setting:{id:"endTime"}}]}},{label:"Video configure",controls:[{label:"Control bar",setting:{id:"controls"}},{label:"Sound",setting:{id:"mute"}},{label:"Lazy load",setting:{id:"lazy"}}],moreSettings:{type:"collapse",controls:[{label:"Autoplay",setting:{id:"autoplay"},options:{disableMessage:"YouTube & Vimeo videos will not autoplay when lazy load is enabled"},conditionEnable:"type === 'html5' || (type !== 'html5' && lazy != true)"},{label:"Loop video",setting:{id:"loopVideo"}}]}},{label:"Size",controls:[{label:"Frame",setting:{id:"aspectRatio"}},{conditionDisplay:"aspectRatio === 'custom'",setting:{id:"ratioOptions"},layout:"vertical"}]},{label:"Shape",controls:[{label:"Border",setting:{id:"border",state:"normal"}},{label:"Corner",setting:{id:"rounded",state:"normal"}},{label:"Shadow",setting:{id:"boxShadow",state:"normal"},options:{updateFields:[{field:"normal.enable",settingId:"hasBoxShadow",state:"normal"}]},controlChangeTrigger:{settings:[{condition:"boxShadow.normal.enable === true",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!0}},{condition:"boxShadow.normal.enable === false",source:["boxShadow","hasBoxShadow"],action:{controlId:"hasBoxShadow",groupType:"advanced",controlType:"advanced",state:"normal",newValue:!1}}],options:{noRecordHistory:!0}}}]}];export{SettingUIV2};