Add Google Play Music

[NovaGL]

Issue: Closes #3124

Checklist

• I updated the JSON data in _data/simple-icons.json
• I optimized the icon with SVGO or SVGOMG
• The SVG viewbox is 0 0 24 24

I had to manually modify the icon as it's not available in monochrome.

SVG Source: https://commons.wikimedia.org/wiki/File:Google_Play_Music_icon_(2016).svg

[PeterShaggyNoble]

Thanks for the contribution, @NovaGL 👍

If they're only discontinuing the music service and not the app then I think we're OK to add this. If however, they're discontinuing both I don't see much point in adding it just to remove it again in a few weeks/months, unless they have a pretty lengthy roadmap to discontinuation.

Don't have time right now to do a full review of the SVG but that treatment looks great to me, nice work. There is, however, an official vector version available here that we can compare to. Scratch that, it looks like the version on Wikimedia is based on the preloader on the website:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 192 192"><path fill="none" d="M0 0h192v192H0z"></path><path fill="none" d="M0 0h192v192H0z"></path><path fill="#F4481E" d="M170.8 86.1L37.4 10.3c-5.7-3.2-10.8-2.9-13.9.1-2.2 2.1-3.4 5.5-3.4 9.9v151.3c0 4.4 1.3 7.8 3.4 9.9 3.2 3.1 8.2 3.4 13.9.1l133.4-75.8c9.6-5.4 9.6-14.2 0-19.7z"></path><linearGradient id="a" x1="98.986" x2="98.986" y1="183.667" y2="7.938" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#FFF" stop-opacity="0"></stop><stop offset="1" stop-color="#FFF" stop-opacity=".1"></stop></linearGradient><path fill="url(#a)" d="M170.8 86.1L37.4 10.3c-5.7-3.2-10.8-2.9-13.9.1-2.2 2.1-3.4 5.5-3.4 9.9v151.3c0 4.4 1.3 7.8 3.4 9.9 3.2 3.1 8.2 3.4 13.9.1l133.4-75.8c9.6-5.4 9.6-14.2 0-19.7z"></path><path fill="#FFF" d="M170.8 87.1L37.4 11.3c-9.6-5.4-17.4-.9-17.4 10v-1c0-11 7.8-15.5 17.4-10l133.4 75.8c5 2.8 7.4 6.6 7.1 10.4-.2-3.4-2.5-6.8-7.1-9.4z" opacity=".1"></path><path fill="#FFD119" d="M157.6 113.4c1.6-5.5 2.4-11.4 2.4-17.4 0-35.3-28.7-64-64-64S32 60.7 32 96c0 29.6 20.1 54.5 47.4 61.8l78.2-44.4z"></path><circle cx="96" cy="96" r="40" fill="#FF8C00"></circle><linearGradient id="b" x1="104.317" x2="119.241" y1="110.401" y2="136.25" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#991700" stop-opacity="0"></stop><stop offset="1" stop-color="#991700" stop-opacity=".1"></stop></linearGradient><path fill="url(#b)" d="M96 32c-35.3 0-64 28.7-64 64 0 29.6 20.1 54.5 47.4 61.8l78.2-44.4c1.6-5.5 2.4-11.4 2.4-17.4 0-35.3-28.7-64-64-64z"></path><image width="47" height="60" opacity=".15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAeCAYAAAA2Lt7lAAACRElEQVRIx8WW627TQBCFv3WcBhNICqUgLqWAWgmBeP9HQQhBKygtFLVNGifk4mT5cxYNJk7WEQhLIyW79pyZ2TNnFv7x42q+a81+75dYLQAHNIAtoClLzP4CKIApMAPmWiOt4TwDusA2cEtgiaKdAkOgB/SBUcgkjcwgBW4Dj4FnwEOgLeCFHH4DjvV+yMLHZtAUwBPgNXAA3NF6oaiPBHat/5NNSnQX2BPArr6fARcq02fghtZdLEAASfVxW2eQaX2+rrZsQNUCGKj2PeAc+AJcAmPt+7oAzhzgQM7OgFMd8KlK1Nc7fpMMvEqSq+5vgffAV+BK9lcAxsrgBPigTIZizi+KxgC4Coko5Cw3zfVDNP1NKqoAElGzYdjTMhLh5GwuK2zUq1gUON8SDTM574r3He0lJR3zMTQNXL+pLr0n6wjggZpsW9G6WI0JT+jWXWAfeCGHO2qsjn63VfOkDoArCdor4A3wXNlkKs2Wop8YAB8L0FSUj4BD4CXwVGupcTiyWrNurpQB2hK0+7IQfWJ0Z2z64Q9argKwgpYZWjbMYAnTa6oyTQ09fRXfy526MOZLM7dQBrkRu1lMBlYCBmJJru4MvTGXHFxJPb9ruExWSbYFmMnpuTRmRxl2zGDpayweSz17KlNlBo0lnWylYKwoLyRoR8A7qehHZTEKN4h1GRQqwZnWcuCTuripSPvaP5FE51UatIy/IfqW6NpV42XKtNCZhDMaCnQRC1Cma7hghabySy5Xfl0nuxrXRKquh//1+Qkzq84AfAz5xAAAAABJRU5ErkJggg==" transform="translate(75 68)"></image><path fill="#FAFAFA" d="M96 75v24.6c-1.4-.8-3-1.3-4.7-1.3-5.2 0-9.3 4.2-9.3 9.3 0 5.2 4.2 9.3 9.3 9.3 5.2 0 9.7-4.2 9.7-9.3V85h9V75H96z"></path><path fill="#FFF" d="M96 33c35.2 0 63.8 28.4 64 63.6V96c0-35.3-28.7-64-64-64S32 60.7 32 96v.5C32.3 61.4 60.8 33 96 33z" opacity=".3"></path></svg>

