1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[3659],{53659:function(e,t,r){r.r(t),r.d(t,{default:function(){return H}});var i=r(70917),o=r(59499),n=r(29042),a=r(67294),l=r(63079),c=r(65619),d=r(82221),s=r(35944),h=function(e){var t=e.height,r=e.color,i=void 0===r?c.O9.grey900:r,o=.875*t;return(0,s.tZ)("svg",{width:o,height:t,viewBox:"0 0 ".concat(448," ").concat(512),children:(0,s.tZ)("path",{d:"M433.941 65.941L382.059 14.059C373.057 5.05724 360.848 6.65676e-05 348.118 0L176 0C149.49 0 128 21.49 128 48V96H48C21.49 96 0 117.49 0 144V464C0 490.51 21.49 512 48 512H272C298.51 512 320 490.51 320 464V416H400C426.51 416 448 394.51 448 368V99.882C448 87.1516 442.943 74.9427 433.941 65.941ZM266 464H54C52.4087 464 50.8826 463.368 49.7574 462.243C48.6321 461.117 48 459.591 48 458V150C48 148.409 48.6321 146.883 49.7574 145.757C50.8826 144.632 52.4087 144 54 144H128V368C128 394.51 149.49 416 176 416H272V458C272 459.591 271.368 461.117 270.243 462.243C269.117 463.368 267.591 464 266 464ZM394 368H182C180.409 368 178.883 367.368 177.757 366.243C176.632 365.117 176 363.591 176 362V54C176 52.4087 176.632 50.8826 177.757 49.7574C178.883 48.6321 180.409 48 182 48H288V136C288 149.255 298.745 160 312 160H400V362C400 363.591 399.368 365.117 398.243 366.243C397.117 367.368 395.591 368 394 368V368ZM400 112H336V48H345.632C347.223 48 348.749 48.632 349.875 49.757L398.243 98.125C398.8 98.6822 399.242 99.3437 399.544 100.072C399.845 100.8 400 101.58 400 102.368V112Z",fill:i})})},p=a.memo(h),g=r(87098),u=r(74290),f=r(19525);function m(e){var t=e.isChecked,r=e.checkedColor,o=void 0===r?c.O9.grey900:r,n=e.uncheckedColor,a=void 0===n?c.O9.grey600:n,l=e.checkmarkColor,d=void 0===l?c.O9.white:l;return(0,s.tZ)("div",{css:(0,i.iv)({width:16,minWidth:16,height:16,borderRadius:2,display:"flex",justifyContent:"center",alignItems:"center",background:t?o:"none",border:"2px solid ".concat(t?o:a),"> svg":{display:t?"block":"none"},"> svg > path":{fill:d}},"",""),children:(0,s.tZ)(g.Z,{height:7,color:"white"})})}var v=r(28127);var b={name:"11dl2q9",styles:"margin-left:4px;font-weight:600"};function Z(){return(0,s.BX)(v.Z,{type:"button",onClick:function(){window.open("mailto:[email protected]","_blank")},css:(0,i.iv)((0,o.Z)({fontWeight:500,background:c.O9.grey100},c.BC.hover,{":hover > span":{color:c.O9.grey900}}),"",""),children:[(0,s.tZ)("span",{children:"Questions or concerns?"}),(0,s.tZ)("span",{css:b,children:"Email us"})]})}var y=(0,n.Z)("div",{target:"ejhid652"})({fontWeight:700,color:c.O9.grey900,marginBottom:8},""),C=(0,n.Z)("div",{target:"ejhid651"})({name:"1udojs1",styles:"display:flex;align-items:center;> button{margin-right:6px;}> button:last-of-type{margin-right:0;}"}),w=(0,n.Z)(v.Z,{target:"ejhid650"})("padding-left:6px;padding-right:6px;font-weight:500;> div:first-of-type{margin-right:6px;}",(function(e){var t=e.isChecked;return(0,o.Z)({color:t?c.O9.grey900:c.O9.grey600,cursor:t?"inherit":"pointer"},c.BC.hover,{":hover":{background:t?"inherit":c.O9.grey100},":hover > div:first-of-type":{borderColor:c.O9.grey900}})}),""),k={ready:(0,s.tZ)(p,{color:c.O9.grey600,height:18}),success:(0,s.tZ)(g.Z,{color:c.O9.grey600,height:12}),error:(0,s.tZ)(u.Z,{color:c.O9.grey600,height:16})};var x={name:"1z0xzwl",styles:"display:flex;justify-content:center;font-weight:800;font-size:16px"},O={name:"zjik7",styles:"display:flex"},B={name:"pep3y5",styles:"height:100%;padding:0 8px;margin-left:4px"},V={name:"bjn8wh",styles:"position:relative"};function H(e){var t,r=e.pageUrl,n=(0,a.useRef)(),h=(0,a.useState)(d.np.light),p=h[0],g=h[1],u=(0,a.useState)(d.J7.small),b=u[0],H=u[1];function E(e){return function(){g(e)}}function j(e){return function(){H(e)}}var X="".concat("https://odesli.co","/embed/?url=").concat(encodeURIComponent(r),"&theme=").concat(p),z=function(e){var t=e.size,r=e.src;return t===d.J7.large?'<div style="max-width:100%;"><div style="position:relative;padding-bottom:calc(56.25% + 52px);height: 0;"><iframe style="position:absolute;top:0;left:0;" width="100%" height="100%" src="'.concat(r,'" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-presentation allow-popups allow-popups-to-escape-sandbox" allow="clipboard-read; clipboard-write"></iframe></div></div>'):t===d.J7.medium?'<iframe width="100%" height="150" src="'.concat(r,'" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-presentation allow-popups allow-popups-to-escape-sandbox" allow="clipboard-read; clipboard-write"></iframe>'):'<iframe width="100%" height="52" src="'.concat(r,'" frameborder="0" allowfullscreen sandbox="allow-same-origin allow-scripts allow-presentation allow-popups allow-popups-to-escape-sandbox" allow="clipboard-read; clipboard-write"></iframe>')}({size:b,src:X});return(0,s.BX)("div",{css:(0,i.iv)((t={padding:"0 16px ".concat(c.oc,"px")},(0,o.Z)(t,c.AV.mobile,{padding:"0 12px ".concat(c.oc,"px")}),(0,o.Z)(t,"> div",{marginBottom:24}),(0,o.Z)(t,"> div:first-of-type",{marginBottom:16}),(0,o.Z)(t,"> div:last-of-type",{marginBottom:0}),t),"",""),children:[(0,s.tZ)("div",{css:x,children:"EMBED THIS PAGE"}),(0,s.BX)("div",{children:[(0,s.tZ)(y,{children:"THEME"}),(0,s.tZ)(C,{children:Object.keys(d.np).map((function(e){return(0,s.BX)(w,{role:"checkbox","aria-label":"Change embed size to ".concat(e),onClick:E(e),isChecked:e===p,disabled:e===p,children:[(0,s.tZ)(m,{isChecked:e===p}),(0,s.tZ)("span",{children:e})]},e)}))})]}),(0,s.BX)("div",{children:[(0,s.tZ)(y,{children:"SIZE"}),(0,s.tZ)(C,{children:Object.keys(d.J7).map((function(e){return(0,s.BX)(w,{role:"checkbox","aria-label":"Change embed size to ".concat(e),onClick:j(e),isChecked:e===b,disabled:e===b,children:[(0,s.tZ)(m,{isChecked:e===b}),(0,s.tZ)("span",{children:e})]},e)}))})]}),(0,s.BX)("div",{children:[(0,s.tZ)(y,{children:"CODE"}),(0,s.BX)("div",{css:O,children:[(0,s.tZ)("input",{ref:n,value:z,onClick:function(){n&&n.current&&n.current.select()},readOnly:!0,css:(0,i.iv)({width:"100%",padding:6,fontSize:12,fontWeight:500,appearance:"none",border:"1px solid ".concat(c.O9.grey500),borderRadius:3},"","")}),(0,s.tZ)(l.Z,{value:z,render:function(e){return(0,s.tZ)(v.Z,{type:"button","aria-label":"Copy the embed code for this page",css:B,children:k[e]})}})]})]}),(0,s.BX)("div",{children:[(0,s.tZ)(y,{children:"PREVIEW"}),(0,s.tZ)("div",{css:V,children:(0,s.tZ)("div",{dangerouslySetInnerHTML:{__html:z},css:(0,i.iv)({"> iframe, > div":{boxShadow:c.kr,borderRadius:3,overflow:"hidden"}},"","")})})]}),(0,s.BX)(f.Z,{children:[(0,s.tZ)("span",{children:"You can programmatically/manually create embed codes if you have music streaming link, e.g. a Spotify track URL. Learn more "}),(0,s.tZ)("a",{href:"https://www.notion.so/8639486f8e014c4d9b37ccfbe5cb6276",target:"_blank",rel:"noopener noreferrer",css:(0,i.iv)((0,o.Z)({fontWeight:600,color:c.O9.grey600},c.BC.hover,{":hover":{color:c.O9.grey900}}),"",""),children:"in our docs"}),(0,s.tZ)("span",{children:"."})]}),(0,s.tZ)("div",{children:(0,s.tZ)(Z,{})})]})}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.