@gem-sdk/components 7.1.0 → 8.0.0-dev.106

package/dist/esm/video/components/LiteYouTubeEmbed.js

@@ -1,2 +1,2 @@
 'use client';
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useEditorMode as r}from"@gem-sdk/core";import o from"react-youtube";import{getYoutubeParams as a,isSettingLoop as i,covertStrParamsToObj as l}from"../common/helpers.js";import s from"../../image/components/NextImage.js";import{createClass as m,createStyle as c}from"@gem-sdk/system";import{getButtonYoutubeClasses as n,getImageYoutubeClasses as p,getArticleYoutubeClasses as u,getIframeYoutubeClasses as d,getYoutubeContentClasses as y}from"../common/classes.js";import{getIframeYoutubeStyle as f,getArticleYoutubeStyle as g}from"../common/styles.js";import{useLiteYoutubeEmbed as h}from"../hooks/useLiteYoutubeEmbed.js";let LiteYouTubeEmbed=b=>{let C=r(),w="edit"!==C,{style:N,poster:j,iframeClass:k,wrapperClass:v,title:x}=b,{preload:L}=j||{},{videoId:S,paramsImp:T,posterUrl:V,iframeSrc:B}=a(b),{iframe:E,intervalPlay:I,warmConnections:M,isVideoStarted:Y,videoDuration:z,addIframe:D}=h(b,T,S),P=L&&w,A=m({...n(E)}),F=m({...p()}),H=m({...u(P||!1,v)}),O=m({...d(k)}),R=c({...f(N)}),q=c({...g(N,V)}),G=m({...y()}),J=()=>b.isHeroBanner&&i(T)?t(o,{videoId:S,title:x,iframeClassName:O,style:R,className:G,opts:{host:"https://www.youtube-nocookie.com",playerVars:{autoplay:1,state:1,controls:0,mute:1,...l(T)}},onReady:e=>{e.target.playVideo(),z.current=Math.floor(e.target.getDuration())},onStateChange:e=>{let t=e.target;Y.current||(t.playVideo(),Y.current=!0,I(e)),0===e.data&&(z.current=t.getCurrentTime(),t.playVideo(),I(e))}}):t("iframe",{className:O,style:R,title:x,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:B});return e("article",{"aria-hidden":!0,className:H,"data-title":x,style:q,onPointerOver:M,onClick:D,children:[t(s,{src:V,alt:j?.altText,title:j?.imageTitle,priority:w&&L,enableLazyLoadImage:!0,className:F,isDisableAspectStyle:!0}),t("button",{type:"button","aria-label":"Play",className:A,children:e("svg",{height:"100%",version:"1.1",viewBox:"0 0 68 48",width:"100%",children:[t("path",{d:"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z",fill:"#f00"}),t("path",{d:"M 45,24 27,14 27,34",fill:"#fff"})]})}),E&&J()]})};export{LiteYouTubeEmbed as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useEditorMode as r}from"@gem-sdk/core";import a from"react-youtube";import{getYoutubeParams as o,isSettingLoop as i,covertStrParamsToObj as l}from"../common/helpers.js";import s from"../../image/components/NextImage.js";import{createClass as m,createStyle as n}from"@gem-sdk/system";import{getButtonYoutubeClasses as c,getImageYoutubeClasses as u,getArticleYoutubeClasses as d,getIframeYoutubeClasses as p,getYoutubeContentClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{useLiteYoutubeEmbed as h}from"../hooks/useLiteYoutubeEmbed.js";let LiteYouTubeEmbed=g=>{let C=r(),v="edit"!==C,{style:w,poster:N,iframeClass:j,wrapperClass:k,title:x}=g,{preload:B}=N||{},{videoId:E,paramsImp:L,posterUrl:S,iframeSrc:T}=o(g),{iframe:I,intervalPlay:V,warmConnections:H,isVideoStarted:M,videoDuration:Y,addIframe:z}=h(g,L,E),D=B&&v,P=m({...c(I)}),A=m({...u()}),F=m({...d(D||!1,k)}),O=m({...p(j)}),R=n({...y(w)}),q=n({...b(w,S)}),G=m({...f()}),J=()=>{if(g.isHeroBanner&&i(L))return t(a,{videoId:E,title:x,iframeClassName:O,style:R,className:G,opts:{host:"https://www.youtube-nocookie.com",playerVars:{autoplay:1,state:1,controls:0,mute:1,...l(L)}},onReady:e=>{if(e.target.playVideo(),Y.current=Math.floor(e.target.getDuration()),g.isHeroBanner){let t=e.target.getIframe();if(t){let e=t.closest("div.hero-banner-container");if(e){let r=new CustomEvent("youtube-iframe-ready",{detail:{iframe:t},bubbles:!0,cancelable:!0});e.dispatchEvent(r)}}}},onStateChange:e=>{let t=e.target;M.current||(t.playVideo(),M.current=!0,V(e)),0===e.data&&(Y.current=t.getCurrentTime(),t.playVideo(),V(e))}});let e=t("iframe",{className:O,style:R,title:x,frameBorder:"0",allow:"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture",allowFullScreen:!0,src:T});return g.isHeroBanner?t("div",{className:G,children:e}):e};return e("article",{"aria-hidden":!0,className:F,"data-title":x,style:q,onPointerOver:H,onClick:z,children:[t(s,{src:S,alt:N?.altText,title:N?.imageTitle,priority:v&&B,enableLazyLoadImage:!0,className:A,isDisableAspectStyle:!0}),t("button",{type:"button","aria-label":"Play",className:P,children:e("svg",{height:"100%",version:"1.1",viewBox:"0 0 68 48",width:"100%",children:[t("path",{d:"M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z",fill:"#f00"}),t("path",{d:"M 45,24 27,14 27,34",fill:"#fff"})]})}),I&&J()]})};export{LiteYouTubeEmbed as default};

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

@@ -1,24 +1,26 @@
-import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as a}from"@gem-sdk/core";import l from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as r}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as p,If as m}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f}from"../common/classes.js";import{getIframeYoutubeStyle as y,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=n=>{let{style:$,iframeClass:h,wrapperClass:v,title:S,poster:j}=n,z=`gp-video-${n.uid}`,{posterUrl:E,iframeSrc:w}=g(n),C=j?.preload,L=i({lazy:n.lazy,style:$,title:S,iframeSrc:w}),N=!n.lazy,T=o({...d(N)}),k=o({...c()}),x=o({...u(C||!1,v)}),A=o({...f(h)}),I=p({...y($)}),M=p({...b($,E)}),G=()=>e`
+import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as r}from"@gem-sdk/core";import a from"../../image/components/NextImage.liquid.js";import{getSettingPreloadData as l}from"../../helpers.js";import{createStateOrContext as i,createClass as o,createStyle as p,If as m}from"@gem-sdk/system";import{getButtonYoutubeClasses as d,getImageYoutubeClasses as c,getArticleYoutubeClasses as u,getIframeYoutubeClasses as f,getYoutubeContentClasses as y}from"../common/classes.js";import{getIframeYoutubeStyle as n,getArticleYoutubeStyle as b}from"../common/styles.js";import{getYoutubeParams as g}from"../common/helpers.js";let LiteYouTubeEmbed=$=>{let{style:h,iframeClass:v,wrapperClass:S,title:j,poster:z,translatedVideoUrl:E}=$,w=`gp-video-${$.uid}`,{posterUrl:C,iframeSrc:L}=g($),N=z?.preload,T=i({lazy:$.lazy,style:h,title:j,iframeSrc:L,translatedVideoUrl:E}),k=!$.lazy,x=o({...d(k)}),A=o({...c()}),I=o({...u(N||!1,S)}),M=o({...f(v)}),B=p({...n(h)}),G=p({...b(h,C)}),O=o({...y()}),P=()=>{let t=e`
     <iframe
-      id="player-wrapper-${n.uid}"
-      class="${A}"
-      style="${I}"
-      title="${S}"
+      id="player-wrapper-${$.uid}"
+      class="${M}"
+      style="${B}"
+      title="${j}"
       frameborder="0"
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
       allowfullscreen
-      src="${w}"
+      src="${L}"
     ></iframe>
-  `;return e`
-    <gp-lite-youtube-embed gp-data='${JSON.stringify(L)}'>
+  `;return $.isHeroBanner?e`
+        <div class="${O}">${t}</div>
+      `:t};return e`
+    <gp-lite-youtube-embed gp-data='${JSON.stringify(T)}'>
       <article
         aria-hidden
-        class="${x}"
-        data-title="${S}"
-        style="${M}"
+        class="${I}"
+        data-title="${j}"
+        style="${G}"
       >
-        ${l({id:z,src:E,alt:j?.altText,title:j?.imageTitle,priority:j?.preload,enableLazyLoadImage:!0,className:k,isDisableAspectStyle:!0,isNotLazyload:j?.preload})}
-        <button type="button" aria-label="Play" class="${T}">
+        ${a({id:w,src:C,alt:z?.altText,title:z?.imageTitle,priority:z?.preload,enableLazyLoadImage:!0,className:A,isDisableAspectStyle:!0,isNotLazyload:z?.preload})}
+        <button type="button" aria-label="Play" class="${x}">
           <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
             <path
               d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"
@@ -27,8 +29,8 @@ import{template as e,RenderIf as t,isLocalEnv as s,baseAssetURL as a}from"@gem-s
             <path d="M 45,24 27,14 27,34" fill="#fff"></path>
           </svg>
         </button>
-        ${m(N,G())}
+        ${m(k,P())}
       </article>
     </gp-lite-youtube-embed>
-    ${t(s,`<script ${r('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${r('class="gps-link" delay',"src")}="${a}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
+    ${t(s,`<script ${l('class="gps-link" delay',"src")}="{{ 'gp-lite-youtube-embed-v7-5.js' | asset_url }}" defer="defer"></script>`,`<script ${l('class="gps-link" delay',"src")}="${r}/assets-v2/gp-lite-youtube-embed-v7-5.js?v={{ shop.metafields.GEMPAGES.ASSETS_VERSION }}" defer="defer"></script>`)}
   `};export{LiteYouTubeEmbed as default};

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})=>{let R=o(z,F?.uid),{youtubeUrl:w="",vimeoUrl:x="",html5Url:T,autoplay:U=!1,loopVideo:H=!1,controls:M=!1,mute:O,poster:P,startTime:S,endTime:Y,lazy:A,type:B}=R??{},{youtubeUrlTranslated:D,vimeoUrlTranslated:G}=R,J=N(P),{cssClass:K}=I??{},Q=i(R?.ratioOptions,R?.aspectRatio),W=u({...p({uid:F?.uid||""})}),X=c({...f(R,C)}),Z=c({...y(Q)}),_=c({...b(Q)}),tt=c({...j(Q)}),te=c({...V(z?.aspectRatio)}),to=n({...h()}),ti=n({...k({className:q,builderProps:F,isInstantLP:!1,advancedCssClass:K})}),ts=()=>{switch(B){case"youtube":{let t=m(w),o=e(D);if((!r.test(w)||!t)&&!o)return L({src:d,alt:"Fallback video",className:to,style:te});let i="";return H&&(i+=`&loop=1&playlist=${t}`),S&&(i+=`&start=${a(S)}`),Y&&(i+=`&end=${a(Y)}`),g({uid:F?.uid,id:t??"",translatedVideoUrl:o?D:"",autoplay:U,title:"Video",controls:M,params:i,adNetwork:!1,noCookie:!0,muted:!O,thumbnail:J,lazy:A??!0,preload:P?.preload,poster:P,style:Z})}case"vimeo":{let t=s(x),o=e(G);if((!l.test(x)||!t)&&!o)return L({src:d,alt:"Fallback video",className:to,style:te});return v({muted:!O,loop:H,controls:M,thumbnail:J,thumbnailLink:P?.src,autoplay:U,lazy:A??!0,id:t??"",translatedVideoUrl:o?G:"",title:"Video",aspectRatio:Q,poster:P,vimeoStyleIframe:_})}case"html5":if(!T)return L({src:d,alt:"Fallback video",className:to,style:te});return $({uid:F?.uid,muted:!O,loop:H,controls:M,autoplay:U,src:T,thumbnail:J,title:"Video",poster:P,lazy:A??!0,isVideoComponent:!0,style:tt})}};return t`
     <div
-      ${{...q}} ${{...B}} class="${W}" style="${D}">
-      ${X()}
+      ${{...E}} ${{...W}} class="${ti}" style="${X}">
+      ${ts()}
     </div>
   `};export{Video as default};

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=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:"translate",type:"input",default:[{id:"youtubeUrl"},{id:"vimeoUrl"},{id:"html5Url"},{id:"poster",fields:["src"]}]},{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:{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};