[NovaGL]

My understanding is they are changing the service side of things (online).

Meaning Google Play Music will still be used as the app for your local music but anything related to online will be moved to YouTube Music.

It would be odd to call an offline music player YouTube Music.

[ericcornelissen]

I would be surprised if they get rid Google Play Music entirely, especially in a few weeks or months 🤔 I think we can include it for now, unless there is a definitive source indicating that Google Play Music will be discontinued in the near future (which this article arguably is, but to me it seems that Google Play Music will still be around around our v4 release).

[PeterShaggyNoble]

Yeah, I can't find anything to say the app is being discontinued and the only timeline I can find is "later in 2020" so I think we can go ahead and add this. Even if they are discontinuing the app, it's not like everyone's going to immediately uninstall it from their devices.

Couple of things before we an merge this, though, @NovaGL:

1. From the SVG I posted above, I'd suggest we go with the more vibrant #f4481e for the colour.
2. Your SVG is coming in at just 23 high, can you scale that up to 24?
3. After scaling it up, there are a few differences between your version (in black below) and the one I provided.

If you based your icon on one available from this page, though, can you let us know and we'll compare to that instead? Probably just me being blind again, but I don't see any vector files available for download there.

[NovaGL]

Hi @PeterShaggyNoble

I've done those changes as requested. Sorry for all the commits, I'm just using the web browser for commits so don't know how to stage and then push them all at once.

For some reason the bottom looks worse on this version however it looks perfect in Illustrator.
I had to start again and use your source as a reference.

[PeterShaggyNoble]

Thanks for the update, @NovaGL

However, the SVG is coming in at 29.939 high now and the path isn't quite centred on the canvas. When resized and centred, there are a few new minor differences in your version (again, in black below) when compared to the original.

[NovaGL]

Thanks Peter. Weird about the height. It seems this logo is not as easy as I first thought. Looks like it might take me a few more attempts. I'll let you know.

[PeterShaggyNoble]

I took a quick stab at it myself, if it's any help to you. I went with a slightly thicker cut-out as it looks better at smaller sizes. But not as good at bigger sizes.

M 2.5078125,0 C 2.1838196,0.0068209 1.9048074,0.11959163 1.6933594,0.32421875 1.3932396,0.61069672 1.2304687,1.0755419 1.2304688,1.6757812 V 22.314453 C 1.2304688,22.914693 1.4068814,23.379538 1.6933594,23.666016 2.1298972,24.088912 2.8122605,24.129867 3.5898438,23.679688 L 9.3105469,20.427734 C 9.3139359,20.428645 9.3169218,20.430734 9.3203125,20.431641 L 9.328125,20.427734 C 5.6048066,19.430193 2.8535156,16.036774 2.8535156,12.001953 2.8535155,7.9651534 5.6078822,4.5718416 9.3339844,3.5761719 L 3.5898438,0.31054688 C 3.201052,0.09227795 2.8318054,-0.0068209 2.5078125,0 Z M 11.583984,4.2714844 C 7.3083489,4.2714842 3.8535155,7.7263173 3.8535156,12.001953 3.8535156,15.962851 6.820522,19.213904 10.65625,19.671875 L 18.648438,15.134766 C 19.072966,14.176859 19.314453,13.118823 19.314453,12.001953 19.314453,7.7263175 15.85962,4.2714843 11.583984,4.2714844 Z M 11.583984,6.5449219 C 14.59789,6.5447513 17.041186,8.9880472 17.041016,12.001953 17.041186,15.015859 14.59789,17.459155 11.583984,17.458984 8.5700786,17.459154 6.1267831,15.015858 6.1269531,12.001953 6.126783,8.9880476 8.5700786,6.5447519 11.583984,6.5449219 Z M 11.583984,9.1367188 V 12.492188 C 11.392999,12.383053 11.17527,12.316406 10.943359,12.316406 10.233985,12.316406 9.6738281,12.888252 9.6738281,13.583984 9.6738281,14.293358 10.247627,14.853516 10.943359,14.853516 11.652733,14.853516 12.265625,14.279716 12.265625,13.583984 V 10.501953 H 13.494141 V 9.1367188 Z M 19.976562,9.6210938 C 20.19183,10.379141 20.314453,11.175594 20.314453,12.001953 20.314453,12.827652 20.191498,13.623351 19.976562,14.380859 L 19.986328,14.375 C 19.987809,14.369909 19.988763,14.364471 19.990234,14.359375 L 21.787109,13.337891 C 23.096723,12.601233 23.096723,11.400691 21.787109,10.650391 Z

[NovaGL]

Looks good to me. I'm happy to go with that.
I'm not a designer so these things are a bit hard for me.

[PeterShaggyNoble]

I'm not a designer

Me, either, and ...

these things are a bit hard for me

Me too! I gets a bit easier with practice, though. I'm still not entirely happy with the cut-out on mine; I think we lose too much of the filled circle.

[NovaGL]

I think you might be being a bit hard on yourself. This logo is not really meant for monochrome so it's gonna be hard for anyone

[PeterShaggyNoble]

I think you might be being a bit hard on yourself.
The bane of being a perfectionist! 😆

Gave it another try with different sized cut-outs; the one above was 1px, the first one below is .5px and the second one is .75px. Trying to strike a balance between the cut-out being visible and not losing too much of the circle so I think .75 might be the way to go. What do the other @simple-icons/maintainers think?

[ericcornelissen]

I'd say both 1 and 0.75 work well, 0.5 is definitely too little.

[NovaGL]

I personally like 0.75 the best as it looks good at all sizes. (I also think this matches most closely my initial suggestion for the icon)
1 looks good at small sizes but looks to different to the original at large sizes.

[PeterShaggyNoble]

Here's the unoptimised path data for that one, if you want to use it as a starting point, @NovaGL

M 2.5078125 0 C 2.1838196 0.0068209 1.9048074 0.11959163 1.6933594 0.32421875 C 1.3932396 0.61069672 1.2304687 1.0755419 1.2304688 1.6757812 L 1.2304688 22.314453 C 1.2304688 22.914693 1.4068814 23.379538 1.6933594 23.666016 C 2.1298972 24.088912 2.8122605 24.129867 3.5898438 23.679688 L 9.3066406 20.429688 A 8.7309999 8.7309999 0 0 1 2.8535156 12.001953 A 8.7309999 8.7309999 0 0 1 9.3222656 3.5683594 L 3.5898438 0.31054688 C 3.201052 0.092277945 2.8318054 -0.0068209 2.5078125 0 z M 13.695312 3.53125 A 8.7309999 8.7309999 0 0 1 13.796875 3.5566406 C 13.763135 3.5477777 13.72921 3.5397163 13.695312 3.53125 z M 11.583984 3.6464844 A 8.3559999 8.3559999 0 0 0 3.2285156 12.001953 A 8.3559999 8.3559999 0 0 0 9.7929688 20.164062 L 19.509766 14.644531 A 8.3559999 8.3559999 0 0 0 19.939453 12.001953 A 8.3559999 8.3559999 0 0 0 11.583984 3.6464844 z M 14.392578 3.7363281 A 8.7309999 8.7309999 0 0 1 14.460938 3.7597656 C 14.438214 3.7517967 14.415387 3.7441133 14.392578 3.7363281 z M 11.583984 6.5449219 A 5.4567232 5.4567232 0 0 1 17.041016 12.001953 A 5.4567232 5.4567232 0 0 1 11.583984 17.458984 A 5.4567232 5.4567232 0 0 1 6.1269531 12.001953 A 5.4567232 5.4567232 0 0 1 11.583984 6.5449219 z M 11.583984 9.1367188 L 11.583984 12.492188 C 11.392999 12.383053 11.17527 12.316406 10.943359 12.316406 C 10.233985 12.316406 9.6738281 12.888252 9.6738281 13.583984 C 9.6738281 14.293358 10.247627 14.853516 10.943359 14.853516 C 11.652733 14.853516 12.265625 14.279716 12.265625 13.583984 L 12.265625 10.501953 L 13.494141 10.501953 L 13.494141 9.1367188 L 11.583984 9.1367188 z M 19.984375 9.625 A 8.7309999 8.7309999 0 0 1 20.314453 12.001953 A 8.7309999 8.7309999 0 0 1 19.990234 14.359375 L 21.787109 13.337891 C 23.096723 12.601233 23.096723 11.400691 21.787109 10.650391 L 19.984375 9.625 z M 19.990234 14.359375 A 8.7309999 8.7309999 0 0 1 19.984375 14.376953 L 19.986328 14.375 C 19.987809 14.369909 19.988763 14.364471 19.990234 14.359375 z 

And, to help you with your future contributions or if you'd like to try to recreate what I did, here's a quick step-by-step:

1. Delete all the unncessary paths so you're just left with four, one for each shape
2. Group them all together
3. Resize your canvas to 24*24
4. Resize the grouped paths to 24 high, centre them on the canvas and ungroup them again
5. Take a note of the coordinates & width of the larger circle
   (Inkscape gives me: x=2.853, y=3.271 & w=17.462)
6. Merge the large circle with the triangle
7. Knock the the smaller circle out of the resulting path
8. Merge that path with the note
9. Draw a circle using the coordinates & dimensions from step 5, using w for the height so it's a perfect circle
10. Draw another circle but set the width & height to 17.462-.75=16.712, the x coordinate to 2.853+.375=3.228 and the y coordinate to 3.271+.375=3.646
11. Knock that circle out of the one from step 9
12. Knock the resulting path out of the path from step 8

[PeterShaggyNoble]

Thanks for the update, @NovaGL, looks good to me now (but I would say that! 😆)

A couple of minor things to fix:

1. The optimised path is coming in at 24.001 high
2. There are a couple of unnecessary points above the circle which should be removed - I didn't spot that they had crept into my version.

[NovaGL]

Hopefully this is good now. If not I might need you to look into it @PeterShaggyNoble

It seems to not like my PC and I couldn't even see those small dots unless I reloaded your path.

[PeterShaggyNoble]

Nice work, @NovaGL

I'm noticing a couple of hairline differences around the edges between your version and mine, though. As this is an original interpretation of the logo, it's not the end of the world, but could you try a precision of 4 'til we see how that looks?