\n \n
\n \n \n
\n \n \n
\n \n
\n {Icon &&
\n {infoDisplay}
\n {expiryDisplay}
\n \n
\n \n
\n \n
\n Saved Cards
\n {cards.length > 9 && (\n\n
\n )}\n {responseMessage && (\n You've saved the maximum of ten cards.
\nTo save a new card, remove a previously saved card from the list.
\n\n
\n )}\n {responseMessage}
\n\n
\n - \n \n
- Card \n
- Expires \n
- Remove \n
- \n {cards.map((card) => (\n
\n
\n Cookie Preferences
\n\n \n {loading ? \"Loading...\" : \"Manage Preferences\"}\n \n \n
\n \n You can easily opt in or out of cookies at any time. See our{\" \"}\n cookie policy for more information.\n
\nLoading ...
\n \n
\n \n {error.graphQLErrors.map(({ message }, i) => (\n
\n {message}
\n ))}\n\n \n
\n \n \n {primary.button_url && (\n \n
\n )\n}\n\nconst IconMap = {\n Info: InfoIcon,\n More: MoreIcon,\n Play: PlayIcon,\n}\n\nexport default Button\n","import { useEffect, useRef, useCallback } from \"react\"\n\nconst LazyLoad = (props) => {\n const adjustSrcs = (el) => {\n const newImgSrc = el.dataset.src\n const newImgSrcSet = el.dataset.srcset\n const newImgStyle = el.dataset.style\n // only swap out the image source if the new url exists\n if (!newImgSrc && !newImgSrcSet && !newImgStyle) {\n console.error(\"Image source is invalid\")\n } else {\n if (newImgSrc) {\n el.src = newImgSrc\n }\n if (newImgSrcSet) {\n el.srcset = newImgSrcSet\n }\n if (newImgStyle) {\n el.style = newImgStyle\n }\n el.className = el.className.replace(/\\blazy\\b/g, \" \").trim()\n }\n // adjust the wrapper if necessary\n const wrapper = el.closest(\".lazyWrapper\")\n if (wrapper) {\n wrapper.className = wrapper.className.replace(/\\blazyWrapper\\b/g, \" \").trim()\n }\n }\n\n // the imageObserver method for newer browsers\n const currentEl = useRef()\n\n const imgObserver = useCallback((node) => {\n const intObs = new IntersectionObserver(\n (entries) => {\n entries.forEach((en) => {\n if (en.intersectionRatio > 0) {\n const currentImg = en.target\n adjustSrcs(currentImg)\n intObs.unobserve(node) // detach the observer when done\n }\n })\n },\n {\n root: null,\n threshold: [0.0, 0.05, 0.25],\n }\n )\n intObs.observe(node)\n }, [])\n\n useEffect(() => {\n if (currentEl.current) {\n var lazyEl = currentEl.current.querySelector(\".lazy\")\n if (\"IntersectionObserver\" in window) {\n imgObserver(lazyEl)\n } else {\n // we don't lazyload for older browsers\n adjustSrcs(lazyEl)\n }\n }\n }, [imgObserver, currentEl])\n\n return (\n \n {Icon && \n {primary.button_text}\n \n
\n \n )}\n \n {props.children}\n
\n )\n}\n\nexport default LazyLoad\n","// extracted by mini-css-extract-plugin\nexport default {\"cta\":\"CallToAction-module_cta__KWWPl\",\"contain\":\"CallToAction-module_contain__CSJWE\",\"text\":\"CallToAction-module_text__sSGHp\",\"button\":\"CallToAction-module_button__HFUq7\"};","import { PrismicRichText } from \"@prismicio/react\"\nimport cx from \"classnames\"\nimport htmlSerializer from \"../../utils/prismicHTMLSerializer\"\nimport LazyLoad from \"../../components/LazyLoad\"\nimport Button from \"../../components/prismic/Button\"\nimport styles from \"../../styles/CallToAction.module.scss\"\n\nconst CallToAction = ({ slice }) => {\n const { primary } = slice\n const bgImg = `background: url( ${primary.cta_image.url} ) center center / cover no-repeat;`\n\n return (\n \n
\n \n
\n \n \n
\n \n
\n )\n}\n\nconst TagItems = ({ selectedArtist, tagCategory, tags }) => {\n return tags.map((tag) => {\n return (\n \n
\n \n {artists.map((artist, index) => {\n return (\n
\n \n
\n - \n
- \n
\n
\n \n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n \n
\n )}\n \n )\n}\n\nexport default EmailSignUpForm\n","// extracted by mini-css-extract-plugin\nexport default {\"emailSignUpContainer\":\"EmailSignUpContainer-module_emailSignUpContainer__C2uPl\",\"contain\":\"EmailSignUpContainer-module_contain__hWEEH\",\"text\":\"EmailSignUpContainer-module_text__M9EE9\"};","import cx from \"classnames\"\nimport { PrismicRichText } from \"@prismicio/react\"\nimport htmlSerializer from \"../../../shared/utils/prismicHTMLSerializer\"\nimport ctaStyles from \"../../../shared/styles/CallToAction.module.scss\"\nimport LazyLoad from \"../../../shared/components/LazyLoad\"\nimport EmailSignUpForm from \"./EmailSignUpForm\"\nimport styles from \"../styles/EmailSignUpContainer.module.scss\"\n\nconst EmailSignUpContainer = ({ slice }) => {\n const { primary } = slice\n const bgImg = `background: url( ${primary.background_image.url} ) center center / cover no-repeat;`\n\n return (\n \n
\n \n
\n \n {primary.kicker}\n
\n )\n default:\n return (\n \n {primary.kicker}\n
\n )\n }\n }\n\n return (\n\n
\n \n
\n \n \n \n
\n \n
\n \n
\n \n ![]()
\n
\n \n \n ![{props.image.alt}]()
\n \n
\n )\n}\n\nexport default BasicImage\n","// extracted by mini-css-extract-plugin\nexport default {\"hero\":\"Hero-module_hero__VsNIa\",\"contain\":\"Hero-module_contain__gE9jd\",\"imageCol\":\"Hero-module_imageCol__zOz49\",\"descriptionCol\":\"Hero-module_descriptionCol__zo3sg\"};","import { PrismicRichText } from \"@prismicio/react\"\nimport cx from \"classnames\"\nimport htmlSerializer from \"../../../shared/utils/prismicHTMLSerializer\"\nimport Button from \"../../../shared/components/prismic/Button\"\nimport BasicImage from \"../../../shared/components/prismic/BasicImage\"\nimport styles from \"../../styles/Hero.module.scss\"\n\nconst Hero = ({ slice }) => {\n const { primary } = slice\n\n return (\n 
\n \n
\n \n
\n \n \n
\n \n
\n \n \n {items.map((item) => {\n const { alt, url, uid } = item.logo_image\n return (\n
\n \n
\n )\n}\n\nexport default VideoPlayer\n","// extracted by mini-css-extract-plugin\nexport default {\"videoItem\":\"VideoItem-module_videoItem__M8jv4\",\"bottomBorder\":\"VideoItem-module_bottomBorder__RYpvR\",\"expanded\":\"VideoItem-module_expanded__RR3eX\",\"topBorder\":\"VideoItem-module_topBorder___MIBL\",\"imgWrapper\":\"VideoItem-module_imgWrapper__gBX4v\",\"thumb\":\"VideoItem-module_thumb__ML4Mx\",\"showThumb\":\"VideoItem-module_showThumb__PjoSC\",\"videoContent\":\"VideoItem-module_videoContent__rHJxf\",\"titleAndComposer\":\"VideoItem-module_titleAndComposer__rPex4\",\"title\":\"VideoItem-module_title__So4SG\",\"textWrap\":\"VideoItem-module_textWrap__TxGJb\",\"composer\":\"VideoItem-module_composer__Utcn3\"};","import { useState, useContext, useEffect } from \"react\"\nimport cx from \"classnames\"\nimport LazyLoad from \"../LazyLoad\"\nimport Modal from \"../Modal\"\nimport VideoPlayer from \"./VideoPlayer\"\nimport PlayIcon from \"../../../icons/PlayIcon\"\nimport styles from \"../../styles/VideoItem.module.scss\"\nimport { resizeVimeoThumbnail, escapeToClose, createVimeoSrcSet } from \"../../utils/helpers\"\nimport { PrismicPageContext } from \"../../utils/prismicPageParser\"\n\nconst VideoItem = ({ video, featuredComposer }) => {\n const colorTheme = useContext(PrismicPageContext)\n const [showThumb, setShowThumb] = useState(false)\n const [openModal, setOpenModal] = useState(false)\n const { title, thumbnail_url, video_id } = video\n\n useEffect(() => {\n return escapeToClose(setOpenModal)\n })\n\n const handleMouseEnter = () => {\n if (!openModal) setShowThumb(true)\n }\n\n const handleMouseLeave = () => {\n if (!openModal) setShowThumb(false)\n }\n\n const toggleModal = (e) => {\n e.stopPropagation()\n setOpenModal(false)\n }\n\n return (\n \n {loading && (\n
\n \n \n
\n )}\n \n
\n \n
\n \n
\n {title}
\n \n {featuredComposer}\n \n\n \n \n
\n {openModal && (\n \n \n \n
\n {title}
\n\n {featuredComposer && (\n \n
\n \n
\n {featuredComposer}\n \n )}\n - \n {tags &&\n tags.split(\", \").map((tag) => {\n return (\n
- \n {tag}\n \n )\n })}\n {services &&\n services.split(\", \").map((service) => {\n return (\n
- \n {service}\n \n )\n })}\n
\n
\n )\n}\n\nconst VideoPlaylist = ({ slice }) => {\n const { items, primary } = slice\n const playlistType = primary.playlist_type\n const [navTagOptions, setNavTagOptions] = useState([])\n const [navServiceOptions, setNavServiceOptions] = useState([])\n const [currentTag, setCurrentTag] = useState(\"All Work\")\n const [currentService, setCurrentService] = useState(\"All Services\")\n const [filteredItems, setFilteredItems] = useState(items)\n // Pagination Vars\n const [activePage, setActivePage] = useState(1)\n const count = filteredItems.length\n\n // This can be moved into the Nav component itself\n const getNavOptions = () => {\n let tagOptions = {}\n let serviceOptions = {}\n let videos = items\n videos.forEach((video) => {\n let tags = video.tags\n tags?.split(\", \").forEach((tag) => (tagOptions[tag] = 1))\n let services = video.services\n services?.split(\", \").forEach((service) => (serviceOptions[service] = 1))\n })\n return { tagOptions, serviceOptions }\n }\n\n //This can moved into the nav component itself\n useEffect(() => {\n const { tagOptions, serviceOptions } = getNavOptions()\n setNavTagOptions([\"All Work\", ...Object.keys(tagOptions)])\n setNavServiceOptions([\"All Services\", ...Object.keys(serviceOptions)])\n }, [])\n\n useEffect(() => {\n const filtered = items\n .filter((item) => String(item.tags).indexOf(currentTag) >= 0 || currentTag === \"All Work\")\n .filter(\n (item) =>\n String(item.services?.split(\", \")).indexOf(currentService) >= 0 ||\n currentService === \"All Services\"\n )\n setFilteredItems(filtered)\n setActivePage(1)\n }, [currentTag, currentService])\n\n return playlistType !== \"Grid\" ? (\n - \n
- \n setActivePage(1)}>\n ‹‹\n \n \n
- \n
- \n setActivePage(i)}>\n {i}\n \n \n ))}\n
\n {filteredItems.map(({ video, featured_composer, uid }) => {\n return
\n \n ) : (\n \n
\n \n {filteredItems\n .slice((activePage - 1) * RESULTS_PER_PAGE, activePage * RESULTS_PER_PAGE)\n .map(({ video, featured_composer, uid, tags, services }) => {\n return (\n
\n \n \n
\n )}\n \n
\n \n
\n )\n}\n\nexport default BasicRichText\n","import cx from \"classnames\"\nimport Button from \"./Button\"\nimport htmlSerializer from \"../../utils/prismicHTMLSerializer\"\nimport styles from \"../../styles/Switchboard.module.scss\"\nimport BasicImage from \"./BasicImage\"\nimport BasicRichText from \"./BasicRichText\"\n\nconst Switchboard = ({ slice }) => {\n const { items } = slice\n\n const buttonSlice = ({ target_text, target_url }) => {\n return {\n primary: {\n button_url: target_url,\n button_text: target_text,\n button_icon: \"Info\",\n },\n }\n }\n\n return (\n \n {items.map((item) => {\n const { button_or_email, image, rich_text, target_url, target_text, uid } = item\n return (\n
\n \n
\n )\n })}\n \n \n {target_text}\n \n )}\n
\n \n
\n )\n}\n\nconst RoleAndName = ({ role, name }) => {\n return (\n \n
\n )\n}\n\n//Separate component for modal content specifically for team page usage\nconst TeamModalContent = ({ photo, role, name, bio, link, logo, toggleModal }) => {\n const sizeobj = { Standard: \"1x\", Hires: \"2x\" }\n\n const handleClick = (e) => {\n const checkForModal = document.getElementById(\"modal-box\")\n e.target !== checkForModal && !checkForModal.contains(e.target) ? toggleModal(event) : null\n }\n\n useEffect(() => {\n document.addEventListener(\"click\", handleClick)\n return () => document.removeEventListener(\"click\", handleClick)\n }, [])\n\n return (\n {role}
\n{name}
\n\n \n
\n )\n}\n\nconst TeamItems = ({ item, pos, shouldUseModal }) => {\n const {\n team_member_image,\n role_description,\n name,\n featured_work,\n more_info,\n long_description,\n online_profile_link,\n online_profile_logo,\n uid,\n tags,\n } = item\n const [openModal, setOpenModal] = useState(false)\n const sizeobj = { Standard: \"1x\", Hires: \"2x\" }\n\n useEffect(() => {\n openModal ? (document.body.style.position = \"fixed\") : (document.body.style.position = \"\")\n\n let vh = window.innerHeight * 0.01\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`)\n\n const resizeModalForMobileView = () => {\n let vh = window.innerHeight * 0.01\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`)\n }\n window.addEventListener(\"resize\", resizeModalForMobileView)\n\n return (\n () => window.removeEventListener(\"resize\", resizeModalForMobileView),\n escapeToClose(setOpenModal)\n )\n }, [])\n\n const toggleModal = (e) => {\n e.stopPropagation()\n setOpenModal(false)\n }\n\n return (\n \n \n
\n ) : (\n \n )}\n \n
\n )\n}\n\nexport default Team\n","// extracted by mini-css-extract-plugin\nexport default {\"subnavContain\":\"Subnav-module_subnavContain__ADgTy\",\"subnav\":\"Subnav-module_subnav___BgZ4\",\"anchorSubnav\":\"Subnav-module_anchorSubnav__lSq02\",\"contain\":\"Subnav-module_contain__voSed\",\"subnavItems\":\"Subnav-module_subnavItems___UMsZ\",\"subnavItem\":\"Subnav-module_subnavItem__lYKP5\",\"subnavItemAnchor\":\"Subnav-module_subnavItemAnchor__lnf7b\",\"coral\":\"Subnav-module_coral__vyiCz\",\"green\":\"Subnav-module_green__MN9vB\",\"purple\":\"Subnav-module_purple__jPNhA\"};","// extracted by mini-css-extract-plugin\nexport default {\"dropdownMenu\":\"DropdownMenu-module_dropdownMenu__Mrdx8\",\"rrs\":\"DropdownMenu-module_rrs__CepYS\",\"loader\":\"DropdownMenu-module_loader__uny39\"};","import React from \"react\"\n\nexport const caretIcon = (\n \n)\n\nexport const multiSelectOptionMarkup = (text) => (\n \n
\n \n
\n \n
\n \n {items.map((item, index) => {\n pos += 1\n if (pos === 7) {\n pos = 4\n }\n return (\n
\n \n \n \n \n {text}\n
\n)\n","import cx from \"classnames\"\nimport styles from \"../styles/DropdownMenu.module.scss\"\nimport ReactResponsiveSelect from \"react-responsive-select\"\nimport { caretIcon } from \"../utils/reactResponsiveSelectHelpers\"\nimport { filterItems } from \"../utils/helpers\"\n\nconst DropdownMenu = ({ nav_type, items }) => {\n const handleChange = (nav_type, value) => {\n if (value != \"default\") {\n if (nav_type === \"tags\") {\n filterItems(value)\n } else {\n window.location = value\n }\n }\n }\n\n return (\n \n handleChange(nav_type, selected.value)}\n />\n
\n )\n}\n\nexport default DropdownMenu\n","import { useContext } from \"react\"\nimport cx from \"classnames\"\nimport styles from \"../../styles/Subnav.module.scss\"\nimport DropdownMenu from \"../DropdownMenu\"\nimport { PrismicPageContext } from \"../../utils/prismicPageParser\"\nimport { replaceMMUrl, generateUniqueKey, filterItems } from \"../../utils/helpers\"\n\nconst Subnav = ({ slice }) => {\n const colorTheme = useContext(PrismicPageContext)\n const { primary, items } = slice\n\n const regular = primary.nav_type === \"regular\"\n const anchor = primary.nav_type === \"anchor\"\n const tags = primary.nav_type === \"tags\"\n\n const makeMobileOptions = (items, nav_type) => {\n let options = []\n if (nav_type === \"tags\") {\n options.push()\n } else {\n options.push({ text: \"Go to:\", value: \"default\" })\n }\n items.map((item) => {\n if (nav_type === \"regular\") {\n options.push({ text: item.subnav_item_text, value: replaceMMUrl(item.subnav_item_url.url) })\n } else if (nav_type === \"anchor\") {\n options.push({ text: item.subnav_item_text, value: \"#\" + item.subnav_item_anchor })\n } else {\n options.push({ text: item, value: item })\n }\n })\n return options\n }\n\n return (\n \n \n
\n )\n}\n\nexport default Subnav\n","// extracted by mini-css-extract-plugin\nexport default {\"videoWrapper\":\"AccordionItem-module_videoWrapper__yKsvn\",\"richText\":\"AccordionItem-module_richText__LgV5W\",\"imgWrapper\":\"AccordionItem-module_imgWrapper__w9XRz\",\"headingText\":\"AccordionItem-module_headingText__xU26j\",\"popupWrapper\":\"AccordionItem-module_popupWrapper__W6Do4\",\"showThumb\":\"AccordionItem-module_showThumb__YGDr2\"};","import { useState, useContext, useEffect, useLayoutEffect } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../../components/Modal\"\nimport VideoPlayer from \"./VideoPlayer\"\nimport htmlSerializer from \"../../utils/prismicHTMLSerializer\"\nimport PlayIcon from \"../../../icons/PlayIcon\"\nimport styles from \"../../styles/AccordionItem.module.scss\"\nimport BasicImage from \"./BasicImage\"\nimport BasicRichText from \"./BasicRichText\"\nimport { PrismicPageContext } from \"../../utils/prismicPageParser\"\nimport { escapeToClose } from \"../../utils/helpers\"\n\nconst AccordionItem = ({ item }) => {\n const colorTheme = useContext(PrismicPageContext)\n const [showThumb, setShowThumb] = useState(false)\n const [openModal, setOpenModal] = useState(false)\n const { content_type, header, image, rich_text, video } = item\n\n // these functions control the popup functionality\n useEffect(() => {\n return escapeToClose(setOpenModal)\n })\n\n const handleMouseEnter = () => {\n if (!openModal) setShowThumb(true)\n }\n\n const handleMouseLeave = () => {\n if (!openModal) setShowThumb(false)\n }\n\n const toggleModal = (e) => {\n e.stopPropagation()\n setOpenModal(false)\n }\n\n // render different components for different types of content\n const VideoItem = ({ video }) => {\n const { title, thumbnail_url, video_id } = video\n return (\n \n
\n \n - \n {primary.nav_type === \"tags\"\n ? items.map((item) => {\n let uid = generateUniqueKey()\n return (\n
- \n
- \n \n {subnav_item_text}\n \n \n )}\n {anchor && (\n
- \n \n {subnav_item_text}\n \n \n )}\n \n )\n })}\n
\n \n \n )}\n
\n )\n }\n\n // figure out which component to render\n const getContent = (item) => {\n const { content_type, image, rich_text, video } = item\n switch (content_type) {\n case \"Video Popup\":\n return \n 
\n
\n {openModal && (\n \n
\n \n {header[0].text}\n
\n{getContent(item)}
\n \n )\n}\n\nexport default AccordionItem\n","// extracted by mini-css-extract-plugin\nexport default {\"accordion\":\"Accordion-module_accordion__ngPUM\",\"contain\":\"Accordion-module_contain__fPevL\"};","import cx from \"classnames\"\nimport AccordionItem from \"./AccordionItem\"\nimport styles from \"../../styles/Accordion.module.scss\"\n\nconst Accordion = ({ slice }) => {\n const { items } = slice\n\n return (\n \n {items.map((item, index) => {\n return
\n \n
\n \n \n \n {featuredAlbum ? (\n Album\n ) : (\n Mixtape\n )}\n
\n {name}
\n\n {mixtapes.map((mixtape) => {\n return (\n
\n )\n}\n\nexport default Mixtapes\n","// extracted by mini-css-extract-plugin\nexport default {\"wrapper\":\"DoubleButton-module_wrapper__w_fHO\",\"button\":\"DoubleButton-module_button__dprCE\",\"link\":\"DoubleButton-module_link__YAjaM\",\"coral\":\"DoubleButton-module_coral__AvFej\",\"green\":\"DoubleButton-module_green__kfPmN\",\"purple\":\"DoubleButton-module_purple__g_KRz\",\"white\":\"DoubleButton-module_white__njoSe\",\"background\":\"DoubleButton-module_background__SyUlv\",\"iconAndText\":\"DoubleButton-module_iconAndText__vDCY1\",\"noIndent\":\"DoubleButton-module_noIndent__Bh9uO\"};","import { useContext } from \"react\"\nimport cx from \"classnames\"\nimport InfoIcon from \"../../icons/InfoIcon\"\nimport MoreIcon from \"../../icons/MoreIcon\"\nimport PlayIcon from \"../../icons/PlayIcon\"\nimport styles from \"../styles/DoubleButton.module.scss\"\nimport { PrismicPageContext } from \"../utils/prismicPageParser\"\nimport { replaceMMUrl } from \"../utils/helpers\"\n\nconst DoubleButton = ({ slice, white }) => {\n const colorTheme = useContext(PrismicPageContext)\n const { primary } = slice\n const FirstIcon = IconMap[primary.first_button_icon]\n const SecondIcon = IconMap[primary.second_button_icon]\n\n return (\n \n {primary.first_button_url && (\n \n \n
\n )\n}\n\nconst IconMap = {\n Info: InfoIcon,\n More: MoreIcon,\n Play: PlayIcon,\n}\n\nexport default DoubleButton\n","// extracted by mini-css-extract-plugin\nexport default {\"featuredMixtapes\":\"FeaturedMixtapes-module_featuredMixtapes__8KB_W\",\"contain\":\"FeaturedMixtapes-module_contain__m2SK0\",\"richText\":\"FeaturedMixtapes-module_richText__znnss\"};","import { gql, useQuery } from \"@apollo/client\"\nimport { PrismicRichText } from \"@prismicio/react\"\nimport cx from \"classnames\"\nimport htmlSerializer from \"../../../shared/utils/prismicHTMLSerializer\"\nimport Mixtapes from \"../../../shared/components/Mixtapes\"\nimport DoubleButton from \"../../../shared/components/DoubleButton\"\nimport HorizontalRule from \"../../../shared/components/prismic/HorizontalRule\"\nimport styles from \"../styles/FeaturedMixtapes.module.scss\"\n\nconst GET_FEATURED_MIXTAPES = gql`\n query StaffPickMixtapes($limit: Int) {\n staffPickMixtapes(limit: $limit) {\n id\n name\n slug\n imageUrl\n featuredAlbum\n }\n }\n`\n\nconst FeaturedMixtapes = ({ slice }) => {\n const variables = { limit: 8 } // amount of mixtapes the query returns\n const { loading, error, data } = useQuery(GET_FEATURED_MIXTAPES, {\n variables,\n })\n const { primary } = slice\n\n if (loading) return null\n if (error) console.log(error)\n\n const { staffPickMixtapes } = data\n return (\n \n {FirstIcon && \n {primary.first_button_text}\n \n
\n \n )}\n {primary.second_button_url && (\n \n {SecondIcon && \n {primary.second_button_text}\n \n
\n \n )}\n \n
\n \n
\n \n
\n \n
\n {primary.header}
\n\n \n {primary.link_text && (\n \n {primary.link_text}\n \n )}\n
\n \n
\n \n
\n {primary.hero_header}
\n\n
\n \n \n
\n \n \n \n \n \n \n 
\n
\n \n
\n \n
\n - \n {\n //This doesn't look continuous/unbroken if there is only 1 or maybe even 2 line items.\n items.map((item, index) => {\n return (\n <>\n
- \n {item.line_text[0].text}\n \n
- \n {iconMap[item.icon_name]}\n \n \n )\n })\n }\n
\n \n
\n \n
\n \n \n {items.slice(0, 4).map((item) => {\n const { alt, url, uid } = item.logo\n const header = item.hover_header[0].text\n const subheader = item.hover_subheader[0].text\n const backgroundColor = backgroundColorMap[item.hover_color]\n return (\n \n \n
\n {header}
\n {subheader}\n\n
\n \n \n
\n )\n}\n\nexport default BrowseBetaNoResults\n","import { gql } from \"@apollo/client\"\n\nconst internal_catalog_colors = {\n for_marmoset: \"#dac8ef\",\n artist_collab: \"#ffd39d\",\n pre_release: \"#7ae1dd\",\n fervor: \"#b2cee0\",\n not_for_tv_film: \"#edaaa1\",\n in_track_club: \"#157893\", //track-ocean-blue\n}\n\nconst should_display_color = [\"international_partner\", \"admin\", \"internal\"]\n\nexport const getSongColor = (artist, user_role, forMarmoset) => {\n if (\n artist &&\n artist.catalog &&\n artist.catalog.hexColor &&\n artist.catalog.hexColor != \"\" &&\n should_display_color.indexOf(user_role) > -1\n ) {\n return artist.catalog.hexColor\n } else if ([\"internal\", \"admin\"].includes(user_role) && forMarmoset) {\n return internal_catalog_colors.for_marmoset\n } else {\n return false\n }\n}\n\nexport const getSongVersionColor = (songColor, user_role, sv) => {\n if (songColor) {\n return songColor\n } else if (should_display_color.includes(user_role)) {\n if (sv.preRelease || sv.is_pre_release) {\n return internal_catalog_colors.pre_release\n } else if (sv.notForTvFilm || sv.is_not_for_tv_film) {\n return internal_catalog_colors.not_for_tv_film\n } else if (sv.artistCollab || sv.is_artist_collab) {\n return internal_catalog_colors.artist_collab\n } else if (sv.fervor || sv.is_fervor) {\n return internal_catalog_colors.fervor\n } else {\n return false\n }\n }\n}\n\nexport const sanitizedTitle = (title) => {\n return title\n .toLowerCase()\n .replace(/\\s/g, \"-\")\n .replace(/[^a-z0-9-]/g, \"\")\n}\n\nexport const setExclusivityMessage = (vintage, exclusive) => {\n if (vintage && exclusive) {\n return (\n Sorry, there are no results matching your search terms.
\nTry removing some of your search criteria or maybe clear all and start over.
\n\n This song has some restrictions and vintage songs are priced at a higher rate, contact us\n for a custom license.\n
\n )\n } else if (vintage) {\n returnVintage songs are priced at a higher rate, contact us for a custom license.
\n } else if (exclusive) {\n returnThis song has some restrictions, contact us for conditions and terms.
\n }\n}\n\nexport const sortSongVersions = (songVersions, arr) => {\n var sorted = songVersions\n .filter((sv) => {\n return arr.indexOf(sv.id) > -1\n })\n .sort((a, b) => (a.position > b.position ? 1 : -1))\n\n return sorted\n}\n\nexport const GET_SONG_SONG_VERSIONS = gql`\n query GetSongSongVersions($id: ID!) {\n songById(id: $id) {\n name\n hasPastLicenses\n exclusive\n forMarmoset\n songVersionsCount\n rank\n songVersions {\n id\n title\n displayName\n playerArt\n songVersionFile\n arc\n length\n fervor\n notForTvFilmCatalog\n vintage\n lyrics\n customizable\n joinedGenreList\n energy\n playSerializer\n artistCollab\n preRelease\n availableForClick\n position\n hasStems\n isNew\n rollingRank\n }\n artist {\n id\n name\n slug\n catalog {\n id\n hexColor\n }\n }\n }\n }\n`\n","// extracted by mini-css-extract-plugin\nexport default {\"wrapper\":\"ConfirmSelection-module_wrapper__p6Lsx\",\"headerContainer\":\"ConfirmSelection-module_headerContainer__kQjcL\",\"messageContainer\":\"ConfirmSelection-module_messageContainer__XCKmW\",\"chooseSongPrompt\":\"ConfirmSelection-module_chooseSongPrompt__NwCKm\",\"link\":\"ConfirmSelection-module_link__K1780\",\"checkbox\":\"ConfirmSelection-module_checkbox__cwHG4\",\"buttonContainer\":\"ConfirmSelection-module_buttonContainer__RrGPW\",\"button\":\"ConfirmSelection-module_button__Fz5Vy buttons-module_button__QpyX1\",\"cancelButton\":\"ConfirmSelection-module_cancelButton__P4x3C ConfirmSelection-module_button__Fz5Vy buttons-module_button__QpyX1\",\"selectButton\":\"ConfirmSelection-module_selectButton___6YUQ ConfirmSelection-module_button__Fz5Vy buttons-module_button__QpyX1\",\"blanketDealPrompt\":\"ConfirmSelection-module_blanketDealPrompt__KlBTa\"};","// extracted by mini-css-extract-plugin\nexport default {\"selectSongWrapper\":\"SongSearchModal-module_selectSongWrapper__Ksdgd\",\"selectSongFormContainer\":\"SongSearchModal-module_selectSongFormContainer__BL_7Y\",\"selectSongForm\":\"SongSearchModal-module_selectSongForm__fr1D6\",\"header\":\"SongSearchModal-module_header__JnQi_\",\"input\":\"SongSearchModal-module_input__jo2gS\",\"submit\":\"SongSearchModal-module_submit__it5Ed\",\"resultsWrapper\":\"SongSearchModal-module_resultsWrapper__2ib6m\",\"resultsHeader\":\"SongSearchModal-module_resultsHeader__IZVhL\",\"resultsScroll\":\"SongSearchModal-module_resultsScroll__d4AiT\",\"buttonWrapper\":\"SongSearchModal-module_buttonWrapper__vf2hT\",\"errorMessage\":\"SongSearchModal-module_errorMessage__PhI68\",\"noResults\":\"SongSearchModal-module_noResults__zw0hN\",\"cancelSelectionButton\":\"SongSearchModal-module_cancelSelectionButton__gH0Em buttons-module_button__QpyX1\"};","// extracted by mini-css-extract-plugin\nexport default {\"addNoteWrapper\":\"ClientNoteModal-module_addNoteWrapper__UoBVo\",\"addNoteFormContainer\":\"ClientNoteModal-module_addNoteFormContainer__EvoDb\",\"addNoteForm\":\"ClientNoteModal-module_addNoteForm___5gii\",\"inputWrapper\":\"ClientNoteModal-module_inputWrapper__eXbgl\",\"label\":\"ClientNoteModal-module_label__ECa67\",\"required\":\"ClientNoteModal-module_required__ZQ3wI\",\"warning\":\"ClientNoteModal-module_warning__YfgLB\",\"input\":\"ClientNoteModal-module_input__qTnRw\",\"updatingMessage\":\"ClientNoteModal-module_updatingMessage__XdbTq\",\"submit\":\"ClientNoteModal-module_submit__i9hmi\",\"submitting\":\"ClientNoteModal-module_submitting___K3nM\",\"buttonWrapper\":\"ClientNoteModal-module_buttonWrapper__pR6iG\",\"cancelButton\":\"ClientNoteModal-module_cancelButton__hVSbc buttons-module_button__QpyX1\",\"inputAddOn\":\"ClientNoteModal-module_inputAddOn__BjWYr\",\"btnAddOn\":\"ClientNoteModal-module_btnAddOn__mHMNd\"};","const LoadingIcon = () => {\n return (\n\n
\n \n ) : (\n \n
\n \n
\n \n
\n Confirm Song Selection
\n\n
\n \n Are you sure you want to choose{\" \"}\n \n {displayName}\n {\" \"}\n by \n \n {artist.name}\n \n ?\n
\n \n
\n Which Blanket Deal would you like to add to?
\n - \n {orders.map((order, index) => (\n
- \n \n \n ))}\n
\n \n
\n \n \n
\n \n
\n \n \n handleTextChange(e)}\n disabled={lineItemId === \"\"}\n />\n \n Start/Air Date is required\n \n
\n \n \n Cancel\n \n \n Confirm\n \n \n
\n \n
\n )\n})\n\nexport default SelectBlanketOrderModal\n","import cx from \"classnames\"\n\nconst PartialExclusivityTooltip = ({\n tooltipType,\n vintage,\n exclusive,\n action,\n cy,\n exclusivityMessage,\n show,\n nudge = \"\",\n}) => {\n return (\n \n \n {exclusivityMessage}\n ▸\n \n
\n )\n}\n\nexport default PartialExclusivityTooltip\n","import SvgIcon from \"../shared/components/SvgIcon\"\n\nconst StarIcon = () => {\n return (\n - \n {shouldShowTooltip && (\n
- \n
\n
\n \n\n - \n
- \n \n\n
\n
\n\n {show_alt_versions && (\n \n )}\n {song.hasPastLicenses && internal_or_ip && (\n\n )}\n {sv.hasStems && (\n\n S\n\n )}\n {sv.isNew && (\n\n \n NEW\n \n\n )}\n
\n License\n \n \n \n ) : (\n
\n License\n \n \n \n )}\n {mixtape !== null && !mixtape.staff_pick && (\n
\n
\n )}\n \n \n )\n}\n\nexport default SongVersionItem\n","import cx from \"classnames\"\nimport { useState } from \"react\"\nimport SongVersionItem from \"./SongVersionItem\"\nimport { getSongColor } from \"../utils/browse\"\n\n//TODO: use this to pass hidden data between components\n//also maybe move other props to context and use them along the tree\n\nconst SongItemBeta = ({\n song,\n user_role,\n handleSetExpandedSongVersionId,\n expandedSongVersionId,\n currentBlanketDealModalRef,\n}) => {\n const [visibility, setVisibility] = useState({\n visibility: \"hidden\",\n position: \"absolute\",\n zindex: \"-99999\",\n })\n\n // make sure song version ids are unique\n const songVersionIds = song.songVersions.filter(\n (value, index, self) => self.indexOf(value) === index\n )\n const artist = song.artist\n\n // the top song version is handled slightly differently\n const topSongVersion = song.songVersions[0]\n const altSongVersions = song.songVersions.slice(1)\n\n // toggle alt song versions visibility\n const setAltVersionsVisibility = () => {\n var obj = {\n visibility: \"hidden\",\n position: \"absolute\",\n zindex: \"-99999\",\n }\n if (visibility.visibility === \"hidden\") {\n obj = {\n visibility: \"visible\",\n position: \"inherit\",\n zindex: \"1\",\n }\n }\n setVisibility(obj)\n }\n\n const songColor = getSongColor(artist, user_role, song.forMarmoset)\n\n // TODO we will want to add a separate alt_versions_count without the +1 when the legacy browse is retired and use song_versions_count for total song version count\n // at that point we can refactor the SongVersionItem component without breaking the old /browse page\n const songVersionProps = {\n artist,\n song_versions_count: altSongVersions.length + 1,\n song,\n setAltVersionsVisibility,\n user_role,\n songColor,\n handleSetExpandedSongVersionId,\n expandedSongVersionId,\n currentBlanketDealModalRef,\n }\n\n return (\n \n {sv.displayName} by {artist.name} is no longer available.\n
\n {mixtape.is_owner && (\n \n
\n )}\n - \n
\n \n \n \n {groupedHits.map((hit) => (\n
\n - \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n
\n\n {/* Beta: \"Browse Featured Mixtapes\" removed, this div just creates some space */}\n \n {children}
\n \n )\n }\n\n return (\n <>\n \n \n
\n )\n }\n return null\n}\n\nexport default BrowseBetaResultsContainer\n","export const MAX_DURATION = 1200000\n\nexport const navigationItems = {\n vocals: {\n label: \"Vocals\",\n value: \"vocals\",\n description:\n \"Do you want vocals and words to help tell your story? Or would you prefer to do it with only instruments and a melody?\",\n },\n mood: {\n label: \"Mood\",\n value: \"mood\",\n description:\n \"This is the heart of your film, whether you are telling a Story, describing a Character, or simply defining the vibe of your Project. What feelings, emotions, or characteristics would best define what is at the core of your story?\",\n },\n energy: {\n label: \"Energy\",\n value: \"energy\",\n description:\n \"Energy represents the spirit and vigor of a story. Elements like momentum, tempo, intensity, speed and strength combine to define a story’s energy. What’s the energy of your story or character?\",\n },\n arc: {\n label: \"Arc\",\n value: \"arc\",\n description:\n \"The arc of a story is best described with words like crescendo or build. We think of it in the visual sense of a line graph, representing the rise, fall or steady characteristics. From left to right, what arc does your story or scene follow?\",\n },\n length: {\n label: \"Length\",\n value: \"length\",\n description: \"Choose the minimum and maximum length. How long is your story?\",\n },\n instruments: {\n label: \"Instruments\",\n value: \"instruments\",\n description: \"What prominent instruments best bring your story, character or project to life?\",\n },\n genres: {\n label: \"Genres\",\n value: \"genres\",\n description:\n \"Genres help us identify music as a particular sound, style, form or tradition. What is the sound of your story or character?\",\n },\n customizable: {\n label: \"Customizable\",\n value: \"customizable\",\n description:\n \"Some stories aren’t carved in stone...yet. Our customizable songs have open sessions, allowing us to make edits, tweaks, extensions, or full blown revisions to the song. Selecting a customizable song will initiate a direct conversation between you and our Production Team to evaluate your needs, objectives, and craft the perfect song for your project. How can we help you tell your story?\",\n },\n sort: {\n label: \"Sort\",\n value: \"sort\",\n description: \"What order do you want your song results in?\",\n },\n internal: {\n label: \"Internal\",\n value: \"internal\",\n description: \"Filter by certain catalogs or Artist Collabs/For Marmoset tracks.\",\n },\n}\n\nexport const arcs = [\n { label: \"Steady\", value: \"Steady\", dataVal: \"steady\" },\n { label: \"Ascending\", value: \"Ascending\", dataVal: \"ascending\" },\n { label: \"Descending\", value: \"Descending\", dataVal: \"descending\" },\n { label: \"Middle Crescendo\", value: \"Middle Crescendo\", dataVal: \"crescendo\" },\n { label: \"Multiple Crescendos\", value: \"Multiple Crescendos\", dataVal: \"multiple\" },\n { label: \"Frenetic\", value: \"Frenetic\", dataVal: \"frenetic\" },\n]\n\nexport const energies = [\n { label: \"Low\", value: \"Low\", dataVal: \"low\" },\n { label: \"Low-Medium\", value: \"Low-Medium\", dataVal: \"lowMedium\" },\n { label: \"Medium\", value: \"Medium\", dataVal: \"medium\" },\n { label: \"Medium-High\", value: \"Medium-High\", dataVal: \"mediumHigh\" },\n { label: \"High\", value: \"High\", dataVal: \"high\" },\n]\n\nexport const internal_flags = [\n { label: \"For Marmoset\", value: \"is_for_marmoset\" },\n { label: \"Artist Collab\", value: \"is_artist_collab\" },\n { label: \"Prerelease\", value: \"is_pre_release\" },\n { label: \"Fervor Vintage & Fervor Contemporary\", value: \"is_fervor\" },\n {\n label: \"Do Not Pitch for TV Film\",\n value: \"is_not_for_tv_film\",\n },\n { label: \"Unflagged\", value: \"is_not_flagged\" },\n]\n\nconst genres = [\n { label: \"Ambient\", value: \"Ambient\" },\n { label: \"Beats\", value: \"Beats\" },\n { label: \"Country\", value: \"Country\" },\n { label: \"Dance\", value: \"Dance\" },\n { label: \"Electronic\", value: \"Electronic\" },\n { label: \"Folk\", value: \"Folk\" },\n { label: \"Hip Hop & Rap\", value: \"Hip Hop & Rap\" },\n { label: \"Holiday\", value: \"Holiday\" },\n { label: \"Jazz\", value: \"Jazz\" },\n { label: \"Orchestral\", value: \"Orchestral\" },\n { label: \"Pop\", value: \"Pop\" },\n { label: \"Rock\", value: \"Rock\" },\n { label: \"RnB\", value: \"RnB\" },\n { label: \"Singer-Songwriter\", value: \"Singer-Songwriter\" },\n { label: \"Soul\", value: \"Soul\" },\n { label: \"Vintage\", value: \"Vintage\" },\n { label: \"World\", value: \"World\" },\n]\n\nconst instruments = [\n { label: \"Acoustic Guitar\", value: \"Acoustic Guitar\" },\n { label: \"Banjo\", value: \"Banjo\" },\n { label: \"Big Drums\", value: \"Big Drums\" },\n { label: \"Drum Machine\", value: \"Drum Machine\" },\n { label: \"Electric Guitar\", value: \"Electric Guitar\" },\n { label: \"Glockenspiel/Toy Piano\", value: \"Glockenspiel/Toy Piano\" },\n { label: \"Heavy Bass\", value: \"Heavy Bass\" },\n { label: \"Horns/Brass\", value: \"Horns/Brass\" },\n { label: \"Mandolin\", value: \"Mandolin\" },\n { label: \"Oohs & Ahhs\", value: \"Oohs & Ahhs\" },\n { label: \"Organ\", value: \"Organ\" },\n { label: \"Piano\", value: \"Piano\" },\n { label: \"Stomps/Claps\", value: \"Stomps/Claps\" },\n { label: \"Strings\", value: \"Strings\" },\n { label: \"Synthesizer\", value: \"Synthesizer\" },\n { label: \"Ukulele\", value: \"Ukulele\" },\n]\n\nconst moods = [\n { label: \"A Journey\", value: \"A Journey\", dataVal: \"a journey\" },\n { label: \"Aggressive\", value: \"Aggressive\", dataVal: \"aggressive\" },\n { label: \"Angelic\", value: \"Angelic\", dataVal: \"angelic\" },\n { label: \"Anthemic\", value: \"Anthemic\", dataVal: \"anthemic\" },\n { label: \"Bouncy\", value: \"Bouncy\", dataVal: \"bouncy\" },\n { label: \"Bright\", value: \"Bright\", dataVal: \"bright\" },\n { label: \"Burdened\", value: \"Burdened\", dataVal: \"burdened\" },\n { label: \"Calm\", value: \"Calm\", dataVal: \"calm\" },\n { label: \"Cinematic\", value: \"Cinematic\", dataVal: \"cinematic\" },\n { label: \"Classic & Retro\", value: \"Classic & Retro\", dataVal: \"classic & retro\" },\n { label: \"Cold\", value: \"Cold\", dataVal: \"cold\" },\n { label: \"Confident\", value: \"Confident\", dataVal: \"confident\" },\n { label: \"Dark\", value: \"Dark\", dataVal: \"dark\" },\n { label: \"Depressed\", value: \"Depressed\", dataVal: \"depressed\" },\n { label: \"Dynamic\", value: \"Dynamic\", dataVal: \"dynamic\" },\n { label: \"Ecstatic\", value: \"Ecstatic\", dataVal: \"ecstatic\" },\n { label: \"Emotional\", value: \"Emotional\", dataVal: \"emotional\" },\n { label: \"Empowering\", value: \"Empowering\", dataVal: \"empowering\" },\n { label: \"Energetic\", value: \"Energetic\", dataVal: \"energetic\" },\n { label: \"Epic\", value: \"Epic\", dataVal: \"epic\" },\n { label: \"Ethereal\", value: \"Ethereal\", dataVal: \"ethereal\" },\n { label: \"Exciting\", value: \"Exciting\", dataVal: \"exciting\" },\n { label: \"Fun\", value: \"Fun\", dataVal: \"fun\" },\n { label: \"Gritty\", value: \"Gritty\", dataVal: \"gritty\" },\n { label: \"Honorable\", value: \"Honorable\", dataVal: \"honorable\" },\n { label: \"Hopeful\", value: \"Hopeful\", dataVal: \"hopeful\" },\n { label: \"Human\", value: \"Human\", dataVal: \"human\" },\n { label: \"Imaginative\", value: \"Imaginative\", dataVal: \"imaginative\" },\n { label: \"Industrial\", value: \"Industrial\", dataVal: \"industrial\" },\n { label: \"Inspiring\", value: \"Inspiring\", dataVal: \"inspiring\" },\n { label: \"Intimate\", value: \"Intimate\", dataVal: \"intimate\" },\n { label: \"Light\", value: \"Light\", dataVal: \"light\" },\n { label: \"Meandering\", value: \"Meandering\", dataVal: \"meandering\" },\n { label: \"Mechanical\", value: \"Mechanical\", dataVal: \"mechanical\" },\n { label: \"Minimal\", value: \"Minimal\", dataVal: \"minimal\" },\n { label: \"Mischievous\", value: \"Mischievous\", dataVal: \"mischievous\" },\n { label: \"Mysterious\", value: \"Mysterious\", dataVal: \"mysterious\" },\n { label: \"Optimistic\", value: \"Optimistic\", dataVal: \"optimistic\" },\n { label: \"Organic\", value: \"Organic\", dataVal: \"organic\" },\n { label: \"Pensive\", value: \"Pensive\", dataVal: \"pensive\" },\n { label: \"Playful\", value: \"Playful\", dataVal: \"playful\" },\n { label: \"Positive\", value: \"Positive\", dataVal: \"positive\" },\n { label: \"Powerful\", value: \"Powerful\", dataVal: \"powerful\" },\n { label: \"Precise\", value: \"Precise\", dataVal: \"precise\" },\n { label: \"Pumped\", value: \"Pumped\", dataVal: \"pumped\" },\n { label: \"Quirky\", value: \"Quirky\", dataVal: \"quirky\" },\n { label: \"Rebellious\", value: \"Rebellious\", dataVal: \"rebellious\" },\n { label: \"Reflective\", value: \"Reflective\", dataVal: \"reflective\" },\n { label: \"Revelatory\", value: \"Revelatory\", dataVal: \"revelatory\" },\n { label: \"Romantic\", value: \"Romantic\", dataVal: \"romantic\" },\n { label: \"Sentimental\", value: \"Sentimental\", dataVal: \"sentimental\" },\n { label: \"Sexy\", value: \"Sexy\", dataVal: \"sexy\" },\n { label: \"Silly\", value: \"Silly\", dataVal: \"silly\" },\n { label: \"Sinister\", value: \"Sinister\", dataVal: \"sinister\" },\n { label: \"Slick\", value: \"Slick\", dataVal: \"slick\" },\n { label: \"Somber\", value: \"Somber\", dataVal: \"somber\" },\n { label: \"Sparse\", value: \"Sparse\", dataVal: \"sparse\" },\n { label: \"Spiritual\", value: \"Spiritual\", dataVal: \"spiritual\" },\n { label: \"Sporadic\", value: \"Sporadic\", dataVal: \"sporadic\" },\n { label: \"Stoic\", value: \"Stoic\", dataVal: \"stoic\" },\n { label: \"Upbeat\", value: \"Upbeat\", dataVal: \"upbeat\" },\n { label: \"Vulnerable\", value: \"Vulnerable\", dataVal: \"vulnerable\" },\n { label: \"Whimsical\", value: \"Whimsical\", dataVal: \"whimsical\" },\n { label: \"Youthful\", value: \"Youthful\", dataVal: \"youthful\" },\n]\n\nconst moodsSortedByPopularity = [\n \"Confident\",\n \"Bouncy\",\n \"Hopeful\",\n \"Imaginative\",\n \"Playful\",\n \"Optimistic\",\n \"Upbeat\",\n \"Bright\",\n \"Reflective\",\n \"Positive\",\n \"Fun\",\n \"Energetic\",\n \"Youthful\",\n \"Empowering\",\n \"Calm\",\n \"A Journey\",\n \"Emotional\",\n \"Exciting\",\n \"Human\",\n \"Burdened\",\n \"Gritty\",\n \"Inspiring\",\n \"Honorable\",\n \"Intimate\",\n \"Sentimental\",\n \"Cinematic\",\n \"Classic & Retro\",\n \"Light\",\n \"Mysterious\",\n \"Pensive\",\n \"Pumped\",\n \"Ethereal\",\n \"Anthemic\",\n \"Rebellious\",\n \"Slick\",\n \"Powerful\",\n \"Mischievous\",\n \"Dynamic\",\n \"Vulnerable\",\n \"Dark\",\n \"Romantic\",\n \"Quirky\",\n \"Whimsical\",\n \"Minimal\",\n \"Organic\",\n \"Meandering\",\n \"Cold\",\n \"Mechanical\",\n \"Revelatory\",\n \"Sexy\",\n \"Somber\",\n \"Angelic\",\n \"Epic\",\n \"Stoic\",\n \"Aggressive\",\n \"Precise\",\n \"Sparse\",\n \"Sinister\",\n \"Industrial\",\n \"Spiritual\",\n \"Ecstatic\",\n \"Silly\",\n \"Depressed\",\n \"Sporadic\",\n]\n\n// For displaying activated filters in the WorkbenchFooter\nconst clearRefinementLabels = [\n { attribute: \"is_for_marmoset\", label: \"For Marmoset\", value: \"true\" },\n { attribute: \"is_not_for_marmoset\", label: \"Not for Marmoset\", value: \"true\" },\n { attribute: \"is_artist_collab\", label: \"Artist Collab\", value: \"true\" },\n { attribute: \"is_not_artist_collab\", label: \"Not Artist Collab\", value: \"true\" },\n { attribute: \"is_pre_release\", label: \"Prerelease\", value: \"true\" },\n { attribute: \"is_not_pre_release\", label: \"Not Prerelease\", value: \"true\" },\n { attribute: \"is_fervor\", label: \"Fervor Vintage & Fervor Contemporary\", value: \"true\" },\n { attribute: \"is_not_fervor\", label: \"Not Fervor Vintage & Fervor Contemporary\", value: \"true\" },\n { attribute: \"is_for_tv_film\", label: \"Can Pitch for TV Film\", value: \"true\" },\n { attribute: \"is_not_for_tv_film\", label: \"Do Not Pitch for TV Film\", value: \"true\" },\n { attribute: \"is_customizable\", label: \"Customizable\", value: \"true\" },\n { attribute: \"is_not_customizable\", label: \"Not Customizable\", value: \"true\" },\n { attribute: \"is_instrumental\", label: \"Instrumental\", value: \"true\" },\n { attribute: \"is_vocals\", label: \"Vocals\", value: \"true\" },\n { attribute: \"is_female_vocals\", label: \"Female Vocals\", value: \"true\" },\n { attribute: \"is_male_vocals\", label: \"Male Vocals\", value: \"true\" },\n { attribute: \"is_in_track_club\", label: \"In Track Club\", value: \"true\" },\n { attribute: \"is_not_in_track_club\", label: \"Not In Track Club\", value: \"true\" },\n { attribute: \"is_has_stems\", label: \"Stems\", value: \"true\" },\n { attribute: \"is_not_has_stems\", label: \"No Stems\", value: \"true\" },\n { attribute: \"internal_flags\", label: \"For Marmoset\", value: \"is_for_marmoset\" },\n { attribute: \"internal_flags\", label: \"Artist Collab\", value: \"is_artist_collab\" },\n { attribute: \"internal_flags\", label: \"Prerelease\", value: \"is_pre_release\" },\n {\n attribute: \"internal_flags\",\n label: \"Fervor Vintage & Fervor Contemporary\",\n value: \"is_fervor\",\n },\n { attribute: \"internal_flags\", label: \"Can Pitch for TV Film\", value: \"is_for_tv_film\" },\n { attribute: \"internal_flags\", label: \"Do Not Pitch for TV Film\", value: \"is_not_for_tv_film\" },\n { attribute: \"internal_flags\", label: \"Unflagged\", value: \"is_not_flagged\" },\n { attribute: \"energy\", label: \"Low Energy\", value: \"Low\" },\n { attribute: \"energy\", label: \"Low-Medium Energy\", value: \"Low-Medium\" },\n { attribute: \"energy\", label: \"Medium Energy\", value: \"Medium\" },\n { attribute: \"energy\", label: \"Medium-High Energy\", value: \"Medium-High\" },\n { attribute: \"energy\", label: \"High Energy\", value: \"High\" },\n]\n\nexport const resultsFilters = [\n { name: \"songs\", restrictedAttributes: [\"title\", \"display_name\"] },\n { name: \"artists\", restrictedAttributes: [\"artist_name\"] },\n { name: \"lyrics\", restrictedAttributes: [\"lyrics\"] },\n { name: \"all\", restrictedAttributes: [] },\n]\n\nexport const sortOptions = [\n {\n text: \"Marmoset Sort\",\n value: \"default\",\n markup: Marmoset Sort,\n },\n {\n text: \"Newest to Oldest\",\n value: \"newest\",\n markup: Newest to Oldest,\n },\n {\n text: \"Oldest to Newest\",\n value: \"oldest\",\n markup: Oldest to Newest,\n },\n {\n text: \"A to Z\",\n value: \"a_z\",\n markup: A to Z,\n },\n {\n text: \"Z to A\",\n value: \"z_a\",\n markup: Z to A,\n },\n {\n text: \"Shortest to Longest\",\n value: \"shortest\",\n markup: Shortest to Longest,\n },\n {\n text: \"Longest to Shortest\",\n value: \"longest\",\n markup: Longest to Shortest,\n },\n]\n\nexport const formatTime = (intTime) => {\n let minutes = (intTime / 1000 / 60) << 0\n let seconds = (intTime / 1000) % 60\n seconds = seconds.toFixed(0)\n if (seconds < 10) seconds = \"0\" + seconds\n if (minutes <= 0) minutes = \"\"\n return minutes + \":\" + seconds\n}\n\nexport const transformArcs = (refinementItems) => {\n // Iterates through the given array (i.e. arcs)\n // Spreads out the properties of each arc object into a new object\n // If a matching label is found in Algolia's refinement list,\n // it spreads out that item's properties into the object, effectively merging them.\n // If not found, we're left with the original given array's object's properties,\n // including a value to add a refinement back in once it's been removed.\n return arcs.map((arc) => ({\n ...arc,\n ...refinementItems.find((refinementItem) => refinementItem.label === arc.label),\n }))\n}\n\nexport const transformEnergies = (refinementItems) => {\n return energies.map((energy) => ({\n ...energy,\n ...refinementItems.find((refinementItem) => refinementItem.label === energy.label),\n }))\n}\n\nexport const transformFlags = (refinementItems) => {\n return internal_flags.map((flag) => ({\n ...flag,\n ...refinementItems.find((refinementItem) => refinementItem.label === flag.label),\n }))\n}\n\nexport const transformGenres = (refinementItems) => {\n return genres.map((genre) => ({\n ...genre,\n ...refinementItems.find((refinementItem) => refinementItem.label === genre.label),\n }))\n}\n\nexport const transformInstruments = (refinementItems) => {\n return instruments.map((instrument) => ({\n ...instrument,\n ...refinementItems.find((refinementItem) => refinementItem.label === instrument.label),\n }))\n}\n\nexport const transformMoods = (refinementItems) => {\n // const sortedByPopularity = refinementItems.sort((a, b) => b.count - a.count)\n return moods.map((mood) => ({\n ...mood,\n ...refinementItems.find((refinementItem) => refinementItem.label === mood.label),\n rank: moodsSortedByPopularity.findIndex((moodSorted) => moodSorted === mood.label),\n }))\n}\n\nexport const transformMoodsWithEmptyOption = (refinementItems) => {\n // refinementItems.unshift({ label: \"Select a mood\", value: \"\" })\n return refinementItems\n}\n\nexport const transformClearRefinements = (refinementItems) => {\n // Similar to other transforms, but in reverse;\n // Start with Algolia-provided refinementItems and add items (i.e. label values) from clearRefinementLabels\n const transformedItems = refinementItems.map((refinementItem) => ({\n ...refinementItem,\n refinements: refinementItem.refinements.map((refinement) => ({\n ...refinement,\n ...clearRefinementLabels.find(\n (clearRefinementLabel) =>\n clearRefinementLabel.attribute === refinement.attribute &&\n clearRefinementLabel.value === refinement.value\n ),\n })),\n }))\n\n // Change Algolia's negative filter label style, i.e. \"-Banjo\" to \"No Banjo\"\n // Change time from integer to MM:SS format\n transformedItems.map((transformedItem) => {\n transformedItem.refinements.map((refinement) => {\n if (refinement.label[0] === \"-\") {\n refinement.label = \"No \" + refinement.label.substr(1)\n }\n if (refinement.attribute === \"duration\") {\n if (refinement.operator === \">=\") {\n refinement.label = `Longer than ${formatTime(refinement.value)}`\n } else {\n refinement.label = `Shorter than ${formatTime(refinement.value)}`\n }\n }\n })\n })\n\n // Find and remove default max duration refinement so \"Shorter than 20:00\" does not appear in \"Filtered by\" list\n const durIndex = transformedItems.findIndex((item) => item.attribute === \"duration\")\n if (durIndex !== -1) {\n const valIndex = transformedItems[durIndex].refinements.findIndex(\n (duration) => duration.value === MAX_DURATION\n )\n if (valIndex !== -1) {\n delete transformedItems[durIndex].refinements[valIndex]\n }\n }\n\n return transformedItems\n}\n\nconst sortCurrentRefinementList = (items) => {\n if (items.length) {\n items.map((item) => item.refinements.sort((a, b) => a.label.localeCompare(b.label)))\n }\n return items\n}\n","import { navigationItems } from \"./FilterTransforms\"\n\nconst WorkbenchFilterInfoItem = ({ item }) => {\n return (\n {item.label}
\n \n{item.description}
\n\n
\n )\n}\n\nexport default FilteredBy\n","import { useWorkbenchStore } from \"../../store/store\"\n\nconst SearchedBy = () => {\n const resetSearchQuery = useWorkbenchStore((state) => state.resetSearchQuery)\n const searchQuery = useWorkbenchStore((state) => state.searchQuery)\n\n const handleClearClick = () => {\n resetSearchQuery()\n }\n\n return (\n Filtered By:
\n - \n
\n
\n )\n}\n\nexport default SearchedBy\n","import { useEffect, useState } from \"react\"\nimport { useWorkbenchStore } from \"../../store/store\"\nimport { sortOptions } from \"./FilterTransforms\"\n\nconst SortedBy = () => {\n const resetSortedIndexName = useWorkbenchStore((state) => state.resetSortedIndexName)\n const sortedIndexName = useWorkbenchStore((state) => state.sortedIndexName)\n const [footerDisplayName, setFooterDisplayName] = useState(\"\")\n\n const handleClearClick = () => {\n resetSortedIndexName()\n }\n\n useEffect(() => {\n // Sets display name in Footer for sort option\n // index name looks like \"local_song_versions_[filter value]\"\n // so this finds which option has the filter value that the index name ends with\n setFooterDisplayName(sortOptions.find((option) => sortedIndexName.endsWith(option.value)).text)\n }, [sortedIndexName])\n\n return (\n Searched By:
\n - \n
- \n {searchQuery}\n x\n \n
\n
\n )\n}\n\nexport default SortedBy\n","import { useHits, useCurrentRefinements, useClearRefinements } from \"react-instantsearch-hooks-web\"\nimport FilteredBy from \"./FilteredBy\"\nimport SearchedBy from \"./SearchedBy\"\nimport { useWorkbenchStore } from \"../../store/store\"\nimport { transformClearRefinements } from \"./FilterTransforms\"\nimport { useEffect, useState } from \"react\"\nimport SortedBy from \"./SortedBy\"\n\nconst AlgoliaResultsCount = () => {\n const [state, setState] = useState(null)\n const {\n results: { nbHits },\n } = useHits()\n\n useEffect(() => {\n cleanupFunction()\n return () => {\n setState(null)\n }\n }, [])\n\n const cleanupFunction = () => {\n setState({})\n }\n\n if (nbHits > 0) {\n return (\n Sorted By:
\n - \n
- \n {footerDisplayName}\n x\n \n
- \n Clear\n \n
\n {nbHits} Results\n
\n )\n } else {\n return null\n }\n}\n\nconst WorkbenchFooter = () => {\n const searchQuery = useWorkbenchStore((state) => state.searchQuery)\n const sortedIndexName = useWorkbenchStore((state) => state.sortedIndexName)\n const { items, refine } = useCurrentRefinements({ transformItems: transformClearRefinements })\n const { refine: refineAll } = useClearRefinements()\n const [anyFilters, setAnyFilters] = useState(false)\n\n useEffect(() => {\n // Algolia's refinement list (items) *may* include a placeholder refinement object for range items (i.e. duration)\n // that includes a prototype item named 'empty' in the refinements array; without refinements, its length is 1.\n let anyFiltersVar = false\n const durationRefinement = items.find((item) => item.attribute === \"duration\")\n\n if (durationRefinement === undefined) {\n anyFiltersVar = false\n } else if (durationRefinement.refinements[0]) {\n anyFiltersVar = durationRefinement.refinements[0].hasOwnProperty(\"value\") ? true : false\n } else {\n anyFiltersVar = items.length > 1 ? true : false\n }\n setAnyFilters(anyFiltersVar)\n }, [items])\n\n return (\n \n )\n}\n\nexport default WorkbenchFooter\n","const searchIcon = () => {\n return (\n \n )\n}\n\nexport default searchIcon\n","import { useSearchBox } from \"react-instantsearch-hooks-web\"\nimport cx from \"classnames\"\nimport SearchIcon from \"../../icons/SearchIcon\"\nimport { useWorkbenchStore } from \"../../store/store\"\nimport { resultsFilters } from \"./FilterTransforms\"\nimport { useEffect, useState } from \"react\"\n\nconst WorkbenchSearchFilterListItem = ({ item }) => {\n const setSelectedResultsFilter = useWorkbenchStore((state) => state.setSelectedResultsFilter)\n const selectedResultsFilter = useWorkbenchStore((state) => state.selectedResultsFilter)\n\n const handleSearchFilterClick = (e) => {\n setSelectedResultsFilter(e.target.dataset.value)\n }\n\n return (\n \n
\n \n \n \n \n \n
\n\n \n \n \n \n \n
\n \n \n \n \n \n
\n - \n {items.map((item, index) => (\n
- \n {items.slice(0, rows).map((item, index) => (\n
- \n {items.slice(rows).map((item, index) => (\n
\n
\n )\n}\n\nexport default CircleRange\n","import { useEffect, useState } from \"react\"\nimport { useRange } from \"react-instantsearch-hooks-web\"\nimport cx from \"classnames\"\nimport { useWorkbenchStore } from \"../../store/store\"\nimport { MAX_DURATION } from \"./FilterTransforms\"\nimport CircleRange from \"./CircleRange\"\n\nconst WorkbenchFilterLength = ({ id }) => {\n const currentFilter = useWorkbenchStore((state) => state.currentFilter)\n const lengthMin = useWorkbenchStore((state) => state.lengthMin)\n const lengthMax = useWorkbenchStore((state) => state.lengthMax)\n const setLengthMax = useWorkbenchStore((state) => state.setLengthMax)\n const setLengthMin = useWorkbenchStore((state) => state.setLengthMin)\n const [value, setValue] = useState({ min: 0, max: MAX_DURATION })\n const { refine } = useRange({ attribute: \"duration\", max: MAX_DURATION })\n\n const handleChange = (values) => {\n setValue(values)\n }\n\n const handleDragEnd = (minValue, maxValue) => {\n setLengthMin(minValue)\n setLengthMax(maxValue)\n refine([minValue, maxValue])\n }\n\n useEffect(() => {\n if (currentFilter === id) {\n setValue({ min: lengthMin || 0, max: lengthMax || MAX_DURATION })\n }\n }, [currentFilter])\n\n useEffect(() => {\n // MIN val has been set to undefined or 0 but MAX is still a defined number\n if (!(lengthMin > 0) && lengthMax) {\n setValue({ min: 0, max: lengthMax })\n }\n // MAX val has been set to undefined but MIN is still a defined number > 0\n else if ((!lengthMax || lengthMax === MAX_DURATION) && lengthMin > 0) {\n setValue({ min: value.min, max: MAX_DURATION })\n }\n\n // Both Values have been set to undefined in workbench state so display them at their respective extremes\n if (!(lengthMin > 0) && (lengthMax == undefined || lengthMax === MAX_DURATION)) {\n setValue({ min: 0, max: MAX_DURATION })\n }\n\n refine([lengthMin, lengthMax])\n }, [lengthMin, lengthMax])\n\n return (\n <>\n \n \n )\n}\n\nexport default WorkbenchFilterLength\n","import { useWorkbenchStore } from \"../../store/store\"\nimport cx from \"classnames\"\n\nconst InstrumentsListItem = ({ item, refine }) => {\n const instrumentsToggledOn = useWorkbenchStore((state) => state.instrumentsToggledOn)\n const instrumentsToggledOff = useWorkbenchStore((state) => state.instrumentsToggledOff)\n const addToInstrumentsOn = useWorkbenchStore((state) => state.addToInstrumentsOn)\n const addToInstrumentsOff = useWorkbenchStore((state) => state.addToInstrumentsOff)\n const removeFromInstrumentsOn = useWorkbenchStore((state) => state.removeFromInstrumentsOn)\n const removeFromInstrumentsOff = useWorkbenchStore((state) => state.removeFromInstrumentsOff)\n\n const handleClick = (e) => {\n e.preventDefault()\n if (!instrumentsToggledOn.includes(item.value) && !instrumentsToggledOff.includes(item.value)) {\n addToInstrumentsOn(item.value)\n refine(item.value)\n } else if (instrumentsToggledOn.includes(item.value)) {\n removeFromInstrumentsOn(item.value)\n addToInstrumentsOff(item.value)\n // Todo: In a future ticket, look into integrating setIndexUiState to handle both refinement updates in one call\n // https://github.com/algolia/react-instantsearch/discussions/3491\n refine(item.value)\n refine(\"-\" + item.value)\n } else if (instrumentsToggledOff.includes(item.value)) {\n removeFromInstrumentsOff(item.value)\n refine(\"-\" + item.value)\n }\n }\n\n return (\n \n
\n\n \n
\n \n {formatTime(minValue)}\n
\n \n
\n \n {formatTime(maxValue)}\n
\n - \n {items.map((item, index) => (\n
- \n
- \n {isInternalUser && (\n <>\n {internalFilterColors.map((item, index) => {\n return (\n
- \n {item.name}\n \n )\n })}\n \n )}\n {groupedCatalogs.map((catalog, index) => {\n return (\n
- \n {catalog.name}\n \n )\n })}\n
- \n {cardTypes.map((type) => {\n const cardChosen = type === activeType\n const noMatch = activeType === \"\" || !cardTypes.includes(activeType)\n\n return (\n
- \n
\n \n \n {({ field, form }) => {\n return (\n handleOnChange(e, fieldName, form.setFieldValue)}\n aria-label={formatAriaLabel(fieldName)}\n className={cx(formStyles.input, inputClass, {\n [formStyles.inputError]: showErrorBorder,\n })}\n />\n )\n }}\n \n
\n )\n}\n\nMaskedTextField.defaultProps = {\n inputClass: \"\",\n wrapperClass: \"\",\n type: \"text\",\n showErrorBorder: false,\n}\n\nexport default MaskedTextField\n","import React from \"react\"\nimport cx from \"classnames\"\n\nconst MasterLicenseAgreement = ({ masterLicenseAgreement, showMLA }) => {\n return (\n \n
\n )\n}\n\nexport default MasterLicenseAgreement\n","import React from \"react\"\nimport { formatMoney } from \"accounting\"\n\nconst LicenseVersion = ({ licenseVersion, isCustom }) => {\n return (\n \n
\n Master License Agreement
\n \n\n {licenseVersion.name} \n \n \n
\n )\n}\n\nconst Row = ({ value, label }) => {\n if (!value) return null\n\n return (\n - \n
\n |
\n |
\n |
\n |
\n
\n )}\n \n
\n )\n}\n\nexport default SelectedLicenses\n","// extracted by mini-css-extract-plugin\nexport default {\"paymentFields\":\"CheckoutForm-module_paymentFields__Vx8n6\",\"cvc\":\"CheckoutForm-module_cvc__p0xD0\",\"postalCode\":\"CheckoutForm-module_postalCode__XfUm3\"};","import React, { Component } from \"react\"\nimport { Form, Field, ErrorMessage } from \"formik\"\nimport cx from \"classnames\"\nimport Cards from \"./Cards\"\nimport CheckboxField from \"../../../shared/components/CheckboxField\"\nimport FormFlashMsg from \"../../../shared/components/FormFlashMsg\"\nimport MaskedTextField from \"../../../shared/components/MaskedTextField\"\nimport MasterLicenseAgreement from \"./MasterLicenseAgreement\"\nimport ScrollToError from \"../../../shared/components/ScrollToError\"\nimport SelectedLicenses from \"./SelectedLicenses\"\nimport SelectField from \"../../../shared/components/SelectField\"\nimport TextField from \"../../../shared/components/TextField\"\nimport styles from \"../styles/CheckoutForm.module.scss\"\nimport formStyles from \"../../../shared/styles/form.module.scss\"\nimport { monthOptions, yearOptions } from \"../../../shared/data/selectOptions\"\nimport { showErrorBorder } from \"../../../shared/utils/form\"\nimport { countryOptions, regionOptions } from \"../../../shared/data/selectOptions\"\n\nclass CheckoutForm extends Component {\n state = {\n regions: [],\n cardFieldsDisabled: false,\n showMLA: false,\n cardType: \"\",\n cardMessage:\n \"Sweet! You got a 100% discount! We still need your billing info, but you won't be charged.\",\n }\n\n handleSelectedCountry = (fieldName, selectedValue) => {\n const { setFieldValue, values } = this.props\n const selectedCountry = selectedValue.value\n const prevCountry = values.billing_information_attributes.address_attributes.country.value\n setFieldValue(fieldName, selectedValue)\n\n if (selectedCountry !== \"\" && selectedCountry !== prevCountry) {\n this.setState({ regions: regionOptions(selectedCountry) })\n setFieldValue(\"billing_information_attributes.address_attributes.subregion\", {\n label: \"Select a region...\",\n value: \"\",\n })\n }\n }\n\n handleSavedCard = (fieldName, selectedValue) => {\n const { setFieldValue } = this.props\n setFieldValue(fieldName, selectedValue)\n\n if (selectedValue.value === \"Add New Card\") {\n const ccFields = [\"card_number\", \"cvc\", \"exp_month\", \"exp_year\"]\n ccFields.forEach((field) => setFieldValue(field, \"\"))\n this.setState({ cardFieldsDisabled: false, cardType: \"\" })\n } else {\n const [last4, month, year] = selectedValue.label.match(/\\d+/g)\n let cardType = selectedValue.label.split(\" ******\")[0].toLowerCase()\n cardType = cardType === \"american express\" ? \"amex\" : cardType\n\n setFieldValue(\"card_number\", `000000000000${last4}`)\n setFieldValue(\"exp_month\", { label: month, value: month })\n setFieldValue(\"exp_year\", { label: year, value: year })\n setFieldValue(\"cvc\", \"***\")\n setFieldValue(\"save_new_card\", false)\n this.setState({ cardFieldsDisabled: true, cardType })\n }\n }\n\n onCreditCardTypeChanged = (type) => {\n if (type === \"unknown\") return false\n this.setState({ cardType: type })\n }\n\n toggleMasterLicenseAgreement = (e) => {\n e.preventDefault()\n this.setState({ showMLA: !this.state.showMLA })\n }\n\n render() {\n const { cardFieldsDisabled, showMLA, regions } = this.state\n const {\n values,\n setFieldValue,\n setFieldTouched,\n isSubmitting,\n isCustom,\n showSavedCards,\n errors,\n touched,\n licenseVersions,\n lineItems,\n masterLicenseAgreement,\n orderId,\n isClick,\n savedCards,\n isLoggedIn,\n orderType,\n discount,\n subtotal,\n } = this.props\n\n return (\n \n )\n }\n}\n\nexport default CheckoutForm\n","import React, { Fragment } from \"react\"\nimport { formatMoney } from \"accounting\"\n\nconst LineItem = ({ song, artist, license, price }) => {\n return (\n \n
\n Selected Licenses
\n\n This is a highlight of your license only. For full terms, please read the Master Legal\n Agreement below.\n
\n- \n {licenseVersions.length > 0 &&\n licenseVersions.map((lv) => (\n
\n {song}\n
\n \n {artist}\n
\n \n {license}\n
\n {formatMoney(price)}
\n \n
\n )\n}\n\nexport default OrderTotal\n","import React from \"react\"\nimport LineItem from \"./LineItem\"\nimport OrderTotal from \"./OrderTotal\"\n\nconst CheckoutDetails = (props) => {\n const { lineItems, subtotal, promoCode, discount, total, isLoggedIn } = props\n\n return (\n \n Subtotal\n {formatMoney(subtotal)}\n
\n {promoCode && isLoggedIn && (\n \n Promotion\n \n {promoCode} - {formatMoney(discount)}\n \n
\n )}\n \n Total\n {formatMoney(total)}\n
\n \n
\n Song
\n Artist
\n License
\n Cost
\n {lineItems.map(({ id, ...lineItemInfo }) => (\n \n
\n )\n }\n\n return this.props.children\n }\n}\n\nexport default ErrorBoundary\n","import React, { Component } from \"react\"\nimport { Formik } from \"formik\"\nimport * as yup from \"yup\"\nimport axios from \"axios\"\nimport valid from \"card-validator\"\nimport CheckoutForm from \"./components/CheckoutForm\"\nimport CheckoutDetails from \"./components/CheckoutDetails\"\nimport PromoCodeForm from \"./components/PromoCodeForm\"\nimport FormFlashMsg from \"../../shared/components/FormFlashMsg\"\nimport ErrorBoundary from \"../../shared/components/ErrorBoundary\"\nimport { checkoutParams } from \"../../shared/utils/paramModifiers\"\nimport { captureAnalytics } from \"./utils/checkout\"\n\nconst validationSchema = yup.object().shape({\n billing_information_attributes: yup.object().shape({\n first_name: yup.string().required(\"First name is required.\"),\n last_name: yup.string().required(\"Last name is required.\"),\n end_client: yup.string().required(\"End user is required.\"),\n email: yup.string().email(\"Email is invalid\").required(\"Email is required.\"),\n address_attributes: yup.object().shape({\n line1: yup.string().required(\"Billing address is required.\"),\n country: yup.object().shape({\n label: yup.string().required(\"Country is required.\"),\n value: yup.string().required(\"Country is required.\"),\n }),\n subregion: yup.object().shape({\n label: yup.string().required(\"State/Region is required.\"),\n value: yup.string().required(\"State/Region is required.\"),\n }),\n city: yup.string().required(\"City is required.\"),\n postal_code: yup.string().required(\"Postal code is required.\"),\n }),\n }),\n saved_card: yup.object().shape({\n label: yup.string(),\n value: yup.string(),\n }),\n card_number: yup.string().when(\"saved_card\", {\n is: (selectedCard) => isNaN(selectedCard.value),\n then: yup\n .string()\n .required(\"Card number is required.\")\n .test(\"card-number\", \"Card number is invalid.\", (value) => valid.number(value).isValid),\n }),\n exp_month: yup.object().shape({\n label: yup.string(),\n value: yup.string().required(\"Exp month is required.\"),\n }),\n exp_year: yup.object().shape({\n label: yup.string(),\n value: yup.string().required(\"Exp year is required.\"),\n }),\n cvc: yup\n .string()\n .required(\"CVC is required.\")\n .matches(/^[0-9*]{3,4}$/, \"CVC must be 3-4 digits.\"),\n agree_to_terms: yup.bool().oneOf([true], \"You must agree to terms before submitting.\"),\n})\n\nclass CheckoutContainer extends Component {\n state = {\n authenticity_token: \"\",\n discount: 0,\n isClick: true,\n isCustom: false,\n isLoggedIn: false,\n isLoading: true,\n licenseVersions: [],\n lineItems: [],\n masterLicenseAgreement: \"\",\n orderId: \"\",\n orderType: \"\",\n promoCode: \"\",\n promoCodeResponse: [],\n promoCodeSuccess: false,\n savedCards: [],\n stripeKey: \"\",\n subtotal: 0,\n total: 0,\n billing_information: {\n first_name: \"\",\n last_name: \"\",\n company: \"\",\n end_client: \"\",\n phone: \"\",\n email: \"\",\n address_attributes: {\n line1: \"\",\n line2: \"\",\n country: { label: \"Select a country...\", value: \"\" },\n subregion: { label: \"Select a state/region...\", value: \"\" },\n city: \"\",\n postal_code: \"\",\n },\n },\n }\n\n componentDidMount = () => {\n const drawerSpinner = document.querySelector(\".loading\")\n if (drawerSpinner) drawerSpinner.remove()\n const orderId = window.location.pathname.match(/[0-9]+/)[0]\n const orderType = window.location.pathname.split(\"/\")[1]\n\n axios\n .get(`/api/v1/orders/order_props/${orderId}/type=${orderType}`)\n .then(({ data }) => this.setState(data))\n }\n\n initialValues = () => {\n return {\n save_new_card: false,\n agree_to_terms: false,\n card_number: \"\",\n exp_month: \"\",\n exp_year: \"\",\n cvc: \"\",\n id: this.state.orderId,\n notes: \"\",\n billing_information_attributes: {\n first_name: this.state.billing_information.first_name || \"\",\n last_name: this.state.billing_information.last_name || \"\",\n company: this.state.billing_information.company || \"\",\n end_client: \"\",\n phone: this.state.billing_information.phone || \"\",\n email: this.state.billing_information.email || \"\",\n address_attributes: {\n line1: this.state.billing_information.address_attributes.line1 || \"\",\n line2: this.state.billing_information.address_attributes.line2 || \"\",\n country: { label: \"Select a country...\", value: \"\" },\n subregion: { label: \"Select a state/region...\", value: \"\" },\n city: this.state.billing_information.address_attributes.city || \"\",\n postal_code: this.state.billing_information.address_attributes.postal_code || \"\",\n },\n },\n }\n }\n\n handleSubmit = (params, actions) => {\n const { country, subregion, postal_code } =\n params.billing_information_attributes.address_attributes\n\n fbq(\"track\", \"AddPaymentInfo\")\n\n if (!_.isEmpty(params.saved_card) && !isNaN(params.saved_card.value)) {\n this.orderPatchRequest(params, actions)\n } else {\n Stripe.card.createToken(\n {\n number: params.card_number,\n cvc: params.cvc,\n exp_month: params.exp_month.value,\n exp_year: params.exp_year.value,\n address_zip: postal_code,\n },\n (status, response) => {\n if (status === 200) {\n params.stripe_card_token = response.id\n this.orderPatchRequest(params, actions)\n } else {\n actions.setErrors({ server: [response.error.message] })\n actions.setSubmitting(false)\n document.querySelector(\".flash-msg\").scrollIntoView({ behavior: \"smooth\" })\n }\n // these fields get cleared out for no apparent reason so need to set them again to persist\n actions.setFieldValue(\n \"billing_information_attributes.address_attributes.country\",\n country\n )\n actions.setFieldValue(\n \"billing_information_attributes.address_attributes.subregion\",\n subregion\n )\n }\n )\n }\n }\n\n handlePromoCode = (promoCode, discount) => {\n this.setState({\n promoCode,\n discount,\n total: this.state.subtotal - discount,\n })\n }\n\n setPromoCodeResponse = (promoCodeResponse, promoCodeSuccess) => {\n this.setState({ promoCodeResponse, promoCodeSuccess })\n }\n\n orderPatchRequest = (params, actions) => {\n axios\n .request(`/order/complete/${this.state.orderType}`, {\n method: \"patch\",\n data: {\n order: checkoutParams(params),\n authenticity_token: this.props.authenticity_token,\n agree_to_terms: params.agree_to_terms,\n save_new_card: params.save_new_card,\n saved_card: params.saved_card && params.saved_card.value,\n },\n })\n .then(({ data }) => {\n if (data.success) {\n fbq(\"track\", \"Purchase\", { value: data.order.sale_price, currency: \"USD\" })\n mm.cart.hydrate()\n if (data.show_analytics) captureAnalytics(data.order, data.analytics)\n mm.router.navigate(`/order/${encodeURI(data.encrypted_id)}/receipt/${data.order_type}`, {\n trigger: true,\n })\n } else {\n actions.setErrors({ server: data.errors })\n actions.setSubmitting(false)\n document.querySelector(\".flash-msg\").scrollIntoView({ behavior: \"smooth\" })\n }\n })\n .catch((error) => {\n console.log(error)\n actions.setSubmitting(false)\n document.querySelector(\"body\").scrollIntoView({ behavior: \"smooth\" })\n })\n }\n\n render() {\n const { isLoading, lineItems, promoCodeResponse, promoCodeSuccess } = this.state\n const cartIsEmpty = !isLoading && lineItems.length < 1\n\n if (cartIsEmpty) {\n return An error occurred.
\nPlease reload the page and try again.
\nYour cart is empty.
\n } else {\n return (\n\n {status && status.message && (\n
\n\n \n
\n )}\n \n
\n {status.message}
\n {status.errors.map((error, ind) => (\n{error}
\n ))}\n\n {songVersion && (\n
\n \n \n Song Version/Artist: \n {songVersion.display_name} by {songVersion.artist.name}\n \n
\n )}\n \n \n
\n \n \n \n
\n Custom Request Form
\n\n
\n\n \n
\n \n Let's tailor a license to your needs! Please complete the form below to get started.{\" \"}\n
\n\n If you prefer to skip the form and talk to one of our team members, email us at{\" \"}\n
\n Please note that vintage songs are priced at a higher rate.\n
\n\n {expiredToken ? (\n \n Oops! It looks like this page has expired.\n
\n ) : (\n \n There was an error loading your songs.\n
\n )}\n
\n )\n}\n\nexport default DownloadSongVersionsError\n","const DownloadSongVersionsItem = ({ songVersion, stemsUrl }) => {\n const style = {\n background: `url( ${songVersion.primary_album.art.url} ) center center / cover no-repeat`,\n }\n\n return (\n \n Oops! It looks like this page has expired.\n
\n Please reach back out to us for a new link:
\n ) : (\n \n There was an error loading your songs.\n
\n Please reload the page or reach out to
\n )}\n \n \n
\n {songVersion.display_name}
\n{songVersion.artist.name}
\n \n\n
\n \n {songVersion.song_version_file && (\n \n Download Song\n \n )}\n {stemsUrl && (\n \n Download Stems\n \n )}\n
\n \n
\n \n \n
\n Download Your Songs Here
\n{`Order ${id}`}
\n\n
\n\n \n
\n Ready to get started? You can temporarily download your song files on this page.
\n\n {showError &&
\n Loading ...
}\n {!isLoading && !showError && (\n \n
\n )}\n - \n {_.map(songVersionItems, (item) => (\n
\n \n Download All Files\n \n
\n \n {props.loading && }\n\n Mixtapes and Albums,\n },\n { text: \"Show: Albums\", value: \"albums\", markup: Albums },\n { text: \"Show: Mixtapes\", value: \"mixtapes\", markup: Mixtapes },\n ]}\n selectedValue={props.selectedFilter}\n caretIcon={caretIcon}\n onChange={(selected) => handleFilterOrSort(\"filter\", selected)}\n />\n\n handleFilterOrSort(\"genres\", selected)}\n />\n\n Marmoset Default,\n },\n {\n text: \"Sort: Newest to Oldest\",\n value: \"newest\",\n markup: Newest to Oldest,\n },\n {\n text: \"Sort: Oldest to Newest\",\n value: \"oldest\",\n markup: Oldest to Newest,\n },\n { text: \"Sort: A - Z\", value: \"a-z\", markup: A - Z },\n { text: \"Sort: Z - A\", value: \"z-a\", markup: Z - A },\n ]}\n selectedValue={props.selectedSort}\n caretIcon={caretIcon}\n onChange={(selected) => handleFilterOrSort(\"sort\", selected)}\n />\n
\n )\n}\n\nexport default MixtapeFilterSort\n","import React from \"react\"\n\nconst NoResults = () => (\n \n
\n)\n\nexport default NoResults\n","import { multiSelectOptionMarkup } from \"../utils/reactResponsiveSelectHelpers\"\n\nconst genreSelectOptions = [\n { text: \"All\", value: \"\", markup: multiSelectOptionMarkup(\"All\") },\n { text: \"Ambient\", value: \"Ambient\", markup: multiSelectOptionMarkup(\"Ambient\") },\n { text: \"Beats\", value: \"Beats\", markup: multiSelectOptionMarkup(\"Beats\") },\n { text: \"Blues & Jazz\", value: \"Blues & Jazz\", markup: multiSelectOptionMarkup(\"Blues & Jazz\") },\n { text: \"Country\", value: \"Country\", markup: multiSelectOptionMarkup(\"Country\") },\n { text: \"Dance\", value: \"Dance\", markup: multiSelectOptionMarkup(\"Dance\") },\n { text: \"Electronic\", value: \"Electronic\", markup: multiSelectOptionMarkup(\"Electronic\") },\n { text: \"Folk\", value: \"Folk\", markup: multiSelectOptionMarkup(\"Folk\") },\n {\n text: \"Hip Hop & Rap\",\n value: \"Hip Hop & Rap\",\n markup: multiSelectOptionMarkup(\"Hip Hop & Rap\"),\n },\n { text: \"Orchestral\", value: \"Orchestral\", markup: multiSelectOptionMarkup(\"Orchestral\") },\n { text: \"Pop\", value: \"Pop\", markup: multiSelectOptionMarkup(\"Pop\") },\n { text: \"Rock\", value: \"Rock\", markup: multiSelectOptionMarkup(\"Rock\") },\n { text: \"RnB & Soul\", value: \"RnB & Soul\", markup: multiSelectOptionMarkup(\"RnB & Soul\") },\n { text: \"Vintage\", value: \"Vintage\", markup: multiSelectOptionMarkup(\"Vintage\") },\n { text: \"World\", value: \"World\", markup: multiSelectOptionMarkup(\"World\") },\n]\n\nexport default genreSelectOptions\n","import React, { Component } from \"react\"\nimport axios from \"axios\"\nimport Mixtapes from \"../../shared/components/Mixtapes\"\nimport MixtapeFilterSort from \"./components/MixtapeFilterSort\"\nimport NoResults from \"./components/NoResults\"\nimport genreSelectOptions from \"../../shared/data/genreSelectOptions\"\n\nclass MixtapesContainer extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n mixtapes: [],\n genreSelectOptions: genreSelectOptions,\n selectedGenres: [\"\"],\n selectedSort: \"\",\n selectedFilter: \"\",\n offset: 0,\n viewMore: false,\n loading: true,\n noResults: false,\n }\n\n this.updateMixtapes = this.updateMixtapes.bind(this)\n this.viewMore = this.viewMore.bind(this)\n this.showLoader = this.showLoader.bind(this)\n }\n\n componentDidMount() {\n const filterKeyword = window.location.search.split(\"=\")[1]\n if (filterKeyword) {\n this.showLoader()\n this.updateMixtapes(filterKeyword)\n } else {\n axios.get(\"/mixtapes/feed\").then((response) => {\n this.setState({\n ...this.state,\n viewMore: true,\n loading: false,\n mixtapes: response.data.mixtapes,\n })\n })\n }\n }\n\n showLoader() {\n this.setState({ ...this.state, loading: true })\n }\n\n updateMixtapes(selected) {\n this.showLoader()\n const filterKeyword = window.location.search.split(\"=\")[1]\n\n const genres = selected.options\n ? selected.options.map((o) => o.value)\n : this.state.selectedGenres\n const sort = selected.name === \"sort\" ? selected.value : this.state.selectedSort\n const filter = selected.name === \"filter\" ? selected.value : filterKeyword\n const params = { genres, sort, filter }\n\n // prevents more than 3 genres from being selected\n if (selected.options) {\n const selectedGenres = selected.options.map((option) => option.value)\n var updatedGenreSelectOptions = genreSelectOptions.map((option) => {\n if (\n selected.options.length < 3 ||\n option.text === \"All\" ||\n selectedGenres.includes(option.text)\n ) {\n return option\n } else {\n return { ...option, disabled: true }\n }\n })\n }\n\n axios.get(\"/mixtapes/feed\", { params }).then((response) => {\n const { mixtapes } = response.data\n window.mm.router.navigate(`/mixtapes?show=${filter}`)\n\n this.setState({\n ...this.state,\n loading: false,\n viewMore: mixtapes.length !== response.data.total,\n offset: 0,\n selectedSort: sort,\n selectedGenres: genres,\n selectedFilter: filter,\n genreSelectOptions: updatedGenreSelectOptions || this.state.genreSelectOptions,\n mixtapes: mixtapes,\n noResults: mixtapes.length === 0,\n })\n })\n }\n\n viewMore() {\n const offset = this.state.offset + 16\n const params = {\n offset: offset,\n genres: this.state.selectedGenres,\n sort: this.state.selectedSort,\n filter: this.state.selectedFilter,\n }\n\n axios.get(\"/mixtapes/feed\", { params }).then((response) => {\n const { mixtapes } = response.data\n\n this.setState({\n ...this.state,\n offset: offset,\n loading: false,\n viewMore: this.state.mixtapes.length + mixtapes.length !== response.data.total,\n mixtapes: this.state.mixtapes.concat(mixtapes),\n })\n })\n }\n\n render() {\n const {\n mixtapes,\n loading,\n genreSelectOptions,\n selectedGenres,\n selectedSort,\n selectedFilter,\n noResults,\n } = this.state\n\n return (\n Sorry, there are no results matching your search terms.
\nTry removing some genres or maybe clear all and start over.
\n\n
\n Mixtapes and Albums
\n\n
\n \n
\n )}\n {noResults && - \n
- {order.id} \n
- {order.endClient ? order.endClient : \"n/a\"} \n
- {order.purchaseDate} \n
- {order.total} \n
\n
\n \n
\n \n
\n )\n}\n\nexport default ConfirmSelection\n","// extracted by mini-css-extract-plugin\nexport default {\"results\":\"SongVersionItem-module_results__yCFBn\",\"selectButton\":\"SongVersionItem-module_selectButton__Ak488\",\"link\":\"SongVersionItem-module_link__R9_FF\",\"songArtist\":\"SongVersionItem-module_songArtist__Vi57y\",\"length\":\"SongVersionItem-module_length__kwYJb\",\"select\":\"SongVersionItem-module_select__gUzEd\"};","import { useRef } from \"react\"\nimport styles from \"../styles/SongVersionItem.module.scss\"\n\nconst SongVersionItem = ({ lineItemId, songVersion, handleShowConfirmation }) => {\n const { id, artist, displayName, length } = songVersion\n const selectButton = useRef()\n\n return (\n \n
\n Confirm Song Selection
\n\n
\n \n Are you sure you want to choose{\" \"}\n \n {displayName}\n {\" \"}\n by \n \n {artist.name}\n \n ?\n
\n \n \n
\n \n \n Select\n \n \n \n Cancel\n \n
\n \n
\n )\n}\n\nexport default SongVersionItem\n","import { useState, useEffect, useRef } from \"react\"\nimport { gql, useLazyQuery } from \"@apollo/client\"\nimport { Formik, Form } from \"formik\"\nimport cx from \"classnames\"\nimport ConfirmSelection from \"./ConfirmSelection\"\nimport SongVersionItem from \"./SongVersionItem\"\nimport TextField from \"../../../shared/components/TextField\"\nimport styles from \"../styles/SongSearchModal.module.scss\"\nimport tbdSvItemStyles from \"../styles/SongVersionItem.module.scss\"\nimport buttonStyles from \"../../../shared/styles/buttons.module.scss\"\nimport formStyles from \"../../../shared/styles/form.module.scss\"\nimport modalStyles from \"../../../shared/styles/modal.module.scss\"\n\nconst GET_SONG_VERSION_SEARCH = gql`\n query songVersionSearch($songVersionTitle: String, $artistName: String) {\n songVersionSearch(songVersionTitle: $songVersionTitle, artistName: $artistName) {\n results {\n id\n artist {\n name\n slug\n }\n displayName\n length\n }\n }\n }\n`\n\nconst SongSearchModal = ({\n lineItemId,\n openModalButton,\n songInput,\n setOpenModal,\n handleCloseModal,\n handleSetError,\n}) => {\n const [showConfirmation, setShowConfirmation] = useState(false)\n const [selection, setSelection] = useState({})\n const [selectRef, setSelectRef] = useState(null)\n const confirmCheckbox = useRef()\n const [getTbdSVResults, { called, error, loading, data }] = useLazyQuery(GET_SONG_VERSION_SEARCH)\n\n useEffect(() => {\n if (showConfirmation) confirmCheckbox.current.focus()\n })\n\n useEffect(() => {\n return () => {\n if (openModalButton.current) openModalButton.current.focus()\n }\n }, [])\n\n const handleSubmit = (params) => {\n getTbdSVResults({\n variables: {\n songVersionTitle: params.songVersion,\n artistName: params.artist,\n },\n })\n }\n\n const handleShowConfirmation = (lineItemId, songVersion, selectButton) => {\n setSelection({\n lineItemId,\n songVersion,\n })\n setShowConfirmation(!showConfirmation)\n setSelectRef(selectButton)\n }\n\n const renderResults = () => {\n if (loading) return \n \n {displayName}\n \n
\n \n by \n \n {artist.name}\n \n
\n {length}
\n \n handleShowConfirmation(lineItemId, songVersion, selectButton)}\n >\n
\n Loading ...
\n if (error) {\n return (\n \n
\n )\n }\n if (called && data.songVersionSearch.results.length > 0) {\n return data.songVersionSearch.results.map((songVersion) => (\n An error occurred. Please try again.
\nNo Results
\n }\n\n const initialValues = {\n artist: \"\",\n songVersion: \"\",\n }\n\n return (\n \n
\n )\n}\n\nexport default SongSearchModal\n","import { useEffect, useState } from \"react\"\nimport { gql, useMutation } from \"@apollo/client\"\nimport { Formik, Form } from \"formik\"\nimport cx from \"classnames\"\nimport styles from \"../styles/ClientNoteModal.module.scss\"\nimport buttonStyles from \"../../../shared/styles/buttons.module.scss\"\nimport formStyles from \"../../../shared/styles/form.module.scss\"\nimport modalStyles from \"../../../shared/styles/modal.module.scss\"\n\nconst ADD_CLIENT_NOTE = gql`\n mutation addClientNote($id: ID!, $clientNotes: String!) {\n addClientNote(id: $id, clientNotes: $clientNotes) {\n lineItem {\n id\n clientNotes\n }\n }\n }\n`\nconst ClientNoteModal = ({\n lineItemId,\n openModalButton,\n clientNotes,\n setOpenModal,\n noteInput,\n handleSetError,\n handleCloseModal,\n}) => {\n const [addClientNote] = useMutation(ADD_CLIENT_NOTE)\n const [noteText, setNoteText] = useState(clientNotes != \"None\" ? clientNotes : \"\")\n\n useEffect(() => {\n return () => {\n if (openModalButton.current) openModalButton.current.focus()\n }\n }, [])\n\n const handleSubmit = () => {\n const variables = {\n id: lineItemId,\n clientNotes: noteText,\n }\n\n addClientNote({ variables })\n .then(() => setOpenModal(false))\n .catch((err) => handleSetError(err.graphQLErrors))\n }\n\n const handleChange = (e) => {\n setNoteText(e.target.value)\n }\n\n return (\n \n \n {() => (\n \n )}\n \n\n
\n \n
\n\n - \n
- Song / Artist \n
- Length \n \n
{renderResults()}
\n \n \n Cancel Selection\n \n
\n {showConfirmation && (\n \n
\n )\n}\n\nexport default ClientNoteModal\n","// extracted by mini-css-extract-plugin\nexport default {\"lineItemInfo\":\"LineItem-module_lineItemInfo__FK08_\",\"songOrNoteModalButton\":\"LineItem-module_songOrNoteModalButton__U9XH4\",\"editIcon\":\"LineItem-module_editIcon__pPqxG\",\"song\":\"LineItem-module_song__s1Qqx\",\"artist\":\"LineItem-module_artist__VDDGM\",\"item\":\"LineItem-module_item__y6do9\",\"notes\":\"LineItem-module_notes__h8cd7\",\"noteButtonWrapper\":\"LineItem-module_noteButtonWrapper__GSBKa\",\"noteContent\":\"LineItem-module_noteContent__h0FBx\",\"cost\":\"LineItem-module_cost__ClZNl\",\"downloadSong\":\"LineItem-module_downloadSong__hXpXT\",\"downloadStems\":\"LineItem-module_downloadStems__UFe8A\",\"stemsRequest\":\"LineItem-module_stemsRequest__wdlVB\",\"notApplicable\":\"LineItem-module_notApplicable__vBJpj\",\"notAvailable\":\"LineItem-module_notAvailable__yh2zF\",\"errorMessageWrapper\":\"LineItem-module_errorMessageWrapper__ar5OK\",\"errorMessage\":\"LineItem-module_errorMessage__l8ufF\",\"closeMessage\":\"LineItem-module_closeMessage__MAMsw\",\"closeIcon\":\"LineItem-module_closeIcon__aR9gI\",\"tbdUpdated\":\"LineItem-module_tbdUpdated__eprHg\",\"flash\":\"LineItem-module_flash__QK62g\"};","import { useState, useEffect, useRef } from \"react\"\nimport cx from \"classnames\"\nimport Modal from \"../../../shared/components/Modal\"\nimport SongSearchModal from \"./SongSearchModal\"\nimport ClientNoteModal from \"./ClientNoteModal\"\nimport { escapeToClose } from \"../../../shared/utils/helpers\"\nimport DownloadIcon from \"../../../icons/DownloadIcon\"\nimport styles from \"../styles/LineItem.module.scss\"\nimport { useDidMount } from \"../../../shared/utils/useDidMount\"\n\nconst LineItem = ({ item, allowClientToSelectTbd }) => {\n const {\n id,\n songVersionTitle,\n songVersionId,\n showDownloadLink,\n showDownloadStemsLink,\n stemsAvailableUponRequest,\n artistName,\n clientNotes,\n license,\n price,\n } = item\n const [currentModal, setCurrentModal] = useState(\"\")\n const [openModal, setOpenModal] = useState(false)\n const [error, setError] = useState(null)\n const [tbdUpdated, setTbdUpdated] = useState(false)\n const openModalButton = useRef()\n const songInput = useRef()\n const noteInput = useRef()\n const didMount = useDidMount()\n\n useEffect(() => {\n return escapeToClose(setOpenModal)\n })\n\n useEffect(() => {\n if (openModal && currentModal === \"song\") {\n songInput.current.focus()\n } else if (openModal && currentModal === \"note\") {\n noteInput.current.focus()\n }\n })\n\n useEffect(() => {\n if (didMount) setTbdUpdated(true)\n }, [songVersionTitle, clientNotes])\n\n const handleOpenModal = (e) => {\n setCurrentModal(e.target.name)\n setOpenModal(true)\n }\n const handleCloseModal = (e) => {\n e.stopPropagation()\n setOpenModal(false)\n }\n const handleCloseError = () => setError([])\n const handleSetError = (error) => setError(error)\n\n const NotesSection = ({ clientNotes, allowClientToSelectTbd }) => {\n if (clientNotes === \"None\" && allowClientToSelectTbd) {\n return (\n \n \n {({ isSubmitting }) => (\n \n )}\n \n\n
\n \n \n
\n \n
\n )}\n \n {error.map(({ message }, ind) => (\n {message}\n ))}\n
\n \n
\n - \n
- {id} \n
- {endClient ? endClient : \"n/a\"} \n
- {purchaseDate} \n
- \n {total}\n \n
\n
\n \n
\n - \n
- Song \n
- Artist \n {allowClientToSelectTbd &&
- Notes }\n
- Item \n
- Cost \n
- Download Song \n
- Download Stems \n
- \n
- \n Download All Songs\n \n
\n \n
\n {range(items).map((n) => {\n return (\n - \n
- 12345678 \n
- End Client \n
- January 1st, 2020 \n
- $1,000.00 \n
\n
\n \n
\n An error has occurred. Please reload the page.
\n )\n const {\n account: { orders },\n } = data\n\n if (orders.length < 1)\n return You don't have any orders yet :(
\n\n return _.map(orders, (order) => {\n if (mm.isMobile) {\n return - \n
- \n
- \n
- Order Number \n
- End Client \n
- Purchase Date \n
- Total \n
\n\n\n\n \n
{loading ?
\n \n
\n \n
\n \n
\n \n
\n {children}
\n \n
{name}
\n \n \n )\n } else {\n return (\n \n\n
\n \n
\n \n )\n }\n}\n\nexport default NameDescription\n","import { gql } from \"@apollo/client\"\n\nexport const ADD_DIRECTION = gql`\n mutation addDirection($id: ID!, $name: String!, $songVersionIds: [ID!]) {\n addDirection(id: $id, name: $name, songVersionIds: $songVersionIds) {\n searchRound {\n id\n directions {\n id\n name\n searchRoundId\n songVersionsCount\n createdAt\n searchRoundSongVersions {\n id\n }\n }\n searchRoundSongVersions {\n id\n }\n }\n }\n }\n`\n\nexport const DELETE_ALL_DIRECTIONS = gql`\n mutation deleteAllDirections($id: ID!) {\n deleteAllDirections(id: $id) {\n searchRound {\n id\n directions {\n id\n searchRoundSongVersions {\n id\n }\n }\n searchRoundSongVersions {\n id\n }\n }\n }\n }\n`\n\nexport const DELETE_DIRECTION = gql`\n mutation deleteDirection($id: ID!) {\n deleteDirection(id: $id) {\n projectSearch {\n id\n searchRounds {\n id\n directions {\n id\n }\n }\n }\n }\n }\n`\n\nexport const UPDATE_DIRECTION_NAME = gql`\n mutation updateDirectionName($id: ID!, $name: String!, $searchRoundId: ID!) {\n updateDirectionName(id: $id, name: $name, searchRoundId: $searchRoundId) {\n projectSearch {\n id\n searchRounds {\n id\n directions {\n id\n name\n }\n }\n }\n }\n }\n`\n","import { useMutation } from \"@apollo/client\"\nimport { DELETE_ALL_DIRECTIONS } from \"../../../graphql/mutations/directions\"\n\nconst DeleteAllDirections = ({ selectedRound }) => {\n const { id, name } = selectedRound[0]\n const [deleteAllDirections] = useMutation(DELETE_ALL_DIRECTIONS)\n\n const postDelete = () => {\n const confirmation = confirm(\n `Are you sure you want to delete all of the directions in ${name}?`\n )\n\n if (confirmation) {\n deleteAllDirections({ variables: { id } }).catch((err) => console.log(err))\n }\n }\n\n return (\n \n )\n}\n\nexport default DeleteAllDirections\n","import { useMutation } from \"@apollo/client\"\nimport { DELETE_PROJECT_SEARCH } from \"../../../graphql/mutations/projectSearches\"\n\nconst DeleteProjectSearch = ({ projectSearchId }) => {\n const [deleteProjectSearch] = useMutation(DELETE_PROJECT_SEARCH)\n\n const postDelete = () => {\n const confirmation = confirm(\"Are you sure you want to delete this entire Search?\")\n\n if (confirmation) {\n deleteProjectSearch({ variables: { id: projectSearchId } })\n .then(() => mm.router.navigate(\"/browse\", { trigger: true }))\n .catch((error) => Sentry.captureException(error))\n }\n }\n\n return (\n \n )\n}\n\nexport default DeleteProjectSearch\n","import { gql } from \"@apollo/client\"\n\nexport const CREATE_SEARCH_ROUND = gql`\n mutation createSearchRound($id: ID!) {\n createSearchRound(id: $id) {\n projectSearch {\n id\n searchRounds {\n id\n name\n projectSearchId\n hidden\n showHighResDownload\n songVersionsPresent\n directions {\n id\n searchRoundSongVersions {\n id\n }\n }\n searchRoundSongVersions {\n id\n }\n }\n }\n }\n }\n`\n\nexport const DELETE_SEARCH_ROUND = gql`\n mutation deleteSearchRound($id: ID!) {\n deleteSearchRound(id: $id) {\n projectSearch {\n id\n searchRounds {\n id\n }\n }\n }\n }\n`\n\nexport const TOGGLE_HIDE_SEARCH_ROUND = gql`\n mutation toggleHideSearchRound($id: ID!, $hidden: Boolean!) {\n toggleHideSearchRound(id: $id, hidden: $hidden) {\n searchRound {\n id\n hidden\n }\n }\n }\n`\n\nexport const TOGGLE_HIGH_RES_DOWNLOAD = gql`\n mutation toggleHighResDownload($id: ID!, $show: Boolean!) {\n toggleHighResDownload(id: $id, show: $show) {\n searchRound {\n id\n showHighResDownload\n }\n }\n }\n`\n","import { gql } from \"@apollo/client\"\n\nconst GET_PROJECT_SEARCH = gql`\n query projectSearch($slug: String!) {\n projectSearch(slug: $slug) {\n id\n name\n description\n pointPerson\n slug\n status\n createdAt\n updatedAt\n searchRounds {\n id\n name\n projectSearchId\n hidden\n showHighResDownload\n songVersionsPresent\n directions {\n id\n name\n searchRoundId\n songVersionsCount\n createdAt\n searchRoundSongVersions {\n id\n searchRoundId\n songVersionId\n artistName\n artistSlug\n catalogColor\n customizable\n length\n notes\n playerArt\n position\n rating\n title\n users\n winner\n isPreRelease\n songVersion {\n id\n customizable\n displayName\n exclusive\n hasClickLicenses\n length\n lyrics\n playerArt\n songVersionFile\n cyaniteId\n hasStems\n artist {\n id\n name\n }\n }\n }\n }\n searchRoundSongVersions {\n id\n searchRoundId\n songVersionId\n artistName\n artistSlug\n catalogColor\n customizable\n length\n notes\n playerArt\n position\n rating\n title\n users\n winner\n isPreRelease\n songVersion {\n id\n customizable\n displayName\n exclusive\n hasClickLicenses\n length\n lyrics\n playerArt\n songVersionFile\n cyaniteId\n hasStems\n artist {\n id\n name\n }\n }\n }\n }\n }\n }\n`\n\nexport default GET_PROJECT_SEARCH\n","import { useMutation } from \"@apollo/client\"\nimport { DELETE_SEARCH_ROUND } from \"../../../graphql/mutations/searchRounds\"\nimport GET_PROJECT_SEARCH from \"../../../graphql/queries/GetProjectSearch\"\n\nconst DeleteSearchRound = ({ selectedRound, slug }) => {\n const { id, name } = selectedRound[0]\n const [deleteSearchRound] = useMutation(DELETE_SEARCH_ROUND, {\n refetchQueries: [\n {\n query: GET_PROJECT_SEARCH,\n variables: { slug },\n },\n ],\n })\n\n const postDelete = () => {\n const confirmation = confirm(\"Are you sure you want to delete this Search Round?\")\n\n if (confirmation) {\n deleteSearchRound({ variables: { id } }).catch((error) => Sentry.captureException(error))\n }\n }\n\n return (\n \n )\n}\n\nDeleteSearchRound.defaultProps = {\n searchRound: [],\n}\n\nexport default DeleteSearchRound\n","import React from \"react\"\nimport CloseIcon from \"../../../icons/CloseIcon\"\nimport DownloadIcon from \"../../../icons/DownloadIcon\"\n\nconst DownloadRoundNotice = ({ downloadState, handleCloseNotice }) => {\n const { downloadMessage, downloadNotice, downloadProcessing, url } = downloadState\n const message = downloadMessage || \"Your download is ready!\"\n\n if (downloadNotice) {\n if (downloadProcessing) {\n return (\n \n
\n )\n } else {\n return (\n \n )\n }\n } else {\n return null\n }\n}\n\nexport default DownloadRoundNotice\n","import React, { useEffect, useState } from \"react\"\nimport axios from \"axios\"\nimport cx from \"classnames\"\nimport DownloadIcon from \"../../../icons/DownloadIcon\"\nimport Modal from \"../../../shared/components/Modal\"\nimport modalStyles from \"../../../shared/styles/modal.module.scss\"\nimport { validateEmail } from \"../../../shared/utils/helpers\"\n\nconst DownloadRound = ({ disableDownload, selectedRound, dispatch }) => {\n let loop\n let timeoutId\n let previousPending = false\n const [isDropDownOpen, setIsDropdownOpen] = useState(false)\n const [isEmailModal, setIsEmailModal] = useState(false)\n //const [formEmail, setFormEmail] = useState(\"\")\n //const [readableStream, setReadableStream] = useState(null)\n //const [abortController, setAbortController] = useState(null)\n //const abortSignal = useRef()\n\n // Save for when we want to handle wav zip process through streaming\n const stopDownloadStream = () => {\n try {\n if (abortController && readableStream) {\n dispatch({ type: \"ZIP_CANCELLED\" })\n readableStream.cancel()\n abortController.abort(\"User Cancelled Download Stream\")\n }\n } catch (err) {\n if (err.name === \"AbortError\") {\n console.log(\"AbortError: Fetch request aborted\")\n return\n }\n console.log(\"Stream cancelled poorly: \", err)\n }\n }\n\n const checkDownloadResponse = ({ success, url, failure = false }) => {\n if (!success && !failure) {\n dispatch({ type: \"ZIP_PROCESSING\" })\n return\n }\n\n clearInterval(loop)\n clearTimeout(timeoutId)\n\n if (success) {\n dispatch({ type: \"ZIP_COMPLETE\", url })\n } else if (failure) {\n dispatch({\n type: \"ZIP_FAILED\",\n message: \"Your download failed to be generated. Please try again later.\",\n })\n }\n }\n\n const handleHighRes = () => {\n setIsEmailModal(true)\n }\n\n const handleEmailSubmit = (e) => {\n e.preventDefault()\n const form = new FormData(e.target)\n if (validateEmail(form.get(\"email\"))) {\n beginDownload(true, form.get(\"email\"))\n setIsEmailModal(false)\n }\n return false\n }\n\n const handleCloseModal = (e) => {\n e.preventDefault()\n setIsEmailModal(false)\n }\n\n const beginDownload = (is_high_res = false, email = \"\") => {\n dispatch({ type: \"BEGIN_ZIP\" })\n setIsDropdownOpen(false)\n timeoutId = setTimeout(() => {\n clearInterval(loop)\n dispatch({ type: \"ZIP_FAILED\" })\n }, 300000) // kill the poll after 5 mins\n loop = setInterval(() => poll(is_high_res, email), 2000)\n }\n\n const poll = (is_high_res, email = \"\") => {\n if (previousPending) return\n\n const url = is_high_res\n ? `/api/v1/search_rounds/${selectedRound[0].id}/download_wav`\n : `/api/v1/search_rounds/${selectedRound[0].id}/download`\n\n const options = is_high_res ? { body: { email: email } } : {}\n previousPending = true\n axios\n .post(url, options)\n .then((response) => {\n dispatch({ type: \"SHOW_NOTICE\" })\n checkDownloadResponse(response.data)\n previousPending = false\n })\n .catch((error) => {\n Sentry.captureException(error)\n dispatch({ type: \"ZIP_FAILED\" })\n clearInterval(loop)\n })\n }\n\n // Save for when we want to handle wav zip process through streaming\n const downloadWav = async () => {\n if (window.safari) {\n alert(\"This feature is not supported by Safari\")\n return\n }\n dispatch({ type: \"BEGIN_ZIP\" })\n let newController = new AbortController()\n setAbortController(newController)\n abortSignal.current = newController.signal\n\n // Open user's system file select dialogue box and set StreamBuffer destination\n const file_dest = await window\n .showSaveFilePicker({\n suggestedName: `${selectedRound[0].name}.zip`,\n types: [\n {\n description: \"Zip File\",\n accept: {\n \"application/zip\": [\".zip\"],\n },\n },\n ],\n })\n .then((handle) => handle.createWritable())\n .catch((err) => {\n dispatch({ type: \"ZIP_CANCELLED\" })\n console.log(err)\n })\n\n if (!file_dest) {\n dispatch({ type: \"ZIP_CANCELLED\" })\n return\n }\n\n dispatch({ type: \"ZIP_PROCESSING\" })\n dispatch({ type: \"SHOW_NOTICE\" })\n setIsDropdownOpen(false)\n\n let throt_func = _.throttle(\n function (charsReceived) {\n dispatch({\n type: \"ZIP_PROCESSING\",\n message: `Download in progress: ${(charsReceived / (1024 * 1024 * 1024)).toFixed(2)}/GBs`,\n })\n },\n 500,\n { trailing: false }\n )\n\n try {\n const file_src = fetch(`/api/v1/search_rounds/${selectedRound[0].id}/download_zip`, {\n signal: abortSignal.current,\n })\n .then((response) => response.body)\n .catch((err) => {\n dispatch({ type: \"ZIP_CANCELLED\" })\n\n console.log(\"Fetch Catch err: \", err)\n })\n\n file_src.then(async (s) => {\n let charsReceived = 0\n const reader = s.getReader()\n setReadableStream(reader)\n reader.read().then(function processStream({ done, value }) {\n // Result objects contain two properties:\n // done - true if the stream has already given you all its data.\n // value - some data. Always undefined when done is true.\n if (done) {\n //throt_func.cancel\n if (abortSignal.current.aborted) {\n dispatch({ type: \"ZIP_CANCELLED\" })\n } else {\n dispatch({ type: \"ZIP_COMPLETE\" })\n // Write to disc if successful\n file_dest.close()\n }\n\n return\n }\n\n // Track and display progress\n charsReceived += value.length\n throt_func(charsReceived)\n\n // Write data to file.\n //const chunk = value\n file_dest.write(value)\n\n // Continue Reading\n return reader.read().then(processStream)\n })\n })\n } catch (err) {\n if (err.name === \"AbortError\") {\n console.log(\"Download aborted.\")\n } else {\n console.log(\"Error while processing stream:\", err)\n }\n dispatch({ type: \"ZIP_CANCELLED\" })\n }\n }\n\n const handleOnClick = (e) => {\n if (\n // if not clicked in song download options menu\n !e.target.closest([\"div.download-options-menu\", \".download\"])\n ) {\n setIsDropdownOpen(false)\n }\n }\n\n useEffect(() => {\n //document.body.addEventListener(\"click\", handleOnClick)\n\n return () => {\n //document.body.removeEventListener(\"click\", handleOnClick)\n }\n }, [])\n\n return (\n <>\n \n {downloadMessage || \"Your download is processing.\"}\n \n
\n\n \n beginDownload(false)}>\n Low Res (MP3)\n \n \n handleHighRes()}>\n High Res (WAV/AIF)\n \n
\n {isEmailModal && (\n \n
\n \n \n \n \n \n \n \n
\n \n
\n \n
\n Please provide your Email below
\nLarge file zip generation takes a while
\n\n If you'd like to leave the page before the file is ready, we will send the\n download link to the provided email!\n
\n\n
\n \n DISCLAMER: Search rounds with more than 70 songs will result in a large zip file\n container with a higher likelihood of timing out. We are actively working on\n improving the performance of this feature and look forward to removing this\n disclaimer.\n
\n\n \n \n
\n )\n } else {\n return (\n \n \n
\n )\n }\n}\n\nexport default WonLostActions\n","import { useMutation } from \"@apollo/client\"\nimport cx from \"classnames\"\nimport { CREATE_SEARCH_ROUND } from \"../../../graphql/mutations/searchRounds\"\nimport GET_PROJECT_SEARCH from \"../../../graphql/queries/GetProjectSearch\"\n\nconst AddNewSearchRound = ({ projectSearchId, slug }) => {\n const [createSearchRound, { loading: mutationLoading }] = useMutation(CREATE_SEARCH_ROUND, {\n refetchQueries: [\n {\n query: GET_PROJECT_SEARCH,\n variables: { slug },\n },\n ],\n })\n\n const postNewRound = () => {\n createSearchRound({ variables: { id: projectSearchId } }).catch((error) =>\n Sentry.captureException(error)\n )\n }\n\n return (\n \n setOpenMenu(!openMenu)}\n className={cx(\"dropdown-btn\", { \"dropdown-active\": openMenu })}\n >\n {icon}\n \n\n {openMenu && (\n
\n )\n}\n\nexport default DropdownMenu\n","const playerData = (selectedRound) => {\n let songVersions = []\n if (selectedRound.length > 1) {\n selectedRound.map((round) => {\n round.searchRoundSongVersions.map((srsv) => songVersions.push(srsv.songVersion))\n })\n } else if (selectedRound[0].songVersionsPresent) {\n songVersions = selectedRound[0].searchRoundSongVersions.map((srsv) => srsv.songVersion)\n }\n\n return songVersions\n}\n\nexport default playerData\n","// extracted by mini-css-extract-plugin\nexport default {\"playAll\":\"PlayAll-module_playAll__pnlXs\",\"disabled\":\"PlayAll-module_disabled__oiKVw\"};","import { useState, useEffect } from \"react\"\nimport cx from \"classnames\"\nimport PlayLargeIcon from \"../../../icons/PlayLargeIcon\"\nimport playerData from \"../utils/playerData\"\nimport styles from \"../styles/PlayAll.module.scss\"\n\nconst PlayAll = ({ selectedRound }) => {\n const [songVersions, setSongVersions] = useState([])\n\n useEffect(() => {\n setSongVersions(playerData(selectedRound))\n }, [selectedRound])\n\n const handlePlayAll = () => {\n mm.playerProxy.trigger(\"play\", {\n songVersions,\n type: \"mixtape\",\n })\n }\n\n return (\n \n
\n )}\n - {children}
\n
\n \n )\n}\n\nexport default ProjectSearchActions\n","import { useContext } from \"react\"\nimport { ProjectSearchContext } from \"./ProjectSearch\"\nimport FlashlightIcon from \"../../../icons/FlashlightIcon\"\n\nconst ProjectSearchHeader = ({ children }) => {\n const { createdAt, pointPerson, updatedAt, songCount } = useContext(ProjectSearchContext)\n\n return (\n \n {searchRounds.length > 1 && !state.downloadNotice ? (\n children\n ) : (\n 1,\n })}\n >\n
\n - \n {internalUser && showWonLost &&
\n
\n \n
\n \n
\n \n
\n {children}\n \n
\n - \n
- \n Created by \n {pointPerson}\n on \n \n \n
- \n Last updated \n \n \n
- \n {songCount}\n {songCount == 1 ? \"Song\" : \"Songs\"} \n \n
\n {searchRounds.map((round, index) => {\n return setSelectedRoundId(\"all\")}\n >\n ALL\n \n
\n )\n}\n\nconst RoundSelectorButton = ({ round, index }) => {\n const { selectedRound, setSelectedRoundId } = useContext(ProjectSearchContext)\n return (\n \n {range(5).map((num) => {\n const starNum = num + 1\n\n return (\n toggleSiblingStars(e, \"add\")}\n onMouseOut={(e) => toggleSiblingStars(e, \"remove\")}\n >\n ★\n \n )\n })}\n
\n \n \n \n\n \n \n \n \n \n {isLoadingSimilar ? (\n \n ) : (\n \n \n \n ▸\n \n \n \n \n \n\n {internalUser &&\n (status === \"won\" ? (\n
\n )\n } else {\n return null\n }\n}\n\nconst RemoveAction = ({ handleRemove }) => {\n return (\n \n \n {`High Res (WAV/AIF)`}\n \n \n MP3\n \n {searchRoundSongVersion.songVersion?.hasStems && (\n \n Stems\n \n )}\n
\n - \n
- {splitData[0]} \n
- {splitData[1]} \n
\n
\n )\n}\n\nexport default LicensingHistory\n","import { gql, useQuery } from \"@apollo/client\"\n\nconst GET_PAST_LICENSING_INFO = gql`\n query searchRoundSongVersion($id: ID) {\n searchRoundSongVersion(id: $id) {\n hasPastLicenses\n }\n }\n`\n\nconst LicenseButton = ({ srsvId, toggleModal }) => {\n const variables = { id: srsvId }\n const { loading, error, data } = useQuery(GET_PAST_LICENSING_INFO, { variables })\n\n if (loading) return null\n if (error) console.log(error)\n\n const { searchRoundSongVersion } = data\n\n return (\n <>\n {searchRoundSongVersion.hasPastLicenses && (\n \n L\n \n )}\n \n )\n}\n\nexport default LicenseButton\n","import { useState, useEffect, useContext } from \"react\"\nimport Rating from \"./Rating\"\nimport SearchRoundSongVersionActions from \"./SearchRoundSongVersionActions\"\nimport Modal from \"../../../shared/components/Modal\"\nimport { escapeToClose } from \"../../../shared/utils/helpers\"\nimport PlayLargeIcon from \"../../../icons/PlayLargeIcon\"\nimport { ProjectSearchContext } from \"./ProjectSearch\"\nimport playerData from \"../utils/playerData\"\nimport LicensingHistory from \"./LicensingHistory\"\nimport LicenseButton from \"./LicenseButton\"\n\nconst SearchRoundSongVersionItem = ({ position, searchRoundId, searchRoundSongVersion }) => {\n const [songVersions, setSongVersions] = useState([])\n const [openModal, setOpenModal] = useState(false)\n const { internalUser, selectedRound } = useContext(ProjectSearchContext)\n const {\n id,\n artistName,\n artistSlug,\n catalogColor,\n customizable,\n length,\n notes,\n playerArt,\n rating,\n songVersionId,\n title,\n users,\n winner,\n isPreRelease,\n songVersion,\n } = searchRoundSongVersion\n const playerStyle = {\n backgroundImage: `url(${playerArt})`,\n backgroundSize: \"contain\",\n backgroundPosition: \"center\",\n }\n\n useEffect(() => {\n setSongVersions(playerData(selectedRound))\n }, [selectedRound])\n\n // this controls modal pop-up\n useEffect(() => {\n return escapeToClose(setOpenModal)\n })\n\n const toggleModal = (e) => {\n e.stopPropagation()\n setOpenModal(!openModal)\n }\n\n const handlePlay = () => {\n // If the element is already playing, pause it. This fixes an issue with mobile not having a way to stop play.\n var audioElement = $(`audio[src^=\"/song_versions/play/${songVersionId}\"]`)\n if (audioElement.length > 0) {\n if (!audioElement[0].paused) {\n audioElement[0].pause()\n return\n }\n }\n mm.playerProxy.trigger(\"play\", {\n pointer: songVersion,\n songVersions,\n type: \"mixtape\",\n })\n }\n\n return (\n \n \n
\n \n \n View Licensing Info in Portal\n \n
\n\n
\n {fullLicensingHistory}\n End Client
\nProcessed At
\n- \n {!mm.isMobile &&
- {searchRoundSongVersion.position + 1} }\n
- \n \n \n
\n \n \n \n - \n \n\n
\n {isPreRelease ? (\n {title}\n ) : (\n
\n {internalUser &&}\n \n {!mm.isMobile && - {customizable} }\n
- {length} }\n {internalUser && !mm.isMobile && (\n
- \n {users}\n \n )}\n
\n {showForm ? (\n \n {({ isSubmitting, values }) => (\n \n )}\n \n ) : (\n \n )}\n {mutationError && mutationError.graphQLErrors[0].message !== \"\" && (\n
\n )\n}\n\nexport default AddDirection\n","import React from \"react\"\n\nconst MissingContentMessage = ({ message }) => {\n return (\n {mutationError.graphQLErrors[0].message}
\n )}\n \n
\n )\n}\n\nexport default MissingContentMessage\n","import { useContext } from \"react\"\nimport { Formik, Form } from \"formik\"\nimport { useMutation } from \"@apollo/client\"\nimport cx from \"classnames\"\nimport TextField from \"../../../shared/components/TextField\"\nimport { ProjectSearchContext } from \"./ProjectSearch\"\nimport { DELETE_DIRECTION, UPDATE_DIRECTION_NAME } from \"../../../graphql/mutations/directions\"\nimport GET_PROJECT_SEARCH from \"../../../graphql/queries/GetProjectSearch\"\n\nconst EditDirection = ({ direction }) => {\n const inputName = `directionName${direction.id}`\n const { internalUser, slug } = useContext(ProjectSearchContext)\n const [updateDirectionName] = useMutation(UPDATE_DIRECTION_NAME)\n const [deleteDirection] = useMutation(DELETE_DIRECTION, {\n refetchQueries: [\n {\n query: GET_PROJECT_SEARCH,\n variables: { slug },\n },\n ],\n })\n\n const handleSubmit = (params, formActions) => {\n const variables = {\n id: direction.id,\n name: params[inputName],\n searchRoundId: direction.searchRoundId,\n }\n\n updateDirectionName({ variables })\n .then(() => formActions.setSubmitting(false))\n .catch((error) => {\n Sentry.captureException(error)\n formActions.setSubmitting(false)\n formActions.setStatus({\n err: true,\n msg: error.graphQLErrors[0].message,\n })\n })\n }\n\n const handleDelete = (setStatus, setSubmitting) => {\n setSubmitting(true)\n const variables = {\n id: direction.id,\n }\n\n deleteDirection({ variables })\n .then(() => setSubmitting(false))\n .catch((error) => {\n Sentry.captureException(error)\n setSubmitting(false)\n setStatus({\n err: true,\n msg: \"The round does not contain this direction.\",\n })\n })\n }\n\n const initialValues = {\n [inputName]: direction.name,\n }\n\n return internalUser ? (\n {message}
\n\n \n {({ isSubmitting, resetForm, setStatus, setSubmitting, status, values }) => (\n \n )}\n \n
\n ) : (\n {direction.name}
\n )\n}\n\nexport default EditDirection\n","import { useContext } from \"react\"\nimport EditDirection from \"./EditDirection\"\nimport { ProjectSearchContext } from \"./ProjectSearch\"\n\nconst SearchRoundHeader = ({ children, roundDivider, searchRound, direction }) => {\n const { selectedRound, internalUser, status } = useContext(ProjectSearchContext)\n const removeOrWinner = status === \"won\" ? \"winner\" : \"remove\"\n const highResOrMp3 = searchRound.showHighResDownload ? \"High-Res Download\" : \"MP3 Download\"\n\n return (\n \n {roundDivider &&
\n \n )\n}\n\nexport default SearchRoundHeader\n","import { useState, useContext, Fragment } from \"react\"\nimport { useMutation } from \"@apollo/client\"\nimport { DragDropContext, Droppable } from \"react-beautiful-dnd\"\nimport { DraggableItems, getListStyle, move, reorder } from \"../utils/reactDnd\"\nimport AddDirection from \"./AddDirection\"\nimport MissingContentMessage from \"./MissingContentMessage\"\nimport SearchRoundHeader from \"./SearchRoundHeader\"\nimport SearchRoundSongVersionItem from \"./SearchRoundSongVersionItem\"\nimport { ProjectSearchContext } from \"./ProjectSearch\"\nimport { SORT_SEARCH_ROUND_SONG_VERSION } from \"../../../graphql/mutations/searchRoundSongVersions\"\n\nconst SelectedSearchRound = () => {\n const { internalUser, selectedRound, calculateUpdatedSearchRound } =\n useContext(ProjectSearchContext)\n const { directions, id, searchRoundSongVersions, songVersionsPresent } = selectedRound[0]\n const [disableSort, setDisableSort] = useState(!internalUser)\n const [sortSearchRoundSongVersion] = useMutation(SORT_SEARCH_ROUND_SONG_VERSION)\n\n const getList = (id) => {\n return id === \"songVersions\"\n ? searchRoundSongVersions\n : directions.filter((dir) => dir.id === id)[0].searchRoundSongVersions\n }\n\n const onDragEnd = ({ source, destination, draggableId }) => {\n let directionId\n let updatedSort\n\n if (!destination) return // dropped outside the list\n\n if (source.droppableId === destination.droppableId) {\n const items = reorder(getList(source.droppableId), source.index, destination.index)\n updatedSort = { [source.droppableId]: items }\n } else {\n updatedSort = move(\n getList(source.droppableId),\n getList(destination.droppableId),\n source,\n destination\n )\n directionId = destination.droppableId\n }\n\n const updatedSearchRound = calculateUpdatedSearchRound(updatedSort)\n postSortOrder(destination.index, draggableId, directionId, updatedSearchRound)\n }\n\n const postSortOrder = (position, srsvId, directionId = null, updatedSearchRound) => {\n setDisableSort(true)\n sortSearchRoundSongVersion({\n variables: {\n id: srsvId,\n position: position,\n directionId: directionId,\n },\n optimisticResponse: {\n sortSearchRoundSongVersion: {\n searchRound: updatedSearchRound,\n },\n },\n })\n .then(() => setDisableSort(false))\n .catch((error) => {\n console.error(error)\n })\n }\n\n if (selectedRound.length > 1) {\n return {searchRound.name}
}\n {direction && - \n
- \n
- \n {!mm.isMobile && }\n \n
- Song/Artist \n {!mm.isMobile &&
- Customizable }\n
- Rating \n {!mm.isMobile &&
- Length }\n {internalUser && !mm.isMobile &&
- Chosen by }\n {!mm.isMobile && (\n
- \n Download\n \n {internalUser && selectedRound.length === 1 && (\n
- Get Similar \n )}\n
- Notes \n\n {internalUser &&
- {removeOrWinner} }\n
\n\n )}\n \n
{children}
\n \n
\n ) : (\n >> Drag Song Here <<
\n Loading ...
\nLooks like there was an error :(
\n {error.graphQLErrors.map(({ message }, i) => (\n\n {message}\n
\n ))}\n\n
\n ) : !songs[0] ? ( //Done loading but there are no songs\n \n ) : (\n //Done loading, also there are songs\n You May Also Like
\n\n \n \n
\n )\n}\n\nexport default SongsContainer\n","export default function Header() {\n return (\n You May Also Like
\n\n
\n - \n
- \n
- \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n {songs.map((song) => (\n
\n
\n Style Guide
\n{name}
\n{children}
\n {children}
\n}\n","export default function Buttons({ wrapperClass, buttons }) {\n return (\n \n {buttons.map((button, index) => {\n return (\n
\n )\n}\n","export default function Description({ description }) {\n return \n {button}\n
\n )\n })}\n {description}
\n}\n","export default function Fonts({ fonts }) {\n return (\n \n {fonts.map(({ style, text, proxima }, index) => {\n return (\n
\n )\n}\n","export default function Logo({ downloadLink, spanClass }) {\n return (\n \n {text}\n
\n )\n })}\n\n \n
\n )\n}\n","import React, { Component } from \"react\"\n\nexport default class Swatches extends Component {\n constructor(props) {\n super(props)\n this.state = { tabText: \"Copy\" }\n this.textAreaRef = React.createRef()\n }\n\n copyHexToClipboard(hex) {\n let placeholder = this.textAreaRef.current\n placeholder.value = hex\n placeholder.select()\n document.execCommand(\"Copy\")\n placeholder.value = \"\"\n this.setState({ tabText: \"Copied!\" })\n }\n\n render() {\n return (\n \n \n Download .png\n \n
\n \n {this.props.swatches.map(({ name, hex }) => {\n return (\n this.setState({ tabText: \"Copy\" })}\n >\n
\n )\n })}\n \n \n )\n }\n}\n","export const colorsDescription = \n {hex}\n
\n this.copyHexToClipboard(hex)}>\n {this.state.tabText}\n
\n {name}
\nThese are Marmoset's gray and primary color palettes.
\n\nexport const typefaceDescription = (\n\n We use Elena Basic as the default font for our content, headers, and form\n inputs. Proxima Nova is used for our buttons and input labels.\n
\n)\n\nexport const ctaButtonDescription = (\n\n
\n)\n\nexport const primaryButtonDescription = (\n Call to Action Button
\n\n
\n font-size: 13.2px
\nfont-weight: 600
\nletter-spacing: 1.85px
\nheight: 40px
\nline-height: 40px
\nborder: 2px solid
\npadding: 0 38px
\nPassive bg/color: transparent/#fff
\nHover bg/color: #fff/#8a4fab
\nActive bg/color: #8a4fab/#fff
\n\n
\n)\n\nexport const actionButtonDescription = (\n Primary Button
\n\n
\n font-size: 15px
\nfont-weight: 600
\nletter-spacing: 1.85px
\nheight: 60px
\nline-height: 60px
\nPassive bg/color: #3a3532/#fff
\nHover bg/color: #262220/#fff
\nActive bg/color: #8a4fab/#fff
\nDisabled bg/color: #bab7b5/#fff
\n\n
\n)\n\nexport const inputsDescription = (\n Action Button
\n\n
\n font-size: 14.4px
\nfont-weight: 600
\nheight: 47px
\nwidth: 62px
\nmargin: 0 1px
\nPassive bg/color: #fff/#3a3532
\nHover bg/color: #3a3532/#fff
\nActive bg/color: #8a4fab/#3a3532
\nDisabled opacity: 0.5
\n\n
\n)\n\nexport const buttons = [\"passive\", \"hover\", \"active\"]\n\nexport const buttonsWithDisabled = [\"passive\", \"hover\", \"active\", \"disabled\"]\n\nexport const fonts = [\n {\n style: { fontWeight: 400, fontSize: \"46px\", lineHeight: \"46px\" },\n text: \"Section Title 400/46/46\",\n },\n {\n style: { fontWeight: 400, fontSize: \"36px\", lineHeight: \"36px\" },\n text: \"Article Title 400/36/36\",\n },\n {\n style: { fontWeight: 400, fontSize: \"24px\", lineHeight: \"24px\" },\n text: \"Body Title 400/24/24\",\n },\n {\n style: { fontWeight: 400, fontSize: \"18px\", lineHeight: \"21px\" },\n text: \"Body Text 400/18/21\",\n },\n {\n style: { fontWeight: 600, fontSize: \"13px\", lineHeight: \"40px\", letterSpacing: \"1.65px\" },\n text: \"BUTTON 600/13/40/1.65\",\n proxima: true,\n },\n]\n\nexport const logos = {\n primaryWhite: {\n spanClass: \"primary-white\",\n downloadLink:\n \"https://s3-us-west-2.amazonaws.com/marmosetmusic-com/assets/RGB-marmoset-logo-white.png\",\n },\n primaryPurple: {\n spanClass: \"primary-purple\",\n downloadLink:\n \"https://s3-us-west-2.amazonaws.com/marmosetmusic-com/assets/RGB-marmoset-logo-purple.png\",\n },\n sealWhite: {\n spanClass: \"seal-white\",\n downloadLink:\n \"https://s3-us-west-2.amazonaws.com/marmosetmusic-com/assets/RGB-marmoset-seal-white-2017.png\",\n },\n sealPurple: {\n spanClass: \"seal-purple\",\n downloadLink:\n \"https://s3-us-west-2.amazonaws.com/marmosetmusic-com/assets/RGB-marmoset-seal-purple-2017.png\",\n },\n}\n\nexport const swatches = [\n { name: \"coal\", hex: \"#3a3532\" },\n { name: \"charcoal\", hex: \"#999999\" },\n { name: \"ash\", hex: \"#efefed\" },\n { name: \"purple\", hex: \"#8a4fab\" },\n { name: \"green\", hex: \"#37b480\" },\n]\n","import Header from \"./components/Header\"\nimport Section from \"./components/Section\"\nimport ContentBox from \"./components/ContentBox\"\nimport Buttons from \"./components/Buttons\"\nimport Description from \"./components/Description\"\nimport Fonts from \"./components/Fonts\"\nimport Logo from \"./components/Logo\"\nimport Swatches from \"./components/Swatches\"\nimport {\n logos,\n fonts,\n swatches,\n buttons,\n buttonsWithDisabled,\n colorsDescription,\n typefaceDescription,\n ctaButtonDescription,\n primaryButtonDescription,\n actionButtonDescription,\n inputsDescription,\n} from \"./data/styleGuideProps\"\n\nexport default function StyleGuideContainer() {\n const { primaryWhite, primaryPurple, sealWhite, sealPurple } = logos\n\n return (\n Label
\n\n
\n font-size: 12px
\nfont-weight: 400
\ncolor: #333
\nline-height: 20px
\npadding-top: 12px
\nInput
\n\n
\n font-size: 16px
\nfont-weight: 400
\nheight: 42px
\nwidth: 326px
\nborder: 2px solid #999
\npadding: 0 10px
\n\n \n \n \n \n \n \n\n \n \n \n \n\n \n \n \n \n\n \n \n \n\n \n \n\n \n \n \n\n \n \n \n \n
\n Primary
\n\nSeal
\n\n
\n \n
\n Label
\n Text Input
\n \n
\n Label
\n \n
\n Select Input
\n \n \n
\n \n {status && status.message && (\n
\n\n \n
\n )}\n \n
\n {status.message}
\n\n
\n )}\n />\n \n \n {yesNoTFOptions.map((option, ind) => (\n \n handleRadio(e, option.value, arrayHelpers)}\n checked={values.self_record.includes(option.value)}\n />\n \n {option.label}\n \n
\n ))}\n \n \n {fullPartTimeOptions.map((option, ind) => (\n \n handleRadio(e, option.value, arrayHelpers)}\n checked={values.availability.includes(option.value)}\n />\n \n {option.label}\n \n
\n ))}\n \n \n
\n \n \n \n
\n \n \n
\n Music Submission Form
\n\n
\n {formOn ? (\n \n
\n \n \n Marmoset is always on the lookout for awesome new music: from hip-hop to orchestral,\n traditional folk to hard-hitting EDM, psychedelic cumbia to nostalgic R&B — and\n everything in-between. If you have a collection of music, and/or a video reel you’d\n like to share with us, please fill out the form below. If we seem like a good fit,\n we’ll be in touch!\n \n
\n\n
\n )}\n \n \n Thanks so much for your interest in submitting your music. Marmoset is currently\n taking some time to catch up and listen to the unprecedented number of submissions in\n our system. We will open the form up again once we have managed to get through this\n backlog. We appreciate your patience and thank you for understanding.\n \n
\n\n \n \n
\n )\n})\n\n// This container is the result of refactoring multiple times over the course of the\n// ticket and then ending up with this redundant container component. Refactor later\nconst ArtistDiscogContainer = () => {\n return \n
\n - \n
- \n
- \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n {songs.map((song) => (\n
\n
\n Staff Picks
\n\n
\n Staff Picks
\n\n \n \n
\n \n
\n - \n
- \n
- \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n {staffSongs.map((song) => (\n
\n \n {isLoading ? \"Loading...\" : \"View More\"}\n \n \n )}\n
\n Full Songography
\n {isLoading && initialLoad.current ? (\n\n
\n ) : !songs[0] ? (\n <>\n ) : (\n <>\n \n \n \n
\n )\n}\n\nexport default SongVersionsContainer\n","import { gql } from \"@apollo/client\"\n\nconst GET_USER_ORDERS = gql`\n {\n account {\n orders {\n id\n allowClientToSelectTbd\n endClient\n projectName\n lineItems {\n id\n songVersionTitle\n songVersionId\n artistName\n clientNotes\n }\n }\n }\n }\n`\n\nexport default GET_USER_ORDERS\n","import cx from \"classnames\"\n\nconst SongActionsTooltip = ({\n tooltipType,\n vintage,\n exclusive,\n action,\n cy,\n exclusivityMessage,\n show,\n additionalClass,\n}) => {\n return (\n \n
\n - \n
- \n
- \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n {songVersions.map((song) => (\n
\n \n \n \n Low Res (MP3)\n \n \n\n \n \n Hi Res (WAV/AIFF)\n \n \n\n \n \n Download Stems\n \n
\n )}\n \n \n )\n}\n\nexport default SongVersionPageActions\n","import { useContext, useEffect, useState } from \"react\"\nimport { SongPageContext } from \"./SongVersionPageContainer\"\nimport { getSongVersionColor } from \"../../shared/utils/browse\"\nimport { fetchDataForMessagePopUp } from \"../../shared/utils/backbone/messageQueueService\"\n\nconst SongVersionDetails = () => {\n const { sv, user_role, isInternal } = useContext(SongPageContext)\n\n const instantiateWaveform = () => {\n var wavesurfer = window.WaveSurfer.create({\n backend: \"MediaElement\",\n barGap: 1.5,\n barWidth: 1.5,\n container: \".song-version-waveform\",\n cursorColor: \"transparent\",\n cursorWidth: 0,\n fillParent: true,\n height: 50,\n pixelRatio: 2,\n progressColor: \"transparent\",\n waveColor: \"#ccc\",\n interact: false,\n })\n wavesurfer.load(sv.song_version_file)\n }\n\n const handleProButtonClick = (e) => {\n fetchDataForMessagePopUp(`/song_versions/pro_information/${sv.id}`)\n //Emit a custom Google Analytics event to track use of PRO info button\n window.ga(\"send\", \"event\", \"Button Clicks\", \"PRO Button Click\", \"PRO Info Button\")\n }\n\n useEffect(() => {\n if (sv.song_version_file) {\n instantiateWaveform()\n }\n }, [sv])\n\n if (sv) {\n return (\n - \n
\n
\n\n {actionHoverText}
\n \n License\n \n \n \n ) : (\n
\n License\n \n \n \n )}\n
- \n {sv.lyrics && (\n
\n
\n\n Instruments
\n\n {sv.instruments &&\n sv.instruments.map((i) => {`${i}`})}\n
\n\nMood
\n\n {sv.keyword_list &&\n sv.keyword_list.map((k) => {`${k}`})}\n
\n\nWaveform
\n \n\n \n Cue Sheet Info\n
\n )}\n \n - \n
- Energy \n
- \n {sv.energy}\n \n
- Arc™ \n
- \n {sv.arc} \n \n
- Length \n
- {sv.pretty_duration} \n
- Vocals \n
- \n
- Genres \n
- \n {sv.joined_genre_list &&\n sv.joined_genre_list\n .split(\", \")\n .map((g) => {`${g}`})}\n \n
- Customizable \n
- \n \n {sv.customizable ? \"Yes\" : \"No\"}\n \n \n
- Release Year \n
- {sv.release_year} \n
- Collection \n
- {sv.artist.catalog.name} \n
- Exclusivities \n
- Yes \n
- \n View in Portal\n \n
\n
\n \n
\n \n
\n\n \n
\n\n \n
\n {isInternal && (\n \n
\n )}\n {sv.release_year && (\n \n
\n )}\n {sv.artist?.catalog?.id && (\n \n
\n )}\n {isInternal && (\n <>\n {sv.song?.exclusive && (\n \n
\n )}\n \n \n
\n \n )}\n \n
\n Alternative Versions of this Song
\n\n {purchaser ? (\n
\n \n {user_role === \"guest\" ? (\n
\n ) : (\n <>\n Thank you!
\n ) : (\nThank you {user_name}!
\n )}\n{purchase_date}
\n\n Your Order Number is #{order_id}\n
\n \nThank you!
\n\n Sign in to download the PDF receipt.\n
\n \n )}\n\n\n {user_role === \"guest\" ? (\n <>\n triggerNewsletterSignup()}\n className=\"box-button-black newsletter\"\n >\n Add me to the Newsletter\n \n \n Sign up for MarmoNews to keep up on fresh music, new artists, events and promo\n codes.\n \n \n )}\n
\n \n \n {!isWaitLong ? message : \"Tiny AI Robots at work…\"}\n \n
\n )\n}\n\nexport default LongRunningProcess\n","import { useEffect, useState, useRef, useContext } from \"react\"\nimport PlayLargeIcon from \"../../icons/PlayLargeIcon\"\nimport DownloadIcon from \"../../icons/DownloadIcon\"\nimport ShareIcon from \"../../icons/ShareIcon\"\nimport TrashIcon from \"../../icons/TrashIcon\"\nimport HideIcon from \"../../icons/HideIcon\"\nimport ShowIcon from \"../../icons/ShowIcon\"\nimport JoinIcon from \"../../icons/JoinIcon\"\nimport { shareSongMixtape, triggerLogin } from \"../../shared/utils/backbone/drawerProxyService\"\nimport { MixtapePageContext } from \"./MixtapePageContainer\"\nimport cx from \"classnames\"\nimport { playMixtape } from \"../../shared/utils/backbone/playerProxyService\"\nimport LeaveIcon from \"../../icons/LeaveIcon\"\nimport CollaborateOnIcon from \"../../icons/CollaborateOnIcon\"\nimport CollaborateOffIcon from \"../../icons/CollaborateOffIcon\"\nimport LongRunningProcess from \"../../shared/utils/LongRunningProcess\"\nimport Modal from \"../../shared/components/Modal\"\nimport modalStyles from \"../../shared/styles/modal.module.scss\"\n\nconst MixtapeActions = () => {\n const { user_role, is_owner, mixtapeSerializer, mixtapeDetails, setMixtapeDetails } =\n useContext(MixtapePageContext)\n const [actionHoverText, setActionHoverText] = useState(\"\")\n const [isDownloading, setIsDownloading] = useState(false)\n const [downloadUrl, setDownloadUrl] = useState(\"\")\n const downloadButtonRef = useRef(null)\n\n const handleHover = (hoverText) => {\n setActionHoverText(hoverText)\n }\n\n const handleDownloadAll = () => {\n if (isDownloading) return\n setIsDownloading(true)\n }\n\n const handleDeleteMixtape = async () => {\n var confirmation = window.confirm(\"Are you sure? This mixtape will be deleted forever.\")\n if (!confirmation) return\n const response = await fetch(`/mixtapes/${mixtapeSerializer.id}`, {\n method: \"DELETE\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": mm.csrf,\n },\n })\n if (!response.ok) {\n return\n }\n // Replacing window location stop the user from navigating back to the mixtape they deleted.\n window.location.replace(\"/browse\")\n }\n\n const handlePlayAll = () => {\n playMixtape(mixtapeSerializer.song_versions, mixtapeSerializer.id)\n }\n\n const toggleLockUnlock = async () => {\n var newState = !mixtapeDetails.is_secret\n //optimistically set privacy to new state\n setMixtapeDetails({ ...mixtapeDetails, is_secret: newState })\n\n const response = await fetch(`/mixtapes/${mixtapeSerializer.id}`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": mm.csrf,\n },\n body: JSON.stringify({\n mixtape: {\n secret: newState,\n },\n }),\n })\n if (!response.ok) {\n setMixtapeDetails({ ...mixtapeDetails, is_secret: !newState })\n return\n }\n }\n\n const toggleJoinUnjoin = async () => {\n const result = await fetch(\n `/mixtapes/${mixtapeSerializer.id}/${\n mixtapeDetails.includes_current_user ? \"leave\" : \"join\"\n }`,\n {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": mm.csrf,\n },\n }\n )\n if (!result.ok) {\n return\n }\n const response = await result.json()\n if (response.success) {\n setMixtapeDetails({\n ...mixtapeDetails,\n includes_current_user: !mixtapeDetails.includes_current_user,\n })\n }\n }\n\n const toggleMakeCollaborative = async () => {\n const result = await fetch(`/mixtapes/${mixtapeSerializer.id}`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": mm.csrf,\n },\n body: JSON.stringify({\n mixtape: {\n collaborative: mixtapeDetails.all_collaborative ? \"no\" : \"all\",\n },\n }),\n })\n if (!result.ok) {\n return\n }\n setMixtapeDetails({ ...mixtapeDetails, all_collaborative: !mixtapeDetails.all_collaborative })\n }\n\n const handleDownloadSuccess = (data) => {\n if (downloadUrl !== \"\") return\n if (data.success) {\n setDownloadUrl(data.url)\n } else {\n setIsDownloading(false)\n }\n }\n\n const handleCloseModal = (e) => {\n setDownloadUrl(\"\")\n setIsDownloading(false)\n }\n\n useEffect(() => {\n if (downloadUrl) {\n downloadButtonRef.current?.click()\n }\n }, [downloadUrl])\n\n return (\n {displayText()}
\n\n {status !== \"timeout\" && status !== \"error\" && children}\n
\n \n
\n )\n}\n\nexport default MixtapeActions\n","import SvgIcon from \"../shared/components/SvgIcon\"\n\nconst MixtapeIcon = () => {\n return (\n \n )\n}\n\nexport default MixtapeIcon\n","import { useContext, useState, useRef } from \"react\"\nimport { MixtapePageContext } from \"./MixtapePageContainer\"\nimport MixtapeIcon from \"../../icons/MixtapeIcon\"\n\nconst MixtapeDetails = () => {\n const {\n user_role,\n is_owner,\n mixtapeDetails,\n mixtapeSerializer,\n setMixtapeDetails,\n setMixtapeSerializer,\n } = useContext(MixtapePageContext)\n const { updated_at, created_at } = mixtapeDetails\n const [isEditing, setIsEditing] = useState(false)\n const [newName, setNewName] = useState(mixtapeSerializer.name)\n const [newDescription, setNewDescription] = useState(mixtapeDetails.description)\n const labelRef = useRef(null)\n const descriptionRef = useRef(null)\n\n var updated_at_array = new Date(updated_at).toString().split(\" \")\n var created_at_array = new Date(created_at).toString().split(\" \")\n var readableUpdatedAt = `${updated_at_array[1]} ${updated_at_array[2]} ${updated_at_array[3]}`\n var readableCreatedAt = `${created_at_array[1]} ${created_at_array[2]} ${created_at_array[3]}`\n\n const handleEdit = (e) => {\n e.target.focus()\n setIsEditing(true)\n }\n\n const handleCancel = () => {\n setNewName(mixtapeSerializer.name)\n setNewDescription(mixtapeDetails.description)\n setIsEditing(false)\n }\n\n const handleSubmit = async (e) => {\n e.preventDefault()\n if (newName.trim().length === 0 || newDescription.trim().length === 0) {\n return\n }\n\n const response = await fetch(`/mixtapes/${mixtapeSerializer.id}`, {\n method: \"PUT\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"X-CSRF-Token\": mm.csrf,\n },\n body: JSON.stringify({\n mixtape: {\n description: newDescription,\n name: newName,\n },\n }),\n })\n if (!response.ok) {\n console.log(\"ERROR: Unable to perform action at this time\")\n setNewDescription(mixtapeDetails.description)\n setNewName(mixtapeSerializer.name)\n setIsEditing(false)\n return\n }\n // IF fetch succeeds\n setMixtapeDetails({ ...mixtapeDetails, description: newDescription })\n setMixtapeSerializer({ ...mixtapeSerializer, name: newName })\n setIsEditing(false)\n }\n\n return (\n <>\n \n \n \n )}\n handleHover(\"Delete\")}\n onMouseOut={() => handleHover(\"\")}\n onClick={handleDeleteMixtape}\n >\n \n
\n \n {isDownloading && (\n \n )}\n
\n {downloadUrl !== \"\" && (\n \n
\n \n \n \n \n \n \n
\n \n
\n \n
\n Your download is ready!
\n\n If your download has not started yet, click the link below.\n
\n\n
- \n
\n
\n {actionHoverText}
\n \n
\n \n \n {/* THIS WAS FOR Animating, which we won't do anymore, however it is now just used for spacing*/}\n
\n\n \n
\n\n \n
\n \n \n \n
\n\n \n \n \n
\n\n \n
\n {mixtapeSerializer.name}
\n Marmoset Mixtape
\n \n
\n \n ) : (\n <>\n \n
\n \n {is_owner ? (\n {mixtapeSerializer.name}
\n\n
\n \n )}\n \n {mixtapeDetails.description != \"\" && mixtapeDetails.description}
\n\n
\n\n {mixtapeDetails.collaborative_in_some_way && mixtapeDetails.collaborators != \"\" && (\n - \n
- {`Song Count: ${mixtapeDetails.song_version_count}`} \n
- {mixtapeDetails.runtime} \n
- {mixtapeDetails.is_secret ? \"Secret\" : \"Public\"} \n
- \n Curated by \n {mixtapeDetails.owner_name}\n on \n \n \n
- \n Last updated \n \n \n
\n
\n )}\n Collaborators:
\n{mixtapeDetails.collaborators}
\n- \n
\n \n \n \n {/**className=\"mm-song-versions-table-list <%= 'hide' if song_versions.nil? %>\" */}\n
\n - \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n {mixtapeDetails.collaborative_in_some_way && !mixtapeDetails.staff_pick && (\n
- Collaborator \n )}\n
\n \n \n {(provided, snapshot) => (\n \n \n
\n \n \n
\n )}\n \n {loading && (\n
\n )\n}\n\nexport default YoutubeVideoPlayer\n","import { useEffect, useState, useRef } from \"react\"\nimport SongItemBeta from \"../../shared/components/SongItemBeta\"\nimport cx from \"classnames\"\n\nconst SongsContainer = ({ songs, user_role }) => {\n const currentBlanketDealModalRef = useRef(null)\n const thisContainerRef = useRef(null)\n const [expandedSongVersionId, setExpandedSongVersionId] = useState(false)\n\n const handleSetExpandedSongVersionId = (svid) => {\n setExpandedSongVersionId(svid)\n }\n\n const handleOnClick = (e) => {\n if (\n // Not clicked in actions menu OR NOT clickd within this song version container\n (!e.target.closest([\".actions-menu\", \".expand-actions-menu\"]) ||\n !thisContainerRef.current.contains(e.target)) &&\n // AND Not clicked within the blanket deal modal currently open\n !(currentBlanketDealModalRef.current && currentBlanketDealModalRef.current.contains(e.target))\n ) {\n setExpandedSongVersionId(false)\n }\n }\n\n useEffect(() => {\n //For some reason these seem to break the SelectBlanketOrderModals\n document.body.addEventListener(\"click\", handleOnClick)\n\n return () => {\n document.body.removeEventListener(\"click\", handleOnClick)\n }\n }, [])\n\n return !songs[0] ? ( //Done loading but there are no songs\n \n ) : (\n //Done loading, also there are songs\n \n \n
\n )}\n \n
\n \n {/* \n \n
\n )\n}\n\nexport default SongsContainer\n","import cx from \"classnames\"\nimport { SimilaritySearchContext } from \"./SimilaritySearchContainer\"\nimport { useContext } from \"react\"\nimport FilterInstrumentalIcon from \"../../icons/FilterInstrumentalIcon\"\nimport FilterVocalsIcon from \"../../icons/FilterVocalsIcon\"\nimport FilterVocalsFemaleIcon from \"../../icons/FilterVocalsFemaleIcon\"\nimport FilterVocalsMaleIcon from \"../../icons/FilterVocalsMaleIcon\"\n\nconst SimilaritySearchFilters = () => {\n //false here is a placeholder for when we plan to change how we display filters\n return (\n You May Also Like
*/}\n\n
\n - \n
- \n
- \n
- Song / Artist \n
- Genres \n
- Arc™ \n
- \n Energy\n \n
- Length \n
\n {songs.map((song) => (\n
- \n
- \n Search & Browse\n \n
- \n \n AI Similarity Search (beta)\n \n \n
\n \n
\n )}\n {isLoadingSpotify ? (\n \n {failedSearchMessage}\n
\n ) : (\n <>\n )}\n {/** Show songs here */}\n {songs[0] && !isProcessing && !isLoadingSpotify && (\n - \n {steps.map((step, index) => {\n return (\n
{children && renderCurrentStep()}
\n \n \n
\n )\n}\n\nconst VendorSelection = () => {\n const { formState, setFormState, next, userRole, defaultVendors } = useContext(FormContext)\n const validationSchema = yup.object({\n vendor: yup.object().required(\"Vendor is required\"),\n })\n\n const searchContributors = async (query) => {\n return await axios\n .get(\"/api/v1/vendors/artist_form_autocomplete\", { params: { query } })\n .then((response) => response.data)\n .catch((error) => {\n console.log(error)\n return []\n })\n }\n\n return (\n \n \n
\n \n {currentStep === 3 && (\n
\n \n
\n )}\n \n Marmoset is committed to equity as the foundation of everything we do, and\n self-identification by our creative partners plays a critical role in this effort.\n This enables us to provide transparency to our staff and clients, as well as celebrate\n our community during important cultural moments.\n
\n\n *This info isn’t just for our records: Increasingly clients are requesting music by\n artists that are local to a specific area, or artists with a specific identity for a\n project that centers members of that community.\n
\n\n When you provide self-identification, it provides us with another tool we can use to\n pitch your music for projects. If you don’t provide this information, we do not make\n assumptions on your behalf. If we don’t have the info, we won’t be able to include you\n in relevant opportunities.\n
\n\n Of course, you are welcome to opt out of any/all questions - simply type “Prefer not\n to say.” You can also let us know any information you'd like us to keep private.\n
\n\n
\n {message === \"\" ? \"Success!\" : message}\n \n Click here to view in portal\n \n \n ) : (\n \n )\n}\n\nexport default NewArtistFormContainer\n","import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport axios from \"axios\"\nimport {\n ApolloClient,\n ApolloProvider,\n InMemoryCache,\n createHttpLink,\n ApolloLink,\n concat,\n} from \"@apollo/client\"\nimport \"../../stylesheets/index.scss\"\n\n// components\nimport AccountContainer from \"./pages/account/AccountContainer\"\nimport AnthologyContainer from \"./pages/anthology/AnthologyContainer\"\nimport ArtistCollabsContainer from \"./pages/artist_collabs/ArtistCollabsContainer\"\nimport ArtistResidencyContainer from \"./pages/artist_residency/ArtistResidencyContainer\"\nimport ArtistsContainer from \"./pages/artists/ArtistsContainer\"\nimport BrowseBetaContainer from \"./pages/browse/BrowseBetaContainer\"\nimport BrowseFeaturedMixtapesContainer from \"./pages/browse_featured_mixtapes/BrowseFeaturedMixtapesContainer\"\nimport CheckoutContainer from \"./pages/checkout/CheckoutContainer\"\nimport ContactContainer from \"./pages/contact/ContactContainer\"\nimport CollaborationsContainer from \"./pages/collaborations/CollaborationsContainer\"\nimport CustomRequestFormContainer from \"./pages/custom_request/CustomRequestFormContainer\"\nimport CareersContainer from \"./pages/careers/CareersContainer\"\nimport DownloadSongVersions from \"./pages/download_song_versions/DownloadSongVersions\"\nimport GivingBackContainer from \"./pages/giving_back/GivingBackContainer\"\nimport HelpContainer from \"./pages/help/HelpContainer\"\nimport HomeContainer from \"./pages/home/HomeContainer\"\nimport LabelPartnershipsContainer from \"./pages/label_partnerships/LabelPartnershipsContainer\"\nimport MixtapesContainer from \"./pages/mixtapes/MixtapesContainer\"\nimport MusicLicensingContainer from \"./pages/music_licensing/MusicLicensingContainer\"\nimport OrderHistoryContainer from \"./pages/order_history/OrderHistoryContainer\"\nimport OurWorkContainer from \"./pages/our_work/OurWorkContainer\"\nimport PrismicTestContainer from \"./pages/prismic_test/PrismicTestContainer\"\nimport PrismicDevTestContainer from \"./pages/prismic_dev_test/PrismicDevTestContainer\"\nimport ProjectSearchContainer from \"./pages/project_search/ProjectSearchContainer\"\nimport PurposeContainer from \"./pages/purpose/PurposeContainer\"\nimport PrismicPreviewEndpoint from \"./pages/prismic_preview/PrismicPreviewEndpoint\"\nimport PrismicDraftContainer from \"./pages/prismic_draft/PrismicDraftContainer\"\nimport PodcastLicenseContainer from \"./pages/podcast_license/PodcastLicenseContainer\"\nimport ReelLicenseContainer from \"./pages/reel_license/ReelLicenseContainer\"\nimport StudioContainer from \"./pages/studio/StudioContainer\"\nimport SongsContainer from \"./pages/song_version/SongsContainer\"\nimport StyleGuideContainer from \"./pages/style_guide/StyleGuideContainer\"\nimport SubmissionsFormContainer from \"./pages/submissions/SubmissionsFormContainer\"\nimport SelectBlanketOrderModal from \"./shared/components/SelectBlanketOrderModal\"\nimport TeamContainer from \"./pages/team/TeamContainer\"\nimport WhatWeDoContainer from \"./pages/what_we_do/WhatWeDoContainer\"\nimport WeddingLicenseContainer from \"./pages/wedding_license/WeddingLicenseContainer\"\nimport ArtistPageContainer from \"./pages/artist/ArtistPageContainer\"\nimport SongVersionsContainer from \"./pages/song_version/SongVersionsContainer\"\nimport SongVersionPageContainer from \"./pages/song_version/SongVersionPageContainer\"\nimport ReceiptNextSteps from \"./pages/receipt/ReceiptNextSteps\"\nimport MixtapePageContainer from \"./pages/mixtape/MixtapePageContainer\"\nimport SimilaritySearchContainer from \"./pages/similarity_search/SimilaritySearchContainer\"\nimport BCorpContainer from \"./pages/giving_back/GivingBackContainer\"\nimport NewArtistFormContainer from \"./pages/forms/NewArtistFormContainer\"\n\nconst csrfArr = []\n\nconst httpLink = createHttpLink({\n uri: \"/api/graphql\",\n})\n\nconst csrfToken =\n window._rails_env == \"test\" ? \"\" : document.querySelector('meta[name=\"csrf-token\"]').content\n\nlet authMiddleware = new ApolloLink((operation, forward) => {\n operation.setContext({\n headers: {\n \"X-CSRF-Token\": csrfToken,\n },\n })\n\n return forward(operation)\n})\n\n// TODO: Worth looking into using ApolloClient as a state management solution.\n// Looks to persist between pages and is singleton.\n// NOTE: Likely wouldn't persist between page if it weren't for backbone hijacking navigation.\nlet client = new ApolloClient({\n // connectToDevTools: true, //uncomment if you want to connect with apollo client on dev\n link: concat(authMiddleware, httpLink),\n cache: new InMemoryCache(),\n})\n\naxios.defaults.headers.common[\"X-CSRF-Token\"] = csrfToken\n\nconst containers = [\n { component: