2 lines
12 KiB
JavaScript
Executable File
2 lines
12 KiB
JavaScript
Executable File
"use strict";(("undefined"!=typeof self?self:global).webpackChunkopen=("undefined"!=typeof self?self:global).webpackChunkopen||[]).push([[8228],{28127:(e,t,a)=>{a.d(t,{FeatureActivationShelf:()=>xe});var n=a(59496),i=a(89605),s=a(36844),l=a(5866),o=a(50346),r=a(3802),c=a(56162),d=a(63082),u=a(91546),h=a(66490),g=a(84875),f=a.n(g),m=a(66777),p=a(42006);const y="uDOC2Oah0jn_p7N7l2Id",C="hwhquP1FOxRcCnf84P2M",v="bijDFKtWL1TJBF7X9Gp3",S="NTywvDEuW1PlcoR__9XV",x="t1SDLPBbSPbfihznNZdi",b="CvyMWBz1l8dSOsf4r_Ha",j="R32cBJPV9ccjWJYS1TLI",k="fzmowfLpLz7UlIyJThU8",E="MIBwSRJ5XZaCw1WWXXBn",N="dEuzpK3s_BmlRiVNFude",I="MVRnUhNC4ZMglLR56YMn",w="xiaMaZPt8ykPGR8gkQ53",L="mwBKJFOe7ee6V2MdmJyB",F="LziKPm9lTkWR0I7zD_rC";var A=a(4637);const P=n.memo((function({image:e}){return(0,A.jsx)("div",{className:v,children:(0,A.jsx)("div",{className:S,children:(0,A.jsx)(p.E,{className:x,src:e,loading:"lazy"})})})}));var _=a(52052),B=a(28291);const R="mKkYwwDvRoTIEnqf9Mlt",D="ES02HhKmADP_AdcKPs1e",T="IYwEYGRUJ5RTtr0EyBV1",U="YYlv5PB5fGQthi9XzTQg",Q=n.memo((({isLoading:e})=>{const t=(0,B.h)("shimmer");return(0,A.jsx)("div",{ref:t,className:f()(S,{[U]:e})})})),z=n.memo((({cardImage:e,isLoading:t})=>(0,A.jsxs)("div",{className:f()(C,R),"aria-hidden":!0,children:[(0,A.jsx)("div",{className:v,children:e||(0,A.jsx)(Q,{isLoading:t})}),(0,A.jsx)("div",{className:b,children:(0,A.jsxs)("div",{className:j,children:[(0,A.jsx)(_.C,{as:"div",variant:"balladBold",className:D,charCount:10,isLoading:t}),(0,A.jsx)(_.C,{as:"div",variant:"mesto",className:T,charCount:15,isLoading:t})]})})]}))),V=n.memo((function({children:e,image:t,isLoading:a,onClick:n,id:i}){return a?(0,A.jsx)(z,{isLoading:!0}):(0,A.jsxs)("div",{className:f()(C),onClick:n,children:[(0,A.jsx)(P,{image:t}),(0,A.jsx)("div",{className:b,children:(0,A.jsx)("div",{className:j,children:(0,A.jsxs)("div",{className:k,children:[(0,A.jsx)(m.D,{color:getComputedStyle(document.body).getPropertyValue("--spice-text").trim(),height:"18",className:E}),e]})})}),(0,A.jsx)("div",{"data-testid":i,onClick:n,className:y})]})})),W="https://newsroom.spotify.com/2021-09-09/get-perfect-song-recommendations-in-the-playlists-you-create-with-enhance/",M=n.memo((function({isLoading:e=!1,spec:t,logger:a,setInteractionState:i,interactionState:s}){const{openURL:l}=(0,h.e)();(0,n.useEffect)((()=>{a.logImpression(t.shelfContainerFactory().enchanceCardFactory().impression())}),[t,a]);const o=(0,n.useCallback)((e=>{e.stopPropagation(),a.logInteraction(t.shelfContainerFactory().enchanceCardFactory().hitNavigateToExternalUri({destination:W})),i({...s,clickedEnhanceCard:!0}),l(W)}),[l,t,a,i,s]);return(0,A.jsxs)(V,{image:(0,u.g)("images/feature-activation-shelf-enhance-placeholder.png"),isLoading:e,onClick:o,children:[(0,A.jsx)(c.D,{as:"p",variant:"balladBold",className:N,children:r.ag.get("web-player.feature-activation-shelf.enhance-placeholder.title")}),(0,A.jsx)(c.D,{as:"p",variant:"mesto",className:I,children:r.ag.get("web-player.feature-activation-shelf.enhance.description")}),(0,A.jsx)(d.P,{className:w,buttonSize:"sm",onClick:o,children:r.ag.get("web-player.feature-activation-shelf.enhance-placeholder.cta")})]})}));var G=a(4898),H=a(68640),J=a(36747),q=a(54455);function O({items:e}){return e.filter(q.no).find((e=>e.isOwnedBySelf&&e.totalLength>0))??null}const K={offset:0,limit:50,flatten:!0,sort:{field:q.bD.RELEVANCE,order:q.As.DESC}};var Y=a(41836),X=a(96170),Z=a(23046),$=a(48271);const ee=n.memo((function({isLoading:e=!1,playlist:t,toggleEnhanceState:a,navigateToPlaylist:i,spec:s,logger:l,setInteractionState:o,interactionState:u}){const{isEnhanced:h}=(0,$.U)(t.metadata.uri);(0,n.useEffect)((()=>{l.logImpression(s.shelfContainerFactory().enchanceCardFactory().impression())}),[s,l]);const g=(0,n.useCallback)((()=>{l.logInteraction(s.shelfContainerFactory().enchanceCardFactory().hitEnhancePlaylist({playlist:t.metadata.uri})),i(t.metadata.uri),h||a(),o({...u,clickedEnhanceCard:!0})}),[a,h,t.metadata.uri,i,l,s,u,o]);return(0,A.jsxs)(V,{image:t.metadata.images[0].url,isLoading:e,onClick:g,children:[(0,A.jsx)(c.D,{as:"p",variant:"balladBold",className:N,children:r.ag.get("web-player.feature-activation-shelf.enhance.title",{playlist:t.metadata.name})}),(0,A.jsx)(c.D,{as:"p",variant:"mesto",className:I,children:r.ag.get("web-player.feature-activation-shelf.enhance.description")}),(0,A.jsx)(d.P,{className:f()(w,{[L]:h}),buttonSize:"sm",iconLeading:Z.e,onClick:g,children:h?r.ag.get("web-player.feature-activation-shelf.enhance.cta-enhanced"):r.ag.get("web-player.feature-activation-shelf.enhance.cta")})]})}));var te=a(58527);const ae=n.memo((function({isLoading:e=!1,spec:t,logger:a,setInteractionState:i,interactionState:s}){const{setVisible:l}=(0,n.useContext)(te.O);(0,n.useEffect)((()=>{a.logImpression(t.shelfContainerFactory().groupSessionsCardFactory().impression())}),[t,a]);const o=()=>{a.logInteraction(t.shelfContainerFactory().groupSessionsCardFactory().hitUiReveal()),i({...s,clickedGroupSessionsCard:!0}),l(!0)};return(0,A.jsxs)(V,{image:(0,u.g)("images/feature-activation-shelf-group-sessions.png"),isLoading:e,onClick:o,children:[(0,A.jsx)(c.D,{as:"p",variant:"balladBold",className:N,children:r.ag.get("web-player.feature-activation-shelf.group-sessions.title")}),(0,A.jsx)(c.D,{as:"p",variant:"mesto",className:I,children:r.ag.get("web-player.feature-activation-shelf.group-sessions.description")}),(0,A.jsx)(d.P,{className:w,buttonSize:"sm",onClick:o,children:r.ag.get("web-player.feature-activation-shelf.group-sessions.cta")})]})}));var ne=a(37433),ie=a(66953),se=a(42261);const le=n.memo((function({isLoading:e=!1,spec:t,logger:a,interactionState:s,setInteractionState:l}){const o=(0,i.s0)(),{isAvailable:h,isEnabled:g,enableVeryHighQualityAudio:m}=(()=>{const{settings:{values:e},setValue:t}=(0,se.r)(),a=e["audio.play_bitrate_enumeration"];return{isAvailable:!!a&&(0,ie.kN)(a.toString(),e)&&(0,ie.gj)(e),isEnabled:a===ie.PF.veryhigh.enum.toString(),enableVeryHighQualityAudio:()=>{t("audio.play_bitrate_non_metered_enumeration",ie.PF.veryhigh.enum),t("audio.play_bitrate_enumeration",ie.PF.veryhigh.enum)}}})();(0,n.useEffect)((()=>{h&&a.logImpression(t.shelfContainerFactory().audioQualityCardFactory().impression())}),[t,a,h]),(0,n.useEffect)((()=>{g&&l({...s,hasVeryHighQualityAudio:!0})}),[g,s,l]);const p=e=>{const n="/preferences"+(e?`?${e}`:"");a.logInteraction(t.shelfContainerFactory().audioQualityCardFactory().hitUiNavigate({destination:n})),o(n),l({...s,clickedAudioQualityCard:!0})},y=()=>{a.logInteraction(t.shelfContainerFactory().audioQualityCardFactory().hitSetSettingField()),m(),p("feature-activation")};return h?(0,A.jsxs)(V,{image:(0,u.g)("images/feature-activation-shelf-audio-quality.png"),isLoading:e,id:"audio-quality-card",onClick:g?()=>p():y,children:[(0,A.jsx)(c.D,{as:"p",variant:"balladBold",className:N,children:r.ag.get("web-player.feature-activation-shelf.audio-quality.title")}),(0,A.jsx)(c.D,{as:"p",variant:"mesto",className:I,children:r.ag.get("web-player.feature-activation-shelf.audio-quality.description")}),(0,A.jsx)(d.P,{className:f()(w,{[F]:g}),onClick:g?()=>p():y,buttonSize:"sm",iconLeading:g?ne.N:void 0,children:g?r.ag.get("web-player.feature-activation-shelf.audio-quality.cta_alt"):r.ag.get("web-player.feature-activation-shelf.audio-quality.cta")})]}):null}));var oe=a(40576),re=a(59359),ce=a(23329),de=a(22345);const ue="RvSsw_CWBCtHhojt6bY_",he=n.memo(n.forwardRef((function(e,t){const{className:a,render:i}=e,s=(0,n.useRef)(null),[l,o]=(0,n.useState)({columnCount:-1,columnWidth:-1,gridGap:24});(0,n.useImperativeHandle)(t,(()=>s.current));const r=(0,n.useCallback)((()=>{const e=s.current;if(!e||!e.parentElement)return;const t=e.parentElement.offsetWidth,a=(e=>e<700?1:e<1e3?2:3)(t),n=(e=>2===e?12:3===e?18:24)(a),i=Math.floor((t-(a-1)*n)/a);o({columnCount:a,columnWidth:i,gridGap:n})}),[]);(0,de.y)({refOrElement:s,observeOnly:"width",onResize:()=>{r()}}),(0,n.useLayoutEffect)((()=>{r()}),[r]);const c={"--column-width":`${l.columnWidth}px`,"--column-count":`${l.columnCount}`,"--grid-gap":`${l.gridGap}px`};return(0,A.jsx)("div",{ref:s,className:f()(ue,a),style:c,children:i(l)})})));he.displayName="GridContainer";const ge="QD8u8vCxcfIpJC14IBqg",fe="H4yLgZB7CQJlPH3u5Qbi",me="jNsZ_X7AAz13oxU5Sx0G",pe=n.memo((function({title:e,children:t,seeAllUri:a,className:i="",testId:s="component",seeAllLabel:l,onClickShelfTitle:o,onClickShelfSeeAll:r,elementRef:c}){const d=(0,n.useCallback)((({columnCount:e})=>(0,A.jsx)(A.Fragment,{children:Array.isArray(t)&&t.filter(((t,a)=>a<e))})),[t]);return Array.isArray(t)&&0===t.length?null:(0,A.jsxs)("section",{ref:c,className:f()(i,ge),"data-testid":`${s}-shelf`,"aria-label":e,children:[(0,A.jsx)("div",{className:fe,children:(0,A.jsx)(re.r,{title:e,seeAllUri:a,seeAllLabel:l,hasMoreElements:!0,onClickTitle:o,onClickSeeAll:r})}),(0,A.jsx)(he,{className:f()(me),render:d})]})}));pe.displayName="BaseShelf";const ye=e=>(0,A.jsx)(oe.L,{onError:e=>{(0,ce.vK)(e,"Shelf")},children:(0,A.jsx)(pe,{...e})});var Ce=a(9407);const ve=e=>e.desktopSessionsSinceInteraction>=2||e.desktopSessions>=15;const Se="https://support.spotify.com/us/article/premium-plans/",xe=n.memo((function(){const{loading:e,error:t,toggleEnhanceState:a,playlistWithEnhanceState:c}=function(){const e=(0,J.o)(),t=(0,G._)(),a=(0,n.useContext)(H.ZF),i=(0,n.useMemo)((()=>function(e){return async function(t){if(null===t)return null;try{const a=await e.getPlaylist(t.uri);return a?.metadata.hasSpotifyTracks?a:null}catch(e){return null}}}(a)),[a]),s=(0,n.useMemo)((()=>function(e){return async function(t){if(null===t)return null;try{const{isEnhanced:a}=await e.getContextState(t.metadata.uri);return{...t,isEnhanced:a}}catch(e){return null}}}(t)),[t]),[l,o]=(0,n.useState)(null),[r,c]=(0,n.useState)(!1),[d,u]=(0,n.useState)(null);(0,n.useEffect)((()=>{c(!0),e.getContents(K).then(O).then(i).then(s).then(o).catch(u).finally((()=>c(!1)))}),[e,i,s]);const h=(0,n.useCallback)((()=>null===l?Promise.reject("No playlist found."):t.getContextState(l.metadata.uri).then((e=>t.setIsEnhanced(l.metadata.uri,!e.isEnhanced)))),[l,t]);return{loading:r,playlistWithEnhanceState:l,toggleEnhanceState:h,error:d}}(),d=(0,i.s0)(),{spec:u,logger:h}=(0,X.fU)(l.createDesktopFeatureActivationShelfEventFactory,{}),{interactionState:g,setInteractionState:f,hideShelf:m}=function(e){const[t,a]=(0,Ce.z)("feature-activation-shelf-v2",{clickedGroupSessionsCard:!1,clickedEnhanceCard:!1,hasEnhancedPlaylist:!1,clickedAudioQualityCard:!1,hasVeryHighQualityAudio:!1,desktopSessions:0,desktopSessionsSinceInteraction:0});return(0,n.useEffect)((()=>{const e=t.clickedEnhanceCard||t.hasEnhancedPlaylist,n=t.clickedAudioQualityCard||t.hasVeryHighQualityAudio;t.clickedGroupSessionsCard&&e&&n&&a({...t,desktopSessionsSinceInteraction:t.desktopSessionsSinceInteraction+1}),a({...t,desktopSessions:t.desktopSessions+1})}),[]),(0,n.useEffect)((()=>{null!==e&&e.isEnhanced&&a({...t,hasEnhancedPlaylist:!0})}),[e,t,a]),{hideShelf:ve(t),interactionState:t,setInteractionState:a}}(c);(0,n.useEffect)((()=>{m?h.logImpression(u.hideShelfImpressionElementFactory().impression()):h.logImpression(u.shelfContainerFactory().impression())}),[u,h,m]);const p=(0,n.useCallback)((e=>{const t=(0,o.EC)(e).toURLPath(!0);d(t)}),[d]),y=null!==c&&!t,C=(0,n.useCallback)((()=>{h.logInteraction(u.shelfTitleFactory().hitNavigateToExternalUri({destination:Se}))}),[u,h]),v=(0,n.useCallback)((()=>{h.logInteraction(u.seeAllFeaturesFactory().hitNavigateToExternalUri({destination:Se}))}),[u,h]),S=(0,s.W6)(Y.Up,{loadingValue:!1});return m?null:(0,A.jsxs)(ye,{seeAllUri:Se,title:r.ag.get("web-player.feature-activation-shelf.title"),seeAllLabel:r.ag.get("web-player.feature-activation-shelf.see_more"),onClickShelfTitle:C,onClickShelfSeeAll:v,children:[S&&(y?(0,A.jsx)(ee,{playlist:c,isLoading:e,toggleEnhanceState:a,navigateToPlaylist:p,spec:u,logger:h,setInteractionState:f,interactionState:g}):(0,A.jsx)(M,{isLoading:e,spec:u,logger:h,setInteractionState:f,interactionState:g})),(0,A.jsx)(ae,{isLoading:e,spec:u,logger:h,setInteractionState:f,interactionState:g}),(0,A.jsx)(le,{isLoading:e,spec:u,logger:h,setInteractionState:f,interactionState:g})]})}))}}]);
|
|
//# sourceMappingURL=xpui-feature-activation-shelf.js.map
|