https://www.levolor.ca/189.467f7f1558cce7b35305.js

1/*!
2 * @version f517a5a-dev
3 * 
4 */
5(window.webpackJsonp=window.webpackJsonp||[]).push([[189],{CWMu:function(e,t,n){"use strict"
6var i=n("JPst"),o=n.n(i)()(function(e){return e[1]})
7o.push([e.i,".videoGrid-root-5b- {\n    display: flex;\n    flex-direction: column;\n}\n\n.videoGrid-videoList-rr6 {\n    margin: 0 22px;\n    height: 100vh;\n    overflow: scroll;\n}\n\n@media (min-width: 1024px) {\n    .videoGrid-root-5b- {\n        flex-direction: row;\n    }\n\n    .videoGrid-video-PMR {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        align-self: flex-start;\n        width: 66%;\n    }\n\n    .videoGrid-videoList-rr6 {\n        width: 34%;\n        padding: 0 22px;\n        margin: 2px 0 0;\n        height: auto;\n        overflow: auto;\n    }\n}\n",""]),o.locals={root:"videoGrid-root-5b-",videoList:"videoGrid-videoList-rr6",video:"videoGrid-video-PMR"},t.a=o},ETQj:function(e,t,n){"use strict"
8var i=n("JPst"),o=n.n(i)()(function(e){return e[1]})
9o.push([e.i,".videoGridItem-root-VXQ {\n    display: flex;\n    justify-content: space-between;\n    padding: 22px;\n    width: 100%;\n    border: 2px solid transparent;\n}\n\n.videoGridItem-root-VXQ:nth-child(odd) {\n    background-color: rgb(var(--levolor-global-color-gray-100));\n}\n\n.videoGridItem-root-VXQ.videoGridItem-active-LxE {\n    border: 2px solid rgb(var(--levolor-global-color-blue-400));\n}\n\n.videoGridItem-content-h7T {\n    text-align: left;\n}\n\n.videoGridItem-subtitle-hs1 {\n    font-size: var(--levolor-global-fontSize-13);\n    margin-bottom: 10px;\n}\n\n.videoGridItem-title-W-i {\n    font-size: var(--levolor-global-fontSize-16);\n    font-weight: var(--levolor-global-fontWeight-semiBold);\n    line-height: 1.2;\n}\n\n.videoGridItem-image-fjb {\n    width: 120px;\n    border-radius: 3px;\n}\n\n@media (min-width: 1024px) {\n    .videoGridItem-root-VXQ {\n        padding: 44px 22px 44px 60px;\n    }\n    .videoGridItem-content-h7T {\n        max-width: 45%;\n    }\n}\n",""]),o.locals={root:"videoGridItem-root-VXQ",active:"videoGridItem-active-LxE",content:"videoGridItem-content-h7T",subtitle:"videoGridItem-subtitle-hs1",title:"videoGridItem-title-W-i",image:"videoGridItem-image-fjb"},t.a=o},EY6B:function(e,t,n){"use strict"
10n.r(t),n.d(t,"default",function(){return H})
11var i,o=n("q1tI"),a=n.n(o),r=n("17x9"),l=n("y1Xp"),s=n("VkAN"),d=n.n(s),c=n("UYTu"),u={getVideosQuery:Object(c.a)(i||(i=d()(["\n    query Videos {\n        Videos {\n            subtitle\n            title\n            html\n            thumbnailUrl: thumbnail_url\n        }\n    }\n"])))},v=n("+TN3"),g=n("LboF"),m=n.n(g),b=n("CWMu"),p={injectType:"singletonStyleTag",insert:"head",singleton:!0},h=(m()(b.a,p),b.a.locals||{}),f=n("fYfj"),j={injectType:"singletonStyleTag",insert:"head",singleton:!0},y=(m()(f.a,j),f.a.locals||{}),E=function Video(e){var t=e.video,n=Object(l.a)(y,e.classes)
12return a.a.createElement("div",{className:n.root},a.a.createElement("div",{className:n.video},a.a.createElement("div",{dangerouslySetInnerHTML:{__html:null==t?void 0:t.html}}),a.a.createElement("div",{className:n.content},a.a.createElement("div",{className:n.playing},"Now Playing"),a.a.createElement("h5",{className:n.subtitle},null==t?void 0:t.subtitle),a.a.createElement("h4",{className:n.title},null==t?void 0:t.title))))},O=E
13E.propTypes={classes:Object(r.shape)({root:r.string,video:r.string,content:r.string,playing:r.string,subtitle:r.string,title:r.string}),video:Object(r.shape)({subtitle:r.string,title:r.string,html:r.string,thumbnail:r.string,__typename:r.string})}
14var x=n("lSNA"),T=n.n(x),V=n("ETQj"),w={injectType:"singletonStyleTag",insert:"head",singleton:!0},G=(m()(V.a,w),V.a.locals||{}),N=n("dqi2"),I=n("TSYQ"),L=n.n(I),k=function VideoGridItem(e){var t=e.video,n=e.handleChangeVideo,i=e.isActive,o=Object(l.a)(G,e.classes)
15return a.a.createElement("button",{onClick:function onClick(){return n(t)},type:"button",className:L()(o.root,T()({},o.active,i))},a.a.createElement("div",{className:o.content},a.a.createElement("h5",{className:o.subtitle},null==t?void 0:t.subtitle),a.a.createElement("h4",{className:o.title}

15,null==t?void 0:t.title)),a.a.createElement(N.a,{alt:null==t?void 0:t.title,className:o.image,src:null==t?void 0:t.thumbnailUrl}))},S=k
16k.propTypes={classes:Object(r.shape)({root:r.string,content:r.string,subtitle:r.string,title:r.string,image:r.string}),handleChangeVideo:r.func.isRequired,isActive:r.bool.isRequired,video:Object(r.shape)({subtitle:r.string,title:r.string,html:r.string,thumbnail:r.string,__typename:r.string}).isRequired}
17var q=n("J4zp"),z=n.n(q),M=function VideoGrid(e){var t=e.videos,n=Object(l.a)(h,e.classes),i=function useVideoGrid(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).initialVideo,t=Object(o.useState)(e),n=z()(t,2),i=n[0],a=n[1]
18return Object(o.useEffect)(function(){a(e)},[e,a]),{activeVideo:i,handleChangeVideo:Object(o.useCallback)(function(e){a(e)},[a])}}({initialVideo:t[0]}),r=i.activeVideo,s=i.handleChangeVideo,d=t.length?t.map(function(e){return a.a.createElement(S,{key:e.title,video:e,handleChangeVideo:s,isActive:e===r})}):null
19return a.a.createElement("div",{className:n.root},a.a.createElement("div",{className:n.video},a.a.createElement(O,{video:r})),a.a.createElement("div",{className:n.videoList},d))},C=a.a.memo(M)
20M.propTypes={classes:Object(r.shape)({root:r.string,video:r.string,videoList:r.string}),videos:r.array}
21var J=n("RqMe"),P={injectType:"singletonStyleTag",insert:"head",singleton:!0},Q=(m()(J.a,P),J.a.locals||{}),R=n("dDsW"),W=n("rLZa"),A=n("YGUA"),X=n("Ty5D"),_=n("l8Wj"),Y=n("3dzz"),B=function HowToVideosPage(e){var t=Object(l.a)(Q,e.classes),n=function useVideos(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=Object(l.a)(u,e.operations).getVideosQuery,n=Object(v.a)(t,{fetchPolicy:"cache-and-network",nextFetchPolicy:"cache-first"}),i=n.data,a=n.loading
22return{videoData:Object(o.useMemo)(function(){return i?i.Videos:[]},[i]),loading:a}}(),i=n.videoData,r=n.loading,s=(0,Object(R.a)().formatMessage)({id:"howToVideos.pageTitle",defaultMessage:"How To Videos | LEVOLOR"}),d=Object(X.h)().pathname
23return Object(_.a)({identifier:d}),a.a.createElement("div",{className:t.root},a.a.createElement(W.a,null,s),a.a.createElement(A.a,{title:s}),r?a.a.createElement(Y.a,null):a.a.createElement(C,{videos:i}))},H=a.a.memo(B)
24B.propTypes={classes:Object(r.shape)({root:r.string})}},JtVe:function(e,t,n){"use strict"
25n.d(t,"a",function(){return i})
26var i=function removeLeadingAndTrailingSlashes(e){return e.replace(/^\/|\/$/g,"")}},RqMe:function(e,t,n){"use strict"
27var i=n("JPst"),o=n.n(i)()(function(e){return e[1]})
28o.push([e.i,"",""]),o.locals={},t.a=o},dqi2:function(e,t,n){"use strict"
29var i=n("pVnL"),o=n.n(i),a=n("QILm"),r=n.n(a),l=n("q1tI"),s=n.n(l),d=n("17x9"),c=["alt","className","handleError","handleLoad","height","src","width"],u=function SimpleImage(e){var t=e.alt,n=e.className,i=e.handleError,a=e.handleLoad,l=e.height,d=e.src,u=e.width,v=r()(e,c)
30return s.a.createElement("img",o()({loading:"lazy"},v,{alt:t,className:n,height:l,onError:i,onLoad:a,src:d,width:u}))}

31u.propTypes={alt:d.string.isRequired,className:d.string,handleError:d.func,handleLoad:d.func,height:Object(d.oneOfType)([d.number,d.string]),src:d.string.isRequired,width:Object(d.oneOfType)([d.number,d.string])},t.a=u},fYfj:function(e,t,n){"use strict"
32var i=n("JPst"),o=n.n(i)()(function(e){return e[1]})
33o.push([e.i,".video-content-6wN {\n    padding: 22px;\n}\n\n.video-playing--46 {\n    color: rgb(var(--levolor-global-color-white));\n    background-color: rgb(var(--levolor-global-color-blue-400));\n    padding: 8px 12px;\n    margin-bottom: 16px;\n    border-radius: 3px;\n    display: inline-block;\n}\n\n.video-subtitle-pNJ {\n    font-size: var(--levolor-global-fontSize-14);\n    margin-bottom: 10px;\n}\n\n.video-title-eeL {\n    font-size: var(--levolor-global-fontSize-18);\n}\n",""]),o.locals={content:"video-content-6wN",playing:"video-playing--46",subtitle:"video-subtitle-pNJ",title:"video-title-eeL"},t.a=o},l8Wj:function(e,t,n){"use strict"
34var i=n("UFbC"),o=n("q1tI"),a=n("9rXH"),r=n("JtVe")
35t.a=function useBreadcrumbsPath(e){var t=e.identifier,n=e.pageHeading,l=Object(i.gb)(),s=Object(o.useMemo)(function(){return null==l?void 0:l.find(function(e){var n
36return null===(n=e.children)||void 0===n?void 0:n.find(function(e){return Object(r.a)(e.link)===Object(r.a)(t.replace(/^\/|\/$/g,""))})})},[t,l]),d=Object(o.useMemo)(function(){var e
37return(null==s?void 0:null===(e=s.children.find(function(e){return Object(r.a)(e.link)===Object(r.a)(t.replace(/^\/|\/$/g,""))}))||void 0===e?void 0:e.title)||""},[t,s])
38return Object(o.useEffect)(function(){d&&d.length||n?setTimeout(function(){Object(a.b)({title:d||n,buttons:[],parentBreadcrumbElement:s})},0):setTimeout(function(){Object(a.b)({title:"",buttons:[],price:""})},0)},[n,d,s]),Object(o.useEffect)(function(){return function(){Object(a.b)({title:"",buttons:[],price:""})}},[]),{parentBreadcrumbElement:s,pageTitle:d}}}}])